From cd5103e5259dfe733578ed47da81864297752588 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Jun 2024 22:41:04 +0200
Subject: [PATCH] refactor(core): reduce node bounds calculation (#1453)

* refactor(core): reduce node bounds calculation

* chore(changeset): add

* chore(core): cleanup
---
 .changeset/hip-kiwis-pretend.md    |  5 +++++
 packages/core/src/store/actions.ts | 15 ++++++++-------
 packages/core/src/utils/node.ts    | 12 ++++++------
 3 files changed, 19 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/hip-kiwis-pretend.md

diff --git a/.changeset/hip-kiwis-pretend.md b/.changeset/hip-kiwis-pretend.md
new file mode 100644
index 00000000..3db29cf0
--- /dev/null
+++ b/.changeset/hip-kiwis-pretend.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Reduce node `getBoundingClientRect` calls by passing node-bounds directly to `getHandleBounds`
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 5b3b3a8d..09c095d8 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -142,7 +142,9 @@ export function useActions(
     const style = window.getComputedStyle(viewportNode)
     const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
 
-    const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
+    const changes: NodeDimensionChange[] = []
+
+    for (const update of updates) {
       const node = findNode(update.id)
 
       if (node) {
@@ -155,21 +157,20 @@ export function useActions(
         )
 
         if (doUpdate) {
-          node.handleBounds.source = getHandleBounds('.source', update.nodeElement, zoom)
-          node.handleBounds.target = getHandleBounds('.target', update.nodeElement, zoom)
+          const nodeBounds = update.nodeElement.getBoundingClientRect()
           node.dimensions = dimensions
+          node.handleBounds.source = getHandleBounds('.source', update.nodeElement, nodeBounds, zoom)
+          node.handleBounds.target = getHandleBounds('.target', update.nodeElement, nodeBounds, zoom)
           node.initialized = true
 
-          res.push({
+          changes.push({
             id: node.id,
             type: 'dimensions',
             dimensions,
           })
         }
       }
-
-      return res
-    }, [])
+    }
 
     if (!state.fitViewOnInitDone && state.fitViewOnInit) {
       nextTick(() => {
diff --git a/packages/core/src/utils/node.ts b/packages/core/src/utils/node.ts
index d2eaa97b..69846025 100644
--- a/packages/core/src/utils/node.ts
+++ b/packages/core/src/utils/node.ts
@@ -3,15 +3,15 @@ import { nextTick } from 'vue'
 import type { Actions, GraphNode, HandleElement, Position } from '../types'
 import { getDimensions } from '.'
 
-export function getHandleBounds(selector: string, nodeElement: HTMLDivElement, zoom: number): HandleElement[] | undefined {
+export function getHandleBounds(
+  selector: string,
+  nodeElement: HTMLDivElement,
+  nodeBounds: DOMRect,
+  zoom: number,
+): HandleElement[] {
   const handles = nodeElement.querySelectorAll(`.vue-flow__handle${selector}`)
 
-  if (!handles || !handles.length) {
-    return undefined
-  }
-
   const handlesArray = Array.from(handles) as HTMLDivElement[]
-  const nodeBounds = nodeElement.getBoundingClientRect()
 
   return handlesArray.map((handle): HandleElement => {
     const handleBounds = handle.getBoundingClientRect()