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>

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