From ee56ddb0cf1e938b78b272833284d0424c8c0aa0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 17 Sep 2022 13:20:22 +0200
Subject: [PATCH] refactor(nodes): use dom matrix to calculate handle bounds
 zoom

---
 packages/vue-flow/src/store/actions.ts | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/vue-flow/src/store/actions.ts b/packages/vue-flow/src/store/actions.ts
index cdd30a4e..b1158028 100644
--- a/packages/vue-flow/src/store/actions.ts
+++ b/packages/vue-flow/src/store/actions.ts
@@ -92,22 +92,31 @@ export default (state: State, getters: ComputedGetters): Actions => {
   }
 
   const updateNodeDimensions: Actions['updateNodeDimensions'] = (updates) => {
+    if (!state.vueFlowRef) return
+
+    const viewportNode = state.vueFlowRef.querySelector('.vue-flow__transformationpane')
+
+    if (!viewportNode) return
+
     const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
       const node = getters.getNode.value(update.id)
 
       if (node) {
         const dimensions = getDimensions(update.nodeElement)
 
-        const doUpdate = !!(
-          (dimensions.width &&
+        const style = window.getComputedStyle(viewportNode)
+        const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
+
+        const doUpdate =
+          !!(
+            dimensions.width &&
             dimensions.height &&
-            (node.dimensions.width !== dimensions.width || node.dimensions.height !== dimensions.height)) ||
-          update.forceUpdate
-        )
+            (node.dimensions.width !== dimensions.width || node.dimensions.height !== dimensions.height)
+          ) || update.forceUpdate
 
         node.handleBounds = {
-          source: getHandleBounds('.source', update.nodeElement, state.viewport.zoom),
-          target: getHandleBounds('.target', update.nodeElement, state.viewport.zoom),
+          source: getHandleBounds('.source', update.nodeElement, zoom),
+          target: getHandleBounds('.target', update.nodeElement, zoom),
         }
 
         if (doUpdate) {