Makes forceInput node input slot correctly reflect option/required state (#921)

* Correctly style optional force input input slot

* Add force input playwright test

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/assets/force_input.json

@@ -0,0 +1,62 @@
+{
+  "last_node_id": 5,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 5,
+      "type": "DevToolsNodeWithForceInput",
+      "pos": {
+        "0": 9,
+        "1": 39
+      },
+      "size": {
+        "0": 315,
+        "1": 106
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "int_input",
+          "type": "INT",
+          "link": null,
+          "widget": {
+            "name": "int_input"
+          }
+        },
+        {
+          "name": "float_input",
+          "type": "FLOAT",
+          "link": null,
+          "widget": {
+            "name": "float_input"
+          },
+          "shape": 7
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithForceInput"
+      },
+      "widgets_values": [
+        0,
+        1,
+        0
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/nodeDisplay.spec.ts

@@ -18,4 +18,9 @@ test.describe('Optional input', () => {
     await comfyPage.loadWorkflow('optional_input_correct_shape')
     await expect(comfyPage.canvas).toHaveScreenshot('optional_input.png')
   })
+
+  test('Force input', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('force_input')
+    await expect(comfyPage.canvas).toHaveScreenshot('force_input.png')
+  })
 })

src/extensions/core/widgetInputs.ts

@@ -3,6 +3,7 @@ import { app } from '../../scripts/app'
 import { applyTextReplacements } from '../../scripts/utils'
 import { LiteGraph, LGraphNode } from '@comfyorg/litegraph'
 import type { INodeInputSlot, IWidget } from '@comfyorg/litegraph'
+import type { InputSpec } from '@/types/apiTypes'
 
 const CONVERTED_TYPE = 'converted-widget'
 const VALID_TYPES = ['STRING', 'combo', 'number', 'toggle', 'BOOLEAN']
@@ -447,15 +448,19 @@ function showWidget(widget) {
   }
 }
 
-function convertToInput(node, widget, config) {
+function convertToInput(node: LGraphNode, widget: IWidget, config: InputSpec) {
   hideWidget(node, widget)
 
   const { type } = getWidgetType(config)
 
   // Add input and store widget config for creating on primitive node
   const sz = node.size
+  const inputIsOptional = !!widget.options?.inputIsOptional
   node.addInput(widget.name, type, {
-    widget: { name: widget.name, [GET_CONFIG]: () => config }
+    // @ts-expect-error GET_CONFIG is not defined in LiteGraph
+    widget: { name: widget.name, [GET_CONFIG]: () => config },
+    // @ts-expect-error LiteGraph.SlotShape is not typed.
+    ...(inputIsOptional ? { shape: LiteGraph.SlotShape.HollowCircle } : {})
   })
 
   for (const widget of node.widgets) {
@@ -479,7 +484,7 @@ function convertToWidget(node, widget) {
   node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])])
 }
 
-function getWidgetType(config) {
+function getWidgetType(config: InputSpec) {
   // Special handling for COMBO so we restrict links based on the entries
   let type = config[0]
   if (type instanceof Array) {

src/scripts/app.ts

@@ -2012,6 +2012,7 @@ export class ComfyApp {
         for (const inputName in inputs) {
           const inputData = inputs[inputName]
           const type = inputData[0]
+          const inputIsRequired = inputName in requiredInputs
 
           let widgetCreated = true
           const widgetType = self.getWidgetType(inputData, inputName)
@@ -2029,7 +2030,6 @@ export class ComfyApp {
             }
           } else {
             // Node connection inputs
-            const inputIsRequired = inputName in requiredInputs
             const inputOptions = inputIsRequired
               ? {}
               : // @ts-expect-error LiteGraph.SlotShape is not typed.
@@ -2037,6 +2037,15 @@ export class ComfyApp {
             this.addInput(inputName, type, inputOptions)
             widgetCreated = false
           }
+
+          // @ts-expect-error
+          if (widgetCreated && !inputIsRequired && config?.widget) {
+            // @ts-expect-error
+            if (!config.widget.options) config.widget.options = {}
+            // @ts-expect-error
+            config.widget.options.inputIsOptional = true
+          }
+
           // @ts-expect-error
           if (widgetCreated && inputData[1]?.forceInput && config?.widget) {
             // @ts-expect-error