refactor: v3 ui slots connection dots (#5316)

* refactor: v3 ui slots connection dots

* fix: use the new useTemplateRef

* fix: slot dark-theme border and hover styles

---------

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

src/renderer/core/layout/slots/useDomSlotRegistration.ts

@@ -56,21 +56,23 @@ const cleanupFunctions = new WeakMap<
   }
 >()
 
-export function useDomSlotRegistration(
-  nodeId: string,
-  slotIndex: number,
-  isInput: boolean,
+interface SlotRegistrationOptions {
+  nodeId: string
+  slotIndex: number
+  isInput: boolean
+  element: Ref<HTMLElement | null>
   transform?: TransformState
-) {
+}
+
+export function useDomSlotRegistration(options: SlotRegistrationOptions) {
+  const { nodeId, slotIndex, isInput, element: elRef, transform } = options
+
   // Early return if no nodeId
   if (!nodeId || nodeId === '') {
     return {
-      slotElRef: ref<HTMLElement | null>(null),
       remeasure: () => {}
     }
   }
-
-  const elRef = ref<HTMLElement | null>(null)
   const slotKey = getSlotKey(nodeId, slotIndex, isInput)
   // Track if this component is mounted
   const componentToken = {}
@@ -221,7 +223,6 @@ export function useDomSlotRegistration(
   })
 
   return {
-    slotElRef: elRef,
     // Expose for forced remeasure on structural changes
     remeasure: () => scheduleMeasurement(measureAndCacheOffset)
   }

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,15 +16,11 @@
     @pointerdown="handleClick"
   >
     <!-- Connection Dot -->
-    <div class="w-5 h-5 flex items-center justify-center group/slot">
-      <div
-        ref="slotElRef"
-        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
-        :style="{
-          backgroundColor: slotColor
-        }"
-      />
-    </div>
+    <SlotConnectionDot
+      ref="connectionDotRef"
+      :color="slotColor"
+      class="-translate-x-1/2"
+    />
 
     <!-- Slot Name -->
     <span
@@ -37,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onErrorCaptured, ref } from 'vue'
+import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
@@ -52,6 +48,8 @@ import {
   useDomSlotRegistration
 } from '@/renderer/core/layout/slots/useDomSlotRegistration'
 
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
 interface InputSlotProps {
   node?: LGraphNode
   nodeId?: string
@@ -97,10 +95,25 @@ const transformState = inject<TransformState | undefined>(
   undefined
 )
 
-const { slotElRef } = useDomSlotRegistration(
-  props.nodeId ?? '',
-  props.index,
-  true,
-  transformState
+const connectionDotRef = ref<{ slotElRef: Ref<HTMLElement> }>()
+const slotElRef = ref<HTMLElement | null>(null)
+
+// Watch for connection dot ref changes and sync the element ref
+watch(
+  connectionDotRef,
+  (newValue) => {
+    if (newValue?.slotElRef) {
+      slotElRef.value = newValue.slotElRef.value
+    }
+  },
+  { immediate: true }
 )
+
+useDomSlotRegistration({
+  nodeId: props.nodeId ?? '',
+  slotIndex: props.index,
+  isInput: true,
+  element: slotElRef,
+  transform: transformState
+})
 </script>

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

@@ -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}`"
@@ -18,7 +18,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,20 +25,16 @@
     </span>
 
     <!-- Connection Dot -->
-    <div class="w-5 h-5 flex items-center justify-center group/slot">
-      <div
-        ref="slotElRef"
-        class="w-2 h-2 rounded-full bg-white transition-all duration-150 group-hover/slot:w-2.5 group-hover/slot:h-2.5 group-hover/slot:border-2 group-hover/slot:border-white"
-        :style="{
-          backgroundColor: slotColor
-        }"
-      />
-    </div>
+    <SlotConnectionDot
+      ref="connectionDotRef"
+      :color="slotColor"
+      class="translate-x-1/2"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onErrorCaptured, ref } from 'vue'
+import { type Ref, computed, inject, onErrorCaptured, ref, watch } from 'vue'
 
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getSlotColor } from '@/constants/slotColors'
@@ -50,6 +46,8 @@ import {
   useDomSlotRegistration
 } from '@/renderer/core/layout/slots/useDomSlotRegistration'
 
+import SlotConnectionDot from './SlotConnectionDot.vue'
+
 interface OutputSlotProps {
   node?: LGraphNode
   nodeId?: string
@@ -96,10 +94,25 @@ const transformState = inject<TransformState | undefined>(
   undefined
 )
 
-const { slotElRef } = useDomSlotRegistration(
-  props.nodeId ?? '',
-  props.index,
-  false,
-  transformState
+const connectionDotRef = ref<{ slotElRef: Ref<HTMLElement> }>()
+const slotElRef = ref<HTMLElement | null>(null)
+
+// Watch for connection dot ref changes and sync the element ref
+watch(
+  connectionDotRef,
+  (newValue) => {
+    if (newValue?.slotElRef) {
+      slotElRef.value = newValue.slotElRef.value
+    }
+  },
+  { immediate: true }
 )
+
+useDomSlotRegistration({
+  nodeId: props.nodeId ?? '',
+  slotIndex: props.index,
+  isInput: false,
+  element: slotElRef,
+  transform: transformState
+})
 </script>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
+import { type ClassValue, cn } from '@/utils/tailwindUtil'
+
+const props = defineProps<{
+  color?: string
+  multi?: boolean
+  class?: ClassValue
+}>()
+
+const slotElRef = useTemplateRef('slot-el')
+
+defineExpose({
+  slotElRef
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn('size-6 flex items-center justify-center group/slot', props.class)
+    "
+  >
+    <div
+      ref="slot-el"
+      :style="{ backgroundColor: color }"
+      :class="
+        cn(
+          'bg-[#5B5E7D] rounded-full',
+          'transition-all duration-150',
+          'cursor-crosshair',
+          'border border-solid border-black/5 dark-theme:border-white/10',
+          'group-hover/slot:border-black/20 dark-theme:group-hover/slot:border-white/50 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))
 }