Merge pull request #839 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

fix(web): port add node front

web/src/views/Workflow/components/PortClickHandler.tsx

@@ -191,38 +191,39 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
     setTimeout(() => {
       const newPorts = newNode.getPorts();
 
+      const addedEdges: any[] = [];
       if (edgeInsertion) {
         // Edge insertion: create source→new and new→target edges
         const { targetCell, targetPort: origTargetPort } = edgeInsertion;
         const newLeftPort = newPorts.find((p: any) => p.group === 'left')?.id || 'left';
         const newRightPort = newPorts.find((p: any) => p.group === 'right')?.id || 'right';
-        graph.addEdge({
+        addedEdges.push(graph.addEdge({
           source: { cell: sourceNode.id, port: sourcePort },
           target: { cell: newNode.id, port: newLeftPort },
           ...edgeAttrs
-        });
+        }));
-        graph.addEdge({
+        addedEdges.push(graph.addEdge({
           source: { cell: newNode.id, port: newRightPort },
           target: { cell: targetCell.id, port: origTargetPort },
           ...edgeAttrs
-        });
+        }));
         setEdgeInsertion(null);
       } else if (sourcePortGroup === 'left') {
         // Connect from left port to new node's right side
         const targetPort = newPorts.find((port: any) => port.group === 'right')?.id || 'right';
-        graph.addEdge({
+        addedEdges.push(graph.addEdge({
           source: { cell: newNode.id, port: targetPort },
           target: { cell: sourceNode.id, port: sourcePort },
           ...edgeAttrs
-        });
+        }));
       } else {
         // Connect from right port to new node's left side
         const targetPort = newPorts.find((port: any) => port.group === 'left')?.id || 'left';
-        graph.addEdge({
+        addedEdges.push(graph.addEdge({
           source: { cell: sourceNode.id, port: sourcePort },
           target: { cell: newNode.id, port: targetPort },
           ...edgeAttrs
-        });
+        }));
       }
       
       // Adjust loop node size when child node is added via port within loop node
@@ -269,6 +270,44 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
           });
         }
       }
+
+      const isCycleContainer = (type: string) => type === 'loop' || type === 'iteration';
+      const newNodeType = selectedNodeType.type;
+
+      // Helper: bring all child nodes and their edges of a cycle container to front
+      const bringCycleChildrenToFront = (cycleContainerId: string) => {
+        
+        graph.getEdges().forEach((e: any) => {
+          const src = graph.getCellById(e.getSourceCellId());
+          const tgt = graph.getCellById(e.getTargetCellId());
+          if (src?.getData()?.cycle === cycleContainerId || tgt?.getData()?.cycle === cycleContainerId) e.toFront();
+        });
+        graph.getNodes().forEach((n: any) => {
+          if (n.getData()?.cycle === cycleContainerId) n.toFront();
+        });
+      };
+
+      if (isCycleContainer(sourceNodeType)) {
+        console.log('isCycleContainer(sourceNodeType)')
+        // Case 4: source is a loop/iteration node — bring new node to front, then its children
+        newNode.toFront();
+        sourceNode.toFront();
+        bringCycleChildrenToFront(sourceNodeData.id);
+      } else if (isCycleContainer(newNodeType)) {
+        console.log('isCycleContainer(newNodeType)')
+        // Case 3: adding a loop/iteration node from a normal node — bring new node to front, then its children
+        newNode.toFront();
+        sourceNode.toFront()
+        bringCycleChildrenToFront(id);
+      } else {
+        // Case 2: normal node → normal node
+        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);
 
     // Clean up temporary element