From b411c1e411cf7715efd03ecb6fc1b6d66f1a94de Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Dec 2022 12:29:12 +0100
Subject: [PATCH] fix(core): await node init to add handle bounds in `Handle`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../core/src/components/Handle/Handle.vue     | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index f716bcdc..bd1f8b8a 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -39,30 +39,35 @@ const isConnectable = computed(() => {
 })
 
 onMounted(() => {
-  // set up handle bounds if they don't exist yet (i.e. the handle was added after the node has already been mounted)
-  const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
-  if (!vueFlowRef || existingBounds) return
+  // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
+  until(() => node.initialized)
+    .toBe(true)
+    .then(() => {
+      const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
 
-  const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane')
+      if (!vueFlowRef || existingBounds) return
 
-  if (!nodeEl || !handle.value || !viewportNode) return
+      const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane')
 
-  const nodeBounds = nodeEl.value.getBoundingClientRect()
+      if (!nodeEl || !handle.value || !viewportNode || !handleId) return
 
-  const handleBounds = handle.value.getBoundingClientRect()
+      const nodeBounds = nodeEl.value.getBoundingClientRect()
 
-  const style = window.getComputedStyle(viewportNode)
-  const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
+      const handleBounds = handle.value.getBoundingClientRect()
 
-  const nextBounds = {
-    id: handleId,
-    position,
-    x: (handleBounds.left - nodeBounds.left) / zoom,
-    y: (handleBounds.top - nodeBounds.top) / zoom,
-    ...getDimensions(handle.value),
-  }
+      const style = window.getComputedStyle(viewportNode)
+      const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
 
-  node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
+      const nextBounds = {
+        id: handleId,
+        position,
+        x: (handleBounds.left - nodeBounds.left) / zoom,
+        y: (handleBounds.top - nodeBounds.top) / zoom,
+        ...getDimensions(handle.value),
+      }
+
+      node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
+    })
 })
 </script>