fix(web): workflow node ports bugfix

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

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-09 18:30:28 
- * @Last Modified by:   ZhaoYing 
+ * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-09 18:30:28 
+ * @Last Modified time: 2026-03-18 12:06:27
  */
 import { useEffect, useState } from 'react';
 import { Popover } from 'antd';
@@ -70,7 +70,6 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
     // Get source port group information
     const sourcePortInfo = sourceNode.getPorts().find((p: any) => p.id === sourcePort);
     const sourcePortGroup = sourcePortInfo?.group || sourcePort;
-    console.log('sourcePortGroup', sourcePortGroup, sourcePortInfo)
     
     // If add-node position exists, use it; otherwise calculate new position
     let newX, newY;
@@ -148,18 +147,23 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
       if (sourcePortGroup === 'left') {
         // Connect from left port to new node's right side
         targetPort = targetPorts.find((port: any) => port.group === 'right')?.id || 'right';
+        graph.addEdge({
+          source: { cell: newNode.id, port: targetPort },
+          target: { cell: sourceNode.id, port: sourcePort },
+          ...edgeAttrs
+          // zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
+        });
       } else {
         // Connect from right port to new node's left side
         targetPort = targetPorts.find((port: any) => port.group === 'left')?.id || 'left';
+        graph.addEdge({
+          source: { cell: sourceNode.id, port: sourcePort },
+          target: { cell: newNode.id, port: targetPort },
+          ...edgeAttrs
+          // zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
+        });
       }
       
-      graph.addEdge({
-        source: { cell: sourceNode.id, port: sourcePort },
-        target: { cell: newNode.id, port: targetPort },
-        ...edgeAttrs
-        // zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
-      });
-      
       // Adjust loop node size when child node is added via port within loop node
       const cycleId = sourceNodeData.cycle;
       if (cycleId) {
@@ -223,20 +227,27 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
         const isChildOfLoop = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'loop');
         const isChildOfIteration = sourceNodeData?.cycle && graph?.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle && n.getData()?.type === 'iteration');
         
+        const sourcePortInfo = sourceNode?.getPorts().find((p: any) => p.id === sourcePort);
+        const sourcePortGroup = sourcePortInfo?.group || sourcePort;
+        const isLeftPort = sourcePortGroup === 'left';
+
         let filteredNodes;
         if (isChildOfLoop) {
-          // Use same filtering as AddNode for child nodes of loop, but allow break
+        // Use same filtering as AddNode for child nodes of loop, but allow break
           filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type));
         } else if (isChildOfIteration) {
           // Filter out loop and iteration nodes for children of iteration nodes, but allow break
           filteredNodes = category.nodes.filter(nodeType => !['start', 'end', 'loop', 'cycle-start', 'iteration'].includes(nodeType.type));
         } else {
           // Original filtering for non-loop child nodes
-          filteredNodes = category.nodes.filter(nodeType => !['start', 'break', 'cycle-start'].includes(nodeType.type));
           filteredNodes = category.nodes.filter(nodeType =>
             nodeType.type !== 'start' && nodeType.type !== 'cycle-start' && nodeType.type !== 'break'
           );
         }
+
+        if (isLeftPort) {
+          filteredNodes = filteredNodes.filter(nodeType => nodeType.type !== 'end');
+        }
         
         if (filteredNodes.length === 0) return null;
         

web/src/views/Workflow/hooks/useWorkflowGraph.ts

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 15:17:48 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-17 10:00:10
+ * @Last Modified time: 2026-03-18 12:07:03
  */
 import { useRef, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -593,13 +593,6 @@ export const useWorkflowGraph = ({
     if (!graphRef.current) return false;
     const selectedNodes = graphRef.current.getNodes().filter(node => node.getData()?.isSelected);
     if (selectedNodes.length) {
-      selectedNodes.forEach(node => {
-        const data = node.getData();
-        node.setData({
-          ...data,
-          id: `${(data.type as string).replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-        });
-      });
       graphRef.current.copy(selectedNodes);
     }
     return false;
@@ -610,7 +603,14 @@ export const useWorkflowGraph = ({
    */
   const parseEvent = () => {
     if (!graphRef.current?.isClipboardEmpty()) {
-      graphRef.current?.paste({ offset: 32 });
+      const pastedNodes = graphRef.current?.paste({ offset: 32 }) ?? [];
+      pastedNodes.forEach(cell => {
+        if (cell.isNode()) {
+          const data = cell.getData();
+          const newId = `${(data.type as string).replace(/-/g, '_')}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+          cell.setData({ ...data, id: newId });
+        }
+      });
       blankClick();
     }
     return false;
@@ -761,8 +761,23 @@ export const useWorkflowGraph = ({
         createEdge() {
           return graphRef.current?.createEdge(edgeAttrs);
         },
-        validateConnection({ sourceCell, targetCell, targetMagnet }) {
+        validateConnection({ sourceCell, targetCell, sourceMagnet, targetMagnet }) {
           if (!targetMagnet) return false;
+
+          // Only allow right port → left port connections
+          const getPortGroup = (magnet: Element) => {
+            let el: Element | null = magnet;
+            while (el) {
+              const group = el.getAttribute('port-group');
+              if (group) return group;
+              el = el.parentElement;
+            }
+            return null;
+          };
+          const sourceGroup = sourceMagnet ? getPortGroup(sourceMagnet) : null;
+          const targetGroup = targetMagnet ? getPortGroup(targetMagnet) : null;
+
+          if (sourceGroup === 'left' || targetGroup === 'right') return false;
           
           // Node cannot connect to itself
           if (sourceCell?.id === targetCell?.id) return false;