refactor(nodes): use HandleConnectable type for nodes connectable prop

packages/core/src/components/Handle/Handle.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { isString } from '@vueuse/core'
+import { isFunction, isString } from '@vueuse/core'
 import { useHandle, useNode, useVueFlow } from '../../composables'
 import type { Position } from '../../types'
 import { ConnectionMode } from '../../types'
@@ -8,7 +8,7 @@ import { getDimensions } from '../../utils'
 
 const { type = 'source', position = 'top' as Position, connectable = true, id, isValidConnection } = defineProps<HandleProps>()
 
-const { connectionStartHandle, connectionMode, vueFlowRef } = $(useVueFlow())
+const { connectionStartHandle, connectionMode, vueFlowRef, nodesConnectable } = $(useVueFlow())
 
 const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
 
@@ -19,6 +19,8 @@ const handleId = $computed(() => id ?? (connectionMode === ConnectionMode.Strict
 const isConnectable = computed(() => {
   if (isString(connectable) && connectable === 'single') {
     return !connectedEdges.value.some((edge) => edge[type] === nodeId && edge[`${type}Handle`] === handleId)
+  } else if (isFunction(connectable)) {
+    return connectable(node, connectedEdges.value)
   }
 
   return connectable
@@ -34,25 +36,6 @@ const onClickHandler = (event: MouseEvent) => {
   onClick(event, handleId ?? null, nodeId, type, isValidConnection)
 }
 
-const getClasses = computed(() => {
-  return [
-    'vue-flow__handle',
-    `vue-flow__handle-${position}`,
-    `vue-flow__handle-${handleId}`,
-    'nodrag',
-    {
-      source: type !== 'target',
-      target: type === 'target',
-      connectable: isConnectable,
-      connecting:
-        connectionStartHandle &&
-        connectionStartHandle.nodeId === nodeId &&
-        connectionStartHandle.handleId === handleId &&
-        connectionStartHandle.type === type,
-    },
-  ]
-})
-
 onMounted(() => {
   const existingBounds = node.handleBounds[type]?.find((b) => b.id === handleId)
   if (!vueFlowRef || existingBounds) return
@@ -92,7 +75,21 @@ export default {
     :data-handleid="handleId"
     :data-nodeid="nodeId"
     :data-handlepos="position"
-    :class="getClasses"
+    class="vue-flow__handle nodrag"
+    :class="[
+      `vue-flow__handle-${position}`,
+      `vue-flow__handle-${handleId}`,
+      {
+        source: type !== 'target',
+        target: type === 'target',
+        connectable: isConnectable,
+        connecting:
+          connectionStartHandle &&
+          connectionStartHandle.nodeId === nodeId &&
+          connectionStartHandle.handleId === handleId &&
+          connectionStartHandle.type === type,
+      },
+    ]"
     @mousedown="onMouseDownHandler"
     @click="onClickHandler"
   >

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { useDrag, useNodeHooks, useVueFlow } from '../../composables'
-import type { GraphNode, NodeComponent, SnapGrid, XYZPosition } from '../../types'
+import type { GraphNode, HandleConnectable, NodeComponent, SnapGrid, XYZPosition } from '../../types'
 import { NodeId, NodeRef } from '../../context'
 import { getConnectedEdges, getXYZPos, handleNodeClick } from '../../utils'
 
@@ -9,7 +9,7 @@ const { id, type, name, draggable, selectable, connectable, snapGrid, ...props }
   id: string
   draggable: boolean
   selectable: boolean
-  connectable: boolean
+  connectable: HandleConnectable
   snapGrid?: SnapGrid
   type: NodeComponent | Function | Object | false
   name: string
@@ -39,6 +39,8 @@ const node = $(useVModel(props, 'node'))
 
 const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
 
+const connectedEdges = $computed(() => getConnectedEdges([node], edges))
+
 const nodeElement = ref()
 
 provide(NodeRef, nodeElement)
@@ -137,19 +139,19 @@ onBeforeUnmount(() => {
 
 const onMouseEnter = (event: MouseEvent) => {
   if (!dragging?.value) {
-    emit.mouseEnter({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+    emit.mouseEnter({ event, node, connectedEdges })
   }
 }
 
 const onMouseMove = (event: MouseEvent) => {
   if (!dragging?.value) {
-    emit.mouseMove({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+    emit.mouseMove({ event, node, connectedEdges })
   }
 }
 
 const onMouseLeave = (event: MouseEvent) => {
   if (!dragging?.value) {
-    emit.mouseLeave({ event, node, connectedEdges: getConnectedEdges([node], edges) })
+    emit.mouseLeave({ event, node, connectedEdges })
   }
 }