From 31b0bcb83a8125cf9827cea713e170deae791d95 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 17 Sep 2022 20:18:26 +0200
Subject: [PATCH] refactor(nodes): cleanup handle calculation logic

---
 .../src/components/Nodes/NodeWrapper.vue      | 40 ++++++++-----------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
index 38dbb7dc..888c4626 100644
--- a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
+++ b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
@@ -3,7 +3,7 @@ import { useVModel } from '@vueuse/core'
 import { useDrag, useNodeHooks, useVueFlow } from '../../composables'
 import type { GraphNode, NodeComponent, SnapGrid, XYZPosition } from '../../types'
 import { NodeId } from '../../context'
-import { getConnectedEdges, getHandleBounds, getXYZPos, handleNodeClick } from '../../utils'
+import { getConnectedEdges, getXYZPos, handleNodeClick } from '../../utils'
 
 const { id, type, name, draggable, selectable, connectable, snapGrid, ...props } = defineProps<{
   id: string
@@ -59,13 +59,9 @@ const dragging = useDrag({
   },
 })
 
-const observer = useResizeObserver(
-  nodeElement,
-  () => {
-    updateNodeDimensions([{ id, nodeElement: nodeElement.value }])
-  },
-  { box: 'content-box' },
-)
+const observer = useResizeObserver(nodeElement, (ev) => {
+  updateNodeDimensions([{ id, nodeElement: ev[0].target as HTMLDivElement, forceUpdate: true }])
+})
 
 const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
   if (parentPos) {
@@ -94,23 +90,23 @@ onUpdateNodeInternals((updateIds) => {
   }
 })
 
-onMounted(() => {
-  updatePosition(
-    {
-      x: node.position.x,
-      y: node.position.y,
-      z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
-    },
-    parentNode ? { ...parentNode.computedPosition } : undefined,
-  )
+updatePosition(
+  {
+    x: node.position.x,
+    y: node.position.y,
+    z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
+  },
+  parentNode ? { ...parentNode.computedPosition } : undefined,
+)
 
+onMounted(() => {
   if (!scope) scope = effectScope()
 
   scope.run(() => {
     watch(
-      [() => node.width, () => node.height, () => node.type, () => node.sourcePosition, () => node.targetPosition],
+      [() => node.type, () => node.sourcePosition, () => node.targetPosition],
       () => {
-        updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+        updateNodeDimensions([{ id, nodeElement: nodeElement.value }])
       },
       { flush: 'post' },
     )
@@ -134,11 +130,7 @@ onMounted(() => {
         }
 
         updatePosition(xyzPos, parentX && parentY ? { x: parentX, y: parentY, z: parentZ! } : undefined)
-
-        node.handleBounds = {
-          source: getHandleBounds('.source', nodeElement.value, viewport.zoom),
-          target: getHandleBounds('.target', nodeElement.value, viewport.zoom),
-        }
+        updateNodeDimensions([{ id, nodeElement: nodeElement.value }])
       },
       { flush: 'post' },
     )