diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx index 083eacbce9..aabadadbae 100644 --- a/web/app/components/workflow/custom-edge.tsx +++ b/web/app/components/workflow/custom-edge.tsx @@ -76,15 +76,16 @@ const CustomEdge = ({ id={id} path={edgePath} style={{ - stroke: (selected || data?._connectedNodeIsHovering || data?._runned) ? '#2970FF' : '#D0D5DD', + stroke: (selected || data?._connectedNodeIsHovering || data?._runned || data?._connectedNodeIsSelected) ? '#2970FF' : '#D0D5DD', strokeWidth: 2, }} />
{ const { getNodes, setNodes, + edges, + setEdges, } = store.getState() const nodes = getNodes() @@ -263,6 +265,26 @@ export const useNodesInteractions = () => { }) }) setNodes(newNodes) + + const connectedEdges = getConnectedEdges([{ id: nodeId } as Node], edges).map(edge => edge.id) + const newEdges = produce(edges, (draft) => { + draft.forEach((edge) => { + if (connectedEdges.includes(edge.id)) { + edge.data = { + ...edge.data, + _connectedNodeIsSelected: !cancelSelection, + } + } + else { + edge.data = { + ...edge.data, + _connectedNodeIsSelected: false, + } + } + }) + }) + setEdges(newEdges) + handleSyncWorkflowDraft() }, [store, handleSyncWorkflowDraft, getNodesReadOnly, workflowStore]) diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts index ff1e02be00..6f387b8283 100644 --- a/web/app/components/workflow/types.ts +++ b/web/app/components/workflow/types.ts @@ -45,6 +45,7 @@ export type CommonNodeType = { export type CommonEdgeType = { _hovering?: boolean _connectedNodeIsHovering?: boolean + _connectedNodeIsSelected?: boolean _runned?: boolean sourceType: BlockEnum targetType: BlockEnum diff --git a/web/app/components/workflow/utils.ts b/web/app/components/workflow/utils.ts index 7176f8b7ca..519250060a 100644 --- a/web/app/components/workflow/utils.ts +++ b/web/app/components/workflow/utils.ts @@ -57,20 +57,38 @@ export const initialNodes = (nodes: Node[], edges: Edge[]) => { } export const initialEdges = (edges: Edge[], nodes: Node[]) => { + let selectedNode: Node | null = null const nodesMap = nodes.reduce((acc, node) => { acc[node.id] = node + if (node.data?.selected) + selectedNode = node + return acc }, {} as Record) return edges.map((edge) => { edge.type = 'custom' - if (!edge.data?.sourceType) - edge.data = { ...edge.data, sourceType: nodesMap[edge.source].data.type! } as any + if (!edge.data?.sourceType) { + edge.data = { + ...edge.data, + sourceType: nodesMap[edge.source].data.type!, + } as any + } - if (!edge.data?.targetType) - edge.data = { ...edge.data, targetType: nodesMap[edge.target].data.type! } as any + if (!edge.data?.targetType) { + edge.data = { + ...edge.data, + targetType: nodesMap[edge.target].data.type!, + } as any + } + if (selectedNode) { + edge.data = { + ...edge.data, + _connectedNodeIsSelected: edge.source === selectedNode.id || edge.target === selectedNode.id, + } as any + } return edge }) }