feat:config-components && add node status

apps/basic/src/pages/dag/config-drawer/index.tsx

@@ -0,0 +1,49 @@
+import type { Node } from '@antv/xflow';
+import { useGraphInstance } from '@antv/xflow';
+import { Drawer } from 'antd';
+import { useEffect, useState } from 'react';
+
+interface NodeData {
+  label?: string;
+  status?: 'default' | 'running' | 'success' | 'failed';
+}
+
+const ConfigDrawer = () => {
+  const graph = useGraphInstance();
+  const [open, SetOpen] = useState(false);
+  const [nodeData, setNodeData] = useState<NodeData>({});
+
+  const onClose = () => {
+    SetOpen(false);
+    setNodeData({});
+  };
+
+  useEffect(() => {
+    if (graph) {
+      graph.on('node:click', ({ node }: { node: Node }) => {
+        const data = node.getData();
+        SetOpen(true);
+        setNodeData(data);
+      });
+
+      graph.on('blank:click', () => {
+        onClose();
+      });
+    }
+  }, [graph]);
+
+  return (
+    <Drawer
+      width={300}
+      open={open}
+      title="组件信息"
+      destroyOnClose
+      mask={false}
+      onClose={onClose}
+    >
+      <div>组件名：{nodeData?.label}</div>
+    </Drawer>
+  );
+};
+
+export { ConfigDrawer };

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

@@ -0,0 +1,67 @@
+import { PlayCircleOutlined } from '@ant-design/icons';
+import type { Edge, Node } from '@antv/xflow';
+import { useGraphInstance } from '@antv/xflow';
+import { Button } from 'antd';
+import { useEffect } from 'react';
+
+const ExecuteAll = () => {
+  const graph = useGraphInstance();
+
+  useEffect(() => {
+    if (graph) {
+      graph.on('edge:connected', ({ edge }: { edge: Edge }) => {
+        edge.attr({
+          line: {
+            strokeDasharray: '',
+          },
+        });
+      });
+
+      graph.on('node:change:data', ({ node }: { node: Node }) => {
+        const edges = graph.getIncomingEdges(node);
+        const { status } = node.getData();
+        edges?.forEach((edge: Edge) => {
+          if (status === 'running') {
+            edge.attr('line/strokeDasharray', 5);
+            edge.attr('line/style/animation', 'running-line 30s infinite linear');
+          } else {
+            edge.attr('line/strokeDasharray', '');
+            edge.attr('line/style/animation', '');
+          }
+        });
+      });
+    }
+  }, [graph]);
+
+  const handleExcute = () => {
+    if (graph) {
+      const allNodes = graph.getNodes();
+      allNodes.forEach((node: Node, index: number) => {
+        const edges = graph.getOutgoingEdges(node);
+        node.setData({
+          ...node.data,
+          status: 'running',
+        });
+        setTimeout(() => {
+          node.setData({
+            ...node.data,
+            status: edges
+              ? 'success'
+              : Number(node.id.slice(-1)) % 2 !== 0
+                ? 'success'
+                : 'failed',
+          });
+        }, 1000 * index + 1);
+      });
+    }
+  };
+
+  return (
+    <Button type="primary" size="small" style={{ fontSize: 12 }} onClick={handleExcute}>
+      <PlayCircleOutlined rev />
+      全部执行
+    </Button>
+  );
+};
+
+export { ExecuteAll };

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

@@ -1,7 +1,9 @@
 import { XFlow, XFlowGraph, Background } from '@antv/xflow';
 
+import { ConfigDrawer } from './config-drawer';
 import { Control } from './control';
 import { Dnd } from './dnd/dnd';
+import { ExecuteAll } from './execute-all';
 import styles from './index.less';
 import { DAG_EDGE, DAG_CONNECTOR } from './shape';
 
@@ -15,7 +17,9 @@ const Page = () => {
             <Dnd />
           </div>
           <div className={styles.center}>
-            <div className={styles.toolbar}>{/* <ToolbarComponent /> */}</div>
+          <div className={styles.toolbar}>
+              <ExecuteAll />
+            </div>
             <div className={styles.graph}>
               <XFlowGraph
                 pannable
@@ -44,12 +48,13 @@ const Page = () => {
               <Background color="#FFF" />
               <div className={styles.controlTool}>
                 <Control
-                  items={['zoomIn', 'zoomTo', 'zoomOut', 'zoomToFit', 'zoomToOrigin']}
+                  items={['zoomOut', 'zoomTo', 'zoomIn', 'zoomToFit', 'zoomToOrigin']}
                 />
               </div>
             </div>
           </div>
         </div>
+        <ConfigDrawer />
       </div>
     </XFlow>
   );