fix: node not updating handlebounds when handle pos changes

* watch source & target pos and update node dimensions on next tick

src/components/Edges/Edge.vue

@@ -21,20 +21,6 @@ hooks.connect.on((connection) => {
   hooks.edgeUpdate.trigger({ edge: props.edge, connection })
 })
 
-const nodes = computed(() => {
-  const n = getSourceTargetNodes(props.edge, store.nodes)
-
-  if (!n.sourceNode) {
-    console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`)
-  }
-
-  if (!n.targetNode) {
-    console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`)
-  }
-
-  return n
-})
-
 const onEdgeClick = (event: MouseEvent) => {
   if (store.elementsSelectable) {
     store.unsetNodesSelection()
@@ -92,6 +78,20 @@ const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof get
     : true
 }
 
+const nodes = computed(() => {
+  const n = getSourceTargetNodes(props.edge, store.nodes)
+
+  if (!n.sourceNode) {
+    console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`)
+  }
+
+  if (!n.targetNode) {
+    console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`)
+  }
+
+  return n
+})
+
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles = computed(() =>
   store.connectionMode === ConnectionMode.Strict

src/components/Nodes/Node.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { DraggableEventListener } from '@braks/revue-draggable'
-import { watchPostEffect } from 'vue'
 import { Node, NodeType, SnapGrid } from '~/types'
 import { NodeIdContextKey } from '~/context'
 import { useHooks, useStore } from '~/composables'
@@ -45,11 +44,8 @@ const onSelectNodeHandler = (event: MouseEvent) => {
     if (selectable) {
       store.unsetNodesSelection()
 
-      if (!props.selected) {
-        store.addSelectedElements([n])
-      }
+      if (!props.selected) store.addSelectedElements([n])
     }
-
     hooks.nodeClick.trigger({ event, node: n })
   }
 }
@@ -61,9 +57,7 @@ const onDragStart: DraggableEventListener = ({ event }) => {
   if (props.selectNodesOnDrag && selectable) {
     store.unsetNodesSelection()
 
-    if (!props.selected) {
-      store.addSelectedElements([n])
-    }
+    if (!props.selected) store.addSelectedElements([n])
   } else if (!props.selectNodesOnDrag && !props.selected && selectable) {
     store.unsetNodesSelection()
     store.addSelectedElements([])
@@ -134,6 +128,18 @@ watch(
     })
   },
 )
+watch(
+  () => props.node.sourcePosition && props.node.targetPosition,
+  () => {
+    nextTick(() => {
+      store.updateNodeDimensions({
+        id: props.node.id,
+        nodeElement: nodeElement.value,
+        forceUpdate: true,
+      })
+    })
+  },
+)
 </script>
 
 <template>