From f508e6e571349ae5f3b291178e5a6eb92ea8f998 Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 7 Oct 2022 21:51:40 +0200 Subject: [PATCH] fix(nodes): undo handle validation wrapping itself --- packages/vue-flow/src/components/Handle/Handle.vue | 10 +--------- packages/vue-flow/src/composables/useHandle.ts | 13 +++++++++---- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/vue-flow/src/components/Handle/Handle.vue b/packages/vue-flow/src/components/Handle/Handle.vue index faf3484f..8dfa8e4b 100644 --- a/packages/vue-flow/src/components/Handle/Handle.vue +++ b/packages/vue-flow/src/components/Handle/Handle.vue @@ -5,15 +5,7 @@ import { ConnectionMode } from '../../types' import type { HandleProps } from '../../types/handle' import { getDimensions } from '../../utils' -const { - type = 'source', - position = 'top' as Position, - connectable = true, - id, - isValidConnection = function () { - return true - }, -} = defineProps() +const { type = 'source', position = 'top' as Position, connectable = true, id, isValidConnection } = defineProps() const { connectionStartHandle, connectionMode, vueFlowRef } = $(useVueFlow()) diff --git a/packages/vue-flow/src/composables/useHandle.ts b/packages/vue-flow/src/composables/useHandle.ts index 503470d9..00a4e3cc 100644 --- a/packages/vue-flow/src/composables/useHandle.ts +++ b/packages/vue-flow/src/composables/useHandle.ts @@ -1,3 +1,4 @@ +import { isFunction } from '@vueuse/core' import useVueFlow from './useVueFlow' import { getHostForElement } from '~/utils' import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc } from '~/types' @@ -17,7 +18,7 @@ export const checkElementBelowIsValid = ( isTarget: boolean, nodeId: string, handleId: string | null, - isValidConnection: ValidConnectionFunc, + isValidConnection: ValidConnectionFunc | undefined, doc: Document, edges: GraphEdge[], getNode: Getters['getNode'], @@ -57,8 +58,11 @@ export const checkElementBelowIsValid = ( } result.connection = connection + result.isValid = - isValidConnection(connection, { edges, sourceNode: getNode(sourceId)!, targetNode: getNode(targetId)! }) || + (isFunction(isValidConnection) + ? isValidConnection(connection, { edges, sourceNode: getNode(sourceId)!, targetNode: getNode(targetId)! }) + : true) || !result.connection.target || !result.connection.source } @@ -102,14 +106,14 @@ export default () => { const doc = getHostForElement(event.target as HTMLElement) if (!doc) return - let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true) + let validConnectFunc = isValidConnection const node = getNode(nodeId) if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return if (!isValidConnection) { - if (node) validConnectFunc = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) ?? (() => true) + if (node) validConnectFunc = !isTarget ? node.isValidTargetPos : node.isValidSourcePos } const elementBelow = doc.elementFromPoint(event.clientX, event.clientY) @@ -179,6 +183,7 @@ export default () => { const isOwnHandle = connection.source === connection.target + console.log(isValid) if (isValid && !isOwnHandle) { if (!onEdgeUpdate) emits.connect(connection) else onEdgeUpdate(connection)