Basic vanilla workflow converter

src/lib/nodes/ComfyBackendNode.ts

@@ -2,7 +2,7 @@ import LGraphCanvas from "@litegraph-ts/core/src/LGraphCanvas";
 import ComfyGraphNode from "./ComfyGraphNode";
 import ComfyWidgets from "$lib/widgets"
 import type { ComfyWidgetNode } from "$lib/nodes/widgets";
-import { BuiltInSlotShape, BuiltInSlotType, type SerializedLGraphNode } from "@litegraph-ts/core";
+import { BuiltInSlotShape, BuiltInSlotType, LiteGraph, type SerializedLGraphNode } from "@litegraph-ts/core";
 import type IComfyInputSlot from "$lib/IComfyInputSlot";
 import type { ComfyInputConfig } from "$lib/IComfyInputSlot";
 import { iterateNodeDefOutputs, type ComfyNodeDef, iterateNodeDefInputs } from "$lib/ComfyNodeDef";
@@ -13,20 +13,24 @@ import type { SerializedPromptOutput } from "$lib/utils";
  */
 export class ComfyBackendNode extends ComfyGraphNode {
     comfyClass: string;
+    comfyNodeDef: ComfyNodeDef;
     displayName: string | null;
 
-    constructor(title: string, comfyClass: string, nodeData: any) {
+    constructor(title: string, comfyClass: string, nodeDef: ComfyNodeDef) {
         super(title)
         this.type = comfyClass; // XXX: workaround dependency in LGraphNode.addInput()
-        this.displayName = nodeData.display_name;
+        this.displayName = nodeDef.display_name;
+        this.comfyNodeDef = nodeDef;
         this.comfyClass = comfyClass;
         this.isBackendNode = true;
 
         const color = LGraphCanvas.node_colors["yellow"];
-        this.color = color.color
-        this.bgColor = color.bgColor
+        if (this.color == null)
+            this.color = color.color
+        if (this.bgColor == null)
+            this.bgColor = color.bgColor
 
-        this.setup(nodeData)
+        this.setup(nodeDef)
 
         // ComfyUI has no obvious way to identify if a node will return outputs back to the frontend based on its properties.
         // It just returns a hash like { "ui": { "images": results } } internally.
@@ -55,13 +59,13 @@ export class ComfyBackendNode extends ComfyGraphNode {
             } else {
                 if (Array.isArray(type)) {
                     // Enums
-                    Object.assign(config, ComfyWidgets.COMBO(this, inputName, inputData) || {});
+                    Object.assign(config, ComfyWidgets.COMBO.callback(this, inputName, inputData) || {});
                 } else if (`${type}:${inputName}` in ComfyWidgets) {
                     // Support custom ComfyWidgets by Type:Name
-                    Object.assign(config, ComfyWidgets[`${type}:${inputName}`](this, inputName, inputData) || {});
+                    Object.assign(config, ComfyWidgets[`${type}:${inputName}`].callback(this, inputName, inputData) || {});
                 } else if (type in ComfyWidgets) {
                     // Standard type ComfyWidgets
-                    Object.assign(config, ComfyWidgets[type](this, inputName, inputData) || {});
+                    Object.assign(config, ComfyWidgets[type].callback(this, inputName, inputData) || {});
                 } else {
                     // Node connection inputs (backend)
                     this.addInput(inputName, type);

src/lib/nodes/ComfyGraphNode.ts

@@ -317,6 +317,11 @@ export default class ComfyGraphNode extends LGraphNode {
     }
 
     override onConfigure(o: SerializedLGraphNode) {
+        if (this.inputs.length != (o.inputs || []).length || this.outputs.length != (o.outputs || []).length) {
+            console.error("Expected node slot size mismatch when deserializing!", o.type, "ours", this.inputs, this.outputs, "theirs", o.inputs, o.outputs)
+            return;
+        }
+
         // Save the litegraph type of the default ComfyWidgetNode for each input.
         for (let index = 0; index < this.inputs.length; index++) {
             const input = this.inputs[index]

src/lib/nodes/widgets/ComfyWidgetNode.ts

@@ -15,6 +15,11 @@ export type AutoConfigOptions = {
     setWidgetTitle?: boolean
 }
 
+export type SerializedComfyWidgetNode = {
+    comfyValue?: any
+    shownOutputProperties?: ComfyWidgetNode["shownOutputProperties"]
+} & SerializedLGraphNode
+
 /*
  * NOTE: If you want to add a new widget but it has the same input/output type
  * as another one of the existing widgets, best to create a new "variant" of
@@ -35,6 +40,11 @@ export interface ComfyWidgetProperties extends ComfyGraphNodeProperties {
     defaultValue: any
 }
 
+export type ShownOutputProperty = {
+    type: string,
+    outputName: string
+}
+
 /*
  * A node that is tied to a UI widget in the frontend. When the frontend's
  * widget is changed, the value of the first output in the node is updated
@@ -72,7 +82,7 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     // shownInputProperties: string[] = []
 
     /** Names of properties to add as outputs */
-    private shownOutputProperties: Record<string, { type: string, outputName: string }> = {}
+    private shownOutputProperties: Record<string, ShownOutputProperty> = {}
     outputProperties: { name: string, type: string }[] = []
 
     override isBackendNode = false;
@@ -328,7 +338,7 @@ export default abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
 
     clampOneConfig(input: IComfyInputSlot) { }
 
-    override onSerialize(o: SerializedLGraphNode) {
+    override onSerialize(o: SerializedComfyWidgetNode) {
         (o as any).comfyValue = get(this.value);
         (o as any).shownOutputProperties = this.shownOutputProperties
         super.onSerialize(o);