refactor: v3 ui slots connection dots

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

@@ -2,13 +2,13 @@
   <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"
+    class="lg-slot lg-slot--input flex items-center cursor-crosshair group rounded-r-lg"
     :class="{
       'opacity-70': readonly,
       'lg-slot--connected': connected,
       'lg-slot--compatible': compatible,
       'lg-slot--dot-only': dotOnly,
-      'pr-2 hover:bg-black/5': !dotOnly
+      'pr-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly
     }"
     :style="{
       height: slotHeight + 'px'
@@ -16,14 +16,7 @@
     @pointerdown="handleClick"
   >
     <!-- Connection Dot -->
-    <div class="w-5 h-5 flex items-center justify-center group/slot">
-      <div
-        class="w-2.5 h-2.5 rounded-full bg-white transition-all duration-150 group-hover/slot:w-3 group-hover/slot:h-3 group-hover/slot:border-2 group-hover/slot:border-white"
-        :style="{
-          backgroundColor: slotColor
-        }"
-      />
-    </div>
+    <SlotConnectionDot :color="slotColor" class="-translate-x-1/2" />
 
     <!-- Slot Name -->
     <span
@@ -46,6 +39,8 @@ import {
   LGraphNode
 } from '@/lib/litegraph/src/litegraph'
 
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
 interface InputSlotProps {
   node?: LGraphNode
   slotData: INodeSlot

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

@@ -10,7 +10,7 @@
       cn(
         'bg-white dark-theme:bg-[#15161A]',
         'min-w-[445px]',
-        'lg-node absolute border-2 border-solid rounded-2xl',
+        'lg-node absolute border border-solid rounded-2xl',
         {
           'border-blue-500 ring-2 ring-blue-300': selected,
           'border-[#e1ded5] dark-theme:border-[#292A30]': !selected,
@@ -36,8 +36,8 @@
   >
     <div class="flex items-center">
       <template v-if="isCollapsed">
-        <MultiSlotPoint class="absolute left-0 -translate-x-1/2" />
-        <MultiSlotPoint class="absolute right-0 translate-x-1/2" />
+        <SlotConnectionDot multi class="absolute left-0 -translate-x-1/2" />
+        <SlotConnectionDot multi class="absolute right-0 translate-x-1/2" />
       </template>
       <!-- Header only updates on title/color changes -->
       <NodeHeader
@@ -118,11 +118,11 @@ import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayo
 import { LODLevel, useLOD } from '@/renderer/extensions/vueNodes/lod/useLOD'
 import { cn } from '@/utils/tailwindUtil'
 
-import MultiSlotPoint from './MultiSlotPoint.vue'
 import NodeContent from './NodeContent.vue'
 import NodeHeader from './NodeHeader.vue'
 import NodeSlots from './NodeSlots.vue'
 import NodeWidgets from './NodeWidgets.vue'
+import SlotConnectionDot from './SlotConnectionDot.vue'
 
 // Extended props for main node component
 interface LGraphNodeProps {
@@ -209,7 +209,7 @@ const hasCustomContent = computed(() => {
 })
 
 // Computed classes and conditions for better reusability
-const separatorClasses = 'bg-[#e1ded5] dark-theme:bg-[#292A30] h-[1px] mx-4'
+const separatorClasses = 'bg-[#e1ded5] dark-theme:bg-[#292A30] h-[1px] mx-0'
 
 // Common condition computations to avoid repetition
 const shouldShowWidgets = computed(

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

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  color?: string
-}>()
-</script>
-
-<template>
-  <div
-    :style="{ backgroundColor: color }"
-    class="bg-[#5B5E7D] w-[13.3px] h-[29.3px] rounded-full"
-  />
-</template>

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

@@ -4,7 +4,7 @@
     ⚠️ Node Slots Error
   </div>
   <div v-else class="lg-node-slots flex justify-between">
-    <div v-if="filteredInputs.length" class="flex flex-col">
+    <div v-if="filteredInputs.length" class="flex flex-col gap-1">
       <InputSlot
         v-for="(input, index) in filteredInputs"
         :key="`input-${index}`"
@@ -17,7 +17,7 @@
       />
     </div>
 
-    <div v-if="filteredOutputs.length" class="flex flex-col ml-auto">
+    <div v-if="filteredOutputs.length" class="flex flex-col gap-1 ml-auto">
       <OutputSlot
         v-for="(output, index) in filteredOutputs"
         :key="`output-${index}`"

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

@@ -2,13 +2,13 @@
   <div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
   <div
     v-else
-    class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group"
+    class="lg-slot lg-slot--output flex items-center cursor-crosshair justify-end group rounded-l-lg"
     :class="{
       'opacity-70': readonly,
       'lg-slot--connected': connected,
       'lg-slot--compatible': compatible,
       'lg-slot--dot-only': dotOnly,
-      'pl-2 hover:bg-black/5': !dotOnly,
+      'pl-6 hover:bg-black/5 hover:dark:bg-white/5': !dotOnly,
       'justify-center': dotOnly
     }"
     :style="{
@@ -25,14 +25,7 @@
     </span>
 
     <!-- Connection Dot -->
-    <div class="w-5 h-5 flex items-center justify-center group/slot">
-      <div
-        class="w-2.5 h-2.5 rounded-full bg-white transition-all duration-150 group-hover/slot:w-3 group-hover/slot:h-3 group-hover/slot:border-2 group-hover/slot:border-white"
-        :style="{
-          backgroundColor: slotColor
-        }"
-      />
-    </div>
+    <SlotConnectionDot :color="slotColor" class="translate-x-1/2" />
   </div>
 </template>
 
@@ -44,6 +37,8 @@ import { getSlotColor } from '@/constants/slotColors'
 import type { INodeSlot, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
 
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
 interface OutputSlotProps {
   node?: LGraphNode
   slotData: INodeSlot

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type ClassValue, cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  color?: string
+  multi?: boolean
+  class?: ClassValue
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('size-6 flex items-center justify-center group/slot', props.class)
+    "
+  >
+    <div
+      :style="{ backgroundColor: color }"
+      :class="
+        cn(
+          'bg-[#5B5E7D] rounded-full',
+          'transition-all duration-150',
+          'cursor-crosshair group-hover/slot:border-2 group-hover/slot:border-white group-hover/slot:scale-125',
+          multi ? 'w-3 h-6' : 'size-3'
+        )
+      "
+    />
+  </div>
+</template>

src/utils/tailwindUtil.ts

@@ -1,6 +1,8 @@
 import clsx, { type ClassArray } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+export type { ClassValue, ClassArray, ClassDictionary } from 'clsx'
+
 export function cn(...inputs: ClassArray) {
   return twMerge(clsx(inputs))
 }