update(nodes, edges): watch source/target pos to update position so edges get properly re-rendered

* use standard computed for source/target pos in edges

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/EdgeWrapper.vue

@@ -65,8 +65,8 @@ const sourceHandle = controlledComputed(
   () => getHandle(edge.value.sourceNode.handleBounds.source, edge.value.sourceHandle),
 )
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
-const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
+const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
-const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
+const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
 const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius)
 
 onMounted(() => {

src/components/Nodes/NodeWrapper.vue

@@ -90,27 +90,23 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
   store.hooks.nodeDragStop.trigger({ event, node: node.value })
 }
 
+const updatePosition = (width: number, height: number) => {
+  const handleBounds = getHandleBounds(nodeElement.value, scale.value, id)
+  node.value.dimensions = {
+    width,
+    height,
+  }
+  node.value.handleBounds = handleBounds
+}
+
 store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
 onMounted(() => {
   const dimensions = ref(getDimensions(nodeElement.value))
   useResizeObserver(nodeElement, () => (dimensions.value = getDimensions(nodeElement.value)))
-  watch(
+  watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () =>
-    dimensions,
+    nextTick(() => updatePosition(dimensions.value.width, dimensions.value.height)),
-    ({ width: w, height: h }) => {
-      nextTick(() => {
-        if (w > 0 && h > 0) {
-          const handleBounds = getHandleBounds(nodeElement.value, scale.value, id)
-
-          node.value.dimensions = {
-            width: w,
-            height: h,
-          }
-          node.value.handleBounds = handleBounds
-        }
-      })
-    },
-    { immediate: true },
   )
+  watch(dimensions, ({ width: w, height: h }) => nextTick(() => w > 0 && h > 0 && updatePosition(w, h)), { immediate: true })
 })
 </script>
 <script lang="ts">