feat: add dag demo an update control

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

@@ -4,6 +4,7 @@ import { ConfigDrawer } from './config-drawer';
 import { Connect } from './connect';
 import { Dnd } from './dnd/dnd';
 import styles from './index.less';
+import { InitShape } from './node';
 import { DAG_EDGE, DAG_CONNECTOR } from './shape';
 import { Toolbar } from './toolbar';
 
@@ -37,14 +38,11 @@ const Page = () => {
                 }}
                 connectionEdgeOptions={{
                   shape: DAG_EDGE,
-                  attrs: {
-                    line: {
-                      strokeDasharray: '5 5',
-                    },
-                  },
+                  animated: true,
                   zIndex: -1,
                 }}
               />
+              <InitShape />
               <Clipboard />
               <Connect />
               <div className={styles.controlTool}>

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

@@ -0,0 +1,177 @@
+import { useGraphStore } from '@antv/xflow';
+import { useCallback, useEffect } from 'react';
+
+import { DAG_EDGE, DAG_NODE } from './shape';
+
+const InitShape = () => {
+  const addNodes = useGraphStore((state) => state.addNodes);
+  const addEdges = useGraphStore((state) => state.addEdges);
+  const updateNode = useGraphStore((state) => state.updateNode);
+  const updateEdge = useGraphStore((state) => state.updateEdge);
+
+  const initEdge = useCallback(() => {
+    addEdges([
+      {
+        id: 'initEdge1',
+        shape: DAG_EDGE,
+        source: {
+          cell: 'initNode1',
+          port: 'initNode1-1',
+        },
+        target: {
+          cell: 'initNode2',
+          port: 'initNode2-1',
+        },
+        animated: true,
+      },
+      {
+        id: 'initEdge2',
+        shape: DAG_EDGE,
+        source: {
+          cell: 'initNode2',
+          port: 'initNode2-2',
+        },
+        target: {
+          cell: 'initNode3',
+          port: 'initNode3-1',
+        },
+        animated: true,
+      },
+      {
+        id: 'initEdge3',
+        shape: DAG_EDGE,
+        source: {
+          cell: 'initNode2',
+          port: 'initNode2-3',
+        },
+        target: {
+          cell: 'initNode4',
+          port: 'initNode4-1',
+        },
+        animated: true,
+      },
+    ]);
+  }, [addEdges]);
+
+  const addNodeInit = useCallback(() => {
+    addNodes([
+      {
+        id: 'initNode1',
+        shape: DAG_NODE,
+        x: 490,
+        y: 200,
+        data: {
+          label: '读数据',
+          status: 'success',
+        },
+        ports: [
+          {
+            id: 'initNode1-1',
+            group: 'bottom',
+          },
+        ],
+      },
+      {
+        id: 'initNode2',
+        shape: DAG_NODE,
+        x: 490,
+        y: 350,
+        data: {
+          label: '逻辑回归',
+          status: 'running',
+        },
+        ports: [
+          {
+            id: 'initNode2-1',
+            group: 'top',
+          },
+          {
+            id: 'initNode2-2',
+            group: 'bottom',
+          },
+          {
+            id: 'initNode2-3',
+            group: 'bottom',
+          },
+        ],
+      },
+      {
+        id: 'initNode3',
+        shape: DAG_NODE,
+        x: 320,
+        y: 500,
+        data: {
+          label: '模型预测',
+          status: 'running',
+        },
+        ports: [
+          {
+            id: 'initNode3-1',
+            group: 'top',
+          },
+          {
+            id: 'initNode3-2',
+            group: 'bottom',
+          },
+        ],
+      },
+      {
+        id: 'initNode4',
+        shape: DAG_NODE,
+        x: 670,
+        y: 500,
+        data: {
+          label: '读取参数',
+          status: 'running',
+        },
+        ports: [
+          {
+            id: 'initNode4-1',
+            group: 'top',
+          },
+          {
+            id: 'initNode4-2',
+            group: 'bottom',
+          },
+        ],
+      },
+    ]);
+    setTimeout(() => {
+      updateNode('initNode2', {
+        data: {
+          status: 'success',
+        },
+      });
+      updateEdge('initEdge1', {
+        animated: false,
+      });
+    }, 1000);
+    setTimeout(() => {
+      updateNode('initNode4', {
+        data: {
+          status: 'success',
+        },
+      });
+      updateNode('initNode3', {
+        data: {
+          status: 'failed',
+        },
+      });
+      updateEdge('initEdge2', {
+        animated: false,
+      });
+      updateEdge('initEdge3', {
+        animated: false,
+      });
+    }, 2000);
+  }, [addNodes, updateNode, updateEdge]);
+
+  useEffect(() => {
+    addNodeInit();
+    initEdge();
+  }, [addNodeInit, initEdge]);
+
+  return null;
+};
+
+export { InitShape };

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

@@ -90,15 +90,15 @@ const Toolbar = () => {
         style={{ fontSize: 12 }}
         onClick={handleExcute}
       >
-        <PlayCircleOutlined rev />
+        <PlayCircleOutlined />
         全部执行
       </Button>
       <Button type="primary" size="small" style={{ fontSize: 12 }} onClick={onCopy}>
-        <PlayCircleOutlined rev />
+        <PlayCircleOutlined />
         复制
       </Button>
       <Button type="primary" size="small" style={{ fontSize: 12 }} onClick={onPaste}>
-        <PlayCircleOutlined rev />
+        <PlayCircleOutlined />
         粘贴
       </Button>
     </Space>

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

@@ -3,7 +3,6 @@ import { useDnd } from '@antv/xflow';
 
 import styles from './index.less';
 import {
-  CUSTOMIMAGE,
   CUSTOMPROCESSNODE,
   CUSTOMCOURSENODE,
   CUSTOMVERIFYNODE,
@@ -45,34 +44,6 @@ const Dnd = () => {
 export { Dnd };
 
 const list = [
-  {
-    type: 'Img',
-    label: 'Client',
-    node: {
-      shape: CUSTOMIMAGE,
-      label: 'Client',
-      attrs: {
-        image: {
-          'xlink:href':
-            'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
-        },
-      },
-    },
-  },
-  {
-    type: 'Img',
-    label: 'Http',
-    node: {
-      shape: CUSTOMIMAGE,
-      label: 'Http',
-      attrs: {
-        image: {
-          'xlink:href':
-            'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
-        },
-      },
-    },
-  },
   {
     type: 'Start',
     label: '开始',

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

@@ -47,7 +47,7 @@ const InitEdge = () => {
         shape: CUSTOM_EDGE,
         source: {
           cell: 'initNode8',
-          port: 'group2',
+          port: 'group4',
         },
         target: {
           cell: 'initNode5',
@@ -79,16 +79,25 @@ const InitEdge = () => {
       },
       {
         shape: CUSTOM_EDGE,
-        source: 'initNode12',
-        target: 'initNode13',
+        source: {
+          cell: 'initNode12',
+          port: 'group3',
+        },
+        target: {
+          cell: 'initNode13',
+          port: 'group1',
+        },
       },
       {
         shape: CUSTOM_EDGE,
         source: {
           cell: 'initNode11',
-          port: 'group3',
+          port: 'group2',
+        },
+        target: {
+          cell: 'initNode13',
+          port: 'group4',
         },
-        target: 'initNode13',
       },
       {
         shape: CUSTOM_EDGE,