Slot functionality for vue nodes (#5628)

Allows for simple slot functionality in vue nodes mode.

Has:
- Drag new link from slot
- Connect new link from dropping on slot

Now:
- Tests

After:
- Drop on reroute
- Correct link color on connect
- Drop on node
- Hover effects

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5628-Slot-functionality-for-vue-nodes-2716d73d365081c59a3cef7c8a5e539e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>

src/renderer/extensions/vueNodes/components/InputSlot.vue

@@ -1,21 +1,12 @@
 <template>
   <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
-  <div
-    v-else
-    class="lg-slot lg-slot--input flex items-center cursor-crosshair group rounded-r-lg h-6"
-    :class="{
-      'opacity-70': readonly,
-      'lg-slot--connected': connected,
-      'lg-slot--compatible': compatible,
-      'lg-slot--dot-only': dotOnly,
-      'pr-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly
-    }"
-  >
+  <div v-else :class="slotWrapperClass">
     <!-- Connection Dot -->
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
       class="-translate-x-1/2"
+      v-on="readonly ? {} : { pointerdown: onPointerDown }"
     />
 
     <!-- Slot Name -->
@@ -41,6 +32,8 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
 import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
+import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
+import { cn } from '@/utils/tailwindUtil'
 
 import SlotConnectionDot from './SlotConnectionDot.vue'
 
@@ -70,6 +63,20 @@ onErrorCaptured((error) => {
 // Get slot color based on type
 const slotColor = computed(() => getSlotColor(props.slotData.type))
 
+const slotWrapperClass = computed(() =>
+  cn(
+    'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
+    props.readonly ? 'cursor-default opacity-70' : 'cursor-crosshair',
+    props.dotOnly
+      ? 'lg-slot--dot-only'
+      : 'pr-6 hover:bg-black/5 hover:dark:bg-white/5',
+    {
+      'lg-slot--connected': props.connected,
+      'lg-slot--compatible': props.compatible
+    }
+  )
+)
+
 const connectionDotRef = ref<ComponentPublicInstance<{
   slotElRef: HTMLElement | undefined
 }> | null>(null)
@@ -88,4 +95,11 @@ useSlotElementTracking({
   type: 'input',
   element: slotElRef
 })
+
+const { onPointerDown } = useSlotLinkInteraction({
+  nodeId: props.nodeId ?? '',
+  index: props.index,
+  type: 'input',
+  readonly: props.readonly
+})
 </script>