feat(core): add isValidConnection prop

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -29,6 +29,7 @@ const EdgeWrapper = defineComponent({
       removeSelectedEdges,
       findEdge,
       findNode,
+      isValidConnection,
     } = useVueFlow()
 
     const hooks = useEdgeHooks(props.edge, emits)
@@ -60,7 +61,7 @@ const EdgeWrapper = defineComponent({
       nodeId,
       handleId,
       type,
-      isValidConnection: undefined,
+      isValidConnection: isValidConnection.value,
       edgeUpdaterType,
       onEdgeUpdate,
       onEdgeUpdateEnd,

packages/core/src/composables/useHandle.ts

@@ -5,7 +5,7 @@ interface UseHandleProps {
   handleId: MaybeRef<string | null>
   nodeId: MaybeRef<string>
   type: MaybeRef<HandleType>
-  isValidConnection?: ValidConnectionFunc
+  isValidConnection?: ValidConnectionFunc | null
   edgeUpdaterType?: MaybeRef<HandleType>
   onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
   onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
@@ -44,6 +44,7 @@ export default function useHandle({
     emits,
     viewport,
     edges,
+    isValidConnection: isValidConnectionProp,
   } = useVueFlow()
 
   let connection: Connection | null = null
@@ -59,10 +60,10 @@ export default function useHandle({
 
       const node = findNode(unref(nodeId))
 
-      let validConnectFunc = isValidConnection || alwaysValid
+      let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
 
       if (!isValidConnection) {
-        if (node) validConnectFunc = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
+        if (node) isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
       }
 
       let prevClosestHandle: ConnectionHandle | null
@@ -136,7 +137,7 @@ export default function useHandle({
           nodeId,
           handleId,
           isTarget ? 'target' : 'source',
-          validConnectFunc,
+          isValidConnectionHandler,
           doc,
           edges.value,
           findNode,
@@ -218,12 +219,12 @@ export default function useHandle({
     if (!connectionClickStartHandle.value) {
       startConnection({ nodeId: unref(nodeId), type: unref(type), handleId: unref(handleId) }, undefined, event, true)
     } else {
-      let validConnectFunc = isValidConnection ?? alwaysValid
+      let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
 
       const node = findNode(unref(nodeId))
 
       if (!isValidConnection) {
-        if (node) validConnectFunc = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
+        if (node) isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
       }
 
       if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
@@ -241,7 +242,7 @@ export default function useHandle({
         connectionClickStartHandle.value.nodeId,
         connectionClickStartHandle.value.handleId || null,
         connectionClickStartHandle.value.type,
-        validConnectFunc,
+        isValidConnectionHandler,
         doc,
         edges.value,
         findNode,

packages/core/src/container/VueFlow/VueFlow.vue

@@ -45,6 +45,7 @@ const props = withDefaults(defineProps<FlowProps>(), {
   nodesFocusable: undefined,
   autoPanOnConnect: undefined,
   autoPanOnNodeDrag: undefined,
+  isValidConnection: undefined,
 })
 
 const emit = defineEmits<{

packages/core/src/store/actions.ts

@@ -298,7 +298,17 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
 
     if (!state.initialized && !nextEdges.length) return
 
-    state.edges = nextEdges.reduce<GraphEdge[]>((res, edge) => {
+    const validEdges = state.isValidConnection
+      ? nextEdges.filter((edge) =>
+          state.isValidConnection!(edge, {
+            edges: state.edges,
+            sourceNode: findNode(edge.source)!,
+            targetNode: findNode(edge.target)!,
+          }),
+        )
+      : nextEdges
+
+    state.edges = validEdges.reduce<GraphEdge[]>((res, edge) => {
       const sourceNode = findNode(edge.source)!
       const targetNode = findNode(edge.target)!
 
@@ -343,7 +353,17 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
   const addEdges: Actions['addEdges'] = (params) => {
     const nextEdges = params instanceof Function ? params(state.edges) : params
 
-    const changes = nextEdges.reduce((acc, param) => {
+    const validEdges = state.isValidConnection
+      ? nextEdges.filter((edge) =>
+          state.isValidConnection!(edge, {
+            edges: state.edges,
+            sourceNode: findNode(edge.source)!,
+            targetNode: findNode(edge.target)!,
+          }),
+        )
+      : nextEdges
+
+    const changes = validEdges.reduce((acc, param) => {
       const edge = addEdgeToStore(
         {
           ...param,

packages/core/src/types/flow.ts

@@ -6,6 +6,7 @@ import type { Connection, ConnectionLineOptions, ConnectionLineType, ConnectionM
 import type { PanOnScrollMode, ViewportTransform } from './zoom'
 import type { EdgeTypesObject, NodeTypesObject } from './components'
 import type { CustomEvent } from './hooks'
+import type { ValidConnectionFunc } from '~/types/handle'
 
 export type ElementData = any
 
@@ -119,6 +120,7 @@ export interface FlowProps {
   connectionLineStyle?: CSSProperties | null
   connectionLineOptions?: ConnectionLineOptions
   connectionRadius?: number
+  isValidConnection?: ValidConnectionFunc | null
   deleteKeyCode?: KeyFilter | null
   selectionKeyCode?: KeyFilter | null
   multiSelectionKeyCode?: KeyFilter | null

packages/core/src/types/store.ts

@@ -27,7 +27,7 @@ import type { CoordinateExtent, GraphNode, Node } from './node'
 import type { D3Selection, D3Zoom, D3ZoomHandler, PanOnScrollMode, ViewportFunctions, ViewportTransform } from './zoom'
 import type { CustomEvent, FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
 import type { EdgeChange, NodeChange, NodeDragItem } from './changes'
-import type { StartHandle, ValidHandleResult } from './handle'
+import type { StartHandle, ValidConnectionFunc, ValidHandleResult } from './handle'
 
 export interface UpdateNodeDimensionsParams {
   id: string
@@ -89,6 +89,7 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   connectionPosition: XYPosition
   connectionRadius: number
   connectionStatus: ConnectionStatus | null
+  isValidConnection: ValidConnectionFunc | null
 
   connectOnClick: boolean
   edgeUpdaterRadius: number