fix: stabilize nested subgraph promoted widget resolution

browser_tests/tests/interaction.spec.ts

@@ -171,6 +171,7 @@ test.describe('Node Interaction', () => {
 
   test('Can drag node', { tag: '@screenshot' }, async ({ comfyPage }) => {
     await comfyPage.nodeOps.dragTextEncodeNode2()
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('dragged-node1.png')
   })
 

browser_tests/tests/subgraphPromotion.spec.ts

@@ -555,6 +555,74 @@ test.describe(
       })
     })
 
+    test.describe('Nested Promoted Widget Disabled State', () => {
+      test('Externally linked promoted widget is disabled, unlinked ones are not', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        await comfyPage.nextFrame()
+
+        // Node 5 (Sub 0) has 4 promoted widgets. The first (string_a) has its
+        // slot connected externally from the Outer node, so it should be
+        // disabled. The remaining promoted textarea widgets (value, value_1)
+        // are unlinked and should be enabled.
+        const promotedNames = await getPromotedWidgetNames(comfyPage, '5')
+        expect(promotedNames).toContain('string_a')
+        expect(promotedNames).toContain('value')
+
+        const disabledState = await comfyPage.page.evaluate(() => {
+          const node = window.app!.canvas.graph!.getNodeById('5')
+          return (node?.widgets ?? []).map((w) => ({
+            name: w.name,
+            disabled: !!w.computedDisabled
+          }))
+        })
+
+        const linkedWidget = disabledState.find((w) => w.name === 'string_a')
+        expect(linkedWidget?.disabled).toBe(true)
+
+        const unlinkedWidgets = disabledState.filter(
+          (w) => w.name !== 'string_a'
+        )
+        for (const w of unlinkedWidgets) {
+          expect(w.disabled).toBe(false)
+        }
+      })
+
+      test('Unlinked promoted textarea widgets are editable on the subgraph exterior', async ({
+        comfyPage
+      }) => {
+        await comfyPage.workflow.loadWorkflow(
+          'subgraphs/subgraph-nested-promotion'
+        )
+        await comfyPage.nextFrame()
+
+        // The promoted textareas that are NOT externally linked should be
+        // fully opaque and interactive.
+        const textareas = comfyPage.page.getByTestId(
+          TestIds.widgets.domWidgetTextarea
+        )
+        await expect(textareas.first()).toBeVisible()
+
+        const count = await textareas.count()
+        for (let i = 0; i < count; i++) {
+          const textarea = textareas.nth(i)
+          const wrapper = textarea.locator('..')
+          const opacity = await wrapper.evaluate(
+            (el) => getComputedStyle(el).opacity
+          )
+
+          if (opacity === '1' && (await textarea.isEditable())) {
+            const testContent = `nested-promotion-edit-${i}`
+            await textarea.fill(testContent)
+            await expect(textarea).toHaveValue(testContent)
+          }
+        }
+      })
+    })
+
     test.describe('Promotion Cleanup', () => {
       test('Removing subgraph node clears promotion store entries', async ({
         comfyPage

src/components/graph/widgets/DomWidget.test.ts

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { reactive } from 'vue'
+
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
+import type { BaseDOMWidget } from '@/scripts/domWidget'
+import type { DomWidgetState } from '@/stores/domWidgetStore'
+import { useDomWidgetStore } from '@/stores/domWidgetStore'
+
+import DomWidget from './DomWidget.vue'
+
+const mockUpdatePosition = vi.fn()
+const mockUpdateClipPath = vi.fn()
+const mockCanvasElement = document.createElement('canvas')
+const mockCanvasStore = {
+  canvas: {
+    graph: {
+      getNodeById: vi.fn(() => true)
+    },
+    ds: {
+      offset: [0, 0],
+      scale: 1
+    },
+    canvas: mockCanvasElement,
+    selected_nodes: {}
+  },
+  getCanvas: () => ({ canvas: mockCanvasElement }),
+  linearMode: false
+}
+
+vi.mock('@/composables/element/useAbsolutePosition', () => ({
+  useAbsolutePosition: () => ({
+    style: reactive<Record<string, string>>({}),
+    updatePosition: mockUpdatePosition
+  })
+}))
+
+vi.mock('@/composables/element/useDomClipping', () => ({
+  useDomClipping: () => ({
+    style: reactive<Record<string, string>>({}),
+    updateClipPath: mockUpdateClipPath
+  })
+}))
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => mockCanvasStore
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: vi.fn(() => false)
+  })
+}))
+
+function createWidgetState(overrideDisabled: boolean): DomWidgetState {
+  const domWidgetStore = useDomWidgetStore()
+  const node = createMockLGraphNode({
+    id: 1,
+    constructor: {
+      nodeData: {}
+    }
+  })
+
+  const widget = {
+    id: 'dom-widget-id',
+    name: 'test_widget',
+    type: 'custom',
+    value: '',
+    options: {},
+    node,
+    computedDisabled: false
+  } as unknown as BaseDOMWidget<object | string>
+
+  domWidgetStore.registerWidget(widget)
+  domWidgetStore.setPositionOverride(widget.id, {
+    node: createMockLGraphNode({ id: 2 }),
+    widget: { computedDisabled: overrideDisabled } as DomWidgetState['widget']
+  })
+
+  const state = domWidgetStore.widgetStates.get(widget.id)
+  if (!state) throw new Error('Expected registered DomWidgetState')
+
+  state.zIndex = 2
+  state.size = [100, 40]
+
+  return reactive(state)
+}
+
+describe('DomWidget disabled style', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  afterEach(() => {
+    useDomWidgetStore().clear()
+    vi.clearAllMocks()
+  })
+
+  it('uses disabled style when promoted override widget is computedDisabled', async () => {
+    const widgetState = createWidgetState(true)
+    const wrapper = mount(DomWidget, {
+      props: {
+        widgetState
+      }
+    })
+
+    widgetState.zIndex = 3
+    await wrapper.vm.$nextTick()
+
+    const root = wrapper.get('.dom-widget').element as HTMLElement
+    expect(root.style.pointerEvents).toBe('none')
+    expect(root.style.opacity).toBe('0.5')
+  })
+})

src/components/graph/widgets/DomWidget.vue

@@ -110,13 +110,17 @@ watch(
       updateDomClipping()
     }
 
+    const override = widgetState.positionOverride
+    const isDisabled = override
+      ? (override.widget.computedDisabled ?? widget.computedDisabled)
+      : widget.computedDisabled
+
     style.value = {
       ...positionStyle.value,
       ...(enableDomClipping.value ? clippingStyle.value : {}),
       zIndex: widgetState.zIndex,
-      pointerEvents:
-        widgetState.readonly || widget.computedDisabled ? 'none' : 'auto',
-      opacity: widget.computedDisabled ? 0.5 : 1
+      pointerEvents: widgetState.readonly || isDisabled ? 'none' : 'auto',
+      opacity: isDisabled ? 0.5 : 1
     }
   },
   { deep: true }

src/composables/graph/useGraphNodeManager.test.ts

@@ -272,3 +272,47 @@ describe('Subgraph Promoted Pseudo Widgets', () => {
     expect(promotedWidget?.options?.canvasOnly).toBe(true)
   })
 })
+
+describe('Nested promoted widget mapping', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+  })
+
+  it('maps store identity to deepest concrete widget for two-layer promotions', () => {
+    const subgraphA = createTestSubgraph({
+      inputs: [{ name: 'a_input', type: '*' }]
+    })
+    const innerNode = new LGraphNode('InnerComboNode')
+    const innerInput = innerNode.addInput('picker_input', '*')
+    innerNode.addWidget('combo', 'picker', 'a', () => undefined, {
+      values: ['a', 'b']
+    })
+    innerInput.widget = { name: 'picker' }
+    subgraphA.add(innerNode)
+    subgraphA.inputNode.slots[0].connect(innerInput, innerNode)
+
+    const subgraphNodeA = createTestSubgraphNode(subgraphA, { id: 11 })
+
+    const subgraphB = createTestSubgraph({
+      inputs: [{ name: 'b_input', type: '*' }]
+    })
+    subgraphB.add(subgraphNodeA)
+    subgraphNodeA._internalConfigureAfterSlots()
+    subgraphB.inputNode.slots[0].connect(subgraphNodeA.inputs[0], subgraphNodeA)
+
+    const subgraphNodeB = createTestSubgraphNode(subgraphB, { id: 22 })
+    const graph = subgraphNodeB.graph as LGraph
+    graph.add(subgraphNodeB)
+
+    const { vueNodeData } = useGraphNodeManager(graph)
+    const nodeData = vueNodeData.get(String(subgraphNodeB.id))
+    const mappedWidget = nodeData?.widgets?.[0]
+
+    expect(mappedWidget).toBeDefined()
+    expect(mappedWidget?.type).toBe('combo')
+    expect(mappedWidget?.storeName).toBe('picker')
+    expect(mappedWidget?.storeNodeId).toBe(
+      `${subgraphNodeB.subgraph.id}:${innerNode.id}`
+    )
+  })
+})