refactor(nodes): calculate bounds on mount

packages/vue-flow/src/components/Handle/Handle.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { useHandle, useVueFlow } from '../../composables'
+import { useHandle, useNode, useVueFlow } from '../../composables'
 import type { Position } from '../../types'
 import { ConnectionMode } from '../../types'
-import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/handle'
+import { getDimensions } from '../../utils'
 
 const {
   type = 'source',
@@ -15,9 +15,11 @@ const {
   },
 } = defineProps<HandleProps>()
 
-const { connectionStartHandle, connectionMode } = $(useVueFlow())
+const { connectionStartHandle, connectionMode, vueFlowRef } = $(useVueFlow())
 
-const nodeId = inject(NodeId, '')
+const { id: nodeId, node, nodeEl } = useNode()
+
+const handle = ref<HTMLDivElement>()
 
 const handleId = $computed(() => id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${position}`))
 
@@ -49,6 +51,32 @@ const getClasses = computed(() => {
     },
   ]
 })
+
+onMounted(() => {
+  const existingBounds = node.handleBounds[type]?.find((b) => b.id === handleId)
+  if (!vueFlowRef || existingBounds) return
+
+  const viewportNode = vueFlowRef.querySelector('.vue-flow__transformationpane')
+
+  if (!nodeEl || !handle.value || !viewportNode) return
+
+  const nodeBounds = nodeEl.value.getBoundingClientRect()
+
+  const handleBounds = handle.value.getBoundingClientRect()
+
+  const style = window.getComputedStyle(viewportNode)
+  const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
+
+  const nextBounds = {
+    id: handleId,
+    position,
+    x: (handleBounds.left - nodeBounds.left) / zoom,
+    y: (handleBounds.top - nodeBounds.top) / zoom,
+    ...getDimensions(handle.value),
+  }
+
+  node.handleBounds[type] = [...(node.handleBounds[type] ?? []), nextBounds]
+})
 </script>
 
 <script lang="ts">
@@ -59,6 +87,7 @@ export default {
 
 <template>
   <div
+    ref="handle"
     :data-handleid="handleId"
     :data-nodeid="nodeId"
     :data-handlepos="position"

packages/vue-flow/src/store/actions.ts

@@ -115,12 +115,10 @@ export default (state: State, getters: ComputedGetters): Actions => {
             (node.dimensions.width !== dimensions.width || node.dimensions.height !== dimensions.height)
           ) || update.forceUpdate
 
-        node.handleBounds = {
-          source: getHandleBounds('.source', update.nodeElement, zoom),
-          target: getHandleBounds('.target', update.nodeElement, zoom),
-        }
-
         if (doUpdate) {
+          node.handleBounds.source = getHandleBounds('.source', update.nodeElement, zoom)
+          node.handleBounds.target = getHandleBounds('.target', update.nodeElement, zoom)
+
           node.dimensions = dimensions
 
           res.push({