diff --git a/web/src/views/Workflow/components/PortClickHandler.tsx b/web/src/views/Workflow/components/PortClickHandler.tsx index ec898bc8..903ccbdc 100644 --- a/web/src/views/Workflow/components/PortClickHandler.tsx +++ b/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 time: 2026-02-09 18:30:28 + * @Last Modified by: ZhaoYing + * @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 = ({ 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 = ({ 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 = ({ 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; diff --git a/web/src/views/Workflow/hooks/useWorkflowGraph.ts b/web/src/views/Workflow/hooks/useWorkflowGraph.ts index 050c1680..db0c3c93 100644 --- a/web/src/views/Workflow/hooks/useWorkflowGraph.ts +++ b/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;