refactor(core): calculate correct handle pos in handle lookup (#1494)

* refactor(core): use `getHandlePosition` to calculate handle pos

* chore(changeset): add

Author: bcakmakoglu

.changeset/giant-mayflies-study.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Calculate correct handle position in handle lookup

packages/core/src/components/ConnectionLine/index.ts

@@ -74,11 +74,7 @@ const ConnectionLine = defineComponent({
 
       const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null
       const fromPosition = fromHandle?.position || Position.Top
-      const { x: fromX, y: fromY } = getHandlePosition(
-        fromPosition,
-        { ...fromNode.value.dimensions, ...fromNode.value.computedPosition },
-        fromHandle,
-      )
+      const { x: fromX, y: fromY } = getHandlePosition(fromPosition, fromNode.value, fromHandle)
 
       let toHandle: HandleElement | null = null
       if (toNode.value && connectionEndHandle.value?.handleId) {

packages/core/src/utils/edge.ts

@@ -1,12 +1,12 @@
-import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '../types'
+import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
 import { Position } from '../types'
 import { rectToBox } from '.'
 
-export function getHandlePosition(position: Position, rect: Rect, handle: HandleElement | null): XYPosition {
-  const x = (handle?.x ?? 0) + rect.x
-  const y = (handle?.y ?? 0) + rect.y
-  const width = handle?.width ?? rect.width
-  const height = handle?.height ?? rect.height
+export function getHandlePosition(position: Position, node: GraphNode, handle: HandleElement | null): XYPosition {
+  const x = (handle?.x ?? 0) + node.computedPosition.x
+  const y = (handle?.y ?? 0) + node.computedPosition.y
+  const width = handle?.width ?? node.dimensions.width
+  const height = handle?.height ?? node.dimensions.height
 
   switch (position) {
     case Position.Top:
@@ -48,28 +48,14 @@ export function getEdgePositions(
   targetHandle: HandleElement | null,
   targetPosition: Position,
 ): EdgePositions {
-  const sourceHandlePos = getHandlePosition(
-    sourcePosition,
-    {
-      ...sourceNode.dimensions,
-      ...sourceNode.computedPosition,
-    },
-    sourceHandle,
-  )
-  const targetHandlePos = getHandlePosition(
-    targetPosition,
-    {
-      ...targetNode.dimensions,
-      ...targetNode.computedPosition,
-    },
-    targetHandle,
-  )
+  const { x: sourceX, y: sourceY } = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
+  const { x: targetX, y: targetY } = getHandlePosition(targetPosition, targetNode, targetHandle)
 
   return {
-    sourceX: sourceHandlePos.x,
-    sourceY: sourceHandlePos.y,
-    targetX: targetHandlePos.x,
-    targetY: targetHandlePos.y,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
   }
 }
 

packages/core/src/utils/general.ts

@@ -1,3 +1,5 @@
+import type { GraphNode } from '../types'
+
 export function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent {
   return 'clientX' in event
 }
@@ -14,3 +16,10 @@ export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRec
 }
 
 export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0
+
+export function getNodeDimensions(node: GraphNode): { width: number; height: number } {
+  return {
+    width: node.dimensions?.width ?? node.width ?? 0,
+    height: node.dimensions?.height ?? node.height ?? 0,
+  }
+}

packages/core/src/utils/handle.ts

@@ -12,7 +12,7 @@ import type {
   ValidHandleResult,
   XYPosition,
 } from '../types'
-import { getEventPosition } from '.'
+import { getEventPosition, getHandlePosition } from '.'
 
 export interface ConnectionHandle extends XYPosition, Dimensions {
   id: string | null
@@ -43,12 +43,14 @@ export function getHandles(
 ): ConnectionHandle[] {
   return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
     if (`${node.id}-${h.id}-${type}` !== currentHandle) {
+      const handlePosition = getHandlePosition(h.position, node, h)
+
       res.push({
         id: h.id || null,
         type,
         nodeId: node.id,
-        x: (node.computedPosition?.x ?? 0) + h.x + h.width / 2,
-        y: (node.computedPosition?.y ?? 0) + h.y + h.height / 2,
+        x: handlePosition.x,
+        y: handlePosition.y,
         width: h.width,
         height: h.height,
       })