From e9326e50b501795b7db9b38d7361d301aca7c510 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 3 May 2023 22:53:05 -0500
Subject: [PATCH] Better serialize widget values

---
 README.md                          |  8 ++++----
 src/lib/nodes/ComfyWidgetNodes.ts  | 18 ++++++++++++------
 src/lib/widgets/ComboWidget.svelte |  2 +-
 src/lib/widgets/RangeWidget.svelte |  4 +++-
 src/lib/widgets/TextWidget.svelte  | 19 ++++++++++++++++---
 5 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 063d986..8cce78e 100644
--- a/README.md
+++ b/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. Start ComfyUI as usual with `python main.py --enable-cors-header`
-5. Visit `http://localhost:3000` in your browser
+4. `pnpm build:css`
+5. `pnpm dev`
+6. Start ComfyUI as usual with `python main.py --enable-cors-header`
+7. Visit `http://localhost:3000` in your browser
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index a1f9938..29e13de 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/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 trigger reactivity to update component based on new props
-            this.propsChanged.set(true)
-        }
+        // Force reactivity change so the frontend can be updated with the new props
+        this.propsChanged.set(!get(this.propsChanged))
     }
 
-    clampOneConfig(input: IComfyInputSlot) {}
+    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 {
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index ee2e6b6..423785d 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/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
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index ad7a53f..11d9def 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/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
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index e0cb09a..d2106a0 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/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) {
-     node = widget.node as ComfyComboNode
-     nodeValue = node.value;
+ $: widget && setNodeValue(widget);
+
+ 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">