diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts index 3da115fd..2e0148e7 100644 --- a/packages/core/src/composables/useHandle.ts +++ b/packages/core/src/composables/useHandle.ts @@ -1,7 +1,7 @@ import type { MaybeRefOrGetter } from '@vueuse/core' import { toValue } from '@vueuse/core' import { useVueFlow } from './useVueFlow' -import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc } from '~/types' +import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '~/types' import { calcAutoPan, getClosestHandle, @@ -135,29 +135,47 @@ export function useHandle({ function onPointerMove(event: MouseTouchEvent) { connectionPosition = getEventPosition(event, containerBounds) - closestHandle = getClosestHandle( - pointToRendererPoint(connectionPosition, viewport.value, false, [1, 1]), - connectionRadius.value, - handleLookup, - ) + let result: ValidHandleResult | null = { + handleDomNode: null, + isValid: false, + connection: { source: '', target: '', sourceHandle: null, targetHandle: null }, + endHandle: null, + } + + closestHandle = + getClosestHandle( + pointToRendererPoint(connectionPosition, viewport.value, false, [1, 1]), + connectionRadius.value, + handleLookup, + )?.find((handle) => { + const validHandleResult = isValidHandle( + event, + handle, + connectionMode.value, + toValue(nodeId), + toValue(handleId), + isTarget ? 'target' : 'source', + isValidConnectionHandler, + doc, + edges.value, + findNode, + ) + + if (validHandleResult.isValid) { + result = validHandleResult + } + + return validHandleResult.isValid + }) || null if (!autoPanStarted) { autoPan() autoPanStarted = true } - const result = isValidHandle( - event, - closestHandle, - connectionMode.value, - toValue(nodeId), - toValue(handleId), - isTarget ? 'target' : 'source', - isValidConnectionHandler, - doc, - edges.value, - findNode, - ) + if (!result) { + return + } connection = result.connection isValid = result.isValid diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts index b5796708..cb51c740 100644 --- a/packages/core/src/utils/handle.ts +++ b/packages/core/src/utils/handle.ts @@ -53,11 +53,7 @@ export function getHandles( }, []) } -export function getClosestHandle( - pos: XYPosition, - connectionRadius: number, - handles: ConnectionHandle[], -): ConnectionHandle | null { +export function getClosestHandle(pos: XYPosition, connectionRadius: number, handles: ConnectionHandle[]) { let closestHandles: ConnectionHandle[] = [] let minDistance = Infinity @@ -79,10 +75,7 @@ export function getClosestHandle( return null } - return closestHandles.length === 1 - ? closestHandles[0] - : // if multiple handles are layout on top of each other we take the one with type = target because it's more likely that the user wants to connect to this one - closestHandles.find((handle) => handle.type === 'target') || closestHandles[0] + return closestHandles } // checks if and returns connection in fom of an object { source: 123, target: 312 }