diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts index 038cafff..2565b49d 100644 --- a/packages/core/src/components/ConnectionLine/index.ts +++ b/packages/core/src/components/ConnectionLine/index.ts @@ -74,7 +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, fromHandle) + const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition) let toHandle: HandleElement | null = null if (toNode.value && connectionEndHandle.value?.handleId) { diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts index d4007c1b..d8c61e9a 100644 --- a/packages/core/src/components/Edges/EdgeWrapper.ts +++ b/packages/core/src/components/Edges/EdgeWrapper.ts @@ -8,8 +8,8 @@ import { ErrorCode, VueFlowError, elementSelectionKeys, - getEdgePositions, getHandle, + getHandlePosition, getMarkerId, } from '../../utils' import EdgeAnchor from './EdgeAnchor' @@ -160,19 +160,14 @@ const EdgeWrapper = defineComponent({ const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle) - const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom + const sourcePosition = sourceHandle?.position || Position.Bottom - const targetPosition = targetHandle ? targetHandle.position : Position.Top + const targetPosition = targetHandle?.position || Position.Top - const { sourceX, sourceY, targetY, targetX } = getEdgePositions( - sourceNode, - sourceHandle, - sourcePosition, - targetNode, - targetHandle, - targetPosition, - ) + const { x: sourceX, y: sourceY } = getHandlePosition(sourceNode, sourceHandle, sourcePosition) + const { x: targetX, y: targetY } = getHandlePosition(targetNode, targetHandle, targetPosition) + // todo: let's avoid writing these here (in v2 we want to remove all of these self-managed refs) edge.value.sourceX = sourceX edge.value.sourceY = sourceY edge.value.targetX = targetX diff --git a/packages/core/src/types/handle.ts b/packages/core/src/types/handle.ts index ad41682d..9c0de3de 100644 --- a/packages/core/src/types/handle.ts +++ b/packages/core/src/types/handle.ts @@ -10,12 +10,10 @@ export interface HandleElement extends XYPosition, Dimensions { position: Position } -export interface ConnectionHandle { +export interface ConnectionHandle extends XYPosition { id: string | null type: HandleType | null nodeId: string - x: number - y: number } export interface ValidHandleResult { diff --git a/packages/core/src/utils/edge.ts b/packages/core/src/utils/edge.ts index f80f50ca..b95e53d9 100644 --- a/packages/core/src/utils/edge.ts +++ b/packages/core/src/utils/edge.ts @@ -1,12 +1,16 @@ -import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types' +import type { Actions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types' import { Position } from '../types' -import { rectToBox } from '.' +import { getNodeDimensions, rectToBox } from '.' -export function getHandlePosition(position: Position, node: GraphNode, handle: HandleElement | null): XYPosition { +export function getHandlePosition( + node: GraphNode, + handle: HandleElement | null, + fallbackPosition: Position = Position.Left, +): 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 + const { width, height } = handle ?? getNodeDimensions(node) + const position = handle?.position ?? fallbackPosition switch (position) { case Position.Top: @@ -40,25 +44,6 @@ export function getHandle(bounds: HandleElement[] = [], handleId?: string | null return (!handleId ? bounds[0] : bounds.find((d) => d.id === handleId)) || null } -export function getEdgePositions( - sourceNode: GraphNode, - sourceHandle: HandleElement | null, - sourcePosition: Position, - targetNode: GraphNode, - targetHandle: HandleElement | null, - targetPosition: Position, -): EdgePositions { - const { x: sourceX, y: sourceY } = getHandlePosition(sourcePosition, sourceNode, sourceHandle) - const { x: targetX, y: targetY } = getHandlePosition(targetPosition, targetNode, targetHandle) - - return { - sourceX, - sourceY, - targetX, - targetY, - } -} - interface IsEdgeVisibleParams { sourcePos: XYPosition targetPos: XYPosition diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts index 2082e1eb..c77c85b3 100644 --- a/packages/core/src/utils/handle.ts +++ b/packages/core/src/utils/handle.ts @@ -2,8 +2,8 @@ import { ConnectionMode } from '../types' import type { Actions, Connection, + ConnectionHandle, ConnectionStatus, - Dimensions, GraphEdge, GraphNode, HandleType, @@ -14,12 +14,6 @@ import type { } from '../types' import { getEventPosition, getHandlePosition } from '.' -export interface ConnectionHandle extends XYPosition, Dimensions { - id: string | null - type: HandleType | null - nodeId: string -} - function defaultValidHandleResult(): ValidHandleResult { return { handleDomNode: null, @@ -41,22 +35,23 @@ export function getHandles( type: HandleType, currentHandle: string, ): ConnectionHandle[] { - return (handleBounds[type] || []).reduce((res, h) => { - if (`${node.id}-${h.id}-${type}` !== currentHandle) { - const handlePosition = getHandlePosition(h.position, node, h) + const connectionHandles: ConnectionHandle[] = [] - res.push({ - id: h.id || null, + for (const handle of handleBounds[type] || []) { + if (`${node.id}-${handle.id}-${type}` !== currentHandle) { + const { x, y } = getHandlePosition(node, handle) + + connectionHandles.push({ + id: handle.id || null, type, nodeId: node.id, - x: handlePosition.x, - y: handlePosition.y, - width: h.width, - height: h.height, + x, + y, }) } - return res - }, []) + } + + return connectionHandles } export function getClosestHandle(