feat(nodes): add option to pass a valid target pos / valid source pos func to nodes

* edge updater cannot discern a valid connection by itself so we allow an option to pass a valid connection func to nodes which will then be used to determine if updating connection is valid
* it is optional, by default all connections are valid

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

src/types/connection.ts

@@ -11,8 +11,8 @@ export enum ConnectionLineType {
 export interface Connection {
   source: ElementId
   target: ElementId
-  sourceHandle: ElementId
-  targetHandle: ElementId
+  sourceHandle?: ElementId
+  targetHandle?: ElementId
 }
 
 export type ConnectionLineProps = {
@@ -28,9 +28,9 @@ export type ConnectionLineProps = {
 
 export type OnConnectFunc = (connection: Connection) => void
 export type OnConnectStartParams = {
-  nodeId: ElementId | undefined
-  handleId: ElementId | undefined
-  handleType: HandleType | undefined
+  nodeId?: ElementId
+  handleId?: ElementId
+  handleType?: HandleType
 }
 export type OnConnectStartFunc = (event: MouseEvent, params: OnConnectStartParams) => void
 export type OnConnectStopFunc = (event: MouseEvent) => void

src/types/hooks.ts

@@ -21,8 +21,7 @@ export interface FlowEvents {
   connect: Connection
   connectStart: {
     event: MouseEvent
-    params: OnConnectStartParams
-  }
+  } & { [key in keyof OnConnectStartParams]: OnConnectStartParams[key] }
   connectStop: MouseEvent
   connectEnd: MouseEvent
   load: FlowInstance

src/types/node.ts

@@ -1,7 +1,7 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
 import { DraggableOptions } from '@braks/revue-draggable'
 import { XYPosition, ElementId, Position, SnapGrid } from './flow'
-import { HandleElement } from './components'
+import { HandleElement, ValidConnectionFunc } from './components'
 
 export interface VFInternals {
   isDragging?: boolean
@@ -24,6 +24,8 @@ export interface NodeProps<T = any> {
   targetPosition?: Position
   sourcePosition?: Position
   dragging?: boolean
+  isValidTargetPos?: ValidConnectionFunc
+  isValidSourcePos?: ValidConnectionFunc
 }
 
 export type NodeComponent = Component<NodeProps> | DefineComponent<NodeProps, any, any, any, any> | string
@@ -46,6 +48,8 @@ export interface Node<T = any> {
   connectable?: boolean
   dragHandle?: string
   snapGrid?: SnapGrid
+  isValidTargetPos?: ValidConnectionFunc
+  isValidSourcePos?: ValidConnectionFunc
 }
 
 export interface GraphNode<T = any> extends Node<T> {