From b598171a3d3dca3512a818791ece932d353917bb Mon Sep 17 00:00:00 2001 From: zhaoying Date: Thu, 9 Apr 2026 16:34:04 +0800 Subject: [PATCH] fix(web): if-else/question-classifier add node front --- .../Workflow/components/Nodes/AddNode.tsx | 24 +++++++++++++------ .../Workflow/components/Nodes/LoopNode.tsx | 9 +++++++ .../components/Properties/CaseList/index.tsx | 4 ++++ .../Properties/CategoryList/index.tsx | 4 ++++ 4 files changed, 34 insertions(+), 7 deletions(-) diff --git a/web/src/views/Workflow/components/Nodes/AddNode.tsx b/web/src/views/Workflow/components/Nodes/AddNode.tsx index 5f1e7e65..3bdb96c0 100644 --- a/web/src/views/Workflow/components/Nodes/AddNode.tsx +++ b/web/src/views/Workflow/components/Nodes/AddNode.tsx @@ -49,23 +49,24 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => { const incomingEdges = graph.getIncomingEdges(node); const outgoingEdges = graph.getOutgoingEdges(node); - - incomingEdges?.forEach(edge => { - graph.addEdge({ + const addedEdges: any[] = []; + + incomingEdges?.forEach((edge: any) => { + addedEdges.push(graph.addEdge({ source: { cell: edge.getSourceCellId(), port: edge.getSourcePortId() }, target: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'left')?.id || 'left' }, ...edgeAttrs - }); + })); }); - outgoingEdges?.forEach(edge => { + outgoingEdges?.forEach((edge: any) => { const targetCell = graph.getCellById(edge.getTargetCellId()) as any; const targetPortId = targetCell?.getPorts?.()?.find((port: any) => port.group === 'left')?.id || edge.getTargetPortId(); - graph.addEdge({ + addedEdges.push(graph.addEdge({ source: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'right')?.id || 'right' }, target: { cell: edge.getTargetCellId(), port: targetPortId }, ...edgeAttrs - }); + })); }); // Remove all add-node type nodes @@ -75,6 +76,15 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => { } }); + setTimeout(() => { + 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); + // Automatically adjust loop node size const loopNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId); if (loopNode) { diff --git a/web/src/views/Workflow/components/Nodes/LoopNode.tsx b/web/src/views/Workflow/components/Nodes/LoopNode.tsx index 4a803246..ca0eaeff 100644 --- a/web/src/views/Workflow/components/Nodes/LoopNode.tsx +++ b/web/src/views/Workflow/components/Nodes/LoopNode.tsx @@ -59,6 +59,9 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => { target: { cell: addNode.id, port: targetPort }, ...edgeAttrs, }); + + cycleStartNode.toFront() + addNode.toFront() } } @@ -117,6 +120,12 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => { ...edgeAttrs } graph.addEdge(edgeConfig) + + setTimeout(() => { + + cycleStartNode.toFront() + addNode.toFront() + }, 0) } return ( diff --git a/web/src/views/Workflow/components/Properties/CaseList/index.tsx b/web/src/views/Workflow/components/Properties/CaseList/index.tsx index 5d3d2607..d1849872 100644 --- a/web/src/views/Workflow/components/Properties/CaseList/index.tsx +++ b/web/src/views/Workflow/components/Properties/CaseList/index.tsx @@ -139,6 +139,8 @@ const CaseList: FC = ({ ...edgeAttrs, }); } + sourceCell.toFront() + selectedNode.toFront() graphRef.current?.removeCell(edge); return; } @@ -183,6 +185,8 @@ const CaseList: FC = ({ target: { cell: targetCellId, port: targetPortId }, ...edgeAttrs }); + selectedNode.toFront() + targetCell.toFront() } } diff --git a/web/src/views/Workflow/components/Properties/CategoryList/index.tsx b/web/src/views/Workflow/components/Properties/CategoryList/index.tsx index 9137b223..d37699d9 100644 --- a/web/src/views/Workflow/components/Properties/CategoryList/index.tsx +++ b/web/src/views/Workflow/components/Properties/CategoryList/index.tsx @@ -88,6 +88,8 @@ const CategoryList: FC = ({ parentName, selectedNode, graphRe target: { cell: selectedNode.id, port: targetPortId }, ...edgeAttrs }); + sourceCell.toFront() + selectedNode.toFront() } return; } @@ -119,6 +121,8 @@ const CategoryList: FC = ({ parentName, selectedNode, graphRe target: { cell: targetCellId, port: targetPortId }, ...edgeAttrs }); + selectedNode.toFront() + targetCell.toFront() } } });