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

src/ProFlow/demos/ProFlowDemo.tsx

@@ -124,7 +124,7 @@ const nodes: ProFlowNode[] = [
   {
     id: 'd1',
     group: true,
-    select: NodeSelect.WARNING,
+    select: NodeSelect.SUB_SELECT,
     label: '456',
     data: [
       {
@@ -198,7 +198,7 @@ const edges = [
   {
     id: 'a1-b1',
     source: 'a1',
-    select: NodeSelect.WARNING,
+    select: NodeSelect.SUB_WARNING,
     target: 'b1',
     type: EdgeType.default,
   },

src/ProFlow/helper.tsx

@@ -115,18 +115,44 @@ 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;
+  }
+}
+
 export function getRenderEdges(edges: ProFlowEdge[]) {
-  return edges.map((edge) => {
-    const { source, target, select = NodeSelect.DEFAULT } = edge;
-
-    return {
-      id: `${source}-${target}`,
-      source,
-      target,
-      type: 'radiusEdge',
-      className: getEdgeClsFromNodeSelect(select),
-    };
-  });
+  console.log(edges);
+  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 {
+        id: `${source}-${target}`,
+        source,
+        target,
+        type: 'radiusEdge',
+        className: getEdgeClsFromNodeSelect(select),
+      };
+    });
 }
 
 export const getRenderData = (