Merge pull request #840 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

fix(web): if-else/question-classifier add node front

web/src/views/Workflow/components/Nodes/AddNode.tsx

@@ -49,23 +49,24 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
 
     const incomingEdges = graph.getIncomingEdges(node);
     const outgoingEdges = graph.getOutgoingEdges(node);
-    
+    const addedEdges: any[] = [];
-    incomingEdges?.forEach(edge => {
+
-      graph.addEdge({
+    incomingEdges?.forEach((edge: any) => {
+      addedEdges.push(graph.addEdge({
         source: { cell: edge.getSourceCellId(), port: edge.getSourcePortId() },
         target: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'left')?.id || 'left' },
         ...edgeAttrs
-      });
+      }));
     });
 
-    outgoingEdges?.forEach(edge => {
+    outgoingEdges?.forEach((edge: any) => {
       const targetCell = graph.getCellById(edge.getTargetCellId()) as any;
       const targetPortId = targetCell?.getPorts?.()?.find((port: any) => port.group === 'left')?.id || edge.getTargetPortId();
-      graph.addEdge({
+      addedEdges.push(graph.addEdge({
         source: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'right')?.id || 'right' },
         target: { cell: edge.getTargetCellId(), port: targetPortId },
         ...edgeAttrs
-      });
+      }));
     });
 
     // Remove all add-node type nodes
@@ -75,6 +76,15 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
       }
     });
 
+    setTimeout(() => {
+      addedEdges.forEach(e => {
+        const src = graph.getCellById(e.getSourceCellId());
+        const tgt = graph.getCellById(e.getTargetCellId());
+        if (src?.isNode()) src.toFront();
+        if (tgt?.isNode()) tgt.toFront();
+      });
+    }, 50);
+
     // Automatically adjust loop node size
     const loopNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
     if (loopNode) {

web/src/views/Workflow/components/Nodes/LoopNode.tsx

@@ -59,6 +59,9 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
         target: { cell: addNode.id, port: targetPort },
         ...edgeAttrs,
       });
+
+      cycleStartNode.toFront()
+      addNode.toFront()
     }
   }
 
@@ -117,6 +120,12 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
       ...edgeAttrs
     }
     graph.addEdge(edgeConfig)
+
+    setTimeout(() => {
+
+      cycleStartNode.toFront()
+      addNode.toFront()
+    }, 0)
   }
 
   return (

web/src/views/Workflow/components/Properties/CaseList/index.tsx

@@ -139,6 +139,8 @@ const CaseList: FC<CaseListProps> = ({
               ...edgeAttrs,
             });
           }
+          sourceCell.toFront()
+          selectedNode.toFront()
           graphRef.current?.removeCell(edge);
           return;
         }
@@ -183,6 +185,8 @@ const CaseList: FC<CaseListProps> = ({
               target: { cell: targetCellId, port: targetPortId },
               ...edgeAttrs
             });
+            selectedNode.toFront()
+            targetCell.toFront()
           }
         }
         

web/src/views/Workflow/components/Properties/CategoryList/index.tsx

@@ -88,6 +88,8 @@ const CategoryList: FC<CategoryListProps> = ({ parentName, selectedNode, graphRe
               target: { cell: selectedNode.id, port: targetPortId },
               ...edgeAttrs
             });
+            sourceCell.toFront()
+            selectedNode.toFront()
           }
           return;
         }
@@ -119,6 +121,8 @@ const CategoryList: FC<CategoryListProps> = ({ parentName, selectedNode, graphRe
               target: { cell: targetCellId, port: targetPortId },
               ...edgeAttrs
             });
+            selectedNode.toFront()
+            targetCell.toFront()
           }
         }
       });