diff --git a/.changeset/giant-mayflies-study.md b/.changeset/giant-mayflies-study.md new file mode 100644 index 00000000..6238df66 --- /dev/null +++ b/.changeset/giant-mayflies-study.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Calculate correct handle position in handle lookup diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts index 0287444d..038cafff 100644 --- a/packages/core/src/components/ConnectionLine/index.ts +++ b/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) { diff --git a/packages/core/src/utils/edge.ts b/packages/core/src/utils/edge.ts index 812849d0..f80f50ca 100644 --- a/packages/core/src/utils/edge.ts +++ b/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, } } diff --git a/packages/core/src/utils/general.ts b/packages/core/src/utils/general.ts index 77c11e66..53eb4b84 100644 --- a/packages/core/src/utils/general.ts +++ b/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, + } +} diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts index 1b1af450..2082e1eb 100644 --- a/packages/core/src/utils/handle.ts +++ b/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((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, })