Skip to content

Commit

Permalink
🐛 fix: 修复edge根据level重排错误 (#18)
Browse files Browse the repository at this point in the history 
* 🐛 fix: build

* 🐛 fix: react-flow-attribution remove

* ✨ feat: edge border raduis type

* 🐛 feat: eslint config

* ✨ feat: border radius edge

* 📝 fix: 删除不必要的demo配置

* 📝 feat: radius edge memo update

* 📝 feat: 简化圆角线段组件的demo示例

* ✨ feat: 更新proflow配置的类型

* ✨ feat: 更新proflow点击 拖拽事件触发结构

* ✨ feat: add reactflow css

* ✨ feat: add component docs

* ✨ feat: add transfer font with zoom

* ✨ feat: add transfer font with zoom for blood group node

* ✨ feat: add edge select

* ✨ feat: add edge select type

* 🐛 fix: ci bug

* ✨ feat: 新增title行的slot能力,可以插入自定义模块

* ✨ feat: 新增node节点的sub选中类型

* ✨ feat: 新增edge的sub select类型

* ✨ feat: edge 展示level区分优先级

* ✨ feat: 新增smoothstp类型的edge作为默认

* 🔥 feat: 删除console

* ✨ feat: 新增proflowcontroller的classname

* 🐛 fix: edge select 重排错误

---------

Co-authored-by: jiangchu <[email protected]>
  • Loading branch information
@ModestFun
ModestFun and jiangchu authored Oct 23, 2023
1 parent 357031f commit 5b77b25
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 74 deletions.
68 changes: 32 additions & 36 deletions src/ProFlow/demos/ProFlowDemo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { EdgeType, NodeSelect, ProFlowNode } from '@/index';
import { NodeSelect, ProFlowEdge, ProFlowNode } from '@/index';
import { Progress } from 'antd';
import { createStyles } from 'antd-style';
import { memo } from 'react';
import { memo, useState } from 'react';
import styled from 'styled-components';
import ProFlow from '..';

Expand Down Expand Up @@ -51,7 +51,6 @@ const DangerLogo = styled.div`
const nodes: ProFlowNode[] = [
{
id: 'a1',
select: NodeSelect.SELECT,
label: '123',
data: {
title: 'XXX数据源',
Expand All @@ -61,7 +60,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'b1',
select: NodeSelect.SUB_SELECT,
data: {
title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -83,7 +81,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'b2',
select: NodeSelect.SUB_DANGER,
data: {
title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -96,7 +93,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'b3',
select: NodeSelect.SUB_WARNING,
data: {
title: 'XXX_API_b3',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -105,7 +101,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'b4',
select: NodeSelect.DEFAULT,
data: {
title: 'XXX_API_b4',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -114,7 +109,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'c1',
select: NodeSelect.WARNING,
data: {
title: 'XXXX产品',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -124,12 +118,10 @@ const nodes: ProFlowNode[] = [
{
id: 'd1',
group: true,
select: NodeSelect.SUB_SELECT,
label: '456',
data: [
{
id: 'a5',
select: NodeSelect.SELECT,
data: {
title: 'XXX数据源',
describe: 'cksadjfnf',
Expand All @@ -138,7 +130,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'a6',
select: NodeSelect.DANGER,
data: {
title: 'XXX_API',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -147,7 +138,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'a7',
select: NodeSelect.WARNING,
data: {
title: 'XXXX产品',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -156,7 +146,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'a8',
select: NodeSelect.SELECT,
data: {
title: 'XXX数据源',
describe: 'cksadjfnf',
Expand All @@ -165,7 +154,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'a9',
select: NodeSelect.DANGER,
data: {
title: 'XXX_API',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -174,7 +162,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'a10',
select: NodeSelect.WARNING,
data: {
title: 'XXXX产品',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -183,7 +170,6 @@ const nodes: ProFlowNode[] = [
},
{
id: 'a11',
select: NodeSelect.WARNING,
data: {
title: 'XXXX产品',
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
Expand All @@ -194,78 +180,88 @@ const nodes: ProFlowNode[] = [
},
];

const edges = [
const edges: ProFlowEdge[] = [
{
id: 'a1-b1',
source: 'a1',
select: NodeSelect.SUB_WARNING,
target: 'b1',
type: EdgeType.default,
},
{
id: 'a1-b2',
source: 'a1',
select: NodeSelect.SUB_WARNING,
target: 'b2',
type: EdgeType.default,
},
{
id: 'a1-b3',
source: 'a1',
select: NodeSelect.SUB_DANGER,
target: 'b3',
type: EdgeType.default,
},
{
id: 'a1-b4',
source: 'a1',
select: NodeSelect.SUB_SELECT,
target: 'b4',
type: EdgeType.default,
},

{
id: 'b2-c1',
source: 'b2',
select: NodeSelect.WARNING,
target: 'c1',
type: EdgeType.default,
},
{
id: 'b3-c1',
source: 'b3',
select: NodeSelect.WARNING,
target: 'c1',
type: EdgeType.default,
},
{
id: 'b1-c1',
source: 'b1',
select: NodeSelect.WARNING,
target: 'c1',
type: EdgeType.default,
},
{
id: 'b4-c1',
source: 'b4',
select: NodeSelect.WARNING,
target: 'c1',
type: EdgeType.default,
},
{
id: 'c1-d1',
source: 'c1',
select: NodeSelect.WARNING,
target: 'd1',
type: EdgeType.default,
},
];

const ProFlowDemo = memo(() => {
const [_nodes, setNodes] = useState<ProFlowNode[]>([...nodes]);
const [_edges, setEdges] = useState<ProFlowEdge[]>([...edges]);
const { styles } = useStyles();

const handleHighlight = (node: ProFlowNode) => {
console.log(node);

setEdges(
edges.map((edge) => {
if (edge.source === node.id || edge.target === node.id) {
edge.select = NodeSelect.SUB_SELECT;
}
return {
...edge,
};
}),
);
};

const handleUnHighlight = () => {
setNodes(nodes);
setEdges(edges);
};

return (
<div className={styles.container}>
<ProFlow nodes={nodes} edges={edges} />
<ProFlow
onNodeDragStart={(e, node: any) => handleHighlight(node)}
onPaneClick={handleUnHighlight}
nodes={_nodes}
edges={_edges}
/>
</div>
);
});
Expand Down
82 changes: 44 additions & 38 deletions src/ProFlow/helper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,19 @@ export function setNodePosition(nodes: Node[], edges: Edge[]) {
}

function sortEdges(edges: Edge[]) {
const highEdges: Edge[] = edges.filter((item) =>
item.className?.includes('initialNode-selected'),
console.log(edges);
const highEdges: Edge[] = edges.filter((item) => {
return item.className?.includes('edgeSelected') || item.className?.includes('edgeSubSelected');
});
const midEdges: Edge[] = edges.filter(
(item) => item.className?.includes('edgeDanger') || item.className?.includes('edgeSubDanger'),
);
const midEdges: Edge[] = edges.filter((item) => item.className?.includes('edgeDanger'));
const lowEdges: Edge[] = edges.filter(
(item) =>
!item.className?.includes('initialNode-selected') && !item.className?.includes('edgeDanger'),
!item.className?.includes('edgeSelected') &&
!item.className?.includes('edgeSubSelected') &&
!item.className?.includes('edgeDanger') &&
!item.className?.includes('edgeSubDanger'),
);

return [...lowEdges, ...midEdges, ...highEdges];
Expand All @@ -115,43 +121,43 @@ function getEdgeClsFromNodeSelect(select: NodeSelect) {
}
}

function getEdgeLevel(select: NodeSelect) {
switch (select) {
case NodeSelect.SELECT:
return 6;
case NodeSelect.SUB_SELECT:
return 5;
case NodeSelect.DANGER:
return 4;
case NodeSelect.SUB_DANGER:
return 3;
case NodeSelect.WARNING:
return 2;
case NodeSelect.SUB_WARNING:
return 1;
default:
return 0;
}
}
// function getEdgeLevel(select: NodeSelect) {
// switch (select) {
// case NodeSelect.SELECT:
// return 6;
// case NodeSelect.SUB_SELECT:
// return 5;
// case NodeSelect.DANGER:
// return 4;
// case NodeSelect.SUB_DANGER:
// return 3;
// case NodeSelect.WARNING:
// return 2;
// case NodeSelect.SUB_WARNING:
// return 1;
// default:
// return 0;
// }
// }

export function getRenderEdges(edges: ProFlowEdge[]) {
return edges
.sort((a, b) => {
const aLevel = a.select ? getEdgeLevel(a.select) : 0;
const bLevel = b.select ? getEdgeLevel(b.select) : 0;
return aLevel - bLevel;
})
.map((edge) => {
const { source, target, select = NodeSelect.DEFAULT } = edge;
return edges.map((edge) => {
const { source, target, select = NodeSelect.DEFAULT } = edge;

return {
id: `${source}-${target}`,
source,
target,
type: 'smoothstep',
className: getEdgeClsFromNodeSelect(select),
};
});

return {
id: `${source}-${target}`,
source,
target,
type: 'smoothstep',
className: getEdgeClsFromNodeSelect(select),
};
});
// .sort((a, b) => {
// const aLevel = a.select ? getEdgeLevel(a.select) : 0;
// const bLevel = b.select ? getEdgeLevel(b.select) : 0;
// return aLevel - bLevel;
// })
}

export const getRenderData = (
Expand Down

0 comments on commit 5b77b25

Please sign in to comment.