diff --git a/frontend/src/pages/Workflow/Design/components/FlowCanvas.tsx b/frontend/src/pages/Workflow/Design/components/FlowCanvas.tsx index 964fc46d..02320513 100644 --- a/frontend/src/pages/Workflow/Design/components/FlowCanvas.tsx +++ b/frontend/src/pages/Workflow/Design/components/FlowCanvas.tsx @@ -10,7 +10,8 @@ import { Connection, Edge, BackgroundVariant, - Panel + Panel, + reconnectEdge } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; @@ -150,6 +151,11 @@ const FlowCanvas: React.FC = ({ }); }, [nodes, setEdges]); + // 处理边重连 + const onReconnect = useCallback((oldEdge: Edge, newConnection: Connection) => { + setEdges((els) => reconnectEdge(oldEdge, newConnection, els)); + }, [setEdges]); + // 处理连接 const onConnect = useCallback( (params: Connection | Edge) => { @@ -269,6 +275,7 @@ const FlowCanvas: React.FC = ({ onNodesChange={handleNodesChange} onEdgesChange={handleEdgesChange} onConnect={onConnect} + onReconnect={onReconnect} onNodeClick={onNodeClick} onEdgeClick={onEdgeClick} onDrop={handleDrop} @@ -283,6 +290,8 @@ const FlowCanvas: React.FC = ({ style: { stroke: '#94a3b8', strokeWidth: 2 }, markerEnd: { type: 'arrowclosed', color: '#94a3b8' }, }} + edgesReconnectable={true} + reconnectRadius={20} fitView fitViewOptions={{ padding: 0.1,