From 26b3901bd5fcde8c168a7bef1e189736f93765d4 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 22 Oct 2021 08:16:32 +0200
Subject: [PATCH] fix: node not updating handlebounds when handle pos changes

* watch source & target pos and update node dimensions on next tick
---
 examples/Layouting/LayoutingExample.vue | 17 +++++++++++++--
 src/components/Edges/Edge.vue           | 28 ++++++++++++-------------
 src/components/Nodes/Node.vue           | 22 ++++++++++++-------
 src/container/Flow/Flow.vue             |  2 +-
 4 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/examples/Layouting/LayoutingExample.vue b/examples/Layouting/LayoutingExample.vue
index 3867c65c..e4182480 100644
--- a/examples/Layouting/LayoutingExample.vue
+++ b/examples/Layouting/LayoutingExample.vue
@@ -3,7 +3,18 @@ import dagre from 'dagre'
 import initialElements from './initial-elements'
 import './layouting.css'
 
-import Flow, { Controls, addEdge, Connection, Edge, Elements, isNode, NodeExtent, Position, removeElements } from '~/index'
+import Flow, {
+  Controls,
+  addEdge,
+  ConnectionMode,
+  Connection,
+  Edge,
+  Elements,
+  isNode,
+  NodeExtent,
+  Position,
+  removeElements,
+} from '~/index'
 
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -42,6 +53,7 @@ const onLayout = (direction: string) => {
 
     return el
   })
+  console.log(elements.value)
 }
 </script>
 <template>
@@ -49,9 +61,10 @@ const onLayout = (direction: string) => {
     <Flow
       :elements="elements"
       :node-extent="nodeExtent"
+      :connection-mode="ConnectionMode.Loose"
       @connect="onConnect"
       @clements-remove="onElementsRemove"
-      @load="() => onLayout('LR')"
+      @load="() => onLayout('TB')"
     >
       <Controls />
     </Flow>
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 2f28fd10..284f5387 100644
--- a/src/components/Edges/Edge.vue
+++ b/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
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 1b9c6273..fb5dd0bc 100644
--- a/src/components/Nodes/Node.vue
+++ b/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>
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index a5668a5e..a1b4fc69 100644
--- a/src/container/Flow/Flow.vue
+++ b/src/container/Flow/Flow.vue
@@ -129,7 +129,7 @@ const init = (opts: typeof props) => {
 onBeforeUnmount(() => store?.$dispose())
 
 watch(props, (val) => init(val))
-onMounted(() => init(props))
+init(props)
 
 const nodeTypes = createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })
 const edgeTypes = createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })