fix Vue node widgets should be in disabled state if their slots are connected with a link

src/composables/graph/useGraphNodeManager.ts

@@ -13,7 +13,18 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { WidgetValue } from '@/types/simplifiedWidget'
 
-import type { LGraph, LGraphNode } from '../../lib/litegraph/src/litegraph'
+import type {
+  LGraph,
+  LGraphNode,
+  LGraphTriggerAction,
+  LGraphTriggerParam
+} from '../../lib/litegraph/src/litegraph'
+import { NodeSlotType } from '../../lib/litegraph/src/types/globalEnums'
+
+export interface WidgetSlotMetadata {
+  index: number
+  linked: boolean
+}
 
 export interface SafeWidgetData {
   name: string
@@ -23,6 +34,7 @@ export interface SafeWidgetData {
   options?: Record<string, unknown>
   callback?: ((value: unknown) => void) | undefined
   spec?: InputSpec
+  slotMetadata?: WidgetSlotMetadata
 }
 
 export interface VueNodeData {
@@ -66,6 +78,22 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   // Non-reactive storage for original LiteGraph nodes
   const nodeRefs = new Map<string, LGraphNode>()
 
+  const refreshNodeSlots = (nodeId: string) => {
+    const nodeRef = nodeRefs.get(nodeId)
+    const currentData = vueNodeData.get(nodeId)
+
+    if (!nodeRef || !currentData) return
+
+    const refreshedData = extractVueNodeData(nodeRef)
+
+    vueNodeData.set(nodeId, {
+      ...currentData,
+      widgets: refreshedData.widgets,
+      inputs: refreshedData.inputs,
+      outputs: refreshedData.outputs
+    })
+  }
+
   // Extract safe data from LiteGraph node for Vue consumption
   const extractVueNodeData = (node: LGraphNode): VueNodeData => {
     // Determine subgraph ID - null for root graph, string for subgraphs
@@ -74,6 +102,16 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
         ? String(node.graph.id)
         : null
     // Extract safe widget data
+    const slotMetadata = new Map<string, WidgetSlotMetadata>()
+
+    node.inputs?.forEach((input, index) => {
+      if (!input?.widget?.name) return
+      slotMetadata.set(input.widget.name, {
+        index,
+        linked: input.link != null
+      })
+    })
+
     const safeWidgets = node.widgets?.map((widget) => {
       try {
         // TODO: Use widget.getReactiveData() once TypeScript types are updated
@@ -90,6 +128,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
           value = widget.options.values[0]
         }
         const spec = nodeDefStore.getInputSpecForWidget(node, widget.name)
+        const slotInfo = slotMetadata.get(widget.name)
 
         return {
           name: widget.name,
@@ -98,7 +137,8 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
           label: widget.label,
           options: widget.options ? { ...widget.options } : undefined,
           callback: widget.callback,
-          spec
+          spec,
+          slotMetadata: slotInfo
         }
       } catch (error) {
         return {
@@ -405,37 +445,27 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       handleNodeRemoved(node, originalOnNodeRemoved)
     }
 
-    // Listen for property change events from instrumented nodes
-    graph.onTrigger = (action: string, param: unknown) => {
-      if (
-        action === 'node:property:changed' &&
-        param &&
-        typeof param === 'object'
-      ) {
-        const event = param as {
-          nodeId: string | number
-          property: string
-          oldValue: unknown
-          newValue: unknown
-        }
-
-        const nodeId = String(event.nodeId)
+    const triggerHandlers: {
+      [K in LGraphTriggerAction]: (event: LGraphTriggerParam<K>) => void
+    } = {
+      'node:property:changed': (propertyEvent) => {
+        const nodeId = String(propertyEvent.nodeId)
         const currentData = vueNodeData.get(nodeId)
 
         if (currentData) {
-          switch (event.property) {
+          switch (propertyEvent.property) {
             case 'title':
               vueNodeData.set(nodeId, {
                 ...currentData,
-                title: String(event.newValue)
+                title: String(propertyEvent.newValue)
               })
               break
             case 'flags.collapsed':
               vueNodeData.set(nodeId, {
                 ...currentData,
                 flags: {
                   ...currentData.flags,
-                  collapsed: Boolean(event.newValue)
+                  collapsed: Boolean(propertyEvent.newValue)
                 }
               })
               break
@@ -444,63 +474,59 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                 ...currentData,
                 flags: {
                   ...currentData.flags,
-                  pinned: Boolean(event.newValue)
+                  pinned: Boolean(propertyEvent.newValue)
                 }
               })
               break
             case 'mode':
               vueNodeData.set(nodeId, {
                 ...currentData,
-                mode: typeof event.newValue === 'number' ? event.newValue : 0
+                mode:
+                  typeof propertyEvent.newValue === 'number'
+                    ? propertyEvent.newValue
+                    : 0
               })
               break
             case 'color':
               vueNodeData.set(nodeId, {
                 ...currentData,
                 color:
-                  typeof event.newValue === 'string'
-                    ? event.newValue
+                  typeof propertyEvent.newValue === 'string'
+                    ? propertyEvent.newValue
                     : undefined
               })
               break
             case 'bgcolor':
               vueNodeData.set(nodeId, {
                 ...currentData,
                 bgcolor:
-                  typeof event.newValue === 'string'
-                    ? event.newValue
+                  typeof propertyEvent.newValue === 'string'
+                    ? propertyEvent.newValue
                     : undefined
               })
           }
         }
-      } else if (
-        action === 'node:slot-errors:changed' &&
-        param &&
-        typeof param === 'object'
-      ) {
-        const event = param as { nodeId: string | number }
-        const nodeId = String(event.nodeId)
-        const litegraphNode = nodeRefs.get(nodeId)
-        const currentData = vueNodeData.get(nodeId)
-
-        if (litegraphNode && currentData) {
-          // Re-extract slot data with updated hasErrors properties
-          vueNodeData.set(nodeId, {
-            ...currentData,
-            inputs: litegraphNode.inputs
-              ? [...litegraphNode.inputs]
-              : undefined,
-            outputs: litegraphNode.outputs
-              ? [...litegraphNode.outputs]
-              : undefined
-          })
+      },
+      'node:slot-errors:changed': (slotErrorsEvent) => {
+        refreshNodeSlots(String(slotErrorsEvent.nodeId))
+      },
+      'node:slot-links:changed': (slotLinksEvent) => {
+        if (slotLinksEvent.slotType === NodeSlotType.INPUT) {
+          refreshNodeSlots(String(slotLinksEvent.nodeId))
         }
       }
+    }
 
-      // Call original trigger handler if it exists
-      if (originalOnTrigger) {
-        originalOnTrigger(action, param)
+    const isTriggerAction = (value: string): value is LGraphTriggerAction =>
+      Object.prototype.hasOwnProperty.call(triggerHandlers, value)
+
+    graph.onTrigger = (action: string, event: unknown) => {
+      if (isTriggerAction(action)) {
+        const handler = triggerHandlers[action] as (payload: unknown) => void
+        handler(event)
       }
+
+      originalOnTrigger?.(action, event)
     }
 
     // Initialize state

src/lib/litegraph/src/LGraph.ts

@@ -54,6 +54,11 @@ import {
   splitPositionables
 } from './subgraph/subgraphUtils'
 import { Alignment, LGraphEventMode } from './types/globalEnums'
+import type {
+  LGraphTriggerAction,
+  LGraphTriggerHandler,
+  LGraphTriggerParam
+} from './types/graphTriggers'
 import type {
   ExportedSubgraph,
   ExposedWidget,
@@ -65,6 +70,11 @@ import type {
 } from './types/serialisation'
 import { getAllNestedItems } from './utils/collections'
 
+export type {
+  LGraphTriggerAction,
+  LGraphTriggerParam
+} from './types/graphTriggers'
+
 export interface LGraphState {
   lastGroupId: number
   lastNodeId: number
@@ -254,7 +264,7 @@ export class LGraph
   onExecuteStep?(): void
   onNodeAdded?(node: LGraphNode): void
   onNodeRemoved?(node: LGraphNode): void
-  onTrigger?(action: string, param: unknown): void
+  onTrigger?: LGraphTriggerHandler
   onBeforeChange?(graph: LGraph, info?: LGraphNode): void
   onAfterChange?(graph: LGraph, info?: LGraphNode | null): void
   onConnectionChange?(node: LGraphNode): void
@@ -1180,6 +1190,11 @@ export class LGraph
   }
 
   // ********** GLOBALS *****************
+  trigger<A extends LGraphTriggerAction>(
+    action: A,
+    param: LGraphTriggerParam<A>
+  ): void
+  trigger(action: string, param: unknown): void
   trigger(action: string, param: unknown) {
     this.onTrigger?.(action, param)
   }

src/lib/litegraph/src/LGraphNode.ts

@@ -2852,7 +2852,17 @@ export class LGraphNode
     output.links ??= []
     output.links.push(link.id)
     // connect in input
-    inputNode.inputs[inputIndex].link = link.id
+    const targetInput = inputNode.inputs[inputIndex]
+    targetInput.link = link.id
+    if (targetInput.widget) {
+      graph.trigger('node:slot-links:changed', {
+        nodeId: inputNode.id,
+        slotType: NodeSlotType.INPUT,
+        slotIndex: inputIndex,
+        connected: true,
+        linkId: link.id
+      })
+    }
 
     // Reroutes
     const reroutes = LLink.getReroutes(graph, link)
@@ -3009,6 +3019,15 @@ export class LGraphNode
         const input = target.inputs[link_info.target_slot]
         // remove there
         input.link = null
+        if (input.widget) {
+          graph.trigger('node:slot-links:changed', {
+            nodeId: target.id,
+            slotType: NodeSlotType.INPUT,
+            slotIndex: link_info.target_slot,
+            connected: false,
+            linkId: link_info.id
+          })
+        }
 
         // remove the link from the links pool
         link_info.disconnect(graph, 'input')
@@ -3045,6 +3064,15 @@ export class LGraphNode
           const input = target.inputs[link_info.target_slot]
           // remove other side link
           input.link = null
+          if (input.widget) {
+            graph.trigger('node:slot-links:changed', {
+              nodeId: target.id,
+              slotType: NodeSlotType.INPUT,
+              slotIndex: link_info.target_slot,
+              connected: false,
+              linkId: link_info.id
+            })
+          }
 
           // link_info hasn't been modified so its ok
           target.onConnectionsChange?.(
@@ -3114,6 +3142,15 @@ export class LGraphNode
     const link_id = this.inputs[slot].link
     if (link_id != null) {
       this.inputs[slot].link = null
+      if (input.widget) {
+        graph.trigger('node:slot-links:changed', {
+          nodeId: this.id,
+          slotType: NodeSlotType.INPUT,
+          slotIndex: slot,
+          connected: false,
+          linkId: link_id
+        })
+      }
 
       // remove other side
       const link_info = graph._links.get(link_id)

src/lib/litegraph/src/litegraph.ts

@@ -98,7 +98,11 @@ export type {
   Positionable,
   Size
 } from './interfaces'
-export { LGraph } from './LGraph'
+export {
+  LGraph,
+  type LGraphTriggerAction,
+  type LGraphTriggerParam
+} from './LGraph'
 export { BadgePosition, LGraphBadge } from './LGraphBadge'
 export { LGraphCanvas } from './LGraphCanvas'
 export { LGraphGroup } from './LGraphGroup'

src/lib/litegraph/src/types/graphTriggers.ts

@@ -0,0 +1,36 @@
+import type { NodeSlotType } from './globalEnums'
+
+interface NodePropertyChangedEvent {
+  nodeId: string | number
+  property: string
+  oldValue: unknown
+  newValue: unknown
+}
+
+interface NodeSlotErrorsChangedEvent {
+  nodeId: string | number
+}
+
+interface NodeSlotLinksChangedEvent {
+  nodeId: string | number
+  slotType: NodeSlotType
+  slotIndex: number
+  connected: boolean
+  linkId: number
+}
+
+type LGraphTriggerEventMap = {
+  'node:property:changed': NodePropertyChangedEvent
+  'node:slot-errors:changed': NodeSlotErrorsChangedEvent
+  'node:slot-links:changed': NodeSlotLinksChangedEvent
+}
+
+export type LGraphTriggerAction = keyof LGraphTriggerEventMap
+
+export type LGraphTriggerParam<A extends LGraphTriggerAction> =
+  A extends keyof LGraphTriggerEventMap ? LGraphTriggerEventMap[A] : unknown
+
+export type LGraphTriggerHandler = {
+  <A extends LGraphTriggerAction>(action: A, param: LGraphTriggerParam<A>): void
+  (action: string, param: unknown): void
+}