From 8118325d4e276f41ad66d285c7190f0700e0bc7a Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Tue, 14 Dec 2021 13:37:00 +0100 Subject: [PATCH] refactor(edges): Disable connecting handles inside the same node * Disable connecting a nodes source handle with its own target handle * disable emitting connections when node is not connectable Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com> --- src/composables/useHandle.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts index ba71466b..1e9a92a8 100644 --- a/src/composables/useHandle.ts +++ b/src/composables/useHandle.ts @@ -79,13 +79,14 @@ export default (store: FlowStore = useVueFlow().store) => onEdgeUpdateEnd?: () => void, ) => { const flowNode = (event.target as Element).closest('.vue-flow') - // when vue-flow is used inside a shadow root we can't use document const doc = getHostForElement(event.target as HTMLElement) - if (!doc) return + let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true) + const node = store.getNode(nodeId) + + if (node && (typeof node.connectable === 'undefined' ? store.nodesConnectable : node.connectable) === false) return if (!isValidConnection) { - const node = store.getNode(nodeId) if (node) validConnectFunc = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) ?? (() => true) } const elementBelow = doc.elementFromPoint(event.clientX, event.clientY) @@ -122,9 +123,7 @@ export default (store: FlowStore = useVueFlow().store) => doc, ) - if (!isHoveringHandle) { - return resetRecentHandle(recentHoveredHandle) - } + if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle) const isOwnHandle = connection.source === connection.target @@ -147,8 +146,9 @@ export default (store: FlowStore = useVueFlow().store) => ) store.hooks.connectStop.trigger(event) + const isOwnHandle = connection.source === connection.target - if (isValid) { + if (isValid && !isOwnHandle) { store.hooks.connect.trigger(connection) onEdgeUpdate?.(connection) }