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/components/Nodes/DefaultNode.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position, ValidConnectionFunc } from '../../types'
 
 interface DefaultNodeProps extends NodeProps {
   data?: NodeProps['data']
   connectable?: NodeProps['connectable']
   targetPosition?: NodeProps['targetPosition']
   sourcePosition?: NodeProps['sourcePosition']
+  isValidTargetPos?: ValidConnectionFunc
+  isValidSourcePos?: ValidConnectionFunc
 }
 
 const props = withDefaults(defineProps<DefaultNodeProps>(), {
@@ -23,10 +25,20 @@ export default {
 }
 </script>
 <template>
-  <Handle type="target" :position="props.targetPosition" :is-connectable="props.connectable" />
+  <Handle
+    type="target"
+    :position="props.targetPosition"
+    :is-connectable="props.connectable"
+    :is-valid-connection="props.isValidTargetPos"
+  />
   <slot v-bind="props">
     <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
     <span v-else v-html="props.data?.label"></span>
   </slot>
-  <Handle type="source" :position="props.sourcePosition" :is-connectable="props.connectable" />
+  <Handle
+    type="source"
+    :position="props.sourcePosition"
+    :is-connectable="props.connectable"
+    :is-valid-connection="props.isValidSourcePos"
+  />
 </template>

src/components/Nodes/InputNode.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position, ValidConnectionFunc } from '../../types'
 
 interface InputNodeProps extends NodeProps {
   data?: NodeProps['data']
   connectable?: NodeProps['connectable']
   sourcePosition?: NodeProps['sourcePosition']
+  isValidSourcePos?: ValidConnectionFunc
 }
 
 const props = withDefaults(defineProps<InputNodeProps>(), {
@@ -25,5 +26,10 @@ export default {
     <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
     <span v-else v-html="props.data?.label"></span>
   </slot>
-  <Handle type="source" :position="props.sourcePosition" :connectable="props.connectable" />
+  <Handle
+    type="source"
+    :position="props.sourcePosition"
+    :connectable="props.connectable"
+    :is-valid-connection="props.isValidSourcePos"
+  />
 </template>

src/components/Nodes/NodeWrapper.vue

@@ -180,6 +180,8 @@ export default {
           sourcePosition: props.node.sourcePosition,
           targetPosition: props.node.targetPosition,
           dragging: props.node.__vf.isDragging,
+          isValidTargetPos: props.node.isValidTargetPos,
+          isValidSourcePos: props.node.isValidSourcePos,
         }"
       >
         <component
@@ -195,6 +197,8 @@ export default {
             sourcePosition: props.node.sourcePosition,
             targetPosition: props.node.targetPosition,
             dragging: props.node.__vf.isDragging,
+            isValidTargetPos: props.node.isValidTargetPos,
+            isValidSourcePos: props.node.isValidSourcePos,
           }"
         />
       </slot>

src/components/Nodes/OutputNode.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position, ValidConnectionFunc } from '../../types'
 
 interface OutputNodeProps extends NodeProps {
   data?: NodeProps['data']
   connectable?: NodeProps['connectable']
   targetPosition?: NodeProps['targetPosition']
+  isValidTargetPos?: ValidConnectionFunc
 }
 
 const props = withDefaults(defineProps<OutputNodeProps>(), {
@@ -25,5 +26,10 @@ export default {
     <component :is="props.data?.label" v-if="typeof props.data?.label !== 'string'" />
     <span v-else v-html="props.data?.label"></span>
   </slot>
-  <Handle type="source" :position="props.targetPosition" :is-connectable="props.connectable" />
+  <Handle
+    type="source"
+    :position="props.targetPosition"
+    :is-connectable="props.connectable"
+    :is-valid-connection="props.isValidTargetPos"
+  />
 </template>