refactor(core): reduce node bounds calculation (#1453)

* refactor(core): reduce node bounds calculation

* chore(changeset): add

* chore(core): cleanup

Author: bcakmakoglu

.changeset/hip-kiwis-pretend.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Reduce node `getBoundingClientRect` calls by passing node-bounds directly to `getHandleBounds`

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(() => {

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()