Better serialize widget values

README.md

@@ -20,7 +20,6 @@ This frontend isn't compatible with regular ComfyUI's workflow format since extr
 ## Requirements
 
 - `pnpm`
-- [Turborepo](https://turbo.build/repo/docs/installing)
 - An installation of vanilla [ComfyUI](https://github.com/comfyanonymous/ComfyUI) for the backend
 
 ## Installation
@@ -32,6 +31,7 @@ git clone https://github.com/space-nuko/ComfyBox --recursive
 ```
 
 2. `pnpm install`
-3. `pnpm dev`
+4. `pnpm build:css`
-4. Start ComfyUI as usual with `python main.py --enable-cors-header`
+5. `pnpm dev`
-5. Visit `http://localhost:3000` in your browser
+6. Start ComfyUI as usual with `python main.py --enable-cors-header`
+7. Visit `http://localhost:3000` in your browser

src/lib/nodes/ComfyWidgetNodes.ts

@@ -1,4 +1,4 @@
-import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot } 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, type INodeOutputSlot, type SerializedLGraphNode } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
@@ -127,13 +127,19 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
             }
         }
 
-        if (changed) {
+        // Force reactivity change so the frontend can be updated with the new props
-            // Force trigger reactivity to update component based on new props
+        this.propsChanged.set(!get(this.propsChanged))
-            this.propsChanged.set(true)
-        }
     }
 
     clampOneConfig(input: IComfyInputSlot) { }
+
+    override onSerialize(o: SerializedLGraphNode) {
+        (o as any).comfyValue = get(this.value)
+    }
+
+    override onConfigure(o: SerializedLGraphNode) {
+        this.value.set((o as any).comfyValue)
+    }
 }
 
 export interface ComfySliderProperties extends ComfyWidgetProperties {

src/lib/widgets/ComboWidget.svelte

@@ -12,7 +12,7 @@
 
  $: widget && setNodeValue(widget);
 
- $: if ($propsChanged && nodeValue !== null) {
+ $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
      setOption($nodeValue)
      setNodeValue(widget)
      node.properties = node.properties

src/lib/widgets/RangeWidget.svelte

@@ -20,7 +20,9 @@
      }
  };
 
- $: if ($propsChanged && nodeValue !== null) {
+ // I don't know why but this is necessary to watch for changes to node
+ // properties from ComfyWidgetNode.
+ $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
      setOption($nodeValue)
      setNodeValue(widget)
      node.properties = node.properties

src/lib/widgets/TextWidget.svelte

@@ -6,12 +6,25 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
+ let propsChanged: Writable<boolean> | null = null;
  let itemValue: WidgetUIStateStore | null = null;
 
- $: if(widget) {
+ $: widget && setNodeValue(widget);
-     node = widget.node as ComfyComboNode
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfySliderNode
          nodeValue = node.value;
+         propsChanged = node.propsChanged;
+     }
  };
+
+ // I don't know why but this is necessary to watch for changes to node
+ // properties from ComfyWidgetNode.
+ $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
+     setNodeValue(widget)
+     node.properties = node.properties
+ }
 </script>
 
 <div class="wrapper gr-textbox">