Make optional node input's slot hollow circle (#912)

* Use hollow circle for optional input

* nit

* Show hollow shape for optional input

* Add playwright tests

* Update litegraph

* Update test expectations [skip ci]

---------

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

src/scripts/app.ts

@@ -1996,6 +1996,8 @@ export class ComfyApp {
 
       constructor(title?: string) {
         super(title)
+        const requiredInputs = nodeData.input.required
+
         var inputs = nodeData['input']['required']
         if (nodeData['input']['optional'] != undefined) {
           inputs = Object.assign(
@@ -2025,7 +2027,12 @@ export class ComfyApp {
             }
           } else {
             // Node connection inputs
-            this.addInput(inputName, type)
+            const inputIsRequired = inputName in requiredInputs
+            const inputOptions = inputIsRequired
+              ? {}
+              : // @ts-expect-error LiteGraph.SlotShape is not typed.
+                { shape: LiteGraph.SlotShape.HollowCircle }
+            this.addInput(inputName, type, inputOptions)
             widgetCreated = false
           }
           // @ts-expect-error
@@ -2048,10 +2055,11 @@ export class ComfyApp {
           let output = nodeData['output'][o]
           if (output instanceof Array) output = 'COMBO'
           const outputName = nodeData['output_name'][o] || output
-          const outputShape = nodeData['output_is_list'][o]
-            ? LiteGraph.GRID_SHAPE
-            : LiteGraph.CIRCLE_SHAPE
-          this.addOutput(outputName, output, { shape: outputShape })
+          const outputIsList = nodeData['output_is_list'][o]
+          const outputOptions = outputIsList
+            ? { shape: LiteGraph.GRID_SHAPE }
+            : {}
+          this.addOutput(outputName, output, outputOptions)
         }
 
         const s = this.computeSize()
@@ -2062,6 +2070,29 @@ export class ComfyApp {
 
         app.#invokeExtensionsAsync('nodeCreated', this)
       }
+
+      configure(data: any) {
+        // Keep 'name', 'type', and 'shape' information from the original node definition.
+        const merge = (
+          current: Record<string, any>,
+          incoming: Record<string, any>
+        ) => {
+          const result = { ...incoming }
+          for (const key of ['name', 'type', 'shape']) {
+            if (current[key] !== undefined) {
+              result[key] = current[key]
+            }
+          }
+          return result
+        }
+        for (const field of ['inputs', 'outputs']) {
+          const slots = data[field] ?? []
+          data[field] = slots.map((slot, i) =>
+            merge(this[field][i] ?? {}, slot)
+          )
+        }
+        super.configure(data)
+      }
     }
     node.prototype.comfyClass = nodeData.name