diff --git a/package/src/composables/useHandle.ts b/package/src/composables/useHandle.ts index 43bf0e11..aafac376 100644 --- a/package/src/composables/useHandle.ts +++ b/package/src/composables/useHandle.ts @@ -1,6 +1,6 @@ import useVueFlow from './useVueFlow' import { getHostForElement } from '~/utils' -import { Connection, ConnectionMode, HandleType, Store, ValidConnectionFunc } from '~/types' +import { Connection, ConnectionMode, Getters, GraphEdge, HandleType, Store, ValidConnectionFunc } from '~/types' type Result = { elementBelow: Element | null @@ -18,6 +18,8 @@ export const checkElementBelowIsValid = ( handleId: string | null, isValidConnection: ValidConnectionFunc, doc: Document, + edges: GraphEdge[], + getNode: Getters['getNode'], ) => { const elementBelow = doc.elementFromPoint(event.clientX, event.clientY) const elementBelowIsTarget = elementBelow?.classList.contains('target') || false @@ -40,22 +42,24 @@ export const checkElementBelowIsValid = ( if (isValid) { const elementBelowNodeId = elementBelow.getAttribute('data-nodeid') ?? '' const elementBelowHandleId = elementBelow.getAttribute('data-handleid') ?? '' - const connection: Connection = isTarget - ? { - source: elementBelowNodeId, - sourceHandle: elementBelowHandleId, - target: nodeId, - targetHandle: handleId, - } - : { - source: nodeId, - sourceHandle: handleId, - target: elementBelowNodeId, - targetHandle: elementBelowHandleId, - } + + const sourceId = isTarget ? elementBelowNodeId : nodeId + const sourceHandleId = isTarget ? elementBelowHandleId : handleId + const targetId = isTarget ? nodeId : elementBelowNodeId + const targetHandleId = isTarget ? handleId : elementBelowHandleId + + const connection: Connection = { + source: sourceId, + sourceHandle: sourceHandleId, + target: targetId, + targetHandle: targetHandleId, + } result.connection = connection - result.isValid = isValidConnection(connection) || !result.connection.target || !result.connection.source + result.isValid = + isValidConnection(connection, { edges, sourceNode: getNode(sourceId)!, targetNode: getNode(targetId)! }) || + !result.connection.target || + !result.connection.source } } @@ -124,6 +128,8 @@ export default (store: Store = useVueFlow().store) => { handleId, validConnectFunc, doc, + store.edges, + store.getNode, ) if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle) @@ -146,14 +152,16 @@ export default (store: Store = useVueFlow().store) => { handleId, validConnectFunc, doc, + store.edges, + store.getNode, ) store.hooks.connectStop.trigger(event) const isOwnHandle = connection.source === connection.target if (isValid && !isOwnHandle) { - if (!onEdgeUpdate) store.hooks.connect.trigger(connection) - else onEdgeUpdate(connection) + store.hooks.connect.trigger(connection) + onEdgeUpdate?.(connection) } store.hooks.connectEnd.trigger(event) @@ -204,6 +212,8 @@ export default (store: Store = useVueFlow().store) => { store.connectionStartHandle.handleId || null, validConnectFunc, doc, + store.edges, + store.getNode, ) const isOwnHandle = connection.source === connection.target diff --git a/package/src/types/handle.ts b/package/src/types/handle.ts index a7638761..313d6011 100644 --- a/package/src/types/handle.ts +++ b/package/src/types/handle.ts @@ -1,5 +1,7 @@ import { Dimensions, Position, XYPosition } from './flow' import { Connection } from './connection' +import { GraphEdge } from './edge' +import { GraphNode } from './node' export type HandleType = 'source' | 'target' @@ -15,7 +17,10 @@ export interface StartHandle { } /** A valid connection function can determine if an attempted connection is valid or not, i.e. abort creating a new edge */ -export type ValidConnectionFunc = (connection: Connection) => boolean +export type ValidConnectionFunc = ( + connection: Connection, + elements: { edges: GraphEdge[]; sourceNode: GraphNode; targetNode: GraphNode }, +) => boolean export interface HandleProps { /** Unique id of handle element */