emit when widget linked

Author: christian-byrne

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,14 +78,19 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   // Non-reactive storage for original LiteGraph nodes
   const nodeRefs = new Map<string, LGraphNode>()
 
-  const syncNodeSlotData = (nodeId: string, node: LGraphNode) => {
+  const refreshNodeSlots = (nodeId: string) => {
+    const nodeRef = nodeRefs.get(nodeId)
     const currentData = vueNodeData.get(nodeId)
-    if (!currentData) return
+
+    if (!nodeRef || !currentData) return
+
+    const refreshedData = extractVueNodeData(nodeRef)
 
     vueNodeData.set(nodeId, {
       ...currentData,
-      inputs: node.inputs ? [...node.inputs] : undefined,
-      outputs: node.outputs ? [...node.outputs] : undefined
+      widgets: refreshedData.widgets,
+      inputs: refreshedData.inputs,
+      outputs: refreshedData.outputs
     })
   }
 
@@ -85,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
@@ -101,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,
@@ -109,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 {
@@ -416,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
@@ -455,53 +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-links:changed' ||
-          action === 'node:slot-errors:changed') &&
-        param &&
-        typeof param === 'object'
-      ) {
-        const event = param as { nodeId: string | number }
-        const nodeId = String(event.nodeId)
-        const node = nodeRefs.get(nodeId)
-        if (node) {
-          syncNodeSlotData(nodeId, node)
+      },
+      '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/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
+}

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

@@ -33,7 +33,7 @@
             boundingRect: [0, 0, 0, 0]
           }"
           :node-id="nodeData?.id != null ? String(nodeData.id) : ''"
-          :index="getWidgetInputIndex(widget)"
+          :index="widget.slotMetadata?.index ?? 0"
           :dot-only="true"
         />
       </div>
@@ -56,12 +56,12 @@ import { type Ref, computed, inject, onErrorCaptured, ref } from 'vue'
 
 import type {
   SafeWidgetData,
-  VueNodeData
+  VueNodeData,
+  WidgetSlotMetadata
 } from '@/composables/graph/useGraphNodeManager'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
-// Import widget components directly
 import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue'
 import {
   getComponent,
@@ -113,6 +113,7 @@ interface ProcessedWidget {
   value: WidgetValue
   updateHandler: (value: unknown) => void
   tooltipConfig: any
+  slotMetadata?: WidgetSlotMetadata
 }
 
 const processedWidgets = computed((): ProcessedWidget[] => {
@@ -129,12 +130,21 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
     const vueComponent = getComponent(widget.type) || WidgetInputText
 
+    const slotMetadata = widget.slotMetadata
+
+    let widgetOptions = widget.options
+    if (slotMetadata?.linked) {
+      widgetOptions = widget.options
+        ? { ...widget.options, disabled: true }
+        : { disabled: true }
+    }
+
     const simplified: SimplifiedWidget = {
       name: widget.name,
       type: widget.type,
       value: widget.value,
       label: widget.label,
-      options: widget.options,
+      options: widgetOptions,
       callback: widget.callback,
       spec: widget.spec
     }
@@ -155,25 +165,11 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       simplified,
       value: widget.value,
       updateHandler,
-      tooltipConfig
+      tooltipConfig,
+      slotMetadata
     })
   }
 
   return result
 })
-
-// TODO: Refactor to avoid O(n) lookup - consider storing input index on widget creation
-// or restructuring data model to unify widgets and inputs
-// Map a widget to its corresponding input slot index
-const getWidgetInputIndex = (widget: ProcessedWidget): number => {
-  const inputs = nodeData?.inputs
-  if (!inputs) return 0
-
-  const idx = inputs.findIndex((input: any) => {
-    if (!input || typeof input !== 'object') return false
-    if (!('name' in input && 'type' in input)) return false
-    return 'widget' in input && input.widget?.name === widget.name
-  })
-  return idx >= 0 ? idx : 0
-}
 </script>