Swap back to keyed dynamic combos

Support inline inputs for dynamic combos
- Functionality currently disabled. Need to verify vue mode and check
  with design

Always show input socket on inline inputs

Author: AustinMroz

src/core/graph/widgets/dynamicWidgets.ts

@@ -22,9 +22,30 @@ import { app } from '@/scripts/app'
 import type { ComfyApp } from '@/scripts/app'
 import { isStrings } from '@/utils/typeGuardUtil'
 
+const INLINE_INPUTS = false
+
 type MatchTypeNode = LGraphNode &
   Pick<Required<LGraphNode>, 'comfyMatchType' | 'onConnectionsChange'>
 
+function ensureWidgetForInput(node: LGraphNode, input: INodeInputSlot) {
+  if (input.widget?.name) return
+  node.widgets ??= []
+  node.widgets.push({
+    name: input.name,
+    y: 0,
+    type: 'shim',
+    options: {},
+    draw(ctx, _n, _w, y) {
+      ctx.save()
+      ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR
+      ctx.fillText(input.label ?? input.name, 20, y + 15)
+      ctx.restore()
+    }
+  })
+  input.alwaysVisible = true
+  input.widget = { name: input.name }
+}
+
 function dynamicComboWidget(
   node: LGraphNode,
   inputName: string,
@@ -84,21 +105,22 @@ function dynamicComboWidget(
       [newSpec.optional, true]
     ]
     for (const [inputType, isOptional] of inputTypes)
-      for (const name in inputType ?? {}) {
-        addNodeInput(
-          node,
-          transformInputSpecV1ToV2(inputType![name], {
-            name,
-            isOptional
-          })
-        )
+      for (const key in inputType ?? {}) {
+        const name = `${widget.name}.${key}`
+        const specToAdd = transformInputSpecV1ToV2(inputType![key], {
+          name,
+          isOptional
+        })
+        specToAdd.display_name = key
+        addNodeInput(node, specToAdd)
         currentDynamicNames.push(name)
+        if (INLINE_INPUTS) ensureWidgetForInput(node, node.inputs.at(-1)!)
         if (
           !inputsToRemove[name] ||
-          Array.isArray(inputType![name][0]) ||
+          Array.isArray(inputType![key][0]) ||
           !LiteGraph.isValidConnection(
             inputsToRemove[name].type,
-            inputType![name][0]
+            inputType![key][0]
           )
         )
           continue
@@ -380,21 +402,7 @@ function applyAutogrow(node: LGraphNode, untypedInputSpec: InputSpecV2) {
       .map((namedSpec) => {
         addNodeInput(node, namedSpec)
         const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
-        if (input.widget?.name || inputsV2.length == 1) return input
-        node.widgets ??= []
-        node.widgets.push({
-          name: input.name,
-          y: 0,
-          type: 'shim',
-          options: {},
-          draw(ctx, _n, _w, y) {
-            ctx.save()
-            ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR
-            ctx.fillText(input.name, 20, y + 15)
-            ctx.restore()
-          }
-        })
-        input.widget = { name: input.name }
+        if (inputsV2.length !== 1) ensureWidgetForInput(node, input)
         return input
       })
     spliceInputs(node, insertionIndex, 0, ...newInputs)

src/lib/litegraph/src/LGraphNode.ts

@@ -3979,7 +3979,8 @@ export class LGraphNode
         isValidTarget ||
         !slot.isWidgetInputSlot ||
         this.#isMouseOverWidget(this.getWidgetFromSlot(slot)) ||
-        slot.isConnected
+        slot.isConnected ||
+        slot.alwaysVisible
       ) {
         ctx.globalAlpha = isValid ? editorAlpha : 0.4 * editorAlpha
         slot.draw(ctx, {

src/lib/litegraph/src/interfaces.ts

@@ -343,6 +343,7 @@ export interface IWidgetLocator {
 export interface INodeInputSlot extends INodeSlot {
   link: LinkId | null
   widget?: IWidgetLocator
+  alwaysVisible?: boolean
 
   /**
    * Internal use only; API is not finalised and may change at any time.

src/lib/litegraph/src/node/NodeInputSlot.ts

@@ -17,6 +17,7 @@ import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 
 export class NodeInputSlot extends NodeSlot implements INodeInputSlot {
   link: LinkId | null
+  alwaysVisible?: boolean
 
   get isWidgetInputSlot(): boolean {
     return !!this.widget

tests-ui/tests/widgets/dynamicCombo.test.ts

@@ -103,8 +103,8 @@ describe('Dynamic Combos', () => {
     node.widgets[0].value = '1'
     expect(node.widgets.length).toBe(2)
     expect(node.inputs.length).toBe(4)
-    expect(node.inputs[1].name).toBe('0.0.0')
-    expect(node.inputs[3].name).toBe('2.0.0')
+    expect(node.inputs[1].name).toBe('0.0.0.0')
+    expect(node.inputs[3].name).toBe('2.2.0.0')
   })
 })
 describe('Autogrow', () => {