From 65c659c8097c23b3edd66ceb93cd277ca35df33e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=9A=E8=BE=B0=E5=85=88=E7=94=9F?= Date: Thu, 5 Dec 2024 14:05:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Edit/components/FlowDesigner/index.tsx | 92 ++++++++++++------- 1 file changed, 57 insertions(+), 35 deletions(-) diff --git a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx b/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx index 11001e00..835d0c94 100644 --- a/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx +++ b/frontend/src/pages/Workflow/Definition/Edit/components/FlowDesigner/index.tsx @@ -223,64 +223,86 @@ const FlowDesigner: React.FC = ({ if (value) { try { const graphData = JSON.parse(value); + console.log('原始数据:', graphData); const cells: Cell[] = []; // 添加节点 const nodesMap = new Map(); if (graphData.nodes) { + console.log('处理节点数据:', graphData.nodes); graphData.nodes.forEach((node: any) => { // 将 TASK 类型映射到 SHELL const nodeShape = NODE_TYPE_MAP[node.type] || node.type; const cell = graph.createNode({ - id: node.nodeId, + id: node.id, // 使用 id 而不是 nodeId shape: nodeShape, x: node.x || 100, y: node.y || 100, - label: node.name || '未命名节点', - data: { - ...node, - config: node.config ? JSON.parse(node.config) : {}, - }, + label: node.name || node.type, + data: node, }); cells.push(cell); - nodesMap.set(node.nodeId, cell); + nodesMap.set(node.id, cell); // 使用 id 作为 key }); } - // 从 transitionConfig 中获取边的信息 - if (graphData.transitionConfig) { - try { - const transitionConfig = JSON.parse(graphData.transitionConfig); - if (transitionConfig.transitions) { - transitionConfig.transitions.forEach((transition: any) => { - const sourceNode = nodesMap.get(transition.from); - const targetNode = nodesMap.get(transition.to); - if (sourceNode && targetNode) { - cells.push(graph.createEdge({ - source: { cell: sourceNode.id, port: 'out' }, - target: { cell: targetNode.id, port: 'in' }, - attrs: { - line: { - stroke: '#1890ff', - strokeWidth: 2, - targetMarker: { - name: 'block', - width: 12, - height: 8, - }, - }, + // 添加边 + if (graphData.edges) { + console.log('处理边数据:', graphData.edges); + graphData.edges.forEach((edge: any) => { + const sourceNode = nodesMap.get(edge.source); + const targetNode = nodesMap.get(edge.target); + console.log('连线:', edge.source, '->', edge.target, '节点:', sourceNode?.id, targetNode?.id); + + if (sourceNode && targetNode) { + const edgeCell = graph.createEdge({ + source: { cell: sourceNode.id, port: 'out' }, + target: { cell: targetNode.id, port: 'in' }, + router: { + name: 'manhattan', + args: { + padding: 20, + startDirections: ['right'], + endDirections: ['left'], + }, + }, + connector: { + name: 'rounded', + args: { radius: 8 }, + }, + attrs: { + line: { + stroke: '#1890ff', + strokeWidth: 2, + targetMarker: { + name: 'block', + width: 12, + height: 8, }, - data: transition, - })); - } + }, + }, }); + cells.push(edgeCell); } - } catch (error) { - console.error('解析 transitionConfig 失败:', error); - } + }); } + // 重置画布并应用布局 + console.log('重置前的 cells:', cells); + console.log('重置前的 cells 内容:', cells.map(cell => ({ + id: cell.id, + isNode: cell.isNode(), + isEdge: cell.isEdge(), + source: cell.isEdge() ? cell.getSourceCellId() : undefined, + target: cell.isEdge() ? cell.getTargetCellId() : undefined + }))); + graph.resetCells(cells); + console.log('重置后的节点:', graph.getNodes().map(node => node.id)); + console.log('重置后的边:', graph.getEdges().map(edge => ({ + source: edge.getSourceCellId(), + target: edge.getTargetCellId() + }))); graph.centerContent(); } catch (error) { console.error('加载流程数据失败:', error);