diff --git a/.changeset/chatty-ducks-invite.md b/.changeset/chatty-ducks-invite.md new file mode 100644 index 000000000..52a2eb4c8 --- /dev/null +++ b/.changeset/chatty-ducks-invite.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Update sourceNode and targetNode properties of edge when using `updateEdge`. diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index fe048d771..5e3050d21 100644 --- a/packages/core/src/store/actions.ts +++ b/packages/core/src/store/actions.ts @@ -509,7 +509,30 @@ export function useActions(state: State, nodeLookup: ComputedRef, ed } const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection, shouldReplaceId = true) => { - return updateEdgeAction(oldEdge, newConnection, state.edges, findEdge, shouldReplaceId, state.hooks.error.trigger) + const prevEdge = findEdge(oldEdge.id)! + + const newEdge = updateEdgeAction(oldEdge, newConnection, prevEdge, shouldReplaceId, state.hooks.error.trigger) + + if (newEdge) { + const [validEdge] = createGraphEdges( + [newEdge], + state.isValidConnection, + findNode, + findEdge, + state.hooks.error.trigger, + state.defaultEdgeOptions, + state.nodes, + state.edges, + ) + + state.edges.splice(state.edges.indexOf(prevEdge), 1, validEdge) + + updateConnectionLookup(state.connectionLookup, [validEdge]) + + return validEdge + } + + return false } const updateEdgeData: Actions['updateEdgeData'] = (id, dataUpdate, options = { replace: false }) => { diff --git a/packages/core/src/utils/store.ts b/packages/core/src/utils/store.ts index 2cb7a8667..71f2b3a47 100644 --- a/packages/core/src/utils/store.ts +++ b/packages/core/src/utils/store.ts @@ -56,8 +56,7 @@ export function addEdgeToStore( export function updateEdgeAction( edge: GraphEdge, newConnection: Connection, - edges: GraphEdge[], - findEdge: Actions['findEdge'], + prevEdge: GraphEdge | undefined, shouldReplaceId: boolean, triggerError: State['hooks']['error']['trigger'], ) { @@ -66,16 +65,14 @@ export function updateEdgeAction( return false } - const foundEdge = findEdge(edge.id) - - if (!foundEdge) { + if (!prevEdge) { triggerError(new VueFlowError(ErrorCode.EDGE_NOT_FOUND, edge.id)) return false } const { id, ...rest } = edge - const newEdge = { + return { ...rest, id: shouldReplaceId ? getEdgeId(newConnection) : id, source: newConnection.source, @@ -83,10 +80,6 @@ export function updateEdgeAction( sourceHandle: newConnection.sourceHandle, targetHandle: newConnection.targetHandle, } - - edges.splice(edges.indexOf(foundEdge), 1, newEdge) - - return newEdge } export function createGraphNodes(nodes: Node[], findNode: Actions['findNode'], triggerError: State['hooks']['error']['trigger']) {