fix(core): update source/target node of updated edge (#1705)

* fix(core): update source/target node of updated edge Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> --------- Signed-off-by: braks <[email protected]>
bcakmakoglu · Dec 3, 2024 · 047ec99 · 047ec99
1 parent 639d2f3
commit 047ec99
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/.changeset/chatty-ducks-invite.md 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
@@ -509,7 +509,30 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, 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
@@ -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,27 +65,21 @@ 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,
     target: newConnection.target,
     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']) {