Add support for growable inputs (#6830)

![autogrow-optional_00002](https://github.com/user-attachments/assets/79bfe703-23d7-45fb-86ce-88baa9eaf582)

Also fixes connections to widget inputs created by a dynamic combo
breaking on reload.

Performs some refactoring to group the prior dynamic inputs code.

See also, the overarching frontend PR: comfyanonymous/ComfyUI#10832

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6830-Add-support-for-growable-inputs-2b36d73d365081c484ebc251a10aa6dd)
by [Unito](https://www.unito.io)

Author: AustinMroz

src/core/graph/widgets/dynamicWidgets.ts

@@ -10,7 +10,6 @@ import './groupNodeManage'
 import './groupOptions'
 import './load3d'
 import './maskeditor'
-import './matchType'
 import './nodeTemplates'
 import './noteNode'
 import './previewAny'

src/extensions/core/index.ts

@@ -415,6 +415,7 @@ export class LGraphNode
   selected?: boolean
   showAdvanced?: boolean
 
+  declare comfyMatchType?: Record<string, Record<string, string>>
   declare comfyClass?: string
   declare isVirtualNode?: boolean
   applyToGraph?(extraLinks?: LLink[]): void
@@ -1651,19 +1652,6 @@ export class LGraphNode
     this.onInputRemoved?.(slot, slot_info[0])
     this.setDirtyCanvas(true, true)
   }
-  spliceInputs(
-    startIndex: number,
-    deleteCount = -1,
-    ...toAdd: INodeInputSlot[]
-  ): INodeInputSlot[] {
-    if (deleteCount < 0) return this.inputs.splice(startIndex)
-    const ret = this.inputs.splice(startIndex, deleteCount, ...toAdd)
-    this.inputs.slice(startIndex).forEach((input, index) => {
-      const link = input.link && this.graph?.links?.get(input.link)
-      if (link) link.target_slot = startIndex + index
-    })
-    return ret
-  }
 
   /**
    * computes the minimum size of a node according to its inputs and output slots
@@ -4002,7 +3990,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/extensions/core/matchType.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/LGraphNode.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

src/lib/litegraph/src/interfaces.ts

@@ -14,10 +14,6 @@ const zRemoteWidgetConfig = z.object({
   timeout: z.number().gte(0).optional(),
   max_retries: z.number().gte(0).optional()
 })
-const zWidgetTemplate = z.object({
-  template_id: z.string(),
-  allowed_types: z.string().optional()
-})
 const zMultiSelectOption = z.object({
   placeholder: z.string().optional(),
   chip: z.boolean().optional()
@@ -34,7 +30,6 @@ export const zBaseInputOptions = z
     hidden: z.boolean().optional(),
     advanced: z.boolean().optional(),
     widgetType: z.string().optional(),
-    template: zWidgetTemplate.optional(),
     /** Backend-only properties. */
     rawLink: z.boolean().optional(),
     lazy: z.boolean().optional()
@@ -232,9 +227,21 @@ export const zComfyNodeDef = z.object({
   input_order: z.record(z.array(z.string())).optional()
 })
 
+export const zAutogrowOptions = z.object({
+  ...zBaseInputOptions.shape,
+  template: z.object({
+    input: zComfyInputsSpec,
+    names: z.array(z.string()).optional(),
+    max: z.number().optional(),
+    //Backend defines as mandatory with min 1, Frontend is more forgiving
+    min: z.number().optional(),
+    prefix: z.string().optional()
+  })
+})
+
 export const zDynamicComboInputSpec = z.tuple([
   z.literal('COMFY_DYNAMICCOMBO_V3'),
-  zComboInputOptions.extend({
+  zBaseInputOptions.extend({
     options: z.array(
       z.object({
         inputs: zComfyInputsSpec,

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

@@ -7,6 +7,7 @@ import { useNodeCanvasImagePreview } from '@/composables/node/useNodeCanvasImage
 import { useNodeImage, useNodeVideo } from '@/composables/node/useNodeImage'
 import { addWidgetPromotionOptions } from '@/core/graph/subgraph/proxyWidgetUtils'
 import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
+import { applyDynamicInputs } from '@/core/graph/widgets/dynamicWidgets'
 import { st, t } from '@/i18n'
 import {
   LGraphCanvas,
@@ -93,7 +94,11 @@ export const useLitegraphService = () => {
     const widgetConstructor = widgetStore.widgets.get(
       inputSpec.widgetType ?? inputSpec.type
     )
-    if (widgetConstructor && !inputSpec.forceInput) return
+    if (
+      (widgetConstructor && !inputSpec.forceInput) ||
+      applyDynamicInputs(node, inputSpec)
+    )
+      return
 
     const input = node.addInput(inputName, inputSpec.type, {
       shape: inputSpec.isOptional ? RenderShape.HollowCircle : undefined,

src/schemas/nodeDefSchema.ts

@@ -60,3 +60,7 @@ export const isResultItemType = (
 ): value is ResultItemType => {
   return value === 'input' || value === 'output' || value === 'temp'
 }
+
+export function isStrings(types: unknown[]): types is string[] {
+  return types.every((t) => typeof t === 'string')
+}