✨ feat: 新增edge的sub select类型

ant-design · Oct 23, 2023 · ad13b27 · ad13b27
1 parent a8bb725
commit ad13b27
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 6 deletions.
diff --git a/src/ProFlow/constants.tsx b/src/ProFlow/constants.tsx
@@ -55,8 +55,12 @@ export const NODE_SUB_DANGER = 'nodeSubDanger';
 export const NODE_WARNING = 'nodeWarning';
 export const NODE_SUB_WARNING = 'nodeSubWarning';
 
-export const INIT_NODE = 'initialNode';
-export const NODE_WRAP = 'nodeWrap';
 export const EDGE_SELECT = 'edgeSelected';
+export const EDGE_SUB_SELECT = 'edgeSubSelected';
 export const EDGE_DANGER = 'edgeDanger';
+export const EDGE_SUB_DANGER = 'edgeSubDanger';
 export const EDGE_WARNING = 'edgeWarning';
+export const EDGE_SUB_WARNING = 'edgeSubWarning';
+
+export const INIT_NODE = 'initialNode';
+export const NODE_WRAP = 'nodeWrap';
diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -205,21 +205,21 @@ const edges = [
   {
     id: 'a1-b2',
     source: 'a1',
-    select: NodeSelect.WARNING,
+    select: NodeSelect.SUB_WARNING,
     target: 'b2',
     type: EdgeType.default,
   },
   {
     id: 'a1-b3',
     source: 'a1',
-    select: NodeSelect.WARNING,
+    select: NodeSelect.SUB_DANGER,
     target: 'b3',
     type: EdgeType.default,
   },
   {
     id: 'a1-b4',
     source: 'a1',
-    select: NodeSelect.WARNING,
+    select: NodeSelect.SUB_SELECT,
     target: 'b4',
     type: EdgeType.default,
   },

diff --git a/src/ProFlow/helper.tsx b/src/ProFlow/helper.tsx
@@ -7,6 +7,9 @@ import { Edge, Node, Position } from 'reactflow';
 import {
   EDGE_DANGER,
   EDGE_SELECT,
+  EDGE_SUB_DANGER,
+  EDGE_SUB_SELECT,
+  EDGE_SUB_WARNING,
   EDGE_WARNING,
   INIT_NODE,
   InitialNode,
@@ -97,10 +100,16 @@ function getEdgeClsFromNodeSelect(select: NodeSelect) {
   switch (select) {
     case NodeSelect.SELECT:
       return EDGE_SELECT;
+    case NodeSelect.SUB_SELECT:
+      return EDGE_SUB_SELECT;
     case NodeSelect.DANGER:
       return EDGE_DANGER;
+    case NodeSelect.SUB_DANGER:
+      return EDGE_SUB_DANGER;
     case NodeSelect.WARNING:
       return EDGE_WARNING;
+    case NodeSelect.SUB_WARNING:
+      return EDGE_SUB_WARNING;
     default:
       return 'edgeDefault';
   }

diff --git a/src/ProFlow/styles.tsx b/src/ProFlow/styles.tsx
@@ -1,5 +1,13 @@
 import { createStyles } from 'antd-style';
-import { EDGE_DANGER, EDGE_SELECT, EDGE_WARNING, INIT_NODE } from './constants';
+import {
+  EDGE_DANGER,
+  EDGE_SELECT,
+  EDGE_SUB_DANGER,
+  EDGE_SUB_SELECT,
+  EDGE_SUB_WARNING,
+  EDGE_WARNING,
+  INIT_NODE,
+} from './constants';
 
 export const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -28,18 +36,36 @@ export const useStyles = createStyles(({ css }) => ({
       z-index: 100;
     }
 
+    .${EDGE_SUB_SELECT} path {
+      stroke: #1677ff;
+      stroke-width: 1;
+      z-index: 100;
+    }
+
     .${EDGE_DANGER} path {
       stroke: #f7636e;
       stroke-width: 2;
       z-index: 100;
     }
 
+    .${EDGE_SUB_DANGER} path {
+      stroke: #f7636e;
+      stroke-width: 1;
+      z-index: 100;
+    }
+
     .${EDGE_WARNING} path {
       stroke: #ef9d3b;
       stroke-width: 2;
       z-index: 100;
     }
 
+    .${EDGE_SUB_WARNING} path {
+      stroke: #ef9d3b;
+      stroke-width: 1;
+      z-index: 100;
+    }
+
     .selectable:focus {
       box-shadow: none !important;
     }