✨ feat: add edge select

src/ProFlow/demos/ProFlowDemo.tsx

@@ -125,21 +125,25 @@ const edges = [
   {
     id: 'a1-a2',
     source: 'a1',
+    select: NodeSelect.WARNING,
     target: 'a2',
   },
   {
     id: 'a1-b1',
     source: 'a1',
+    select: NodeSelect.WARNING,
     target: 'b1',
   },
   {
     id: 'a2-a3',
     source: 'a2',
+    select: NodeSelect.WARNING,
     target: 'a3',
   },
   {
     id: 'a3-a4',
     source: 'a3',
+    select: NodeSelect.WARNING,
     target: 'a4',
   },
 ];

src/ProFlow/helper.tsx

@@ -3,6 +3,7 @@ import BloodNode from '@/BloodNode';
 import Dagre from '@dagrejs/dagre';
 import { cx } from 'antd-style';
 import { Edge, Node, Position } from 'reactflow';
+import { ProFlowEdge } from '..';
 import {
   EDGE_DANGER,
   EDGE_SELECT,
@@ -108,27 +109,29 @@ function getEdgeClsFromNodeSelect(select: NodeSelect) {
   }
 }
 
-function getRenderEdge(node: NodeMapItem, targetNode: NodeMapItem) {
-  const { id } = node;
-  const { id: targetId, select = NodeSelect.DEFAULT } = targetNode;
+export function getRenderEdges(edges: ProFLowEdge[]) {
+  return edges.map((edge) => {
+    const { source, target, select = NodeSelect.DEFAULT } = edge;
 
-  return {
-    id: `${id}-${targetId}`,
-    source: id!,
-    target: targetId!,
-    type: 'radiusEdge',
-    className: getEdgeClsFromNodeSelect(select),
-  };
+    return {
+      id: `${source}-${target}`,
+      source,
+      target,
+      type: 'radiusEdge',
+      className: getEdgeClsFromNodeSelect(select),
+    };
+  });
 }
 
 export const getRenderData = (
   mapping: NodeMapping,
+  edges: ProFlowEdge[],
 ): {
   nodes: Node[];
   edges: Edge[];
 } => {
   const renderNodes: Node[] = [];
-  const renderEdges: Edge[] = [];
+  const renderEdges: Edge[] = getRenderEdges(edges);
   // const { styles, cx } = useStyles();
 
   Object.keys(mapping).forEach((id) => {
@@ -168,12 +171,6 @@ export const getRenderData = (
         ),
       },
     });
-
-    if (node.right!.length) {
-      node.right!.forEach((targetId: string) => {
-        renderEdges.push(getRenderEdge(node, mapping[targetId]));
-      });
-    }
   });
 
   const { _nodes, _edges } = setNodePosition(renderNodes, renderEdges);

src/ProFlow/index.tsx

@@ -32,20 +32,19 @@ const Flow: React.FC<Partial<ProFlowProps>> = (props) => {
     nodes: Node[];
     edges: Edge[];
   } => {
-    if (mapping) {
-      const { nodes, edges } = getRenderData(mapping);
-
+    if (mapping && edges!.length) {
+      const { nodes, edges: _edges } = getRenderData(mapping, edges!);
       return {
         nodes,
-        edges,
+        edges: _edges,
       };
     } else {
       return {
         nodes: [],
         edges: [],
       };
     }
-  }, [mapping]);
+  }, [mapping, edges]);
 
   // const [_edges] = useEdgesState(renderData.edges);