From b754243d2753278a168667d5bd1f50fe5c39dab9 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 5 Apr 2023 11:10:03 -0500
Subject: [PATCH] Move state management into svelte store

---
 src/lib/components/ComfyApp.svelte    |  20 ++---
 src/lib/components/ComfyPane.svelte   | 117 ++++++++++++++------------
 src/lib/components/ComfyUIPane.svelte |  86 +++----------------
 src/lib/stores/widgetState.ts         |  73 ++++++++++++++++
 vite.config.ts                        |   2 +-
 5 files changed, 154 insertions(+), 144 deletions(-)
 create mode 100644 src/lib/stores/widgetState.ts

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index d0bbafb..c43abec 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -5,6 +5,7 @@
  import { Backpack, Gear } from 'radix-icons-svelte';
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp from "./ComfyApp";
+ import widgetState from "$lib/stores/widgetState";
 
  import { LGraphNode } from "litegraph.js";
 
@@ -36,21 +37,10 @@
  onMount(async () => {
      app = new ComfyApp();
 
-     app.eventBus.on("nodeAdded", (node: LGraphNode) => {
-         uiPane.addNodeUI(node);
-     });
-
-     app.eventBus.on("nodeRemoved", (node: LGraphNode) => {
-         uiPane.removeNodeUI(node);
-     });
-
-     app.eventBus.on("configured", (graph: LGraph) => {
-         uiPane.configureFinished(graph);
-     });
-
-     app.eventBus.on("cleared", () => {
-         uiPane.clear();
-     });
+     app.eventBus.on("nodeAdded", widgetState.nodeAdded);
+     app.eventBus.on("nodeRemoved", widgetState.nodeRemoved);
+     app.eventBus.on("configured", widgetState.configureFinished);
+     app.eventBus.on("cleared", widgetState.clear);
 
      await app.setup();
      refreshView();
diff --git a/src/lib/components/ComfyPane.svelte b/src/lib/components/ComfyPane.svelte
index 07409d7..7f45d4e 100644
--- a/src/lib/components/ComfyPane.svelte
+++ b/src/lib/components/ComfyPane.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
- import { Button } from "@gradio/button";
+ import { onDestroy } from "svelte";
  import { Block, BlockTitle } from "@gradio/atoms";
  import { Dropdown, Range, TextBox } from "@gradio/form";
+ import widgetState from "$lib/stores/widgetState";
 
  import { dndzone } from 'svelte-dnd-action';
- import { flip } from 'svelte/animate';
-
- export let state: Record<number, any[]> = {};
- export let items: Record<number, { node: LGraphNode, widget: IWidget }[]> = {};
+ import {flip} from 'svelte/animate';
 
  export let dragItems = [];
  let dragDisabled = true;
@@ -29,6 +27,12 @@
  const stopDrag = () => {
      dragDisabled = true;
  };
+
+ const unsubscribe = widgetState.subscribe(state => {
+     dragItems = dragItems.filter(item => item.node.id in state);
+ });
+
+ onDestroy(unsubscribe);
 </script>
 
 
@@ -40,56 +44,59 @@
     {#each dragItems as dragItem(dragItem.id)}
         {@const node = dragItem.node}
         {@const id = node.id}
-        <Block>
-            <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-            <label for={id}>
-                <BlockTitle>{node.title}</BlockTitle>
-            </label>
-            {#each items[id] as item, i}
-                {#if item.widget.type == "combo"}
-                    <div class="wrapper">
-                        <Dropdown
-                            bind:value={state[id][i]}
-                            choices={item.widget.options.values}
-                            multiselect={false}
-                            max_choices={1},
-                            label={item.widget.name}
-                            show_label={true}
-                            disabled={item.widget.options.values.length === 0}
-                            on:change
-                            on:select
-                            on:blur
-                        />
-                    </div>
-                {:else if item.widget.type == "number"}
-                    <div class="wrapper">
-                        <Range
-                            bind:value={state[id][i]}
-                            minimum={item.widget.options.min}
-                            maximum={item.widget.options.max}
-                            step={item.widget.options.step}
-                            label={item.widget.name}
-                            show_label={true}
-                            on:change
-                            on:release
-                        />
-                    </div>
-                {:else if item.widget.type == "text"}
-                    <div class="wrapper">
-                        <TextBox
-                            bind:value={state[id][i]}
-                            label={item.widget.name}
-                            lines={item.widget.options.multiline ? 5 : 1}
-                            show_label={true}
-                            on:change
-                            on:submit
-                            on:blur
-                            on:select
-                        />
-                    </div>
-                {/if}
-            {/each}
-        </Block>
+        <div class="animation-wrapper" animate:flip={{duration:flipDurationMs}}>
+            <Block>
+                <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                <label for={id}>
+                    <BlockTitle>{node.title}</BlockTitle>
+                </label>
+                {#each $widgetState[id] as item, i}
+                    {#if item.widget.type == "combo"}
+                        <div class="wrapper">
+                            <Dropdown
+                                bind:value={item.value}
+                                choices={item.widget.options.values}
+                                multiselect={false}
+                                max_choices={1},
+                                label={item.widget.name}
+                                show_label={true}
+                                disabled={item.widget.options.values.length === 0}
+                                on:change
+                                on:select
+                                on:blur
+                            />
+                        </div>
+                    {:else if item.widget.type == "number"}
+                        <div class="wrapper">
+                            <Range
+                                bind:value={item.value}
+                                minimum={item.widget.options.min}
+                                maximum={item.widget.options.max}
+                                step={item.widget.options.step}
+                                label={item.widget.name}
+                                show_label={true}
+                                on:change
+                                on:release
+                            />
+                        </div>
+                    {:else if item.widget.type == "text"}
+                        <div class="wrapper">
+                            <TextBox
+                                bind:value={item.value}
+                                label={item.widget.name}
+                                lines={item.widget.options.multiline ? 5 : 1}
+                                max_lines={item.widget.options.multiline ? 5 : 1}
+                                show_label={true}
+                                on:change
+                                on:submit
+                                on:blur
+                                on:select
+                            />
+                        </div>
+                    {/if}
+                {/each}
+            </Block>
+        </div>
     {/each}
 </div>
 
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 37f2197..b984d85 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -3,86 +3,26 @@
  import type { IWidget } from "litegraph.js";
  import ComfyApp from "./ComfyApp";
  import ComfyPane from "./ComfyPane.svelte";
+ import widgetState from "$lib/stores/widgetState";
 
  export let app: ComfyApp;
+ let dragConfigured: boolean = false;
+ export let dragItemss: any[][] = []
 
- let dragItems = [];
+ export let totalId = 0;
 
- export function clear() {
-     nodes = {};
-     items = {};
-     state = {};
-     dragItems = []
+ $: if(app && !dragConfigured) {
+     dragConfigured = true;
+     app.eventBus.on("nodeAdded", (node: LGraphNode) => {
+         dragItemss[0].push({ id: totalId++, node: node });
+     });
  }
-
- export function addNodeUI(node: LGraphNode) {
-     if (node.widgets) {
-         for (const [i, widget] of node.widgets.entries()) {
-             if (!nodes[node.id]) {
-                 dragItems.push({ id: node.id, node: node })
-             }
-             nodes[node.id] = node;
-
-             node.onPropertyChanged = (k, v) => {
-                 console.log("PROPCHANGE", k, v)
-             };
-
-             if (!items[node.id]) {
-                 items[node.id] = []
-             }
-             items[node.id].push({ node, widget })
-
-             if (!state[node.id]) {
-                 state[node.id] = []
-             }
-             state[node.id].push(widget.value);
-         }
-     }
-
-     nodes = nodes;
-     items = items;
-     state = state;
- }
-
- export function removeNodeUI(node: LGraphNode) {
-     delete nodes[node.id]
-     delete state[node.id]
-     delete items[node.id]
-
-     dragItems = Array.from(dragItems.filter(e => e.id != node.id));
-     console.log("REM", node.id, dragItems)
-
-     nodes = nodes;
-     items = items;
-     state = state;
- }
-
- export function configureFinished(graph: LGraph) {
-     for (const node of graph.computeExecutionOrder(false, null)) {
-         if (node.widgets_values) {
-             for (const [j, value] of node.widgets_values.entries()) {
-                 state[node.id][j] = value;
-             }
-         }
-     }
-
-     nodes = nodes;
-     state = state;
- }
-
- export function getState() {
-     return state;
- }
-
- let nodes: Record<number, LGraphNode> = {};
- let items: Record<number, { node: LGraphNode, widget: IWidget }[]> = {};
- let state: Record<number, any[]> = {};
 </script>
 
 <div id="comfy-ui-panes" >
-    <ComfyPane {dragItems} {items} {state} />
-    <ComfyPane {items} {state} />
-    <ComfyPane {items} {state} />
+    <ComfyPane bind:dragItems={dragItemss[0]} />
+    <ComfyPane bind:dragItems={dragItemss[1]} />
+    <ComfyPane bind:dragItems={dragItemss[2]} />
 </div>
 
 <style>
@@ -105,7 +45,7 @@
      position: absolute;
      right: 0;
      width: 1em;
-     height: 0.5em;
+     height: 1em;
      background-color: grey;
  }
 
diff --git a/src/lib/stores/widgetState.ts b/src/lib/stores/widgetState.ts
new file mode 100644
index 0000000..746756c
--- /dev/null
+++ b/src/lib/stores/widgetState.ts
@@ -0,0 +1,73 @@
+import { writable, get } from 'svelte/store';
+import type { LGraph, LGraphNode, IWidget } from "litegraph.js";
+import type { Readable, Writable } from 'svelte/store';
+
+export type WidgetUIState = {
+    node: LGraphNode,
+    widget: IWidget,
+    value: any
+}
+
+type NodeID = number;
+
+type WidgetStateOps = {
+    nodeAdded: (node: LGraphNode) => void,
+    nodeRemoved: (node: LGraphNode) => void,
+    configureFinished: (graph: LGraph) => void,
+    clear: () => void,
+}
+type WidgetStateStore = Writable<Record<NodeID, WidgetUIState[]>> & WidgetStateOps;
+
+const store: Writable<Record<NodeID, WidgetUIState[]>> = writable({})
+
+function clear() {
+    store.set({})
+}
+
+function nodeAdded(node: LGraphNode) {
+    if (node.widgets) {
+        let state = get(store)
+        for (const widget of node.widgets) {
+            if (!state[node.id])
+                state[node.id] = []
+            state[node.id].push({ node, widget, value: widget.value })
+        }
+
+        store.set(state);
+    }
+}
+
+function nodeRemoved(node: LGraphNode) {
+    let state = get(store)
+    delete state[node.id]
+    store.set(state)
+}
+
+function configureFinished(graph: LGraph) {
+    let state = get(store);
+
+    for (const node of graph.computeExecutionOrder(false, null)) {
+        if (node.widgets_values) {
+            for (const [i, value] of node.widgets_values.entries()) {
+                if (i < state[node.id].length) {
+                    state[node.id][i].value = value;
+                }
+                else {
+                    console.error("Mismatch in widgets_values!", state[node.id].map(i => i.value), node.widgets_values)
+                    break;
+                }
+            }
+        }
+    }
+
+    store.set(state)
+}
+
+export default
+{
+    ...store,
+    nodeAdded,
+    nodeRemoved,
+    configureFinished,
+    clear
+} as WidgetStateStore;
diff --git a/vite.config.ts b/vite.config.ts
index ea108ad..d55e93d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,7 @@ import FullReload from 'vite-plugin-full-reload'
 
 export default defineConfig({
     plugins: [
-        sveltekit()
+        sveltekit(),
         FullReload(["src/**/*.{js,ts,svelte}"])
     ],
     build: {