Skip to content

Commit 6d7a99d

Browse files
DanielLeefuDanielLeefu
authored
feat: add dag demo an update control (#435)
* feat: add flowchart * fix: ant-design/icons error * fix: control add graph scale event * fix: update graph control * fix: update control dependencies * fix: update control dependencies
1 parent e836ab1 commit 6d7a99d

File tree

12 files changed

+317
-239
lines changed

12 files changed

+317
-239
lines changed

‎apps/basic/src/pages/dag/execute-all/index.tsx

-67
This file was deleted.

‎apps/basic/src/pages/dag/index.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ConfigDrawer } from './config-drawer';
44
import { Connect } from './connect';
55
import { Dnd } from './dnd/dnd';
66
import styles from './index.less';
7+
import { InitShape } from './node';
78
import { DAG_EDGE, DAG_CONNECTOR } from './shape';
89
import { Toolbar } from './toolbar';
910

@@ -37,14 +38,11 @@ const Page = () => {
3738
}}
3839
connectionEdgeOptions={{
3940
shape: DAG_EDGE,
40-
attrs: {
41-
line: {
42-
strokeDasharray: '5 5',
43-
},
44-
},
41+
animated: true,
4542
zIndex: -1,
4643
}}
4744
/>
45+
<InitShape />
4846
<Clipboard />
4947
<Connect />
5048
<div className={styles.controlTool}>

‎apps/basic/src/pages/dag/node.tsx

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import { useGraphStore } from '@antv/xflow';
2+
import { useCallback, useEffect } from 'react';
3+
4+
import { DAG_EDGE, DAG_NODE } from './shape';
5+
6+
const InitShape = () => {
7+
const addNodes = useGraphStore((state) => state.addNodes);
8+
const addEdges = useGraphStore((state) => state.addEdges);
9+
const updateNode = useGraphStore((state) => state.updateNode);
10+
const updateEdge = useGraphStore((state) => state.updateEdge);
11+
12+
const initEdge = useCallback(() => {
13+
addEdges([
14+
{
15+
id: 'initEdge1',
16+
shape: DAG_EDGE,
17+
source: {
18+
cell: 'initNode1',
19+
port: 'initNode1-1',
20+
},
21+
target: {
22+
cell: 'initNode2',
23+
port: 'initNode2-1',
24+
},
25+
animated: true,
26+
},
27+
{
28+
id: 'initEdge2',
29+
shape: DAG_EDGE,
30+
source: {
31+
cell: 'initNode2',
32+
port: 'initNode2-2',
33+
},
34+
target: {
35+
cell: 'initNode3',
36+
port: 'initNode3-1',
37+
},
38+
animated: true,
39+
},
40+
{
41+
id: 'initEdge3',
42+
shape: DAG_EDGE,
43+
source: {
44+
cell: 'initNode2',
45+
port: 'initNode2-3',
46+
},
47+
target: {
48+
cell: 'initNode4',
49+
port: 'initNode4-1',
50+
},
51+
animated: true,
52+
},
53+
]);
54+
}, [addEdges]);
55+
56+
const addNodeInit = useCallback(() => {
57+
addNodes([
58+
{
59+
id: 'initNode1',
60+
shape: DAG_NODE,
61+
x: 490,
62+
y: 200,
63+
data: {
64+
label: '读数据',
65+
status: 'success',
66+
},
67+
ports: [
68+
{
69+
id: 'initNode1-1',
70+
group: 'bottom',
71+
},
72+
],
73+
},
74+
{
75+
id: 'initNode2',
76+
shape: DAG_NODE,
77+
x: 490,
78+
y: 350,
79+
data: {
80+
label: '逻辑回归',
81+
status: 'running',
82+
},
83+
ports: [
84+
{
85+
id: 'initNode2-1',
86+
group: 'top',
87+
},
88+
{
89+
id: 'initNode2-2',
90+
group: 'bottom',
91+
},
92+
{
93+
id: 'initNode2-3',
94+
group: 'bottom',
95+
},
96+
],
97+
},
98+
{
99+
id: 'initNode3',
100+
shape: DAG_NODE,
101+
x: 320,
102+
y: 500,
103+
data: {
104+
label: '模型预测',
105+
status: 'running',
106+
},
107+
ports: [
108+
{
109+
id: 'initNode3-1',
110+
group: 'top',
111+
},
112+
{
113+
id: 'initNode3-2',
114+
group: 'bottom',
115+
},
116+
],
117+
},
118+
{
119+
id: 'initNode4',
120+
shape: DAG_NODE,
121+
x: 670,
122+
y: 500,
123+
data: {
124+
label: '读取参数',
125+
status: 'running',
126+
},
127+
ports: [
128+
{
129+
id: 'initNode4-1',
130+
group: 'top',
131+
},
132+
{
133+
id: 'initNode4-2',
134+
group: 'bottom',
135+
},
136+
],
137+
},
138+
]);
139+
setTimeout(() => {
140+
updateNode('initNode2', {
141+
data: {
142+
status: 'success',
143+
},
144+
});
145+
updateEdge('initEdge1', {
146+
animated: false,
147+
});
148+
}, 1000);
149+
setTimeout(() => {
150+
updateNode('initNode4', {
151+
data: {
152+
status: 'success',
153+
},
154+
});
155+
updateNode('initNode3', {
156+
data: {
157+
status: 'failed',
158+
},
159+
});
160+
updateEdge('initEdge2', {
161+
animated: false,
162+
});
163+
updateEdge('initEdge3', {
164+
animated: false,
165+
});
166+
}, 2000);
167+
}, [addNodes, updateNode, updateEdge]);
168+
169+
useEffect(() => {
170+
addNodeInit();
171+
initEdge();
172+
}, [addNodeInit, initEdge]);
173+
174+
return null;
175+
};
176+
177+
export { InitShape };

‎apps/basic/src/pages/dag/toolbar/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -90,15 +90,15 @@ const Toolbar = () => {
9090
style={{ fontSize: 12 }}
9191
onClick={handleExcute}
9292
>
93-
<PlayCircleOutlined rev />
93+
<PlayCircleOutlined />
9494
全部执行
9595
</Button>
9696
<Button type="primary" size="small" style={{ fontSize: 12 }} onClick={onCopy}>
97-
<PlayCircleOutlined rev />
97+
<PlayCircleOutlined />
9898
复制
9999
</Button>
100100
<Button type="primary" size="small" style={{ fontSize: 12 }} onClick={onPaste}>
101-
<PlayCircleOutlined rev />
101+
<PlayCircleOutlined />
102102
粘贴
103103
</Button>
104104
</Space>

‎apps/basic/src/pages/flow/dnd.tsx

-29
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useDnd } from '@antv/xflow';
33

44
import styles from './index.less';
55
import {
6-
CUSTOMIMAGE,
76
CUSTOMPROCESSNODE,
87
CUSTOMCOURSENODE,
98
CUSTOMVERIFYNODE,
@@ -45,34 +44,6 @@ const Dnd = () => {
4544
export { Dnd };
4645

4746
const list = [
48-
{
49-
type: 'Img',
50-
label: 'Client',
51-
node: {
52-
shape: CUSTOMIMAGE,
53-
label: 'Client',
54-
attrs: {
55-
image: {
56-
'xlink:href':
57-
'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
58-
},
59-
},
60-
},
61-
},
62-
{
63-
type: 'Img',
64-
label: 'Http',
65-
node: {
66-
shape: CUSTOMIMAGE,
67-
label: 'Http',
68-
attrs: {
69-
image: {
70-
'xlink:href':
71-
'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
72-
},
73-
},
74-
},
75-
},
7647
{
7748
type: 'Start',
7849
label: '开始',

‎apps/basic/src/pages/flow/edge.tsx

+14-5
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const InitEdge = () => {
4747
shape: CUSTOM_EDGE,
4848
source: {
4949
cell: 'initNode8',
50-
port: 'group2',
50+
port: 'group4',
5151
},
5252
target: {
5353
cell: 'initNode5',
@@ -79,16 +79,25 @@ const InitEdge = () => {
7979
},
8080
{
8181
shape: CUSTOM_EDGE,
82-
source: 'initNode12',
83-
target: 'initNode13',
82+
source: {
83+
cell: 'initNode12',
84+
port: 'group3',
85+
},
86+
target: {
87+
cell: 'initNode13',
88+
port: 'group1',
89+
},
8490
},
8591
{
8692
shape: CUSTOM_EDGE,
8793
source: {
8894
cell: 'initNode11',
89-
port: 'group3',
95+
port: 'group2',
96+
},
97+
target: {
98+
cell: 'initNode13',
99+
port: 'group4',
90100
},
91-
target: 'initNode13',
92101
},
93102
{
94103
shape: CUSTOM_EDGE,

0 commit comments

Comments
 (0)