From 8c0982a7f3ad715236c074d53f8d5a1a3e3d0e81 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 22:43:05 +0200
Subject: [PATCH] fix(edges): edge-renderer to update on edge updates

---
 .../vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue  | 4 +---
 packages/vue-flow/src/store/actions.ts                    | 3 +--
 packages/vue-flow/src/utils/store.ts                      | 8 +++++---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
index 08a5f177..7df4cb80 100644
--- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -67,10 +67,8 @@ onPaneReady(() => {
   if (!scope) scope = effectScope()
 
   scope.run(() => {
-    const edgeAmount = computed(() => getEdges.length)
-
     watch(
-      [$$(getSelectedNodes), edgeAmount],
+      [$$(getSelectedNodes), $$(getEdges)],
       () => {
         getEdges.forEach((edge) => {
           if (hooks[edge.id]) return
diff --git a/packages/vue-flow/src/store/actions.ts b/packages/vue-flow/src/store/actions.ts
index b1158028..f34e2349 100644
--- a/packages/vue-flow/src/store/actions.ts
+++ b/packages/vue-flow/src/store/actions.ts
@@ -353,8 +353,7 @@ export default (state: State, getters: ComputedGetters): Actions => {
     return state.edges[edgeIds.indexOf(id)]
   }
 
-  const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection) =>
-    updateEdgeAction(oldEdge, newConnection, state.edges, addEdges)
+  const updateEdge: Actions['updateEdge'] = (oldEdge, newConnection) => updateEdgeAction(oldEdge, newConnection, state.edges)
 
   const applyNodeChanges: Actions['applyNodeChanges'] = (changes) => applyChanges(changes, state.nodes)
 
diff --git a/packages/vue-flow/src/utils/store.ts b/packages/vue-flow/src/utils/store.ts
index 96e3ac12..6fe9b00a 100644
--- a/packages/vue-flow/src/utils/store.ts
+++ b/packages/vue-flow/src/utils/store.ts
@@ -23,7 +23,7 @@ export const addEdgeToStore = (edgeParams: Edge | Connection, edges: Edge[]) =>
   return edge
 }
 
-export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[], add: Actions['addEdges']) => {
+export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edges: GraphEdge[]) => {
   if (!newConnection.source || !newConnection.target) {
     console.warn("[vueflow]: Can't create new edge. An edge needs a source and a target.")
     return false
@@ -36,7 +36,8 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg
     return false
   }
 
-  edges.splice(edges.indexOf(edge), 1)
+  console.log('foo')
+
   const newEdge = {
     ...edge,
     id: getEdgeId(newConnection),
@@ -45,7 +46,8 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg
     sourceHandle: newConnection.sourceHandle,
     targetHandle: newConnection.targetHandle,
   }
-  add([newEdge])
+
+  edges.splice(edges.indexOf(foundEdge), 1, newEdge)
 
   return newEdge
 }