Node colorization for frontend/backend

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) {
-        super(name)
-        this.addOutput("value", "number");
+    static slotLayout: SlotLayout = {
+        outputs: [
+            { 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"
 })