Node colorization for frontend/backend

src/lib/components/ComfyApp.ts

@@ -127,6 +127,11 @@ export default class ComfyApp {
         this.addPasteHandler();
         this.addKeyboardHandler();
 
+        // Distinguish frontend/backend connections
+        const BACKEND_TYPES = ["CLIP", "CLIP_VISION", "CLIP_VISION_OUTPUT", "CONDITIONING", "CONTROL_NET", "IMAGE", "LATENT", "MASK", "MODEL", "STYLE_MODEL", "VAE"]
+        for (const type of BACKEND_TYPES)
+            LGraphCanvas.link_type_colors[type] = "orange" // yellow
+
         // await this.#invokeExtensionsAsync("setup");
 
         // Ensure the canvas fills the window
@@ -236,6 +241,9 @@ export default class ComfyApp {
                     this.type = nodeId; // XXX: workaround dependency in LGraphNode.addInput()
                     (this as any).comfyClass = nodeId;
                     (this as any).isBackendNode = true;
+                    const color = LGraphCanvas.node_colors["yellow"];
+                    this.color = color.color
+                    this.bgColor = color.bgColor
                     var inputs = nodeData["input"]["required"];
                     if (nodeData["input"]["optional"] != undefined) {
                         inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
@@ -267,7 +275,7 @@ export default class ComfyApp {
                     for (const o in nodeData["output"]) {
                         const output = nodeData["output"][o];
                         const outputName = nodeData["output_name"][o] || output;
-                        this.addOutput(outputName, output);
+                        this.addOutput(outputName, output, { color_off: "orange", color_on: "orange" });
                     }
 
                     const s = this.computeSize();
@@ -477,8 +485,14 @@ export default class ComfyApp {
                     const inp = node.inputs[i];
                     const inputLink = node.getInputLink(i)
                     const inputNode = node.getInputNode(i)
-                    if (!inputLink || !inputNode)
+                    if (!inputLink || !inputNode) {
+                        if ("config" in inp) {
+                            const defaultValue = (inp as IComfyInputSlot).config?.defaultValue
+                            if (defaultValue !== null && defaultValue !== undefined)
+                                inputs[inp.name] = defaultValue
+                        }
                         continue;
+                    }
 
                     let serialize = true;
                     if ("config" in inp)

src/lib/nodes/ComfyWidgetNodes.ts

@@ -1,10 +1,11 @@
-import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot } from "@litegraph-ts/core";
+import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
 import TextWidget from "$lib/widgets/TextWidget.svelte";
 import type { SvelteComponentDev } from "svelte/internal";
 import { ComfyWidgets } from "$lib/widgets";
+import { Watch } from "@litegraph-ts/nodes-basic";
 
 export interface ComfyWidgetProperties extends Record<string, any> {
     value: any,
@@ -26,6 +27,32 @@ export abstract class ComfyWidgetNode extends ComfyGraphNode {
     override isBackendNode = false;
     override serialize_widgets = true;
 
+    displayWidget: ITextWidget;
+
+    override size: Vector2 = [60, 40];
+
+    constructor(name?: string) {
+        super(name)
+        const color = LGraphCanvas.node_colors["blue"]
+        this.color ||= color.color
+        this.bgColor ||= color.bgColor
+        this.displayWidget = this.addWidget<ITextWidget>(
+            "text",
+            "Value",
+            ""
+        );
+    }
+
+    override onPropertyChanged(name: string, value: any) {
+        if (name == "value") {
+            this.displayWidget.value = Watch.toString(value)
+        }
+    }
+
+    setValue(value: any) {
+        this.setProperty("value", value)
+    }
+
     override onExecute() {
         // Assumption: we will have one output in the inherited class with the
         // correct type
@@ -47,17 +74,18 @@ export class ComfySliderNode extends ComfyWidgetNode {
     override svelteComponentType = RangeWidget
     override inputWidgetTypes = ["number", "slider"]
 
-    constructor(name?: string) {
+    static slotLayout: SlotLayout = {
-        super(name)
+        outputs: [
-        this.addOutput("value", "number");
+            { name: "value", type: "number" }
+        ]
     }
 }
 
 LiteGraph.registerNodeType({
     class: ComfySliderNode,
-    title: "ComfyBox.UI.Slider",
+    title: "UI.Slider",
     desc: "Slider outputting a number value",
-    type: "comfybox/ui/slider"
+    type: "ui/slider"
 })
 
 export interface ComfyComboProperties extends ComfyWidgetProperties {
@@ -71,15 +99,21 @@ export class ComfyComboNode extends ComfyWidgetNode {
         value: "*"
     }
 
+    static slotLayout: SlotLayout = {
+        outputs: [
+            { name: "value", type: "string" }
+        ]
+    }
+
     override svelteComponentType = ComboWidget
     override inputWidgetTypes = ["combo", "enum"]
 }
 
 LiteGraph.registerNodeType({
     class: ComfyComboNode,
-    title: "ComfyBox.UI.Combo",
+    title: "UI.Combo",
     desc: "Combo box outputting a string value",
-    type: "comfybox/ui/combo"
+    type: "ui/combo"
 })
 
 export interface ComfyTextProperties extends ComfyWidgetProperties {
@@ -91,13 +125,19 @@ export class ComfyTextNode extends ComfyWidgetNode {
         value: ""
     }
 
+    static slotLayout: SlotLayout = {
+        outputs: [
+            { name: "value", type: "string" }
+        ]
+    }
+
     override svelteComponentType = TextWidget
     override inputWidgetTypes = ["text"]
 }
 
 LiteGraph.registerNodeType({
     class: ComfyTextNode,
-    title: "ComfyBox.UI.Text",
+    title: "UI.Text",
     desc: "Textbox outputting a string value",
-    type: "comfybox/ui/text"
+    type: "ui/text"
 })

src/lib/nodes/index.ts

@@ -1,2 +1,3 @@
 export { default as ComfyReroute } from "./ComfyReroute"
 export { ComfySaveImageNode, ComfyPreviewImageNode } from "./ComfyImageNodes"
+export { ComfyWidgetNode, ComfySliderNode, ComfyComboNode, ComfyTextNode } from "./ComfyWidgetNodes"

src/lib/widgets.ts

@@ -24,9 +24,6 @@ function addComfyInput(node: LGraphNode, inputName: string, extraInfo: Partial<I
     for (const [k, v] of Object.entries(extraInfo))
         input[k] = v
     input.serialize = true;
-    input.shape = BuiltInSlotShape.CARD_SHAPE;
-    input.color_off = "lightblue"
-    input.color_on = "lightblue"
     return input;
 }