Keep the widget array itself reactive, Add proxy support (to be cleaned up soon)

Author: DrJKL

src/composables/graph/useGraphNodeManager.ts

@@ -43,6 +43,7 @@ export interface WidgetSlotMetadata {
  * Value and metadata (label, hidden, disabled, etc.) are accessed via widgetValueStore.
  */
 export interface SafeWidgetData {
+  nodeId: NodeId
   name: string
   type: string
   /** Callback to invoke when widget value changes (wraps LiteGraph callback + triggerDraw) */
@@ -210,9 +211,19 @@ function safeWidgetMapper(
             advanced: widget.advanced
           }
         : undefined
+      const subgraphId = node.isSubgraphNode() && node.subgraph.id
+
+      const localId = isProxyWidget(widget)
+        ? widget._overlay?.nodeId
+        : undefined
+      const nodeId = subgraphId && localId ? `${subgraphId}:${localId}` : '-1'
+      const name = isProxyWidget(widget)
+        ? widget._overlay.widgetName
+        : widget.name
 
       return {
-        name: widget.name,
+        nodeId,
+        name,
         type: widget.type,
         ...sharedEnhancements,
         callback,
@@ -223,6 +234,7 @@ function safeWidgetMapper(
       }
     } catch (error) {
       return {
+        nodeId: String(node.id),
         name: widget.name || 'unknown',
         type: widget.type || 'text'
       }
@@ -240,6 +252,15 @@ export function extractVueNodeData(node: LGraphNode): VueNodeData {
   // Extract safe widget data
   const slotMetadata = new Map<string, WidgetSlotMetadata>()
 
+  const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
+  Object.defineProperty(node, 'widgets', {
+    get() {
+      return reactiveWidgets
+    },
+    set(v) {
+      reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
+    }
+  })
   const reactiveInputs = shallowReactive<INodeInputSlot[]>(node.inputs ?? [])
   Object.defineProperty(node, 'inputs', {
     get() {

src/core/graph/subgraph/proxyWidget.ts

@@ -152,7 +152,8 @@ function newProxyWidget(
     computedHeight: undefined,
     isProxyWidget: true,
     last_y: undefined,
-    name,
+    label: name,
+    name: widgetName,
     node: subgraphNode,
     onRemove: undefined,
     promoted: undefined,

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

@@ -56,6 +56,7 @@ const nodeData = computed<VueNodeData>(() => {
   const widgets = Object.entries(nodeDef.inputs || {})
     .filter(([_, input]) => widgetStore.inputIsWidget(input))
     .map(([name, input]) => ({
+      nodeId: '-1',
       name,
       type: input.widgetType || input.type,
       value:

src/renderer/extensions/vueNodes/components/NodeWidgets.test.ts

@@ -13,6 +13,7 @@ describe('NodeWidgets', () => {
   const createMockWidget = (
     overrides: Partial<SafeWidgetData> = {}
   ): SafeWidgetData => ({
+    nodeId: 'test_node',
     name: 'test_widget',
     type: 'combo',
     options: undefined,

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

@@ -175,7 +175,8 @@ const processedWidgets = computed((): ProcessedWidget[] => {
     const { slotMetadata } = widget
 
     // Get metadata from store (registered during BaseWidget.setNodeId)
-    const widgetState = widgetValueStore.getWidget(nodeId, widget.name)
+    const bareWidgetId = String(widget.nodeId ?? nodeId).replace(/^(.*:)+/, '')
+    const widgetState = widgetValueStore.getWidget(bareWidgetId, widget.name)
 
     // Get value from store (falls back to undefined if not registered)
     const value = widgetState?.value as WidgetValue
@@ -187,11 +188,12 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       : storeOptions
 
     // Derive border style from store metadata
-    const borderStyle = widgetState?.promoted
-      ? 'ring ring-component-node-widget-promoted'
-      : widgetState?.advanced
-        ? 'ring ring-component-node-widget-advanced'
-        : undefined
+    const borderStyle =
+      widgetState?.promoted && String(widgetState?.nodeId) === String(nodeId)
+        ? 'ring ring-component-node-widget-promoted'
+        : widgetState?.advanced
+          ? 'ring ring-component-node-widget-advanced'
+          : undefined
 
     const simplified: SimplifiedWidget = {
       name: widget.name,