feat: Extend ValidConnectionFunc

# What's changed?

* Add current edges, sourceNode & targetNode as parameter to valid connection func, so we can possibly prevent new connections based on current elements

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
+
-        ? {
+      const sourceId = isTarget ? elementBelowNodeId : nodeId
-            source: elementBelowNodeId,
+      const sourceHandleId = isTarget ? elementBelowHandleId : handleId
-            sourceHandle: elementBelowHandleId,
+      const targetId = isTarget ? nodeId : elementBelowNodeId
-            target: nodeId,
+      const targetHandleId = isTarget ? handleId : elementBelowHandleId
-            targetHandle: handleId,
+
-          }
+      const connection: Connection = {
-        : {
+        source: sourceId,
-            source: nodeId,
+        sourceHandle: sourceHandleId,
-            sourceHandle: handleId,
+        target: targetId,
-            target: elementBelowNodeId,
+        targetHandle: targetHandleId,
-            targetHandle: elementBelowHandleId,
+      }
-          }
 
       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)
+        store.hooks.connect.trigger(connection)
-        else onEdgeUpdate(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

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 */