[refactor] use composable to pass slot error states

Author: arjansingh

src/components/graph/GraphCanvas.vue

@@ -118,6 +118,7 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
+import { useSlotErrorState } from '@/renderer/extensions/vueNodes/composables/useSlotErrorState'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
@@ -143,6 +144,7 @@ const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const executionStore = useExecutionStore()
+const { setSlotError, clearNodeErrors } = useSlotErrorState()
 const toastStore = useToastStore()
 const canvasInteractions = useCanvasInteractions()
 
@@ -298,6 +300,9 @@ watch(
   () => executionStore.lastNodeErrors,
   (lastNodeErrors) => {
     const removeSlotError = (node: LGraphNode) => {
+      // Clear reactive state
+      clearNodeErrors(String(node.id))
+      // Clear LiteGraph object properties
       for (const slot of node.inputs) {
         delete slot.hasErrors
       }
@@ -314,17 +319,20 @@ watch(
       const validErrors = nodeErrors.errors.filter(
         (error) => error.extra_info?.input_name !== undefined
       )
-      const slotErrorsChanged =
-        validErrors.length > 0 &&
-        validErrors.some((error) => {
+      const slotErrorsChanged = validErrors
+        .map((error) => {
           const inputName = error.extra_info!.input_name!
           const inputIndex = node.findInputSlot(inputName)
           if (inputIndex !== -1) {
+            // Update LiteGraph object
             node.inputs[inputIndex].hasErrors = true
+            // Update reactive state (coupled update)
+            setSlotError(String(node.id), inputIndex, 'input', true)
             return true
           }
           return false
         })
+        .some(Boolean)
 
       // Trigger Vue node data update if slot errors changed
       if (slotErrorsChanged && comfyApp.graph.onTrigger) {

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

@@ -5,7 +5,7 @@
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="errorClassesDot"
+      :class="cn('-translate-x-1/2', errorClassesDot)"
       v-on="readonly ? {} : { pointerdown: onPointerDown }"
     />
 
@@ -40,8 +40,8 @@ import { getSlotColor } from '@/constants/slotColors'
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { useSlotElementTracking } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
+import { useSlotErrorState } from '@/renderer/extensions/vueNodes/composables/useSlotErrorState'
 import { useSlotLinkInteraction } from '@/renderer/extensions/vueNodes/composables/useSlotLinkInteraction'
-import type { NodeErrorContext } from '@/renderer/extensions/vueNodes/types/errorContext'
 import { cn } from '@/utils/tailwindUtil'
 
 import LODFallback from './LODFallback.vue'
@@ -60,19 +60,17 @@ interface InputSlotProps {
 
 const props = defineProps<InputSlotProps>()
 
-const nodeErrorContext = inject<NodeErrorContext>('nodeErrorContext')
+const { hasSlotError: hasSlotErrorFromState } = useSlotErrorState()
 
 const hasSlotError = computed(() => {
-  const slotName = props.slotData?.name
-  if (!slotName || !nodeErrorContext) return false
-  return nodeErrorContext.hasInputSlotError(slotName)
+  // Use reactive state instead of direct LiteGraph property
+  return hasSlotErrorFromState(props.nodeId ?? '', props.index, 'input')
 })
 
 const errorClassesDot = computed(() => {
-  return cn('-translate-x-1/2', {
-    'ring-2 ring-error dark-theme:ring-error ring-offset-0 rounded-full':
-      hasSlotError.value
-  })
+  return hasSlotError.value
+    ? 'ring-2 ring-error dark-theme:ring-error ring-offset-0 rounded-full'
+    : ''
 })
 
 const labelClasses = computed(() =>

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

@@ -94,7 +94,11 @@
       >
         <!-- Slots only rendered at full detail -->
         <NodeSlots
-          v-memo="[nodeData.inputs?.length, nodeData.outputs?.length]"
+          v-memo="[
+            nodeData.inputs?.length,
+            nodeData.outputs?.length,
+            slotErrorState
+          ]"
           :node-data="nodeData"
           :readonly="readonly"
         />
@@ -133,15 +137,7 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import {
-  computed,
-  inject,
-  onErrorCaptured,
-  onMounted,
-  provide,
-  ref,
-  readonly as vueReadonly
-} from 'vue'
+import { computed, inject, onErrorCaptured, onMounted, provide, ref } from 'vue'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { toggleNodeOptions } from '@/composables/graph/useMoreOptionsMenu'
@@ -152,11 +148,11 @@ import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteracti
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
 import { useNodePointerInteractions } from '@/renderer/extensions/vueNodes/composables/useNodePointerInteractions'
+import { useSlotErrorState } from '@/renderer/extensions/vueNodes/composables/useSlotErrorState'
 import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
 import { useNodeExecutionState } from '@/renderer/extensions/vueNodes/execution/useNodeExecutionState'
 import { useNodeLayout } from '@/renderer/extensions/vueNodes/layout/useNodeLayout'
 import { useNodePreviewState } from '@/renderer/extensions/vueNodes/preview/useNodePreviewState'
-import type { NodeErrorContext } from '@/renderer/extensions/vueNodes/types/errorContext'
 import { app } from '@/scripts/app'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
@@ -208,23 +204,15 @@ const isSelected = computed(() => {
 // Use execution state composable
 const { executing, progress } = useNodeExecutionState(() => nodeData.id)
 
+// Get slot error state for v-memo dependency
+const { slotErrorState } = useSlotErrorState()
+
 // Direct access to execution store for error state
 const executionStore = useExecutionStore()
 const hasExecutionError = computed(
   () => executionStore.lastExecutionErrorNodeId === nodeData.id
 )
 
-const hasInputSlotError = (inputName: string): boolean => {
-  const nodeValidationErrors = executionStore.lastNodeErrors?.[nodeData.id]
-  if (!nodeValidationErrors?.errors) return false
-
-  return nodeValidationErrors.errors.some(
-    (err) =>
-      err.type === 'required_input_missing' &&
-      err.extra_info?.input_name === inputName
-  )
-}
-
 const hasAnyError = computed((): boolean => {
   return !!(
     hasExecutionError.value ||
@@ -391,9 +379,4 @@ const nodeImageUrls = computed(() => {
 
 const nodeContainerRef = ref()
 provide('tooltipContainer', nodeContainerRef)
-
-const nodeErrorContext: NodeErrorContext = {
-  hasInputSlotError
-}
-provide('nodeErrorContext', vueReadonly(nodeErrorContext))
 </script>

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

@@ -5,12 +5,7 @@
       <!-- Slot Name -->
       <span
         v-if="!dotOnly"
-        :class="
-          cn(
-            'whitespace-nowrap text-sm font-normal lod-toggle',
-            'dark-theme:text-slate-200 text-stone-200'
-          )
-        "
+        class="whitespace-nowrap text-sm font-normal dark-theme:text-slate-200 text-stone-200 lod-toggle"
       >
         {{ slotData.localized_name || slotData.name || `Output ${index}` }}
       </span>
@@ -20,7 +15,7 @@
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="errorClasses"
+      class="translate-x-1/2"
       v-on="readonly ? {} : { pointerdown: onPointerDown }"
     />
   </div>
@@ -61,11 +56,6 @@ interface OutputSlotProps {
 
 const props = defineProps<OutputSlotProps>()
 
-// Apply styling classes to slot connection dot
-const errorClasses = computed(() => {
-  return cn('translate-x-1/2')
-})
-
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 

src/renderer/extensions/vueNodes/composables/useSlotErrorState.ts

@@ -0,0 +1,128 @@
+/**
+ * @fileoverview Reactive state management for slot error indicators
+ * @module composables/useSlotErrorState
+ */
+import { reactive, readonly } from 'vue'
+
+import type { NodeId } from '@/lib/litegraph/src/litegraph'
+
+/**
+ * Slot type indicators
+ */
+type SlotType = 'input' | 'output'
+
+/**
+ * Generates a consistent key for slot error state tracking
+ * @param nodeId - The node identifier
+ * @param slotIndex - The slot index
+ * @param slotType - The slot type ('input' or 'output')
+ * @returns Formatted key string
+ */
+function generateSlotKey(
+  nodeId: NodeId,
+  slotIndex: number,
+  slotType: SlotType
+): string {
+  return `${String(nodeId)}-${slotType}-${slotIndex}`
+}
+
+/**
+ * Global reactive state for slot error indicators
+ * Provides Vue-reactive tracking for slot errors without making LiteGraph objects reactive
+ */
+const slotErrorState = reactive(new Map<string, boolean>())
+
+/**
+ * Maps nodeId to Set of slot keys for easy lookup
+ */
+const nodeToSlotsIndex = reactive(new Map<string, Set<string>>())
+
+/**
+ * Composable for managing slot error state reactively
+ * Bridges LiteGraph object mutations with Vue reactivity
+ */
+export function useSlotErrorState() {
+  /**
+   * Set error state for a specific slot
+   * @param nodeId - The node identifier (string or number from LiteGraph)
+   * @param slotIndex - The slot index
+   * @param slotType - The slot type ('input' or 'output')
+   * @param hasError - Whether the slot has an error
+   */
+  function setSlotError(
+    nodeId: NodeId,
+    slotIndex: number,
+    slotType: SlotType,
+    hasError: boolean
+  ) {
+    const key = generateSlotKey(nodeId, slotIndex, slotType)
+    const nodeIdStr = String(nodeId)
+
+    if (!hasError) {
+      slotErrorState.delete(key)
+      const nodeSlots = nodeToSlotsIndex.get(nodeIdStr)
+      if (!nodeSlots) return
+
+      nodeSlots.delete(key)
+      if (nodeSlots.size === 0) {
+        nodeToSlotsIndex.delete(nodeIdStr)
+      }
+      return
+    }
+
+    slotErrorState.set(key, true)
+    if (!nodeToSlotsIndex.has(nodeIdStr)) {
+      nodeToSlotsIndex.set(nodeIdStr, new Set())
+    }
+    nodeToSlotsIndex.get(nodeIdStr)!.add(key)
+  }
+
+  /**
+   * Check if a specific slot has an error
+   * @param nodeId - The node identifier (string or number from LiteGraph)
+   * @param slotIndex - The slot index
+   * @param slotType - The slot type ('input' or 'output')
+   * @returns True if the slot has an error
+   */
+  function hasSlotError(
+    nodeId: NodeId,
+    slotIndex: number,
+    slotType: SlotType
+  ): boolean {
+    const key = generateSlotKey(nodeId, slotIndex, slotType)
+    return slotErrorState.get(key) ?? false
+  }
+
+  /**
+   * Clear all error states for a specific node
+   * @param nodeId - The node identifier (string or number from LiteGraph)
+   */
+  function clearNodeErrors(nodeId: NodeId) {
+    const nodeIdStr = String(nodeId)
+    const nodeSlots = nodeToSlotsIndex.get(nodeIdStr)
+
+    if (!nodeSlots) return
+
+    for (const key of nodeSlots) {
+      slotErrorState.delete(key)
+    }
+    nodeToSlotsIndex.delete(nodeIdStr)
+  }
+
+  /**
+   * Clear all error states
+   */
+  function clearAllErrors() {
+    slotErrorState.clear()
+    nodeToSlotsIndex.clear()
+  }
+
+  return {
+    setSlotError,
+    hasSlotError,
+    clearNodeErrors,
+    clearAllErrors,
+    // Expose readonly version for reactive consumption
+    slotErrorState: readonly(slotErrorState)
+  }
+}