From b94c1a7bead072530162e7f914ebd45666afcdc6 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 01:40:31 -0700
Subject: [PATCH 01/27] remove editing things from mobile

---
 src/lib/components/ComfyApp.ts       | 1 -
 src/mobile/routes/subworkflow.svelte | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 2c43c30..14bb305 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -132,7 +132,6 @@ export default class ComfyApp {
         this.addPasteHandler();
         this.addKeyboardHandler();
 
-
         // await this.#invokeExtensionsAsync("setup");
 
         // Ensure the canvas fills the window
diff --git a/src/mobile/routes/subworkflow.svelte b/src/mobile/routes/subworkflow.svelte
index 0e1b905..25b807d 100644
--- a/src/mobile/routes/subworkflow.svelte
+++ b/src/mobile/routes/subworkflow.svelte
@@ -33,7 +33,7 @@
         {@const node = app.lGraph.getNodeById(id)}
         <div class:is-executing={$queueState.runningNodeId === node.id}>
             <Block>
-                <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+                <label for={String(id)}>
                     <BlockTitle>
                         {node.title}
                     </BlockTitle>
@@ -41,9 +41,6 @@
                 {#each $widgetState[id] as item}
                     <svelte:component this={getComponentForWidgetState(item)} {item} />
                 {/each}
-                {#if $uiState.unlocked}
-                    <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-                {/if}
             </Block>
         </div>
     {/each}

From 772d6b771a5658924b6f5052281e9a274350ea30 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 02:16:27 -0700
Subject: [PATCH 02/27] Merge node/widget state

---
 src/App.svelte                             | 365 ---------------------
 src/AppMobile.svelte                       |   1 -
 src/lib/GraphSync.ts                       |  29 +-
 src/lib/components/ComfyApp.svelte         |   6 -
 src/lib/components/ComfyApp.ts             |   1 -
 src/lib/components/ComfyPane.svelte        |   5 +-
 src/lib/components/ComfyUIPane.svelte      |   6 +-
 src/lib/stores/nodeState.ts                |  95 +++++-
 src/lib/stores/widgetState.ts              | 132 --------
 src/lib/utils.ts                           |   2 +-
 src/lib/widgets/ComboWidget.svelte         |   2 +-
 src/lib/widgets/ComfyGalleryWidget.svelte  |   2 +-
 src/lib/widgets/ComfyValueControlWidget.ts |   4 +-
 src/lib/widgets/ComfyWidget.ts             |   4 +-
 src/lib/widgets/RangeWidget.svelte         |   2 +-
 src/lib/widgets/TextWidget.svelte          |   2 +-
 src/mobile/GenToolbar.svelte               |   1 -
 src/mobile/routes/home.svelte              |   6 -
 src/mobile/routes/list-subworkflows.svelte |   1 -
 src/mobile/routes/subworkflow.svelte       |   5 +-
 tsconfig.json                              |   7 +-
 21 files changed, 119 insertions(+), 559 deletions(-)
 delete mode 100644 src/lib/stores/widgetState.ts

diff --git a/src/App.svelte b/src/App.svelte
index 8e91652..a075214 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,369 +9,4 @@
 <ComfyApp/>
 
 <style>
-:root {
-	--primary-50: #fff7ed;
-	--primary-100: #ffedd5;
-	--primary-200: #fed7aa;
-	--primary-300: #fdba74;
-	--primary-400: #fb923c;
-	--primary-500: #f97316;
-	--primary-600: #ea580c;
-	--primary-700: #c2410c;
-	--primary-800: #9a3412;
-	--primary-900: #7c2d12;
-	--primary-950: #6c2e12;
-	--secondary-50: #eff6ff;
-	--secondary-100: #dbeafe;
-	--secondary-200: #bfdbfe;
-	--secondary-300: #93c5fd;
-	--secondary-400: #60a5fa;
-	--secondary-500: #3b82f6;
-	--secondary-600: #2563eb;
-	--secondary-700: #1d4ed8;
-	--secondary-800: #1e40af;
-	--secondary-900: #1e3a8a;
-	--secondary-950: #1d3660;
-	--neutral-50: #f9fafb;
-	--neutral-100: #f3f4f6;
-	--neutral-200: #e5e7eb;
-	--neutral-300: #d1d5db;
-	--neutral-400: #9ca3af;
-	--neutral-500: #6b7280;
-	--neutral-600: #4b5563;
-	--neutral-700: #374151;
-	--neutral-800: #1f2937;
-	--neutral-900: #111827;
-	--neutral-950: #0b0f19;
-	--spacing-xxs: 1px;
-	--spacing-xs: 2px;
-	--spacing-sm: 4px;
-	--spacing-md: 6px;
-	--spacing-lg: 8px;
-	--spacing-xl: 10px;
-	--spacing-xxl: 16px;
-	--radius-xxs: 1px;
-	--radius-xs: 2px;
-	--radius-sm: 4px;
-	--radius-md: 6px;
-	--radius-lg: 8px;
-	--radius-xl: 12px;
-	--radius-xxl: 22px;
-	--text-xxs: 9px;
-	--text-xs: 10px;
-	--text-sm: 12px;
-	--text-md: 14px;
-	--text-lg: 16px;
-	--text-xl: 22px;
-	--text-xxl: 26px;
-	--color-accent: var(--primary-500);
-	--color-accent-soft: var(--primary-50);
-	--background-fill-primary: white;
-	--background-fill-secondary: var(--neutral-50);
-	--border-color-accent: var(--primary-300);
-	--border-color-primary: var(--neutral-200);
-	--text-color-code-background-fill: var(--neutral-200);
-	--text-color-code-border: var(--border-color-primary);
-	--link-text-color: var(--secondary-600);
-	--link-text-color-active: var(--secondary-600);
-	--link-text-color-hover: var(--secondary-700);
-	--link-text-color-visited: var(--secondary-500);
-	--body-text-color-subdued: var(--neutral-400);
-	--body-background-fill: var(--background-fill-primary);
-	--body-text-color: var(--neutral-800);
-	--body-text-size: var(--text-md);
-	--body-text-weight: 400;
-	--embed-radius: var(--radius-lg);
-	--shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-	--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-		0 1px 2px -1px rgb(0 0 0 / 0.1);
-	--shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
-	--shadow-spread: 3px;
-	--block-background-fill: var(--background-fill-primary);
-	--block-border-color: var(--border-color-primary);
-	--block-border-width: 1px;
-	--block-info-text-color: var(--body-text-color-subdued);
-	--block-info-text-size: var(--text-sm);
-	--block-info-text-weight: 400;
-	--block-label-background-fill: var(--background-fill-primary);
-	--block-label-border-color: var(--border-color-primary);
-	--block-label-border-width: 1px;
-	--block-label-text-color: var(--neutral-500);
-	--block-label-icon-color: var(--block-label-text-color);
-	--block-label-margin: 0;
-	--block-label-padding: var(--spacing-sm) var(--spacing-lg);
-	--block-label-radius: calc(var(--radius-lg) - 1px) 0
-		calc(var(--radius-lg) - 1px) 0;
-	--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
-		calc(var(--radius-lg) - 1px);
-	--block-label-text-size: var(--text-sm);
-	--block-label-text-weight: 400;
-	--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
-	--block-radius: var(--radius-lg);
-	--block-shadow: var(--shadow-drop);
-	--block-title-background-fill: none;
-	--block-title-border-color: none;
-	--block-title-border-width: 0px;
-	--block-title-text-color: var(--neutral-500);
-	--block-title-padding: 0;
-	--block-title-radius: none;
-	--block-title-text-size: var(--text-md);
-	--block-title-text-weight: 400;
-	--container-radius: var(--radius-lg);
-	--form-gap-width: 1px;
-	--layout-gap: var(--spacing-xxl);
-	--panel-background-fill: var(--background-fill-secondary);
-	--panel-border-color: var(--border-color-primary);
-	--panel-border-width: 0;
-	--section-header-text-size: var(--text-md);
-	--section-header-text-weight: 400;
-	--checkbox-background-color: var(--background-fill-primary);
-	--checkbox-background-color-focus: var(--background-fill-primary);
-	--checkbox-background-color-hover: var(--background-fill-primary);
-	--checkbox-background-color-selected: var(--secondary-600);
-	--checkbox-border-color: var(--neutral-300);
-	--checkbox-border-color-focus: var(--secondary-500);
-	--checkbox-border-color-hover: var(--neutral-300);
-	--checkbox-border-color-selected: var(--secondary-600);
-	--checkbox-border-radius: var(--radius-sm);
-	--checkbox-border-width: var(--input-border-width);
-	--checkbox-label-background-fill: linear-gradient(
-		to top,
-		var(--neutral-50),
-		white
-	);
-	--checkbox-label-background-fill-hover: linear-gradient(
-		to top,
-		var(--neutral-100),
-		white
-	);
-	--checkbox-label-background-fill-selected: var(
-		--checkbox-label-background-fill
-	);
-	--checkbox-label-border-color: var(--border-color-primary);
-	--checkbox-label-border-color-hover: var(--border-color-primary);
-	--checkbox-label-border-width: var(--input-border-width);
-	--checkbox-label-gap: var(--spacing-lg);
-	--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
-	--checkbox-label-shadow: var(--shadow-drop);
-	--checkbox-label-text-size: var(--text-md);
-	--checkbox-label-text-weight: 400;
-	--checkbox-shadow: var(--input-shadow);
-	--checkbox-label-text-color: var(--body-text-color);
-	--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
-	--error-background-fill: linear-gradient(
-		to right,
-		#fee2e2,
-		var(--background-fill-secondary)
-	);
-	--error-border-color: #fecaca;
-	--error-border-width: 1px;
-	--error-text-color: #ef4444;
-	--prose-header-text-weight: 600;
-	--input-background-fill: white;
-	--input-background-fill-focus: var(--secondary-500);
-	--input-background-fill-hover: var(--input-background-fill);
-	--input-border-color: var(--border-color-primary);
-	--input-border-color-focus: var(--secondary-300);
-	--input-border-color-hover: var(--border-color-primary);
-	--input-border-width: 1px;
-	--input-padding: var(--spacing-xl);
-	--input-placeholder-color: var(--neutral-400);
-	--input-radius: var(--radius-lg);
-	--input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
-	--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50),
-		var(--shadow-inset);
-	--input-text-size: var(--text-md);
-	--input-text-weight: 400;
-	--loader-color: var(--color-accent);
-	--prose-text-size: var(--text-md);
-	--prose-text-weight: 400;
-	--stat-background-fill: linear-gradient(
-		to right,
-		var(--primary-400),
-		var(--primary-200)
-	);
-	--table-border-color: var(--neutral-300);
-	--table-even-background-fill: white;
-	--table-odd-background-fill: var(--neutral-50);
-	--table-radius: var(--radius-lg);
-	--table-row-focus: var(--color-accent-soft);
-	--button-border-width: var(--input-border-width);
-	--button-cancel-background-fill: linear-gradient(
-		to bottom right,
-		#fee2e2,
-		#fecaca
-	);
-	--button-cancel-background-fill-hover: linear-gradient(
-		to bottom right,
-		#fee2e2,
-		#fee2e2
-	);
-	--button-cancel-border-color: #fecaca;
-	--button-cancel-border-color-hover: var(--button-cancel-border-color);
-	--button-cancel-text-color: #dc2626;
-	--button-cancel-text-color-hover: var(--button-cancel-text-color);
-	--button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
-	--button-large-radius: var(--radius-lg);
-	--button-large-text-size: var(--text-lg);
-	--button-large-text-weight: 600;
-	--button-primary-background-fill: linear-gradient(
-		to bottom right,
-		var(--primary-100),
-		var(--primary-300)
-	);
-	--button-primary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--primary-100),
-		var(--primary-200)
-	);
-	--button-primary-border-color: var(--primary-200);
-	--button-primary-border-color-hover: var(--button-primary-border-color);
-	--button-primary-text-color: var(--primary-600);
-	--button-primary-text-color-hover: var(--button-primary-text-color);
-	--button-secondary-background-fill: linear-gradient(
-		to bottom right,
-		var(--neutral-100),
-		var(--neutral-200)
-	);
-	--button-secondary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--neutral-100),
-		var(--neutral-100)
-	);
-	--button-secondary-border-color: var(--neutral-200);
-	--button-secondary-border-color-hover: var(--button-secondary-border-color);
-	--button-secondary-text-color: var(--neutral-700);
-	--button-secondary-text-color-hover: var(--button-secondary-text-color);
-	--button-shadow: var(--shadow-drop);
-	--button-shadow-active: var(--shadow-inset);
-	--button-shadow-hover: var(--shadow-drop-lg);
-	--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
-	--button-small-radius: var(--radius-lg);
-	--button-small-text-size: var(--text-md);
-	--button-small-text-weight: 400;
-	--button-transition: none;
-}
-.dark {
-	--color-accent-soft: var(--neutral-900);
-	--background-fill-primary: var(--neutral-950);
-	--background-fill-secondary: var(--neutral-900);
-	--border-color-accent: var(--neutral-600);
-	--border-color-primary: var(--neutral-700);
-	--text-color-code-background-fill: var(--neutral-800);
-	--link-text-color-active: var(--secondary-500);
-	--link-text-color: var(--secondary-500);
-	--link-text-color-hover: var(--secondary-400);
-	--link-text-color-visited: var(--secondary-600);
-	--body-text-color-subdued: var(--neutral-400);
-	--body-background-fill: var(--background-fill-primary);
-	--body-text-color: var(--neutral-100);
-	--shadow-spread: 1px;
-	--block-background-fill: var(--neutral-800);
-	--block-border-color: var(--border-color-primary);
-	--block-border-width: 1px;
-	--block-info-text-color: var(--body-text-color-subdued);
-	--block-label-background-fill: var(--background-fill-secondary);
-	--block-label-border-color: var(--border-color-primary);
-	--block-label-border-width: 1px;
-	--block-label-text-color: var(--neutral-200);
-	--block-shadow: none;
-	--block-title-background-fill: none;
-	--block-title-border-color: none;
-	--block-title-border-width: 0px;
-	--block-title-text-color: var(--neutral-200);
-	--panel-background-fill: var(--background-fill-secondary);
-	--panel-border-color: var(--border-color-primary);
-	--checkbox-background-color: var(--neutral-800);
-	--checkbox-background-color-focus: var(--checkbox-background-color);
-	--checkbox-background-color-hover: var(--checkbox-background-color);
-	--checkbox-background-color-selected: var(--secondary-600);
-	--checkbox-border-color: var(--neutral-700);
-	--checkbox-border-color-focus: var(--secondary-500);
-	--checkbox-border-color-hover: var(--neutral-600);
-	--checkbox-border-color-selected: var(--secondary-600);
-	--checkbox-label-background-fill: linear-gradient(
-		to top,
-		var(--neutral-900),
-		var(--neutral-800)
-	);
-	--checkbox-label-background-fill-hover: linear-gradient(
-		to top,
-		var(--neutral-900),
-		var(--neutral-800)
-	);
-	--checkbox-label-background-fill-selected: var(
-		--checkbox-label-background-fill
-	);
-	--checkbox-label-border-color: var(--border-color-primary);
-	--checkbox-label-border-color-hover: var(--border-color-primary);
-	--checkbox-label-text-color: var(--body-text-color);
-	--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
-	--error-background-fill: var(--background-fill-primary);
-	--error-border-color: var(--border-color-primary);
-	--error-border-width: var(--error-border-width);
-	--error-text-color: #ef4444;
-	--input-background-fill: var(--neutral-800);
-	--input-background-fill-focus: var(--secondary-600);
-	--input-background-fill-hover: var(--input-background-fill);
-	--input-border-color: var(--border-color-primary);
-	--input-border-color-focus: var(--neutral-700);
-	--input-border-color-hover: var(--border-color-primary);
-	--input-placeholder-color: var(--neutral-500);
-	--input-shadow: var(--input-shadow);
-	--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700),
-		var(--shadow-inset);
-	--loader-color: var(--loader-color);
-	--stat-background-fill: linear-gradient(
-		to right,
-		var(--primary-400),
-		var(--primary-600)
-	);
-	--table-border-color: var(--neutral-700);
-	--table-even-background-fill: var(--neutral-950);
-	--table-odd-background-fill: var(--neutral-900);
-	--table-row-focus: var(--color-accent-soft);
-	--button-cancel-background-fill: linear-gradient(
-		to bottom right,
-		#dc2626,
-		#b91c1c
-	);
-	--button-cancel-background-fill-hover: linear-gradient(
-		to bottom right,
-		#dc2626,
-		#dc2626
-	);
-	--button-cancel-border-color: #dc2626;
-	--button-cancel-border-color-hover: var(--button-cancel-border-color);
-	--button-cancel-text-color: white;
-	--button-cancel-text-color-hover: var(--button-cancel-text-color);
-	--button-primary-background-fill: linear-gradient(
-		to bottom right,
-		var(--primary-600),
-		var(--primary-700)
-	);
-	--button-primary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--primary-600),
-		var(--primary-600)
-	);
-	--button-primary-border-color: var(--primary-600);
-	--button-primary-border-color-hover: var(--button-primary-border-color);
-	--button-primary-text-color: white;
-	--button-primary-text-color-hover: var(--button-primary-text-color);
-	--button-secondary-background-fill: linear-gradient(
-		to bottom right,
-		var(--neutral-600),
-		var(--neutral-700)
-	);
-	--button-secondary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--neutral-600),
-		var(--neutral-600)
-	);
-	--button-secondary-border-color: var(--neutral-600);
-	--button-secondary-border-color-hover: var(--button-secondary-border-color);
-	--button-secondary-text-color: white;
-	--button-secondary-text-color-hover: var(--button-secondary-text-color);
-}
 </style>
diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte
index e08e4e3..21f50df 100644
--- a/src/AppMobile.svelte
+++ b/src/AppMobile.svelte
@@ -4,7 +4,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import widgetState from "$lib/stores/widgetState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
diff --git a/src/lib/GraphSync.ts b/src/lib/GraphSync.ts
index 024e83b..e941355 100644
--- a/src/lib/GraphSync.ts
+++ b/src/lib/GraphSync.ts
@@ -1,6 +1,5 @@
 import type { LGraph } from "@litegraph-ts/core";
-import widgetState, { type WidgetStateStore, type WidgetUIState, type WidgetUIStateStore } from "./stores/widgetState";
-import nodeState, { type NodeStateStore, type NodeUIState, type NodeUIStateStore } from "./stores/nodeState";
+import nodeState, { type WidgetUIState, type WidgetUIStateStore,  type NodeStateStore, type NodeUIState, type NodeUIStateStore } from "./stores/nodeState";
 import type ComfyApp from "./components/ComfyApp";
 import type { Unsubscriber } from "svelte/store";
 
@@ -38,24 +37,20 @@ export default class GraphSync {
 
     constructor(app: ComfyApp) {
         this.graph = app.lGraph;
-        this._unsubscribeWidget = widgetState.subscribe(this.onAllWidgetStateChanged.bind(this));
-        this._unsubscribeNode = nodeState.subscribe(this.onAllNodeStateChanged.bind(this));
+        this._unsubscribe = nodeState.subscribe(this.onAllNodeStateChanged.bind(this));
         this._finalizer = new FinalizationRegistry((id: number) => {
             console.log(`${this} has been garbage collected`);
-            this._unsubscribeWidget();
-            this._unsubscribeNode();
+            this._unsubscribe();
         });
     }
 
-    /*
-     * Fired when the entire widget graph changes.
-     */
-    private onAllWidgetStateChanged(state: WidgetStateStore) {
+    private onAllNodeStateChanged(state: NodeStateStore) {
         // TODO assumes only a single graph's widget state.
 
         for (let nodeId in state) {
+            state[nodeId].node.title = state[nodeId].name;
             if (!this.stores[nodeId]) {
-                this.addStores(state, nodeId);
+                this.addStores(state[nodeId].widgetStates, nodeId);
             }
         }
 
@@ -64,26 +59,18 @@ export default class GraphSync {
                 this.removeStores(nodeId);
             }
         }
-    }
-
-    private onAllNodeStateChanged(state: NodeStateStore) {
-        // TODO assumes only a single graph's widget state.
-
-        for (let nodeId in state) {
-            state[nodeId].node.name = state[nodeId].name;
-        }
 
         this.graph.setDirtyCanvas(true, true);
     }
 
-    private addStores(state: WidgetStateStore, nodeId: string) {
+    private addStores(widgetStates: WidgetUIState[], nodeId: string) {
         if (this.stores[nodeId]) {
             console.warn("Stores already exist!", nodeId, this.stores[nodeId])
         }
 
         this.stores[nodeId] = []
 
-        for (const wuis of state[nodeId]) {
+        for (const wuis of widgetStates) {
             const unsub = wuis.value.subscribe((v) => this.onWidgetStateChanged(wuis, v))
             this.stores[nodeId].push({ store: wuis.value, unsubscribe: unsub });
         }
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index b4e5887..b13a927 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -6,7 +6,6 @@
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp, { type SerializedAppState } from "./ComfyApp";
  import { Checkbox } from "@gradio/form"
- import widgetState from "$lib/stores/widgetState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
@@ -102,16 +101,11 @@
  onMount(async () => {
      app = new ComfyApp();
 
-     // TODO dedup
      app.eventBus.on("nodeAdded", nodeState.nodeAdded);
      app.eventBus.on("nodeRemoved", nodeState.nodeRemoved);
      app.eventBus.on("configured", nodeState.configureFinished);
      app.eventBus.on("cleared", nodeState.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);
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
 
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 14bb305..a67eb66 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -12,7 +12,6 @@ import * as basic from "@litegraph-ts/nodes-basic"
 import * as nodes from "$lib/nodes/index"
 import ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
-import type { WidgetStateStore, WidgetUIState } from "$lib/stores/widgetState";
 import * as widgets from "$lib/widgets/index"
 import type ComfyWidget from "$lib/widgets/ComfyWidget";
 import queueState from "$lib/stores/queueState";
diff --git a/src/lib/components/ComfyPane.svelte b/src/lib/components/ComfyPane.svelte
index 34b229d..0233f0f 100644
--- a/src/lib/components/ComfyPane.svelte
+++ b/src/lib/components/ComfyPane.svelte
@@ -3,7 +3,6 @@
  import { get } from "svelte/store"
  import { Block, BlockTitle } from "@gradio/atoms";
  import { Move } from 'radix-icons-svelte';
- import widgetState, { type WidgetDrawState, type WidgetUIState } from "$lib/stores/widgetState";
  import queueState from "$lib/stores/queueState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
@@ -47,7 +46,7 @@
      dragDisabled = true;
  };
 
- const unsubscribe = widgetState.subscribe(state => {
+ const unsubscribe = nodeState.subscribe(state => {
      dragItems = dragItems.filter(item => item.node.id in state);
  });
 
@@ -88,7 +87,7 @@
                             {/if}
                         </BlockTitle>
                     </label>
-                    {#each $widgetState[id] as item}
+                    {#each $nodeState[id].widgetStates as item}
                         <svelte:component this={getComponentForWidgetState(item)} {item} />
                         {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                             <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 7d29903..962c878 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -5,7 +5,7 @@
  import ComfyApp  from "./ComfyApp";
  import type { SerializedPanes } from "./ComfyApp"
  import ComfyPane from "./ComfyPane.svelte";
- import widgetState from "$lib/stores/widgetState";
+ import nodeState from "$lib/stores/nodeState";
 	import type { DragItem } from "./ComfyUIPane";
 
  export let app: ComfyApp;
@@ -17,12 +17,12 @@
  function findLeastPopulatedPaneIndex(): number {
      let minWidgetCount = 2 ** 64;
      let minIndex = 0;
-     let state = get(widgetState);
+     let state = get(nodeState);
      for (let i = 0; i < dragItems.length; i++) {
          let widgetCount = 0;
          for (let j = 0; j < dragItems[i].length; j++) {
              const nodeID = dragItems[i][j].node.id;
-             widgetCount += state[nodeID].length;
+             widgetCount += state[nodeID].widgetStates.length;
          }
          if (widgetCount < minWidgetCount) {
              minWidgetCount = widgetCount
diff --git a/src/lib/stores/nodeState.ts b/src/lib/stores/nodeState.ts
index ccd6eae..38c9c71 100644
--- a/src/lib/stores/nodeState.ts
+++ b/src/lib/stores/nodeState.ts
@@ -1,23 +1,51 @@
 import { writable, get } from 'svelte/store';
-import type { LGraph, LGraphNode } from "@litegraph-ts/core";
+import type { LGraph, LGraphNode, IWidget } from "@litegraph-ts/core";
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyGraphNode from '$lib/nodes/ComfyGraphNode';
+import type ComfyWidget from '$lib/widgets/ComfyWidget';
 
 /** store for one node's state */
 export type NodeUIStateStore = Writable<any>
 
 export type NodeUIState = {
     name: string,
-    node: LGraphNode
+    node: LGraphNode,
+    widgetStates: WidgetUIState[]
 }
 
-type NodeID = number;
+export type WidgetDrawState = {
+    isNodeExecuting: boolean
+}
+
+/** store for one widget's state */
+export type WidgetUIStateStore = Writable<any>
+
+export type WidgetUIState = {
+    /** position in the node's list of widgets */
+    index: number,
+    /** parent node containing the widget */
+    node: LGraphNode,
+    /** actual widget instance */
+    widget: IWidget,
+    /** widget value as a store, to react to changes */
+    value: WidgetUIStateStore,
+    /**
+     * true if this widget was added purely from the frontend. what this means:
+     * - this widget's state will not be saved to the workflow
+     * - the widget was added on startup by some subclass of ComfyGraphNode
+     */
+    isVirtual: boolean
+}
+
+export type NodeID = number;
 
 type NodeStateOps = {
     nodeAdded: (node: LGraphNode) => void,
     nodeRemoved: (node: LGraphNode) => void,
     configureFinished: (graph: LGraph) => void,
     nodeStateChanged: (node: LGraphNode) => void,
+    widgetStateChanged: (nodeId: number, widget: IWidget<any, any>) => void,
+    findWidgetByName: (nodeId: number, name: string) => WidgetUIState | null,
     clear: () => void,
 }
 
@@ -32,8 +60,22 @@ function clear() {
 
 function nodeAdded(node: LGraphNode) {
     let state = get(store)
-    state[node.id] = { node: node, name: node.name }
+
+    const widgets = [];
+
+    if (node.widgets) {
+        for (const [index, widget] of node.widgets.entries()) {
+            let isVirtual = false;
+            if ("isVirtual" in widget)
+                isVirtual = (widget as ComfyWidget<any, any>).isVirtual;
+            widgets.push({ index, widget, value: writable(widget.value), isVirtual: isVirtual })
+        }
+    }
+
+    state[node.id] = { node: node, name: node.title, widgetStates: widgets }
     store.set(state);
+
+    console.debug("call nodeAdded", state[node.id])
 }
 
 function nodeRemoved(node: LGraphNode) {
@@ -45,7 +87,7 @@ function nodeRemoved(node: LGraphNode) {
 function nodeStateChanged(node: LGraphNode) {
     const state = get(store)
     const nodeState = state[node.id]
-    nodeState.name = node.name
+    nodeState.name = node.title
     store.set(state);
 }
 
@@ -53,12 +95,51 @@ function configureFinished(graph: LGraph) {
     let state = get(store);
 
     for (const node of graph.computeExecutionOrder(false, null)) {
-        state[node.id].name = name;
+        state[node.id].name = node.title;
+
+        const widgetStates = state[node.id].widgetStates;
+        if (node.widgets_values) {
+            for (const [i, value] of node.widgets_values.entries()) {
+                if (i < widgetStates.length && !widgetStates[i].isVirtual) {
+                    widgetStates[i].value.set(value);
+                }
+                else {
+                    console.log("Skip virtual widget", node.id, node.type, widgetStates[i].widget)
+                }
+            }
+        }
     }
 
     store.set(state)
 }
 
+function widgetStateChanged(nodeId: number, widget: IWidget<any, any>) {
+    const state = get(store)
+    const entries = state[nodeId].widgetStates
+    if (entries) {
+        let widgetState = entries.find(e => e.widget === widget);
+        if (widgetState) {
+            widgetState.value.set(widget.value);
+            store.set(state);
+        }
+        else {
+            console.error("Widget state changed and node was found, but widget was not found in state!", widget, state[nodeId].node, entries)
+        }
+    }
+    else {
+        console.error("Widget state changed but node was not found in state!", widget, state[nodeId].node)
+    }
+}
+
+function findWidgetByName(nodeId: NodeID, name: string): WidgetUIState | null {
+    let state = get(store);
+
+    if (!(nodeId in state))
+        return null;
+
+    return state[nodeId].widgetStates.find((v) => v.widget.name === name);
+}
+
 const nodeStateStore: WritableNodeStateStore =
 {
     ...store,
@@ -66,6 +147,8 @@ const nodeStateStore: WritableNodeStateStore =
     nodeRemoved,
     nodeStateChanged,
     configureFinished,
+    widgetStateChanged,
+    findWidgetByName,
     clear
 }
 export default nodeStateStore;
diff --git a/src/lib/stores/widgetState.ts b/src/lib/stores/widgetState.ts
deleted file mode 100644
index 06084b9..0000000
--- a/src/lib/stores/widgetState.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { writable, get } from 'svelte/store';
-import type { LGraph, LGraphNode, IWidget } from "@litegraph-ts/core";
-import type { Readable, Writable } from 'svelte/store';
-import type ComfyGraphNode from '$lib/nodes/ComfyGraphNode';
-import type ComfyWidget from '$lib/widgets/ComfyWidget';
-
-/** store for one widget's state */
-export type WidgetUIStateStore = Writable<any>
-
-export type WidgetUIState = {
-    /** position in the node's list of widgets */
-    index: number,
-    /** parent node containing the widget */
-    node: LGraphNode,
-    /** actual widget instance */
-    widget: IWidget,
-    /** widget value as a store, to react to changes */
-    value: WidgetUIStateStore,
-    /**
-     * true if this widget was added purely from the frontend. what this means:
-     * - this widget's state will not be saved to the workflow
-     * - the widget was added on startup by some subclass of ComfyGraphNode
-     */
-    isVirtual: boolean
-}
-
-export type WidgetDrawState = {
-    isNodeExecuting: boolean
-}
-
-type NodeID = number;
-
-type WidgetStateOps = {
-    nodeAdded: (node: LGraphNode) => void,
-    nodeRemoved: (node: LGraphNode) => void,
-    configureFinished: (graph: LGraph) => void,
-    widgetStateChanged: (nodeId: number, widget: IWidget<any, any>) => void,
-    findWidgetByName: (nodeId: number, name: string) => WidgetUIState | null,
-    clear: () => void,
-}
-
-export type WidgetStateStore = Record<NodeID, WidgetUIState[]>;
-type WritableWidgetStateStore = Writable<WidgetStateStore> & WidgetStateOps;
-
-const store: Writable<WidgetStateStore> = writable({})
-
-function clear() {
-    store.set({})
-}
-
-function nodeAdded(node: LGraphNode) {
-    let state = get(store)
-
-    if (node.widgets) {
-        for (const [index, widget] of node.widgets.entries()) {
-            if (!state[node.id])
-                state[node.id] = []
-            let isVirtual = false;
-            if ("isVirtual" in widget)
-                isVirtual = (widget as ComfyWidget<any, any>).isVirtual;
-            state[node.id].push({ index, node, widget, value: writable(widget.value), isVirtual: isVirtual })
-        }
-    }
-
-    console.debug("NODEADDED", state)
-
-    store.set(state);
-}
-
-function nodeRemoved(node: LGraphNode) {
-    const state = get(store)
-    delete state[node.id]
-    store.set(state)
-}
-
-function widgetStateChanged(nodeId: number, widget: IWidget<any, any>) {
-    const state = get(store)
-    const entries = state[nodeId]
-    if (entries) {
-        let widgetState = entries.find(e => e.widget === widget);
-        if (widgetState) {
-            widgetState.value.set(widget.value);
-            store.set(state);
-        }
-        else {
-            console.error("Widget state changed and node was found, but widget was not found in state!", widget, widget.node, entries)
-        }
-    }
-    else {
-        console.error("Widget state changed but node was not found in state!", widget, widget.node)
-    }
-}
-
-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].isVirtual) {
-                    state[node.id][i].value.set(value);
-                }
-                else {
-                    console.log("Skip virtual widget", node.id, node.type, state[node.id][i].widget)
-                }
-            }
-        }
-    }
-
-    store.set(state)
-}
-
-function findWidgetByName(nodeId: number, name: string): WidgetUIState | null {
-    let state = get(store);
-
-    if (!(nodeId in state))
-        return null;
-
-    return state[nodeId].find((v) => v.widget.name === name);
-}
-
-const widgetStateStore: WritableWidgetStateStore =
-{
-    ...store,
-    nodeAdded,
-    nodeRemoved,
-    widgetStateChanged,
-    configureFinished,
-    findWidgetByName,
-    clear
-}
-export default widgetStateStore;
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6f24cad..c495cea 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,7 +2,7 @@ import ComfyApp from "./components/ComfyApp";
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
 import TextWidget from "$lib/widgets/TextWidget.svelte";
- import widgetState, { type WidgetDrawState, type WidgetUIState } from "$lib/stores/widgetState";
+import { type WidgetUIState } from "$lib/stores/nodeState";
 
 export function download(filename: string, text: string, type: string = "text/plain") {
     const blob = new Blob([text], { type: type });
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 36a0103..e49693a 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
- import type { WidgetDrawState, WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
+ import type { WidgetDrawState, WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { BlockTitle } from "@gradio/atoms";
  import { Dropdown } from "@gradio/form";
  import { get } from "svelte/store";
diff --git a/src/lib/widgets/ComfyGalleryWidget.svelte b/src/lib/widgets/ComfyGalleryWidget.svelte
index ef8228a..0e466c4 100644
--- a/src/lib/widgets/ComfyGalleryWidget.svelte
+++ b/src/lib/widgets/ComfyGalleryWidget.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { ImageViewer } from "$lib/ImageViewer";
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
+ import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { Block } from "@gradio/atoms";
  import { Gallery } from "@gradio/gallery";
  import type { Styles } from "@gradio/utils";
diff --git a/src/lib/widgets/ComfyValueControlWidget.ts b/src/lib/widgets/ComfyValueControlWidget.ts
index 065d6f9..3556d9c 100644
--- a/src/lib/widgets/ComfyValueControlWidget.ts
+++ b/src/lib/widgets/ComfyValueControlWidget.ts
@@ -2,7 +2,7 @@ import type { IEnumWidget, IEnumWidgetOptions, INumberWidget, LGraphNode, Widget
 import ComfyWidget from "./ComfyWidget";
 import type { ComfyImageResult } from "$lib/nodes/ComfySaveImageNode";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
-import widgetState from "$lib/stores/widgetState"
+import nodeState from "$lib/stores/nodeState"
 
 export interface ComfyValueControlWidgetOptions extends IEnumWidgetOptions {
 }
@@ -50,6 +50,6 @@ export default class ComfyValueControlWidget extends ComfyWidget<ComfyValueContr
 		if (this.targetWidget.value > max)
 			this.targetWidget.value = max;
 
-        widgetState.widgetStateChanged(this.node.id, this.targetWidget);
+        nodeState.widgetStateChanged(this.node.id, this.targetWidget);
     }
 }
diff --git a/src/lib/widgets/ComfyWidget.ts b/src/lib/widgets/ComfyWidget.ts
index eec08ab..06bc42c 100644
--- a/src/lib/widgets/ComfyWidget.ts
+++ b/src/lib/widgets/ComfyWidget.ts
@@ -1,6 +1,6 @@
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
 import type { IWidget, LGraphNode, SerializedLGraphNode, Vector2, WidgetCallback, WidgetTypes } from "@litegraph-ts/core";
-import widgetState from "$lib/stores/widgetState";
+import nodeState from "$lib/stores/nodeState";
 
 export default abstract class ComfyWidget<T = any, V = any> implements IWidget<T, V> {
     name: string;
@@ -27,7 +27,7 @@ export default abstract class ComfyWidget<T = any, V = any> implements IWidget<T
 
     setValue(value: V) {
         this.value = value;
-        widgetState.widgetStateChanged(this.node.id, this);
+        nodeState.widgetStateChanged(this.node.id, this);
     }
 
     draw?(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, posY: number, height: number): void;
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index 20f1680..f0fd27d 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
+ import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { Range } from "@gradio/form";
  import { get } from "svelte/store";
  export let item: WidgetUIState | null = null;
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index ba3a88b..960ac4c 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/widgetState";
+ import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { TextBox } from "@gradio/form";
  export let item: WidgetUIState | null = null;
  let itemValue: WidgetUIStateStore | null = null;
diff --git a/src/mobile/GenToolbar.svelte b/src/mobile/GenToolbar.svelte
index b332d99..ab265e0 100644
--- a/src/mobile/GenToolbar.svelte
+++ b/src/mobile/GenToolbar.svelte
@@ -5,7 +5,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import widgetState from "$lib/stores/widgetState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
diff --git a/src/mobile/routes/home.svelte b/src/mobile/routes/home.svelte
index 5d61f2d..417d14d 100644
--- a/src/mobile/routes/home.svelte
+++ b/src/mobile/routes/home.svelte
@@ -5,7 +5,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import widgetState from "$lib/stores/widgetState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
@@ -47,16 +46,11 @@
          return
      app = $uiState.app = new ComfyApp();
 
-     // TODO dedup
      app.eventBus.on("nodeAdded", nodeState.nodeAdded);
      app.eventBus.on("nodeRemoved", nodeState.nodeRemoved);
      app.eventBus.on("configured", nodeState.configureFinished);
      app.eventBus.on("cleared", nodeState.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);
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
 
diff --git a/src/mobile/routes/list-subworkflows.svelte b/src/mobile/routes/list-subworkflows.svelte
index 98f6706..e915ca1 100644
--- a/src/mobile/routes/list-subworkflows.svelte
+++ b/src/mobile/routes/list-subworkflows.svelte
@@ -5,7 +5,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import widgetState from "$lib/stores/widgetState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
diff --git a/src/mobile/routes/subworkflow.svelte b/src/mobile/routes/subworkflow.svelte
index 25b807d..5e01515 100644
--- a/src/mobile/routes/subworkflow.svelte
+++ b/src/mobile/routes/subworkflow.svelte
@@ -5,7 +5,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import widgetState from "$lib/stores/widgetState";
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
@@ -29,7 +28,7 @@
 <Page name="subworkflow">
     <Navbar title="Workflow {subworkflowID}" backLink="Back" />
 
-    {#each Object.entries($widgetState) as [id, ws]}
+    {#each Object.entries($nodeState) as [id, ws]}
         {@const node = app.lGraph.getNodeById(id)}
         <div class:is-executing={$queueState.runningNodeId === node.id}>
             <Block>
@@ -38,7 +37,7 @@
                         {node.title}
                     </BlockTitle>
                 </label>
-                {#each $widgetState[id] as item}
+                {#each $nodeState[id].widgetStates as item}
                     <svelte:component this={getComponentForWidgetState(item)} {item} />
                 {/each}
             </Block>
diff --git a/tsconfig.json b/tsconfig.json
index 0c74860..4f62860 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,12 @@
     "module": "ESNext",
     "resolveJsonModule": true,
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "baseUrl": "./src",
+    "paths": {
+      "$lib": ["lib"],
+      "$lib/*": ["lib/*"]
+    }
   },
   "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
   "references": [{ "path": "./tsconfig.node.json" }]

From 52fb1d7001b528227b3ab1be54c34eef80615b9b Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 04:01:49 -0700
Subject: [PATCH 03/27] Widget instead of node arrangement

---
 src/lib/components/ComfyPane.svelte       | 177 -------------------
 src/lib/components/ComfyUIPane.svelte     | 107 +++++-------
 src/lib/components/ComfyUIPane.ts         |   7 -
 src/lib/components/WidgetContainer.svelte | 198 ++++++++++++++++++++++
 src/lib/stores/layoutState.ts             |  65 +++++++
 src/lib/stores/uiState.ts                 |   7 +-
 6 files changed, 310 insertions(+), 251 deletions(-)
 delete mode 100644 src/lib/components/ComfyPane.svelte
 delete mode 100644 src/lib/components/ComfyUIPane.ts
 create mode 100644 src/lib/components/WidgetContainer.svelte
 create mode 100644 src/lib/stores/layoutState.ts

diff --git a/src/lib/components/ComfyPane.svelte b/src/lib/components/ComfyPane.svelte
deleted file mode 100644
index 0233f0f..0000000
--- a/src/lib/components/ComfyPane.svelte
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts">
- import { onDestroy } from "svelte";
- import { get } from "svelte/store"
- import { Block, BlockTitle } from "@gradio/atoms";
- import { Move } from 'radix-icons-svelte';
- import queueState from "$lib/stores/queueState";
- import nodeState from "$lib/stores/nodeState";
- import uiState from "$lib/stores/uiState";
-
- import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
-
- import {fade} from 'svelte/transition';
- // notice - fade in works fine but don't add svelte's fade-out (known issue)
- import {cubicIn} from 'svelte/easing';
- import { flip } from 'svelte/animate';
- import ComfyApp from "./ComfyApp";
- import type { LGraphNode } from "@litegraph-ts/core";
- import type { DragItem } from "./ComfyUIPane";
- import { getComponentForWidgetState } from "$lib/utils"
-
- export let dragItems: DragItem[] = [];
- let dragDisabled = true;
- let unlockUI = false;
- const flipDurationMs = 200;
-
- $: dragDisabled = !$uiState.unlocked;
-
- const handleConsider = evt => {
-     dragItems = evt.detail.items;
-     // console.log(dragItems);
- };
- const handleFinalize = evt => {
-     dragItems = evt.detail.items;
-     // Ensure dragging is stopped on drag finish
-     dragDisabled = true;
- };
-
- const startDrag = () => {
-     if (!$uiState.unlocked)
-         return
-     dragDisabled = false;
- };
- const stopDrag = () => {
-     if (!$uiState.unlocked)
-         return
-     dragDisabled = true;
- };
-
- const unsubscribe = nodeState.subscribe(state => {
-     dragItems = dragItems.filter(item => item.node.id in state);
- });
-
- onDestroy(unsubscribe);
-
- $: if ($queueState) {
-     for (let dragItem of dragItems) {
-         dragItem.isNodeExecuting = $queueState.runningNodeId === dragItem.node.id;
-     }
-     dragItems = dragItems;
- }
-
- function updateNodeName(node: LGraphNode, value: string) {
-     nodeState.nodeStateChanged(node);
- }
-</script>
-
-
-<div class="v-pane"
-     use:dndzone="{{ items: dragItems, dragDisabled, flipDurationMs }}"
-     on:consider="{handleConsider}"
-     on:finalize="{handleFinalize}"
->
-    {#each dragItems as dragItem(dragItem.id)}
-        {@const node = dragItem.node}
-        {@const id = node.id}
-        <div class="animation-wrapper" class:is-executing={dragItem.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
-            <Block>
-                    <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
-                        <BlockTitle>
-                            {#if $uiState.unlocked}
-                                <input class="edit-title" bind:value={dragItem.node.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
-                            {:else}
-                                {node.title}
-                            {/if}
-                            {#if node.title !== node.type}
-                                <span class="node-type">({node.type})</span>
-                            {/if}
-                        </BlockTitle>
-                    </label>
-                    {#each $nodeState[id].widgetStates as item}
-                        <svelte:component this={getComponentForWidgetState(item)} {item} />
-                        {#if dragItem[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
-                        {/if}
-                    {/each}
-                    {#if $uiState.unlocked}
-                        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-                    {/if}
-            </Block>
-        </div>
-    {/each}
-</div>
-
-<style>
- .v-pane {
-     border: 1px solid grey;
-     float: left;
-     height: 100%;
-     overflow: auto;
-     position: relative;
-     width: 33%;
- }
-
- .is-executing :global(.block) {
-     border: 5px dashed var(--color-green-600) !important;
- }
-
- .handle {
-     cursor: grab;
-     z-index: 99999;
-     position: absolute;
-     right: 0;
-     top: 0;
-     width: 100%;
-     height: 100%;
- }
-
- .handle:hover {
-     background-color: #add8e680;
- }
-
- .drag-item-shadow {
-     position: absolute;
-     top: 0; left:0; right: 0; bottom: 0;
-     visibility: visible;
-     border: 1px dashed grey;
-     background: lightblue;
-     opacity: 0.5;
-     margin: 0;
- }
-
- .node-type {
-     font-size: smaller;
-     color: var(--neutral-400);
- }
-
- .edit-title-label {
-     position: relative;
-     z-index: 100000;
- }
-
- .edit-title {
-     z-index: 100000;
-     display: block;
-     position: relative;
-     outline: none !important;
-     box-shadow: var(--input-shadow);
-     border: var(--input-border-width) solid var(--input-border-color);
-     border-radius: var(--input-radius);
-     background: var(--input-background-fill);
-     padding: var(--input-padding);
-     width: 100%;
-     color: var(--body-text-color);
-     font-weight: var(--input-text-weight);
-     font-size: var(--input-text-size);
-     line-height: var(--line-sm);
- }
-
- .edit-title:focus {
-     box-shadow: var(--input-shadow-focus);
-     border-color: var(--input-border-color-focus);
- }
-
- .edit-title::placeholder {
-     color: var(--input-placeholder-color);
- }
-</style>
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 962c878..29df71d 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -4,101 +4,76 @@
  import type { IWidget } from "@litegraph-ts/core";
  import ComfyApp  from "./ComfyApp";
  import type { SerializedPanes } from "./ComfyApp"
- import ComfyPane from "./ComfyPane.svelte";
+ import WidgetContainer from "./WidgetContainer.svelte";
  import nodeState from "$lib/stores/nodeState";
-	import type { DragItem } from "./ComfyUIPane";
+ import layoutState, { type ContainerLayout, type DragItem } from "$lib/stores/layoutState";
 
  export let app: ComfyApp;
  let dragConfigured: boolean = false;
  export let dragItems: DragItem[][] = []
 
  export let totalId = 0;
-
- function findLeastPopulatedPaneIndex(): number {
-     let minWidgetCount = 2 ** 64;
-     let minIndex = 0;
-     let state = get(nodeState);
-     for (let i = 0; i < dragItems.length; i++) {
-         let widgetCount = 0;
-         for (let j = 0; j < dragItems[i].length; j++) {
-             const nodeID = dragItems[i][j].node.id;
-             widgetCount += state[nodeID].widgetStates.length;
-         }
-         if (widgetCount < minWidgetCount) {
-             minWidgetCount = widgetCount
-             minIndex = i;
-         }
-     }
-     return minIndex
- }
-
- function addUIForNewNode(node: LGraphNode, paneIndex?: number) {
-     if (!paneIndex)
-         paneIndex = findLeastPopulatedPaneIndex();
-     dragItems[paneIndex].push({ id: totalId++, node: node });
- }
-
- $: if(app && !dragConfigured) {
-     dragConfigured = true;
-     app.eventBus.on("nodeAdded", addUIForNewNode);
- }
+ //
+ //  function addUIForNewNode(node: LGraphNode, paneIndex?: number) {
+ //      if (!paneIndex)
+ //          paneIndex = findLeastPopulatedPaneIndex();
+ //      dragItems[paneIndex].push({ id: totalId++, node: node });
+ //  }
+ //
+ //  $: if(app && !dragConfigured) {
+ //      dragConfigured = true;
+ //      app.eventBus.on("nodeAdded", addUIForNewNode);
+ //  }
 
  /*
   * Serialize UI panel order so it can be restored when workflow is loaded
   */
  export function serialize(): any {
-     let panels = []
-     for (let i = 0; i < dragItems.length; i++) {
-         panels[i] = [];
-         for (let j = 0; j < dragItems[i].length; j++) {
-             panels[i].push({ nodeId: dragItems[i][j].node.id });
-         }
-     }
-     return {
-         panels
-     }
  }
 
  export function restore(panels: SerializedPanes) {
-     let nodeIdToDragItem: Record<number, DragItem> = {};
-     for (let i = 0; i < dragItems.length; i++) {
-         for (const dragItem of dragItems[i]) {
-             nodeIdToDragItem[dragItem.node.id] = dragItem
+     const a: ContainerLayout = {
+         type: "container",
+         id: "0",
+         attrs: {
+             title: "root!",
+             direction: "horizontal"
          }
      }
+     $layoutState.root = a;
+     $layoutState.children[0] = [
+         {
+             type: "widget",
+             id: "1",
+             nodeId: 7,
+             widgetName: "text",
+             attrs: {
 
-     for (let i = 0; i < panels.panels.length; i++) {
-         dragItems[i].length = 0;
-         for (const panel of panels.panels[i]) {
-             const dragItem = nodeIdToDragItem[panel.nodeId];
-             if (dragItem) {
-                 delete nodeIdToDragItem[panel.nodeId];
-                 dragItems[i].push(dragItem)
              }
-         }
-     }
+         },
+         {
+             type: "widget",
+             id: "2",
+             nodeId: 6,
+             widgetName: "text",
+             attrs: {
 
-     // Put everything left over into other columns
-     if (Object.keys(nodeIdToDragItem).length > 0) {
-         console.warn("Extra panels without ordering found", nodeIdToDragItem, panels)
-         for (const nodeId in nodeIdToDragItem) {
-             const dragItem = nodeIdToDragItem[nodeId];
-             const paneIndex = findLeastPopulatedPaneIndex();
-             dragItems[paneIndex].push(dragItem);
-         }
-     }
+             }
+         },
+     ]
+     $layoutState.children[1] = []
+     $layoutState.children[2] = []
  }
 </script>
 
 <div id="comfy-ui-panes" >
-    <ComfyPane bind:dragItems={dragItems[0]} />
-    <ComfyPane bind:dragItems={dragItems[1]} />
-    <ComfyPane bind:dragItems={dragItems[2]} />
+    <WidgetContainer bind:dragItem={$layoutState.root} />
 </div>
 
 <style>
  #comfy-ui-panes {
      width: 100%;
      height: 100%;
+     overflow: scroll;
  }
 </style>
diff --git a/src/lib/components/ComfyUIPane.ts b/src/lib/components/ComfyUIPane.ts
deleted file mode 100644
index c555e03..0000000
--- a/src/lib/components/ComfyUIPane.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { LGraphNode } from "@litegraph-ts/core"
-
-export type DragItem = {
-    id: number,
-    node: LGraphNode,
-    isNodeExecuting?: boolean
-}
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
new file mode 100644
index 0000000..6c70a56
--- /dev/null
+++ b/src/lib/components/WidgetContainer.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+ import { onDestroy } from "svelte";
+ import { get } from "svelte/store"
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import { Move } from 'radix-icons-svelte';
+ import queueState from "$lib/stores/queueState";
+ import nodeState, { type WidgetUIState } from "$lib/stores/nodeState";
+ import uiState from "$lib/stores/uiState";
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
+ import ComfyApp from "./ComfyApp";
+ import type { LGraphNode } from "@litegraph-ts/core";
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { getComponentForWidgetState } from "$lib/utils"
+
+ export let dragItem: DragItem | null = null;
+ let container: ContainerLayout | null = null;
+ let widget: WidgetUIState | null = null;
+ let children: IDragItem[] | null = null;
+ let dragDisabled = true;
+ const flipDurationMs = 200;
+
+ $: if (dragItem) {
+     if (dragItem.type === "container") {
+         container = dragItem as ContainerLayout;
+         children = $layoutState.children[dragItem.id];
+         widget = null;
+     }
+     else if (dragItem.type === "widget") {
+         const widgetLayout = dragItem as WidgetLayout;
+         widget = nodeState.findWidgetByName(widgetLayout.nodeId, widgetLayout.widgetName)
+         children = null;
+         container = null;
+     }
+ }
+
+ $: dragDisabled = !$uiState.unlocked;
+
+ const handleConsider = evt => {
+     $layoutState.children[dragItem.id] = evt.detail.items;
+     children = $layoutState.children[dragItem.id];
+     // console.log(dragItems);
+ };
+ const handleFinalize = evt => {
+     $layoutState.children[dragItem.id] = evt.detail.items;
+     children = $layoutState.children[dragItem.id];
+     // Ensure dragging is stopped on drag finish
+     // dragDisabled = true;
+ };
+
+ const startDrag = () => {
+     if (!$uiState.unlocked)
+         return
+     // dragDisabled = false;
+ };
+ const stopDrag = () => {
+     if (!$uiState.unlocked)
+         return
+     // dragDisabled = true;
+ };
+
+ const unsubscribe = nodeState.subscribe(state => {
+     if (container) {
+         $layoutState.children[container.id] = $layoutState.children[container.id].filter(item => item.node.id in state);
+         children = $layoutState.children[container.id];
+     }
+ });
+
+ onDestroy(unsubscribe);
+
+ $: if ($queueState && widget) {
+     widget.isNodeExecuting = $queueState.runningNodeId === widget.nodeId;
+     children = $layoutState.children[widget.nodeId];
+ }
+
+ function updateNodeName(node: LGraphNode, value: string) {
+     nodeState.nodeStateChanged(node);
+ }
+</script>
+
+
+{#if container}
+    {@const node = container.node}
+    {@const id = container.id}
+    <Block>
+        <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+            <BlockTitle>
+                {#if $uiState.unlocked}
+                    <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
+                {:else}
+                    {container.attrs.title}
+                {/if}
+            </BlockTitle>
+        </label>
+        <div class="v-pane"
+             use:dndzone="{{ items: children, dragDisabled, flipDurationMs }}"
+             on:consider="{handleConsider}"
+             on:finalize="{handleFinalize}"
+        >
+			{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                <div class="animation-wrapper" class:is-executing={item.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
+                    <svelte:self dragItem={item}/>
+                    {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </Block>
+{:else if widget}
+    <svelte:component this={getComponentForWidgetState(widget)} item={widget} />
+    {#if $uiState.unlocked}
+        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+    {/if}
+{/if}
+
+<style>
+ .v-pane {
+     height: 100%;
+     width: 100%;
+     overflow-y: auto ;
+ }
+
+ .is-executing :global(.block) {
+     border: 5px dashed var(--color-green-600) !important;
+ }
+
+ .animation-wrapper {
+     position: relative;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle:hover {
+     background-color: #add8e680;
+ }
+
+ .drag-item-shadow {
+     position: absolute;
+     top: 0; left:0; right: 0; bottom: 0;
+     visibility: visible;
+     border: 1px dashed grey;
+     background: lightblue;
+     opacity: 0.5;
+     margin: 0;
+ }
+
+ .node-type {
+     font-size: smaller;
+     color: var(--neutral-400);
+ }
+
+ .edit-title-label {
+     position: relative;
+     z-index: var(--layer-1);
+ }
+
+ .edit-title {
+     z-index: var(--layer-1);
+     display: block;
+     position: relative;
+     outline: none !important;
+     box-shadow: var(--input-shadow);
+     border: var(--input-border-width) solid var(--input-border-color);
+     border-radius: var(--input-radius);
+     background: var(--input-background-fill);
+     padding: var(--input-padding);
+     width: 100%;
+     color: var(--body-text-color);
+     font-weight: var(--input-text-weight);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+ }
+
+ .edit-title:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ .edit-title::placeholder {
+     color: var(--input-placeholder-color);
+ }
+</style>
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
new file mode 100644
index 0000000..a169c46
--- /dev/null
+++ b/src/lib/stores/layoutState.ts
@@ -0,0 +1,65 @@
+import { get, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+import type ComfyApp from "$lib/components/ComfyApp"
+import type { LGraphNode, IWidget } from "@litegraph-ts/core"
+
+export type LayoutState = {
+    root: IDragItem | null,
+    children: Record<number, IDragItem[]>,
+}
+
+export type Properties = {
+    direction: string,
+}
+
+export interface IDragItem {
+    type: string,
+    id: number,
+    isNodeExecuting?: boolean,
+    properties: Properties
+}
+
+export interface ContainerLayout extends IDragItem {
+    type: "container",
+}
+
+export interface WidgetLayout extends IDragItem {
+    type: "widget",
+    nodeId: number,
+    widgetName: string
+}
+
+type LayoutStateOps = {
+    findDefaultContainerForInsertion: () => ContainerLayout | null,
+    reset: () => void,
+}
+
+export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
+const store: Writable<LayoutState> = writable({
+    root: null,
+    children: []
+})
+
+function findDefaultContainerForInsertion(): ContainerLayout | null {
+    const state = get(store);
+    if ("children" in state.root) {
+        const container = state.root as ContainerLayout;
+        const found = state.children[container.id].find((di) => {"children" in di})
+        if (found && "children" in found)
+            return found as ContainerLayout;
+        return container;
+    }
+    return null
+}
+
+function reset() {
+    // TODO
+}
+
+const uiStateStore: WritableLayoutStateStore =
+{
+    ...store,
+    findDefaultContainerForInsertion,
+    reset
+}
+export default uiStateStore;
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index 0fbb6b8..507232f 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -10,7 +10,12 @@ export type UIState = {
 }
 
 export type WritableUIStateStore = Writable<UIState>;
-const store: WritableUIStateStore = writable({ unlocked: false, graphLocked: true, nodesLocked:false })
+const store: WritableUIStateStore = writable(
+    {
+        graphLocked: true,
+        nodesLocked: false,
+        unlocked: true,
+    })
 
 const uiStateStore: WritableUIStateStore =
 {

From f62fa6912202a3b4278d2be5ada20af7cde8e08f Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 11:42:16 -0700
Subject: [PATCH 04/27] Autogenerate layout from graph

---
 src/lib/components/ComfyUIPane.svelte     |  51 ++----
 src/lib/components/WidgetContainer.svelte | 168 ++++++++++++--------
 src/lib/stores/layoutState.ts             | 179 ++++++++++++++++++++--
 src/lib/stores/uiState.ts                 |   2 +-
 src/lib/widgets/ComboWidget.svelte        |   2 +-
 5 files changed, 290 insertions(+), 112 deletions(-)

diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 29df71d..c06972d 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -10,9 +10,6 @@
 
  export let app: ComfyApp;
  let dragConfigured: boolean = false;
- export let dragItems: DragItem[][] = []
-
- export let totalId = 0;
  //
  //  function addUIForNewNode(node: LGraphNode, paneIndex?: number) {
  //      if (!paneIndex)
@@ -32,48 +29,32 @@
  }
 
  export function restore(panels: SerializedPanes) {
-     const a: ContainerLayout = {
-         type: "container",
-         id: "0",
-         attrs: {
-             title: "root!",
-             direction: "horizontal"
-         }
+     const id = 0;
+     $layoutState.root = layoutState.addContainer(null, { direction: "horizontal", showTitle: false });
+     const left = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
+     const right = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
+
+     for (const node of app.lGraph.computeExecutionOrder(false, null)) {
+         layoutState.nodeAdded(node)
      }
-     $layoutState.root = a;
-     $layoutState.children[0] = [
-         {
-             type: "widget",
-             id: "1",
-             nodeId: 7,
-             widgetName: "text",
-             attrs: {
-
-             }
-         },
-         {
-             type: "widget",
-             id: "2",
-             nodeId: 6,
-             widgetName: "text",
-             attrs: {
-
-             }
-         },
-     ]
-     $layoutState.children[1] = []
-     $layoutState.children[2] = []
+     console.warn($layoutState)
  }
 </script>
 
 <div id="comfy-ui-panes" >
-    <WidgetContainer bind:dragItem={$layoutState.root} />
+    <WidgetContainer bind:dragItem={$layoutState.root} classes={["root-container"]} />
 </div>
 
-<style>
+<style lang="scss">
  #comfy-ui-panes {
      width: 100%;
      height: 100%;
      overflow: scroll;
+
  }
+
+ #comfy-ui-panes > :global(.root-container > .block) {
+     padding: 0px;
+ }
+
 </style>
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 6c70a56..ce554a1 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
- import { onDestroy } from "svelte";
- import { get } from "svelte/store"
  import { Block, BlockTitle } from "@gradio/atoms";
- import { Move } from 'radix-icons-svelte';
  import queueState from "$lib/stores/queueState";
  import nodeState, { type WidgetUIState } from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
@@ -13,14 +10,15 @@
  // notice - fade in works fine but don't add svelte's fade-out (known issue)
  import {cubicIn} from 'svelte/easing';
  import { flip } from 'svelte/animate';
- import ComfyApp from "./ComfyApp";
- import type { LGraphNode } from "@litegraph-ts/core";
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
  import { getComponentForWidgetState } from "$lib/utils"
 
- export let dragItem: DragItem | null = null;
+ export let dragItem: IDragItem | null = null;
+ export let zIndex: number = 100;
+ export let classes: string[] = [];
  let container: ContainerLayout | null = null;
- let widget: WidgetUIState | null = null;
+ let widget: WidgetLayout | null = null;
+ let widgetState: WidgetUIState | null = null;
  let children: IDragItem[] | null = null;
  let dragDisabled = true;
  const flipDurationMs = 200;
@@ -28,12 +26,12 @@
  $: if (dragItem) {
      if (dragItem.type === "container") {
          container = dragItem as ContainerLayout;
-         children = $layoutState.children[dragItem.id];
+         children = $layoutState.allItems[dragItem.id].children;
          widget = null;
      }
      else if (dragItem.type === "widget") {
-         const widgetLayout = dragItem as WidgetLayout;
-         widget = nodeState.findWidgetByName(widgetLayout.nodeId, widgetLayout.widgetName)
+         widget = dragItem as WidgetLayout;
+         widgetState = nodeState.findWidgetByName(widget.nodeId, widget.widgetName)
          children = null;
          container = null;
      }
@@ -41,14 +39,13 @@
 
  $: dragDisabled = !$uiState.unlocked;
 
- const handleConsider = evt => {
-     $layoutState.children[dragItem.id] = evt.detail.items;
-     children = $layoutState.children[dragItem.id];
+ function handleConsider(evt: any) {
+     children = layoutState.updateChildren(dragItem, evt.detail.items)
      // console.log(dragItems);
  };
- const handleFinalize = evt => {
-     $layoutState.children[dragItem.id] = evt.detail.items;
-     children = $layoutState.children[dragItem.id];
+
+ function handleFinalize(evt: any) {
+     children = layoutState.updateChildren(dragItem, evt.detail.items)
      // Ensure dragging is stopped on drag finish
      // dragDisabled = true;
  };
@@ -64,66 +61,106 @@
      // dragDisabled = true;
  };
 
- const unsubscribe = nodeState.subscribe(state => {
-     if (container) {
-         $layoutState.children[container.id] = $layoutState.children[container.id].filter(item => item.node.id in state);
-         children = $layoutState.children[container.id];
-     }
- });
-
- onDestroy(unsubscribe);
-
  $: if ($queueState && widget) {
      widget.isNodeExecuting = $queueState.runningNodeId === widget.nodeId;
-     children = $layoutState.children[widget.nodeId];
- }
-
- function updateNodeName(node: LGraphNode, value: string) {
-     nodeState.nodeStateChanged(node);
+     children = $layoutState.allItems[widget.id].children;
  }
 </script>
 
 
-{#if container}
-    {@const node = container.node}
+{#if container && children}
     {@const id = container.id}
-    <Block>
-        <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
-            <BlockTitle>
-                {#if $uiState.unlocked}
-                    <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" on:input="{(v) => { updateNodeName(node, v) }}"/>
-                {:else}
-                    {container.attrs.title}
-                {/if}
-            </BlockTitle>
-        </label>
-        <div class="v-pane"
-             use:dndzone="{{ items: children, dragDisabled, flipDurationMs }}"
-             on:consider="{handleConsider}"
-             on:finalize="{handleFinalize}"
-        >
-			{#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                <div class="animation-wrapper" class:is-executing={item.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
-                    <svelte:self dragItem={item}/>
-                    {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
-                    {/if}
-                </div>
-            {/each}
-        </div>
-    </Block>
+    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}">
+        <Block>
+            {#if container.attrs.showTitle}
+                <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+                    <BlockTitle>
+                        {#if $uiState.unlocked}
+                            <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
+                        {:else}
+                            {container.attrs.title}
+                        {/if}
+                    </BlockTitle>
+                </label>
+            {/if}
+            <div class="v-pane"
+                 class:empty={children.length === 0}
+                 use:dndzone="{{ items: children, dragDisabled, flipDurationMs }}"
+                 on:consider="{handleConsider}"
+                 on:finalize="{handleFinalize}"
+            >
+                {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                    <div class="animation-wrapper" class:is-executing={item.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
+                        <svelte:self dragItem={item} zIndex={zIndex+1} />
+                        {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+            {#if $uiState.unlocked}
+                <div class="handle handle-container" style="z-index: {zIndex}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+            {/if}
+        </Block>
+    </div>
 {:else if widget}
-    <svelte:component this={getComponentForWidgetState(widget)} item={widget} />
+    <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
     {#if $uiState.unlocked}
-        <div class="handle" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+        <div class="handle handle-widget" style="z-index: {zIndex}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
     {/if}
 {/if}
 
-<style>
+<style lang="scss">
  .v-pane {
      height: 100%;
      width: 100%;
-     overflow-y: auto ;
+     overflow: visible;
+     display: flex;
+
+     &.empty {
+         border-width: 3px;
+         border-color: var(--color-grey-400);
+         border-radius: var(--block-radius);
+         background: var(--color-grey-300);
+         min-height: 50px;
+         border-style: dashed;
+     }
+ }
+
+ .container {
+     display: flex;
+
+     :global(.block) {
+         height: fit-content;
+     }
+
+     &.horizontal {
+         flex-wrap: wrap;
+         gap: var(--layout-gap);
+         width: var(--size-full);
+
+         .v-pane {
+             flex-direction: row;
+         }
+
+         > :global(*), > :global(.form > *) {
+             flex: 1 1 0%;
+             flex-wrap: wrap;
+             min-width: min(160px, 100%);
+         }
+     }
+
+     &.vertical {
+         position: relative;
+
+         .v-pane {
+             flex-direction: column;
+         }
+
+         > :global(*), > :global(.form > *), .v-pane {
+             width: var(--size-full);
+         }
+     }
  }
 
  .is-executing :global(.block) {
@@ -132,8 +169,7 @@
 
  .animation-wrapper {
      position: relative;
-     width: 100%;
-     height: 100%;
+     flex-grow: 1;
  }
 
  .handle {
@@ -146,10 +182,14 @@
      height: 100%;
  }
 
- .handle:hover {
+ .handle-widget:hover {
      background-color: #add8e680;
  }
 
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
  .drag-item-shadow {
      position: absolute;
      top: 0; left:0; right: 0; bottom: 0;
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index a169c46..86f8ead 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -2,21 +2,34 @@ import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
 import type { LGraphNode, IWidget } from "@litegraph-ts/core"
+import nodeState from "$lib/state/nodeState";
+import type { NodeStateStore } from './nodeState';
+
+type DragItemEntry = {
+    dragItem: IDragItem,
+    children: IDragItem[] | null,
+    parent: IDragItem | null
+}
 
 export type LayoutState = {
     root: IDragItem | null,
-    children: Record<number, IDragItem[]>,
+    allItems: Record<DragItemID, DragItemEntry>,
+    currentId: number,
 }
 
-export type Properties = {
+export type Attributes = {
     direction: string,
+    title: string,
+    showTitle: boolean,
+    classes: string,
+    associatedNode: number | null
 }
 
 export interface IDragItem {
     type: string,
-    id: number,
+    id: DragItemID,
     isNodeExecuting?: boolean,
-    properties: Properties
+    attrs: Attributes
 }
 
 export interface ContainerLayout extends IDragItem {
@@ -29,37 +42,181 @@ export interface WidgetLayout extends IDragItem {
     widgetName: string
 }
 
+type DragItemID = string;
+
 type LayoutStateOps = {
+    addContainer: (parentId: DragItemID, attrs: Partial<Attributes>) => ContainerLayout,
     findDefaultContainerForInsertion: () => ContainerLayout | null,
-    reset: () => void,
+    addWidget: (parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes>) => WidgetLayout,
+    updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
+    nodeAdded: (node: LGraphNode) => void,
+    nodeRemoved: (node: LGraphNode) => void,
+    clear: () => void,
+    resetLayout: () => void,
 }
 
 export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
 const store: Writable<LayoutState> = writable({
     root: null,
-    children: []
+    allItems: [],
+    currentId: 0
 })
 
 function findDefaultContainerForInsertion(): ContainerLayout | null {
     const state = get(store);
-    if ("children" in state.root) {
+
+    if (state.root === null) {
+        // Should never happen
+        throw "Root container was null!";
+    }
+
+    if (state.root.type === "container") {
         const container = state.root as ContainerLayout;
-        const found = state.children[container.id].find((di) => {"children" in di})
-        if (found && "children" in found)
+        const children: IDragItem[] = state.allItems[container.id]?.children || []
+        const found = children.find((di) =>  di.type === "container" )
+        if (found && found.type === "container")
             return found as ContainerLayout;
         return container;
     }
+
     return null
 }
 
-function reset() {
+function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> = {}): ContainerLayout {
+    const state = get(store);
+    const dragItem: ContainerLayout = {
+        type: "container",
+        id: `${state.currentId++}`,
+        attrs: {
+            title: "Container",
+            showTitle: true,
+            direction: "vertical",
+            classes: "",
+            associatedNode: null,
+            ...attrs
+        }
+    }
+    const parent = parentId ? state.allItems[parentId] : null;
+    const entry: DragItemEntry = { dragItem, children: [], parent: parent?.dragItem };
+    state.allItems[dragItem.id] = entry;
+    if (parent) {
+        parent.children ||= []
+        parent.children.push(dragItem)
+    }
+    store.set(state)
+    return dragItem;
+}
+
+function addWidget(parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes> = {}): WidgetLayout {
+    const state = get(store);
+    const dragItem: WidgetLayout = {
+        type: "widget",
+        id: `${state.currentId++}`,
+        nodeId: node.id,
+        widgetName: widget.name, // TODO name and displayName
+        attrs: {
+            title: widget.name,
+            showTitle: true,
+            direction: "horizontal",
+            classes: "",
+            associatedNode: null,
+            ...attrs
+        }
+    }
+    const parent = state.allItems[parentId]
+    const entry: DragItemEntry = { dragItem, children: [], parent: parent.dragItem };
+    state.allItems[dragItem.id] = entry;
+    parent.children ||= []
+    parent.children.push(dragItem)
+    store.set(state)
+    return dragItem;
+}
+
+function updateChildren(parent: IDragItem, children: IDragItem[]): IDragItem[] {
+    const state = get(store);
+    state.allItems[parent.id].children = children;
+    for (const child of children) {
+        state.allItems[child.id].parent = parent;
+    }
+    store.set(state)
+    return children
+}
+
+function nodeAdded(node: LGraphNode) {
+    const parent = findDefaultContainerForInsertion();
+    // Add default node panel containing all widgets
+    if (node.widgets && node.widgets.length > 0) {
+        const container = addContainer(parent.id, { title: node.title, direction: "vertical", associatedNode: node.id });
+        for (const widget of node.widgets) {
+            addWidget(container.id, node, widget, { associatedNode: node.id });
+        }
+    }
+}
+
+function removeEntry(state: LayoutState, id: DragItemID) {
+    const entry = state.allItems[id]
+    if (entry.children && entry.children.length > 0) {
+        console.error(entry)
+        throw `Tried removing entry ${id} but it still had children!`
+    }
+    const parent = entry.parent;
+    if (parent) {
+        const parentEntry = state.allItems[parent.id];
+        parentEntry.children = parentEntry.children.filter(item => item.id !== id)
+    }
+    delete state.allItems[id]
+}
+
+function nodeRemoved(node: LGraphNode) {
+    const state = get(store)
+
+    // Remove widgets bound to the node
+    let del = Object.entries(state.allItems).filter(pair =>
+        pair[1].dragItem.type === "widget"
+        && pair[1].dragItem.attrs.associatedNode === node.id)
+    for (const id in del) {
+        console.debug("[layoutState] Remove widget", id, state.allItems[id])
+        removeEntry(state, id)
+    }
+
+    const isAssociatedContainer = (dragItem: IDragItem) =>
+        dragItem.type === "container"
+        && dragItem.attrs.associatedNode === node.id;
+
+    let delContainers = []
+
+    // Remove widget from all children lists
+    for (const entry of Object.values(state.allItems)) {
+        if (entry.children?.length === 0 && isAssociatedContainer(entry.dragItem))
+            delContainers.push(entry.dragItem.id)
+    }
+
+    // Remove empty containers bound to the node
+    for (const id in delContainers) {
+        console.debug("[layoutState] Remove container", id, state.allItems[id])
+        removeEntry(state, id)
+    }
+
+    store.set(state)
+}
+
+function clear() {
+}
+
+function resetLayout() {
     // TODO
 }
 
 const uiStateStore: WritableLayoutStateStore =
 {
     ...store,
+    addContainer,
+    addWidget,
     findDefaultContainerForInsertion,
-    reset
+    updateChildren,
+    nodeAdded,
+    nodeRemoved,
+    clear,
+    resetLayout
 }
 export default uiStateStore;
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index 507232f..43cd4d8 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -14,7 +14,7 @@ const store: WritableUIStateStore = writable(
     {
         graphLocked: true,
         nodesLocked: false,
-        unlocked: true,
+        unlocked: false,
     })
 
 const uiStateStore: WritableUIStateStore =
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index e49693a..b8a36bb 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -45,6 +45,6 @@
  }
 
  :global(.svelte-select-list) {
-     z-index: var(--layer-5) !important;
+     z-index: var(--layer-top) !important;
  }
 </style>

From 42f6f12ceb7f06276cc77a28bba3d07ef298c30c Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 13:08:59 -0700
Subject: [PATCH 05/27] Fixing UI editing mode

---
 src/lib/components/ComfyApp.svelte        |  7 +-
 src/lib/components/ComfyUIPane.svelte     |  4 --
 src/lib/components/WidgetContainer.svelte | 85 ++++++++++++++++-------
 src/lib/stores/layoutState.ts             |  3 +
 src/lib/stores/uiState.ts                 |  6 +-
 5 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index b13a927..8f711da 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -169,7 +169,12 @@
         </Button>
         <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
         <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/>
-        <Checkbox label="Enable UI Editing" bind:value={$uiState.unlocked}/>
+        <label for="enable-ui-editing">Enable UI Editing</label>
+        <select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>
+            <option value="disabled">Disabled</option>
+            <option value="widgets">Widgets</option>
+            <option value="containers">Containers</option>
+        </select>
     </div>
     <LightboxModal />
 </div>
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index c06972d..dd0cf7d 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -53,8 +53,4 @@
 
  }
 
- #comfy-ui-panes > :global(.root-container > .block) {
-     padding: 0px;
- }
-
 </style>
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index ce554a1..65b51ea 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -14,14 +14,15 @@
  import { getComponentForWidgetState } from "$lib/utils"
 
  export let dragItem: IDragItem | null = null;
- export let zIndex: number = 100;
+ export let zIndex: number = 0;
  export let classes: string[] = [];
+ export let isRoot: boolean = false;
+ let dragDisabled: boolean = false;
  let container: ContainerLayout | null = null;
  let widget: WidgetLayout | null = null;
  let widgetState: WidgetUIState | null = null;
  let children: IDragItem[] | null = null;
- let dragDisabled = true;
- const flipDurationMs = 200;
+ const flipDurationMs = 100;
 
  $: if (dragItem) {
      if (dragItem.type === "container") {
@@ -37,8 +38,6 @@
      }
  }
 
- $: dragDisabled = !$uiState.unlocked;
-
  function handleConsider(evt: any) {
      children = layoutState.updateChildren(dragItem, evt.detail.items)
      // console.log(dragItems);
@@ -47,18 +46,13 @@
  function handleFinalize(evt: any) {
      children = layoutState.updateChildren(dragItem, evt.detail.items)
      // Ensure dragging is stopped on drag finish
-     // dragDisabled = true;
  };
 
  const startDrag = () => {
-     if (!$uiState.unlocked)
-         return
-     // dragDisabled = false;
+     return
  };
  const stopDrag = () => {
-     if (!$uiState.unlocked)
-         return
-     // dragDisabled = true;
+     return
  };
 
  $: if ($queueState && widget) {
@@ -70,12 +64,14 @@
 
 {#if container && children}
     {@const id = container.id}
-    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}">
+    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
+         class:root-container={isRoot}
+         class:container-edit-outline={$uiState.uiEditMode === "containers" && zIndex > 1}>
         <Block>
             {#if container.attrs.showTitle}
-                <label for={String(id)} class={$uiState.unlocked ? "edit-title-label" : ""}>
+                <label for={String(id)} class={$uiState.uiEditMode === "containers" ? "edit-title-label" : ""}>
                     <BlockTitle>
-                        {#if $uiState.unlocked}
+                        {#if $uiState.uiEditMode === "containers"}
                             <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
                         {:else}
                             {container.attrs.title}
@@ -85,12 +81,22 @@
             {/if}
             <div class="v-pane"
                  class:empty={children.length === 0}
-                 use:dndzone="{{ items: children, dragDisabled, flipDurationMs }}"
+                 class:edit={$uiState.uiEditMode === "containers" && zIndex > 1}
+                 use:dndzone="{{
+                              items: children,
+                              flipDurationMs,
+                              morphDisabled: true,
+                              dropFromOthersDisabled: zIndex === 0,
+                              dragDisabled: zIndex === 0
+                              }}"
                  on:consider="{handleConsider}"
                  on:finalize="{handleFinalize}"
             >
                 {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                    <div class="animation-wrapper" class:is-executing={item.isNodeExecuting} animate:flip={{duration:flipDurationMs}}>
+                    <div class="animation-wrapper"
+                         class:edit={$uiState.unlocked}
+                         class:is-executing={item.isNodeExecuting}
+                         animate:flip={{duration:flipDurationMs}}>
                         <svelte:self dragItem={item} zIndex={zIndex+1} />
                         {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                             <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
@@ -98,15 +104,17 @@
                     </div>
                 {/each}
             </div>
-            {#if $uiState.unlocked}
-                <div class="handle handle-container" style="z-index: {zIndex}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+            {#if $uiState.uiEditMode === "containers" && zIndex > 1}
+                <div class="handle handle-container" style="z-index: {zIndex+100}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
             {/if}
         </Block>
     </div>
 {:else if widget}
-    <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
-    {#if $uiState.unlocked}
-        <div class="handle handle-widget" style="z-index: {zIndex}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+    <div class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
+        <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
+    </div>
+    {#if $uiState.uiEditMode ==="widgets" && zIndex > 1}
+        <div class="handle handle-widget" style="z-index: {zIndex+100}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
     {/if}
 {/if}
 
@@ -117,12 +125,16 @@
      overflow: visible;
      display: flex;
 
+     .edit {
+         min-width: 200px;
+     }
+
      &.empty {
          border-width: 3px;
          border-color: var(--color-grey-400);
          border-radius: var(--block-radius);
          background: var(--color-grey-300);
-         min-height: 50px;
+         min-height: 200px;
          border-style: dashed;
      }
  }
@@ -134,6 +146,10 @@
          height: fit-content;
      }
 
+     &.container-edit-outline {
+         /* width: 20rem; */
+     }
+
      &.horizontal {
          flex-wrap: wrap;
          gap: var(--layout-gap);
@@ -169,7 +185,10 @@
 
  .animation-wrapper {
      position: relative;
-     flex-grow: 1;
+
+     &:not(.edit) {
+         flex-grow: 1;
+     }
  }
 
  .handle {
@@ -235,4 +254,22 @@
  .edit-title::placeholder {
      color: var(--input-placeholder-color);
  }
+
+ .container-edit-outline > :global(.block) {
+     border-color: var(--color-pink-500);
+     border-width: 2px;
+     border-style: dashed !important;
+     margin: 0.2em;
+     padding: 1.2em;
+ }
+
+ .widget-edit-outline {
+     border: 2px dashed var(--color-blue-400);
+     margin: 0.2em;
+     padding: 0.2em;
+ }
+
+ .root-container > :global(.block) {
+     padding: 0px;
+ }
 </style>
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 86f8ead..4ff3c59 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -4,6 +4,7 @@ import type ComfyApp from "$lib/components/ComfyApp"
 import type { LGraphNode, IWidget } from "@litegraph-ts/core"
 import nodeState from "$lib/state/nodeState";
 import type { NodeStateStore } from './nodeState';
+ import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
 
 type DragItemEntry = {
     dragItem: IDragItem,
@@ -136,6 +137,8 @@ function updateChildren(parent: IDragItem, children: IDragItem[]): IDragItem[] {
     const state = get(store);
     state.allItems[parent.id].children = children;
     for (const child of children) {
+        if (child.id === SHADOW_PLACEHOLDER_ITEM_ID)
+            continue;
         state.allItems[child.id].parent = parent;
     }
     store.set(state)
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index 43cd4d8..4045f9b 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -2,11 +2,13 @@ import { writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
 
+export type UIEditMode = "disabled" | "widgets" | "containers" | "layout";
+
 export type UIState = {
     app: ComfyApp,
     nodesLocked: boolean,
     graphLocked: boolean,
-    unlocked: boolean,
+    uiEditMode: UIEditMode
 }
 
 export type WritableUIStateStore = Writable<UIState>;
@@ -14,7 +16,7 @@ const store: WritableUIStateStore = writable(
     {
         graphLocked: true,
         nodesLocked: false,
-        unlocked: false,
+        uiEditMode: "disabled",
     })
 
 const uiStateStore: WritableUIStateStore =

From 311ee192b2e997429c82b0f0ba10168e17bf8103 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 13:47:22 -0700
Subject: [PATCH 06/27] Selection thing

---
 src/lib/components/ComfyApp.svelte        |  4 ++
 src/lib/components/WidgetContainer.svelte | 48 +++++++++++++++++------
 src/lib/stores/layoutState.ts             |  4 +-
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 8f711da..30896d3 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -8,6 +8,7 @@
  import { Checkbox } from "@gradio/form"
  import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
+ import layoutState from "$lib/stores/layoutState";
  import { ImageViewer } from "$lib/ImageViewer";
  import { download } from "$lib/utils"
 
@@ -39,6 +40,9 @@
  $: if (app) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked;
  $: if (app) app.lCanvas.allow_interaction = !$uiState.graphLocked;
 
+ $: if ($uiState.uiEditMode)
+     $layoutState.currentSelection = []
+
  let graphSize = null;
 
  function toggleGraph() {
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 65b51ea..37df5e9 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -48,11 +48,23 @@
      // Ensure dragging is stopped on drag finish
  };
 
- const startDrag = () => {
-     return
+ const startDrag = (evt: MouseEvent) => {
+     const dragItemId: string = evt.target.dataset["dragItemId"];
+     const item = $layoutState.allItems[dragItemId].dragItem
+     if (evt.ctrlKey) {
+         const index = $layoutState.currentSelection.indexOf(item.id)
+         if (index === -1)
+             $layoutState.currentSelection.push(item.id);
+         else
+             $layoutState.currentSelection.splice(index, 1);
+         $layoutState.currentSelection = $layoutState.currentSelection;
+     }
+     else {
+         $layoutState.currentSelection = [item.id]
+     }
  };
- const stopDrag = () => {
-     return
+
+ const stopDrag = (evt: MouseEvent) => {
  };
 
  $: if ($queueState && widget) {
@@ -65,6 +77,7 @@
 {#if container && children}
     {@const id = container.id}
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
+         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
          class:root-container={isRoot}
          class:container-edit-outline={$uiState.uiEditMode === "containers" && zIndex > 1}>
         <Block>
@@ -82,12 +95,14 @@
             <div class="v-pane"
                  class:empty={children.length === 0}
                  class:edit={$uiState.uiEditMode === "containers" && zIndex > 1}
+                 class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId === container.attrs.associatedNode}
                  use:dndzone="{{
                               items: children,
                               flipDurationMs,
+                              centreDraggedOnCursor: true,
                               morphDisabled: true,
                               dropFromOthersDisabled: zIndex === 0,
-                              dragDisabled: zIndex === 0
+                              dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
                               }}"
                  on:consider="{handleConsider}"
                  on:finalize="{handleFinalize}"
@@ -105,16 +120,19 @@
                 {/each}
             </div>
             {#if $uiState.uiEditMode === "containers" && zIndex > 1}
-                <div class="handle handle-container" style="z-index: {zIndex+100}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
             {/if}
         </Block>
     </div>
 {:else if widget}
-    <div class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
+    <div class="widget" class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
+        class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
+        class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.attrs.associatedNode}
+        >
         <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
     </div>
     {#if $uiState.uiEditMode ==="widgets" && zIndex > 1}
-        <div class="handle handle-widget" style="z-index: {zIndex+100}" on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+        <div class="handle handle-widget" style="z-index: {zIndex+100}" data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
     {/if}
 {/if}
 
@@ -134,7 +152,7 @@
          border-color: var(--color-grey-400);
          border-radius: var(--block-radius);
          background: var(--color-grey-300);
-         min-height: 200px;
+         min-height: 100px;
          border-style: dashed;
      }
  }
@@ -179,8 +197,16 @@
      }
  }
 
- .is-executing :global(.block) {
-     border: 5px dashed var(--color-green-600) !important;
+ .container, .widget {
+     &.selected {
+         background: var(--color-yellow-200);
+     }
+ }
+
+ .is-executing {
+     border: 3px dashed var(--color-green-600) !important;
+     margin: 0.2em;
+     padding: 0.2em;
  }
 
  .animation-wrapper {
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 4ff3c59..f351bf2 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -16,6 +16,7 @@ export type LayoutState = {
     root: IDragItem | null,
     allItems: Record<DragItemID, DragItemEntry>,
     currentId: number,
+    currentSelection: IDragItem[]
 }
 
 export type Attributes = {
@@ -60,7 +61,8 @@ export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
 const store: Writable<LayoutState> = writable({
     root: null,
     allItems: [],
-    currentId: 0
+    currentId: 0,
+    currentSelection: []
 })
 
 function findDefaultContainerForInsertion(): ContainerLayout | null {

From 2f537580452e4fd7963a077f7dd0d567186ee706 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 14:12:20 -0700
Subject: [PATCH 07/27] Context menu thing

---
 src/lib/components/ComfyApp.svelte         |  1 -
 src/lib/components/ComfyUIPane.svelte      | 55 ++++++++++++++++++++--
 src/lib/components/WidgetContainer.svelte  | 32 ++++++++-----
 src/lib/components/menu/ContextMenu.svelte | 47 ++++++++++++++++++
 src/lib/components/menu/Icon.svelte        |  3 ++
 src/lib/components/menu/Menu.svelte        | 45 ++++++++++++++++++
 src/lib/components/menu/MenuDivider.svelte |  9 ++++
 src/lib/components/menu/MenuOption.svelte  | 50 ++++++++++++++++++++
 src/lib/components/menu/menu.ts            |  3 ++
 src/lib/stores/layoutState.ts              |  6 ++-
 10 files changed, 234 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/components/menu/ContextMenu.svelte
 create mode 100644 src/lib/components/menu/Icon.svelte
 create mode 100644 src/lib/components/menu/Menu.svelte
 create mode 100644 src/lib/components/menu/MenuDivider.svelte
 create mode 100644 src/lib/components/menu/MenuOption.svelte
 create mode 100644 src/lib/components/menu/menu.ts

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 30896d3..a8df899 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -177,7 +177,6 @@
         <select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>
             <option value="disabled">Disabled</option>
             <option value="widgets">Widgets</option>
-            <option value="containers">Containers</option>
         </select>
     </div>
     <LightboxModal />
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index dd0cf7d..88f5bac 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+ import { tick } from 'svelte'
  import { get } from "svelte/store";
  import { LGraphNode, LGraph } from "@litegraph-ts/core";
  import type { IWidget } from "@litegraph-ts/core";
@@ -7,6 +8,12 @@
  import WidgetContainer from "./WidgetContainer.svelte";
  import nodeState from "$lib/stores/nodeState";
  import layoutState, { type ContainerLayout, type DragItem } from "$lib/stores/layoutState";
+ import uiState from "$lib/stores/uiState";
+
+ import Menu from './menu/Menu.svelte';
+ import MenuOption from './menu/MenuOption.svelte';
+ import MenuDivider from './menu/MenuDivider.svelte';
+ import Icon from './menu/Icon.svelte'
 
  export let app: ComfyApp;
  let dragConfigured: boolean = false;
@@ -39,18 +46,60 @@
      }
      console.warn($layoutState)
  }
+
+ let menuPos = { x: 0, y: 0 };
+ let showMenu = false;
+
+ $: $layoutState.isMenuOpen = showMenu;
+
+ async function onRightClick(e) {
+     if ($uiState.uiEditMode === "disabled")
+         return;
+
+     e.preventDefault();
+     if (showMenu) {
+         showMenu = false;
+         await new Promise(res => setTimeout(res, 100));
+     }
+
+     menuPos = { x: e.clientX, y: e.clientY };
+     showMenu = true;
+ }
+
+ function closeMenu() {
+     showMenu = false;
+ }
 </script>
 
-<div id="comfy-ui-panes" >
+<div id="comfy-ui-panes" on:contextmenu={onRightClick}>
     <WidgetContainer bind:dragItem={$layoutState.root} classes={["root-container"]} />
 </div>
 
+{#if showMenu}
+    <Menu {...menuPos} on:click={closeMenu} on:clickoutside={closeMenu}>
+        <MenuOption
+            on:click={console.log}
+                     text="Do nothing" />
+        <MenuOption
+            on:click={console.log}
+                     text="Do nothing, but twice" />
+        <MenuDivider />
+        <MenuOption
+            isDisabled={true}
+                       on:click={console.log}
+                       text="Whoops, disabled!" />
+        <MenuOption on:click={console.log}>
+            <Icon />
+            <span>Look! An icon!</span>
+        </MenuOption>
+    </Menu>
+{/if}
+
 <style lang="scss">
  #comfy-ui-panes {
      width: 100%;
      height: 100%;
-     overflow: scroll;
-
+     overflow: auto;
  }
 
 </style>
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 37df5e9..3aa9c66 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -22,6 +22,7 @@
  let widget: WidgetLayout | null = null;
  let widgetState: WidgetUIState | null = null;
  let children: IDragItem[] | null = null;
+ let showHandles: boolean = false;
  const flipDurationMs = 100;
 
  $: if (dragItem) {
@@ -38,6 +39,10 @@
      }
  }
 
+ $: showHandles = $uiState.uiEditMode === "widgets" // TODO
+               && zIndex > 1
+               && !$layoutState.isMenuOpen
+
  function handleConsider(evt: any) {
      children = layoutState.updateChildren(dragItem, evt.detail.items)
      // console.log(dragItems);
@@ -49,6 +54,9 @@
  };
 
  const startDrag = (evt: MouseEvent) => {
+     if (evt.button === 2)
+         return;
+
      const dragItemId: string = evt.target.dataset["dragItemId"];
      const item = $layoutState.allItems[dragItemId].dragItem
      if (evt.ctrlKey) {
@@ -79,12 +87,12 @@
     <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
          class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
          class:root-container={isRoot}
-         class:container-edit-outline={$uiState.uiEditMode === "containers" && zIndex > 1}>
+         class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
         <Block>
             {#if container.attrs.showTitle}
-                <label for={String(id)} class={$uiState.uiEditMode === "containers" ? "edit-title-label" : ""}>
+                <label for={String(id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
                     <BlockTitle>
-                        {#if $uiState.uiEditMode === "containers"}
+                        {#if $uiState.uiEditMode === "widgets"}
                             <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
                         {:else}
                             {container.attrs.title}
@@ -94,7 +102,7 @@
             {/if}
             <div class="v-pane"
                  class:empty={children.length === 0}
-                 class:edit={$uiState.uiEditMode === "containers" && zIndex > 1}
+                 class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
                  class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId === container.attrs.associatedNode}
                  use:dndzone="{{
                               items: children,
@@ -119,7 +127,7 @@
                     </div>
                 {/each}
             </div>
-            {#if $uiState.uiEditMode === "containers" && zIndex > 1}
+            {#if showHandles}
                 <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
             {/if}
         </Block>
@@ -131,7 +139,7 @@
         >
         <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
     </div>
-    {#if $uiState.uiEditMode ==="widgets" && zIndex > 1}
+    {#if showHandles}
         <div class="handle handle-widget" style="z-index: {zIndex+100}" data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
     {/if}
 {/if}
@@ -197,10 +205,12 @@
      }
  }
 
- .container, .widget {
-     &.selected {
-         background: var(--color-yellow-200);
-     }
+ .widget.selected {
+     background: var(--color-yellow-200);
+ }
+
+ .container.selected > :global(.block) {
+     background: var(--color-yellow-300);
  }
 
  .is-executing {
@@ -286,7 +296,7 @@
      border-width: 2px;
      border-style: dashed !important;
      margin: 0.2em;
-     padding: 1.2em;
+     padding: 0.2em;
  }
 
  .widget-edit-outline {
diff --git a/src/lib/components/menu/ContextMenu.svelte b/src/lib/components/menu/ContextMenu.svelte
new file mode 100644
index 0000000..a4c963a
--- /dev/null
+++ b/src/lib/components/menu/ContextMenu.svelte
@@ -0,0 +1,47 @@
+<script>
+ import Menu from './Menu.svelte';
+ import MenuOption from './MenuOption.svelte';
+ import MenuDivider from './MenuDivider.svelte';
+ import { tick } from 'svelte'
+
+ import Icon from './Icon.svelte'
+
+ let pos = { x: 0, y: 0 };
+ let showMenu = false;
+
+ async function onRightClick(e) {
+     if (showMenu) {
+         showMenu = false;
+         await new Promise(res => setTimeout(res, 100));
+     }
+
+     pos = { x: e.clientX, y: e.clientY };
+     showMenu = true;
+ }
+
+ function closeMenu() {
+     showMenu = false;
+ }
+</script>
+
+{#if showMenu}
+    <Menu {...pos} on:click={closeMenu} on:clickoutside={closeMenu}>
+        <MenuOption
+            on:click={console.log}
+                     text="Do nothing" />
+        <MenuOption
+            on:click={console.log}
+                     text="Do nothing, but twice" />
+        <MenuDivider />
+        <MenuOption
+            isDisabled={true}
+                       on:click={console.log}
+                       text="Whoops, disabled!" />
+        <MenuOption on:click={console.log}>
+            <Icon />
+            <span>Look! An icon!</span>
+        </MenuOption>
+    </Menu>
+{/if}
+
+<svelte:body on:contextmenu|preventDefault={onRightClick} />
diff --git a/src/lib/components/menu/Icon.svelte b/src/lib/components/menu/Icon.svelte
new file mode 100644
index 0000000..0af8dc8
--- /dev/null
+++ b/src/lib/components/menu/Icon.svelte
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M11.2584 13.039C10.3201 13.647 9.2013 14 8 14C4.68629 14 2 11.3137 2 8C2 6.66837 2.4338 5.43806 3.1678 4.44268L11.2584 13.039ZM12.7332 11.6878L4.60537 3.05194C5.57075 2.38838 6.74002 2 8 2C11.3137 2 14 4.68629 14 8C14 9.39043 13.527 10.6704 12.7332 11.6878ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z" fill="black"/>
+</svg>
diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
new file mode 100644
index 0000000..6322a94
--- /dev/null
+++ b/src/lib/components/menu/Menu.svelte
@@ -0,0 +1,45 @@
+<script>
+	import { setContext, createEventDispatcher } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { key } from './menu.ts';
+
+	export let x;
+	export let y;
+
+	// whenever x and y is changed, restrict box to be within bounds
+	$: (() => {
+		if (!menuEl) return;
+
+		const rect = menuEl.getBoundingClientRect();
+		x = Math.min(window.innerWidth - rect.width, x);
+		if (y > window.innerHeight - rect.height) y -= rect.height;
+	})(x, y);
+
+	const dispatch = createEventDispatcher();
+
+	setContext(key, {
+		dispatchClick: () => dispatch('click')
+	});
+
+	let menuEl;
+	function onPageClick(e) {
+		if (e.target === menuEl || menuEl.contains(e.target)) return;
+		dispatch('clickoutside');
+	}
+</script>
+
+<svelte:body on:click={onPageClick} />
+<div class="menu" bind:this={menuEl} style="top: {y}px; left: {x}px;">
+    <slot />
+</div>
+
+<style>
+ .menu {
+     z-index: var(--layer-top);
+     position: absolute;
+     display: grid;
+     border: 1px solid #0003;
+     box-shadow: 2px 2px 5px 0px #0002;
+     background: white;
+ }
+</style>
diff --git a/src/lib/components/menu/MenuDivider.svelte b/src/lib/components/menu/MenuDivider.svelte
new file mode 100644
index 0000000..13041d5
--- /dev/null
+++ b/src/lib/components/menu/MenuDivider.svelte
@@ -0,0 +1,9 @@
+<hr />
+
+<style>
+	hr {
+		border-top: 1px solid #0003;
+		width: 100%;
+		margin: 2px 0;
+	}
+</style>
diff --git a/src/lib/components/menu/MenuOption.svelte b/src/lib/components/menu/MenuOption.svelte
new file mode 100644
index 0000000..bb7cca9
--- /dev/null
+++ b/src/lib/components/menu/MenuOption.svelte
@@ -0,0 +1,50 @@
+<script>
+ import { onMount, getContext } from 'svelte';
+ import { key } from './menu.ts';
+
+ export let isDisabled = false;
+ export let text = '';
+
+ import { createEventDispatcher } from 'svelte';
+ const dispatch = createEventDispatcher();
+
+ const { dispatchClick } = getContext(key);
+
+ const handleClick = e => {
+     if (isDisabled) return;
+
+     dispatch('click');
+     dispatchClick();
+ }
+</script>
+
+<div 
+    class:disabled={isDisabled}
+    on:click={handleClick}
+>
+    {#if text}
+        {text}
+    {:else}
+        <slot />
+    {/if}
+</div>
+
+<style>
+ div {
+     padding: 4px 15px;
+     cursor: default;
+     font-size: 14px;
+     display: flex;
+     align-items: center;
+     grid-gap: 5px;
+ }
+ div:hover {
+     background: #0002;
+ }
+ div.disabled {
+     color: #0006;
+ }
+ div.disabled:hover {
+     background: white;
+ }
+</style>
diff --git a/src/lib/components/menu/menu.ts b/src/lib/components/menu/menu.ts
new file mode 100644
index 0000000..108b2fd
--- /dev/null
+++ b/src/lib/components/menu/menu.ts
@@ -0,0 +1,3 @@
+const key = {};
+
+export { key };
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index f351bf2..fbf5ce8 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -16,7 +16,8 @@ export type LayoutState = {
     root: IDragItem | null,
     allItems: Record<DragItemID, DragItemEntry>,
     currentId: number,
-    currentSelection: IDragItem[]
+    currentSelection: DragItemID[],
+    isMenuOpen: boolean
 }
 
 export type Attributes = {
@@ -62,7 +63,8 @@ const store: Writable<LayoutState> = writable({
     root: null,
     allItems: [],
     currentId: 0,
-    currentSelection: []
+    currentSelection: [],
+    isMenuOpen: false
 })
 
 function findDefaultContainerForInsertion(): ContainerLayout | null {

From 95133df3d90a78899770e8c593f404e68f413e18 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 15:21:33 -0700
Subject: [PATCH 08/27] Group/ungroup feature

---
 src/lib/components/ComfyUIPane.svelte     |  47 +++++---
 src/lib/components/WidgetContainer.svelte |  29 +++--
 src/lib/stores/layoutState.ts             | 130 ++++++++++++++++++++--
 3 files changed, 174 insertions(+), 32 deletions(-)

diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 88f5bac..9593381 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -47,6 +47,34 @@
      console.warn($layoutState)
  }
 
+ function groupWidgets() {
+     const items = layoutState.getCurrentSelection()
+     $layoutState.currentSelection = []
+     layoutState.groupItems(items)
+ }
+
+ let canUngroup = false;
+ let isDeleteGroup = false;
+ $: canUngroup = $layoutState.currentSelection.length === 1
+            && layoutState.getCurrentSelection()[0].type === "container"
+ $: if (canUngroup) {
+     const dragItem = layoutState.getCurrentSelection()[0];
+     const entry = $layoutState.allItems[dragItem.id];
+     isDeleteGroup = entry.children.length === 0
+ }
+ else {
+     isDeleteGroup = false
+ }
+
+ function ungroup() {
+     const item = layoutState.getCurrentSelection()[0]
+     if (item.type !== "container")
+         return;
+
+     $layoutState.currentSelection = []
+     layoutState.ungroup(item as ContainerLayout)
+ }
+
  let menuPos = { x: 0, y: 0 };
  let showMenu = false;
 
@@ -78,20 +106,13 @@
 {#if showMenu}
     <Menu {...menuPos} on:click={closeMenu} on:clickoutside={closeMenu}>
         <MenuOption
-            on:click={console.log}
-                     text="Do nothing" />
+            isDisabled={$layoutState.currentSelection.length === 0}
+            on:click={groupWidgets}
+            text="Group" />
         <MenuOption
-            on:click={console.log}
-                     text="Do nothing, but twice" />
-        <MenuDivider />
-        <MenuOption
-            isDisabled={true}
-                       on:click={console.log}
-                       text="Whoops, disabled!" />
-        <MenuOption on:click={console.log}>
-            <Icon />
-            <span>Look! An icon!</span>
-        </MenuOption>
+            isDisabled={!canUngroup}
+            on:click={ungroup}
+            text={isDeleteGroup ? "Delete Group" : "Ungroup"} />
     </Menu>
 {/if}
 
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 3aa9c66..7c09386 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -26,7 +26,14 @@
  const flipDurationMs = 100;
 
  $: if (dragItem) {
-     if (dragItem.type === "container") {
+     if (!$layoutState.allItems[dragItem.id]) {
+         dragItem = null;
+         widget = null;
+         widgetState = null;
+         children = null;
+         container = null;
+     }
+     else if (dragItem.type === "container") {
          container = dragItem as ContainerLayout;
          children = $layoutState.allItems[dragItem.id].children;
          widget = null;
@@ -54,11 +61,16 @@
  };
 
  const startDrag = (evt: MouseEvent) => {
-     if (evt.button === 2)
-         return;
-
      const dragItemId: string = evt.target.dataset["dragItemId"];
+
+     if (evt.button !== 0) {
+         if ($layoutState.currentSelection.length <= 1 && !$layoutState.isMenuOpen)
+             $layoutState.currentSelection = [dragItemId]
+         return;
+     }
+
      const item = $layoutState.allItems[dragItemId].dragItem
+
      if (evt.ctrlKey) {
          const index = $layoutState.currentSelection.indexOf(item.id)
          if (index === -1)
@@ -103,7 +115,6 @@
             <div class="v-pane"
                  class:empty={children.length === 0}
                  class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
-                 class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId === container.attrs.associatedNode}
                  use:dndzone="{{
                               items: children,
                               flipDurationMs,
@@ -137,6 +148,10 @@
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
         class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.attrs.associatedNode}
         >
+        {#if widget.attrs.associatedNode}
+            {@const node = $nodeState[widget.attrs.associatedNode].node}
+            <span class="node-type">({node.type})</span>
+        {/if}
         <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
     </div>
     {#if showHandles}
@@ -261,12 +276,12 @@
  }
 
  .edit-title-label {
+     z-index: 10000;
      position: relative;
-     z-index: var(--layer-1);
  }
 
  .edit-title {
-     z-index: var(--layer-1);
+     z-index: 10000;
      display: block;
      position: relative;
      outline: none !important;
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index fbf5ce8..4edd1f3 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -48,12 +48,15 @@ export interface WidgetLayout extends IDragItem {
 type DragItemID = string;
 
 type LayoutStateOps = {
-    addContainer: (parentId: DragItemID, attrs: Partial<Attributes>) => ContainerLayout,
+    addContainer: (parentId: DragItemID, attrs: Partial<Attributes>, index: number) => ContainerLayout,
+    addWidget: (parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes>, index: number) => WidgetLayout,
     findDefaultContainerForInsertion: () => ContainerLayout | null,
-    addWidget: (parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes>) => WidgetLayout,
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
     nodeRemoved: (node: LGraphNode) => void,
+    groupItems: (dragItems: IDragItem[]) => ContainerLayout,
+    ungroup: (container: ContainerLayout) => void,
+    getCurrentSelection: () => IDragItem[],
     clear: () => void,
     resetLayout: () => void,
 }
@@ -87,7 +90,7 @@ function findDefaultContainerForInsertion(): ContainerLayout | null {
     return null
 }
 
-function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> = {}): ContainerLayout {
+function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> = {}, index: number = -1): ContainerLayout {
     const state = get(store);
     const dragItem: ContainerLayout = {
         type: "container",
@@ -106,13 +109,16 @@ function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> =
     state.allItems[dragItem.id] = entry;
     if (parent) {
         parent.children ||= []
-        parent.children.push(dragItem)
+        if (index)
+            parent.children.splice(index, 0, dragItem)
+        else
+            parent.children.push(dragItem)
     }
     store.set(state)
     return dragItem;
 }
 
-function addWidget(parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes> = {}): WidgetLayout {
+function addWidget(parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes> = {}, index: number = -1): WidgetLayout {
     const state = get(store);
     const dragItem: WidgetLayout = {
         type: "widget",
@@ -132,21 +138,25 @@ function addWidget(parentId: DragItemID, node: LGraphNode, widget: IWidget<any,
     const entry: DragItemEntry = { dragItem, children: [], parent: parent.dragItem };
     state.allItems[dragItem.id] = entry;
     parent.children ||= []
-    parent.children.push(dragItem)
+    if (index !== -1)
+        parent.children.splice(index, 0, dragItem)
+    else
+        parent.children.push(dragItem)
     store.set(state)
     return dragItem;
 }
 
-function updateChildren(parent: IDragItem, children: IDragItem[]): IDragItem[] {
+function updateChildren(parent: IDragItem, newChildren?: IDragItem[]): IDragItem[] {
     const state = get(store);
-    state.allItems[parent.id].children = children;
-    for (const child of children) {
+    if (newChildren)
+        state.allItems[parent.id].children = newChildren;
+    for (const child of state.allItems[parent.id].children) {
         if (child.id === SHADOW_PLACEHOLDER_ITEM_ID)
             continue;
         state.allItems[child.id].parent = parent;
     }
     store.set(state)
-    return children
+    return state.allItems[parent.id].children
 }
 
 function nodeAdded(node: LGraphNode) {
@@ -207,6 +217,99 @@ function nodeRemoved(node: LGraphNode) {
     store.set(state)
 }
 
+function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
+    const state = get(store)
+    const entry = state.allItems[target.id]
+    if (entry.parent && entry.parent.id === to.id)
+        return;
+
+    if (entry.parent) {
+        const parentEntry = state.allItems[entry.parent.id];
+        const index = parentEntry.children.indexOf(target)
+        if (index !== -1) {
+            parentEntry.children.splice(index, 1)
+        }
+        else {
+            console.error(parentEntry)
+            console.error(target)
+            throw "Child not found in parent!"
+        }
+    }
+
+    const toEntry = state.allItems[to.id];
+    if (index !== -1)
+        toEntry.children.splice(index, 0, target)
+    else
+        toEntry.children.push(target)
+    state.allItems[target.id].parent = toEntry.dragItem;
+
+    console.debug("[layoutState] Move child", target, toEntry, index)
+
+    store.set(state)
+}
+
+function getCurrentSelection(): IDragItem[] {
+    const state = get(store)
+    return state.currentSelection.map(id => state.allItems[id].dragItem)
+}
+
+function groupItems(dragItems: IDragItem[]): ContainerLayout {
+    if (dragItems.length === 0)
+        return;
+
+    const state = get(store)
+    const parent = state.allItems[dragItems[0].id].parent || findDefaultContainerForInsertion();
+
+    if (parent === null || parent.type !== "container")
+        return;
+
+    let index = undefined;
+    if (parent) {
+        const indexFound = state.allItems[parent.id].children.indexOf(dragItems[0])
+        if (indexFound !== -1)
+            index = indexFound
+    }
+
+    const container = addContainer(parent.id, { title: "Group" }, index)
+
+    for (const item of dragItems) {
+        moveItem(item, container)
+    }
+
+    store.set(state)
+    return container
+}
+
+function ungroup(container: ContainerLayout) {
+    const state = get(store)
+
+    const parent = state.allItems[container.id].parent;
+    if (!parent || parent.type !== "container") {
+        console.warn("No parent to ungroup into!", container)
+        return;
+    }
+
+    let index = undefined;
+    const parentChildren = state.allItems[parent.id].children;
+    const indexFound = parentChildren.indexOf(container)
+    if (indexFound !== -1)
+        index = indexFound
+
+    const containerEntry = state.allItems[container.id]
+    console.debug("[layoutState] About to ungroup", containerEntry, parent, parentChildren, index)
+
+    const children = [...containerEntry.children]
+    for (const item of children) {
+        moveItem(item, parent as ContainerLayout, index)
+    }
+
+    removeEntry(state, container.id)
+
+    console.debug("[layoutState] Ungrouped", containerEntry, parent, parentChildren, index)
+
+    store.set(state)
+}
+
 function clear() {
 }
 
@@ -214,7 +317,7 @@ function resetLayout() {
     // TODO
 }
 
-const uiStateStore: WritableLayoutStateStore =
+const layoutStateStore: WritableLayoutStateStore =
 {
     ...store,
     addContainer,
@@ -223,7 +326,10 @@ const uiStateStore: WritableLayoutStateStore =
     updateChildren,
     nodeAdded,
     nodeRemoved,
+    getCurrentSelection,
+    groupItems,
+    ungroup,
     clear,
     resetLayout
 }
-export default uiStateStore;
+export default layoutStateStore;

From 59cbff1648ea0391c0f92d4c5640e67d2787ad79 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 29 Apr 2023 16:13:35 -0700
Subject: [PATCH 09/27] Refactor & handle node lifecycle

---
 src/lib/components/BlockContainer.svelte  | 269 ++++++++++++++++++++++
 src/lib/components/ComfyApp.svelte        |   5 +
 src/lib/components/ComfyUIPane.svelte     |  11 +-
 src/lib/components/WidgetContainer.svelte | 234 +------------------
 src/lib/stores/layoutState.ts             |  98 +++++++-
 src/lib/utils.ts                          |  31 +++
 6 files changed, 405 insertions(+), 243 deletions(-)
 create mode 100644 src/lib/components/BlockContainer.svelte

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
new file mode 100644
index 0000000..82f00c8
--- /dev/null
+++ b/src/lib/components/BlockContainer.svelte
@@ -0,0 +1,269 @@
+<script lang="ts">
+ import { Block, BlockTitle } from "@gradio/atoms";
+ import uiState from "$lib/stores/uiState";
+ import WidgetContainer from "./WidgetContainer.svelte"
+
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+
+ import {fade} from 'svelte/transition';
+ // notice - fade in works fine but don't add svelte's fade-out (known issue)
+ import {cubicIn} from 'svelte/easing';
+ import { flip } from 'svelte/animate';
+ import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
+ import { startDrag, stopDrag } from "$lib/utils"
+
+ export let container: ContainerLayout | null = null;
+ export let zIndex: number = 0;
+ export let classes: string[] = [];
+ export let showHandles: boolean = false;
+ let children: IDragItem[] | null = null;
+ const flipDurationMs = 100;
+
+ $: if (container) {
+     children = $layoutState.allItems[container.id].children;
+ }
+ else {
+     children = null;
+ }
+
+ function handleConsider(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // console.log(dragItems);
+ };
+
+ function handleFinalize(evt: any) {
+     children = layoutState.updateChildren(container, evt.detail.items)
+     // Ensure dragging is stopped on drag finish
+ };
+</script>
+
+{#if container && children}
+<div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
+     class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
+     class:root-container={zIndex === 0}
+     class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
+    <Block>
+        {#if container.attrs.showTitle}
+            <label for={String(container.id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
+                <BlockTitle>
+                    {#if $uiState.uiEditMode === "widgets"}
+                        <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
+                    {:else}
+                        {container.attrs.title}
+                    {/if}
+                </BlockTitle>
+            </label>
+        {/if}
+        <div class="v-pane"
+             class:empty={children.length === 0}
+             class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
+            use:dndzone="{{
+                         items: children,
+                         flipDurationMs,
+                         centreDraggedOnCursor: true,
+                         morphDisabled: true,
+                         dropFromOthersDisabled: zIndex === 0,
+                         dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
+                         }}"
+            on:consider="{handleConsider}"
+            on:finalize="{handleFinalize}"
+            >
+            {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                <div class="animation-wrapper"
+                     class:is-executing={item.isNodeExecuting}
+                     animate:flip={{duration:flipDurationMs}}>
+                    <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                    {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+        {#if showHandles}
+            <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+        {/if}
+    </Block>
+</div>
+{/if}
+
+<style lang="scss">
+ .v-pane {
+     height: 100%;
+     width: 100%;
+     overflow: visible;
+     display: flex;
+
+     .edit {
+         min-width: 200px;
+     }
+
+     &.empty {
+         border-width: 3px;
+         border-color: var(--color-grey-400);
+         border-radius: var(--block-radius);
+         background: var(--color-grey-300);
+         min-height: 100px;
+         border-style: dashed;
+     }
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
+ .drag-item-shadow {
+     position: absolute;
+     top: 0; left:0; right: 0; bottom: 0;
+     visibility: visible;
+     border: 1px dashed grey;
+     background: lightblue;
+     opacity: 0.5;
+     margin: 0;
+ }
+
+ .container {
+     display: flex;
+
+     :global(.block) {
+         height: fit-content;
+     }
+
+     &.horizontal {
+         flex-wrap: wrap;
+         gap: var(--layout-gap);
+         width: var(--size-full);
+
+         .v-pane {
+             flex-direction: row;
+         }
+
+         > :global(*), > :global(.form > *) {
+             flex: 1 1 0%;
+             flex-wrap: wrap;
+             min-width: min(160px, 100%);
+         }
+     }
+
+     &.vertical {
+         position: relative;
+
+         .v-pane {
+             flex-direction: column;
+         }
+
+         > :global(*), > :global(.form > *), .v-pane {
+             width: var(--size-full);
+         }
+     }
+ }
+
+ .container.selected > :global(.block) {
+     background: var(--color-yellow-300);
+ }
+
+ .is-executing {
+     border: 3px dashed var(--color-green-600) !important;
+     margin: 0.2em;
+     padding: 0.2em;
+ }
+
+ .animation-wrapper {
+     position: relative;
+
+     &:not(.edit) {
+         flex-grow: 1;
+     }
+ }
+
+ .handle {
+     cursor: grab;
+     z-index: 99999;
+     position: absolute;
+     right: 0;
+     top: 0;
+     width: 100%;
+     height: 100%;
+ }
+
+ .handle-widget:hover {
+     background-color: #add8e680;
+ }
+
+ .handle-container:hover {
+     background-color: #d8ade680;
+ }
+
+ .drag-item-shadow {
+     position: absolute;
+     top: 0; left:0; right: 0; bottom: 0;
+     visibility: visible;
+     border: 1px dashed grey;
+     background: lightblue;
+     opacity: 0.5;
+     margin: 0;
+ }
+
+ .node-type {
+     font-size: smaller;
+     color: var(--neutral-400);
+ }
+
+ .edit-title-label {
+     z-index: 10000;
+     position: relative;
+ }
+
+ .edit-title {
+     z-index: 10000;
+     display: block;
+     position: relative;
+     outline: none !important;
+     box-shadow: var(--input-shadow);
+     border: var(--input-border-width) solid var(--input-border-color);
+     border-radius: var(--input-radius);
+     background: var(--input-background-fill);
+     padding: var(--input-padding);
+     width: 100%;
+     color: var(--body-text-color);
+     font-weight: var(--input-text-weight);
+     font-size: var(--input-text-size);
+     line-height: var(--line-sm);
+ }
+
+ .edit-title:focus {
+     box-shadow: var(--input-shadow-focus);
+     border-color: var(--input-border-color-focus);
+ }
+
+ .edit-title::placeholder {
+     color: var(--input-placeholder-color);
+ }
+
+ .container-edit-outline > :global(.block) {
+     border-color: var(--color-pink-500);
+     border-width: 2px;
+     border-style: dashed !important;
+     margin: 0.2em;
+     padding: 0.2em;
+ }
+
+ .widget-edit-outline {
+     border: 2px dashed var(--color-blue-400);
+     margin: 0.2em;
+     padding: 0.2em;
+ }
+
+ .root-container > :global(.block) {
+     padding: 0px;
+ }
+</style>
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index a8df899..3ed254a 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -110,6 +110,11 @@
      app.eventBus.on("configured", nodeState.configureFinished);
      app.eventBus.on("cleared", nodeState.clear);
 
+     app.eventBus.on("nodeAdded", layoutState.nodeAdded);
+     app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
+     app.eventBus.on("configured", layoutState.configureFinished);
+     app.eventBus.on("cleared", layoutState.clear);
+
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
 
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 9593381..6f6ce4c 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -33,18 +33,11 @@
   * Serialize UI panel order so it can be restored when workflow is loaded
   */
  export function serialize(): any {
+     // TODO
  }
 
  export function restore(panels: SerializedPanes) {
-     const id = 0;
-     $layoutState.root = layoutState.addContainer(null, { direction: "horizontal", showTitle: false });
-     const left = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
-     const right = layoutState.addContainer($layoutState.root.id, { direction: "vertical", showTitle: false });
-
-     for (const node of app.lGraph.computeExecutionOrder(false, null)) {
-         layoutState.nodeAdded(node)
-     }
-     console.warn($layoutState)
+     // TODO
  }
 
  function groupWidgets() {
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 7c09386..fd2f319 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -1,47 +1,34 @@
 <script lang="ts">
- import { Block, BlockTitle } from "@gradio/atoms";
  import queueState from "$lib/stores/queueState";
  import nodeState, { type WidgetUIState } from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
 
- import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
-
- import {fade} from 'svelte/transition';
- // notice - fade in works fine but don't add svelte's fade-out (known issue)
- import {cubicIn} from 'svelte/easing';
- import { flip } from 'svelte/animate';
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
- import { getComponentForWidgetState } from "$lib/utils"
+ import { startDrag, stopDrag, getComponentForWidgetState } from "$lib/utils"
+ import BlockContainer from "./BlockContainer.svelte"
 
  export let dragItem: IDragItem | null = null;
  export let zIndex: number = 0;
  export let classes: string[] = [];
- export let isRoot: boolean = false;
- let dragDisabled: boolean = false;
  let container: ContainerLayout | null = null;
  let widget: WidgetLayout | null = null;
  let widgetState: WidgetUIState | null = null;
- let children: IDragItem[] | null = null;
  let showHandles: boolean = false;
- const flipDurationMs = 100;
 
  $: if (dragItem) {
      if (!$layoutState.allItems[dragItem.id]) {
          dragItem = null;
          widget = null;
          widgetState = null;
-         children = null;
          container = null;
      }
      else if (dragItem.type === "container") {
          container = dragItem as ContainerLayout;
-         children = $layoutState.allItems[dragItem.id].children;
          widget = null;
      }
      else if (dragItem.type === "widget") {
          widget = dragItem as WidgetLayout;
          widgetState = nodeState.findWidgetByName(widget.nodeId, widget.widgetName)
-         children = null;
          container = null;
      }
  }
@@ -50,99 +37,15 @@
                && zIndex > 1
                && !$layoutState.isMenuOpen
 
- function handleConsider(evt: any) {
-     children = layoutState.updateChildren(dragItem, evt.detail.items)
-     // console.log(dragItems);
- };
-
- function handleFinalize(evt: any) {
-     children = layoutState.updateChildren(dragItem, evt.detail.items)
-     // Ensure dragging is stopped on drag finish
- };
-
- const startDrag = (evt: MouseEvent) => {
-     const dragItemId: string = evt.target.dataset["dragItemId"];
-
-     if (evt.button !== 0) {
-         if ($layoutState.currentSelection.length <= 1 && !$layoutState.isMenuOpen)
-             $layoutState.currentSelection = [dragItemId]
-         return;
-     }
-
-     const item = $layoutState.allItems[dragItemId].dragItem
-
-     if (evt.ctrlKey) {
-         const index = $layoutState.currentSelection.indexOf(item.id)
-         if (index === -1)
-             $layoutState.currentSelection.push(item.id);
-         else
-             $layoutState.currentSelection.splice(index, 1);
-         $layoutState.currentSelection = $layoutState.currentSelection;
-     }
-     else {
-         $layoutState.currentSelection = [item.id]
-     }
- };
-
- const stopDrag = (evt: MouseEvent) => {
- };
 
  $: if ($queueState && widget) {
      widget.isNodeExecuting = $queueState.runningNodeId === widget.nodeId;
-     children = $layoutState.allItems[widget.id].children;
  }
 </script>
 
 
-{#if container && children}
-    {@const id = container.id}
-    <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
-         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
-         class:root-container={isRoot}
-         class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
-        <Block>
-            {#if container.attrs.showTitle}
-                <label for={String(id)} class={$uiState.uiEditMode === "widgets" ? "edit-title-label" : ""}>
-                    <BlockTitle>
-                        {#if $uiState.uiEditMode === "widgets"}
-                            <input class="edit-title" bind:value={container.attrs.title} type="text" minlength="1" />
-                        {:else}
-                            {container.attrs.title}
-                        {/if}
-                    </BlockTitle>
-                </label>
-            {/if}
-            <div class="v-pane"
-                 class:empty={children.length === 0}
-                 class:edit={$uiState.uiEditMode === "widgets" && zIndex > 1}
-                 use:dndzone="{{
-                              items: children,
-                              flipDurationMs,
-                              centreDraggedOnCursor: true,
-                              morphDisabled: true,
-                              dropFromOthersDisabled: zIndex === 0,
-                              dragDisabled: zIndex === 0 || $layoutState.currentSelection.length > 2 || $uiState.uiEditMode === "disabled"
-                              }}"
-                 on:consider="{handleConsider}"
-                 on:finalize="{handleFinalize}"
-            >
-                {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                    <div class="animation-wrapper"
-                         class:edit={$uiState.unlocked}
-                         class:is-executing={item.isNodeExecuting}
-                         animate:flip={{duration:flipDurationMs}}>
-                        <svelte:self dragItem={item} zIndex={zIndex+1} />
-                        {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
-                            <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
-                        {/if}
-                    </div>
-                {/each}
-            </div>
-            {#if showHandles}
-                <div class="handle handle-container" style="z-index: {zIndex+100}" data-drag-item-id={container.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
-            {/if}
-        </Block>
-    </div>
+{#if container}
+    <BlockContainer {container} {classes} {zIndex} {showHandles} />
 {:else if widget}
     <div class="widget" class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
@@ -160,88 +63,16 @@
 {/if}
 
 <style lang="scss">
- .v-pane {
-     height: 100%;
-     width: 100%;
-     overflow: visible;
-     display: flex;
-
-     .edit {
-         min-width: 200px;
-     }
-
-     &.empty {
-         border-width: 3px;
-         border-color: var(--color-grey-400);
-         border-radius: var(--block-radius);
-         background: var(--color-grey-300);
-         min-height: 100px;
-         border-style: dashed;
-     }
- }
-
- .container {
-     display: flex;
-
-     :global(.block) {
-         height: fit-content;
-     }
-
-     &.container-edit-outline {
-         /* width: 20rem; */
-     }
-
-     &.horizontal {
-         flex-wrap: wrap;
-         gap: var(--layout-gap);
-         width: var(--size-full);
-
-         .v-pane {
-             flex-direction: row;
-         }
-
-         > :global(*), > :global(.form > *) {
-             flex: 1 1 0%;
-             flex-wrap: wrap;
-             min-width: min(160px, 100%);
-         }
-     }
-
-     &.vertical {
-         position: relative;
-
-         .v-pane {
-             flex-direction: column;
-         }
-
-         > :global(*), > :global(.form > *), .v-pane {
-             width: var(--size-full);
-         }
-     }
- }
-
  .widget.selected {
      background: var(--color-yellow-200);
  }
 
- .container.selected > :global(.block) {
-     background: var(--color-yellow-300);
- }
-
  .is-executing {
      border: 3px dashed var(--color-green-600) !important;
      margin: 0.2em;
      padding: 0.2em;
  }
 
- .animation-wrapper {
-     position: relative;
-
-     &:not(.edit) {
-         flex-grow: 1;
-     }
- }
-
  .handle {
      cursor: grab;
      z-index: 99999;
@@ -256,71 +87,14 @@
      background-color: #add8e680;
  }
 
- .handle-container:hover {
-     background-color: #d8ade680;
- }
-
- .drag-item-shadow {
-     position: absolute;
-     top: 0; left:0; right: 0; bottom: 0;
-     visibility: visible;
-     border: 1px dashed grey;
-     background: lightblue;
-     opacity: 0.5;
-     margin: 0;
- }
-
  .node-type {
      font-size: smaller;
      color: var(--neutral-400);
  }
 
- .edit-title-label {
-     z-index: 10000;
-     position: relative;
- }
-
- .edit-title {
-     z-index: 10000;
-     display: block;
-     position: relative;
-     outline: none !important;
-     box-shadow: var(--input-shadow);
-     border: var(--input-border-width) solid var(--input-border-color);
-     border-radius: var(--input-radius);
-     background: var(--input-background-fill);
-     padding: var(--input-padding);
-     width: 100%;
-     color: var(--body-text-color);
-     font-weight: var(--input-text-weight);
-     font-size: var(--input-text-size);
-     line-height: var(--line-sm);
- }
-
- .edit-title:focus {
-     box-shadow: var(--input-shadow-focus);
-     border-color: var(--input-border-color-focus);
- }
-
- .edit-title::placeholder {
-     color: var(--input-placeholder-color);
- }
-
- .container-edit-outline > :global(.block) {
-     border-color: var(--color-pink-500);
-     border-width: 2px;
-     border-style: dashed !important;
-     margin: 0.2em;
-     padding: 0.2em;
- }
-
  .widget-edit-outline {
      border: 2px dashed var(--color-blue-400);
      margin: 0.2em;
      padding: 0.2em;
  }
-
- .root-container > :global(.block) {
-     padding: 0px;
- }
 </style>
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 4edd1f3..2ba49db 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -1,7 +1,7 @@
 import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
-import type { LGraphNode, IWidget } from "@litegraph-ts/core"
+import type { LGraphNode, IWidget, LGraph } from "@litegraph-ts/core"
 import nodeState from "$lib/state/nodeState";
 import type { NodeStateStore } from './nodeState';
  import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
@@ -17,9 +17,62 @@ export type LayoutState = {
     allItems: Record<DragItemID, DragItemEntry>,
     currentId: number,
     currentSelection: DragItemID[],
+    isConfiguring: boolean,
     isMenuOpen: boolean
 }
 
+export type AttributesSpec = {
+    name: string,
+    type: string,
+    editable: boolean
+}
+
+export type AttributesCategorySpec = {
+    categoryName: string,
+    specs: AttributesSpec[]
+}
+
+export type AttributesSpecList = AttributesCategorySpec[]
+
+const ALL_ATTRIBUTES: AttributesSpecList = [
+    {
+        categoryName: "appearance",
+        specs: [
+            {
+                name: "title",
+                type: "string",
+                editable: true,
+            },
+            {
+                name: "showTitle",
+                type: "boolean",
+                editable: true,
+            },
+            {
+                name: "direction",
+                type: "string",
+                editable: true,
+            },
+            {
+                name: "classes",
+                type: "string",
+                editable: true,
+            },
+        ]
+    },
+    {
+        categoryName: "behavior",
+        specs: [
+            {
+                name: "associatedNode",
+                type: "number",
+                editable: false,
+            },
+        ]
+    }
+];
+export { ALL_ATTRIBUTES };
+
 export type Attributes = {
     direction: string,
     title: string,
@@ -54,6 +107,7 @@ type LayoutStateOps = {
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
     nodeRemoved: (node: LGraphNode) => void,
+    configureFinished: (graph: LGraph) => void,
     groupItems: (dragItems: IDragItem[]) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
     getCurrentSelection: () => IDragItem[],
@@ -64,11 +118,12 @@ type LayoutStateOps = {
 export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
 const store: Writable<LayoutState> = writable({
     root: null,
-    allItems: [],
+    allItems: {},
     currentId: 0,
     currentSelection: [],
     isMenuOpen: false
 })
+addContainer(null, { direction: "horizontal", showTitle: false });
 
 function findDefaultContainerForInsertion(): ContainerLayout | null {
     const state = get(store);
@@ -160,6 +215,10 @@ function updateChildren(parent: IDragItem, newChildren?: IDragItem[]): IDragItem
 }
 
 function nodeAdded(node: LGraphNode) {
+    const state = get(store)
+    if (state.isConfiguring)
+        return;
+
     const parent = findDefaultContainerForInsertion();
     // Add default node panel containing all widgets
     if (node.widgets && node.widgets.length > 0) {
@@ -187,11 +246,14 @@ function removeEntry(state: LayoutState, id: DragItemID) {
 function nodeRemoved(node: LGraphNode) {
     const state = get(store)
 
+    console.debug("[layoutState] nodeRemoved", node)
+
     // Remove widgets bound to the node
     let del = Object.entries(state.allItems).filter(pair =>
         pair[1].dragItem.type === "widget"
         && pair[1].dragItem.attrs.associatedNode === node.id)
-    for (const id in del) {
+    for (const item of del) {
+        const [id, dragItem] = item;
         console.debug("[layoutState] Remove widget", id, state.allItems[id])
         removeEntry(state, id)
     }
@@ -209,7 +271,7 @@ function nodeRemoved(node: LGraphNode) {
     }
 
     // Remove empty containers bound to the node
-    for (const id in delContainers) {
+    for (const id of delContainers) {
         console.debug("[layoutState] Remove container", id, state.allItems[id])
         removeEntry(state, id)
     }
@@ -217,6 +279,24 @@ function nodeRemoved(node: LGraphNode) {
     store.set(state)
 }
 
+function configureFinished(graph: LGraph) {
+    const state = get(store)
+    const id = 0;
+
+    state.isConfiguring = false;
+
+    state.root = addContainer(null, { direction: "horizontal", showTitle: false });
+    const left = addContainer(state.root.id, { direction: "vertical", showTitle: false });
+    const right = addContainer(state.root.id, { direction: "vertical", showTitle: false });
+
+    for (const node of graph.computeExecutionOrder(false, null)) {
+        nodeAdded(node)
+    }
+
+    console.debug("[layoutState] configureFinished", state)
+    store.set(state)
+}
+
 function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
     const state = get(store)
     const entry = state.allItems[target.id]
@@ -311,6 +391,15 @@ function ungroup(container: ContainerLayout) {
 }
 
 function clear() {
+    store.set({
+        root: null,
+        allItems: {},
+        currentId: 0,
+        currentSelection: [],
+        isMenuOpen: false,
+        isConfiguring: true,
+    })
+    addContainer(null, { direction: "horizontal", showTitle: false });
 }
 
 function resetLayout() {
@@ -326,6 +415,7 @@ const layoutStateStore: WritableLayoutStateStore =
     updateChildren,
     nodeAdded,
     nodeRemoved,
+    configureFinished,
     getCurrentSelection,
     groupItems,
     ungroup,
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index c495cea..79a5f99 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -3,6 +3,8 @@ import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
 import TextWidget from "$lib/widgets/TextWidget.svelte";
 import { type WidgetUIState } from "$lib/stores/nodeState";
+import { get } from "svelte/store"
+import layoutState from "$lib/stores/layoutState"
 
 export function download(filename: string, text: string, type: string = "text/plain") {
     const blob = new Blob([text], { type: type });
@@ -39,3 +41,32 @@ export function getComponentForWidgetState(item: WidgetUIState): any {
 
     return null;
 }
+
+export function startDrag(evt: MouseEvent) {
+    const dragItemId: string = evt.target.dataset["dragItemId"];
+    const ls = get(layoutState)
+
+    if (evt.button !== 0) {
+        if (ls.currentSelection.length <= 1 && !ls.isMenuOpen)
+            ls.currentSelection = [dragItemId]
+        return;
+    }
+
+    const item = ls.allItems[dragItemId].dragItem
+
+    if (evt.ctrlKey) {
+        const index = ls.currentSelection.indexOf(item.id)
+        if (index === -1)
+            ls.currentSelection.push(item.id);
+        else
+            ls.currentSelection.splice(index, 1);
+        ls.currentSelection = ls.currentSelection;
+    }
+    else {
+        ls.currentSelection = [item.id]
+    }
+    layoutState.set(ls)
+};
+
+export function stopDrag(evt: MouseEvent) {
+};

From 1b64c3a50218e32011ba4f807d1e03ae82ffb2d6 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sun, 30 Apr 2023 14:03:12 -0700
Subject: [PATCH 10/27] Fix executing class

---
 src/lib/components/BlockContainer.svelte  |  2 +-
 src/lib/components/WidgetContainer.svelte | 38 ++++++++++-------------
 src/lib/stores/layoutState.ts             |  1 +
 3 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index 82f00c8..b96ba49 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -41,6 +41,7 @@
 <div class="container {container.attrs.direction} {container.attrs.classes} {classes.join(' ')}"
      class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(container.id)}
      class:root-container={zIndex === 0}
+     class:is-executing={container.isNodeExecuting}
      class:container-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}>
     <Block>
         {#if container.attrs.showTitle}
@@ -70,7 +71,6 @@
             >
             {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
                 <div class="animation-wrapper"
-                     class:is-executing={item.isNodeExecuting}
                      animate:flip={{duration:flipDurationMs}}>
                     <WidgetContainer dragItem={item} zIndex={zIndex+1} />
                     {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index fd2f319..44302a1 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -15,22 +15,20 @@
  let widgetState: WidgetUIState | null = null;
  let showHandles: boolean = false;
 
- $: if (dragItem) {
-     if (!$layoutState.allItems[dragItem.id]) {
-         dragItem = null;
-         widget = null;
-         widgetState = null;
-         container = null;
-     }
-     else if (dragItem.type === "container") {
-         container = dragItem as ContainerLayout;
-         widget = null;
-     }
-     else if (dragItem.type === "widget") {
-         widget = dragItem as WidgetLayout;
-         widgetState = nodeState.findWidgetByName(widget.nodeId, widget.widgetName)
-         container = null;
-     }
+ $: if (!dragItem || !$layoutState.allItems[dragItem.id]) {
+     dragItem = null;
+     container = null;
+     widget = null;
+     widgetState = null;
+ }
+ else if (dragItem.type === "container") {
+     container = dragItem as ContainerLayout;
+     widget = null;
+ }
+ else if (dragItem.type === "widget") {
+     widget = dragItem as WidgetLayout;
+     widgetState = nodeState.findWidgetByName(widget.nodeId, widget.widgetName)
+     container = null;
  }
 
  $: showHandles = $uiState.uiEditMode === "widgets" // TODO
@@ -38,8 +36,8 @@
                && !$layoutState.isMenuOpen
 
 
- $: if ($queueState && widget) {
-     widget.isNodeExecuting = $queueState.runningNodeId === widget.nodeId;
+ $: if ($queueState && dragItem) {
+     dragItem.isNodeExecuting = $queueState.runningNodeId === dragItem.nodeId;
  }
 </script>
 
@@ -51,10 +49,6 @@
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
         class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.attrs.associatedNode}
         >
-        {#if widget.attrs.associatedNode}
-            {@const node = $nodeState[widget.attrs.associatedNode].node}
-            <span class="node-type">({node.type})</span>
-        {/if}
         <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
     </div>
     {#if showHandles}
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 2ba49db..f1e1caf 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -265,6 +265,7 @@ function nodeRemoved(node: LGraphNode) {
     let delContainers = []
 
     // Remove widget from all children lists
+  // TODO just use parent.children
     for (const entry of Object.values(state.allItems)) {
         if (entry.children?.length === 0 && isAssociatedContainer(entry.dragItem))
             delContainers.push(entry.dragItem.id)

From 7880c68d7f9b87bfa30bdba3e63f3403f17a585c Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sun, 30 Apr 2023 16:37:15 -0700
Subject: [PATCH 11/27] Serialize node links instead of widget values

Syncing litegraph widget state is kinda annoying, and unnecessary since
everything will be moved to separate UI component nodes. Instead I
modified the input slot type to store the min/max/step to be copied into
the default UI node later. Now nothing uses litegraph's widgets anymore
---
 src/lib/IComfyInputSlot.ts         |  16 ++++
 src/lib/components/ComfyApp.svelte |   8 +-
 src/lib/components/ComfyApp.ts     | 135 ++++++++++++++--------------
 src/lib/nodes/ComfyGraphNode.ts    |   5 +-
 src/lib/nodes/ComfyReroute.ts      |   3 -
 src/lib/nodes/ComfyWidgetNodes.ts  | 103 +++++++++++++++++++++
 src/lib/stores/layoutState.ts      |  12 +--
 src/lib/stores/nodeState.ts        |  38 ++++----
 src/lib/utils.ts                   |   7 +-
 src/lib/widgets.ts                 | 140 +++++++----------------------
 10 files changed, 254 insertions(+), 213 deletions(-)
 create mode 100644 src/lib/IComfyInputSlot.ts
 create mode 100644 src/lib/nodes/ComfyWidgetNodes.ts

diff --git a/src/lib/IComfyInputSlot.ts b/src/lib/IComfyInputSlot.ts
new file mode 100644
index 0000000..4f6b090
--- /dev/null
+++ b/src/lib/IComfyInputSlot.ts
@@ -0,0 +1,16 @@
+import type { INodeInputSlot } from "@litegraph-ts/core";
+
+export type ComfyInputConfig = {
+    min?: number,
+    max?: number,
+    step?: number,
+    precision?: number,
+    defaultValue?: any,
+    values?: any[],
+    multiline?: boolean
+}
+
+export default interface IComfyInputSlot extends INodeInputSlot {
+    serialize: boolean
+    config: ComfyInputConfig // stores range min/max/step, etc.
+}
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 3ed254a..a3ffc7d 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -110,10 +110,10 @@
      app.eventBus.on("configured", nodeState.configureFinished);
      app.eventBus.on("cleared", nodeState.clear);
 
-     app.eventBus.on("nodeAdded", layoutState.nodeAdded);
-     app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
-     app.eventBus.on("configured", layoutState.configureFinished);
-     app.eventBus.on("cleared", layoutState.clear);
+     // app.eventBus.on("nodeAdded", layoutState.nodeAdded);
+     // app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
+     // app.eventBus.on("configured", layoutState.configureFinished);
+     // app.eventBus.on("cleared", layoutState.clear);
 
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index a67eb66..30452f3 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -1,4 +1,4 @@
-import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink } from "@litegraph-ts/core";
+import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode } from "@litegraph-ts/core";
 import type { LConnectionKind, INodeSlot } from "@litegraph-ts/core";
 import ComfyAPI from "$lib/api"
 import { ComfyWidgets } from "$lib/widgets"
@@ -8,7 +8,7 @@ import EventEmitter from "events";
 import type TypedEmitter from "typed-emitter";
 
 // Import nodes
-import * as basic from "@litegraph-ts/nodes-basic"
+import "@litegraph-ts/nodes-basic"
 import * as nodes from "$lib/nodes/index"
 import ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
@@ -16,6 +16,8 @@ import * as widgets from "$lib/widgets/index"
 import type ComfyWidget from "$lib/widgets/ComfyWidget";
 import queueState from "$lib/stores/queueState";
 import GraphSync from "$lib/GraphSync";
+import type { SvelteComponentDev } from "svelte/internal";
+import type IComfyInputSlot from "$lib/IComfyInputSlot";
 
 LiteGraph.catch_exceptions = false;
 
@@ -49,12 +51,6 @@ type ComfyAppEvents = {
     restored: (workflow: SerializedAppState) => void
 }
 
-interface ComfyGraphNodeExecutable extends LGraphNodeExecutable {
-    comfyClass: string
-    isVirtualNode?: boolean;
-    applyToGraph(workflow: SerializedLGraph<SerializedLGraphNode<LGraphNode>, SerializedLLink, SerializedLGraphGroup>): void;
-}
-
 export type Progress = {
     value: number,
     max: number
@@ -199,7 +195,7 @@ export default class ComfyApp {
     }
 
     static node_type_overrides: Record<string, typeof ComfyGraphNode> = {}
-    static widget_type_overrides: Record<string, Function> = {}
+    static widget_type_overrides: Record<string, typeof SvelteComponentDev> = {}
 
     private registerNodeTypeOverrides() {
         ComfyApp.node_type_overrides["SaveImage"] = nodes.ComfySaveImageNode;
@@ -239,6 +235,7 @@ export default class ComfyApp {
                     super(title);
                     this.type = nodeId; // XXX: workaround dependency in LGraphNode.addInput()
                     (this as any).comfyClass = nodeId;
+                    (this as any).isBackendNode = true;
                     var inputs = nodeData["input"]["required"];
                     if (nodeData["input"]["optional"] != undefined) {
                         inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
@@ -261,8 +258,8 @@ export default class ComfyApp {
                                 // Standard type widgets
                                 Object.assign(config, widgets[type](this, inputName, inputData, app) || {});
                             } else {
-                                // Node connection inputs
-                                this.addInput(inputName, type);
+                                // Node connection inputs (backend)
+                                this.addInput(inputName, type, { color_off: "orange", color_on: "orange" });
                             }
                         }
                     }
@@ -277,7 +274,7 @@ export default class ComfyApp {
                     s[0] = Math.max(config.minWidth, s[0] * 1.5);
                     s[1] = Math.max(config.minHeight, s[1]);
                     this.size = s;
-                    this.serialize_widgets = true;
+                    this.serialize_widgets = false;
 
                     // app.#invokeExtensionsAsync("nodeCreated", this);
 
@@ -428,7 +425,7 @@ export default class ComfyApp {
         this.clean();
 
         if (!graphData) {
-            graphData = structuredClone(defaultGraph.workflow)
+            // graphData = structuredClone(defaultGraph.workflow)
         }
 
         // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
@@ -443,21 +440,6 @@ export default class ComfyApp {
             size[0] = Math.max(node.size[0], size[0]);
             size[1] = Math.max(node.size[1], size[1]);
             node.size = size;
-
-            if (node.widgets) {
-                // If you break something in the backend and want to patch workflows in the frontend
-                // This is the place to do this
-                for (let widget of node.widgets) {
-                    if (node.type == "KSampler" || node.type == "KSamplerAdvanced") {
-                        if (widget.name == "sampler_name") {
-                            if (widget.value.constructor === String && widget.value.startsWith("sample_")) {
-                                widget.value = widget.value.slice(7);
-                            }
-                        }
-                    }
-                }
-            }
-
             // this.#invokeExtensions("loadedGraphNode", node);
         }
     }
@@ -467,60 +449,82 @@ export default class ComfyApp {
      * @returns The workflow and node links
      */
     async graphToPrompt() {
+        // Run frontend-only logic
+        this.lGraph.runStep(1)
+
         const workflow = this.lGraph.serialize();
 
         const output = {};
         // Process nodes in order of execution
-        for (const node of this.lGraph.computeExecutionOrder<ComfyGraphNodeExecutable>(false, null)) {
+        for (const node of this.lGraph.computeExecutionOrder<ComfyGraphNode>(false, null)) {
             const n = workflow.nodes.find((n) => n.id === node.id);
 
-            if (node.isVirtualNode || !node.comfyClass) {
+            if (!node.isBackendNode) {
                 console.debug("Not serializing node: ", node.type)
-                // Don't serialize frontend only nodes but let them make changes
-                if (node.applyToGraph) {
-                    node.applyToGraph(workflow);
-                }
                 continue;
             }
 
-            if (node.mode === 2) {
+            if (node.mode === NodeMode.NEVER) {
                 // Don't serialize muted nodes
                 continue;
             }
 
             const inputs = {};
-            const widgets = node.widgets;
 
-            // Store all widget values
-            if (widgets) {
-                for (let i = 0; i < widgets.length; i++) {
-                    const widget = widgets[i];
-                    let isVirtual = false;
-                    if ("isVirtual" in widget)
-                        isVirtual = (widget as ComfyWidget<any, any>).isVirtual;
-                    if ((!widget.options || widget.options.serialize !== false) && !isVirtual) {
-                        let value = widget.serializeValue ? await widget.serializeValue(n, i) : widget.value;
-                        inputs[widget.name] = value
+            // Store all link values
+            if (node.inputs) {
+                for (let i = 0; i < node.inputs.length; i++) {
+                    const inp = node.inputs[i];
+                    const inputLink = node.getInputLink(i)
+                    const inputNode = node.getInputNode(i)
+                    if (!inputLink || !inputNode)
+                        continue;
+
+                    let serialize = true;
+                    if ("config" in inp)
+                        serialize = (inp as IComfyInputSlot).serialize
+
+                    let isBackendNode = false;
+                    let isInputBackendNode = false;
+                    if ("isBackendNode" in node)
+                        isBackendNode = (node as ComfyGraphNode).isBackendNode;
+                    if ("isBackendNode" in inputNode)
+                        isInputBackendNode = (inputNode as ComfyGraphNode).isBackendNode;
+
+                    // The reasoning behind this check:
+                    // We only want to serialize inputs to nodes with backend equivalents.
+                    // And in ComfyBox, the nodes in litegraph *never* have widgets, instead they're all inputs.
+                    // All values are passed by separate frontend-only nodes,
+                    // either UI-bound or something like ConstantInteger.
+                    // So we know that any value passed into a backend node *must* come from
+                    // a frontend node.
+                    // The rest (links between backend nodes) will be serialized after this bit runs.
+                    if (serialize && isBackendNode && !isInputBackendNode) {
+                        inputs[inp.name] = inputLink.data
                     }
                 }
             }
 
-            // Store all node links
+            // Store all links between nodes
             for (let i = 0; i < node.inputs.length; i++) {
-                let parent: ComfyGraphNodeExecutable = node.getInputNode(i) as ComfyGraphNodeExecutable;
+                let parent: ComfyGraphNode = node.getInputNode(i) as ComfyGraphNode;
                 if (parent) {
                     let link = node.getInputLink(i);
-                    while (parent && parent.isVirtualNode) {
+                    while (parent && !parent.isBackendNode) {
                         link = parent.getInputLink(link.origin_slot);
                         if (link) {
-                            parent = parent.getInputNode(link.origin_slot) as ComfyGraphNodeExecutable;
+                            parent = parent.getInputNode(link.origin_slot) as ComfyGraphNode;
                         } else {
                             parent = null;
                         }
                     }
 
                     if (link) {
-                        inputs[node.inputs[i].name] = [String(link.origin_id), link.origin_slot];
+                        const input = node.inputs[i]
+                        // TODO can null be a legitimate value in some cases?
+                        // Nodes like CLIPLoader will never have a value in the frontend, hence "null".
+                        if (!(input.name in inputs))
+                            inputs[input.name] = [String(link.origin_id), link.origin_slot];
                     }
                 }
             }
@@ -573,14 +577,8 @@ export default class ComfyApp {
 
                     for (const n of p.workflow.nodes) {
                         const node = this.lGraph.getNodeById(n.id);
-                        if (node.widgets) {
-                            for (const widget of node.widgets) {
-                                // Allow widgets to run callbacks after a prompt has been queued
-                                // e.g. random seed after every gen
-                                if ("afterQueued" in widget) {
-                                    (widget as ComfyWidget<any, any>).afterQueued();
-                                }
-                            }
+                        if ("afterQueued" in node) {
+                            (node as ComfyGraphNode).afterQueued();
                         }
                     }
 
@@ -637,17 +635,18 @@ export default class ComfyApp {
 
             const def = defs[node.type];
 
-            for (const widgetNum in node.widgets) {
-                const widget = node.widgets[widgetNum]
+            throw "refreshComboInNodes unimplemented!"
+            // for (const widgetNum in node.widgets) {
+            //     const widget = node.widgets[widgetNum]
 
-                if (widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
-                    widget.options.values = def["input"]["required"][widget.name][0];
+            //     if (widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
+            //         widget.options.values = def["input"]["required"][widget.name][0];
 
-                    if (!widget.options.values.includes(widget.value)) {
-                        widget.value = widget.options.values[0];
-                    }
-                }
-            }
+            //         if (!widget.options.values.includes(widget.value)) {
+            //             widget.value = widget.options.values[0];
+            //         }
+            //     }
+            // }
         }
     }
 
diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts
index f3e6f86..6f334f5 100644
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -1,8 +1,9 @@
 import type ComfyWidget from "$lib/components/widgets/ComfyWidget";
-import { LGraphNode } from "@litegraph-ts/core";
+import { LGraph, LGraphNode } from "@litegraph-ts/core";
 
 export default class ComfyGraphNode extends LGraphNode {
-    isVirtualNode: boolean = false;
+    comfyClass: string | null
+    isBackendNode?: boolean;
 
     afterQueued?(): void;
     onExecuted?(output: any): void;
diff --git a/src/lib/nodes/ComfyReroute.ts b/src/lib/nodes/ComfyReroute.ts
index 4127446..57d4e46 100644
--- a/src/lib/nodes/ComfyReroute.ts
+++ b/src/lib/nodes/ComfyReroute.ts
@@ -18,9 +18,6 @@ export default class ComfyReroute extends ComfyGraphNode {
         }
     }
 
-    // This node is purely frontend and does not impact the resulting prompt so should not be serialized
-    override isVirtualNode: boolean = true;
-
     override titleMode: TitleMode = TitleMode.NO_TITLE;
     override collapsable: boolean = false;
 
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
new file mode 100644
index 0000000..154f8ed
--- /dev/null
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -0,0 +1,103 @@
+import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot } 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";
+
+export interface ComfyWidgetProperties extends Record<string, any> {
+    value: any,
+}
+
+/*
+ * A node that is tied to a UI widget in the frontend. When the frontend's
+ * widget is changed, the value of the first output in the node is updated
+ * in the litegraph instance.
+ */
+export abstract class ComfyWidgetNode extends ComfyGraphNode {
+    abstract properties: ComfyWidgetProperties;
+
+    /** Svelte class for the frontend logic */
+    abstract svelteComponentType: typeof SvelteComponentDev
+    /** Compatible litegraph widget types that can be connected to this node */
+    abstract inputWidgetTypes: string[]
+
+    override isBackendNode = false;
+    override serialize_widgets = true;
+
+    override onExecute() {
+        // Assumption: we will have one output in the inherited class with the
+        // correct type
+        this.setOutputData(0, this.properties.value)
+
+        // TODO send event to linked nodes
+    }
+}
+
+export interface ComfySliderProperties extends ComfyWidgetProperties {
+    value: number
+}
+
+export class ComfySliderNode extends ComfyWidgetNode {
+    override properties: ComfySliderProperties = {
+        value: 0
+    }
+
+    override svelteComponentType = RangeWidget
+    override inputWidgetTypes = ["number", "slider"]
+
+    constructor(name?: string) {
+        super(name)
+        this.addOutput("value", "number");
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfySliderNode,
+    title: "ComfyBox.UI.Slider",
+    desc: "Slider outputting a number value",
+    type: "comfybox/ui/slider"
+})
+
+export interface ComfyComboProperties extends ComfyWidgetProperties {
+    options: string[],
+    value: string
+}
+
+export class ComfyComboNode extends ComfyWidgetNode {
+    override properties: ComfyComboProperties = {
+        options: ["*"],
+        value: "*"
+    }
+
+    override svelteComponentType = ComboWidget
+    override inputWidgetTypes = ["combo", "enum"]
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyComboNode,
+    title: "ComfyBox.UI.Combo",
+    desc: "Combo box outputting a string value",
+    type: "comfybox/ui/combo"
+})
+
+export interface ComfyTextProperties extends ComfyWidgetProperties {
+    value: string
+}
+
+export class ComfyTextNode extends ComfyWidgetNode {
+    override properties: ComfyTextProperties = {
+        value: ""
+    }
+
+    override svelteComponentType = TextWidget
+    override inputWidgetTypes = ["text"]
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyTextNode,
+    title: "ComfyBox.UI.Text",
+    desc: "Textbox outputting a string value",
+    type: "comfybox/ui/text"
+})
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index f1e1caf..8a5c33a 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -221,12 +221,12 @@ function nodeAdded(node: LGraphNode) {
 
     const parent = findDefaultContainerForInsertion();
     // Add default node panel containing all widgets
-    if (node.widgets && node.widgets.length > 0) {
-        const container = addContainer(parent.id, { title: node.title, direction: "vertical", associatedNode: node.id });
-        for (const widget of node.widgets) {
-            addWidget(container.id, node, widget, { associatedNode: node.id });
-        }
-    }
+    // if (node.widgets && node.widgets.length > 0) {
+    //     const container = addContainer(parent.id, { title: node.title, direction: "vertical", associatedNode: node.id });
+    //     for (const widget of node.widgets) {
+    //         addWidget(container.id, node, widget, { associatedNode: node.id });
+    //     }
+    // }
 }
 
 function removeEntry(state: LayoutState, id: DragItemID) {
diff --git a/src/lib/stores/nodeState.ts b/src/lib/stores/nodeState.ts
index 38c9c71..fdc8683 100644
--- a/src/lib/stores/nodeState.ts
+++ b/src/lib/stores/nodeState.ts
@@ -63,14 +63,14 @@ function nodeAdded(node: LGraphNode) {
 
     const widgets = [];
 
-    if (node.widgets) {
-        for (const [index, widget] of node.widgets.entries()) {
-            let isVirtual = false;
-            if ("isVirtual" in widget)
-                isVirtual = (widget as ComfyWidget<any, any>).isVirtual;
-            widgets.push({ index, widget, value: writable(widget.value), isVirtual: isVirtual })
-        }
-    }
+    // if (node.widgets) {
+    //     for (const [index, widget] of node.widgets.entries()) {
+    //         let isVirtual = false;
+    //         if ("isVirtual" in widget)
+    //             isVirtual = (widget as ComfyWidget<any, any>).isVirtual;
+    //         widgets.push({ index, widget, value: writable(widget.value), isVirtual: isVirtual })
+    //     }
+    // }
 
     state[node.id] = { node: node, name: node.title, widgetStates: widgets }
     store.set(state);
@@ -97,17 +97,17 @@ function configureFinished(graph: LGraph) {
     for (const node of graph.computeExecutionOrder(false, null)) {
         state[node.id].name = node.title;
 
-        const widgetStates = state[node.id].widgetStates;
-        if (node.widgets_values) {
-            for (const [i, value] of node.widgets_values.entries()) {
-                if (i < widgetStates.length && !widgetStates[i].isVirtual) {
-                    widgetStates[i].value.set(value);
-                }
-                else {
-                    console.log("Skip virtual widget", node.id, node.type, widgetStates[i].widget)
-                }
-            }
-        }
+        // const widgetStates = state[node.id].widgetStates;
+        // if (node.widgets_values) {
+        //     for (const [i, value] of node.widgets_values.entries()) {
+        //         if (i < widgetStates.length && !widgetStates[i].isVirtual) {
+        //             widgetStates[i].value.set(value);
+        //         }
+        //         else {
+        //             console.log("Skip virtual widget", node.id, node.type, widgetStates[i].widget)
+        //         }
+        //     }
+        // }
     }
 
     store.set(state)
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 79a5f99..d51bfd5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -5,6 +5,7 @@ import TextWidget from "$lib/widgets/TextWidget.svelte";
 import { type WidgetUIState } from "$lib/stores/nodeState";
 import { get } from "svelte/store"
 import layoutState from "$lib/stores/layoutState"
+import type { SvelteComponentDev } from "svelte/internal";
 
 export function download(filename: string, text: string, type: string = "text/plain") {
     const blob = new Blob([text], { type: type });
@@ -20,13 +21,11 @@ export function download(filename: string, text: string, type: string = "text/pl
     }, 0);
 }
 
-export function getComponentForWidgetState(item: WidgetUIState): any {
-    let ctor: any = null;
-
+export function getComponentForWidgetState(item: WidgetUIState): typeof SvelteComponentDev {
     // custom widgets with TypeScript sources
     let override = ComfyApp.widget_type_overrides[item.widget.type]
     if (override) {
-        return override;
+        return override
     }
 
     // litegraph.ts built-in widgets
diff --git a/src/lib/widgets.ts b/src/lib/widgets.ts
index 2bf5bab..e3e08e8 100644
--- a/src/lib/widgets.ts
+++ b/src/lib/widgets.ts
@@ -1,144 +1,70 @@
 import type { IWidget, LGraphNode } from "@litegraph-js/core";
 import type ComfyApp from "$lib/components/ComfyApp";
 import ComfyValueControlWidget from "./widgets/ComfyValueControlWidget";
+import type { ComfyInputConfig } from "./IComfyInputSlot";
+import type IComfyInputSlot from "./IComfyInputSlot";
+import { BuiltInSlotShape } from "@litegraph-ts/core";
 
-export interface WidgetData {
-    widget: IWidget,
-    minWidth?: number,
-    minHeight?: number
-}
+type WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp) => IComfyInputSlot;
 
-type WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp) => WidgetData;
-
-
-type NumberConfig = { min: number, max: number, step: number, precision: number }
-type NumberDefaults = { val: number, config: NumberConfig }
-
-function getNumberDefaults(inputData: any, defaultStep: number): NumberDefaults {
-    let defaultVal = inputData[1]["default"];
+function getNumberDefaults(inputData: any, defaultStep: number): ComfyInputConfig {
+    let defaultValue = inputData[1]["default"];
     let { min, max, step } = inputData[1];
 
-    if (defaultVal == undefined) defaultVal = 0;
+    if (defaultValue == undefined) defaultValue = 0;
     if (min == undefined) min = 0;
     if (max == undefined) max = 2048;
     if (step == undefined) step = defaultStep;
 
-    return { val: defaultVal, config: { min, max, step: step, precision: 0 } };
+    return { min, max, step: step, precision: 0, defaultValue };
 }
 
-
-const FLOAT: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): WidgetData => {
-    const { val, config } = getNumberDefaults(inputData, 0.5);
-    return { widget: node.addWidget("number", inputName, val, () => { }, config) };
+function addComfyInput(node: LGraphNode, inputName: string, extraInfo: Partial<IComfyInputSlot> = {}): IComfyInputSlot {
+    const input = node.addInput(inputName) as IComfyInputSlot
+    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;
 }
 
+const FLOAT: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
+    const config = getNumberDefaults(inputData, 0.5);
+    return addComfyInput(node, inputName, { type: "number", config })
+}
 
-const INT: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): WidgetData => {
-    const { val, config } = getNumberDefaults(inputData, 1);
-    return {
-        widget: node.addWidget(
-            "number",
-            inputName,
-            val,
-            function(v) {
-                const s = this.options.step;
-                this.value = Math.round(v / s) * s;
-            },
-            config
-        ),
-    };
+const INT: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
+    const config = getNumberDefaults(inputData, 1);
+    return addComfyInput(node, inputName, { type: "number", config })
 };
 
-function seedWidget(node, inputName, inputData, app) {
-	const seed = INT(node, inputName, inputData, app);
-	const seedControl = new ComfyValueControlWidget("control_after_generate", "randomize", node, seed.widget);
-    node.addCustomWidget(seedControl);
-
-	// seed.widget.linkedWidgets = [seedControl];
-	return seed;
-}
-
-const STRING: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp): WidgetData => {
-    const defaultVal = inputData[1].default || "";
+const STRING: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp): IComfyInputSlot => {
+    const defaultValue = inputData[1].default || "";
     const multiline = !!inputData[1].multiline;
 
-    // if (multiline) {
-    //     return addMultilineWidget(node, inputName, { defaultVal, ...inputData[1] }, app);
-    // } else {
-    return { widget: node.addWidget("text", inputName, defaultVal, () => { }, { multiline }) };
-    // }
+    return addComfyInput(node, inputName, { type: "string", config: { defaultValue, multiline } })
 };
 
-const COMBO: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): WidgetData => {
+const COMBO: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
     const type = inputData[0];
     let defaultValue = type[0];
     if (inputData[1] && inputData[1].default) {
         defaultValue = inputData[1].default;
     }
-    return { widget: node.addWidget("combo", inputName, defaultValue, () => { }, { values: type }) };
+    return addComfyInput(node, inputName, { type: "string", config: { values: type, defaultValue } })
 }
 
-const IMAGEUPLOAD: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app): WidgetData => {
-    const imageWidget = node.widgets.find((w) => w.name === "image");
-    let uploadWidget: IWidget;
-
-    // async function uploadFile(file: File, updateNode: boolean) {
-    //     try {
-    //         // Wrap file in formdata so it includes filename
-    //         const body = new FormData();
-    //         body.append("image", file);
-    //         const resp = await fetch("/upload/image", {
-    //             method: "POST",
-    //             body,
-    //         });
-
-    //         if (resp.status === 200) {
-    //             const data = await resp.json();
-    //             // Add the file as an option and update the widget value
-    //             if (!imageWidget.options.values.includes(data.name)) {
-    //                 imageWidget.options.values.push(data.name);
-    //             }
-
-    //             if (updateNode) {
-    //                 // showImage(data.name);
-    //                 imageWidget.value = data.name;
-    //             }
-    //         } else {
-    //             alert(resp.status + " - " + resp.statusText);
-    //         }
-    //     } catch (error) {
-    //         alert(error);
-    //     }
-    // }
-
-    // const fileInput = document.createElement("input");
-    // Object.assign(fileInput, {
-    //     type: "file",
-    //     accept: "image/jpeg,image/png",
-    //     style: "display: none",
-    //     onchange: async () => {
-    //         if (fileInput.files.length) {
-    //             await uploadFile(fileInput.files[0], true);
-    //         }
-    //     },
-    // });
-    // document.body.append(fileInput);
-
-    // Create the button widget for selecting the files
-    uploadWidget = node.addWidget("button", "choose file to upload", "image", () => {
-        // fileInput.click();
-    });
-    uploadWidget.options = { serialize: false };
-
-    return { widget: uploadWidget };
+const IMAGEUPLOAD: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app): IComfyInputSlot => {
+    return addComfyInput(node, inputName, { type: "number", config: {} })
 }
 
-
 export type WidgetRepository = Record<string, WidgetFactory>
 
 export const ComfyWidgets: WidgetRepository = {
-    "INT:seed": seedWidget,
-    "INT:noise_seed": seedWidget,
+    "INT:seed": INT,
+    "INT:noise_seed": INT,
     FLOAT,
     INT,
     STRING,

From 5b4254c054644390ab0be332523cd8539ff9d5a7 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sun, 30 Apr 2023 17:29:27 -0700
Subject: [PATCH 12/27] Node colorization for frontend/backend

---
 litegraph                         |  2 +-
 src/lib/components/ComfyApp.ts    | 18 ++++++++--
 src/lib/nodes/ComfyWidgetNodes.ts | 60 +++++++++++++++++++++++++------
 src/lib/nodes/index.ts            |  1 +
 src/lib/widgets.ts                |  3 --
 5 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/litegraph b/litegraph
index 950a78d..23242ca 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit 950a78df0327d55ddee76acbe1311b2a1515d359
+Subproject commit 23242ca3d77e4463158cc7e340cac29409260440
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 30452f3..97bff8d 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/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)
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 154f8ed..008f394 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/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"
 })
diff --git a/src/lib/nodes/index.ts b/src/lib/nodes/index.ts
index e355079..c35b6e8 100644
--- a/src/lib/nodes/index.ts
+++ b/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"
diff --git a/src/lib/widgets.ts b/src/lib/widgets.ts
index e3e08e8..0bc4464 100644
--- a/src/lib/widgets.ts
+++ b/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;
 }
 

From 890c839b4db02cec95d2583dca4898081ff3c741 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Tue, 2 May 2023 14:58:02 -0700
Subject: [PATCH 13/27] temp

---
 src/lib/IComfyInputSlot.ts                |   1 +
 src/lib/components/ComfyApp.svelte        |   8 +-
 src/lib/components/WidgetContainer.svelte |   5 +-
 src/lib/nodes/ComfyWidgetNodes.ts         | 136 ++++++++++++++++++----
 src/lib/stores/layoutState.ts             |  81 +++++--------
 src/lib/widgets/ComboWidget.svelte        |  29 +++--
 src/lib/widgets/RangeWidget.svelte        |  33 +++---
 src/lib/widgets/TextWidget.svelte         |  23 ++--
 8 files changed, 202 insertions(+), 114 deletions(-)

diff --git a/src/lib/IComfyInputSlot.ts b/src/lib/IComfyInputSlot.ts
index 4f6b090..0765207 100644
--- a/src/lib/IComfyInputSlot.ts
+++ b/src/lib/IComfyInputSlot.ts
@@ -1,5 +1,6 @@
 import type { INodeInputSlot } from "@litegraph-ts/core";
 
+// TODO generalize
 export type ComfyInputConfig = {
     min?: number,
     max?: number,
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index a3ffc7d..3ed254a 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -110,10 +110,10 @@
      app.eventBus.on("configured", nodeState.configureFinished);
      app.eventBus.on("cleared", nodeState.clear);
 
-     // app.eventBus.on("nodeAdded", layoutState.nodeAdded);
-     // app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
-     // app.eventBus.on("configured", layoutState.configureFinished);
-     // app.eventBus.on("cleared", layoutState.clear);
+     app.eventBus.on("nodeAdded", layoutState.nodeAdded);
+     app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
+     app.eventBus.on("configured", layoutState.configureFinished);
+     app.eventBus.on("cleared", layoutState.clear);
 
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 44302a1..67f542c 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -27,7 +27,6 @@
  }
  else if (dragItem.type === "widget") {
      widget = dragItem as WidgetLayout;
-     widgetState = nodeState.findWidgetByName(widget.nodeId, widget.widgetName)
      container = null;
  }
 
@@ -47,9 +46,9 @@
 {:else if widget}
     <div class="widget" class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
-        class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.attrs.associatedNode}
+        class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
         >
-        <svelte:component this={getComponentForWidgetState(widgetState)} item={widgetState} />
+        <svelte:component this={widget.node.svelteComponentType} node={widget.node} />
     </div>
     {#if showHandles}
         <div class="handle handle-widget" style="z-index: {zIndex+100}" data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 008f394..7a8d20c 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -6,9 +6,10 @@ 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";
+import type IComfyInputSlot from "$lib/IComfyInputSlot";
+import { writable, type Unsubscriber, type Writable } from "svelte/store";
 
 export interface ComfyWidgetProperties extends Record<string, any> {
-    value: any,
 }
 
 /*
@@ -16,14 +17,20 @@ export interface ComfyWidgetProperties extends Record<string, any> {
  * widget is changed, the value of the first output in the node is updated
  * in the litegraph instance.
  */
-export abstract class ComfyWidgetNode extends ComfyGraphNode {
+export abstract class ComfyWidgetNode<T> extends ComfyGraphNode {
     abstract properties: ComfyWidgetProperties;
 
+    value: Writable<T>
+    unsubscribe: Unsubscriber;
+
     /** Svelte class for the frontend logic */
     abstract svelteComponentType: typeof SvelteComponentDev
     /** Compatible litegraph widget types that can be connected to this node */
     abstract inputWidgetTypes: string[]
 
+    /** If false, user manually set min/max/step, and should not be autoinherited from connected input */
+    autoConfig: boolean = true;
+
     override isBackendNode = false;
     override serialize_widgets = true;
 
@@ -31,9 +38,10 @@ export abstract class ComfyWidgetNode extends ComfyGraphNode {
 
     override size: Vector2 = [60, 40];
 
-    constructor(name?: string) {
-        super(name)
+    constructor(name?: string, value: T) {
         const color = LGraphCanvas.node_colors["blue"]
+        super(name)
+        this.value = writable(value)
         this.color ||= color.color
         this.bgColor ||= color.bgColor
         this.displayWidget = this.addWidget<ITextWidget>(
@@ -41,16 +49,15 @@ export abstract class ComfyWidgetNode extends ComfyGraphNode {
             "Value",
             ""
         );
+        this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
     }
 
-    override onPropertyChanged(name: string, value: any) {
-        if (name == "value") {
-            this.displayWidget.value = Watch.toString(value)
-        }
+    private onValueUpdated(value: any) {
+        this.displayWidget.value = Watch.toString(value)
     }
 
     setValue(value: any) {
-        this.setProperty("value", value)
+        this.value.set(value)
     }
 
     override onExecute() {
@@ -60,15 +67,54 @@ export abstract class ComfyWidgetNode extends ComfyGraphNode {
 
         // TODO send event to linked nodes
     }
+
+    onConnectOutput(
+        outputIndex: number,
+        inputType: INodeInputSlot["type"],
+        input: INodeInputSlot,
+        inputNode: LGraphNode,
+        inputIndex: number
+    ): boolean {
+        if (this.autoConfig) {
+            // Copy properties from default config in input slot
+            if ("config" in input) {
+                const comfyInput = input as IComfyInputSlot;
+                for (const key in comfyInput.config)
+                    this.setProperty(key, comfyInput.config[key])
+            }
+            console.debug("Property copy", input, this.properties)
+        }
+
+        return true;
+    }
+
+    clampConfig() {
+        for (const link of this.getOutputLinks(0)) {
+            const node = this.graph._nodes_by_id[link.target_id]
+            if (node) {
+                const input = node.inputs[link.target_slot]
+                if (input && "config" in input)
+                    this.clampOneConfig(input as IComfyInputSlot)
+            }
+        }
+    }
+
+    clampOneConfig(input: IComfyInputSlot) {}
 }
 
 export interface ComfySliderProperties extends ComfyWidgetProperties {
-    value: number
+    min: number,
+    max: number,
+    step: number,
+    precision: number
 }
 
-export class ComfySliderNode extends ComfyWidgetNode {
+export class ComfySliderNode extends ComfyWidgetNode<number> {
     override properties: ComfySliderProperties = {
-        value: 0
+        min: 0,
+        max: 10,
+        step: 1,
+        precision: 1
     }
 
     override svelteComponentType = RangeWidget
@@ -79,6 +125,17 @@ export class ComfySliderNode extends ComfyWidgetNode {
             { name: "value", type: "number" }
         ]
     }
+
+    constructor(name?: string) {
+        super(name, 0)
+    }
+
+    override clampOneConfig(input: IComfyInputSlot) {
+        this.setProperty("min", Math.max(this.properties.min, input.config.min))
+        this.setProperty("max", Math.max(this.properties.max, input.config.max))
+        this.setProperty("step", Math.max(this.properties.step, input.config.step))
+        this.setProperty("value", Math.max(Math.min(this.properties.value, this.properties.max), this.properties.min))
+    }
 }
 
 LiteGraph.registerNodeType({
@@ -89,14 +146,12 @@ LiteGraph.registerNodeType({
 })
 
 export interface ComfyComboProperties extends ComfyWidgetProperties {
-    options: string[],
-    value: string
+    options: string[]
 }
 
-export class ComfyComboNode extends ComfyWidgetNode {
+export class ComfyComboNode extends ComfyWidgetNode<string> {
     override properties: ComfyComboProperties = {
-        options: ["*"],
-        value: "*"
+        options: ["*"]
     }
 
     static slotLayout: SlotLayout = {
@@ -107,6 +162,43 @@ export class ComfyComboNode extends ComfyWidgetNode {
 
     override svelteComponentType = ComboWidget
     override inputWidgetTypes = ["combo", "enum"]
+
+    constructor(name?: string) {
+        super(name, "*")
+    }
+
+    onConnectOutput(
+        outputIndex: number,
+        inputType: INodeInputSlot["type"],
+        input: INodeInputSlot,
+        inputNode: LGraphNode,
+        inputIndex: number
+    ): boolean {
+        if (!super.onConnectOutput(outputIndex, inputType, input, inputNode, inputIndex))
+            return false;
+
+        const thisProps = this.properties;
+        const otherProps = inputNode.properties;
+
+        // Ensure combo options match
+        if (!(otherProps.options instanceof Array))
+            return false;
+        if (otherProps.options.length !== thisProps.options.length)
+            return false;
+        if (otherProps.find((v, i) => thisProps[i] !== v))
+            return false;
+
+        return true;
+    }
+
+    override clampOneConfig(input: IComfyInputSlot) {
+        if (!(this.properties.value in input.config.values)) {
+            if (input.config.values.length === 0)
+                this.setProperty("value", "")
+            else
+                this.setProperty("value", input.config.values[0])
+        }
+    }
 }
 
 LiteGraph.registerNodeType({
@@ -117,12 +209,12 @@ LiteGraph.registerNodeType({
 })
 
 export interface ComfyTextProperties extends ComfyWidgetProperties {
-    value: string
+    multiline: boolean;
 }
 
-export class ComfyTextNode extends ComfyWidgetNode {
+export class ComfyTextNode extends ComfyWidgetNode<string> {
     override properties: ComfyTextProperties = {
-        value: ""
+        multiline: false
     }
 
     static slotLayout: SlotLayout = {
@@ -133,6 +225,10 @@ export class ComfyTextNode extends ComfyWidgetNode {
 
     override svelteComponentType = TextWidget
     override inputWidgetTypes = ["text"]
+
+    constructor(name?: string) {
+        super(name, "")
+    }
 }
 
 LiteGraph.registerNodeType({
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 8a5c33a..1a4dc77 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -5,6 +5,7 @@ import type { LGraphNode, IWidget, LGraph } from "@litegraph-ts/core"
 import nodeState from "$lib/state/nodeState";
 import type { NodeStateStore } from './nodeState';
  import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+import type { ComfyWidgetNode } from '$lib/nodes';
 
 type DragItemEntry = {
     dragItem: IDragItem,
@@ -59,16 +60,6 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
                 editable: true,
             },
         ]
-    },
-    {
-        categoryName: "behavior",
-        specs: [
-            {
-                name: "associatedNode",
-                type: "number",
-                editable: false,
-            },
-        ]
     }
 ];
 export { ALL_ATTRIBUTES };
@@ -77,8 +68,7 @@ export type Attributes = {
     direction: string,
     title: string,
     showTitle: boolean,
-    classes: string,
-    associatedNode: number | null
+    classes: string
 }
 
 export interface IDragItem {
@@ -94,8 +84,7 @@ export interface ContainerLayout extends IDragItem {
 
 export interface WidgetLayout extends IDragItem {
     type: "widget",
-    nodeId: number,
-    widgetName: string
+    node: ComfyWidgetNode
 }
 
 type DragItemID = string;
@@ -121,7 +110,8 @@ const store: Writable<LayoutState> = writable({
     allItems: {},
     currentId: 0,
     currentSelection: [],
-    isMenuOpen: false
+    isMenuOpen: false,
+    isConfiguring: true
 })
 addContainer(null, { direction: "horizontal", showTitle: false });
 
@@ -155,7 +145,6 @@ function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> =
             showTitle: true,
             direction: "vertical",
             classes: "",
-            associatedNode: null,
             ...attrs
         }
     }
@@ -173,31 +162,25 @@ function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> =
     return dragItem;
 }
 
-function addWidget(parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes> = {}, index: number = -1): WidgetLayout {
+function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes> = {}, index: number = -1): WidgetLayout {
     const state = get(store);
+    const widgetName = "Widget"
     const dragItem: WidgetLayout = {
         type: "widget",
         id: `${state.currentId++}`,
-        nodeId: node.id,
-        widgetName: widget.name, // TODO name and displayName
+        node: node,
         attrs: {
-            title: widget.name,
+            title: widgetName,
             showTitle: true,
             direction: "horizontal",
             classes: "",
-            associatedNode: null,
             ...attrs
         }
     }
-    const parent = state.allItems[parentId]
-    const entry: DragItemEntry = { dragItem, children: [], parent: parent.dragItem };
+    const parentEntry = state.allItems[parent.id]
+    const entry: DragItemEntry = { dragItem, children: [], parent: parentEntry.dragItem };
     state.allItems[dragItem.id] = entry;
-    parent.children ||= []
-    if (index !== -1)
-        parent.children.splice(index, 0, dragItem)
-    else
-        parent.children.push(dragItem)
-    store.set(state)
+    moveItem(dragItem, parent)
     return dragItem;
 }
 
@@ -220,7 +203,17 @@ function nodeAdded(node: LGraphNode) {
         return;
 
     const parent = findDefaultContainerForInsertion();
-    // Add default node panel containing all widgets
+
+    // Two cases where we want to add nodes:
+    // 1. User adds a new UI node, so we should instantiate its widget in the frontend.
+    // 2. User adds a node with inputs that can be filled by frontend widgets.
+    // Depending on config, this means we should instantiate default UI nodes connected to those inputs.
+
+    if ("svelteComponentType" in node) {
+        addWidget(parent, node as ComfyWidgetNode);
+    }
+
+    // Add default node panel with all widgets autoinstantiated
     // if (node.widgets && node.widgets.length > 0) {
     //     const container = addContainer(parent.id, { title: node.title, direction: "vertical", associatedNode: node.id });
     //     for (const widget of node.widgets) {
@@ -248,32 +241,12 @@ function nodeRemoved(node: LGraphNode) {
 
     console.debug("[layoutState] nodeRemoved", node)
 
-    // Remove widgets bound to the node
     let del = Object.entries(state.allItems).filter(pair =>
         pair[1].dragItem.type === "widget"
-        && pair[1].dragItem.attrs.associatedNode === node.id)
-    for (const item of del) {
-        const [id, dragItem] = item;
-        console.debug("[layoutState] Remove widget", id, state.allItems[id])
-        removeEntry(state, id)
-    }
+        && (pair[1].dragItem as WidgetLayout).node.id === node.id)
 
-    const isAssociatedContainer = (dragItem: IDragItem) =>
-        dragItem.type === "container"
-        && dragItem.attrs.associatedNode === node.id;
-
-    let delContainers = []
-
-    // Remove widget from all children lists
-  // TODO just use parent.children
-    for (const entry of Object.values(state.allItems)) {
-        if (entry.children?.length === 0 && isAssociatedContainer(entry.dragItem))
-            delContainers.push(entry.dragItem.id)
-    }
-
-    // Remove empty containers bound to the node
-    for (const id of delContainers) {
-        console.debug("[layoutState] Remove container", id, state.allItems[id])
+    for (const pair of del) {
+        const [id, dragItem] = pair;
         removeEntry(state, id)
     }
 
@@ -290,7 +263,7 @@ function configureFinished(graph: LGraph) {
     const left = addContainer(state.root.id, { direction: "vertical", showTitle: false });
     const right = addContainer(state.root.id, { direction: "vertical", showTitle: false });
 
-    for (const node of graph.computeExecutionOrder(false, null)) {
+    for (const node of graph._nodes_in_order) {
         nodeAdded(node)
     }
 
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index b8a36bb..c4e2f5e 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -2,32 +2,39 @@
  import type { WidgetDrawState, WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { BlockTitle } from "@gradio/atoms";
  import { Dropdown } from "@gradio/form";
- import { get } from "svelte/store";
  import Select from 'svelte-select';
- export let item: WidgetUIState | null = null;
+ import type { ComfyComboNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfyComboNode | null = null;
+ let nodeValue: Writable<string> | null = null;
  let itemValue: WidgetUIStateStore | null = null;
  let option: any;
 
- $: if(item) {
-     if (!itemValue)
-         itemValue = item.value;
-     if (!option)
-         option = get(item.value);
+ $: if(widget) {
+     node = widget.node as ComfyComboNode
+     nodeValue = node.value;
+     updateOption(); // don't react on option
  };
 
+ function updateOption() {
+     option = get(nodeValue);
+ }
+
  $: if (option && itemValue) {
      $itemValue = option.value
  }
 </script>
 
 <div class="wrapper gr-combo">
-    {#if item !== null && option !== undefined}
+    {#if node !== null && option !== undefined}
         <label>
-            <BlockTitle show_label={true}>{item.widget.name}</BlockTitle>
+            <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
             <Select
                 bind:value={option}
-                bind:items={item.widget.options.values}
-                disabled={item.widget.options.values.length === 0}
+                bind:items={node.properties.values}
+                disabled={node.properties.values.length === 0}
                 clearable={false}
                 on:change
                 on:select
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index f0fd27d..2c86236 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -1,35 +1,38 @@
 <script lang="ts">
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
+ import type { ComfySliderNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
  import { Range } from "@gradio/form";
- import { get } from "svelte/store";
- export let item: WidgetUIState | null = null;
- let itemValue: WidgetUIStateStore | null = null;
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfySliderNode | null = null;
+ let nodeValue: Writable<number> | null = null;
  let option: number | null = null;
 
- $: if (item) {
-     itemValue = item.value;
+ $: if(widget) {
+     node = widget.node
+     nodeValue = node.value;
      updateOption(); // don't react on option
- }
+ };
 
  function updateOption() {
-     option = get(itemValue);
+     option = get(nodeValue);
  }
 
  function onRelease(e: Event) {
-     if (itemValue && option) {
-         $itemValue = option
+     if (nodeValue && option) {
+         $nodeValue = option
      }
  }
 </script>
 
 <div class="wrapper gr-range">
-    {#if item !== null && option !== null}
+    {#if node !== null && option !== null}
         <Range
             bind:value={option}
-            minimum={item.widget.options.min}
-            maximum={item.widget.options.max}
-            step={item.widget.options.step}
-            label={item.widget.name}
+            minimum={node.properties.min}
+            maximum={node.properties.max}
+            step={node.properties.step}
+            label={widget.attrs.title}
             show_label={true}
             on:release={onRelease}
             on:change
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index 960ac4c..58a54bc 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -1,18 +1,27 @@
 <script lang="ts">
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
+ import type { WidgetUIStateStore } from "$lib/stores/nodeState";
  import { TextBox } from "@gradio/form";
- export let item: WidgetUIState | null = null;
+ import type { ComfyComboNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfyComboNode | null = null;
+ let nodeValue: Writable<string> | null = null;
  let itemValue: WidgetUIStateStore | null = null;
- $: if (item) { itemValue = item.value; }
+
+ $: if(widget) {
+     node = widget.node as ComfyComboNode
+     nodeValue = node.value;
+ };
 </script>
 
 <div class="wrapper gr-textbox">
-    {#if item !== null && itemValue !== null}
+    {#if node !== null && nodeValue !== null}
         <TextBox
             bind:value={$itemValue}
-            label={item.widget.name}
-            lines={item.widget.options.multiline ? 5 : 1}
-            max_lines={item.widget.options.multiline ? 5 : 1}
+            label={widget.attrs.title}
+            lines={node.properties.multiline ? 5 : 1}
+            max_lines={node.properties.multiline ? 5 : 1}
             show_label={true}
             on:change
             on:submit

From 573970eac6087c056f4c3278776d50e66cbaea15 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 3 May 2023 00:53:29 -0700
Subject: [PATCH 14/27] Bind widget values to special widget nodes

---
 src/AppMobile.svelte                       |   1 -
 src/lib/GraphSync.ts                       |  76 ++--
 src/lib/components/ComfyApp.svelte         |   6 -
 src/lib/components/ComfyApp.ts             |   2 +-
 src/lib/components/ComfyUIPane.svelte      |   1 -
 src/lib/components/WidgetContainer.svelte  |   7 +-
 src/lib/defaultGraph.ts                    | 394 +--------------------
 src/lib/nodes/ComfyWidgetNodes.ts          |  12 +-
 src/lib/stores/layoutState.ts              |  46 ++-
 src/lib/stores/nodeState.ts                | 154 --------
 src/lib/stores/uiState.ts                  |   3 +-
 src/lib/utils.ts                           |  21 --
 src/lib/widgets/ComboWidget.svelte         |  33 +-
 src/lib/widgets/ComfyGalleryWidget.svelte  |   1 -
 src/lib/widgets/ComfyValueControlWidget.ts |   3 +-
 src/lib/widgets/ComfyWidget.ts             |   2 -
 src/lib/widgets/TextWidget.svelte          |   3 +-
 src/mobile/GenToolbar.svelte               |  14 +-
 src/mobile/routes/home.svelte              |   6 -
 src/mobile/routes/list-subworkflows.svelte |   1 -
 src/mobile/routes/subworkflow.svelte       |  28 +-
 21 files changed, 89 insertions(+), 725 deletions(-)
 delete mode 100644 src/lib/stores/nodeState.ts

diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte
index 21f50df..36abdfd 100644
--- a/src/AppMobile.svelte
+++ b/src/AppMobile.svelte
@@ -4,7 +4,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
  import { download } from "$lib/utils"
diff --git a/src/lib/GraphSync.ts b/src/lib/GraphSync.ts
index e941355..4b18344 100644
--- a/src/lib/GraphSync.ts
+++ b/src/lib/GraphSync.ts
@@ -1,18 +1,13 @@
-import type { LGraph } from "@litegraph-ts/core";
-import nodeState, { type WidgetUIState, type WidgetUIStateStore,  type NodeStateStore, type NodeUIState, type NodeUIStateStore } from "./stores/nodeState";
+import type { LGraph, LGraphNode } from "@litegraph-ts/core";
 import type ComfyApp from "./components/ComfyApp";
-import type { Unsubscriber } from "svelte/store";
+import type { Unsubscriber, Writable } from "svelte/store";
+import type { ComfyWidgetNode } from "./nodes";
 
 type WidgetSubStore = {
     store: WidgetUIStateStore,
     unsubscribe: Unsubscriber
 }
 
-type NodeSubStore = {
-    store: NodeUIStateStore,
-    unsubscribe: Unsubscriber
-}
-
 /*
  * Responsible for watching for and synchronizing state changes from the
  * frontend to the litegraph instance.
@@ -29,68 +24,55 @@ type NodeSubStore = {
  */
 export default class GraphSync {
     graph: LGraph;
-    private _unsubscribe: Unsubscriber;
-    private _finalizer: FinalizationRegistry<number>;
 
-    // nodeId -> widgetSubStores[]
-    private stores: Record<string, WidgetSubStore[]> = {}
+    // nodeId -> widgetSubStore
+    private stores: Record<string, WidgetSubStore> = {}
 
     constructor(app: ComfyApp) {
         this.graph = app.lGraph;
-        this._unsubscribe = nodeState.subscribe(this.onAllNodeStateChanged.bind(this));
-        this._finalizer = new FinalizationRegistry((id: number) => {
-            console.log(`${this} has been garbage collected`);
-            this._unsubscribe();
-        });
+        app.eventBus.on("nodeAdded", this.onNodeAdded.bind(this));
+        app.eventBus.on("nodeRemoved", this.onNodeRemoved.bind(this));
     }
 
-    private onAllNodeStateChanged(state: NodeStateStore) {
+    private onNodeAdded(node: LGraphNode) {
         // TODO assumes only a single graph's widget state.
 
-        for (let nodeId in state) {
-            state[nodeId].node.title = state[nodeId].name;
-            if (!this.stores[nodeId]) {
-                this.addStores(state[nodeId].widgetStates, nodeId);
-            }
-        }
-
-        for (let nodeId in this.stores) {
-            if (!state[nodeId]) {
-                this.removeStores(nodeId);
-            }
+        if ("svelteComponentType" in node) {
+            this.addStore(node as ComfyWidgetNode);
         }
 
         this.graph.setDirtyCanvas(true, true);
     }
 
-    private addStores(widgetStates: WidgetUIState[], nodeId: string) {
-        if (this.stores[nodeId]) {
-            console.warn("Stores already exist!", nodeId, this.stores[nodeId])
+    private onNodeRemoved(node: LGraphNode) {
+        if ("svelteComponentType" in node) {
+            this.removeStore(node as ComfyWidgetNode);
         }
 
-        this.stores[nodeId] = []
-
-        for (const wuis of widgetStates) {
-            const unsub = wuis.value.subscribe((v) => this.onWidgetStateChanged(wuis, v))
-            this.stores[nodeId].push({ store: wuis.value, unsubscribe: unsub });
-        }
-
-        console.debug("NEWSTORES", this.stores[nodeId])
+        this.graph.setDirtyCanvas(true, true);
     }
 
-    private removeStores(nodeId: string) {
-        console.debug("DELSTORES", this.stores[nodeId])
-        for (const ss of this.stores[nodeId]) {
-            ss.unsubscribe();
+    private addStore(node: ComfyWidgetNode) {
+        if (this.stores[node.id]) {
+            console.warn("[GraphSync] Stores already exist!", node.id, this.stores[node.id])
         }
-        delete this.stores[nodeId]
+
+        const unsub = node.value.subscribe((v) => this.onWidgetStateChanged(node, v))
+        this.stores[node.id] = ({ store: node.value, unsubscribe: unsub });
+
+        console.debug("[GraphSync] NEWSTORE", this.stores[node.id])
+    }
+
+    private removeStore(node: ComfyWidgetNode) {
+        console.debug("[GraphSync] DELSTORE", this.stores[node.id])
+        this.stores[node.id].unsubscribe()
+        delete this.stores[node.id]
     }
 
     /*
      * Fired when a single widget's value changes.
      */
-    private onWidgetStateChanged(wuis: WidgetUIState, value: any) {
-        wuis.widget.value = value;
+    private onWidgetStateChanged(node: ComfyWidgetNode, value: any) {
         this.graph.setDirtyCanvas(true, true);
     }
 }
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 3ed254a..0a3a2cc 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -6,7 +6,6 @@
  import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp, { type SerializedAppState } from "./ComfyApp";
  import { Checkbox } from "@gradio/form"
- import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import layoutState from "$lib/stores/layoutState";
  import { ImageViewer } from "$lib/ImageViewer";
@@ -105,11 +104,6 @@
  onMount(async () => {
      app = new ComfyApp();
 
-     app.eventBus.on("nodeAdded", nodeState.nodeAdded);
-     app.eventBus.on("nodeRemoved", nodeState.nodeRemoved);
-     app.eventBus.on("configured", nodeState.configureFinished);
-     app.eventBus.on("cleared", nodeState.clear);
-
      app.eventBus.on("nodeAdded", layoutState.nodeAdded);
      app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
      app.eventBus.on("configured", layoutState.configureFinished);
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 97bff8d..fcc0836 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -433,7 +433,7 @@ export default class ComfyApp {
         this.clean();
 
         if (!graphData) {
-            // graphData = structuredClone(defaultGraph.workflow)
+            graphData = structuredClone(defaultGraph.workflow)
         }
 
         // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 6f6ce4c..8515cff 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -6,7 +6,6 @@
  import ComfyApp  from "./ComfyApp";
  import type { SerializedPanes } from "./ComfyApp"
  import WidgetContainer from "./WidgetContainer.svelte";
- import nodeState from "$lib/stores/nodeState";
  import layoutState, { type ContainerLayout, type DragItem } from "$lib/stores/layoutState";
  import uiState from "$lib/stores/uiState";
 
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 67f542c..9556cdf 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
  import queueState from "$lib/stores/queueState";
- import nodeState, { type WidgetUIState } from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
 
  import layoutState, { type ContainerLayout, type WidgetLayout, type IDragItem } from "$lib/stores/layoutState";
- import { startDrag, stopDrag, getComponentForWidgetState } from "$lib/utils"
+ import { startDrag, stopDrag } from "$lib/utils"
  import BlockContainer from "./BlockContainer.svelte"
 
  export let dragItem: IDragItem | null = null;
@@ -12,14 +11,12 @@
  export let classes: string[] = [];
  let container: ContainerLayout | null = null;
  let widget: WidgetLayout | null = null;
- let widgetState: WidgetUIState | null = null;
  let showHandles: boolean = false;
 
  $: if (!dragItem || !$layoutState.allItems[dragItem.id]) {
      dragItem = null;
      container = null;
      widget = null;
-     widgetState = null;
  }
  else if (dragItem.type === "container") {
      container = dragItem as ContainerLayout;
@@ -48,7 +45,7 @@
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
         class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
         >
-        <svelte:component this={widget.node.svelteComponentType} node={widget.node} />
+        <svelte:component this={widget.node.svelteComponentType} {widget} />
     </div>
     {#if showHandles}
         <div class="handle handle-widget" style="z-index: {zIndex+100}" data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
diff --git a/src/lib/defaultGraph.ts b/src/lib/defaultGraph.ts
index eecb0e3..23ca580 100644
--- a/src/lib/defaultGraph.ts
+++ b/src/lib/defaultGraph.ts
@@ -4,398 +4,16 @@ const defaultGraph: SerializedAppState = {
   createdBy: "ComfyBox",
   version: 1,
   workflow: {
-    last_node_id: 9,
-    last_link_id: 9,
-    nodes: [
-      {
-        id: 7,
-        type: "CLIPTextEncode",
-        pos: [
-          413,
-          389
-        ],
-        size: [
-          425.27801513671875,
-          180.6060791015625
-        ],
-        flags: {},
-        order: 3,
-        mode: 0,
-        inputs: [
-          {
-            name: "clip",
-            type: "CLIP",
-            link: 5
-          }
-        ],
-        outputs: [
-          {
-            name: "CONDITIONING",
-            type: "CONDITIONING",
-            links: [
-              6
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "CLIPTextEncode",
-        properties: {},
-        widgets_values: [
-          "bad hands"
-        ]
-      },
-      {
-        id: 6,
-        type: "CLIPTextEncode",
-        pos: [
-          415,
-          186
-        ],
-        size: [
-          422.84503173828125,
-          164.31304931640625
-        ],
-        flags: {},
-        order: 2,
-        mode: 0,
-        inputs: [
-          {
-            name: "clip",
-            type: "CLIP",
-            link: 3
-          }
-        ],
-        outputs: [
-          {
-            name: "CONDITIONING",
-            type: "CONDITIONING",
-            links: [
-              4
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "CLIPTextEncode",
-        properties: {},
-        widgets_values: [
-          "masterpiece best quality girl"
-        ]
-      },
-      {
-        id: 5,
-        type: "EmptyLatentImage",
-        pos: [
-          473,
-          609
-        ],
-        size: [
-          315,
-          106
-        ],
-        flags: {},
-        order: 0,
-        mode: 0,
-        inputs: [],
-        outputs: [
-          {
-            name: "LATENT",
-            type: "LATENT",
-            links: [
-              2
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "EmptyLatentImage",
-        properties: {},
-        widgets_values: [
-          512,
-          512,
-          1
-        ]
-      },
-      {
-        id: 3,
-        type: "KSampler",
-        pos: [
-          863,
-          186
-        ],
-        size: [
-          315,
-          262
-        ],
-        flags: {},
-        order: 4,
-        mode: 0,
-        inputs: [
-          {
-            name: "model",
-            type: "MODEL",
-            link: 1
-          },
-          {
-            name: "positive",
-            type: "CONDITIONING",
-            link: 4
-          },
-          {
-            name: "negative",
-            type: "CONDITIONING",
-            link: 6
-          },
-          {
-            name: "latent_image",
-            type: "LATENT",
-            link: 2
-          }
-        ],
-        outputs: [
-          {
-            name: "LATENT",
-            type: "LATENT",
-            links: [
-              7
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "KSampler",
-        properties: {},
-        widgets_values: [
-          8566257,
-          "randomize",
-          8,
-          8,
-          "euler",
-          "normal",
-          1
-        ]
-      },
-      {
-        id: 8,
-        type: "VAEDecode",
-        pos: [
-          1209,
-          188
-        ],
-        size: [
-          210,
-          46
-        ],
-        flags: {},
-        order: 5,
-        mode: 0,
-        inputs: [
-          {
-            name: "samples",
-            type: "LATENT",
-            link: 7
-          },
-          {
-            name: "vae",
-            type: "VAE",
-            link: 8
-          }
-        ],
-        outputs: [
-          {
-            name: "IMAGE",
-            type: "IMAGE",
-            links: [
-              9
-            ],
-            slot_index: 0
-          }
-        ],
-        title: "VAEDecode",
-        properties: {}
-      },
-      {
-        id: 9,
-        type: "SaveImage",
-        pos: [
-          1451,
-          189
-        ],
-        size: [
-          210,
-          82
-        ],
-        flags: {},
-        order: 6,
-        mode: 0,
-        inputs: [
-          {
-            name: "images",
-            type: "IMAGE",
-            link: 9
-          }
-        ],
-        outputs: [],
-        title: "SaveImage",
-        properties: {},
-        widgets_values: [
-          [],
-          "ComfyUI"
-        ]
-      },
-      {
-        id: 4,
-        type: "CheckpointLoaderSimple",
-        pos: [
-          26,
-          474
-        ],
-        size: [
-          315,
-          98
-        ],
-        flags: {},
-        order: 1,
-        mode: 0,
-        inputs: [],
-        outputs: [
-          {
-            name: "MODEL",
-            type: "MODEL",
-            links: [
-              1
-            ],
-            slot_index: 0
-          },
-          {
-            name: "CLIP",
-            type: "CLIP",
-            links: [
-              3,
-              5
-            ],
-            slot_index: 1
-          },
-          {
-            name: "VAE",
-            type: "VAE",
-            links: [
-              8
-            ],
-            slot_index: 2
-          }
-        ],
-        title: "CheckpointLoaderSimple",
-        properties: {},
-        widgets_values: [
-          "v1-5-pruned-emaonly.ckpt"
-        ]
-      }
-    ],
-    links: [
-      [
-        1,
-        4,
-        0,
-        3,
-        0,
-        "MODEL"
-      ],
-      [
-        2,
-        5,
-        0,
-        3,
-        3,
-        "LATENT"
-      ],
-      [
-        3,
-        4,
-        1,
-        6,
-        0,
-        "CLIP"
-      ],
-      [
-        4,
-        6,
-        0,
-        3,
-        1,
-        "CONDITIONING"
-      ],
-      [
-        5,
-        4,
-        1,
-        7,
-        0,
-        "CLIP"
-      ],
-      [
-        6,
-        7,
-        0,
-        3,
-        2,
-        "CONDITIONING"
-      ],
-      [
-        7,
-        3,
-        0,
-        8,
-        0,
-        "LATENT"
-      ],
-      [
-        8,
-        4,
-        2,
-        8,
-        1,
-        "VAE"
-      ],
-      [
-        9,
-        8,
-        0,
-        9,
-        0,
-        "IMAGE"
-      ]
-    ],
+    last_node_id: 0,
+    last_link_id: 0,
+    nodes: [],
+    links: [],
     groups: [],
     config: {},
     extra: {},
-    version: 10
+    version: 0
   },
-  panes: {
-    panels: [
-      [
-        {
-          nodeId: 7
-        },
-        {
-          nodeId: 3
-        }
-      ],
-      [
-        {
-          nodeId: 6
-        },
-        {
-          nodeId: 9
-        },
-        {
-          nodeId: 4
-        }
-      ],
-      [
-        {
-          nodeId: 5
-        }
-      ]
-    ]
-  }
+  panes: {}
 }
 
 export default defaultGraph;
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 7a8d20c..6bbe53d 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -17,7 +17,7 @@ export interface ComfyWidgetProperties extends Record<string, any> {
  * widget is changed, the value of the first output in the node is updated
  * in the litegraph instance.
  */
-export abstract class ComfyWidgetNode<T> extends ComfyGraphNode {
+export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     abstract properties: ComfyWidgetProperties;
 
     value: Writable<T>
@@ -134,7 +134,7 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
         this.setProperty("min", Math.max(this.properties.min, input.config.min))
         this.setProperty("max", Math.max(this.properties.max, input.config.max))
         this.setProperty("step", Math.max(this.properties.step, input.config.step))
-        this.setProperty("value", Math.max(Math.min(this.properties.value, this.properties.max), this.properties.min))
+        this.setValue(Math.max(Math.min(this.properties.value, this.properties.max), this.properties.min))
     }
 }
 
@@ -151,7 +151,7 @@ export interface ComfyComboProperties extends ComfyWidgetProperties {
 
 export class ComfyComboNode extends ComfyWidgetNode<string> {
     override properties: ComfyComboProperties = {
-        options: ["*"]
+        options: ["A", "B", "C", "D"]
     }
 
     static slotLayout: SlotLayout = {
@@ -164,7 +164,7 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
     override inputWidgetTypes = ["combo", "enum"]
 
     constructor(name?: string) {
-        super(name, "*")
+        super(name, "A")
     }
 
     onConnectOutput(
@@ -194,9 +194,9 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
     override clampOneConfig(input: IComfyInputSlot) {
         if (!(this.properties.value in input.config.values)) {
             if (input.config.values.length === 0)
-                this.setProperty("value", "")
+                this.setValue("")
             else
-                this.setProperty("value", input.config.values[0])
+                this.setValue(input.config.values[0])
         }
     }
 }
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 1a4dc77..7c5a0e3 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -2,8 +2,6 @@ import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
 import type { LGraphNode, IWidget, LGraph } from "@litegraph-ts/core"
-import nodeState from "$lib/state/nodeState";
-import type { NodeStateStore } from './nodeState';
  import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
 import type { ComfyWidgetNode } from '$lib/nodes';
 
@@ -90,8 +88,8 @@ export interface WidgetLayout extends IDragItem {
 type DragItemID = string;
 
 type LayoutStateOps = {
-    addContainer: (parentId: DragItemID, attrs: Partial<Attributes>, index: number) => ContainerLayout,
-    addWidget: (parentId: DragItemID, node: LGraphNode, widget: IWidget<any, any>, attrs: Partial<Attributes>, index: number) => WidgetLayout,
+    addContainer: (parent: ContainerLayout | null, attrs: Partial<Attributes>, index: number) => ContainerLayout,
+    addWidget: (parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partial<Attributes>, index: number) => WidgetLayout,
     findDefaultContainerForInsertion: () => ContainerLayout | null,
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
@@ -100,7 +98,7 @@ type LayoutStateOps = {
     groupItems: (dragItems: IDragItem[]) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
     getCurrentSelection: () => IDragItem[],
-    clear: () => void,
+    clear: (state?: Partial<LayoutState>) => void,
     resetLayout: () => void,
 }
 
@@ -135,7 +133,7 @@ function findDefaultContainerForInsertion(): ContainerLayout | null {
     return null
 }
 
-function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> = {}, index: number = -1): ContainerLayout {
+function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes> = {}, index: number = -1): ContainerLayout {
     const state = get(store);
     const dragItem: ContainerLayout = {
         type: "container",
@@ -148,15 +146,10 @@ function addContainer(parentId: DragItemID | null, attrs: Partial<Attributes> =
             ...attrs
         }
     }
-    const parent = parentId ? state.allItems[parentId] : null;
-    const entry: DragItemEntry = { dragItem, children: [], parent: parent?.dragItem };
+    const entry: DragItemEntry = { dragItem, children: [], parent: null };
     state.allItems[dragItem.id] = entry;
     if (parent) {
-        parent.children ||= []
-        if (index)
-            parent.children.splice(index, 0, dragItem)
-        else
-            parent.children.push(dragItem)
+        moveItem(dragItem, parent)
     }
     store.set(state)
     return dragItem;
@@ -178,7 +171,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
         }
     }
     const parentEntry = state.allItems[parent.id]
-    const entry: DragItemEntry = { dragItem, children: [], parent: parentEntry.dragItem };
+    const entry: DragItemEntry = { dragItem, children: [], parent: null };
     state.allItems[dragItem.id] = entry;
     moveItem(dragItem, parent)
     return dragItem;
@@ -209,6 +202,7 @@ function nodeAdded(node: LGraphNode) {
     // 2. User adds a node with inputs that can be filled by frontend widgets.
     // Depending on config, this means we should instantiate default UI nodes connected to those inputs.
 
+    console.debug(node)
     if ("svelteComponentType" in node) {
         addWidget(parent, node as ComfyWidgetNode);
     }
@@ -254,21 +248,25 @@ function nodeRemoved(node: LGraphNode) {
 }
 
 function configureFinished(graph: LGraph) {
-    const state = get(store)
     const id = 0;
 
-    state.isConfiguring = false;
+    clear({isConfiguring: false})
 
-    state.root = addContainer(null, { direction: "horizontal", showTitle: false });
-    const left = addContainer(state.root.id, { direction: "vertical", showTitle: false });
-    const right = addContainer(state.root.id, { direction: "vertical", showTitle: false });
+    const root = addContainer(null, { direction: "horizontal", showTitle: false });
+    const left = addContainer(root, { direction: "vertical", showTitle: false });
+    const right = addContainer(root, { direction: "vertical", showTitle: false });
 
-    for (const node of graph._nodes_in_order) {
+    const state = get(store)
+    state.root = root;
+    store.set(state)
+
+    console.debug("[layoutState] configure begin", state, graph)
+
+    for (const node of graph._nodes) {
         nodeAdded(node)
     }
 
     console.debug("[layoutState] configureFinished", state)
-    store.set(state)
 }
 
 function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
@@ -324,7 +322,7 @@ function groupItems(dragItems: IDragItem[]): ContainerLayout {
             index = indexFound
     }
 
-    const container = addContainer(parent.id, { title: "Group" }, index)
+    const container = addContainer(parent as ContainerLayout, { title: "Group" }, index)
 
     for (const item of dragItems) {
         moveItem(item, container)
@@ -364,7 +362,7 @@ function ungroup(container: ContainerLayout) {
     store.set(state)
 }
 
-function clear() {
+function clear(state: Partial<LayoutState> = {}) {
     store.set({
         root: null,
         allItems: {},
@@ -372,8 +370,8 @@ function clear() {
         currentSelection: [],
         isMenuOpen: false,
         isConfiguring: true,
+        ...state
     })
-    addContainer(null, { direction: "horizontal", showTitle: false });
 }
 
 function resetLayout() {
diff --git a/src/lib/stores/nodeState.ts b/src/lib/stores/nodeState.ts
deleted file mode 100644
index fdc8683..0000000
--- a/src/lib/stores/nodeState.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { writable, get } from 'svelte/store';
-import type { LGraph, LGraphNode, IWidget } from "@litegraph-ts/core";
-import type { Readable, Writable } from 'svelte/store';
-import type ComfyGraphNode from '$lib/nodes/ComfyGraphNode';
-import type ComfyWidget from '$lib/widgets/ComfyWidget';
-
-/** store for one node's state */
-export type NodeUIStateStore = Writable<any>
-
-export type NodeUIState = {
-    name: string,
-    node: LGraphNode,
-    widgetStates: WidgetUIState[]
-}
-
-export type WidgetDrawState = {
-    isNodeExecuting: boolean
-}
-
-/** store for one widget's state */
-export type WidgetUIStateStore = Writable<any>
-
-export type WidgetUIState = {
-    /** position in the node's list of widgets */
-    index: number,
-    /** parent node containing the widget */
-    node: LGraphNode,
-    /** actual widget instance */
-    widget: IWidget,
-    /** widget value as a store, to react to changes */
-    value: WidgetUIStateStore,
-    /**
-     * true if this widget was added purely from the frontend. what this means:
-     * - this widget's state will not be saved to the workflow
-     * - the widget was added on startup by some subclass of ComfyGraphNode
-     */
-    isVirtual: boolean
-}
-
-export type NodeID = number;
-
-type NodeStateOps = {
-    nodeAdded: (node: LGraphNode) => void,
-    nodeRemoved: (node: LGraphNode) => void,
-    configureFinished: (graph: LGraph) => void,
-    nodeStateChanged: (node: LGraphNode) => void,
-    widgetStateChanged: (nodeId: number, widget: IWidget<any, any>) => void,
-    findWidgetByName: (nodeId: number, name: string) => WidgetUIState | null,
-    clear: () => void,
-}
-
-export type NodeStateStore = Record<NodeID, NodeUIState>;
-type WritableNodeStateStore = Writable<NodeStateStore> & NodeStateOps;
-
-const store: Writable<NodeStateStore> = writable({})
-
-function clear() {
-    store.set({})
-}
-
-function nodeAdded(node: LGraphNode) {
-    let state = get(store)
-
-    const widgets = [];
-
-    // if (node.widgets) {
-    //     for (const [index, widget] of node.widgets.entries()) {
-    //         let isVirtual = false;
-    //         if ("isVirtual" in widget)
-    //             isVirtual = (widget as ComfyWidget<any, any>).isVirtual;
-    //         widgets.push({ index, widget, value: writable(widget.value), isVirtual: isVirtual })
-    //     }
-    // }
-
-    state[node.id] = { node: node, name: node.title, widgetStates: widgets }
-    store.set(state);
-
-    console.debug("call nodeAdded", state[node.id])
-}
-
-function nodeRemoved(node: LGraphNode) {
-    const state = get(store)
-    delete state[node.id]
-    store.set(state)
-}
-
-function nodeStateChanged(node: LGraphNode) {
-    const state = get(store)
-    const nodeState = state[node.id]
-    nodeState.name = node.title
-    store.set(state);
-}
-
-function configureFinished(graph: LGraph) {
-    let state = get(store);
-
-    for (const node of graph.computeExecutionOrder(false, null)) {
-        state[node.id].name = node.title;
-
-        // const widgetStates = state[node.id].widgetStates;
-        // if (node.widgets_values) {
-        //     for (const [i, value] of node.widgets_values.entries()) {
-        //         if (i < widgetStates.length && !widgetStates[i].isVirtual) {
-        //             widgetStates[i].value.set(value);
-        //         }
-        //         else {
-        //             console.log("Skip virtual widget", node.id, node.type, widgetStates[i].widget)
-        //         }
-        //     }
-        // }
-    }
-
-    store.set(state)
-}
-
-function widgetStateChanged(nodeId: number, widget: IWidget<any, any>) {
-    const state = get(store)
-    const entries = state[nodeId].widgetStates
-    if (entries) {
-        let widgetState = entries.find(e => e.widget === widget);
-        if (widgetState) {
-            widgetState.value.set(widget.value);
-            store.set(state);
-        }
-        else {
-            console.error("Widget state changed and node was found, but widget was not found in state!", widget, state[nodeId].node, entries)
-        }
-    }
-    else {
-        console.error("Widget state changed but node was not found in state!", widget, state[nodeId].node)
-    }
-}
-
-function findWidgetByName(nodeId: NodeID, name: string): WidgetUIState | null {
-    let state = get(store);
-
-    if (!(nodeId in state))
-        return null;
-
-    return state[nodeId].widgetStates.find((v) => v.widget.name === name);
-}
-
-const nodeStateStore: WritableNodeStateStore =
-{
-    ...store,
-    nodeAdded,
-    nodeRemoved,
-    nodeStateChanged,
-    configureFinished,
-    widgetStateChanged,
-    findWidgetByName,
-    clear
-}
-export default nodeStateStore;
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index 4045f9b..09c9892 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -14,7 +14,8 @@ export type UIState = {
 export type WritableUIStateStore = Writable<UIState>;
 const store: WritableUIStateStore = writable(
     {
-        graphLocked: true,
+        app: null,
+        graphLocked: false,
         nodesLocked: false,
         uiEditMode: "disabled",
     })
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d51bfd5..6e15ea6 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,7 +2,6 @@ import ComfyApp from "./components/ComfyApp";
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
 import TextWidget from "$lib/widgets/TextWidget.svelte";
-import { type WidgetUIState } from "$lib/stores/nodeState";
 import { get } from "svelte/store"
 import layoutState from "$lib/stores/layoutState"
 import type { SvelteComponentDev } from "svelte/internal";
@@ -21,26 +20,6 @@ export function download(filename: string, text: string, type: string = "text/pl
     }, 0);
 }
 
-export function getComponentForWidgetState(item: WidgetUIState): typeof SvelteComponentDev {
-    // custom widgets with TypeScript sources
-    let override = ComfyApp.widget_type_overrides[item.widget.type]
-    if (override) {
-        return override
-    }
-
-    // litegraph.ts built-in widgets
-    switch (item.widget.type) {
-        case "combo":
-            return ComboWidget;
-        case "number":
-            return RangeWidget;
-        case "text":
-            return TextWidget;
-    }
-
-    return null;
-}
-
 export function startDrag(evt: MouseEvent) {
     const dragItemId: string = evt.target.dataset["dragItemId"];
     const ls = get(layoutState)
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index c4e2f5e..991c098 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
- import type { WidgetDrawState, WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { BlockTitle } from "@gradio/atoms";
- import { Dropdown } from "@gradio/form";
  import Select from 'svelte-select';
  import type { ComfyComboNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
@@ -9,32 +7,35 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
- let itemValue: WidgetUIStateStore | null = null;
- let option: any;
+ let option: any
 
- $: if(widget) {
-     node = widget.node as ComfyComboNode
-     nodeValue = node.value;
-     updateOption(); // don't react on option
- };
+ $: widget && setNodeValue(widget);
 
- function updateOption() {
-     option = get(nodeValue);
+ function setNodeValue(widget: WidgetLayout) {
+     if(widget && !node) {
+         node = widget.node as ComfyComboNode
+         nodeValue = node.value;
+         setOption($nodeValue) // don't react on option
+     }
  }
 
- $: if (option && itemValue) {
-     $itemValue = option.value
+ function setOption(value: any) {
+     option = value;
+ }
+
+ $: if (nodeValue && option) {
+     $nodeValue = option.value;
  }
 </script>
 
 <div class="wrapper gr-combo">
-    {#if node !== null && option !== undefined}
+    {#if node !== null && nodeValue !== null}
         <label>
             <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
             <Select
                 bind:value={option}
-                bind:items={node.properties.values}
-                disabled={node.properties.values.length === 0}
+                bind:items={node.properties.options}
+                disabled={node.properties.options.length === 0}
                 clearable={false}
                 on:change
                 on:select
diff --git a/src/lib/widgets/ComfyGalleryWidget.svelte b/src/lib/widgets/ComfyGalleryWidget.svelte
index 0e466c4..fdaa96d 100644
--- a/src/lib/widgets/ComfyGalleryWidget.svelte
+++ b/src/lib/widgets/ComfyGalleryWidget.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { ImageViewer } from "$lib/ImageViewer";
- import type { WidgetUIState, WidgetUIStateStore } from "$lib/stores/nodeState";
  import { Block } from "@gradio/atoms";
  import { Gallery } from "@gradio/gallery";
  import type { Styles } from "@gradio/utils";
diff --git a/src/lib/widgets/ComfyValueControlWidget.ts b/src/lib/widgets/ComfyValueControlWidget.ts
index 3556d9c..a6b8ba8 100644
--- a/src/lib/widgets/ComfyValueControlWidget.ts
+++ b/src/lib/widgets/ComfyValueControlWidget.ts
@@ -2,7 +2,6 @@ import type { IEnumWidget, IEnumWidgetOptions, INumberWidget, LGraphNode, Widget
 import ComfyWidget from "./ComfyWidget";
 import type { ComfyImageResult } from "$lib/nodes/ComfySaveImageNode";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
-import nodeState from "$lib/stores/nodeState"
 
 export interface ComfyValueControlWidgetOptions extends IEnumWidgetOptions {
 }
@@ -50,6 +49,6 @@ export default class ComfyValueControlWidget extends ComfyWidget<ComfyValueContr
 		if (this.targetWidget.value > max)
 			this.targetWidget.value = max;
 
-        nodeState.widgetStateChanged(this.node.id, this.targetWidget);
+        // nodeState.widgetStateChanged(this.node.id, this.targetWidget);
     }
 }
diff --git a/src/lib/widgets/ComfyWidget.ts b/src/lib/widgets/ComfyWidget.ts
index 06bc42c..f90e86b 100644
--- a/src/lib/widgets/ComfyWidget.ts
+++ b/src/lib/widgets/ComfyWidget.ts
@@ -1,6 +1,5 @@
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
 import type { IWidget, LGraphNode, SerializedLGraphNode, Vector2, WidgetCallback, WidgetTypes } from "@litegraph-ts/core";
-import nodeState from "$lib/stores/nodeState";
 
 export default abstract class ComfyWidget<T = any, V = any> implements IWidget<T, V> {
     name: string;
@@ -27,7 +26,6 @@ export default abstract class ComfyWidget<T = any, V = any> implements IWidget<T
 
     setValue(value: V) {
         this.value = value;
-        nodeState.widgetStateChanged(this.node.id, this);
     }
 
     draw?(ctx: CanvasRenderingContext2D, node: LGraphNode, width: number, posY: number, height: number): void;
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index 58a54bc..e0cb09a 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
- import type { WidgetUIStateStore } from "$lib/stores/nodeState";
  import { TextBox } from "@gradio/form";
  import type { ComfyComboNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
@@ -18,7 +17,7 @@
 <div class="wrapper gr-textbox">
     {#if node !== null && nodeValue !== null}
         <TextBox
-            bind:value={$itemValue}
+            bind:value={$nodeValue}
             label={widget.attrs.title}
             lines={node.properties.multiline ? 5 : 1}
             max_lines={node.properties.multiline ? 5 : 1}
diff --git a/src/mobile/GenToolbar.svelte b/src/mobile/GenToolbar.svelte
index ab265e0..d9f73d0 100644
--- a/src/mobile/GenToolbar.svelte
+++ b/src/mobile/GenToolbar.svelte
@@ -1,20 +1,8 @@
 <script lang="ts">
- import { onMount } from "svelte";
- import { get } from "svelte/store";
- import { Pane, Splitpanes } from 'svelte-splitpanes';
- import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
- import { Checkbox } from "@gradio/form"
- import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
- import { ImageViewer } from "$lib/ImageViewer";
- import { download } from "$lib/utils"
 
- import { LGraph, LGraphNode } from "@litegraph-ts/core";
- import type { ComfyAPIStatus } from "$lib/api";
- import queueState from "$lib/stores/queueState";
- import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
- import { getComponentForWidgetState } from "$lib/utils"
+ import { Link, Toolbar } from "framework7-svelte"
  import { f7 } from "framework7-svelte"
 
  export let subworkflowID: number = -1;
diff --git a/src/mobile/routes/home.svelte b/src/mobile/routes/home.svelte
index 417d14d..51a3de7 100644
--- a/src/mobile/routes/home.svelte
+++ b/src/mobile/routes/home.svelte
@@ -5,7 +5,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
  import { download } from "$lib/utils"
@@ -46,11 +45,6 @@
          return
      app = $uiState.app = new ComfyApp();
 
-     app.eventBus.on("nodeAdded", nodeState.nodeAdded);
-     app.eventBus.on("nodeRemoved", nodeState.nodeRemoved);
-     app.eventBus.on("configured", nodeState.configureFinished);
-     app.eventBus.on("cleared", nodeState.clear);
-
      app.eventBus.on("autosave", doAutosave);
      app.eventBus.on("restored", doRestore);
 
diff --git a/src/mobile/routes/list-subworkflows.svelte b/src/mobile/routes/list-subworkflows.svelte
index e915ca1..c9a4fea 100644
--- a/src/mobile/routes/list-subworkflows.svelte
+++ b/src/mobile/routes/list-subworkflows.svelte
@@ -5,7 +5,6 @@
  import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
  import { Checkbox } from "@gradio/form"
- import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
  import { ImageViewer } from "$lib/ImageViewer";
  import { download } from "$lib/utils"
diff --git a/src/mobile/routes/subworkflow.svelte b/src/mobile/routes/subworkflow.svelte
index 5e01515..88840b8 100644
--- a/src/mobile/routes/subworkflow.svelte
+++ b/src/mobile/routes/subworkflow.svelte
@@ -1,21 +1,9 @@
 <script lang="ts">
- import { onMount } from "svelte";
- import { get } from "svelte/store";
- import { Pane, Splitpanes } from 'svelte-splitpanes';
- import { Button } from "@gradio/button";
  import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
- import { Checkbox } from "@gradio/form"
- import nodeState from "$lib/stores/nodeState";
  import uiState from "$lib/stores/uiState";
- import { ImageViewer } from "$lib/ImageViewer";
- import { download } from "$lib/utils"
 
- import { LGraph, LGraphNode } from "@litegraph-ts/core";
- import type { ComfyAPIStatus } from "$lib/api";
  import queueState from "$lib/stores/queueState";
  import { Page, Navbar, Link, BlockTitle, Block, List, ListItem, Toolbar } from "framework7-svelte"
- import { getComponentForWidgetState } from "$lib/utils"
- import { f7 } from "framework7-svelte"
 
  export let subworkflowID: number = -1;
  let app: ComfyApp = undefined;
@@ -28,21 +16,7 @@
 <Page name="subworkflow">
     <Navbar title="Workflow {subworkflowID}" backLink="Back" />
 
-    {#each Object.entries($nodeState) as [id, ws]}
-        {@const node = app.lGraph.getNodeById(id)}
-        <div class:is-executing={$queueState.runningNodeId === node.id}>
-            <Block>
-                <label for={String(id)}>
-                    <BlockTitle>
-                        {node.title}
-                    </BlockTitle>
-                </label>
-                {#each $nodeState[id].widgetStates as item}
-                    <svelte:component this={getComponentForWidgetState(item)} {item} />
-                {/each}
-            </Block>
-        </div>
-    {/each}
+    <div>Workflow!</div>
 </Page>
 
 <style>

From 3d55badda8d5688704546c9ab1509f47de6f6232 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 3 May 2023 20:16:45 -0700
Subject: [PATCH 15/27] Trying to fix prop updates reflected in widgets

---
 litegraph                          |  2 +-
 src/lib/components/ComfyApp.ts     |  1 -
 src/lib/nodes/ComfyWidgetNodes.ts  | 79 ++++++++++++++++++++++--------
 src/lib/stores/layoutState.ts      | 12 +++++
 src/lib/utils.ts                   |  4 ++
 src/lib/widgets/ComboWidget.svelte | 16 ++++--
 src/lib/widgets/RangeWidget.svelte | 24 ++++++---
 7 files changed, 106 insertions(+), 32 deletions(-)

diff --git a/litegraph b/litegraph
index 23242ca..ac3621c 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit 23242ca3d77e4463158cc7e340cac29409260440
+Subproject commit ac3621c4bdb9b5dd7a9f0a4b0b07599613dee42a
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index fcc0836..acbd23a 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -91,7 +91,6 @@ export default class ComfyApp {
 
         LiteGraph.release_link_on_empty_shows_menu = true;
         LiteGraph.alt_drag_do_clone_nodes = true;
-        LiteGraph.ignore_all_widget_events = true;
 
         this.lGraph.start();
 
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 6bbe53d..a1f9938 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 } 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 } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import ComboWidget from "$lib/widgets/ComboWidget.svelte";
 import RangeWidget from "$lib/widgets/RangeWidget.svelte";
@@ -7,9 +7,12 @@ import type { SvelteComponentDev } from "svelte/internal";
 import { ComfyWidgets } from "$lib/widgets";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import type IComfyInputSlot from "$lib/IComfyInputSlot";
-import { writable, type Unsubscriber, type Writable } from "svelte/store";
+import { writable, type Unsubscriber, type Writable, get } from "svelte/store";
+import { clamp } from "$lib/utils"
+import layoutState from "$lib/stores/layoutState";
 
 export interface ComfyWidgetProperties extends Record<string, any> {
+    defaultValue: any
 }
 
 /*
@@ -21,6 +24,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     abstract properties: ComfyWidgetProperties;
 
     value: Writable<T>
+    propsChanged: Writable<boolean> = writable(true) // dummy to indicate if props changed
     unsubscribe: Unsubscriber;
 
     /** Svelte class for the frontend logic */
@@ -38,7 +42,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
 
     override size: Vector2 = [60, 40];
 
-    constructor(name?: string, value: T) {
+    constructor(name: string, value: T) {
         const color = LGraphCanvas.node_colors["blue"]
         super(name)
         this.value = writable(value)
@@ -49,10 +53,12 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
             "Value",
             ""
         );
+        this.displayWidget.disabled = true; // prevent editing
         this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
     }
 
     private onValueUpdated(value: any) {
+        console.debug("[Widget] valueUpdated", this, value)
         this.displayWidget.value = Watch.toString(value)
     }
 
@@ -82,21 +88,49 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
                 for (const key in comfyInput.config)
                     this.setProperty(key, comfyInput.config[key])
             }
+            if ("defaultValue" in this.properties)
+                this.setValue(this.properties.defaultValue)
+
+            const widget = layoutState.findLayoutForNode(this.id)
+            if (widget) {
+                widget.attrs.title = input.name;
+            }
+
             console.debug("Property copy", input, this.properties)
         }
 
         return true;
     }
 
+    onConnectionsChange(
+        type: LConnectionKind,
+        slotIndex: number,
+        isConnected: boolean,
+        link: LLink,
+        ioSlot: (INodeOutputSlot | INodeInputSlot)
+    ): void {
+        this.clampConfig();
+    }
+
     clampConfig() {
+        let changed = false;
         for (const link of this.getOutputLinks(0)) {
-            const node = this.graph._nodes_by_id[link.target_id]
-            if (node) {
-                const input = node.inputs[link.target_slot]
-                if (input && "config" in input)
-                    this.clampOneConfig(input as IComfyInputSlot)
+            if (link) { // can be undefined if the link is removed
+                const node = this.graph._nodes_by_id[link.target_id]
+                if (node) {
+                    const input = node.inputs[link.target_slot]
+                    if (input && "config" in input) {
+                        this.clampOneConfig(input as IComfyInputSlot)
+                        changed = true;
+                    }
+                }
             }
         }
+
+        if (changed) {
+            // Force trigger reactivity to update component based on new props
+            this.propsChanged.set(true)
+        }
     }
 
     clampOneConfig(input: IComfyInputSlot) {}
@@ -111,6 +145,7 @@ export interface ComfySliderProperties extends ComfyWidgetProperties {
 
 export class ComfySliderNode extends ComfyWidgetNode<number> {
     override properties: ComfySliderProperties = {
+        defaultValue: 0,
         min: 0,
         max: 10,
         step: 1,
@@ -131,10 +166,10 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
     }
 
     override clampOneConfig(input: IComfyInputSlot) {
-        this.setProperty("min", Math.max(this.properties.min, input.config.min))
-        this.setProperty("max", Math.max(this.properties.max, input.config.max))
-        this.setProperty("step", Math.max(this.properties.step, input.config.step))
-        this.setValue(Math.max(Math.min(this.properties.value, this.properties.max), this.properties.min))
+        // this.setProperty("min", clamp(this.properties.min, input.config.min, input.config.max))
+        // this.setProperty("max", clamp(this.properties.max, input.config.max, input.config.min))
+        // this.setProperty("step", Math.min(this.properties.step, input.config.step))
+        this.setValue(clamp(this.properties.defaultValue, this.properties.min, this.properties.max))
     }
 }
 
@@ -146,12 +181,13 @@ LiteGraph.registerNodeType({
 })
 
 export interface ComfyComboProperties extends ComfyWidgetProperties {
-    options: string[]
+    values: string[]
 }
 
 export class ComfyComboNode extends ComfyWidgetNode<string> {
     override properties: ComfyComboProperties = {
-        options: ["A", "B", "C", "D"]
+        defaultValue: "A",
+        values: ["A", "B", "C", "D"]
     }
 
     static slotLayout: SlotLayout = {
@@ -178,21 +214,23 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
             return false;
 
         const thisProps = this.properties;
-        const otherProps = inputNode.properties;
+        if (!("config" in input))
+            return true;
+
+        const comfyInput = input as IComfyInputSlot;
+        const otherProps = comfyInput.config;
 
         // Ensure combo options match
-        if (!(otherProps.options instanceof Array))
+        if (!(otherProps.values instanceof Array))
             return false;
-        if (otherProps.options.length !== thisProps.options.length)
-            return false;
-        if (otherProps.find((v, i) => thisProps[i] !== v))
+        if (thisProps.values.find((v, i) => otherProps.values.indexOf(v) === -1))
             return false;
 
         return true;
     }
 
     override clampOneConfig(input: IComfyInputSlot) {
-        if (!(this.properties.value in input.config.values)) {
+        if (input.config.values.indexOf(this.properties.value) === -1) {
             if (input.config.values.length === 0)
                 this.setValue("")
             else
@@ -214,6 +252,7 @@ export interface ComfyTextProperties extends ComfyWidgetProperties {
 
 export class ComfyTextNode extends ComfyWidgetNode<string> {
     override properties: ComfyTextProperties = {
+        defaultValue: "",
         multiline: false
     }
 
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 7c5a0e3..f788c69 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -98,6 +98,7 @@ type LayoutStateOps = {
     groupItems: (dragItems: IDragItem[]) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
     getCurrentSelection: () => IDragItem[],
+    findLayoutForNode: (nodeId: number) => IDragItem | null;
     clear: (state?: Partial<LayoutState>) => void,
     resetLayout: () => void,
 }
@@ -362,6 +363,16 @@ function ungroup(container: ContainerLayout) {
     store.set(state)
 }
 
+function findLayoutForNode(nodeId: number): WidgetLayout | null {
+    const state = get(store)
+    const found = Object.entries(state.allItems).find(pair =>
+        pair[1].dragItem.type === "widget"
+        && (pair[1].dragItem as WidgetLayout).node.id === nodeId)
+    if (found)
+        return found[1].dragItem as WidgetLayout
+    return null;
+}
+
 function clear(state: Partial<LayoutState> = {}) {
     store.set({
         root: null,
@@ -390,6 +401,7 @@ const layoutStateStore: WritableLayoutStateStore =
     configureFinished,
     getCurrentSelection,
     groupItems,
+    findLayoutForNode,
     ungroup,
     clear,
     resetLayout
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 6e15ea6..f5c47a7 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -6,6 +6,10 @@ import { get } from "svelte/store"
 import layoutState from "$lib/stores/layoutState"
 import type { SvelteComponentDev } from "svelte/internal";
 
+export function clamp(n: number, min: number, max: number): number {
+    return Math.min(Math.max(n, min), max)
+}
+
 export function download(filename: string, text: string, type: string = "text/plain") {
     const blob = new Blob([text], { type: type });
     const url = URL.createObjectURL(blob);
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 991c098..ee2e6b6 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -7,14 +7,22 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
+ let propsChanged: Writable<boolean> | null = null;
  let option: any
 
  $: widget && setNodeValue(widget);
 
+ $: if ($propsChanged && nodeValue !== null) {
+     setOption($nodeValue)
+     setNodeValue(widget)
+     node.properties = node.properties
+ }
+
  function setNodeValue(widget: WidgetLayout) {
-     if(widget && !node) {
+     if(widget) {
          node = widget.node as ComfyComboNode
          nodeValue = node.value;
+         propsChanged = node.propsChanged;
          setOption($nodeValue) // don't react on option
      }
  }
@@ -23,7 +31,7 @@
      option = value;
  }
 
- $: if (nodeValue && option) {
+ $: if (nodeValue && option && option.value) {
      $nodeValue = option.value;
  }
 </script>
@@ -34,8 +42,8 @@
             <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
             <Select
                 bind:value={option}
-                bind:items={node.properties.options}
-                disabled={node.properties.options.length === 0}
+                bind:items={node.properties.values}
+                disabled={node.properties.values.length === 0}
                 clearable={false}
                 on:change
                 on:select
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index 2c86236..ad7a53f 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -6,16 +6,28 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfySliderNode | null = null;
  let nodeValue: Writable<number> | null = null;
+ let propsChanged: Writable<boolean> | null = null;
  let option: number | null = null;
 
- $: if(widget) {
-     node = widget.node
-     nodeValue = node.value;
-     updateOption(); // don't react on option
+ $: widget && setNodeValue(widget);
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfySliderNode
+         nodeValue = node.value;
+         propsChanged = node.propsChanged;
+         setOption($nodeValue); // don't react on option
+     }
  };
 
- function updateOption() {
-     option = get(nodeValue);
+ $: if ($propsChanged && nodeValue !== null) {
+     setOption($nodeValue)
+     setNodeValue(widget)
+     node.properties = node.properties
+ }
+
+ function setOption(value: any) {
+     option = value;
  }
 
  function onRelease(e: Event) {

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 16/27] 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">

From 35d4761fa960e0a3097949a4f6d48803b290fea0 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 3 May 2023 23:19:15 -0500
Subject: [PATCH 17/27] Serialize layout state

---
 src/lib/components/WidgetContainer.svelte |  4 +-
 src/lib/stores/layoutState.ts             | 59 +++++++++++++++++++++--
 2 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 9556cdf..2e425af 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -32,8 +32,8 @@
                && !$layoutState.isMenuOpen
 
 
- $: if ($queueState && dragItem) {
-     dragItem.isNodeExecuting = $queueState.runningNodeId === dragItem.nodeId;
+ $: if ($queueState && widget) {
+     dragItem.isNodeExecuting = $queueState.runningNodeId === widget.node.id;
  }
 </script>
 
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index f788c69..7579c1f 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -2,7 +2,7 @@ import { get, writable } from 'svelte/store';
 import type { Readable, Writable } from 'svelte/store';
 import type ComfyApp from "$lib/components/ComfyApp"
 import type { LGraphNode, IWidget, LGraph } from "@litegraph-ts/core"
- import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+import { dndzone, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
 import type { ComfyWidgetNode } from '$lib/nodes';
 
 type DragItemEntry = {
@@ -100,6 +100,7 @@ type LayoutStateOps = {
     getCurrentSelection: () => IDragItem[],
     findLayoutForNode: (nodeId: number) => IDragItem | null;
     clear: (state?: Partial<LayoutState>) => void,
+    serialize(): SerializedLayoutState,
     resetLayout: () => void,
 }
 
@@ -125,7 +126,7 @@ function findDefaultContainerForInsertion(): ContainerLayout | null {
     if (state.root.type === "container") {
         const container = state.root as ContainerLayout;
         const children: IDragItem[] = state.allItems[container.id]?.children || []
-        const found = children.find((di) =>  di.type === "container" )
+        const found = children.find((di) => di.type === "container")
         if (found && found.type === "container")
             return found as ContainerLayout;
         return container;
@@ -251,7 +252,7 @@ function nodeRemoved(node: LGraphNode) {
 function configureFinished(graph: LGraph) {
     const id = 0;
 
-    clear({isConfiguring: false})
+    clear({ isConfiguring: false })
 
     const root = addContainer(null, { direction: "horizontal", showTitle: false });
     const left = addContainer(root, { direction: "vertical", showTitle: false });
@@ -389,6 +390,54 @@ function resetLayout() {
     // TODO
 }
 
+export type SerializedLayoutState = {
+    root: DragItemID | null,
+    allItems: Record<DragItemID, SerializedDragEntry>,
+    currentId: number,
+}
+
+export type SerializedDragEntry = {
+    dragItem: SerializedDragItem,
+    children: DragItemID[],
+    parent: DragItemID | null
+}
+
+export type SerializedDragItem = {
+    type: string,
+    id: DragItemID,
+    nodeId: number | null,
+    attrs: Attributes
+}
+
+function serialize(): SerializedLayoutState {
+    const state = get(store)
+
+    const allItems: Record<DragItemID, SerializedDragEntry> = {}
+    for (const pair of Object.entries(state.allItems)) {
+        const [id, entry] = pair;
+        allItems[id] = {
+            dragItem: {
+                type: entry.dragItem.type,
+                id: entry.dragItem.id,
+                nodeId: (entry.dragItem as any).node?.id,
+                attrs: entry.dragItem.attrs
+            },
+            children: entry.children.map((di) => di.id),
+            parent: entry.parent?.id
+        }
+    }
+
+    return {
+        root: state.root?.id,
+        allItems,
+        currentId: state.currentId,
+    }
+}
+
+// function deserialize(data: any): LayoutState {
+
+// }
+
 const layoutStateStore: WritableLayoutStateStore =
 {
     ...store,
@@ -404,6 +453,8 @@ const layoutStateStore: WritableLayoutStateStore =
     findLayoutForNode,
     ungroup,
     clear,
-    resetLayout
+    resetLayout,
+    serialize,
+    // deserialize
 }
 export default layoutStateStore;

From fd417c675958286f467f50dac275a66037448b67 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Wed, 3 May 2023 23:30:26 -0500
Subject: [PATCH 18/27] Move app serialize into ComfyApp class

---
 src/lib/components/ComfyApp.svelte | 33 +++++--------------
 src/lib/components/ComfyApp.ts     | 24 ++++++++++----
 src/lib/stores/layoutState.ts      | 52 +++++++++++++++++++++++++++---
 src/mobile/routes/home.svelte      | 15 +--------
 4 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 0a3a2cc..d06466b 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -10,12 +10,11 @@
  import layoutState from "$lib/stores/layoutState";
  import { ImageViewer } from "$lib/ImageViewer";
  import { download } from "$lib/utils"
-
- import { LGraph, LGraphNode } from "@litegraph-ts/core";
- import LightboxModal from "./LightboxModal.svelte";
- import { Block } from "@gradio/atoms";
- import ComfyQueue from "./ComfyQueue.svelte";
  import type { ComfyAPIStatus } from "$lib/api";
+
+ import { LGraph } from "@litegraph-ts/core";
+ import LightboxModal from "./LightboxModal.svelte";
+ import ComfyQueue from "./ComfyQueue.svelte";
  import queueState from "$lib/stores/queueState";
 
  let app: ComfyApp = undefined;
@@ -66,29 +65,13 @@
      }
  }
 
- let graphResizeTimer: typeof Timer = -1;
-
- function serializeAppState(): SerializedAppState {
-     const graph = app.lGraph;
-
-     const serializedGraph = graph.serialize()
-     const serializedPaneOrder = uiPane.serialize()
-
-     return {
-         createdBy: "ComfyBox",
-         version: 1,
-         workflow: serializedGraph,
-         panes: serializedPaneOrder
-     }
- }
-
  function doAutosave(graph: LGraph): void {
-     const savedWorkflow = serializeAppState();
+     const savedWorkflow = app.serialize();
      localStorage.setItem("workflow", JSON.stringify(savedWorkflow))
  }
 
- function doRestore(workflow: SerializedAppState) {
-     uiPane.restore(workflow.panes);
+ function doRestore(data: SerializedAppState) {
+     layoutState.deserialize(data.layout, app.lGraph);
  }
 
  function doSave(): void {
@@ -98,7 +81,7 @@
      const date = new Date();
      const formattedDate = date.toISOString().replace(/:/g, '-').replace(/\.\d{3}/g, '').replace('T', '_').replace("Z", "");
 
-     download(`workflow-${formattedDate}.json`, JSON.stringify(serializeAppState()), "application/json")
+     download(`workflow-${formattedDate}.json`, JSON.stringify(app.serialize()), "application/json")
  }
 
  onMount(async () => {
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index acbd23a..fb2ced1 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -18,6 +18,8 @@ import queueState from "$lib/stores/queueState";
 import GraphSync from "$lib/GraphSync";
 import type { SvelteComponentDev } from "svelte/internal";
 import type IComfyInputSlot from "$lib/IComfyInputSlot";
+import type { SerializedLayoutState } from "$lib/stores/layoutState";
+import layoutState from "$lib/stores/layoutState";
 
 LiteGraph.catch_exceptions = false;
 
@@ -28,15 +30,11 @@ if (typeof window !== "undefined") {
 
 type QueueItem = { num: number, batchCount: number }
 
-export type SerializedPanes = {
-    panels: { nodeId: number }[][]
-}
-
 export type SerializedAppState = {
     createdBy: "ComfyBox",
     version: number,
-    panes: SerializedPanes,
-    workflow: SerializedLGraph
+    workflow: SerializedLGraph,
+    layout: SerializedLayoutState
 }
 
 type ComfyAppEvents = {
@@ -307,6 +305,20 @@ export default class ComfyApp {
         // await this.#invokeExtensionsAsync("registerCustomNodes");
     }
 
+    serialize(): SerializedAppState {
+        const graph = this.lGraph;
+
+        const serializedGraph = graph.serialize()
+        const serializedLayout = layoutState.serialize()
+
+        return {
+            createdBy: "ComfyBox",
+            version: 1,
+            workflow: serializedGraph,
+            layout: serializedLayout
+        }
+    }
+
     private showDropZone() {
         if (this.dropZone)
             this.dropZone.style.display = "block";
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 7579c1f..837f130 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -100,7 +100,8 @@ type LayoutStateOps = {
     getCurrentSelection: () => IDragItem[],
     findLayoutForNode: (nodeId: number) => IDragItem | null;
     clear: (state?: Partial<LayoutState>) => void,
-    serialize(): SerializedLayoutState,
+    serialize: () => SerializedLayoutState,
+    deserialize: (data: SerializedLayoutState, graph: LGraph) => void,
     resetLayout: () => void,
 }
 
@@ -434,9 +435,52 @@ function serialize(): SerializedLayoutState {
     }
 }
 
-// function deserialize(data: any): LayoutState {
+function deserialize(data: SerializedLayoutState, graph: LGraph) {
+    clear();
 
-// }
+    const allItems: Record<DragItemID, DragItemEntry> = {}
+    for (const pair of Object.entries(data.allItems)) {
+        const [id, entry] = pair;
+        const dragItem: IDragItem = {
+            type: entry.dragItem.type,
+            id: entry.dragItem.id,
+            attrs: entry.dragItem.attrs
+        };
+        if (dragItem.type === "widget") {
+            const widget = dragItem as WidgetLayout;
+            widget.node = graph.getNodeById(entry.dragItem.nodeId) as ComfyWidgetNode
+        }
+        allItems[id] = {
+            dragItem,
+            children: [],
+            parent: null
+        }
+    }
+
+    // reconnect parent/child tree
+    for (const pair of Object.entries(data.allItems)) {
+        const [id, entry] = pair;
+
+        for (const childId of entry.children) {
+            allItems[id].children.push(allItems[childId].dragItem)
+        }
+        if (entry.parent) {
+            allItems[id].parent = allItems[entry.parent].dragItem;
+        }
+    }
+
+    let root = null;
+    if (data.root)
+        root = allItems[data.root]
+
+    const state = get(store)
+    store.set({
+        ...state,
+        root,
+        allItems,
+        currentId: data.currentId,
+    })
+}
 
 const layoutStateStore: WritableLayoutStateStore =
 {
@@ -455,6 +499,6 @@ const layoutStateStore: WritableLayoutStateStore =
     clear,
     resetLayout,
     serialize,
-    // deserialize
+    deserialize
 }
 export default layoutStateStore;
diff --git a/src/mobile/routes/home.svelte b/src/mobile/routes/home.svelte
index 51a3de7..db7a42e 100644
--- a/src/mobile/routes/home.svelte
+++ b/src/mobile/routes/home.svelte
@@ -18,21 +18,8 @@
 
  let serializedPaneOrder = {};
 
- function serializeAppState(): SerializedAppState {
-     const graph = app.lGraph;
-
-     const serializedGraph = graph.serialize()
-
-     return {
-         createdBy: "ComfyBox",
-         version: 1,
-         workflow: serializedGraph,
-         panes: serializedPaneOrder
-     }
- }
-
  function doAutosave(graph: LGraph): void {
-     const savedWorkflow = serializeAppState();
+     const savedWorkflow = app.serialize();
      localStorage.setItem("workflow", JSON.stringify(savedWorkflow))
  }
 

From 93cf2ed98afec8ef9c9c2c685083a7f686e5e20a Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 10:29:44 -0500
Subject: [PATCH 19/27] Start serializing UI state

---
 package.json                          |   1 +
 pnpm-lock.yaml                        | 102 +++++++++++++++---
 src/lib/ComfyGraphCanvas.ts           |  22 ++++
 src/lib/components/ComfyApp.svelte    |  65 ++++++++----
 src/lib/components/ComfyApp.ts        | 142 +++++++++++++++++---------
 src/lib/components/ComfyUIPane.svelte |  22 ++--
 src/lib/stores/layoutState.ts         |  76 ++++++--------
 src/mobile/routes/home.svelte         |  13 ---
 8 files changed, 294 insertions(+), 149 deletions(-)

diff --git a/package.json b/package.json
index fd2c54b..eba5ec1 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "build:css": "pollen -c gradio/js/theme/src/pollen.config.cjs && mv src/pollen.css node_modules/@gradio/theme/src"
   },
   "devDependencies": {
+    "@zerodevx/svelte-toast": "^0.9.3",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte3": "^4.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f34575..2e77552 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,7 +63,7 @@ importers:
         version: 1.2.1
       svelte-preprocess:
         specifier: ^5.0.3
-        version: 5.0.3(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
+        version: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
       svelte-select:
         specifier: ^5.5.3
         version: 5.5.3
@@ -72,7 +72,7 @@ importers:
         version: 0.7.13(svelte@3.58.0)
       tailwindcss:
         specifier: ^3.3.1
-        version: 3.3.1(postcss@8.4.21)
+        version: 3.3.1
       typed-emitter:
         specifier: github:andywer/typed-emitter
         version: github.com/andywer/typed-emitter/9a139b6fa0ec6b0db6141b5b756b784e4f7ef4e4
@@ -80,6 +80,9 @@ importers:
         specifier: ^1.0.5
         version: 1.0.5(vite@4.3.1)
     devDependencies:
+      '@zerodevx/svelte-toast':
+        specifier: ^0.9.3
+        version: 0.9.3(svelte@3.58.0)
       eslint:
         specifier: ^8.37.0
         version: 8.37.0
@@ -103,7 +106,7 @@ importers:
         version: 3.58.0
       svelte-check:
         specifier: ^3.2.0
-        version: 3.2.0(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)
+        version: 3.2.0(sass@1.61.0)(svelte@3.58.0)
       svelte-dnd-action:
         specifier: ^0.9.22
         version: 0.9.22(svelte@3.58.0)
@@ -112,7 +115,7 @@ importers:
         version: 5.0.3
       vite:
         specifier: ^4.3.1
-        version: 4.3.1(@types/node@18.16.0)(sass@1.61.0)
+        version: 4.3.1(sass@1.61.0)
       vite-tsconfig-paths:
         specifier: ^4.0.8
         version: 4.0.8(typescript@5.0.3)(vite@4.3.1)
@@ -2035,7 +2038,7 @@ packages:
       magic-string: 0.30.0
       svelte: 3.58.0
       svelte-hmr: 0.15.1(svelte@3.58.0)
-      vite: 4.3.1(@types/node@18.16.0)(sass@1.61.0)
+      vite: 4.3.1(sass@1.61.0)
       vitefu: 0.2.4(vite@4.3.1)
     transitivePeerDependencies:
       - supports-color
@@ -2178,6 +2181,7 @@ packages:
 
   /@types/node@18.16.0:
     resolution: {integrity: sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ==}
+    dev: true
 
   /@types/node@8.10.66:
     resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
@@ -2281,6 +2285,14 @@ packages:
       eslint-visitor-keys: 3.4.0
     dev: true
 
+  /@zerodevx/svelte-toast@0.9.3(svelte@3.58.0):
+    resolution: {integrity: sha512-VPKWR4A9y01fyXRscu9HiTj7tV2hFrpRKZvGwMmaPXfHIXR1D9+NNsz0HXcQ7qZ0C5UaHS3n9uNtPtIcAXT7RQ==}
+    peerDependencies:
+      svelte: ^3.57.0
+    dependencies:
+      svelte: 3.58.0
+    dev: true
+
   /acorn-jsx@5.3.2(acorn@8.8.2):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -5911,7 +5923,7 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-check@3.2.0(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0):
+  /svelte-check@3.2.0(sass@1.61.0)(svelte@3.58.0):
     resolution: {integrity: sha512-6ZnscN8dHEN5Eq5LgIzjj07W9nc9myyBH+diXsUAuiY/3rt0l65/LCIQYlIuoFEjp2F1NhXqZiJwV9omPj9tMw==}
     hasBin: true
     peerDependencies:
@@ -5924,7 +5936,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 3.58.0
-      svelte-preprocess: 5.0.3(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
+      svelte-preprocess: 5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
       typescript: 5.0.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -6084,7 +6096,7 @@ packages:
       typescript: 5.0.3
     dev: true
 
-  /svelte-preprocess@5.0.3(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3):
+  /svelte-preprocess@5.0.3(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3):
     resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -6125,7 +6137,6 @@ packages:
       '@types/pug': 2.0.6
       detect-indent: 6.1.0
       magic-string: 0.27.0
-      postcss: 8.4.21
       sass: 1.61.0
       sorcery: 0.11.0
       strip-indent: 3.0.0
@@ -6190,6 +6201,39 @@ packages:
       get-port: 3.2.0
     dev: false
 
+  /tailwindcss@3.3.1:
+    resolution: {integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    dependencies:
+      arg: 5.0.2
+      chokidar: 3.5.3
+      color-name: 1.1.4
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.2.12
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.18.2
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.21
+      postcss-import: 14.1.0(postcss@8.4.21)
+      postcss-js: 4.0.1(postcss@8.4.21)
+      postcss-load-config: 3.1.4(postcss@8.4.21)
+      postcss-nested: 6.0.0(postcss@8.4.21)
+      postcss-selector-parser: 6.0.11
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      resolve: 1.22.2
+      sucrase: 3.32.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tailwindcss@3.3.1(postcss@8.4.21):
     resolution: {integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==}
     engines: {node: '>=12.13.0'}
@@ -6223,6 +6267,7 @@ packages:
       sucrase: 3.32.0
     transitivePeerDependencies:
       - ts-node
+    dev: true
 
   /test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
@@ -6961,7 +7006,7 @@ packages:
     dependencies:
       picocolors: 1.0.0
       picomatch: 2.3.1
-      vite: 4.3.1(@types/node@18.16.0)(sass@1.61.0)
+      vite: 4.3.1(sass@1.61.0)
     dev: false
 
   /vite-tsconfig-paths@4.0.8(typescript@5.0.3)(vite@4.3.1):
@@ -6975,7 +7020,7 @@ packages:
       debug: 4.3.4
       globrex: 0.1.2
       tsconfck: 2.1.1(typescript@5.0.3)
-      vite: 4.3.1(@types/node@18.16.0)(sass@1.61.0)
+      vite: 4.3.1(sass@1.61.0)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -7071,6 +7116,39 @@ packages:
       sass: 1.61.0
     optionalDependencies:
       fsevents: 2.3.2
+    dev: true
+
+  /vite@4.3.1(sass@1.61.0):
+    resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.18
+      postcss: 8.4.21
+      rollup: 3.21.0
+      sass: 1.61.0
+    optionalDependencies:
+      fsevents: 2.3.2
 
   /vitefu@0.2.4(vite@4.3.1):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
@@ -7080,7 +7158,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.3.1(@types/node@18.16.0)(sass@1.61.0)
+      vite: 4.3.1(sass@1.61.0)
 
   /vitest@0.25.8(sass@1.61.0):
     resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==}
diff --git a/src/lib/ComfyGraphCanvas.ts b/src/lib/ComfyGraphCanvas.ts
index 82b19ae..3a464bf 100644
--- a/src/lib/ComfyGraphCanvas.ts
+++ b/src/lib/ComfyGraphCanvas.ts
@@ -3,6 +3,11 @@ import type ComfyApp from "./components/ComfyApp";
 import queueState from "./stores/queueState";
 import { get } from "svelte/store";
 
+export type SerializedGraphCanvasState = {
+    offset: Vector2,
+    scale: number
+}
+
 export default class ComfyGraphCanvas extends LGraphCanvas {
     app: ComfyApp
 
@@ -20,6 +25,23 @@ export default class ComfyGraphCanvas extends LGraphCanvas {
         this.app = app;
     }
 
+    serialize(): SerializedGraphCanvasState {
+        return {
+            offset: this.ds.offset,
+            scale: this.ds.scale
+        }
+    }
+
+    deserialize(data: SerializedGraphCanvasState) {
+        this.ds.offset = data.offset;
+        this.ds.scale = data.scale;
+    }
+
+    recenter() {
+        this.ds.reset();
+        this.setDirty(true, true)
+    }
+
     override drawNodeShape(
         node: LGraphNode,
         ctx: CanvasRenderingContext2D,
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index d06466b..8391532 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -9,8 +9,8 @@
  import uiState from "$lib/stores/uiState";
  import layoutState from "$lib/stores/layoutState";
  import { ImageViewer } from "$lib/ImageViewer";
- import { download } from "$lib/utils"
  import type { ComfyAPIStatus } from "$lib/api";
+ import { SvelteToast, toast } from '@zerodevx/svelte-toast'
 
  import { LGraph } from "@litegraph-ts/core";
  import LightboxModal from "./LightboxModal.svelte";
@@ -19,11 +19,20 @@
 
  let app: ComfyApp = undefined;
  let imageViewer: ImageViewer;
- let uiPane: ComfyUIPane = undefined;
  let queue: ComfyQueue = undefined;
  let mainElem: HTMLDivElement;
+ let uiPane: ComfyUIPane = undefined;
  let containerElem: HTMLDivElement;
- let resizeTimeout: typeof Timer = -1;
+ let resizeTimeout: NodeJS.Timeout | null;
+
+ let debugLayout: boolean = true;
+
+ const toastOptions = {
+     intro: { duration: 200 },
+     theme: {
+         '--toastBarHeight': 0
+     }
+ }
 
  function refreshView(event?: Event) {
      clearTimeout(resizeTimeout);
@@ -65,35 +74,41 @@
      }
  }
 
- function doAutosave(graph: LGraph): void {
-     const savedWorkflow = app.serialize();
-     localStorage.setItem("workflow", JSON.stringify(savedWorkflow))
- }
-
- function doRestore(data: SerializedAppState) {
-     layoutState.deserialize(data.layout, app.lGraph);
- }
-
  function doSave(): void {
      if (!app?.lGraph)
          return;
 
-     const date = new Date();
-     const formattedDate = date.toISOString().replace(/:/g, '-').replace(/\.\d{3}/g, '').replace('T', '_').replace("Z", "");
+     app.saveStateToLocalStorage();
+     toast.push("Saved to local storage.")
+     //
+     //      const date = new Date();
+     //      const formattedDate = date.toISOString().replace(/:/g, '-').replace(/\.\d{3}/g, '').replace('T', '_').replace("Z", "");
+     //
+     //      download(`workflow-${formattedDate}.json`, JSON.stringify(app.serialize()), "application/json")
+ }
 
-     download(`workflow-${formattedDate}.json`, JSON.stringify(app.serialize()), "application/json")
+ function doReset(): void {
+     var confirmed = confirm("Are you sure you want to clear the current workflow?");
+     if (confirmed) {
+         app.reset();
+     }
+ }
+
+ function doRecenter(): void {
+     app.lCanvas.recenter();
  }
 
  onMount(async () => {
      app = new ComfyApp();
 
+     if (debugLayout) {
+         layoutState.subscribe(s => {
+             console.warn("UPDATESTATE", s)
+         })
+     }
+
      app.eventBus.on("nodeAdded", layoutState.nodeAdded);
      app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
-     app.eventBus.on("configured", layoutState.configureFinished);
-     app.eventBus.on("cleared", layoutState.clear);
-
-     app.eventBus.on("autosave", doAutosave);
-     app.eventBus.on("restored", doRestore);
 
      app.api.addEventListener("status", (ev: CustomEvent) => {
          queueState.statusUpdated(ev.detail as ComfyAPIStatus);
@@ -117,7 +132,7 @@
  })
 </script>
 
-<div id="main" bind:this={mainElem}>
+<div id="main">
     <div id="dropzone" class="dropzone"></div>
     <div id="container" bind:this={containerElem}>
         <Splitpanes theme="comfy" on:resize={refreshView}>
@@ -153,6 +168,12 @@
         <Button variant="secondary" on:click={doSave}>
             Save
         </Button>
+        <Button variant="secondary" on:click={doReset}>
+            Reset
+        </Button>
+        <Button variant="secondary" on:click={doRecenter}>
+            Recenter
+        </Button>
         <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
         <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/>
         <label for="enable-ui-editing">Enable UI Editing</label>
@@ -164,6 +185,8 @@
     <LightboxModal />
 </div>
 
+<SvelteToast options={toastOptions} />
+
 <style lang="scss">
  #container {
      height: calc(100vh - 60px);
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index fb2ced1..ebdd582 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -1,4 +1,4 @@
-import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode } from "@litegraph-ts/core";
+import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode, type Vector2 } from "@litegraph-ts/core";
 import type { LConnectionKind, INodeSlot } from "@litegraph-ts/core";
 import ComfyAPI from "$lib/api"
 import { ComfyWidgets } from "$lib/widgets"
@@ -10,7 +10,7 @@ import type TypedEmitter from "typed-emitter";
 // Import nodes
 import "@litegraph-ts/nodes-basic"
 import * as nodes from "$lib/nodes/index"
-import ComfyGraphCanvas from "$lib/ComfyGraphCanvas";
+import ComfyGraphCanvas, { type SerializedGraphCanvasState } from "$lib/ComfyGraphCanvas";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
 import * as widgets from "$lib/widgets/index"
 import type ComfyWidget from "$lib/widgets/ComfyWidget";
@@ -21,6 +21,8 @@ import type IComfyInputSlot from "$lib/IComfyInputSlot";
 import type { SerializedLayoutState } from "$lib/stores/layoutState";
 import layoutState from "$lib/stores/layoutState";
 
+export const COMFYBOX_SERIAL_VERSION = 1;
+
 LiteGraph.catch_exceptions = false;
 
 if (typeof window !== "undefined") {
@@ -34,7 +36,8 @@ export type SerializedAppState = {
     createdBy: "ComfyBox",
     version: number,
     workflow: SerializedLGraph,
-    layout: SerializedLayoutState
+    layout: SerializedLayoutState,
+    canvas: SerializedGraphCanvasState
 }
 
 type ComfyAppEvents = {
@@ -45,7 +48,6 @@ type ComfyAppEvents = {
     cleared: () => void
     beforeChange: (graph: LGraph, param: any) => void
     afterChange: (graph: LGraph, param: any) => void
-    autosave: (graph: LGraph) => void
     restored: (workflow: SerializedAppState) => void
 }
 
@@ -60,7 +62,7 @@ export default class ComfyApp {
     canvasEl: HTMLCanvasElement | null = null;
     canvasCtx: CanvasRenderingContext2D | null = null;
     lGraph: LGraph | null = null;
-    lCanvas: LGraphCanvas | null = null;
+    lCanvas: ComfyGraphCanvas | null = null;
     dropZone: HTMLElement | null = null;
     nodeOutputs: Record<string, any> = {};
     eventBus: TypedEmitter<ComfyAppEvents> = new EventEmitter() as TypedEmitter<ComfyAppEvents>;
@@ -102,9 +104,8 @@ export default class ComfyApp {
         try {
             const json = localStorage.getItem("workflow");
             if (json) {
-                const workflow = JSON.parse(json) as SerializedAppState;
-                this.loadGraphData(workflow["workflow"]);
-                this.eventBus.emit("restored", workflow);
+                const state = JSON.parse(json) as SerializedAppState;
+                this.deserialize(state)
                 restored = true;
             }
         } catch (err) {
@@ -113,11 +114,11 @@ export default class ComfyApp {
 
         // We failed to restore a workflow so load the default
         if (!restored) {
-            this.loadGraphData();
+            this.initDefaultGraph();
         }
 
         // Save current workflow automatically
-        setInterval(this.requestAutosave.bind(this), 15000);
+        setInterval(this.saveStateToLocalStorage.bind(this), 1000);
 
         this.addApiUpdateHandlers();
         this.addDropHandler();
@@ -181,8 +182,10 @@ export default class ComfyApp {
         this.eventBus.emit("cleared");
     }
 
-    private requestAutosave() {
-        this.eventBus.emit("autosave", this.lGraph);
+    saveStateToLocalStorage() {
+        const savedWorkflow = this.serialize();
+        const json = JSON.stringify(savedWorkflow);
+        localStorage.setItem("workflow", json)
     }
 
     private addGraphLifecycleHooks() {
@@ -305,20 +308,6 @@ export default class ComfyApp {
         // await this.#invokeExtensionsAsync("registerCustomNodes");
     }
 
-    serialize(): SerializedAppState {
-        const graph = this.lGraph;
-
-        const serializedGraph = graph.serialize()
-        const serializedLayout = layoutState.serialize()
-
-        return {
-            createdBy: "ComfyBox",
-            version: 1,
-            workflow: serializedGraph,
-            layout: serializedLayout
-        }
-    }
-
     private showDropZone() {
         if (this.dropZone)
             this.dropZone.style.display = "block";
@@ -365,24 +354,24 @@ export default class ComfyApp {
      * Adds a handler on paste that extracts and loads workflows from pasted JSON data
      */
     private addPasteHandler() {
-        document.addEventListener("paste", (e) => {
-            let data = (e.clipboardData || (window as any).clipboardData).getData("text/plain");
-            let workflow;
-            try {
-                data = data.slice(data.indexOf("{"));
-                workflow = JSON.parse(data);
-            } catch (err) {
-                try {
-                    data = data.slice(data.indexOf("workflow\n"));
-                    data = data.slice(data.indexOf("{"));
-                    workflow = JSON.parse(data);
-                } catch (error) { }
-            }
+        // document.addEventListener("paste", (e) => {
+        //     let data = (e.clipboardData || (window as any).clipboardData).getData("text/plain");
+        //     let workflow;
+        //     try {
+        //         data = data.slice(data.indexOf("{"));
+        //         workflow = JSON.parse(data);
+        //     } catch (err) {
+        //         try {
+        //             data = data.slice(data.indexOf("workflow\n"));
+        //             data = data.slice(data.indexOf("{"));
+        //             workflow = JSON.parse(data);
+        //         } catch (error) { }
+        //     }
 
-            if (workflow && workflow.version && workflow.nodes && workflow.extra) {
-                this.loadGraphData(workflow);
-            }
-        });
+        //     if (workflow && workflow.version && workflow.nodes && workflow.extra) {
+        //         this.loadGraphData(workflow);
+        //     }
+        // });
     }
 
     /**
@@ -436,17 +425,55 @@ export default class ComfyApp {
         });
     }
 
+    serialize(): SerializedAppState {
+        const graph = this.lGraph;
+
+        const serializedGraph = graph.serialize()
+        const serializedLayout = layoutState.serialize()
+        const serializedCanvas = this.lCanvas.serialize();
+
+        return {
+            createdBy: "ComfyBox",
+            version: COMFYBOX_SERIAL_VERSION,
+            workflow: serializedGraph,
+            layout: serializedLayout,
+            canvas: serializedCanvas
+        }
+    }
+
+    deserialize(data: SerializedAppState) {
+        if (data.version !== COMFYBOX_SERIAL_VERSION) {
+            throw `Invalid ComfyBox saved data format: ${data.version}`
+        }
+
+        // Ensure loadGraphData does not trigger any state changes in layoutState
+        // (isConfiguring is set to true here)
+        // lGraph.configure will add new nodes, triggering onNodeAdded, but we
+        // want to restore the layoutState ourselves
+        layoutState.onStartConfigure();
+
+        this.loadGraphData(data.workflow)
+
+        // Now restore the layout
+        // Subsequent added nodes will add the UI data to layoutState
+        layoutState.deserialize(data.layout, this.lGraph)
+
+        // Restore canvas offset/zoom
+        this.lCanvas.deserialize(data.canvas)
+    }
+
+    initDefaultGraph() {
+        const state = structuredClone(defaultGraph)
+        this.deserialize(state)
+    }
+
     /**
      * Populates the graph with the specified workflow data
      * @param {*} graphData A serialized graph object
      */
-    loadGraphData(graphData?: SerializedLGraph) {
+    loadGraphData(graphData: SerializedLGraph) {
         this.clean();
 
-        if (!graphData) {
-            graphData = structuredClone(defaultGraph.workflow)
-        }
-
         // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
         for (let n of graphData.nodes) {
             if (n.type == "T2IAdapterLoader") n.type = "ControlNetLoader";
@@ -463,6 +490,25 @@ export default class ComfyApp {
         }
     }
 
+    reset() {
+        this.clean();
+
+        const blankGraph: SerializedLGraph = {
+            last_node_id: 0,
+            last_link_id: 0,
+            nodes: [],
+            links: [],
+            groups: [],
+            config: {},
+            extra: {},
+            version: 0
+        }
+
+        layoutState.onStartConfigure();
+        this.lGraph.configure(blankGraph)
+        layoutState.initDefaultLayout();
+    }
+
     /**
      * Converts the current graph workflow for sending to the API
      * @returns The workflow and node links
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 8515cff..9cee8a5 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -6,7 +6,7 @@
  import ComfyApp  from "./ComfyApp";
  import type { SerializedPanes } from "./ComfyApp"
  import WidgetContainer from "./WidgetContainer.svelte";
- import layoutState, { type ContainerLayout, type DragItem } from "$lib/stores/layoutState";
+ import layoutState, { type ContainerLayout, type DragItem, type IDragItem } from "$lib/stores/layoutState";
  import uiState from "$lib/stores/uiState";
 
  import Menu from './menu/Menu.svelte';
@@ -15,18 +15,8 @@
  import Icon from './menu/Icon.svelte'
 
  export let app: ComfyApp;
+ let root: IDragItem | null;
  let dragConfigured: boolean = false;
- //
- //  function addUIForNewNode(node: LGraphNode, paneIndex?: number) {
- //      if (!paneIndex)
- //          paneIndex = findLeastPopulatedPaneIndex();
- //      dragItems[paneIndex].push({ id: totalId++, node: node });
- //  }
- //
- //  $: if(app && !dragConfigured) {
- //      dragConfigured = true;
- //      app.eventBus.on("nodeAdded", addUIForNewNode);
- //  }
 
  /*
   * Serialize UI panel order so it can be restored when workflow is loaded
@@ -72,6 +62,12 @@
 
  $: $layoutState.isMenuOpen = showMenu;
 
+ $: if ($layoutState.root) {
+     root = $layoutState.root
+ } else {
+     root = null;
+ }
+
  async function onRightClick(e) {
      if ($uiState.uiEditMode === "disabled")
          return;
@@ -92,7 +88,7 @@
 </script>
 
 <div id="comfy-ui-panes" on:contextmenu={onRightClick}>
-    <WidgetContainer bind:dragItem={$layoutState.root} classes={["root-container"]} />
+    <WidgetContainer bind:dragItem={root} classes={["root-container"]} />
 </div>
 
 {#if showMenu}
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 837f130..616e17b 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -94,15 +94,14 @@ type LayoutStateOps = {
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
     nodeRemoved: (node: LGraphNode) => void,
-    configureFinished: (graph: LGraph) => void,
     groupItems: (dragItems: IDragItem[]) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
     getCurrentSelection: () => IDragItem[],
     findLayoutForNode: (nodeId: number) => IDragItem | null;
-    clear: (state?: Partial<LayoutState>) => void,
     serialize: () => SerializedLayoutState,
     deserialize: (data: SerializedLayoutState, graph: LGraph) => void,
-    resetLayout: () => void,
+    initDefaultLayout: () => void,
+    onStartConfigure: () => void
 }
 
 export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
@@ -114,7 +113,6 @@ const store: Writable<LayoutState> = writable({
     isMenuOpen: false,
     isConfiguring: true
 })
-addContainer(null, { direction: "horizontal", showTitle: false });
 
 function findDefaultContainerForInsertion(): ContainerLayout | null {
     const state = get(store);
@@ -154,6 +152,7 @@ function addContainer(parent: ContainerLayout | null, attrs: Partial<Attributes>
     if (parent) {
         moveItem(dragItem, parent)
     }
+    console.debug("[layoutState] addContainer", state)
     store.set(state)
     return dragItem;
 }
@@ -176,6 +175,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
     const parentEntry = state.allItems[parent.id]
     const entry: DragItemEntry = { dragItem, children: [], parent: null };
     state.allItems[dragItem.id] = entry;
+    console.debug("[layoutState] addWidget", state)
     moveItem(dragItem, parent)
     return dragItem;
 }
@@ -250,28 +250,6 @@ function nodeRemoved(node: LGraphNode) {
     store.set(state)
 }
 
-function configureFinished(graph: LGraph) {
-    const id = 0;
-
-    clear({ isConfiguring: false })
-
-    const root = addContainer(null, { direction: "horizontal", showTitle: false });
-    const left = addContainer(root, { direction: "vertical", showTitle: false });
-    const right = addContainer(root, { direction: "vertical", showTitle: false });
-
-    const state = get(store)
-    state.root = root;
-    store.set(state)
-
-    console.debug("[layoutState] configure begin", state, graph)
-
-    for (const node of graph._nodes) {
-        nodeAdded(node)
-    }
-
-    console.debug("[layoutState] configureFinished", state)
-}
-
 function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
     const state = get(store)
     const entry = state.allItems[target.id]
@@ -375,20 +353,25 @@ function findLayoutForNode(nodeId: number): WidgetLayout | null {
     return null;
 }
 
-function clear(state: Partial<LayoutState> = {}) {
+function initDefaultLayout() {
     store.set({
         root: null,
         allItems: {},
         currentId: 0,
         currentSelection: [],
         isMenuOpen: false,
-        isConfiguring: true,
-        ...state
+        isConfiguring: false
     })
-}
 
-function resetLayout() {
-    // TODO
+    const root = addContainer(null, { direction: "horizontal", showTitle: false });
+    const left = addContainer(root, { direction: "vertical", showTitle: false });
+    const right = addContainer(root, { direction: "vertical", showTitle: false });
+
+    const state = get(store)
+    state.root = root;
+    store.set(state)
+
+    console.debug("[layoutState] initDefault", state)
 }
 
 export type SerializedLayoutState = {
@@ -436,8 +419,6 @@ function serialize(): SerializedLayoutState {
 }
 
 function deserialize(data: SerializedLayoutState, graph: LGraph) {
-    clear();
-
     const allItems: Record<DragItemID, DragItemEntry> = {}
     for (const pair of Object.entries(data.allItems)) {
         const [id, entry] = pair;
@@ -469,16 +450,28 @@ function deserialize(data: SerializedLayoutState, graph: LGraph) {
         }
     }
 
-    let root = null;
+    let root: IDragItem = null;
     if (data.root)
-        root = allItems[data.root]
+        root = allItems[data.root].dragItem
 
-    const state = get(store)
-    store.set({
-        ...state,
+    const state: LayoutState = {
         root,
         allItems,
         currentId: data.currentId,
+        currentSelection: [],
+        isMenuOpen: false,
+        isConfiguring: false
+    }
+
+    console.debug("[layoutState] deserialize", data, state)
+
+    store.set(state)
+}
+
+function onStartConfigure() {
+    store.update(s => {
+        s.isConfiguring = true;
+        return s
     })
 }
 
@@ -491,13 +484,12 @@ const layoutStateStore: WritableLayoutStateStore =
     updateChildren,
     nodeAdded,
     nodeRemoved,
-    configureFinished,
     getCurrentSelection,
     groupItems,
     findLayoutForNode,
     ungroup,
-    clear,
-    resetLayout,
+    initDefaultLayout,
+    onStartConfigure,
     serialize,
     deserialize
 }
diff --git a/src/mobile/routes/home.svelte b/src/mobile/routes/home.svelte
index db7a42e..c26bb47 100644
--- a/src/mobile/routes/home.svelte
+++ b/src/mobile/routes/home.svelte
@@ -16,24 +16,11 @@
 
  let app: ComfyApp | null = null;
 
- let serializedPaneOrder = {};
-
- function doAutosave(graph: LGraph): void {
-     const savedWorkflow = app.serialize();
-     localStorage.setItem("workflow", JSON.stringify(savedWorkflow))
- }
-
- function doRestore(workflow: SerializedAppState) {
-     serializedPaneOrder = workflow.panes;
- }
-
  onMount(async () => {
      if (app)
          return
      app = $uiState.app = new ComfyApp();
 
-     app.eventBus.on("autosave", doAutosave);
-     app.eventBus.on("restored", doRestore);
 
      app.api.addEventListener("status", (ev: CustomEvent) => {
          queueState.statusUpdated(ev.detail as ComfyAPIStatus);

From 71a3abf5180743923748bad16aed86129749bcf2 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 11:42:21 -0500
Subject: [PATCH 20/27] Auto add new widgets for backend nodes

---
 litegraph                                 |  2 +-
 src/lib/ComfyGraph.ts                     | 92 +++++++++++++++++++++++
 src/lib/GraphSync.ts                      | 11 ++-
 src/lib/IComfyInputSlot.ts                |  6 +-
 src/lib/api.ts                            |  4 +-
 src/lib/components/ComfyApp.svelte        |  4 +-
 src/lib/components/ComfyApp.ts            | 80 +++-----------------
 src/lib/components/WidgetContainer.svelte |  4 +-
 src/lib/nodes/ComfyWidgetNodes.ts         |  5 --
 src/lib/stores/layoutState.ts             | 31 ++++++--
 src/lib/stores/uiState.ts                 |  2 +
 src/lib/widgets.ts                        |  9 ++-
 src/lib/widgets/ComboWidget.svelte        |  1 +
 13 files changed, 150 insertions(+), 101 deletions(-)
 create mode 100644 src/lib/ComfyGraph.ts

diff --git a/litegraph b/litegraph
index ac3621c..f09cba0 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit ac3621c4bdb9b5dd7a9f0a4b0b07599613dee42a
+Subproject commit f09cba0804836d506c98235fb680ec7024e3e69a
diff --git a/src/lib/ComfyGraph.ts b/src/lib/ComfyGraph.ts
new file mode 100644
index 0000000..1c7d6eb
--- /dev/null
+++ b/src/lib/ComfyGraph.ts
@@ -0,0 +1,92 @@
+import { LConnectionKind, LGraph, LGraphNode, type INodeSlot, type SlotIndex, LiteGraph, getStaticProperty, type LGraphAddNodeOptions } from "@litegraph-ts/core";
+import GraphSync from "./GraphSync";
+import EventEmitter from "events";
+import type TypedEmitter from "typed-emitter";
+import layoutState from "./stores/layoutState";
+import uiState from "./stores/uiState";
+import { get } from "svelte/store";
+import type ComfyGraphNode from "./nodes/ComfyGraphNode";
+import type IComfyInputSlot from "./IComfyInputSlot";
+
+type ComfyGraphEvents = {
+    configured: (graph: LGraph) => void
+    nodeAdded: (node: LGraphNode) => void
+    nodeRemoved: (node: LGraphNode) => void
+    nodeConnectionChanged: (kind: LConnectionKind, node: LGraphNode, slot: SlotIndex, targetNode: LGraphNode, targetSlot: SlotIndex) => void
+    cleared: () => void
+    beforeChange: (graph: LGraph, param: any) => void
+    afterChange: (graph: LGraph, param: any) => void
+}
+
+export default class ComfyGraph extends LGraph {
+    graphSync: GraphSync;
+    eventBus: TypedEmitter<ComfyGraphEvents> = new EventEmitter() as TypedEmitter<ComfyGraphEvents>;
+
+    constructor() {
+        super();
+        this.graphSync = new GraphSync(this)
+    }
+
+    override onConfigure() {
+        console.debug("Configured");
+        this.eventBus.emit("configured", this);
+    }
+
+    override onBeforeChange(graph: LGraph, info: any) {
+        console.debug("BeforeChange", info);
+        this.eventBus.emit("beforeChange", graph, info);
+    }
+
+    override onAfterChange(graph: LGraph, info: any) {
+        console.debug("AfterChange", info);
+        this.eventBus.emit("afterChange", graph, info);
+    }
+
+    override onNodeAdded(node: LGraphNode, options: LGraphAddNodeOptions) {
+        layoutState.nodeAdded(node)
+        this.graphSync.onNodeAdded(node);
+
+        if ("comfyClass" in node                // Is this a comfy node
+            && !("svelteComponentType" in node) // ...and not also a ComfyWidgetNode
+            && !options.addedByDeserialize      // ...and we're not trying to deserialize an existing workflow
+            && get(uiState).autoAddUI) {
+            console.debug("[ComfyGraph] AutoAdd UI")
+            const comfyNode = node as ComfyGraphNode;
+            const widgetNodesAdded = []
+            for (let index = 0; index < comfyNode.inputs.length; index++) {
+                const input = comfyNode.inputs[index];
+                if ("config" in input) {
+                    const comfyInput = input as IComfyInputSlot;
+                    if (comfyInput.defaultWidgetNode) {
+                        const widgetNode = LiteGraph.createNode(comfyInput.defaultWidgetNode)
+                        const inputPos = comfyNode.getConnectionPos(true, index);
+                        this.add(widgetNode)
+                        widgetNode.connect(0, comfyNode, index);
+                        widgetNode.collapse();
+                        widgetNode.pos = [inputPos[0] - 140, inputPos[1] + LiteGraph.NODE_SLOT_HEIGHT / 2];
+                        widgetNodesAdded.push(widgetNode)
+                    }
+                }
+            }
+            const dragItems = widgetNodesAdded.map(wn => get(layoutState).allItemsByNode[wn.id]?.dragItem).filter(di => di)
+            console.debug("[ComfyGraph] Group new widgets", dragItems)
+            layoutState.groupItems(dragItems, comfyNode.comfyClass)
+        }
+
+        console.debug("Added", node);
+        this.eventBus.emit("nodeAdded", node);
+    }
+
+    override onNodeRemoved(node: LGraphNode) {
+        layoutState.nodeRemoved(node);
+        this.graphSync.onNodeRemoved(node);
+
+        console.debug("Removed", node);
+        this.eventBus.emit("nodeRemoved", node);
+    }
+
+    override onNodeConnectionChange(kind: LConnectionKind, node: LGraphNode, slot: SlotIndex, targetNode: LGraphNode, targetSlot: SlotIndex) {
+        console.debug("ConnectionChange", node);
+        this.eventBus.emit("nodeConnectionChanged", kind, node, slot, targetNode, targetSlot);
+    }
+}
diff --git a/src/lib/GraphSync.ts b/src/lib/GraphSync.ts
index 4b18344..9614594 100644
--- a/src/lib/GraphSync.ts
+++ b/src/lib/GraphSync.ts
@@ -2,6 +2,7 @@ import type { LGraph, LGraphNode } from "@litegraph-ts/core";
 import type ComfyApp from "./components/ComfyApp";
 import type { Unsubscriber, Writable } from "svelte/store";
 import type { ComfyWidgetNode } from "./nodes";
+import type ComfyGraph from "./ComfyGraph";
 
 type WidgetSubStore = {
     store: WidgetUIStateStore,
@@ -28,13 +29,11 @@ export default class GraphSync {
     // nodeId -> widgetSubStore
     private stores: Record<string, WidgetSubStore> = {}
 
-    constructor(app: ComfyApp) {
-        this.graph = app.lGraph;
-        app.eventBus.on("nodeAdded", this.onNodeAdded.bind(this));
-        app.eventBus.on("nodeRemoved", this.onNodeRemoved.bind(this));
+    constructor(graph: ComfyGraph) {
+        this.graph = graph;
     }
 
-    private onNodeAdded(node: LGraphNode) {
+    onNodeAdded(node: LGraphNode) {
         // TODO assumes only a single graph's widget state.
 
         if ("svelteComponentType" in node) {
@@ -44,7 +43,7 @@ export default class GraphSync {
         this.graph.setDirtyCanvas(true, true);
     }
 
-    private onNodeRemoved(node: LGraphNode) {
+    onNodeRemoved(node: LGraphNode) {
         if ("svelteComponentType" in node) {
             this.removeStore(node as ComfyWidgetNode);
         }
diff --git a/src/lib/IComfyInputSlot.ts b/src/lib/IComfyInputSlot.ts
index 0765207..23dc382 100644
--- a/src/lib/IComfyInputSlot.ts
+++ b/src/lib/IComfyInputSlot.ts
@@ -1,4 +1,5 @@
 import type { INodeInputSlot } from "@litegraph-ts/core";
+import type { ComfyWidgetNode } from "./nodes";
 
 // TODO generalize
 export type ComfyInputConfig = {
@@ -12,6 +13,7 @@ export type ComfyInputConfig = {
 }
 
 export default interface IComfyInputSlot extends INodeInputSlot {
-    serialize: boolean
-    config: ComfyInputConfig // stores range min/max/step, etc.
+    serialize: boolean,
+    defaultWidgetNode?: new (name?: string) => ComfyWidgetNode,
+    config: ComfyInputConfig, // stores range min/max/step, etc.
 }
diff --git a/src/lib/api.ts b/src/lib/api.ts
index b7fd412..159d455 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -231,7 +231,7 @@ export default class ComfyAPI extends EventTarget {
             };
         } catch (error) {
             console.error(error);
-            return { Running: [], Pending: [] };
+            return { Running: [], Pending: [], error };
         }
     }
 
@@ -245,7 +245,7 @@ export default class ComfyAPI extends EventTarget {
             return { History: Object.values(await res.json()) };
         } catch (error) {
             console.error(error);
-            return { History: [] };
+            return { History: [], error };
         }
     }
 
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 8391532..3eb8191 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -107,9 +107,6 @@
          })
      }
 
-     app.eventBus.on("nodeAdded", layoutState.nodeAdded);
-     app.eventBus.on("nodeRemoved", layoutState.nodeRemoved);
-
      app.api.addEventListener("status", (ev: CustomEvent) => {
          queueState.statusUpdated(ev.detail as ComfyAPIStatus);
      });
@@ -176,6 +173,7 @@
         </Button>
         <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
         <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/>
+        <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
         <label for="enable-ui-editing">Enable UI Editing</label>
         <select id="enable-ui-editing" name="enable-ui-editing" bind:value={$uiState.uiEditMode}>
             <option value="disabled">Disabled</option>
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index ebdd582..1a57908 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -13,13 +13,13 @@ import * as nodes from "$lib/nodes/index"
 import ComfyGraphCanvas, { type SerializedGraphCanvasState } from "$lib/ComfyGraphCanvas";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
 import * as widgets from "$lib/widgets/index"
-import type ComfyWidget from "$lib/widgets/ComfyWidget";
 import queueState from "$lib/stores/queueState";
-import GraphSync from "$lib/GraphSync";
 import type { SvelteComponentDev } from "svelte/internal";
 import type IComfyInputSlot from "$lib/IComfyInputSlot";
 import type { SerializedLayoutState } from "$lib/stores/layoutState";
 import layoutState from "$lib/stores/layoutState";
+import { toast } from '@zerodevx/svelte-toast'
+import ComfyGraph from "$lib/ComfyGraph";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -40,17 +40,6 @@ export type SerializedAppState = {
     canvas: SerializedGraphCanvasState
 }
 
-type ComfyAppEvents = {
-    configured: (graph: LGraph) => void
-    nodeAdded: (node: LGraphNode) => void
-    nodeRemoved: (node: LGraphNode) => void
-    nodeConnectionChanged: (kind: LConnectionKind, node: LGraphNode, slot: INodeSlot, targetNode: LGraphNode, targetSlot: INodeSlot) => void
-    cleared: () => void
-    beforeChange: (graph: LGraph, param: any) => void
-    afterChange: (graph: LGraph, param: any) => void
-    restored: (workflow: SerializedAppState) => void
-}
-
 export type Progress = {
     value: number,
     max: number
@@ -61,12 +50,10 @@ export default class ComfyApp {
     rootEl: HTMLDivElement | null = null;
     canvasEl: HTMLCanvasElement | null = null;
     canvasCtx: CanvasRenderingContext2D | null = null;
-    lGraph: LGraph | null = null;
+    lGraph: ComfyGraph | null = null;
     lCanvas: ComfyGraphCanvas | null = null;
     dropZone: HTMLElement | null = null;
     nodeOutputs: Record<string, any> = {};
-    eventBus: TypedEmitter<ComfyAppEvents> = new EventEmitter() as TypedEmitter<ComfyAppEvents>;
-    graphSync: GraphSync;
 
     dragOverNode: LGraphNode | null = null;
     shiftDown: boolean = false;
@@ -82,12 +69,9 @@ export default class ComfyApp {
     async setup(): Promise<void> {
         this.rootEl = document.getElementById("main") as HTMLDivElement;
         this.canvasEl = document.getElementById("graph-canvas") as HTMLCanvasElement;
-        this.lGraph = new LGraph();
+        this.lGraph = new ComfyGraph();
         this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl);
         this.canvasCtx = this.canvasEl.getContext("2d");
-        this.graphSync = new GraphSync(this);
-
-        this.addGraphLifecycleHooks();
 
         LiteGraph.release_link_on_empty_shows_menu = true;
         LiteGraph.alt_drag_do_clone_nodes = true;
@@ -118,7 +102,7 @@ export default class ComfyApp {
         }
 
         // Save current workflow automatically
-        setInterval(this.saveStateToLocalStorage.bind(this), 1000);
+        // setInterval(this.saveStateToLocalStorage.bind(this), 1000);
 
         this.addApiUpdateHandlers();
         this.addDropHandler();
@@ -147,58 +131,12 @@ export default class ComfyApp {
         this.lCanvas.draw(true, true);
     }
 
-    private graphOnConfigure() {
-        console.debug("Configured");
-        this.eventBus.emit("configured", this.lGraph);
-    }
-
-    private graphOnBeforeChange(graph: LGraph, info: any) {
-        console.debug("BeforeChange", info);
-        this.eventBus.emit("beforeChange", graph, info);
-    }
-
-    private graphOnAfterChange(graph: LGraph, info: any) {
-        console.debug("AfterChange", info);
-        this.eventBus.emit("afterChange", graph, info);
-    }
-
-    private graphOnNodeAdded(node: LGraphNode) {
-        console.debug("Added", node);
-        this.eventBus.emit("nodeAdded", node);
-    }
-
-    private graphOnNodeRemoved(node: LGraphNode) {
-        console.debug("Removed", node);
-        this.eventBus.emit("nodeRemoved", node);
-    }
-
-    private graphOnNodeConnectionChange(kind: LConnectionKind, node: LGraphNode, slot: INodeSlot, targetNode: LGraphNode, targetSlot: INodeSlot) {
-        console.debug("ConnectionChange", node);
-        this.eventBus.emit("nodeConnectionChanged", kind, node, slot, targetNode, targetSlot);
-    }
-
-    private canvasOnClear() {
-        console.debug("CanvasClear");
-        this.eventBus.emit("cleared");
-    }
-
     saveStateToLocalStorage() {
         const savedWorkflow = this.serialize();
         const json = JSON.stringify(savedWorkflow);
         localStorage.setItem("workflow", json)
     }
 
-    private addGraphLifecycleHooks() {
-        this.lGraph.onConfigure = this.graphOnConfigure.bind(this);
-        this.lGraph.onBeforeChange = this.graphOnBeforeChange.bind(this);
-        this.lGraph.onAfterChange = this.graphOnAfterChange.bind(this);
-        this.lGraph.onNodeAdded = this.graphOnNodeAdded.bind(this);
-        this.lGraph.onNodeRemoved = this.graphOnNodeRemoved.bind(this);
-        this.lGraph.onNodeConnectionChange = this.graphOnNodeConnectionChange.bind(this);
-
-        this.lCanvas.onClear = this.canvasOnClear.bind(this);
-    }
-
     static node_type_overrides: Record<string, typeof ComfyGraphNode> = {}
     static widget_type_overrides: Record<string, typeof SvelteComponentDev> = {}
 
@@ -642,7 +580,13 @@ export default class ComfyApp {
                         await this.api.queuePrompt(num, p);
                     } catch (error) {
                         // this.ui.dialog.show(error.response || error.toString());
-                        console.error(error.response || error.toString())
+                        const mes = error.response || error.toString()
+                        toast.push(`Error queuing prompt:\n${mes}`, {
+                            theme: {
+                                '--toastBackground': 'var(--color-red-500)',
+                            }
+                        })
+                        console.error("Error queuing prompt", mes, num, p)
                         break;
                     }
 
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 2e425af..0b8759b 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -32,7 +32,7 @@
                && !$layoutState.isMenuOpen
 
 
- $: if ($queueState && widget) {
+ $: if ($queueState && widget && widget.node) {
      dragItem.isNodeExecuting = $queueState.runningNodeId === widget.node.id;
  }
 </script>
@@ -40,7 +40,7 @@
 
 {#if container}
     <BlockContainer {container} {classes} {zIndex} {showHandles} />
-{:else if widget}
+{:else if widget && widget.node}
     <div class="widget" class:widget-edit-outline={$uiState.uiEditMode === "widgets" && zIndex > 1}
         class:selected={$uiState.uiEditMode !== "disabled" && $layoutState.currentSelection.includes(widget.id)}
         class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 29e13de..b4f090f 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -29,8 +29,6 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
 
     /** Svelte class for the frontend logic */
     abstract svelteComponentType: typeof SvelteComponentDev
-    /** Compatible litegraph widget types that can be connected to this node */
-    abstract inputWidgetTypes: string[]
 
     /** If false, user manually set min/max/step, and should not be autoinherited from connected input */
     autoConfig: boolean = true;
@@ -159,7 +157,6 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
     }
 
     override svelteComponentType = RangeWidget
-    override inputWidgetTypes = ["number", "slider"]
 
     static slotLayout: SlotLayout = {
         outputs: [
@@ -203,7 +200,6 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
     }
 
     override svelteComponentType = ComboWidget
-    override inputWidgetTypes = ["combo", "enum"]
 
     constructor(name?: string) {
         super(name, "A")
@@ -269,7 +265,6 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
     }
 
     override svelteComponentType = TextWidget
-    override inputWidgetTypes = ["text"]
 
     constructor(name?: string) {
         super(name, "")
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 616e17b..4713252 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -14,6 +14,7 @@ type DragItemEntry = {
 export type LayoutState = {
     root: IDragItem | null,
     allItems: Record<DragItemID, DragItemEntry>,
+    allItemsByNode: Record<number, DragItemEntry>,
     currentId: number,
     currentSelection: DragItemID[],
     isConfiguring: boolean,
@@ -94,7 +95,7 @@ type LayoutStateOps = {
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
     nodeRemoved: (node: LGraphNode) => void,
-    groupItems: (dragItems: IDragItem[]) => ContainerLayout,
+    groupItems: (dragItems: IDragItem[], title: string) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
     getCurrentSelection: () => IDragItem[],
     findLayoutForNode: (nodeId: number) => IDragItem | null;
@@ -108,6 +109,7 @@ export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
 const store: Writable<LayoutState> = writable({
     root: null,
     allItems: {},
+    allItemsByNode: {},
     currentId: 0,
     currentSelection: [],
     isMenuOpen: false,
@@ -175,6 +177,7 @@ function addWidget(parent: ContainerLayout, node: ComfyWidgetNode, attrs: Partia
     const parentEntry = state.allItems[parent.id]
     const entry: DragItemEntry = { dragItem, children: [], parent: null };
     state.allItems[dragItem.id] = entry;
+    state.allItemsByNode[node.id] = entry;
     console.debug("[layoutState] addWidget", state)
     moveItem(dragItem, parent)
     return dragItem;
@@ -230,6 +233,10 @@ function removeEntry(state: LayoutState, id: DragItemID) {
         const parentEntry = state.allItems[parent.id];
         parentEntry.children = parentEntry.children.filter(item => item.id !== id)
     }
+    if (entry.dragItem.type === "widget") {
+        const widget = entry.dragItem as WidgetLayout;
+        delete state.allItemsByNode[widget.node.id]
+    }
     delete state.allItems[id]
 }
 
@@ -286,7 +293,7 @@ function getCurrentSelection(): IDragItem[] {
     return state.currentSelection.map(id => state.allItems[id].dragItem)
 }
 
-function groupItems(dragItems: IDragItem[]): ContainerLayout {
+function groupItems(dragItems: IDragItem[], title: string = "Group"): ContainerLayout {
     if (dragItems.length === 0)
         return;
 
@@ -303,7 +310,7 @@ function groupItems(dragItems: IDragItem[]): ContainerLayout {
             index = indexFound
     }
 
-    const container = addContainer(parent as ContainerLayout, { title: "Group" }, index)
+    const container = addContainer(parent as ContainerLayout, { title }, index)
 
     for (const item of dragItems) {
         moveItem(item, container)
@@ -420,22 +427,29 @@ function serialize(): SerializedLayoutState {
 
 function deserialize(data: SerializedLayoutState, graph: LGraph) {
     const allItems: Record<DragItemID, DragItemEntry> = {}
+    const allItemsByNode: Record<number, DragItemEntry> = {}
     for (const pair of Object.entries(data.allItems)) {
         const [id, entry] = pair;
+
         const dragItem: IDragItem = {
             type: entry.dragItem.type,
             id: entry.dragItem.id,
             attrs: entry.dragItem.attrs
         };
-        if (dragItem.type === "widget") {
-            const widget = dragItem as WidgetLayout;
-            widget.node = graph.getNodeById(entry.dragItem.nodeId) as ComfyWidgetNode
-        }
-        allItems[id] = {
+
+        const dragEntry: DragItemEntry = {
             dragItem,
             children: [],
             parent: null
         }
+
+        allItems[id] = dragEntry
+
+        if (dragItem.type === "widget") {
+            const widget = dragItem as WidgetLayout;
+            widget.node = graph.getNodeById(entry.dragItem.nodeId) as ComfyWidgetNode
+            allItemsByNode[entry.dragItem.nodeId] = dragEntry
+        }
     }
 
     // reconnect parent/child tree
@@ -457,6 +471,7 @@ function deserialize(data: SerializedLayoutState, graph: LGraph) {
     const state: LayoutState = {
         root,
         allItems,
+        allItemsByNode,
         currentId: data.currentId,
         currentSelection: [],
         isMenuOpen: false,
diff --git a/src/lib/stores/uiState.ts b/src/lib/stores/uiState.ts
index 09c9892..e9422be 100644
--- a/src/lib/stores/uiState.ts
+++ b/src/lib/stores/uiState.ts
@@ -8,6 +8,7 @@ export type UIState = {
     app: ComfyApp,
     nodesLocked: boolean,
     graphLocked: boolean,
+    autoAddUI: boolean,
     uiEditMode: UIEditMode
 }
 
@@ -17,6 +18,7 @@ const store: WritableUIStateStore = writable(
         app: null,
         graphLocked: false,
         nodesLocked: false,
+        autoAddUI: true,
         uiEditMode: "disabled",
     })
 
diff --git a/src/lib/widgets.ts b/src/lib/widgets.ts
index 0bc4464..c020e9e 100644
--- a/src/lib/widgets.ts
+++ b/src/lib/widgets.ts
@@ -4,6 +4,7 @@ import ComfyValueControlWidget from "./widgets/ComfyValueControlWidget";
 import type { ComfyInputConfig } from "./IComfyInputSlot";
 import type IComfyInputSlot from "./IComfyInputSlot";
 import { BuiltInSlotShape } from "@litegraph-ts/core";
+import { ComfyComboNode, ComfySliderNode, ComfyTextNode } from "./nodes";
 
 type WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp) => IComfyInputSlot;
 
@@ -29,19 +30,19 @@ function addComfyInput(node: LGraphNode, inputName: string, extraInfo: Partial<I
 
 const FLOAT: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
     const config = getNumberDefaults(inputData, 0.5);
-    return addComfyInput(node, inputName, { type: "number", config })
+    return addComfyInput(node, inputName, { type: "number", config, defaultWidgetNode: ComfySliderNode })
 }
 
 const INT: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
     const config = getNumberDefaults(inputData, 1);
-    return addComfyInput(node, inputName, { type: "number", config })
+    return addComfyInput(node, inputName, { type: "number", config, defaultWidgetNode: ComfySliderNode })
 };
 
 const STRING: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp): IComfyInputSlot => {
     const defaultValue = inputData[1].default || "";
     const multiline = !!inputData[1].multiline;
 
-    return addComfyInput(node, inputName, { type: "string", config: { defaultValue, multiline } })
+    return addComfyInput(node, inputName, { type: "string", config: { defaultValue, multiline }, defaultWidgetNode: ComfyTextNode })
 };
 
 const COMBO: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
@@ -50,7 +51,7 @@ const COMBO: WidgetFactory = (node: LGraphNode, inputName: string, inputData: an
     if (inputData[1] && inputData[1].default) {
         defaultValue = inputData[1].default;
     }
-    return addComfyInput(node, inputName, { type: "string", config: { values: type, defaultValue } })
+    return addComfyInput(node, inputName, { type: "string", config: { values: type, defaultValue }, defaultWidgetNode: ComfyComboNode })
 }
 
 const IMAGEUPLOAD: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app): IComfyInputSlot => {
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 423785d..9bc7d94 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -13,6 +13,7 @@
  $: widget && setNodeValue(widget);
 
  $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
+     $nodeValue = option
      setOption($nodeValue)
      setNodeValue(widget)
      node.properties = node.properties

From 2252b656804ae4115bf89b6ad8e7bca12665596b Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 11:42:53 -0500
Subject: [PATCH 21/27] Update litegraph.ts

---
 litegraph | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/litegraph b/litegraph
index f09cba0..a1e9ae1 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit f09cba0804836d506c98235fb680ec7024e3e69a
+Subproject commit a1e9ae1261f55f41964215505233f5ab9c9489e1

From 705633d125e2ed83780640e238b8db623d4364e3 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 12:00:02 -0500
Subject: [PATCH 22/27] Fix onExecute

---
 src/lib/components/BlockContainer.svelte |  2 +-
 src/lib/nodes/ComfyWidgetNodes.ts        |  7 ++++++-
 src/lib/widgets/ComboWidget.svelte       | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index b96ba49..a6e999c 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -254,7 +254,7 @@
      border-width: 2px;
      border-style: dashed !important;
      margin: 0.2em;
-     padding: 0.2em;
+     padding: 1.4em;
  }
 
  .widget-edit-outline {
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index b4f090f..e37dcba 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -67,7 +67,10 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     override onExecute() {
         // Assumption: we will have one output in the inherited class with the
         // correct type
-        this.setOutputData(0, this.properties.value)
+        this.setOutputData(0, get(this.value))
+
+        const outputLinks = this.getOutputLinks(0)
+        console.debug("[Widget] onExecute", this, outputLinks)
 
         // TODO send event to linked nodes
     }
@@ -95,6 +98,8 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
             }
 
             console.debug("Property copy", input, this.properties)
+
+            this.setValue(get(this.value))
         }
 
         return true;
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 9bc7d94..da637dc 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -10,6 +10,8 @@
  let propsChanged: Writable<boolean> | null = null;
  let option: any
 
+ export let debug: boolean = false;
+
  $: widget && setNodeValue(widget);
 
  $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
@@ -35,6 +37,15 @@
  $: if (nodeValue && option && option.value) {
      $nodeValue = option.value;
  }
+
+ function getLinkValue() {
+     if (!node)
+         return "???";
+     const links = node.getOutputLinks(0)
+     if (links.length === 0)
+         return "???";
+     return links[0].data
+ }
 </script>
 
 <div class="wrapper gr-combo">
@@ -51,6 +62,11 @@
                 on:filter
                 on:blur
             />
+            {#if debug}
+                <div>Value: {option?.value}</div>
+                <div>NodeValue: {$nodeValue}</div>
+                <div>LinkValue: {getLinkValue()}</div>
+            {/if}
         </label>
     {/if}
 </div>

From 18d27694fde15d83c0d3160a8b4ea99a099e1b81 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 16:13:46 -0500
Subject: [PATCH 23/27] Copy action and button

---
 litegraph                                  |   2 +-
 package.json                               |   1 +
 pnpm-lock.yaml                             | 197 ++++++++++++++------
 pnpm-workspace.yaml                        |   4 +-
 src/App.svelte                             |   5 +-
 src/lib/ComfyGraph.ts                      |  10 +-
 src/lib/components/BlockContainer.svelte   |   4 +-
 src/lib/components/ComfyApp.svelte         |  46 +++--
 src/lib/components/ComfyApp.ts             | 121 ++++--------
 src/lib/components/ComfyUIPane.svelte      |  10 +-
 src/lib/components/WidgetContainer.svelte  |   3 +
 src/lib/nodes/ComfyActionNodes.ts          |  53 ++++++
 src/lib/nodes/ComfyBackendNode.ts          |  92 ++++++++++
 src/lib/nodes/ComfyGraphNode.ts            |   1 -
 src/lib/nodes/ComfyImageNodes.ts           |  43 -----
 src/lib/nodes/ComfyWidgetNodes.ts          | 204 +++++++++++++++++++--
 src/lib/nodes/index.ts                     |   2 +-
 src/lib/stores/layoutState.ts              |  16 +-
 src/lib/widgets.ts                         |  11 +-
 src/lib/widgets/ButtonWidget.svelte        |  44 +++++
 src/lib/widgets/ComfyGalleryWidget.svelte  |  56 ------
 src/lib/widgets/ComfyGalleryWidget.ts      |  26 ---
 src/lib/widgets/ComfyValueControlWidget.ts |  54 ------
 src/lib/widgets/GalleryWidget.svelte       |  78 ++++++++
 24 files changed, 700 insertions(+), 383 deletions(-)
 create mode 100644 src/lib/nodes/ComfyActionNodes.ts
 create mode 100644 src/lib/nodes/ComfyBackendNode.ts
 delete mode 100644 src/lib/nodes/ComfyImageNodes.ts
 create mode 100644 src/lib/widgets/ButtonWidget.svelte
 delete mode 100644 src/lib/widgets/ComfyGalleryWidget.ts
 delete mode 100644 src/lib/widgets/ComfyValueControlWidget.ts
 create mode 100644 src/lib/widgets/GalleryWidget.svelte

diff --git a/litegraph b/litegraph
index a1e9ae1..93b0ed1 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit a1e9ae1261f55f41964215505233f5ab9c9489e1
+Subproject commit 93b0ed15b7f5ca70ab074ebe7d8b39d3e5963818
diff --git a/package.json b/package.json
index eba5ec1..3b33289 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@gradio/utils": "workspace:*",
     "@litegraph-ts/core": "workspace:*",
     "@litegraph-ts/nodes-basic": "workspace:*",
+    "@litegraph-ts/nodes-events": "workspace:*",
     "@litegraph-ts/tsconfig": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "@tsconfig/svelte": "^4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e77552..4eb0430 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -37,6 +37,9 @@ importers:
       '@litegraph-ts/nodes-basic':
         specifier: workspace:*
         version: link:litegraph/packages/nodes-basic
+      '@litegraph-ts/nodes-events':
+        specifier: workspace:*
+        version: link:litegraph/packages/nodes-events
       '@litegraph-ts/tsconfig':
         specifier: workspace:*
         version: link:litegraph/packages/tsconfig
@@ -129,7 +132,7 @@ importers:
     devDependencies:
       vite:
         specifier: ^2.9.9
-        version: 2.9.9(sass@1.61.0)
+        version: 2.9.9
 
   gradio/js/accordion: {}
 
@@ -694,7 +697,7 @@ importers:
         version: 1.0.0-next.91(@sveltejs/kit@1.15.2)
       '@sveltejs/kit':
         specifier: ^1.0.0-next.318
-        version: 1.15.2(svelte@3.58.0)(vite@4.3.1)
+        version: 1.15.2(svelte@3.58.0)
       autoprefixer:
         specifier: ^10.4.2
         version: 10.4.2(postcss@8.4.21)
@@ -706,13 +709,13 @@ importers:
         version: 3.1.1
       svelte-check:
         specifier: ^2.2.6
-        version: 2.2.6(postcss-load-config@3.1.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)
+        version: 2.2.6(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)
       svelte-preprocess:
         specifier: ^4.10.1
-        version: 4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@4.5.4)
+        version: 4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4)
       tailwindcss:
         specifier: ^3.0.12
-        version: 3.3.1(postcss@8.4.21)
+        version: 3.3.1
       tslib:
         specifier: ^2.3.1
         version: 2.3.1
@@ -746,7 +749,7 @@ importers:
         version: 5.0.3
       vite:
         specifier: ^4.2.1
-        version: 4.2.1(sass@1.61.0)
+        version: 4.2.1
       vite-plugin-checker:
         specifier: ^0.5.6
         version: 0.5.6(eslint@8.37.0)(typescript@5.0.3)(vite@4.2.1)
@@ -765,7 +768,23 @@ importers:
         version: 5.0.3
       vite:
         specifier: ^4.2.1
-        version: 4.2.1(sass@1.61.0)
+        version: 4.2.1
+
+  litegraph/packages/nodes-events:
+    dependencies:
+      '@litegraph-ts/core':
+        specifier: workspace:*
+        version: link:../core
+    devDependencies:
+      '@litegraph-ts/tsconfig':
+        specifier: workspace:*
+        version: link:../tsconfig
+      typescript:
+        specifier: ^5.0.3
+        version: 5.0.3
+      vite:
+        specifier: ^4.2.1
+        version: 4.3.1
 
   litegraph/packages/tsconfig: {}
 
@@ -1993,11 +2012,11 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0-next.587
     dependencies:
-      '@sveltejs/kit': 1.15.2(svelte@3.58.0)(vite@4.3.1)
+      '@sveltejs/kit': 1.15.2(svelte@3.58.0)
       import-meta-resolve: 2.2.2
     dev: true
 
-  /@sveltejs/kit@1.15.2(svelte@3.58.0)(vite@4.3.1):
+  /@sveltejs/kit@1.15.2(svelte@3.58.0):
     resolution: {integrity: sha512-rLNxZrjbrlPf8AWW8GAU4L/Vvu17e9v8EYl7pUip7x72lTft7RcxeP3z7tsrHpMSBBxC9o4XdKzFvz1vMZyXZw==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
@@ -2006,7 +2025,7 @@ packages:
       svelte: ^3.54.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.1.1(svelte@3.58.0)(vite@4.3.1)
+      '@sveltejs/vite-plugin-svelte': 2.1.1(svelte@3.58.0)
       '@types/cookie': 0.5.1
       cookie: 0.5.0
       devalue: 4.3.0
@@ -2020,7 +2039,24 @@ packages:
       svelte: 3.58.0
       tiny-glob: 0.2.9
       undici: 5.20.0
-      vite: 4.3.1(@types/node@18.16.0)(sass@1.61.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@sveltejs/vite-plugin-svelte@2.1.1(svelte@3.58.0):
+    resolution: {integrity: sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      svelte: ^3.54.0
+      vite: ^4.0.0
+    dependencies:
+      debug: 4.3.4
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.0
+      svelte: 3.58.0
+      svelte-hmr: 0.15.1(svelte@3.58.0)
+      vitefu: 0.2.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2042,6 +2078,7 @@ packages:
       vitefu: 0.2.4(vite@4.3.1)
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@ts-morph/common@0.18.1:
     resolution: {integrity: sha512-RVE+zSRICWRsfrkAw5qCAK+4ZH9kwEFv5h0+/YeHTLieWP7F4wWq4JsKFuNWG+fYh/KF+8rAtgdj5zb2mm+DVA==}
@@ -4304,7 +4341,7 @@ packages:
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 29.5.0(@types/node@18.16.0)
+      jest-config: 29.5.0
       jest-util: 29.5.0
       jest-validate: 29.5.0
       prompts: 2.4.2
@@ -4315,6 +4352,44 @@ packages:
       - ts-node
     dev: true
 
+  /jest-config@29.5.0:
+    resolution: {integrity: sha512-kvDUKBnNJPNBmFFOhDbm59iu1Fii1Q6SxyhXfvylq3UTHbg6o7j/g8k2dZyXWLvfdKB1vAPxNZnMgtKJcmu3kA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      '@types/node': '*'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      '@babel/core': 7.21.4
+      '@jest/test-sequencer': 29.5.0
+      '@jest/types': 29.5.0
+      babel-jest: 29.5.0(@babel/core@7.21.4)
+      chalk: 4.1.2
+      ci-info: 3.8.0
+      deepmerge: 4.3.1
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      jest-circus: 29.5.0
+      jest-environment-node: 29.5.0
+      jest-get-type: 29.4.3
+      jest-regex-util: 29.4.3
+      jest-resolve: 29.5.0
+      jest-runner: 29.5.0
+      jest-util: 29.5.0
+      jest-validate: 29.5.0
+      micromatch: 4.0.5
+      parse-json: 5.2.0
+      pretty-format: 29.5.0
+      slash: 3.0.0
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /jest-config@29.5.0(@types/node@18.16.0):
     resolution: {integrity: sha512-kvDUKBnNJPNBmFFOhDbm59iu1Fii1Q6SxyhXfvylq3UTHbg6o7j/g8k2dZyXWLvfdKB1vAPxNZnMgtKJcmu3kA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5894,7 +5969,7 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check@2.2.6(postcss-load-config@3.1.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0):
+  /svelte-check@2.2.6(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0):
     resolution: {integrity: sha512-oJux/afbmcZO+N+ADXB88h6XANLie8Y2rh2qBlhgfkpr2c3t/q/T0w2JWrHqagaDL8zeNwO8a8RVFBkrRox8gg==}
     hasBin: true
     peerDependencies:
@@ -5908,7 +5983,7 @@ packages:
       sade: 1.8.1
       source-map: 0.7.4
       svelte: 3.58.0
-      svelte-preprocess: 4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3)
+      svelte-preprocess: 4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@5.0.3)
       typescript: 5.0.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -5988,7 +6063,7 @@ packages:
       tiny-glob: 0.2.9
     dev: false
 
-  /svelte-preprocess@4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@4.5.4):
+  /svelte-preprocess@4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4):
     resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==}
     engines: {node: '>= 9.11.2'}
     requiresBuild: true
@@ -6035,14 +6110,13 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.21
       postcss-load-config: 3.1.1
-      sass: 1.61.0
       sorcery: 0.10.0
       strip-indent: 3.0.0
       svelte: 3.58.0
       typescript: 4.5.4
     dev: true
 
-  /svelte-preprocess@4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(sass@1.61.0)(svelte@3.58.0)(typescript@5.0.3):
+  /svelte-preprocess@4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@5.0.3):
     resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==}
     engines: {node: '>= 9.11.2'}
     requiresBuild: true
@@ -6089,7 +6163,6 @@ packages:
       magic-string: 0.25.9
       postcss: 8.4.21
       postcss-load-config: 3.1.1
-      sass: 1.61.0
       sorcery: 0.10.0
       strip-indent: 3.0.0
       svelte: 3.58.0
@@ -6232,42 +6305,6 @@ packages:
       sucrase: 3.32.0
     transitivePeerDependencies:
       - ts-node
-    dev: false
-
-  /tailwindcss@3.3.1(postcss@8.4.21):
-    resolution: {integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==}
-    engines: {node: '>=12.13.0'}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.0.9
-    dependencies:
-      arg: 5.0.2
-      chokidar: 3.5.3
-      color-name: 1.1.4
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.2.12
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.18.2
-      lilconfig: 2.1.0
-      micromatch: 4.0.5
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.21
-      postcss-import: 14.1.0(postcss@8.4.21)
-      postcss-js: 4.0.1(postcss@8.4.21)
-      postcss-load-config: 3.1.4(postcss@8.4.21)
-      postcss-nested: 6.0.0(postcss@8.4.21)
-      postcss-selector-parser: 6.0.11
-      postcss-value-parser: 4.2.0
-      quick-lru: 5.1.1
-      resolve: 1.22.2
-      sucrase: 3.32.0
-    transitivePeerDependencies:
-      - ts-node
-    dev: true
 
   /test-exclude@6.0.0:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
@@ -6969,7 +7006,7 @@ packages:
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
       typescript: 5.0.3
-      vite: 4.2.1(sass@1.61.0)
+      vite: 4.2.1
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.8
@@ -6992,7 +7029,7 @@ packages:
       kolorist: 1.8.0
       magic-string: 0.29.0
       ts-morph: 17.0.1
-      vite: 4.2.1(sass@1.61.0)
+      vite: 4.2.1
     transitivePeerDependencies:
       - '@types/node'
       - rollup
@@ -7026,7 +7063,7 @@ packages:
       - typescript
     dev: true
 
-  /vite@2.9.9(sass@1.61.0):
+  /vite@2.9.9:
     resolution: {integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==}
     engines: {node: '>=12.2.0'}
     hasBin: true
@@ -7046,12 +7083,11 @@ packages:
       postcss: 8.4.21
       resolve: 1.22.2
       rollup: 2.79.1
-      sass: 1.61.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.2.1(sass@1.61.0):
+  /vite@4.2.1:
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -7080,10 +7116,41 @@ packages:
       postcss: 8.4.21
       resolve: 1.22.2
       rollup: 3.21.0
-      sass: 1.61.0
     optionalDependencies:
       fsevents: 2.3.2
 
+  /vite@4.3.1:
+    resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.17.18
+      postcss: 8.4.21
+      rollup: 3.21.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vite@4.3.1(@types/node@18.16.0)(sass@1.61.0):
     resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -7150,6 +7217,15 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /vitefu@0.2.4:
+    resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dev: true
+
   /vitefu@0.2.4(vite@4.3.1):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
@@ -7159,6 +7235,7 @@ packages:
         optional: true
     dependencies:
       vite: 4.3.1(sass@1.61.0)
+    dev: false
 
   /vitest@0.25.8(sass@1.61.0):
     resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index cd2c7a0..0cf1b02 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,4 @@
 packages:
   - 'gradio/js/*'
   - 'gradio/client/js'
-  - 'litegraph/packages/core'
-  - 'litegraph/packages/nodes-basic'
-  - 'litegraph/packages/tsconfig'
+  - 'litegraph/packages/*'
diff --git a/src/App.svelte b/src/App.svelte
index a075214..821d589 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
  import ComfyApp from "$lib/components/ComfyApp.svelte"
+ import { default as ComfyAppState } from "$lib/components/ComfyApp"
  import "@litegraph-ts/core/css/litegraph.css";
  import "./scss/global.scss";
 
  import { onMount } from 'svelte';
+
+ const app = new ComfyAppState();
 </script>
 
-<ComfyApp/>
+<ComfyApp {app}/>
 
 <style>
 </style>
diff --git a/src/lib/ComfyGraph.ts b/src/lib/ComfyGraph.ts
index 1c7d6eb..6e5d82a 100644
--- a/src/lib/ComfyGraph.ts
+++ b/src/lib/ComfyGraph.ts
@@ -7,6 +7,7 @@ import uiState from "./stores/uiState";
 import { get } from "svelte/store";
 import type ComfyGraphNode from "./nodes/ComfyGraphNode";
 import type IComfyInputSlot from "./IComfyInputSlot";
+import type { ComfyBackendNode } from "./nodes/ComfyBackendNode";
 
 type ComfyGraphEvents = {
     configured: (graph: LGraph) => void
@@ -16,6 +17,7 @@ type ComfyGraphEvents = {
     cleared: () => void
     beforeChange: (graph: LGraph, param: any) => void
     afterChange: (graph: LGraph, param: any) => void
+    afterExecute: () => void
 }
 
 export default class ComfyGraph extends LGraph {
@@ -42,6 +44,10 @@ export default class ComfyGraph extends LGraph {
         this.eventBus.emit("afterChange", graph, info);
     }
 
+    override onAfterExecute() {
+        this.eventBus.emit("afterExecute");
+    }
+
     override onNodeAdded(node: LGraphNode, options: LGraphAddNodeOptions) {
         layoutState.nodeAdded(node)
         this.graphSync.onNodeAdded(node);
@@ -51,7 +57,7 @@ export default class ComfyGraph extends LGraph {
             && !options.addedByDeserialize      // ...and we're not trying to deserialize an existing workflow
             && get(uiState).autoAddUI) {
             console.debug("[ComfyGraph] AutoAdd UI")
-            const comfyNode = node as ComfyGraphNode;
+            const comfyNode = node as ComfyBackendNode;
             const widgetNodesAdded = []
             for (let index = 0; index < comfyNode.inputs.length; index++) {
                 const input = comfyNode.inputs[index];
@@ -70,7 +76,7 @@ export default class ComfyGraph extends LGraph {
             }
             const dragItems = widgetNodesAdded.map(wn => get(layoutState).allItemsByNode[wn.id]?.dragItem).filter(di => di)
             console.debug("[ComfyGraph] Group new widgets", dragItems)
-            layoutState.groupItems(dragItems, comfyNode.comfyClass)
+            layoutState.groupItems(dragItems, { title: comfyNode.comfyClass })
         }
 
         console.debug("Added", node);
diff --git a/src/lib/components/BlockContainer.svelte b/src/lib/components/BlockContainer.svelte
index a6e999c..263ebfb 100644
--- a/src/lib/components/BlockContainer.svelte
+++ b/src/lib/components/BlockContainer.svelte
@@ -143,7 +143,7 @@
          gap: var(--layout-gap);
          width: var(--size-full);
 
-         .v-pane {
+         > :global(.block > .v-pane) {
              flex-direction: row;
          }
 
@@ -157,7 +157,7 @@
      &.vertical {
          position: relative;
 
-         .v-pane {
+         > :global(.block > .v-pane) {
              flex-direction: column;
          }
 
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 3eb8191..ed7b3ce 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -17,13 +17,14 @@
  import ComfyQueue from "./ComfyQueue.svelte";
  import queueState from "$lib/stores/queueState";
 
- let app: ComfyApp = undefined;
+ export let app: ComfyApp = undefined;
  let imageViewer: ImageViewer;
  let queue: ComfyQueue = undefined;
  let mainElem: HTMLDivElement;
  let uiPane: ComfyUIPane = undefined;
  let containerElem: HTMLDivElement;
  let resizeTimeout: NodeJS.Timeout | null;
+ let hasShownUIHelpToast: boolean = false;
 
  let debugLayout: boolean = true;
 
@@ -44,8 +45,8 @@
      app.queuePrompt(0, 1);
  }
 
- $: if (app) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked;
- $: if (app) app.lCanvas.allow_interaction = !$uiState.graphLocked;
+ $: if (app?.lCanvas) app.lCanvas.allow_dragnodes = !$uiState.nodesLocked;
+ $: if (app?.lCanvas) app.lCanvas.allow_interaction = !$uiState.graphLocked;
 
  $: if ($uiState.uiEditMode)
      $layoutState.currentSelection = []
@@ -98,27 +99,26 @@
      app.lCanvas.recenter();
  }
 
- onMount(async () => {
-     app = new ComfyApp();
+ $: if ($uiState.uiEditMode !== "disabled" && !hasShownUIHelpToast) {
+     hasShownUIHelpToast = true;
+     toast.push("Right-click to open context menu.")
+ }
 
-     if (debugLayout) {
-         layoutState.subscribe(s => {
-             console.warn("UPDATESTATE", s)
-         })
-     }
+ if (debugLayout) {
+     layoutState.subscribe(s => {
+         console.warn("UPDATESTATE", s)
+     })
+ }
 
-     app.api.addEventListener("status", (ev: CustomEvent) => {
-         queueState.statusUpdated(ev.detail as ComfyAPIStatus);
-     });
-
-     await app.setup();
-     (window as any).app = app;
-     (window as any).appPane = uiPane;
-
-     refreshView();
+ app.api.addEventListener("status", (ev: CustomEvent) => {
+     queueState.statusUpdated(ev.detail as ComfyAPIStatus);
+ });
 
+ $: if (app.rootEl && !imageViewer) {
      imageViewer = new ImageViewer(app.rootEl);
+ }
 
+ $: if (containerElem) {
      let wrappers = containerElem.querySelectorAll<HTMLDivElement>(".pane-wrapper")
      for (const wrapper of wrappers) {
          const paneNode = wrapper.parentNode as HTMLElement; // get the node inside the <Pane/>
@@ -126,6 +126,14 @@
              app.resizeCanvas()
          }
      }
+ }
+
+ onMount(async () => {
+     await app.setup();
+     (window as any).app = app;
+     (window as any).appPane = uiPane;
+
+     refreshView();
  })
 </script>
 
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 1a57908..69ed594 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -1,4 +1,4 @@
-import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode, type Vector2 } from "@litegraph-ts/core";
+import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode, type Vector2, BuiltInSlotType } from "@litegraph-ts/core";
 import type { LConnectionKind, INodeSlot } from "@litegraph-ts/core";
 import ComfyAPI from "$lib/api"
 import { ComfyWidgets } from "$lib/widgets"
@@ -9,7 +9,9 @@ import type TypedEmitter from "typed-emitter";
 
 // Import nodes
 import "@litegraph-ts/nodes-basic"
+import "@litegraph-ts/nodes-events"
 import * as nodes from "$lib/nodes/index"
+
 import ComfyGraphCanvas, { type SerializedGraphCanvasState } from "$lib/ComfyGraphCanvas";
 import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
 import * as widgets from "$lib/widgets/index"
@@ -20,6 +22,7 @@ import type { SerializedLayoutState } from "$lib/stores/layoutState";
 import layoutState from "$lib/stores/layoutState";
 import { toast } from '@zerodevx/svelte-toast'
 import ComfyGraph from "$lib/ComfyGraph";
+import { ComfyBackendNode } from "$lib/nodes/ComfyBackendNode";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -61,12 +64,18 @@ export default class ComfyApp {
 
     private queueItems: QueueItem[] = [];
     private processingQueue: boolean = false;
+    private alreadySetup = false;
 
     constructor() {
         this.api = new ComfyAPI();
     }
 
     async setup(): Promise<void> {
+        if (this.alreadySetup) {
+            console.error("Already setup")
+            return;
+        }
+
         this.rootEl = document.getElementById("main") as HTMLDivElement;
         this.canvasEl = document.getElementById("graph-canvas") as HTMLCanvasElement;
         this.lGraph = new ComfyGraph();
@@ -76,11 +85,7 @@ export default class ComfyApp {
         LiteGraph.release_link_on_empty_shows_menu = true;
         LiteGraph.alt_drag_do_clone_nodes = true;
 
-        this.lGraph.start();
-
         // await this.#invokeExtensionsAsync("init");
-        this.registerNodeTypeOverrides();
-        this.registerWidgetTypeOverrides();
         await this.registerNodes();
 
         // Load previous workflow
@@ -109,10 +114,7 @@ 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
+        this.setupColorScheme()
 
         // await this.#invokeExtensionsAsync("setup");
 
@@ -120,6 +122,11 @@ export default class ComfyApp {
         this.resizeCanvas();
         window.addEventListener("resize", this.resizeCanvas.bind(this));
 
+        this.lGraph.start();
+        this.lGraph.eventBus.on("afterExecute", () => this.lCanvas.draw(true))
+
+        this.alreadySetup = true;
+
         return Promise.resolve();
     }
 
@@ -137,32 +144,14 @@ export default class ComfyApp {
         localStorage.setItem("workflow", json)
     }
 
-    static node_type_overrides: Record<string, typeof ComfyGraphNode> = {}
+    static node_type_overrides: Record<string, typeof ComfyBackendNode> = {}
     static widget_type_overrides: Record<string, typeof SvelteComponentDev> = {}
 
-    private registerNodeTypeOverrides() {
-        ComfyApp.node_type_overrides["SaveImage"] = nodes.ComfySaveImageNode;
-        ComfyApp.node_type_overrides["PreviewImage"] = nodes.ComfyPreviewImageNode;
-    }
-
-    private registerWidgetTypeOverrides() {
-        ComfyApp.widget_type_overrides["comfy/gallery"] = widgets.ComfyGalleryWidget_Svelte;
-    }
-
     private async registerNodes() {
         const app = this;
 
         // Load node definitions from the backend
         const defs = await this.api.getNodeDefs();
-        // await this.#invokeExtensionsAsync("addCustomNodeDefs", defs);
-
-        // Generate list of known widgets
-        const widgets = ComfyWidgets;
-        // const widgets = Object.assign(
-        // 	{},
-        // 	ComfyWidgets,
-        // 	...(await this.#invokeExtensionsAsync("getCustomWidgets")).filter(Boolean)
-        // );
 
         // Register a node for each definition
         for (const nodeId in defs) {
@@ -171,60 +160,11 @@ export default class ComfyApp {
             const typeOverride = ComfyApp.node_type_overrides[nodeId]
             if (typeOverride)
                 console.debug("Attaching custom type to received node:", nodeId, typeOverride)
-            const baseClass: typeof LGraphNode = typeOverride || LGraphNode;
+            const baseClass: typeof ComfyBackendNode = typeOverride || ComfyBackendNode;
 
             const ctor = class extends baseClass {
                 constructor(title?: string) {
-                    super(title);
-                    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"])
-                    }
-                    const config = { minWidth: 1, minHeight: 1 };
-                    for (const inputName in inputs) {
-                        const inputData = inputs[inputName];
-                        const type = inputData[0];
-
-                        if (inputData[1]?.forceInput) {
-                            this.addInput(inputName, type);
-                        } else {
-                            if (Array.isArray(type)) {
-                                // Enums
-                                Object.assign(config, widgets.COMBO(this, inputName, inputData, app) || {});
-                            } else if (`${type}:${inputName}` in widgets) {
-                                // Support custom widgets by Type:Name
-                                Object.assign(config, widgets[`${type}:${inputName}`](this, inputName, inputData, app) || {});
-                            } else if (type in widgets) {
-                                // Standard type widgets
-                                Object.assign(config, widgets[type](this, inputName, inputData, app) || {});
-                            } else {
-                                // Node connection inputs (backend)
-                                this.addInput(inputName, type, { color_off: "orange", color_on: "orange" });
-                            }
-                        }
-                    }
-
-                    for (const o in nodeData["output"]) {
-                        const output = nodeData["output"][o];
-                        const outputName = nodeData["output_name"][o] || output;
-                        this.addOutput(outputName, output, { color_off: "orange", color_on: "orange" });
-                    }
-
-                    const s = this.computeSize();
-                    s[0] = Math.max(config.minWidth, s[0] * 1.5);
-                    s[1] = Math.max(config.minHeight, s[1]);
-                    this.size = s;
-                    this.serialize_widgets = false;
-
-                    // app.#invokeExtensionsAsync("nodeCreated", this);
-
-                    return this;
+                    super(title, nodeId, nodeData);
                 }
             }
 
@@ -235,15 +175,9 @@ export default class ComfyApp {
                 desc: `ComfyNode: ${nodeId}`
             }
 
-            // this.#addNodeContextMenuHandler(node);
-            // this.#addDrawBackgroundHandler(node, app);
-
-            // await this.#invokeExtensionsAsync("beforeRegisterNodeDef", node, nodeData);
             LiteGraph.registerNodeType(node);
             node.category = nodeData.category;
         }
-
-        // await this.#invokeExtensionsAsync("registerCustomNodes");
     }
 
     private showDropZone() {
@@ -363,6 +297,23 @@ export default class ComfyApp {
         });
     }
 
+    private setupColorScheme() {
+        const setColor = (type: any, color: string) => {
+            this.lCanvas.link_type_colors[type] = color
+            this.lCanvas.default_connection_color_byType[type] = color
+        }
+
+        // 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) {
+            setColor(type, "orange")
+        }
+
+        setColor("OUTPUT", "rebeccapurple")
+        setColor(BuiltInSlotType.EVENT, "lightseagreen")
+        setColor(BuiltInSlotType.ACTION, "lightseagreen")
+    }
+
     serialize(): SerializedAppState {
         const graph = this.lGraph;
 
diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte
index 9cee8a5..b9a95b1 100644
--- a/src/lib/components/ComfyUIPane.svelte
+++ b/src/lib/components/ComfyUIPane.svelte
@@ -29,10 +29,10 @@
      // TODO
  }
 
- function groupWidgets() {
+ function groupWidgets(horizontal: boolean) {
      const items = layoutState.getCurrentSelection()
      $layoutState.currentSelection = []
-     layoutState.groupItems(items)
+     layoutState.groupItems(items, { direction: horizontal ? "horizontal" : "vertical" })
  }
 
  let canUngroup = false;
@@ -95,8 +95,12 @@
     <Menu {...menuPos} on:click={closeMenu} on:clickoutside={closeMenu}>
         <MenuOption
             isDisabled={$layoutState.currentSelection.length === 0}
-            on:click={groupWidgets}
+            on:click={() => groupWidgets(false)}
             text="Group" />
+        <MenuOption
+            isDisabled={$layoutState.currentSelection.length === 0}
+            on:click={() => groupWidgets(true)}
+            text="Group Horizontally" />
         <MenuOption
             isDisabled={!canUngroup}
             on:click={ungroup}
diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte
index 0b8759b..1fd3b41 100644
--- a/src/lib/components/WidgetContainer.svelte
+++ b/src/lib/components/WidgetContainer.svelte
@@ -56,6 +56,9 @@
  .widget.selected {
      background: var(--color-yellow-200);
  }
+ .container.selected {
+     background: var(--color-yellow-400);
+ }
 
  .is-executing {
      border: 3px dashed var(--color-green-600) !important;
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
new file mode 100644
index 0000000..091019e
--- /dev/null
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -0,0 +1,53 @@
+import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, BuiltInSlotType, type ITextWidget } from "@litegraph-ts/core";
+import ComfyGraphNode from "./ComfyGraphNode";
+import { Watch } from "@litegraph-ts/nodes-basic";
+
+export interface ComfyCopyActionProperties extends Record<any, any> {
+    value: any
+}
+
+export class ComfyCopyAction extends ComfyGraphNode {
+    override properties: ComfyCopyActionProperties = {
+        value: null
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "in", type: "*" },
+            { name: "copy", type: BuiltInSlotType.ACTION }
+        ],
+        outputs: [
+            { name: "out", type: "*" }
+        ],
+    }
+
+    displayWidget: ITextWidget;
+
+    constructor(title?: string) {
+        super(title);
+        this.displayWidget = this.addWidget<ITextWidget>(
+            "text",
+            "Value",
+            "",
+            "value"
+        );
+        this.displayWidget.disabled = true;
+    }
+
+    override onExecute() {
+        this.setProperty("value", this.getInputData(0))
+    }
+
+    override onAction(action: any, param: any) {
+        this.setProperty("value", this.getInputData(0))
+        this.setOutputData(0, this.properties.value)
+        console.log("setData", this.properties.value)
+    };
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyCopyAction,
+    title: "Comfy.CopyAction",
+    desc: "Copies its input to its output when an event is received",
+    type: "actions/copy"
+})
diff --git a/src/lib/nodes/ComfyBackendNode.ts b/src/lib/nodes/ComfyBackendNode.ts
new file mode 100644
index 0000000..3cde566
--- /dev/null
+++ b/src/lib/nodes/ComfyBackendNode.ts
@@ -0,0 +1,92 @@
+import LGraphCanvas from "@litegraph-ts/core/src/LGraphCanvas";
+import ComfyGraphNode from "./ComfyGraphNode";
+import ComfyWidgets from "$lib/widgets"
+import type { ComfyWidgetNode } from "./ComfyWidgetNodes";
+
+/*
+ * Base class for any node with configuration sent by the backend.
+ */
+export class ComfyBackendNode extends ComfyGraphNode {
+    comfyClass: string;
+
+    constructor(title: string, comfyClass: string, nodeData: any) {
+        super(title)
+        this.type = comfyClass; // XXX: workaround dependency in LGraphNode.addInput()
+        this.comfyClass = comfyClass;
+        this.isBackendNode = true;
+
+        const color = LGraphCanvas.node_colors["yellow"];
+        this.color = color.color
+        this.bgColor = color.bgColor
+
+        this.setup(nodeData)
+
+        // ComfyUI has no obvious way to identify if a node will return outputs back to the frontend based on its properties.
+        // It just returns a hash like { "ui": { "images": results } } internally.
+        // So this will need to be hardcoded for now.
+        if (["PreviewImage", "SaveImage"].indexOf(comfyClass) !== -1) {
+            this.addOutput("output", "OUTPUT");
+        }
+    }
+
+    private setup(nodeData: any) {
+        var inputs = nodeData["input"]["required"];
+        if (nodeData["input"]["optional"] != undefined) {
+            inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
+        }
+
+        const config = { minWidth: 1, minHeight: 1 };
+        for (const inputName in inputs) {
+            const inputData = inputs[inputName];
+            const type = inputData[0];
+
+            if (inputData[1]?.forceInput) {
+                this.addInput(inputName, type);
+            } else {
+                if (Array.isArray(type)) {
+                    // Enums
+                    Object.assign(config, ComfyWidgets.COMBO(this, inputName, inputData) || {});
+                } else if (`${type}:${inputName}` in ComfyWidgets) {
+                    // Support custom ComfyWidgets by Type:Name
+                    Object.assign(config, ComfyWidgets[`${type}:${inputName}`](this, inputName, inputData) || {});
+                } else if (type in ComfyWidgets) {
+                    // Standard type ComfyWidgets
+                    Object.assign(config, ComfyWidgets[type](this, inputName, inputData) || {});
+                } else {
+                    // Node connection inputs (backend)
+                    this.addInput(inputName, type);
+                }
+            }
+        }
+
+        for (const o in nodeData["output"]) {
+            const output = nodeData["output"][o];
+            const outputName = nodeData["output_name"][o] || output;
+            this.addOutput(outputName, output);
+        }
+
+        const s = this.computeSize();
+        s[0] = Math.max(config.minWidth, s[0] * 1.5);
+        s[1] = Math.max(config.minHeight, s[1]);
+        this.size = s;
+        this.serialize_widgets = false;
+
+        // app.#invokeExtensionsAsync("nodeCreated", this);
+    }
+
+    override onExecuted(outputData: any) {
+        console.warn("onExecuted outputs", outputData)
+        for (let index = 0; index < this.outputs.length; index++) {
+            const output = this.outputs[index]
+            if (output.type === "OUTPUT") {
+                this.setOutputData(index, outputData)
+                for (const node of this.getOutputNodes(index)) {
+                    if ("receiveOutput" in node) {
+                        const widgetNode = node as ComfyWidgetNode;
+                        widgetNode.receiveOutput();
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts
index 6f334f5..9bfb588 100644
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -2,7 +2,6 @@ import type ComfyWidget from "$lib/components/widgets/ComfyWidget";
 import { LGraph, LGraphNode } from "@litegraph-ts/core";
 
 export default class ComfyGraphNode extends LGraphNode {
-    comfyClass: string | null
     isBackendNode?: boolean;
 
     afterQueued?(): void;
diff --git a/src/lib/nodes/ComfyImageNodes.ts b/src/lib/nodes/ComfyImageNodes.ts
deleted file mode 100644
index 996e1e8..0000000
--- a/src/lib/nodes/ComfyImageNodes.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import ComfyGalleryWidget, { type ComfyGalleryEntry } from "$lib/widgets/ComfyGalleryWidget";
-import ComfyGraphNode from "./ComfyGraphNode";
-
-export type ComfyImageResult = {
-    filename: string,
-    subfolder: string,
-    type: "output" | "temp"
-}
-export type ComfyImageExecOutput = {
-    images: ComfyImageResult[]
-}
-
-/*
- * Node with a single extra image output widget
- */
-class ComfyImageNode extends ComfyGraphNode {
-    private _imageResults: Array<ComfyImageResult> = [];
-    private _galleryWidget: ComfyGalleryWidget;
-
-    constructor(title?: any) {
-        super(title)
-        this._galleryWidget = new ComfyGalleryWidget("Images", [], this);
-        this.addCustomWidget(this._galleryWidget);
-    }
-
-    override onExecuted(output: ComfyImageExecOutput) {
-        this._imageResults = Array.from(output.images); // TODO append?
-        const galleryItems = this._imageResults.map(r => {
-            // TODO
-            const url = "http://localhost:8188/view?"
-            const params = new URLSearchParams(r)
-            let entry: ComfyGalleryEntry = [url + params, null]
-            return entry
-        });
-        this._galleryWidget.addImages(galleryItems);
-    }
-}
-
-export class ComfySaveImageNode extends ComfyImageNode {
-}
-
-export class ComfyPreviewImageNode extends ComfyImageNode {
-}
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index e37dcba..2012414 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -1,15 +1,18 @@
-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 { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, LGraph, type INodeInputSlot, type ITextWidget, type INodeOutputSlot, type SerializedLGraphNode, BuiltInSlotType } 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 GalleryWidget from "$lib/widgets/GalleryWidget.svelte";
+import ButtonWidget from "$lib/widgets/ButtonWidget.svelte";
 import type { SvelteComponentDev } from "svelte/internal";
-import { ComfyWidgets } from "$lib/widgets";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import type IComfyInputSlot from "$lib/IComfyInputSlot";
 import { writable, type Unsubscriber, type Writable, get } from "svelte/store";
 import { clamp } from "$lib/utils"
 import layoutState from "$lib/stores/layoutState";
+import type { FileData as GradioFileData } from "@gradio/upload";
+import queueState from "$lib/stores/queueState";
 
 export interface ComfyWidgetProperties extends Record<string, any> {
     defaultValue: any
@@ -36,6 +39,10 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     override isBackendNode = false;
     override serialize_widgets = true;
 
+    outputIndex: number = 0;
+    inputIndex: number = 0;
+    changedIndex: number = 1;
+
     displayWidget: ITextWidget;
 
     override size: Vector2 = [60, 40];
@@ -55,24 +62,47 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
     }
 
+    formatValue(value: any): string {
+        return Watch.toString(value)
+    }
+
     private onValueUpdated(value: any) {
         console.debug("[Widget] valueUpdated", this, value)
-        this.displayWidget.value = Watch.toString(value)
+        this.displayWidget.value = this.formatValue(value)
+
+        if (this.outputs.length >= this.outputIndex) {
+            this.setOutputData(this.outputIndex, get(this.value))
+        }
+        if (this.outputs.length >= this.changedIndex) {
+            const changedOutput = this.outputs[this.changedIndex]
+            if (changedOutput.type === BuiltInSlotType.EVENT)
+                this.triggerSlot(this.changedIndex, "changed")
+        }
     }
 
     setValue(value: any) {
         this.value.set(value)
     }
 
+    abstract validateValue(value: any): boolean;
+
+    /*
+     * Logic to run if this widget can be treated as output (slider, combo, text)
+     */
     override onExecute() {
-        // Assumption: we will have one output in the inherited class with the
-        // correct type
-        this.setOutputData(0, get(this.value))
+        if (this.inputs.length >= this.inputIndex) {
+            const data = this.getInputData(this.inputIndex)
+            if (data && this.validateValue(data)) { // TODO can "null" be a legitimate value here?
+                this.setValue(data)
+            }
+        }
+        if (this.outputs.length >= this.outputIndex) {
+            this.setOutputData(this.outputIndex, get(this.value))
+        }
+    }
 
-        const outputLinks = this.getOutputLinks(0)
-        console.debug("[Widget] onExecute", this, outputLinks)
-
-        // TODO send event to linked nodes
+    /** Called when a backend node sends a ComfyUI output over a link */
+    receiveOutput() {
     }
 
     onConnectOutput(
@@ -93,7 +123,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
                 this.setValue(this.properties.defaultValue)
 
             const widget = layoutState.findLayoutForNode(this.id)
-            if (widget) {
+            if (widget && input.name !== "") {
                 widget.attrs.title = input.name;
             }
 
@@ -164,8 +194,12 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
     override svelteComponentType = RangeWidget
 
     static slotLayout: SlotLayout = {
-        outputs: [
+        inputs: [
             { name: "value", type: "number" }
+        ],
+        outputs: [
+            { name: "value", type: "number" },
+            { name: "changed", type: BuiltInSlotType.EVENT }
         ]
     }
 
@@ -173,6 +207,12 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
         super(name, 0)
     }
 
+    override validateValue(value: any): boolean {
+        return typeof value === "number"
+            && value >= this.properties.min
+            && value <= this.properties.max
+    }
+
     override clampOneConfig(input: IComfyInputSlot) {
         // this.setProperty("min", clamp(this.properties.min, input.config.min, input.config.max))
         // this.setProperty("max", clamp(this.properties.max, input.config.max, input.config.min))
@@ -199,8 +239,12 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
     }
 
     static slotLayout: SlotLayout = {
-        outputs: [
+        inputs: [
             { name: "value", type: "string" }
+        ],
+        outputs: [
+            { name: "value", type: "string" },
+            { name: "changed", type: BuiltInSlotType.EVENT }
         ]
     }
 
@@ -236,6 +280,12 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
         return true;
     }
 
+    override validateValue(value: any): boolean {
+        if (typeof value !== "string")
+            return false;
+        return this.properties.values.indexOf(value) !== -1;
+    }
+
     override clampOneConfig(input: IComfyInputSlot) {
         if (input.config.values.indexOf(this.properties.value) === -1) {
             if (input.config.values.length === 0)
@@ -264,8 +314,12 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
     }
 
     static slotLayout: SlotLayout = {
-        outputs: [
+        inputs: [
             { name: "value", type: "string" }
+        ],
+        outputs: [
+            { name: "value", type: "string" },
+            { name: "changed", type: BuiltInSlotType.EVENT }
         ]
     }
 
@@ -274,6 +328,10 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
     constructor(name?: string) {
         super(name, "")
     }
+
+    override validateValue(value: any): boolean {
+        return typeof value === "string"
+    }
 }
 
 LiteGraph.registerNodeType({
@@ -282,3 +340,121 @@ LiteGraph.registerNodeType({
     desc: "Textbox outputting a string value",
     type: "ui/text"
 })
+
+/** Raw output as received from ComfyUI's backend */
+export type GalleryOutput = {
+    images: GalleryOutputEntry[]
+}
+
+/** Raw output entry as received from ComfyUI's backend */
+export type GalleryOutputEntry = {
+    filename: string,
+    subfolder: string,
+    type: string
+}
+
+export interface ComfyGalleryProperties extends ComfyWidgetProperties {
+}
+
+export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
+    override properties: ComfyGalleryProperties = {
+        defaultValue: []
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "images", type: "OUTPUT" }
+        ]
+    }
+
+    override svelteComponentType = GalleryWidget
+
+    constructor(name?: string) {
+        super(name, [])
+    }
+
+    override afterQueued() {
+        let queue = get(queueState)
+        if (!(typeof queue.queueRemaining === "number" && queue.queueRemaining > 1)) {
+            this.setValue([])
+        }
+    }
+
+    override formatValue(value: GradioFileData[]): string {
+        return `Images: ${value.length}`
+    }
+
+    override validateValue(value: any): boolean {
+        return Array.isArray(value) && value.every(e => "images" in e)
+    }
+
+    receiveOutput() {
+        const link = this.getInputLink(0)
+        if (link.data && "images" in link.data) {
+            const data = link.data as GalleryOutput
+            console.debug("[ComfyGalleryNode] Received output!", data)
+
+            const galleryItems: GradioFileData[] = data.images.map(r => {
+                // TODO configure backend URL
+                const url = "http://localhost:8188/view?"
+                const params = new URLSearchParams(r)
+                return {
+                    name: null,
+                    data: url + params
+                }
+            });
+
+            const currentValue = get(this.value)
+            this.setValue(currentValue.concat(galleryItems))
+        }
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyGalleryNode,
+    title: "UI.Gallery",
+    desc: "Gallery that shows most recent outputs",
+    type: "ui/gallery"
+})
+
+export interface ComfyButtonProperties extends ComfyWidgetProperties {
+    message: string
+}
+
+export class ComfyButtonNode extends ComfyWidgetNode<boolean> {
+    override properties: ComfyButtonProperties = {
+        defaultValue: false,
+        message: "bang"
+    }
+
+    static slotLayout: SlotLayout = {
+        outputs: [
+            { name: "event", type: BuiltInSlotType.EVENT },
+            { name: "isClicked", type: "boolean" },
+        ]
+    }
+
+    override outputIndex = 1;
+    override svelteComponentType = ButtonWidget;
+
+    override validateValue(value: any): boolean {
+        return typeof value === "boolean"
+    }
+
+    onClick() {
+        this.setValue(true)
+        this.triggerSlot(0, this.properties.message);
+        this.setValue(false)
+    }
+
+    constructor(name?: string) {
+        super(name, false)
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyButtonNode,
+    title: "UI.Button",
+    desc: "Button that triggers an event when clicked",
+    type: "ui/button"
+})
diff --git a/src/lib/nodes/index.ts b/src/lib/nodes/index.ts
index c35b6e8..4907332 100644
--- a/src/lib/nodes/index.ts
+++ b/src/lib/nodes/index.ts
@@ -1,3 +1,3 @@
 export { default as ComfyReroute } from "./ComfyReroute"
-export { ComfySaveImageNode, ComfyPreviewImageNode } from "./ComfyImageNodes"
 export { ComfyWidgetNode, ComfySliderNode, ComfyComboNode, ComfyTextNode } from "./ComfyWidgetNodes"
+export { ComfyCopyAction } from "./ComfyActionNodes"
diff --git a/src/lib/stores/layoutState.ts b/src/lib/stores/layoutState.ts
index 4713252..a299319 100644
--- a/src/lib/stores/layoutState.ts
+++ b/src/lib/stores/layoutState.ts
@@ -64,7 +64,7 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
 export { ALL_ATTRIBUTES };
 
 export type Attributes = {
-    direction: string,
+    direction: "horizontal" | "vertical",
     title: string,
     showTitle: boolean,
     classes: string
@@ -95,7 +95,7 @@ type LayoutStateOps = {
     updateChildren: (parent: IDragItem, children: IDragItem[]) => IDragItem[],
     nodeAdded: (node: LGraphNode) => void,
     nodeRemoved: (node: LGraphNode) => void,
-    groupItems: (dragItems: IDragItem[], title: string) => ContainerLayout,
+    groupItems: (dragItems: IDragItem[], attrs?: Partial<Attributes>) => ContainerLayout,
     ungroup: (container: ContainerLayout) => void,
     getCurrentSelection: () => IDragItem[],
     findLayoutForNode: (nodeId: number) => IDragItem | null;
@@ -265,7 +265,7 @@ function moveItem(target: IDragItem, to: ContainerLayout, index: number = -1) {
 
     if (entry.parent) {
         const parentEntry = state.allItems[entry.parent.id];
-        const index = parentEntry.children.indexOf(target)
+        const index = parentEntry.children.findIndex(c => c.id === target.id)
         if (index !== -1) {
             parentEntry.children.splice(index, 1)
         }
@@ -293,7 +293,7 @@ function getCurrentSelection(): IDragItem[] {
     return state.currentSelection.map(id => state.allItems[id].dragItem)
 }
 
-function groupItems(dragItems: IDragItem[], title: string = "Group"): ContainerLayout {
+function groupItems(dragItems: IDragItem[], attrs: Partial<Attributes> = {}): ContainerLayout {
     if (dragItems.length === 0)
         return;
 
@@ -305,17 +305,19 @@ function groupItems(dragItems: IDragItem[], title: string = "Group"): ContainerL
 
     let index = undefined;
     if (parent) {
-        const indexFound = state.allItems[parent.id].children.indexOf(dragItems[0])
+        const indexFound = state.allItems[parent.id].children.findIndex(c => c.id === dragItems[0].id)
         if (indexFound !== -1)
             index = indexFound
     }
 
-    const container = addContainer(parent as ContainerLayout, { title }, index)
+    const container = addContainer(parent as ContainerLayout, attrs, index)
 
     for (const item of dragItems) {
         moveItem(item, container)
     }
 
+    console.debug("[layoutState] Grouped", container, parent, state.allItems[container.id].children, index)
+
     store.set(state)
     return container
 }
@@ -331,7 +333,7 @@ function ungroup(container: ContainerLayout) {
 
     let index = undefined;
     const parentChildren = state.allItems[parent.id].children;
-    const indexFound = parentChildren.indexOf(container)
+    const indexFound = parentChildren.findIndex(c => c.id === container.id)
     if (indexFound !== -1)
         index = indexFound
 
diff --git a/src/lib/widgets.ts b/src/lib/widgets.ts
index c020e9e..93e8a98 100644
--- a/src/lib/widgets.ts
+++ b/src/lib/widgets.ts
@@ -1,12 +1,11 @@
 import type { IWidget, LGraphNode } from "@litegraph-js/core";
-import type ComfyApp from "$lib/components/ComfyApp";
 import ComfyValueControlWidget from "./widgets/ComfyValueControlWidget";
 import type { ComfyInputConfig } from "./IComfyInputSlot";
 import type IComfyInputSlot from "./IComfyInputSlot";
 import { BuiltInSlotShape } from "@litegraph-ts/core";
 import { ComfyComboNode, ComfySliderNode, ComfyTextNode } from "./nodes";
 
-type WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp) => IComfyInputSlot;
+type WidgetFactory = (node: LGraphNode, inputName: string, inputData: any) => IComfyInputSlot;
 
 function getNumberDefaults(inputData: any, defaultStep: number): ComfyInputConfig {
     let defaultValue = inputData[1]["default"];
@@ -38,7 +37,7 @@ const INT: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any)
     return addComfyInput(node, inputName, { type: "number", config, defaultWidgetNode: ComfySliderNode })
 };
 
-const STRING: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app: ComfyApp): IComfyInputSlot => {
+const STRING: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
     const defaultValue = inputData[1].default || "";
     const multiline = !!inputData[1].multiline;
 
@@ -54,13 +53,13 @@ const COMBO: WidgetFactory = (node: LGraphNode, inputName: string, inputData: an
     return addComfyInput(node, inputName, { type: "string", config: { values: type, defaultValue }, defaultWidgetNode: ComfyComboNode })
 }
 
-const IMAGEUPLOAD: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any, app): IComfyInputSlot => {
+const IMAGEUPLOAD: WidgetFactory = (node: LGraphNode, inputName: string, inputData: any): IComfyInputSlot => {
     return addComfyInput(node, inputName, { type: "number", config: {} })
 }
 
 export type WidgetRepository = Record<string, WidgetFactory>
 
-export const ComfyWidgets: WidgetRepository = {
+const ComfyWidgets: WidgetRepository = {
     "INT:seed": INT,
     "INT:noise_seed": INT,
     FLOAT,
@@ -69,3 +68,5 @@ export const ComfyWidgets: WidgetRepository = {
     COMBO,
     IMAGEUPLOAD,
 }
+
+export default ComfyWidgets
diff --git a/src/lib/widgets/ButtonWidget.svelte b/src/lib/widgets/ButtonWidget.svelte
new file mode 100644
index 0000000..de3c972
--- /dev/null
+++ b/src/lib/widgets/ButtonWidget.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+ import type { ComfyButtonNode } from "$lib/nodes/ComfyWidgetNodes";
+ import type { ComfySliderNode } from "$lib/nodes/index";
+ import { type WidgetLayout } from "$lib/stores/layoutState";
+ import { Button } from "@gradio/button";
+ import { get, type Writable } from "svelte/store";
+ export let widget: WidgetLayout | null = null;
+ let node: ComfyButtonNode | null = null;
+ let nodeValue: Writable<boolean> | null = null;
+ let propsChanged: Writable<boolean> | null = null;
+
+ $: widget && setNodeValue(widget);
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfyButtonNode
+         nodeValue = node.value;
+         propsChanged = node.propsChanged;
+     }
+ };
+
+ function onClick(e: MouseEvent) {
+     node.onClick();
+ }
+
+ const style = {
+     full_width: "100%"
+ }
+</script>
+
+<div class="wrapper gr-button">
+    {#if node !== null}
+        <Button on:click={onClick} variant="primary" {style}>
+            {widget.attrs.title}
+        </Button>
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+</style>
diff --git a/src/lib/widgets/ComfyGalleryWidget.svelte b/src/lib/widgets/ComfyGalleryWidget.svelte
index fdaa96d..e69de29 100644
--- a/src/lib/widgets/ComfyGalleryWidget.svelte
+++ b/src/lib/widgets/ComfyGalleryWidget.svelte
@@ -1,56 +0,0 @@
-<script lang="ts">
- import { onMount } from "svelte";
- import { ImageViewer } from "$lib/ImageViewer";
- import { Block } from "@gradio/atoms";
- import { Gallery } from "@gradio/gallery";
- import type { Styles } from "@gradio/utils";
-
- export let item: WidgetUIState | null = null;
- let itemValue: WidgetUIStateStore | null = null; // stores must be declared at top level
-
- $: if(item) {
-     itemValue = item.value;
- }
-
- let style: Styles = {
-     // grid_cols: [2],
-     grid: [3],
-     // object_fit: "cover",
- }
- let element: HTMLDivElement;
-
- function updateForLightbox() {
-     // Wait for gradio gallery to show the large preview image, if no timeout then
-     // the event might fire too early
-     setTimeout(() => {
-         const images = element.querySelectorAll<HTMLImageElement>('div.block div > img')
-         if (images != null) {
-             images.forEach(ImageViewer.instance.setupImageForLightbox.bind(ImageViewer.instance));
-         }
-         ImageViewer.instance.updateOnBackgroundChange();
-     }, 200)
- }
-
-</script>
-<div class="wrapper comfy-gallery-widget gr-gallery" bind:this={element}>
-    {#if item && itemValue}
-        <Block variant="solid" padding={false}>
-            <Gallery
-                bind:value={$itemValue}
-                label={item.widget.name}
-                show_label={true}
-                {style}
-                root={""}
-                root_url={""}
-                on:select={updateForLightbox}
-            />
-        </Block>
-    {/if}
-</div>
-
-<style>
- .wrapper {
-     padding: 2px;
-     width: 100%;
- }
-</style>
diff --git a/src/lib/widgets/ComfyGalleryWidget.ts b/src/lib/widgets/ComfyGalleryWidget.ts
deleted file mode 100644
index fa0b747..0000000
--- a/src/lib/widgets/ComfyGalleryWidget.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { get } from "svelte/store";
-import type { WidgetPanelOptions } from "@litegraph-ts/core";
-import ComfyWidget from "./ComfyWidget";
-import type { ComfyImageResult } from "$lib/nodes/ComfySaveImageNode";
-import queueState from "$lib/stores/queueState";
-
-export type ComfyGalleryEntry = [string, string | null]; // <img> src and alt/title, gradio format
-
-export interface ComfyGalleryWidgetOptions extends WidgetPanelOptions {
-}
-
-export default class ComfyGalleryWidget extends ComfyWidget<ComfyGalleryWidgetOptions, ComfyGalleryEntry[]> {
-    override type = "comfy/gallery";
-    override isVirtual = true;
-
-    addImages(images: ComfyImageResult[]) {
-        this.setValue(this.value.concat(images));
-    }
-
-    override afterQueued() {
-        let queue = get(queueState)
-        if (!(typeof queue.queueRemaining === "number" && queue.queueRemaining > 1)) {
-            this.setValue([])
-        }
-    }
-}
diff --git a/src/lib/widgets/ComfyValueControlWidget.ts b/src/lib/widgets/ComfyValueControlWidget.ts
deleted file mode 100644
index a6b8ba8..0000000
--- a/src/lib/widgets/ComfyValueControlWidget.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { IEnumWidget, IEnumWidgetOptions, INumberWidget, LGraphNode, WidgetPanelOptions } from "@litegraph-ts/core";
-import ComfyWidget from "./ComfyWidget";
-import type { ComfyImageResult } from "$lib/nodes/ComfySaveImageNode";
-import type ComfyGraphNode from "$lib/nodes/ComfyGraphNode";
-
-export interface ComfyValueControlWidgetOptions extends IEnumWidgetOptions {
-}
-
-export default class ComfyValueControlWidget extends ComfyWidget<ComfyValueControlWidgetOptions, string> {
-    override type = "combo";
-    targetWidget: INumberWidget;
-
-    constructor(name: string, value: string, node: ComfyGraphNode, targetWidget: INumberWidget) {
-        super(name, value, node)
-        this.targetWidget = targetWidget;
-        this.options = { values: ["fixed", "increment", "decrement", "randomize"], serialize: false };
-    }
-
-    override afterQueued() {
-		var v = this.value;
-
-		let min = this.targetWidget.options.min;
-		let max = this.targetWidget.options.max;
-		// limit to something that javascript can handle
-		max = Math.min(1125899906842624, max);
-		min = Math.max(-1125899906842624, min);
-		let range = (max - min) / (this.targetWidget.options.step);
-
-		//adjust values based on valueControl Behaviour
-		switch (v) {
-			case "fixed":
-				break;
-			case "increment":
-				this.targetWidget.value += this.targetWidget.options.step;
-				break;
-			case "decrement":
-				this.targetWidget.value -= this.targetWidget.options.step;
-				break;
-			case "randomize":
-				this.targetWidget.value = Math.floor(Math.random() * range) * (this.targetWidget.options.step) + min;
-			default:
-				break;
-		}
-	/*check if values are over or under their respective
-	 * ranges and set them to min or max.*/
-		if (this.targetWidget.value < min)
-			this.targetWidget.value = min;
-
-		if (this.targetWidget.value > max)
-			this.targetWidget.value = max;
-
-        // nodeState.widgetStateChanged(this.node.id, this.targetWidget);
-    }
-}
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
new file mode 100644
index 0000000..dcd4d01
--- /dev/null
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+ import { ImageViewer } from "$lib/ImageViewer";
+ import { Block } from "@gradio/atoms";
+ import { Gallery } from "@gradio/gallery";
+ import type { Styles } from "@gradio/utils";
+ import type { WidgetLayout } from "$lib/stores/layoutState";
+ import type { Writable } from "svelte/store";
+ import type { ComfyGalleryNode } from "$lib/nodes/ComfyWidgetNodes";
+ import type { FileData as GradioFileData } from "@gradio/upload";
+
+ export let widget: WidgetLayout | null = null;
+ let node: ComfyGalleryNode | null = null;
+ let nodeValue: Writable<GradioFileData[]> | null = null;
+ let propsChanged: Writable<boolean> | null = null;
+ let option: number | null = null;
+
+ $: widget && setNodeValue(widget);
+
+ function setNodeValue(widget: WidgetLayout) {
+     if (widget) {
+         node = widget.node as ComfyGalleryNode
+         nodeValue = node.value;
+         propsChanged = node.propsChanged;
+     }
+ };
+
+ let style: Styles = {
+     // grid_cols: [2],
+     grid: [3],
+     // object_fit: "cover",
+ }
+ let element: HTMLDivElement;
+
+ function updateForLightbox() {
+     // Wait for gradio gallery to show the large preview image, if no timeout then
+     // the event might fire too early
+     setTimeout(() => {
+         const images = element.querySelectorAll<HTMLImageElement>('div.block div > img')
+         if (images != null) {
+             images.forEach(ImageViewer.instance.setupImageForLightbox.bind(ImageViewer.instance));
+         }
+         ImageViewer.instance.updateOnBackgroundChange();
+     }, 200)
+ }
+
+</script>
+<div class="wrapper comfy-gallery-widget gr-gallery" bind:this={element}>
+    {#if widget && node && nodeValue}
+        <Block variant="solid" padding={false}>
+            <div class="padding">
+                <Gallery
+                    bind:value={$nodeValue}
+                    label={widget.attrs.title}
+                    show_label={true}
+                    {style}
+                    root={""}
+                    root_url={""}
+                    on:select={updateForLightbox}
+                />
+            </div>
+        </Block>
+    {/if}
+</div>
+
+<style>
+ .wrapper {
+     padding: 2px;
+     width: 100%;
+ }
+
+ .padding {
+     height: 30rem;
+ }
+
+ .wrapper :global(button.thumbnail-lg) {
+     width: var(--size-32);
+ }
+</style>

From e663f4db8865131e280a62ecd728a58e048bc6ed Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 16:25:23 -0500
Subject: [PATCH 24/27] AfterQueued action

---
 litegraph                         |  2 +-
 src/lib/components/ComfyApp.ts    | 31 +++++++++++++++++-------
 src/lib/nodes/ComfyActionNodes.ts | 40 +++++++++++++++++++++++++++++++
 src/lib/nodes/ComfyGraphNode.ts   |  3 ++-
 4 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/litegraph b/litegraph
index 93b0ed1..0e4bbd2 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit 93b0ed15b7f5ca70ab074ebe7d8b39d3e5963818
+Subproject commit 0e4bbd2169661f1ea47d7abccdba071bc0ba1c9a
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 69ed594..22193eb 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -43,6 +43,19 @@ export type SerializedAppState = {
     canvas: SerializedGraphCanvasState
 }
 
+/** [link origin, link index] | value */
+export type SerializedPromptInput = [string, number] | any
+
+export type SerializedPromptInputs = {
+    inputs: Record<string, SerializedPromptInput>,
+    class_type: string
+}
+
+export type SerializedPrompt = {
+    workflow: SerializedLGraph,
+    output: Record<string, SerializedPromptInputs>
+}
+
 export type Progress = {
     value: number,
     max: number
@@ -402,7 +415,7 @@ export default class ComfyApp {
      * Converts the current graph workflow for sending to the API
      * @returns The workflow and node links
      */
-    async graphToPrompt() {
+    async graphToPrompt(): Promise<SerializedPrompt> {
         // Run frontend-only logic
         this.lGraph.runStep(1)
 
@@ -410,14 +423,16 @@ export default class ComfyApp {
 
         const output = {};
         // Process nodes in order of execution
-        for (const node of this.lGraph.computeExecutionOrder<ComfyGraphNode>(false, null)) {
-            const n = workflow.nodes.find((n) => n.id === node.id);
+        for (const node_ of this.lGraph.computeExecutionOrder<ComfyGraphNode>(false, null)) {
+            const n = workflow.nodes.find((n) => n.id === node_.id);
 
-            if (!node.isBackendNode) {
-                console.debug("Not serializing node: ", node.type)
+            if (!node_.isBackendNode) {
+                console.debug("Not serializing node: ", node_.type)
                 continue;
             }
 
+            const node = node_ as ComfyBackendNode;
+
             if (node.mode === NodeMode.NEVER) {
                 // Don't serialize muted nodes
                 continue;
@@ -444,10 +459,8 @@ export default class ComfyApp {
                     if ("config" in inp)
                         serialize = (inp as IComfyInputSlot).serialize
 
-                    let isBackendNode = false;
+                    let isBackendNode = node.isBackendNode;
                     let isInputBackendNode = false;
-                    if ("isBackendNode" in node)
-                        isBackendNode = (node as ComfyGraphNode).isBackendNode;
                     if ("isBackendNode" in inputNode)
                         isInputBackendNode = (inputNode as ComfyGraphNode).isBackendNode;
 
@@ -544,7 +557,7 @@ export default class ComfyApp {
                     for (const n of p.workflow.nodes) {
                         const node = this.lGraph.getNodeById(n.id);
                         if ("afterQueued" in node) {
-                            (node as ComfyGraphNode).afterQueued();
+                            (node as ComfyGraphNode).afterQueued(p);
                         }
                     }
 
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index 091019e..e58a2ba 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -1,6 +1,46 @@
 import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, BuiltInSlotType, type ITextWidget } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import { Watch } from "@litegraph-ts/nodes-basic";
+import type { SerializedPrompt } from "$lib/components/ComfyApp";
+
+export interface ComfyAfterQueuedAction extends Record<any, any> {
+    prompt: SerializedPrompt
+}
+
+export class ComfyAfterQueuedAction extends ComfyGraphNode {
+    override properties: ComfyCopyActionProperties = {
+        prompt: null
+    }
+
+    static slotLayout: SlotLayout = {
+        outputs: [
+            { name: "afterQueued", type: BuiltInSlotType.EVENT },
+            { name: "prompt", type: "*" }
+        ],
+    }
+
+    override onPropertyChanged(property: string, value: any, prevValue?: any) {
+        if (property === "value") {
+            this.setOutputData(0, this.properties.prompt)
+        }
+    }
+
+    override onExecute() {
+        this.setOutputData(0, this.properties.prompt)
+    }
+
+    override afterQueued(p: SerializedPrompt) {
+        this.setProperty("value", p)
+        this.triggerSlot(0, "bang")
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyAfterQueuedAction,
+    title: "Comfy.AfterQueuedAction",
+    desc: "Triggers a 'bang' event when a prompt is queued.",
+    type: "actions/after_queued"
+})
 
 export interface ComfyCopyActionProperties extends Record<any, any> {
     value: any
diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts
index 9bfb588..bbe87d1 100644
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -1,9 +1,10 @@
+import type { SerializedPrompt } from "$lib/components/ComfyApp";
 import type ComfyWidget from "$lib/components/widgets/ComfyWidget";
 import { LGraph, LGraphNode } from "@litegraph-ts/core";
 
 export default class ComfyGraphNode extends LGraphNode {
     isBackendNode?: boolean;
 
-    afterQueued?(): void;
+    afterQueued?(prompt: SerializedPrompt): void;
     onExecuted?(output: any): void;
 }

From 2ae41e26e6d0b338255e34c95097047fdb863e9f Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 19:02:54 -0500
Subject: [PATCH 25/27] Add some branching nodes

---
 litegraph                          |   2 +-
 package.json                       |   1 +
 pnpm-lock.yaml                     |  19 ++++
 src/lib/ComfyGraph.ts              |  70 +++++++++-----
 src/lib/components/ComfyApp.svelte |   2 +-
 src/lib/components/ComfyApp.ts     |   8 +-
 src/lib/defaultGraph.ts            |  28 +++---
 src/lib/nodes/ComfyGraphNode.ts    |  14 +++
 src/lib/nodes/ComfySelector.ts     | 120 +++++++++++++++++++++++
 src/lib/nodes/ComfyValueControl.ts | 107 +++++++++++++++++++++
 src/lib/nodes/ComfyWidgetNodes.ts  | 147 ++++++++++++++++++++---------
 src/lib/nodes/index.ts             |   2 +
 12 files changed, 433 insertions(+), 87 deletions(-)
 create mode 100644 src/lib/nodes/ComfySelector.ts
 create mode 100644 src/lib/nodes/ComfyValueControl.ts

diff --git a/litegraph b/litegraph
index 0e4bbd2..fd56d0c 160000
--- a/litegraph
+++ b/litegraph
@@ -1 +1 @@
-Subproject commit 0e4bbd2169661f1ea47d7abccdba071bc0ba1c9a
+Subproject commit fd56d0c4e698b7a5bfccb1aa86e15db0f16120df
diff --git a/package.json b/package.json
index 3b33289..23ae656 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@litegraph-ts/core": "workspace:*",
     "@litegraph-ts/nodes-basic": "workspace:*",
     "@litegraph-ts/nodes-events": "workspace:*",
+    "@litegraph-ts/nodes-math": "workspace:*",
     "@litegraph-ts/tsconfig": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "^2.1.1",
     "@tsconfig/svelte": "^4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4eb0430..0fccfd3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ importers:
       '@litegraph-ts/nodes-events':
         specifier: workspace:*
         version: link:litegraph/packages/nodes-events
+      '@litegraph-ts/nodes-math':
+        specifier: workspace:*
+        version: link:litegraph/packages/nodes-math
       '@litegraph-ts/tsconfig':
         specifier: workspace:*
         version: link:litegraph/packages/tsconfig
@@ -786,6 +789,22 @@ importers:
         specifier: ^4.2.1
         version: 4.3.1
 
+  litegraph/packages/nodes-math:
+    dependencies:
+      '@litegraph-ts/core':
+        specifier: workspace:*
+        version: link:../core
+    devDependencies:
+      '@litegraph-ts/tsconfig':
+        specifier: workspace:*
+        version: link:../tsconfig
+      typescript:
+        specifier: ^5.0.3
+        version: 5.0.3
+      vite:
+        specifier: ^4.2.1
+        version: 4.3.1
+
   litegraph/packages/tsconfig: {}
 
 packages:
diff --git a/src/lib/ComfyGraph.ts b/src/lib/ComfyGraph.ts
index 6e5d82a..28778be 100644
--- a/src/lib/ComfyGraph.ts
+++ b/src/lib/ComfyGraph.ts
@@ -8,6 +8,7 @@ import { get } from "svelte/store";
 import type ComfyGraphNode from "./nodes/ComfyGraphNode";
 import type IComfyInputSlot from "./IComfyInputSlot";
 import type { ComfyBackendNode } from "./nodes/ComfyBackendNode";
+import type { ComfyWidgetNode } from "./nodes";
 
 type ComfyGraphEvents = {
     configured: (graph: LGraph) => void
@@ -52,31 +53,56 @@ export default class ComfyGraph extends LGraph {
         layoutState.nodeAdded(node)
         this.graphSync.onNodeAdded(node);
 
-        if ("comfyClass" in node                // Is this a comfy node
-            && !("svelteComponentType" in node) // ...and not also a ComfyWidgetNode
-            && !options.addedByDeserialize      // ...and we're not trying to deserialize an existing workflow
-            && get(uiState).autoAddUI) {
-            console.debug("[ComfyGraph] AutoAdd UI")
-            const comfyNode = node as ComfyBackendNode;
-            const widgetNodesAdded = []
-            for (let index = 0; index < comfyNode.inputs.length; index++) {
-                const input = comfyNode.inputs[index];
-                if ("config" in input) {
-                    const comfyInput = input as IComfyInputSlot;
-                    if (comfyInput.defaultWidgetNode) {
-                        const widgetNode = LiteGraph.createNode(comfyInput.defaultWidgetNode)
-                        const inputPos = comfyNode.getConnectionPos(true, index);
-                        this.add(widgetNode)
-                        widgetNode.connect(0, comfyNode, index);
-                        widgetNode.collapse();
-                        widgetNode.pos = [inputPos[0] - 140, inputPos[1] + LiteGraph.NODE_SLOT_HEIGHT / 2];
-                        widgetNodesAdded.push(widgetNode)
+        if ("outputProperties" in node) {
+            const widgetNode = node as ComfyWidgetNode;
+            for (const propName of widgetNode.outputProperties) {
+                widgetNode.addPropertyAsOutput(propName.name, propName.type)
+            }
+        }
+
+        // Check if the class declared a default widget layout
+        if ("defaultWidgets" in node && !("svelteComponentType" in node)) {
+            const comfyNode = node as ComfyGraphNode;
+            const widgets = comfyNode.defaultWidgets;
+
+            if (widgets) {
+                if (widgets.inputs) {
+                    for (const pair of Object.entries(comfyNode.defaultWidgets.inputs)) {
+                        const [index, spec] = pair
+                        const input = comfyNode.inputs[index] as IComfyInputSlot;
+                        input.defaultWidgetNode = spec.defaultWidgetNode;
+                        if (spec.config)
+                            input.config = spec.config
                     }
                 }
             }
-            const dragItems = widgetNodesAdded.map(wn => get(layoutState).allItemsByNode[wn.id]?.dragItem).filter(di => di)
-            console.debug("[ComfyGraph] Group new widgets", dragItems)
-            layoutState.groupItems(dragItems, { title: comfyNode.comfyClass })
+        }
+
+        if (get(uiState).autoAddUI) {
+            if (!("svelteComponentType" in node) && !options.addedByDeserialize) {
+                console.debug("[ComfyGraph] AutoAdd UI")
+                const comfyNode = node as ComfyGraphNode;
+                const widgetNodesAdded = []
+                for (let index = 0; index < comfyNode.inputs.length; index++) {
+                    const input = comfyNode.inputs[index];
+                    if ("config" in input) {
+                        const comfyInput = input as IComfyInputSlot;
+                        if (comfyInput.defaultWidgetNode) {
+                            const widgetNode = LiteGraph.createNode(comfyInput.defaultWidgetNode)
+                            const inputPos = comfyNode.getConnectionPos(true, index);
+                            this.add(widgetNode)
+                            widgetNode.connect(0, comfyNode, index);
+                            widgetNode.collapse();
+                            widgetNode.pos = [inputPos[0] - 140, inputPos[1] + LiteGraph.NODE_SLOT_HEIGHT / 2];
+                            widgetNodesAdded.push(widgetNode)
+                        }
+                    }
+                }
+                const dragItems = widgetNodesAdded.map(wn => get(layoutState).allItemsByNode[wn.id]?.dragItem).filter(di => di)
+                console.debug("[ComfyGraph] Group new widgets", dragItems)
+
+                layoutState.groupItems(dragItems, { title: node.title })
+            }
         }
 
         console.debug("Added", node);
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index ed7b3ce..e785f7b 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -26,7 +26,7 @@
  let resizeTimeout: NodeJS.Timeout | null;
  let hasShownUIHelpToast: boolean = false;
 
- let debugLayout: boolean = true;
+ let debugLayout: boolean = false;
 
  const toastOptions = {
      intro: { duration: 200 },
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 22193eb..2d149a8 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -1,7 +1,6 @@
 import { LiteGraph, LGraph, LGraphCanvas, LGraphNode, type LGraphNodeConstructor, type LGraphNodeExecutable, type SerializedLGraph, type SerializedLGraphGroup, type SerializedLGraphNode, type SerializedLLink, NodeMode, type Vector2, BuiltInSlotType } from "@litegraph-ts/core";
 import type { LConnectionKind, INodeSlot } from "@litegraph-ts/core";
 import ComfyAPI from "$lib/api"
-import { ComfyWidgets } from "$lib/widgets"
 import defaultGraph from "$lib/defaultGraph"
 import { getPngMetadata, importA1111 } from "$lib/pnginfo";
 import EventEmitter from "events";
@@ -10,6 +9,7 @@ import type TypedEmitter from "typed-emitter";
 // Import nodes
 import "@litegraph-ts/nodes-basic"
 import "@litegraph-ts/nodes-events"
+import "@litegraph-ts/nodes-math"
 import * as nodes from "$lib/nodes/index"
 
 import ComfyGraphCanvas, { type SerializedGraphCanvasState } from "$lib/ComfyGraphCanvas";
@@ -482,17 +482,19 @@ export default class ComfyApp {
             for (let i = 0; i < node.inputs.length; i++) {
                 let parent: ComfyGraphNode = node.getInputNode(i) as ComfyGraphNode;
                 if (parent) {
+                    const seen = {}
                     let link = node.getInputLink(i);
                     while (parent && !parent.isBackendNode) {
                         link = parent.getInputLink(link.origin_slot);
-                        if (link) {
+                        if (link && !seen[link.id]) {
+                            seen[link.id] = true
                             parent = parent.getInputNode(link.origin_slot) as ComfyGraphNode;
                         } else {
                             parent = null;
                         }
                     }
 
-                    if (link) {
+                    if (link && parent && parent.isBackendNode) {
                         const input = node.inputs[i]
                         // TODO can null be a legitimate value in some cases?
                         // Nodes like CLIPLoader will never have a value in the frontend, hence "null".
diff --git a/src/lib/defaultGraph.ts b/src/lib/defaultGraph.ts
index 23ca580..1046398 100644
--- a/src/lib/defaultGraph.ts
+++ b/src/lib/defaultGraph.ts
@@ -1,19 +1,21 @@
 import type SerializedAppState from "./ComfyApp"
 
 const defaultGraph: SerializedAppState = {
-  createdBy: "ComfyBox",
-  version: 1,
-  workflow: {
-    last_node_id: 0,
-    last_link_id: 0,
-    nodes: [],
-    links: [],
-    groups: [],
-    config: {},
-    extra: {},
-    version: 0
-  },
-  panes: {}
+    createdBy: "ComfyBox",
+    version: 1,
+    workflow: {
+        last_node_id: 0,
+        last_link_id: 0,
+        nodes: [],
+        links: [],
+        groups: [],
+        config: {},
+        extra: {},
+        version: 0
+    },
+    panes: {}
 }
 
 export default defaultGraph;
+
+// {"createdBy":"ComfyBox","version":1,"workflow":{"last_node_id":55,"last_link_id":54,"nodes":[{"id":17,"type":"ui/slider","pos":[77.09750000000287,195.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":0,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[16]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":0,"min":0,"max":18446744073709552000,"step":1,"precision":0},"widgets_values":["9507460842217379840.000"],"color":"#223","bgColor":"#335","comfyValue":9507460842217380000},{"id":18,"type":"ui/slider","pos":[77.09750000000287,215.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":1,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[17]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":20,"min":1,"max":10000,"step":1,"precision":0},"widgets_values":["20.000"],"color":"#223","bgColor":"#335","comfyValue":20},{"id":19,"type":"ui/slider","pos":[77.09750000000287,235.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":2,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[18]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":8,"min":0,"max":100,"step":0.5,"precision":0},"widgets_values":["8.000"],"color":"#223","bgColor":"#335","comfyValue":8},{"id":20,"type":"ui/combo","pos":[77.09750000000287,255.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":3,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[19]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Combo","properties":{"defaultValue":"euler","values":["euler","euler_ancestral","heun","dpm_2","dpm_2_ancestral","lms","dpm_fast","dpm_adaptive","dpmpp_2s_ancestral","dpmpp_sde","dpmpp_2m","ddim","uni_pc","uni_pc_bh2"]},"widgets_values":["euler"],"color":"#223","bgColor":"#335","comfyValue":"euler"},{"id":21,"type":"ui/combo","pos":[77.09750000000287,275.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":4,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[20]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Combo","properties":{"defaultValue":"karras","values":["karras","normal","simple","ddim_uniform"]},"widgets_values":["karras"],"color":"#223","bgColor":"#335","comfyValue":"karras"},{"id":22,"type":"ui/slider","pos":[77.09750000000287,355.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":5,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[21]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":1,"min":0,"max":1,"step":0.01,"precision":0},"widgets_values":["1.000"],"color":"#223","bgColor":"#335","comfyValue":1},{"id":31,"type":"ui/combo","pos":[-448.0424999999954,103.36430000000071],"size":[210,78],"flags":{"collapsed":true},"order":6,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[28]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Combo","properties":{"defaultValue":"AbyssOrangeMix2_nsfw.safetensors","values":["AbyssOrangeMix2_nsfw.safetensors"]},"widgets_values":["AbyssOrangeMix2_nsfw.safetensors"],"color":"#223","bgColor":"#335","comfyValue":"AbyssOrangeMix2_nsfw.safetensors"},{"id":33,"type":"ui/text","pos":[-347.6124999999959,309.06430000000114],"size":[210,78],"flags":{"collapsed":true},"order":7,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[30]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Text","properties":{"defaultValue":"","multiline":true},"widgets_values":["masterpiece, best quality, 1girl, dress"],"color":"#223","bgColor":"#335","comfyValue":"masterpiece, best quality, 1girl, dress"},{"id":35,"type":"ui/text","pos":[-346.40249999999617,399.8143000000014],"size":[210,78],"flags":{"collapsed":true},"order":8,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[31]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Text","properties":{"defaultValue":"","multiline":true},"widgets_values":["worst quality, bad quality, nsfw"],"color":"#223","bgColor":"#335","comfyValue":"worst quality, bad quality, nsfw"},{"id":37,"type":"ui/slider","pos":[-350.03249999999764,514.0383000000008],"size":[210,78],"flags":{"collapsed":true},"order":9,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[36]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":512,"min":64,"max":8192,"step":8,"precision":0},"widgets_values":["64.000"],"color":"#223","bgColor":"#335","comfyValue":64},{"id":38,"type":"ui/slider","pos":[-350.03249999999764,534.0383000000008],"size":[210,78],"flags":{"collapsed":true},"order":10,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[37]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":512,"min":64,"max":8192,"step":8,"precision":0},"widgets_values":["64.000"],"color":"#223","bgColor":"#335","comfyValue":64},{"id":39,"type":"ui/slider","pos":[-350.03249999999764,554.0383000000008],"size":[210,78],"flags":{"collapsed":true},"order":11,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[38]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":1,"min":1,"max":64,"step":1,"precision":0},"widgets_values":["4.000"],"color":"#223","bgColor":"#335","comfyValue":4},{"id":16,"type":"KSampler","pos":[242,156],"size":[241.79999999999998,206],"flags":{},"order":24,"mode":0,"inputs":[{"name":"model","type":"MODEL","link":29,"color_off":"orange","color_on":"orange"},{"name":"seed","type":"number","link":16,"config":{"min":0,"max":18446744073709552000,"step":1,"precision":0,"defaultValue":0},"serialize":true},{"name":"steps","type":"number","link":17,"config":{"min":1,"max":10000,"step":1,"precision":0,"defaultValue":20},"serialize":true},{"name":"cfg","type":"number","link":18,"config":{"min":0,"max":100,"step":0.5,"precision":0,"defaultValue":8},"serialize":true},{"name":"sampler_name","type":"string","link":19,"config":{"values":["euler","euler_ancestral","heun","dpm_2","dpm_2_ancestral","lms","dpm_fast","dpm_adaptive","dpmpp_2s_ancestral","dpmpp_sde","dpmpp_2m","ddim","uni_pc","uni_pc_bh2"],"defaultValue":"euler"},"serialize":true},{"name":"scheduler","type":"string","link":20,"config":{"values":["karras","normal","simple","ddim_uniform"],"defaultValue":"karras"},"serialize":true},{"name":"positive","type":"CONDITIONING","link":33,"color_off":"orange","color_on":"orange"},{"name":"negative","type":"CONDITIONING","link":32,"color_off":"orange","color_on":"orange"},{"name":"latent_image","type":"LATENT","link":39,"color_off":"orange","color_on":"orange"},{"name":"denoise","type":"number","link":21,"config":{"min":0,"max":1,"step":0.01,"precision":0,"defaultValue":1},"serialize":true}],"outputs":[{"name":"LATENT","type":"LATENT","links":[40],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"KSampler","properties":{},"color":"#432","bgColor":"#653"},{"id":40,"type":"VAEDecode","pos":[532.5875000000013,160.9183000000009],"size":[210,46],"flags":{},"order":25,"mode":0,"inputs":[{"name":"samples","type":"LATENT","link":40,"color_off":"orange","color_on":"orange"},{"name":"vae","type":"VAE","link":41,"color_off":"orange","color_on":"orange"}],"outputs":[{"name":"IMAGE","type":"IMAGE","links":[44],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"VAEDecode","properties":{},"color":"#432","bgColor":"#653"},{"id":45,"type":"ui/text","pos":[779.2900000000001,208.44999999999965],"size":[210,78],"flags":{"collapsed":true},"order":12,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[43]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Text","properties":{"defaultValue":"ComfyUI","multiline":false},"widgets_values":["ComfyUI"],"color":"#223","bgColor":"#335","comfyValue":"ComfyUI"},{"id":32,"type":"CLIPTextEncode","pos":[-218,285],"size":[216.60000000000002,46],"flags":{},"order":20,"mode":0,"inputs":[{"name":"text","type":"string","link":30,"config":{"defaultValue":"","multiline":true},"serialize":true},{"name":"clip","type":"CLIP","link":34,"color_off":"orange","color_on":"orange"}],"outputs":[{"name":"CONDITIONING","type":"CONDITIONING","links":[33],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"CLIPTextEncode","properties":{},"color":"#432","bgColor":"#653"},{"id":34,"type":"CLIPTextEncode","pos":[-216,376],"size":[216.60000000000002,46],"flags":{},"order":21,"mode":0,"inputs":[{"name":"text","type":"string","link":31,"config":{"defaultValue":"","multiline":true},"serialize":true},{"name":"clip","type":"CLIP","link":35,"color_off":"orange","color_on":"orange"}],"outputs":[{"name":"CONDITIONING","type":"CONDITIONING","links":[32],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"CLIPTextEncode","properties":{},"color":"#432","bgColor":"#653"},{"id":30,"type":"CheckpointLoaderSimple","pos":[-318,79],"size":[277.2,66],"flags":{},"order":16,"mode":0,"inputs":[{"name":"ckpt_name","type":"string","link":28,"config":{"values":["AbyssOrangeMix2_nsfw.safetensors"],"defaultValue":"AbyssOrangeMix2_nsfw.safetensors"},"serialize":true}],"outputs":[{"name":"MODEL","type":"MODEL","links":[29],"color_off":"orange","color_on":"orange","slot_index":0},{"name":"CLIP","type":"CLIP","links":[34,35],"color_off":"orange","color_on":"orange","slot_index":1},{"name":"VAE","type":"VAE","links":[41],"color_off":"orange","color_on":"orange","slot_index":2}],"title":"CheckpointLoaderSimple","properties":{},"color":"#432","bgColor":"#653"},{"id":36,"type":"EmptyLatentImage","pos":[-220,490],"size":[216.60000000000002,66],"flags":{},"order":17,"mode":0,"inputs":[{"name":"width","type":"number","link":36,"config":{"min":64,"max":8192,"step":8,"precision":0,"defaultValue":512},"serialize":true},{"name":"height","type":"number","link":37,"config":{"min":64,"max":8192,"step":8,"precision":0,"defaultValue":512},"serialize":true},{"name":"batch_size","type":"number","link":38,"config":{"min":1,"max":64,"step":1,"precision":0,"defaultValue":1},"serialize":true}],"outputs":[{"name":"LATENT","type":"LATENT","links":[39],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"EmptyLatentImage","properties":{},"color":"#432","bgColor":"#653"},{"id":47,"type":"ui/gallery","pos":[1284,165],"size":[210,58],"flags":{},"order":27,"mode":0,"inputs":[{"name":"images","type":"OUTPUT","link":46}],"outputs":[],"title":"UI.Gallery","properties":{"defaultValue":[]},"widgets_values":["Images: 0"],"color":"#223","bgColor":"#335","comfyValue":[]},{"id":44,"type":"SaveImage","pos":[888,164],"size":[315,78],"flags":{},"order":26,"mode":0,"inputs":[{"name":"images","type":"IMAGE","link":44,"color_off":"orange","color_on":"orange","slot_index":0},{"name":"filename_prefix","type":"string","link":43,"config":{"defaultValue":"ComfyUI","multiline":false},"serialize":true}],"outputs":[{"name":"output","type":"OUTPUT","links":[46],"slot_index":0}],"title":"SaveImage","properties":{},"color":"#432","bgColor":"#653"},{"id":49,"type":"events/log","pos":[771,22],"size":[140,26],"flags":{},"order":18,"mode":0,"inputs":[{"name":"event","type":-1,"link":47,"shape":1}],"outputs":[],"title":"Log Event","properties":{}},{"id":48,"type":"ui/button","pos":[372,12],"size":[210,78],"flags":{},"order":13,"mode":0,"inputs":[],"outputs":[{"name":"event","type":-2,"links":[47],"shape":1,"slot_index":0},{"name":"isClicked","type":"boolean","links":null,"slot_index":1}],"title":"UI.Button","properties":{"defaultValue":false,"message":"bang"},"widgets_values":["false"],"color":"#223","bgColor":"#335","comfyValue":false},{"id":52,"type":"basic/watch","pos":[1063.1426107321954,-118.99396962098862],"size":[140,26],"flags":{},"order":22,"mode":0,"inputs":[{"name":"value","type":0,"link":50,"label":"null","slot_index":0}],"outputs":[],"title":"Watch","properties":{"value":1}},{"id":54,"type":"ui/slider","pos":[1038,-226],"size":[210,78],"flags":{},"order":23,"mode":0,"inputs":[{"name":"value","type":"number","link":52}],"outputs":[{"name":"value","type":"number","links":null},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":0,"min":0,"max":10,"step":1,"precision":1},"widgets_values":["2.000"],"color":"#223","bgColor":"#335","comfyValue":2},{"id":53,"type":"ui/slider","pos":[354.5182107321954,-135.09906962098862],"size":[210,78],"flags":{},"order":14,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[51],"slot_index":0},{"name":"changed","type":-2,"links":[],"shape":1,"slot_index":1}],"title":"UI.Slider","properties":{"defaultValue":0,"min":0,"max":10,"step":1,"precision":1},"widgets_values":["2.000"],"color":"#223","bgColor":"#335","comfyValue":2},{"id":50,"type":"actions/copy","pos":[729,-125],"size":[210,78],"flags":{},"order":19,"mode":0,"inputs":[{"name":"","type":"*","link":51},{"name":"copy","type":-1,"link":54,"shape":1}],"outputs":[{"name":"","type":"*","links":[50,52],"slot_index":0}],"title":"Comfy.CopyAction","properties":{"value":2}},{"id":55,"type":"actions/after_queued","pos":[382,-333],"size":[193.2,46],"flags":{},"order":15,"mode":0,"inputs":[],"outputs":[{"name":"afterQueued","type":-2,"links":[54],"shape":1,"slot_index":0},{"name":"prompt","type":"*","links":null}],"title":"Comfy.AfterQueuedAction","properties":{"prompt":null}}],"links":[[16,17,0,16,1,"number"],[17,18,0,16,2,"number"],[18,19,0,16,3,"number"],[19,20,0,16,4,"string"],[20,21,0,16,5,"string"],[21,22,0,16,9,"number"],[28,31,0,30,0,"string"],[29,30,0,16,0,"MODEL"],[30,33,0,32,0,"string"],[31,35,0,34,0,"string"],[32,34,0,16,7,"CONDITIONING"],[33,32,0,16,6,"CONDITIONING"],[34,30,1,32,1,"CLIP"],[35,30,1,34,1,"CLIP"],[36,37,0,36,0,"number"],[37,38,0,36,1,"number"],[38,39,0,36,2,"number"],[39,36,0,16,8,"LATENT"],[40,16,0,40,0,"LATENT"],[41,30,2,40,1,"VAE"],[43,45,0,44,1,"string"],[44,40,0,44,0,"IMAGE"],[46,44,0,47,0,"OUTPUT"],[47,48,0,49,0,-1],[50,50,0,52,0,"*"],[51,53,0,50,0,"*"],[52,50,0,54,0,"number"],[54,55,0,50,1,-1]],"groups":[],"config":{},"extra":{},"version":10},"layout":{"root":"0","allItems":{"0":{"dragItem":{"type":"container","id":"0","attrs":{"title":"Container","showTitle":false,"direction":"horizontal","classes":""}},"children":["1","2"]},"1":{"dragItem":{"type":"container","id":"1","attrs":{"title":"Container","showTitle":false,"direction":"vertical","classes":""}},"children":["16","33","25","41"],"parent":"0"},"2":{"dragItem":{"type":"container","id":"2","attrs":{"title":"Container","showTitle":false,"direction":"vertical","classes":""}},"children":["37","35","27"],"parent":"0"},"10":{"dragItem":{"type":"widget","id":"10","nodeId":17,"attrs":{"title":"seed","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"11":{"dragItem":{"type":"widget","id":"11","nodeId":18,"attrs":{"title":"steps","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"12":{"dragItem":{"type":"widget","id":"12","nodeId":19,"attrs":{"title":"cfg","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"13":{"dragItem":{"type":"widget","id":"13","nodeId":20,"attrs":{"title":"sampler_name","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"14":{"dragItem":{"type":"widget","id":"14","nodeId":21,"attrs":{"title":"scheduler","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"15":{"dragItem":{"type":"widget","id":"15","nodeId":22,"attrs":{"title":"denoise","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"16":{"dragItem":{"type":"container","id":"16","attrs":{"title":"KSampler","showTitle":true,"direction":"vertical","classes":""}},"children":["10","11","12","13","14","15"],"parent":"1"},"24":{"dragItem":{"type":"widget","id":"24","nodeId":31,"attrs":{"title":"ckpt_name","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"25"},"25":{"dragItem":{"type":"container","id":"25","attrs":{"title":"CheckpointLoaderSimple","showTitle":true,"direction":"vertical","classes":""}},"children":["24"],"parent":"1"},"26":{"dragItem":{"type":"widget","id":"26","nodeId":33,"attrs":{"title":"text","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"27"},"27":{"dragItem":{"type":"container","id":"27","attrs":{"title":"Conditioning","showTitle":true,"direction":"vertical","classes":""}},"children":["26","28"],"parent":"2"},"28":{"dragItem":{"type":"widget","id":"28","nodeId":35,"attrs":{"title":"text","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"27"},"30":{"dragItem":{"type":"widget","id":"30","nodeId":37,"attrs":{"title":"width","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"33"},"31":{"dragItem":{"type":"widget","id":"31","nodeId":38,"attrs":{"title":"height","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"33"},"32":{"dragItem":{"type":"widget","id":"32","nodeId":39,"attrs":{"title":"batch_size","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"33"},"33":{"dragItem":{"type":"container","id":"33","attrs":{"title":"EmptyLatentImage","showTitle":true,"direction":"vertical","classes":""}},"children":["30","31","32"],"parent":"1"},"34":{"dragItem":{"type":"widget","id":"34","nodeId":45,"attrs":{"title":"filename_prefix","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"35"},"35":{"dragItem":{"type":"container","id":"35","attrs":{"title":"SaveImage","showTitle":true,"direction":"vertical","classes":""}},"children":["34"],"parent":"2"},"37":{"dragItem":{"type":"widget","id":"37","nodeId":47,"attrs":{"title":"Widget","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"2"},"38":{"dragItem":{"type":"widget","id":"38","nodeId":48,"attrs":{"title":"copy","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"41"},"39":{"dragItem":{"type":"widget","id":"39","nodeId":53,"attrs":{"title":"copy","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"41"},"40":{"dragItem":{"type":"widget","id":"40","nodeId":54,"attrs":{"title":"Widget","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"41"},"41":{"dragItem":{"type":"container","id":"41","attrs":{"title":"Copy Test","showTitle":true,"direction":"horizontal","classes":""}},"children":["39","38","40"],"parent":"1"}},"currentId":42},"canvas":{"offset":[340.9292892678049,426.94297316713084],"scale":0.6830134553650706}}
diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts
index bbe87d1..38cc9a5 100644
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -1,10 +1,24 @@
+import type { ComfyInputConfig } from "$lib/IComfyInputSlot";
 import type { SerializedPrompt } from "$lib/components/ComfyApp";
 import type ComfyWidget from "$lib/components/widgets/ComfyWidget";
 import { LGraph, LGraphNode } from "@litegraph-ts/core";
+import type { SvelteComponentDev } from "svelte/internal";
+import type { ComfyWidgetNode } from "./ComfyWidgetNodes";
+
+export type DefaultWidgetSpec = {
+    defaultWidgetNode: new (name?: string) => ComfyWidgetNode,
+    config?: ComfyInputConfig
+}
+
+export type DefaultWidgetLayout = {
+    inputs?: Record<number, DefaultWidgetSpec>,
+}
 
 export default class ComfyGraphNode extends LGraphNode {
     isBackendNode?: boolean;
 
     afterQueued?(prompt: SerializedPrompt): void;
     onExecuted?(output: any): void;
+
+    defaultWidgets?: DefaultWidgetLayout
 }
diff --git a/src/lib/nodes/ComfySelector.ts b/src/lib/nodes/ComfySelector.ts
new file mode 100644
index 0000000..d152d9c
--- /dev/null
+++ b/src/lib/nodes/ComfySelector.ts
@@ -0,0 +1,120 @@
+import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
+import ComfyGraphNode from "./ComfyGraphNode";
+
+export interface ComfySelectorProperties extends Record<any, any> {
+    value: any
+}
+
+export default class ComfySelector extends ComfyGraphNode {
+    override properties: ComfySelectorProperties = {
+        value: null
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "select", type: "number" },
+            { name: "A", type: "*" },
+            { name: "B", type: "*" },
+            { name: "C", type: "*" },
+            { name: "D", type: "*" },
+        ],
+        outputs: [
+            { name: "out", type: "*" }
+        ],
+    }
+
+    private selected: number = 0;
+
+    constructor(title?: string) {
+        super(title);
+    }
+
+    override onDrawBackground(ctx: CanvasRenderingContext2D) {
+        if (this.flags.collapsed) {
+            return;
+        }
+        ctx.fillStyle = "#AFB";
+        var y = (this.selected + 1) * LiteGraph.NODE_SLOT_HEIGHT + 6;
+        ctx.beginPath();
+        ctx.moveTo(50, y);
+        ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
+        ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
+        ctx.fill();
+    };
+
+    override onExecute() {
+        var sel = this.getInputData(0);
+        if (sel == null || sel.constructor !== Number)
+            sel = 0;
+        this.selected = sel = Math.round(sel) % (this.inputs.length - 1);
+        var v = this.getInputData(sel + 1);
+        if (v !== undefined) {
+            this.setOutputData(0, v);
+        }
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfySelector,
+    title: "Comfy.Selector",
+    desc: "Selects an output from two or more inputs",
+    type: "utils/selector"
+})
+
+export interface ComfySelectorTwoProperties extends Record<any, any> {
+    value: any
+}
+
+export class ComfySelectorTwo extends ComfyGraphNode {
+    override properties: ComfySelectorTwoProperties = {
+        value: null
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "select", type: "boolean" },
+            { name: "true", type: "*" },
+            { name: "false", type: "*" },
+        ],
+        outputs: [
+            { name: "out", type: "*" }
+        ],
+    }
+
+    private selected: number = 0;
+
+    constructor(title?: string) {
+        super(title);
+    }
+
+    override onDrawBackground(ctx: CanvasRenderingContext2D) {
+        if (this.flags.collapsed) {
+            return;
+        }
+        ctx.fillStyle = "#AFB";
+        var y = (this.selected + 1) * LiteGraph.NODE_SLOT_HEIGHT + 6;
+        ctx.beginPath();
+        ctx.moveTo(50, y);
+        ctx.lineTo(50, y + LiteGraph.NODE_SLOT_HEIGHT);
+        ctx.lineTo(34, y + LiteGraph.NODE_SLOT_HEIGHT * 0.5);
+        ctx.fill();
+    };
+
+    override onExecute() {
+        var sel = this.getInputData(0);
+        if (sel == null || sel.constructor !== Boolean)
+            sel = 0;
+        this.selected = sel ? 0 : 1;
+        var v = this.getInputData(this.selected + 1);
+        if (v !== undefined) {
+            this.setOutputData(0, v);
+        }
+    }
+}
+
+LiteGraph.registerNodeType({
+    class: ComfySelectorTwo,
+    title: "Comfy.Selector2",
+    desc: "Selects an output from two inputs with a boolean",
+    type: "utils/selector2"
+})
diff --git a/src/lib/nodes/ComfyValueControl.ts b/src/lib/nodes/ComfyValueControl.ts
new file mode 100644
index 0000000..fed07ec
--- /dev/null
+++ b/src/lib/nodes/ComfyValueControl.ts
@@ -0,0 +1,107 @@
+import { BuiltInSlotType, LiteGraph, type SlotLayout } from "@litegraph-ts/core";
+import ComfyGraphNode, { type DefaultWidgetLayout } from "./ComfyGraphNode";
+import { clamp } from "$lib/utils";
+import ComboWidget from "$lib/widgets/ComboWidget.svelte";
+import { ComfyComboNode } from "./ComfyWidgetNodes";
+
+export interface ComfyValueControlProperties extends Record<any, any> {
+    value: any,
+    action: "fixed" | "increment" | "decrement" | "randomize",
+    min: number,
+    max: number,
+    step: number
+}
+
+const INT_MAX = 1125899906842624;
+
+export default class ComfyValueControl extends ComfyGraphNode {
+    override properties: ComfyValueControlProperties = {
+        value: null,
+        action: "fixed",
+        min: -INT_MAX,
+        max: INT_MAX,
+        step: 1
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "value", type: "number" },
+            { name: "trigger", type: BuiltInSlotType.ACTION },
+            { name: "action", type: "string" },
+            { name: "min", type: "number" },
+            { name: "max", type: "number" },
+            { name: "step", type: "number" }
+        ],
+        outputs: [
+            { name: "value", type: "*" }
+        ],
+    }
+
+    override defaultWidgets: DefaultWidgetLayout = {
+        inputs: {
+            2: {
+                defaultWidgetNode: ComfyComboNode,
+                config: {
+                    defaultValue: "randomize",
+                    values: ["fixed", "increment", "decrement", "randomize"]
+                }
+            }
+        }
+    }
+
+    constructor(title?: string) {
+        super(title);
+    }
+
+    override onExecute() {
+        this.setProperty("action", this.getInputData(2) || "fixed")
+        this.setProperty("min", this.getInputData(3))
+        this.setProperty("max", this.getInputData(4))
+        this.setProperty("step", this.getInputData(5) || 1)
+    }
+
+    override onAction(action: any, param: any) {
+        var v = this.getInputData(0)
+        if (typeof v !== "number")
+            return
+
+        let min = this.properties.min
+        let max = this.properties.max
+        if (min == null) min = -INT_MAX
+        if (max == null) max = INT_MAX
+
+        // limit to something that javascript can handle
+        min = Math.max(-INT_MAX, this.properties.min);
+        max = Math.min(INT_MAX, this.properties.max);
+        let range = (max - min) / (this.properties.step);
+
+        //adjust values based on valueControl Behaviour
+        switch (this.properties.action) {
+            case "fixed":
+                break;
+            case "increment":
+                v += this.properties.step;
+                break;
+            case "decrement":
+                v -= this.properties.step;
+                break;
+            case "randomize":
+                v = Math.floor(Math.random() * range) * (this.properties.step) + min;
+            default:
+                break;
+        }
+
+        v = clamp(v, min, max)
+        this.setProperty("value", v)
+        this.setOutputData(0, v)
+
+        console.debug("ValueControl", v, this.properties)
+    };
+}
+
+LiteGraph.registerNodeType({
+    class: ComfyValueControl,
+    title: "Comfy.ValueControl",
+    desc: "Adjusts an incoming value based on behavior",
+    type: "utils/value_control"
+})
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index 2012414..fce009f 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -36,6 +36,15 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     /** If false, user manually set min/max/step, and should not be autoinherited from connected input */
     autoConfig: boolean = true;
 
+    copyFromInputLink: boolean = true;
+
+    /** Names of properties to add as inputs */
+    // shownInputProperties: string[] = []
+
+    /** Names of properties to add as outputs */
+    private shownOutputProperties: Record<string, { type: string, index: number }> = {}
+    outputProperties: { name: string, type: string }[] = []
+
     override isBackendNode = false;
     override serialize_widgets = true;
 
@@ -62,6 +71,18 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         this.unsubscribe = this.value.subscribe(this.onValueUpdated.bind(this))
     }
 
+    addPropertyAsOutput(propertyName: string, type: string) {
+        if (this.shownOutputProperties[propertyName])
+            return;
+
+        if (!(propertyName in this.properties)) {
+            throw `No property named ${propertyName} found!`
+        }
+
+        this.shownOutputProperties[propertyName] = { type, index: this.outputs.length }
+        this.addOutput(propertyName, type)
+    }
+
     formatValue(value: any): string {
         return Watch.toString(value)
     }
@@ -84,21 +105,33 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         this.value.set(value)
     }
 
-    abstract validateValue(value: any): boolean;
+    override onPropertyChanged(property: string, value: any, prevValue?: any) {
+        const data = this.shownOutputProperties[property]
+        if (data)
+            this.setOutputData(data.index, value)
+    }
 
     /*
      * Logic to run if this widget can be treated as output (slider, combo, text)
      */
     override onExecute() {
-        if (this.inputs.length >= this.inputIndex) {
-            const data = this.getInputData(this.inputIndex)
-            if (data && this.validateValue(data)) { // TODO can "null" be a legitimate value here?
-                this.setValue(data)
+        if (this.copyFromInputLink) {
+            if (this.inputs.length >= this.inputIndex) {
+                const data = this.getInputData(this.inputIndex)
+                if (data) { // TODO can "null" be a legitimate value here?
+                    this.setValue(data)
+                    const input = this.getInputLink(this.inputIndex)
+                    input.data = null;
+                }
             }
         }
         if (this.outputs.length >= this.outputIndex) {
             this.setOutputData(this.outputIndex, get(this.value))
         }
+        for (const propName in this.shownOutputProperties) {
+            const data = this.shownOutputProperties[propName]
+            this.setOutputData(data.index, this.properties[propName])
+        }
     }
 
     /** Called when a backend node sends a ComfyUI output over a link */
@@ -118,18 +151,19 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
                 const comfyInput = input as IComfyInputSlot;
                 for (const key in comfyInput.config)
                     this.setProperty(key, comfyInput.config[key])
+
+                if ("defaultValue" in this.properties)
+                    this.setValue(this.properties.defaultValue)
+
+                const widget = layoutState.findLayoutForNode(this.id)
+                if (widget && input.name !== "") {
+                    widget.attrs.title = input.name;
+                }
+
+                console.debug("Property copy", input, this.properties)
+
+                this.setValue(get(this.value))
             }
-            if ("defaultValue" in this.properties)
-                this.setValue(this.properties.defaultValue)
-
-            const widget = layoutState.findLayoutForNode(this.id)
-            if (widget && input.name !== "") {
-                widget.attrs.title = input.name;
-            }
-
-            console.debug("Property copy", input, this.properties)
-
-            this.setValue(get(this.value))
         }
 
         return true;
@@ -167,11 +201,13 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     clampOneConfig(input: IComfyInputSlot) { }
 
     override onSerialize(o: SerializedLGraphNode) {
-        (o as any).comfyValue = get(this.value)
+        (o as any).comfyValue = get(this.value);
+        (o as any).shownOutputProperties = this.shownOutputProperties
     }
 
     override onConfigure(o: SerializedLGraphNode) {
-        this.value.set((o as any).comfyValue)
+        this.value.set((o as any).comfyValue);
+        this.shownOutputProperties = (o as any).shownOutputProperties;
     }
 }
 
@@ -199,25 +235,32 @@ export class ComfySliderNode extends ComfyWidgetNode<number> {
         ],
         outputs: [
             { name: "value", type: "number" },
-            { name: "changed", type: BuiltInSlotType.EVENT }
+            { name: "changed", type: BuiltInSlotType.EVENT },
         ]
     }
 
+    override outputProperties = [
+        { name: "min", type: "number" },
+        { name: "max", type: "number" },
+        { name: "step", type: "number" },
+        { name: "precision", type: "number" },
+    ]
+
     constructor(name?: string) {
         super(name, 0)
     }
 
-    override validateValue(value: any): boolean {
-        return typeof value === "number"
-            && value >= this.properties.min
-            && value <= this.properties.max
+    override setValue(value: any) {
+        if (typeof value !== "number")
+            return;
+        super.setValue(clamp(value, this.properties.min, this.properties.max))
     }
 
     override clampOneConfig(input: IComfyInputSlot) {
         // this.setProperty("min", clamp(this.properties.min, input.config.min, input.config.max))
         // this.setProperty("max", clamp(this.properties.max, input.config.max, input.config.min))
         // this.setProperty("step", Math.min(this.properties.step, input.config.step))
-        this.setValue(clamp(this.properties.defaultValue, this.properties.min, this.properties.max))
+        this.setValue(this.properties.defaultValue)
     }
 }
 
@@ -280,10 +323,10 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
         return true;
     }
 
-    override validateValue(value: any): boolean {
-        if (typeof value !== "string")
-            return false;
-        return this.properties.values.indexOf(value) !== -1;
+    override setValue(value: any) {
+        if (typeof value !== "string" || this.properties.values.indexOf(value) === -1)
+            return;
+        super.setValue(value)
     }
 
     override clampOneConfig(input: IComfyInputSlot) {
@@ -291,7 +334,7 @@ export class ComfyComboNode extends ComfyWidgetNode<string> {
             if (input.config.values.length === 0)
                 this.setValue("")
             else
-                this.setValue(input.config.values[0])
+                this.setValue(input.config.defaultValue || input.config.values[0])
         }
     }
 }
@@ -329,8 +372,8 @@ export class ComfyTextNode extends ComfyWidgetNode<string> {
         super(name, "")
     }
 
-    override validateValue(value: any): boolean {
-        return typeof value === "string"
+    override setValue(value: any) {
+        super.setValue(`${value}`)
     }
 }
 
@@ -368,6 +411,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
     }
 
     override svelteComponentType = GalleryWidget
+    override copyFromInputLink = false;
 
     constructor(name?: string) {
         super(name, [])
@@ -380,12 +424,29 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
         }
     }
 
-    override formatValue(value: GradioFileData[]): string {
-        return `Images: ${value.length}`
+    override formatValue(value: GradioFileData[] | null): string {
+        return `Images: ${value?.length || 0}`
     }
 
-    override validateValue(value: any): boolean {
-        return Array.isArray(value) && value.every(e => "images" in e)
+    private convertItems(output: GalleryOutput): GradioFileData[] {
+        return output.images.map(r => {
+            // TODO configure backend URL
+            const url = "http://localhost:8188/view?"
+            const params = new URLSearchParams(r)
+            return {
+                name: null,
+                data: url + params
+            }
+        });
+    }
+
+    override setValue(value: any) {
+        if (Array.isArray(value)) {
+            super.setValue(value)
+        }
+        else {
+            super.setValue([])
+        }
     }
 
     receiveOutput() {
@@ -394,15 +455,7 @@ export class ComfyGalleryNode extends ComfyWidgetNode<GradioFileData[]> {
             const data = link.data as GalleryOutput
             console.debug("[ComfyGalleryNode] Received output!", data)
 
-            const galleryItems: GradioFileData[] = data.images.map(r => {
-                // TODO configure backend URL
-                const url = "http://localhost:8188/view?"
-                const params = new URLSearchParams(r)
-                return {
-                    name: null,
-                    data: url + params
-                }
-            });
+            const galleryItems: GradioFileData[] = this.convertItems(link.data)
 
             const currentValue = get(this.value)
             this.setValue(currentValue.concat(galleryItems))
@@ -429,7 +482,7 @@ export class ComfyButtonNode extends ComfyWidgetNode<boolean> {
 
     static slotLayout: SlotLayout = {
         outputs: [
-            { name: "event", type: BuiltInSlotType.EVENT },
+            { name: "clicked", type: BuiltInSlotType.EVENT },
             { name: "isClicked", type: "boolean" },
         ]
     }
@@ -437,8 +490,8 @@ export class ComfyButtonNode extends ComfyWidgetNode<boolean> {
     override outputIndex = 1;
     override svelteComponentType = ButtonWidget;
 
-    override validateValue(value: any): boolean {
-        return typeof value === "boolean"
+    override setValue(value: any) {
+        super.setValue(Boolean(value))
     }
 
     onClick() {
diff --git a/src/lib/nodes/index.ts b/src/lib/nodes/index.ts
index 4907332..8c22c73 100644
--- a/src/lib/nodes/index.ts
+++ b/src/lib/nodes/index.ts
@@ -1,3 +1,5 @@
 export { default as ComfyReroute } from "./ComfyReroute"
 export { ComfyWidgetNode, ComfySliderNode, ComfyComboNode, ComfyTextNode } from "./ComfyWidgetNodes"
 export { ComfyCopyAction } from "./ComfyActionNodes"
+export { default as ComfyValueControl } from "./ComfyValueControl"
+export { default as ComfySelector } from "./ComfySelector"

From df0a93ecb015026062469304347e7b7d25b4d442 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 20:24:04 -0500
Subject: [PATCH 26/27] Refresh combo boxes button

---
 src/lib/IComfyInputSlot.ts           |  3 +-
 src/lib/components/ComfyApp.svelte   |  7 +++
 src/lib/components/ComfyApp.ts       | 32 +++++++----
 src/lib/nodes/ComfyActionNodes.ts    | 34 +++++++++++
 src/lib/nodes/ComfyGraphNode.ts      | 33 ++++++++++-
 src/lib/nodes/ComfyWidgetNodes.ts    | 47 +++++++++-------
 src/lib/nodes/index.ts               |  2 +-
 src/lib/widgets.ts                   | 10 +++-
 src/lib/widgets/ButtonWidget.svelte  |  2 +-
 src/lib/widgets/ComboWidget.svelte   | 84 +++++++++++++++++++---------
 src/lib/widgets/GalleryWidget.svelte |  2 +-
 src/lib/widgets/RangeWidget.svelte   |  2 +-
 src/lib/widgets/TextWidget.svelte    |  2 +-
 13 files changed, 196 insertions(+), 64 deletions(-)

diff --git a/src/lib/IComfyInputSlot.ts b/src/lib/IComfyInputSlot.ts
index 23dc382..612723b 100644
--- a/src/lib/IComfyInputSlot.ts
+++ b/src/lib/IComfyInputSlot.ts
@@ -14,6 +14,7 @@ export type ComfyInputConfig = {
 
 export default interface IComfyInputSlot extends INodeInputSlot {
     serialize: boolean,
-    defaultWidgetNode?: new (name?: string) => ComfyWidgetNode,
+    defaultWidgetNode: new (name?: string) => ComfyWidgetNode
+    widgetNodeType?: string,
     config: ComfyInputConfig, // stores range min/max/step, etc.
 }
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index e785f7b..db027f5 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -135,6 +135,10 @@
 
      refreshView();
  })
+
+ async function doRefreshCombos() {
+     await app.refreshComboInNodes()
+ }
 </script>
 
 <div id="main">
@@ -179,6 +183,9 @@
         <Button variant="secondary" on:click={doRecenter}>
             Recenter
         </Button>
+        <Button variant="secondary" on:click={doRefreshCombos}>
+            🔄
+        </Button>
         <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
         <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/>
         <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 2d149a8..56667d7 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -23,6 +23,7 @@ import layoutState from "$lib/stores/layoutState";
 import { toast } from '@zerodevx/svelte-toast'
 import ComfyGraph from "$lib/ComfyGraph";
 import { ComfyBackendNode } from "$lib/nodes/ComfyBackendNode";
+import { get } from "svelte/store";
 
 export const COMFYBOX_SERIAL_VERSION = 1;
 
@@ -616,18 +617,29 @@ export default class ComfyApp {
 
             const def = defs[node.type];
 
-            throw "refreshComboInNodes unimplemented!"
-            // for (const widgetNum in node.widgets) {
-            //     const widget = node.widgets[widgetNum]
+            for (let index = 0; index < node.inputs.length; index++) {
+                const input = node.inputs[index];
+                if ("config" in input) {
+                    const comfyInput = input as IComfyInputSlot;
 
-            //     if (widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
-            //         widget.options.values = def["input"]["required"][widget.name][0];
+                    console.warn("RefreshCombo", comfyInput.defaultWidgetNode, comfyInput)
 
-            //         if (!widget.options.values.includes(widget.value)) {
-            //             widget.value = widget.options.values[0];
-            //         }
-            //     }
-            // }
+                    if (comfyInput.defaultWidgetNode == nodes.ComfyComboNode && def["input"]["required"][comfyInput.name] !== undefined) {
+                        comfyInput.config.values = def["input"]["required"][comfyInput.name][0];
+
+                        console.warn("RefreshCombo", comfyInput.config.values, def["input"]["required"][comfyInput.name])
+                        const inputNode = node.getInputNode(index)
+
+                        if (inputNode && "doAutoConfig" in inputNode) {
+                            const comfyInputNode = inputNode as nodes.ComfyWidgetNode;
+                            comfyInputNode.doAutoConfig(comfyInput)
+                            if (!comfyInput.config.values.includes(get(comfyInputNode.value))) {
+                                comfyInputNode.setValue(comfyInput.config.defaultValue || comfyInput.config.values[0])
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index e58a2ba..e7c7427 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -91,3 +91,37 @@ LiteGraph.registerNodeType({
     desc: "Copies its input to its output when an event is received",
     type: "actions/copy"
 })
+
+export interface ComfySwapActionProperties extends Record<any, any> {
+}
+
+export class ComfySwapAction extends ComfyGraphNode {
+    override properties: ComfySwapActionProperties = {
+    }
+
+    static slotLayout: SlotLayout = {
+        inputs: [
+            { name: "A", type: "*" },
+            { name: "B", type: "*" },
+            { name: "swap", type: BuiltInSlotType.ACTION }
+        ],
+        outputs: [
+            { name: "B", type: "*" },
+            { name: "A", type: "*" }
+        ],
+    }
+
+    override onAction(action: any, param: any) {
+        const a = this.getInputData(0)
+        const b = this.getInputData(1)
+        this.setOutputData(0, a)
+        this.setOutputData(1, b)
+    };
+}
+
+LiteGraph.registerNodeType({
+    class: ComfySwapAction,
+    title: "Comfy.SwapAction",
+    desc: "Swaps two inputs when triggered",
+    type: "actions/swap"
+})
diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts
index 38cc9a5..be3d1d3 100644
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -1,9 +1,10 @@
 import type { ComfyInputConfig } from "$lib/IComfyInputSlot";
 import type { SerializedPrompt } from "$lib/components/ComfyApp";
 import type ComfyWidget from "$lib/components/widgets/ComfyWidget";
-import { LGraph, LGraphNode } from "@litegraph-ts/core";
+import { LGraph, LGraphNode, LiteGraph, type SerializedLGraphNode } from "@litegraph-ts/core";
 import type { SvelteComponentDev } from "svelte/internal";
 import type { ComfyWidgetNode } from "./ComfyWidgetNodes";
+import type IComfyInputSlot from "$lib/IComfyInputSlot";
 
 export type DefaultWidgetSpec = {
     defaultWidgetNode: new (name?: string) => ComfyWidgetNode,
@@ -21,4 +22,34 @@ export default class ComfyGraphNode extends LGraphNode {
     onExecuted?(output: any): void;
 
     defaultWidgets?: DefaultWidgetLayout
+
+    override onSerialize(o: SerializedLGraphNode) {
+        for (let index = 0; index < this.inputs.length; index++) {
+            const input = this.inputs[index]
+            const serInput = o.inputs[index]
+            if ("defaultWidgetNode" in input) {
+                const comfyInput = input as IComfyInputSlot
+                const widgetNode = comfyInput.defaultWidgetNode
+                const ty = Object.values(LiteGraph.registered_node_types)
+                    .find(v => v.class === widgetNode)
+                if (ty)
+                    (serInput as any).widgetNodeType = ty.type
+            }
+        }
+    }
+
+    override onConfigure(o: SerializedLGraphNode) {
+        for (let index = 0; index < this.inputs.length; index++) {
+            const input = this.inputs[index]
+            const serInput = o.inputs[index]
+            if ("widgetNodeType" in serInput) {
+                const comfyInput = input as IComfyInputSlot
+                const ty: string = serInput.widgetNodeType as any
+                const widgetNode = Object.values(LiteGraph.registered_node_types)
+                    .find(v => v.type === ty)
+                if (widgetNode)
+                    comfyInput.defaultWidgetNode = widgetNode.class as any
+            }
+        }
+    }
 }
diff --git a/src/lib/nodes/ComfyWidgetNodes.ts b/src/lib/nodes/ComfyWidgetNodes.ts
index fce009f..7c127a7 100644
--- a/src/lib/nodes/ComfyWidgetNodes.ts
+++ b/src/lib/nodes/ComfyWidgetNodes.ts
@@ -27,7 +27,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
     abstract properties: ComfyWidgetProperties;
 
     value: Writable<T>
-    propsChanged: Writable<boolean> = writable(true) // dummy to indicate if props changed
+    propsChanged: Writable<number> = writable(0) // dummy to indicate if props changed
     unsubscribe: Unsubscriber;
 
     /** Svelte class for the frontend logic */
@@ -119,6 +119,7 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
             if (this.inputs.length >= this.inputIndex) {
                 const data = this.getInputData(this.inputIndex)
                 if (data) { // TODO can "null" be a legitimate value here?
+                    console.log(data)
                     this.setValue(data)
                     const input = this.getInputLink(this.inputIndex)
                     input.data = null;
@@ -145,30 +146,33 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         inputNode: LGraphNode,
         inputIndex: number
     ): boolean {
-        if (this.autoConfig) {
-            // Copy properties from default config in input slot
-            if ("config" in input) {
-                const comfyInput = input as IComfyInputSlot;
-                for (const key in comfyInput.config)
-                    this.setProperty(key, comfyInput.config[key])
-
-                if ("defaultValue" in this.properties)
-                    this.setValue(this.properties.defaultValue)
-
-                const widget = layoutState.findLayoutForNode(this.id)
-                if (widget && input.name !== "") {
-                    widget.attrs.title = input.name;
-                }
-
-                console.debug("Property copy", input, this.properties)
-
-                this.setValue(get(this.value))
-            }
+        if (this.autoConfig && "config" in input) {
+            this.doAutoConfig(input as IComfyInputSlot)
         }
 
         return true;
     }
 
+    doAutoConfig(input: IComfyInputSlot) {
+        // Copy properties from default config in input slot
+        const comfyInput = input as IComfyInputSlot;
+        for (const key in comfyInput.config)
+            this.setProperty(key, comfyInput.config[key])
+
+        if ("defaultValue" in this.properties)
+            this.setValue(this.properties.defaultValue)
+
+        const widget = layoutState.findLayoutForNode(this.id)
+        if (widget && input.name !== "") {
+            widget.attrs.title = input.name;
+        }
+
+        console.debug("Property copy", input, this.properties)
+
+        this.setValue(get(this.value))
+        this.propsChanged.set(get(this.propsChanged) + 1)
+    }
+
     onConnectionsChange(
         type: LConnectionKind,
         slotIndex: number,
@@ -195,12 +199,13 @@ export abstract class ComfyWidgetNode<T = any> extends ComfyGraphNode {
         }
 
         // Force reactivity change so the frontend can be updated with the new props
-        this.propsChanged.set(!get(this.propsChanged))
+        this.propsChanged.set(get(this.propsChanged) + 1)
     }
 
     clampOneConfig(input: IComfyInputSlot) { }
 
     override onSerialize(o: SerializedLGraphNode) {
+        super.onSerialize(o);
         (o as any).comfyValue = get(this.value);
         (o as any).shownOutputProperties = this.shownOutputProperties
     }
diff --git a/src/lib/nodes/index.ts b/src/lib/nodes/index.ts
index 8c22c73..c2777d1 100644
--- a/src/lib/nodes/index.ts
+++ b/src/lib/nodes/index.ts
@@ -1,5 +1,5 @@
 export { default as ComfyReroute } from "./ComfyReroute"
 export { ComfyWidgetNode, ComfySliderNode, ComfyComboNode, ComfyTextNode } from "./ComfyWidgetNodes"
-export { ComfyCopyAction } from "./ComfyActionNodes"
+export { ComfyCopyAction, ComfySwapAction } from "./ComfyActionNodes"
 export { default as ComfyValueControl } from "./ComfyValueControl"
 export { default as ComfySelector } from "./ComfySelector"
diff --git a/src/lib/widgets.ts b/src/lib/widgets.ts
index 93e8a98..e3083aa 100644
--- a/src/lib/widgets.ts
+++ b/src/lib/widgets.ts
@@ -2,7 +2,7 @@ import type { IWidget, LGraphNode } from "@litegraph-js/core";
 import ComfyValueControlWidget from "./widgets/ComfyValueControlWidget";
 import type { ComfyInputConfig } from "./IComfyInputSlot";
 import type IComfyInputSlot from "./IComfyInputSlot";
-import { BuiltInSlotShape } from "@litegraph-ts/core";
+import { BuiltInSlotShape, LiteGraph } from "@litegraph-ts/core";
 import { ComfyComboNode, ComfySliderNode, ComfyTextNode } from "./nodes";
 
 type WidgetFactory = (node: LGraphNode, inputName: string, inputData: any) => IComfyInputSlot;
@@ -23,6 +23,14 @@ function addComfyInput(node: LGraphNode, inputName: string, extraInfo: Partial<I
     const input = node.addInput(inputName) as IComfyInputSlot
     for (const [k, v] of Object.entries(extraInfo))
         input[k] = v
+
+    if (input.defaultWidgetNode) {
+        const ty = Object.values(LiteGraph.registered_node_types)
+            .find(v => v.class === input.defaultWidgetNode)
+        if (ty)
+            input.widgetNodeType = ty.type
+    }
+
     input.serialize = true;
     return input;
 }
diff --git a/src/lib/widgets/ButtonWidget.svelte b/src/lib/widgets/ButtonWidget.svelte
index de3c972..b2b8b6e 100644
--- a/src/lib/widgets/ButtonWidget.svelte
+++ b/src/lib/widgets/ButtonWidget.svelte
@@ -7,7 +7,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyButtonNode | null = null;
  let nodeValue: Writable<boolean> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
 
  $: widget && setNodeValue(widget);
 
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index da637dc..6d1cedf 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -7,7 +7,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let option: any
 
  export let debug: boolean = false;
@@ -15,8 +15,14 @@
  $: widget && setNodeValue(widget);
 
  $: if (nodeValue !== null && (!$propsChanged || $propsChanged)) {
-     $nodeValue = option
-     setOption($nodeValue)
+     if (node.properties.values.indexOf(option.value) === -1) {
+         setOption($nodeValue)
+         $nodeValue = option
+     }
+     else {
+         $nodeValue = option
+         setOption($nodeValue)
+     }
      setNodeValue(widget)
      node.properties = node.properties
  }
@@ -46,37 +52,65 @@
          return "???";
      return links[0].data
  }
+
+ let lastPropsChanged: number = 0;
+ let werePropsChanged: boolean = false;
+
+ $: if ($propsChanged !== lastPropsChanged) {
+     werePropsChanged = true;
+     lastPropsChanged = $propsChanged;
+     setTimeout(() => (werePropsChanged = false), 2000);
+ }
 </script>
 
-<div class="wrapper gr-combo">
-    {#if node !== null && nodeValue !== null}
-        <label>
-            <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
-            <Select
-                bind:value={option}
-                bind:items={node.properties.values}
-                disabled={node.properties.values.length === 0}
-                clearable={false}
-                on:change
-                on:select
-                on:filter
-                on:blur
-            />
-            {#if debug}
-                <div>Value: {option?.value}</div>
-                <div>NodeValue: {$nodeValue}</div>
-                <div>LinkValue: {getLinkValue()}</div>
-            {/if}
-        </label>
-    {/if}
+<div class="wrapper gr-combo" class:updated={werePropsChanged}>
+    {#key $propsChanged}
+        {#if node !== null && nodeValue !== null}
+            <label>
+                <BlockTitle show_label={true}>{widget.attrs.title}</BlockTitle>
+                <Select
+                    bind:value={option}
+                    bind:items={node.properties.values}
+                    disabled={node.properties.values.length === 0}
+                    clearable={false}
+                    on:change
+                    on:select
+                    on:filter
+                    on:blur
+                />
+                {#if debug}
+                    <div>Value: {option?.value}</div>
+                    <div>Items: {node.properties.values}</div>
+                    <div>NodeValue: {$nodeValue}</div>
+                    <div>LinkValue: {getLinkValue()}</div>
+                {/if}
+            </label>
+        {/if}
+    {/key}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
      padding: 2px;
      width: 100%;
  }
 
+ @keyframes -global-light-up {
+     from {
+         background-color: var(--color-yellow-400);
+     }
+     to {
+         background-color: none;
+     }
+ }
+
+ .updated {
+     animation: light-up 1s ease-out;
+     :global(.svelte-select) {
+         animation: light-up 1s ease-out;
+     }
+ }
+
  :global(.svelte-select-list) {
      z-index: var(--layer-top) !important;
  }
diff --git a/src/lib/widgets/GalleryWidget.svelte b/src/lib/widgets/GalleryWidget.svelte
index dcd4d01..ab32f21 100644
--- a/src/lib/widgets/GalleryWidget.svelte
+++ b/src/lib/widgets/GalleryWidget.svelte
@@ -11,7 +11,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyGalleryNode | null = null;
  let nodeValue: Writable<GradioFileData[]> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let option: number | null = null;
 
  $: widget && setNodeValue(widget);
diff --git a/src/lib/widgets/RangeWidget.svelte b/src/lib/widgets/RangeWidget.svelte
index 11d9def..6e50522 100644
--- a/src/lib/widgets/RangeWidget.svelte
+++ b/src/lib/widgets/RangeWidget.svelte
@@ -6,7 +6,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfySliderNode | null = null;
  let nodeValue: Writable<number> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let option: number | null = null;
 
  $: widget && setNodeValue(widget);
diff --git a/src/lib/widgets/TextWidget.svelte b/src/lib/widgets/TextWidget.svelte
index d2106a0..31e8f63 100644
--- a/src/lib/widgets/TextWidget.svelte
+++ b/src/lib/widgets/TextWidget.svelte
@@ -6,7 +6,7 @@
  export let widget: WidgetLayout | null = null;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
- let propsChanged: Writable<boolean> | null = null;
+ let propsChanged: Writable<number> | null = null;
  let itemValue: WidgetUIStateStore | null = null;
 
  $: widget && setNodeValue(widget);

From 70efb85a3f1925325f05b266339b6d3d4fb02d74 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Thu, 4 May 2023 20:55:48 -0500
Subject: [PATCH 27/27] Don't serialize huge prompts

---
 src/lib/defaultGraph.ts           | 3297 ++++++++++++++++++++++++++++-
 src/lib/nodes/ComfyActionNodes.ts |    7 +-
 src/lib/nodes/ComfyGraphNode.ts   |    3 +-
 3 files changed, 3303 insertions(+), 4 deletions(-)

diff --git a/src/lib/defaultGraph.ts b/src/lib/defaultGraph.ts
index 1046398..0ef7690 100644
--- a/src/lib/defaultGraph.ts
+++ b/src/lib/defaultGraph.ts
@@ -1,6 +1,3300 @@
 import type SerializedAppState from "./ComfyApp"
 
 const defaultGraph: SerializedAppState = {
+    createdBy: "ComfyBox",
+    version: 1,
+    workflow: {
+        last_node_id: 75,
+        last_link_id: 101,
+        nodes: [
+            {
+                id: 19,
+                type: "ui/slider",
+                pos: [
+                    77.09750000000287,
+                    235.9643000000003
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 0,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            18
+                        ],
+                        _data: 8
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 100
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 0.5
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 8,
+                    min: 0,
+                    max: 100,
+                    step: 0.5,
+                    precision: 0
+                },
+                widgets_values: [
+                    "8.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 8,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 20,
+                type: "ui/combo",
+                pos: [
+                    77.09750000000287,
+                    255.9643000000003
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 1,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        links: [
+                            19
+                        ],
+                        _data: "euler"
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    }
+                ],
+                title: "UI.Combo",
+                properties: {
+                    defaultValue: "euler",
+                    values: [
+                        "euler",
+                        "euler_ancestral",
+                        "heun",
+                        "dpm_2",
+                        "dpm_2_ancestral",
+                        "lms",
+                        "dpm_fast",
+                        "dpm_adaptive",
+                        "dpmpp_2s_ancestral",
+                        "dpmpp_sde",
+                        "dpmpp_2m",
+                        "ddim",
+                        "uni_pc",
+                        "uni_pc_bh2"
+                    ]
+                },
+                widgets_values: [
+                    "euler"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: "euler",
+                shownOutputProperties: {}
+            },
+            {
+                id: 21,
+                type: "ui/combo",
+                pos: [
+                    77.09750000000287,
+                    275.9643000000003
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 2,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        links: [
+                            20
+                        ],
+                        _data: "karras"
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    }
+                ],
+                title: "UI.Combo",
+                properties: {
+                    defaultValue: "karras",
+                    values: [
+                        "karras",
+                        "normal",
+                        "simple",
+                        "ddim_uniform"
+                    ]
+                },
+                widgets_values: [
+                    "karras"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: "karras",
+                shownOutputProperties: {}
+            },
+            {
+                id: 22,
+                type: "ui/slider",
+                pos: [
+                    77.09750000000287,
+                    355.9643000000003
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 3,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            21
+                        ],
+                        _data: 1
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 0.01
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 1,
+                    min: 0,
+                    max: 1,
+                    step: 0.01,
+                    precision: 0
+                },
+                widgets_values: [
+                    "1.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 1,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 33,
+                type: "ui/text",
+                pos: [
+                    -347.6124999999959,
+                    309.06430000000114
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 4,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        links: [
+                            30
+                        ],
+                        _data: "masterpiece, best quality, 1girl, dress, space opera, portrait, planet landscape, starry sky"
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    }
+                ],
+                title: "UI.Text",
+                properties: {
+                    defaultValue: "",
+                    multiline: true
+                },
+                widgets_values: [
+                    "masterpiece, best quality, 1girl, dress, space opera, portrait, planet landscape, starry sky"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: "masterpiece, best quality, 1girl, dress, space opera, portrait, planet landscape, starry sky",
+                shownOutputProperties: {}
+            },
+            {
+                id: 35,
+                type: "ui/text",
+                pos: [
+                    -346.40249999999617,
+                    399.8143000000014
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 5,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        links: [
+                            31
+                        ],
+                        _data: "worst quality, bad quality, nsfw"
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    }
+                ],
+                title: "UI.Text",
+                properties: {
+                    defaultValue: "",
+                    multiline: true
+                },
+                widgets_values: [
+                    "worst quality, bad quality, nsfw"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: "worst quality, bad quality, nsfw",
+                shownOutputProperties: {}
+            },
+            {
+                id: 40,
+                type: "VAEDecode",
+                pos: [
+                    532.5875000000013,
+                    160.9183000000009
+                ],
+                size: [
+                    210,
+                    46
+                ],
+                flags: {},
+                order: 31,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "samples",
+                        type: "LATENT",
+                        link: 40,
+                        color_off: "orange",
+                        color_on: "orange"
+                    },
+                    {
+                        name: "vae",
+                        type: "VAE",
+                        link: 101,
+                        color_off: "orange",
+                        color_on: "orange"
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "IMAGE",
+                        type: "IMAGE",
+                        links: [
+                            44
+                        ],
+                        color_off: "orange",
+                        color_on: "orange",
+                        slot_index: 0
+                    }
+                ],
+                title: "VAEDecode",
+                properties: {},
+                color: "#432",
+                bgColor: "#653"
+            },
+            {
+                id: 45,
+                type: "ui/text",
+                pos: [
+                    779.2900000000001,
+                    208.44999999999965
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 6,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        links: [
+                            43
+                        ],
+                        _data: "ComfyUI"
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    }
+                ],
+                title: "UI.Text",
+                properties: {
+                    defaultValue: "ComfyUI",
+                    multiline: false
+                },
+                widgets_values: [
+                    "ComfyUI"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: "ComfyUI",
+                shownOutputProperties: {}
+            },
+            {
+                id: 32,
+                type: "CLIPTextEncode",
+                pos: [
+                    -218,
+                    285
+                ],
+                size: [
+                    216.60000000000002,
+                    46
+                ],
+                flags: {},
+                order: 24,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "text",
+                        type: "string",
+                        link: 30,
+                        config: {
+                            defaultValue: "",
+                            multiline: true
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "clip",
+                        type: "CLIP",
+                        link: 99,
+                        color_off: "orange",
+                        color_on: "orange"
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "CONDITIONING",
+                        type: "CONDITIONING",
+                        links: [
+                            33
+                        ],
+                        color_off: "orange",
+                        color_on: "orange",
+                        slot_index: 0
+                    }
+                ],
+                title: "CLIPTextEncode",
+                properties: {},
+                color: "#432",
+                bgColor: "#653"
+            },
+            {
+                id: 34,
+                type: "CLIPTextEncode",
+                pos: [
+                    -216,
+                    376
+                ],
+                size: [
+                    216.60000000000002,
+                    46
+                ],
+                flags: {},
+                order: 25,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "text",
+                        type: "string",
+                        link: 31,
+                        config: {
+                            defaultValue: "",
+                            multiline: true
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "clip",
+                        type: "CLIP",
+                        link: 100,
+                        color_off: "orange",
+                        color_on: "orange"
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "CONDITIONING",
+                        type: "CONDITIONING",
+                        links: [
+                            32
+                        ],
+                        color_off: "orange",
+                        color_on: "orange",
+                        slot_index: 0
+                    }
+                ],
+                title: "CLIPTextEncode",
+                properties: {},
+                color: "#432",
+                bgColor: "#653"
+            },
+            {
+                id: 47,
+                type: "ui/gallery",
+                pos: [
+                    1284,
+                    165
+                ],
+                size: [
+                    210,
+                    58
+                ],
+                flags: {},
+                order: 33,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "images",
+                        type: "OUTPUT",
+                        link: 46
+                    }
+                ],
+                outputs: [],
+                title: "UI.Gallery",
+                properties: {
+                    defaultValue: []
+                },
+                widgets_values: [
+                    "Images: 4"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: [
+                    {
+                        name: null,
+                        data: "http://localhost:8188/view?filename=ComfyUI_00352_.png&subfolder=&type=output"
+                    },
+                    {
+                        name: null,
+                        data: "http://localhost:8188/view?filename=ComfyUI_00353_.png&subfolder=&type=output"
+                    },
+                    {
+                        name: null,
+                        data: "http://localhost:8188/view?filename=ComfyUI_00354_.png&subfolder=&type=output"
+                    },
+                    {
+                        name: null,
+                        data: "http://localhost:8188/view?filename=ComfyUI_00355_.png&subfolder=&type=output"
+                    }
+                ],
+                shownOutputProperties: {}
+            },
+            {
+                id: 49,
+                type: "events/log",
+                pos: [
+                    771,
+                    22
+                ],
+                size: [
+                    140,
+                    26
+                ],
+                flags: {},
+                order: 17,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "event",
+                        type: -1,
+                        link: 47,
+                        shape: 1
+                    }
+                ],
+                outputs: [],
+                title: "Log Event",
+                properties: {}
+            },
+            {
+                id: 52,
+                type: "basic/watch",
+                pos: [
+                    1063.1426107321954,
+                    -118.99396962098862
+                ],
+                size: [
+                    140,
+                    26
+                ],
+                flags: {},
+                order: 22,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: 0,
+                        link: 50,
+                        label: "null",
+                        slot_index: 0
+                    }
+                ],
+                outputs: [],
+                title: "Watch",
+                properties: {
+                    value: 1
+                }
+            },
+            {
+                id: 54,
+                type: "ui/slider",
+                pos: [
+                    1038,
+                    -226
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {},
+                order: 23,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: 52
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: null,
+                        _data: 6
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 10
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 0,
+                    min: 0,
+                    max: 10,
+                    step: 1,
+                    precision: 1
+                },
+                widgets_values: [
+                    "6.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 6,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 48,
+                type: "ui/button",
+                pos: [
+                    372,
+                    12
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {},
+                order: 7,
+                mode: 0,
+                inputs: [],
+                outputs: [
+                    {
+                        name: "event",
+                        type: -2,
+                        links: [
+                            47,
+                            62
+                        ],
+                        shape: 1,
+                        slot_index: 0
+                    },
+                    {
+                        name: "isClicked",
+                        type: "boolean",
+                        links: null,
+                        slot_index: 1,
+                        _data: false
+                    }
+                ],
+                title: "UI.Button",
+                properties: {
+                    defaultValue: false,
+                    message: "bang"
+                },
+                widgets_values: [
+                    "false"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: false,
+                shownOutputProperties: {}
+            },
+            {
+                id: 50,
+                type: "actions/copy",
+                pos: [
+                    729,
+                    -125
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {},
+                order: 18,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "",
+                        type: "*",
+                        link: 66
+                    },
+                    {
+                        name: "copy",
+                        type: -1,
+                        link: 62,
+                        shape: 1
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "",
+                        type: "*",
+                        links: [
+                            50,
+                            52
+                        ],
+                        slot_index: 0
+                    }
+                ],
+                title: "Comfy.CopyAction",
+                properties: {
+                    value: 6
+                }
+            },
+            {
+                id: 18,
+                type: "ui/slider",
+                pos: [
+                    79,
+                    219
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 8,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            17
+                        ],
+                        _data: 20
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 10000
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 20,
+                    min: 1,
+                    max: 10000,
+                    step: 1,
+                    precision: 0
+                },
+                widgets_values: [
+                    "20.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 20,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 53,
+                type: "ui/slider",
+                pos: [
+                    369,
+                    -174
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {},
+                order: 9,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            66
+                        ],
+                        slot_index: 0,
+                        _data: 6
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: [],
+                        shape: 1,
+                        slot_index: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 10
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 0,
+                    min: 0,
+                    max: 10,
+                    step: 1,
+                    precision: 1
+                },
+                widgets_values: [
+                    "6.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 6,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 64,
+                type: "basic/CompareValues",
+                pos: [
+                    -131,
+                    -587
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {},
+                order: 19,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "A",
+                        type: 0,
+                        link: 78
+                    },
+                    {
+                        name: "B",
+                        type: 0,
+                        link: 79
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "true",
+                        type: "boolean",
+                        links: [
+                            74
+                        ],
+                        slot_index: 0,
+                        _data: true
+                    },
+                    {
+                        name: "false",
+                        type: "boolean",
+                        links: null,
+                        _data: false
+                    }
+                ],
+                title: "GenericCompare",
+                properties: {
+                    A: "randomize",
+                    B: "randomize",
+                    OP: "==",
+                    enabled: true
+                }
+            },
+            {
+                id: 39,
+                type: "ui/slider",
+                pos: [
+                    -350,
+                    554
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 10,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            38,
+                            83
+                        ],
+                        _data: 4
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 64
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 1
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 1,
+                    min: 1,
+                    max: 64,
+                    step: 1,
+                    precision: 0
+                },
+                widgets_values: [
+                    "4.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 4,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 66,
+                type: "basic/string",
+                pos: [
+                    -363,
+                    -578
+                ],
+                size: [
+                    210,
+                    38
+                ],
+                flags: {},
+                order: 11,
+                mode: 0,
+                inputs: [],
+                outputs: [
+                    {
+                        name: "string",
+                        type: "string",
+                        links: [
+                            78
+                        ],
+                        slot_index: 0,
+                        _data: "randomize"
+                    }
+                ],
+                title: "Const String",
+                properties: {
+                    value: "randomize"
+                }
+            },
+            {
+                id: 57,
+                type: "ui/combo",
+                pos: [
+                    -378,
+                    -304
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 12,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        links: [
+                            55,
+                            79
+                        ],
+                        slot_index: 0,
+                        _data: "randomize"
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    }
+                ],
+                title: "UI.Combo",
+                properties: {
+                    defaultValue: "randomize",
+                    values: [
+                        "fixed",
+                        "increment",
+                        "decrement",
+                        "randomize"
+                    ]
+                },
+                widgets_values: [
+                    "randomize"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: "randomize",
+                shownOutputProperties: {}
+            },
+            {
+                id: 17,
+                type: "ui/slider",
+                pos: [
+                    -48,
+                    -291
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {
+                    collapsed: false
+                },
+                order: 27,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: 67,
+                        slot_index: 0
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            68,
+                            80
+                        ],
+                        slot_index: 0,
+                        _data: 572904899609889
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: [
+                            69
+                        ],
+                        slot_index: 2,
+                        _data: 0
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: [
+                            70
+                        ],
+                        slot_index: 3,
+                        _data: 18446744073709552000
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: [
+                            75
+                        ],
+                        slot_index: 4,
+                        _data: 1
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 0,
+                    min: 0,
+                    max: 18446744073709552000,
+                    step: 1,
+                    precision: 0
+                },
+                widgets_values: [
+                    "572904899609889.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 572904899609889,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 16,
+                type: "KSampler",
+                pos: [
+                    242,
+                    156
+                ],
+                size: [
+                    241.79999999999998,
+                    206
+                ],
+                flags: {},
+                order: 26,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "model",
+                        type: "MODEL",
+                        link: 98,
+                        color_off: "orange",
+                        color_on: "orange"
+                    },
+                    {
+                        name: "seed",
+                        type: "number",
+                        link: 80,
+                        config: {
+                            min: 0,
+                            max: 18446744073709552000,
+                            step: 1,
+                            precision: 0,
+                            defaultValue: 0
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "steps",
+                        type: "number",
+                        link: 17,
+                        config: {
+                            min: 1,
+                            max: 10000,
+                            step: 1,
+                            precision: 0,
+                            defaultValue: 20
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "cfg",
+                        type: "number",
+                        link: 18,
+                        config: {
+                            min: 0,
+                            max: 100,
+                            step: 0.5,
+                            precision: 0,
+                            defaultValue: 8
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "sampler_name",
+                        type: "string",
+                        link: 19,
+                        config: {
+                            values: [
+                                "euler",
+                                "euler_ancestral",
+                                "heun",
+                                "dpm_2",
+                                "dpm_2_ancestral",
+                                "lms",
+                                "dpm_fast",
+                                "dpm_adaptive",
+                                "dpmpp_2s_ancestral",
+                                "dpmpp_sde",
+                                "dpmpp_2m",
+                                "ddim",
+                                "uni_pc",
+                                "uni_pc_bh2"
+                            ],
+                            defaultValue: "euler"
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "scheduler",
+                        type: "string",
+                        link: 20,
+                        config: {
+                            values: [
+                                "karras",
+                                "normal",
+                                "simple",
+                                "ddim_uniform"
+                            ],
+                            defaultValue: "karras"
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "positive",
+                        type: "CONDITIONING",
+                        link: 33,
+                        color_off: "orange",
+                        color_on: "orange"
+                    },
+                    {
+                        name: "negative",
+                        type: "CONDITIONING",
+                        link: 32,
+                        color_off: "orange",
+                        color_on: "orange"
+                    },
+                    {
+                        name: "latent_image",
+                        type: "LATENT",
+                        link: 39,
+                        color_off: "orange",
+                        color_on: "orange"
+                    },
+                    {
+                        name: "denoise",
+                        type: "number",
+                        link: 21,
+                        config: {
+                            min: 0,
+                            max: 1,
+                            step: 0.01,
+                            precision: 0,
+                            defaultValue: 1
+                        },
+                        serialize: true
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "LATENT",
+                        type: "LATENT",
+                        links: [
+                            40
+                        ],
+                        color_off: "orange",
+                        color_on: "orange",
+                        slot_index: 0
+                    }
+                ],
+                title: "KSampler",
+                properties: {},
+                color: "#432",
+                bgColor: "#653"
+            },
+            {
+                id: 69,
+                type: "basic/integer",
+                pos: [
+                    261,
+                    -405
+                ],
+                size: [
+                    210,
+                    38
+                ],
+                flags: {},
+                order: 13,
+                mode: 0,
+                inputs: [],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            85
+                        ],
+                        label: "1",
+                        slot_index: 0,
+                        _data: 1
+                    }
+                ],
+                title: "Const Integer",
+                properties: {
+                    value: 1
+                }
+            },
+            {
+                id: 56,
+                type: "utils/value_control",
+                pos: [
+                    -252,
+                    -372
+                ],
+                size: [
+                    151.2,
+                    126
+                ],
+                flags: {},
+                order: 34,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: 68
+                    },
+                    {
+                        name: "trigger",
+                        type: -1,
+                        link: 73,
+                        shape: 1
+                    },
+                    {
+                        name: "action",
+                        type: "string",
+                        link: 55,
+                        config: {
+                            defaultValue: "randomize",
+                            values: [
+                                "fixed",
+                                "increment",
+                                "decrement",
+                                "randomize"
+                            ]
+                        }
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        link: 69
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        link: 70
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        link: 88
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "*",
+                        links: [
+                            67
+                        ],
+                        slot_index: 0
+                    }
+                ],
+                title: "Comfy.ValueControl",
+                properties: {
+                    value: 572904899609889,
+                    action: "randomize",
+                    min: 0,
+                    max: 18446744073709552000,
+                    step: 1
+                }
+            },
+            {
+                id: 63,
+                type: "utils/selector2",
+                pos: [
+                    174,
+                    -565
+                ],
+                size: [
+                    140,
+                    66
+                ],
+                flags: {},
+                order: 35,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "select",
+                        type: "boolean",
+                        link: 74
+                    },
+                    {
+                        name: "true",
+                        type: "*",
+                        link: 75
+                    },
+                    {
+                        name: "false",
+                        type: "*",
+                        link: 86,
+                        slot_index: 2
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "out",
+                        type: "*",
+                        links: [
+                            87,
+                            88
+                        ],
+                        slot_index: 0,
+                        _data: 1
+                    }
+                ],
+                title: "Comfy.Selector2",
+                properties: {
+                    value: null
+                }
+            },
+            {
+                id: 36,
+                type: "EmptyLatentImage",
+                pos: [
+                    -220,
+                    490
+                ],
+                size: [
+                    216.60000000000002,
+                    66
+                ],
+                flags: {},
+                order: 28,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "width",
+                        type: "number",
+                        link: 93,
+                        config: {
+                            min: 64,
+                            max: 8192,
+                            step: 8,
+                            precision: 0,
+                            defaultValue: 512
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "height",
+                        type: "number",
+                        link: 94,
+                        config: {
+                            min: 64,
+                            max: 8192,
+                            step: 8,
+                            precision: 0,
+                            defaultValue: 512
+                        },
+                        serialize: true
+                    },
+                    {
+                        name: "batch_size",
+                        type: "number",
+                        link: 38,
+                        config: {
+                            min: 1,
+                            max: 64,
+                            step: 1,
+                            precision: 0,
+                            defaultValue: 1
+                        },
+                        serialize: true
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "LATENT",
+                        type: "LATENT",
+                        links: [
+                            39
+                        ],
+                        color_off: "orange",
+                        color_on: "orange",
+                        slot_index: 0
+                    }
+                ],
+                title: "EmptyLatentImage",
+                properties: {},
+                color: "#432",
+                bgColor: "#653"
+            },
+            {
+                id: 38,
+                type: "ui/slider",
+                pos: [
+                    -351,
+                    532
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 30,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: 91
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            90,
+                            94
+                        ],
+                        slot_index: 0,
+                        _data: 512
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 64
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 8192
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 8
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 512,
+                    min: 64,
+                    max: 8192,
+                    step: 8,
+                    precision: 0
+                },
+                widgets_values: [
+                    "512.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 512,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 37,
+                type: "ui/slider",
+                pos: [
+                    -352,
+                    509
+                ],
+                size: [
+                    210,
+                    158
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 29,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        link: 92
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "number",
+                        links: [
+                            89,
+                            93
+                        ],
+                        slot_index: 0,
+                        _data: 848
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    },
+                    {
+                        name: "min",
+                        type: "number",
+                        links: null,
+                        _data: 64
+                    },
+                    {
+                        name: "max",
+                        type: "number",
+                        links: null,
+                        _data: 8192
+                    },
+                    {
+                        name: "step",
+                        type: "number",
+                        links: null,
+                        _data: 8
+                    },
+                    {
+                        name: "precision",
+                        type: "number",
+                        links: null,
+                        _data: 0
+                    }
+                ],
+                title: "UI.Slider",
+                properties: {
+                    defaultValue: 512,
+                    min: 64,
+                    max: 8192,
+                    step: 8,
+                    precision: 0
+                },
+                widgets_values: [
+                    "848.000"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: 848,
+                shownOutputProperties: {
+                    min: {
+                        type: "number",
+                        index: 2
+                    },
+                    max: {
+                        type: "number",
+                        index: 3
+                    },
+                    step: {
+                        type: "number",
+                        index: 4
+                    },
+                    precision: {
+                        type: "number",
+                        index: 5
+                    }
+                }
+            },
+            {
+                id: 71,
+                type: "actions/swap",
+                pos: [
+                    -527,
+                    486
+                ],
+                size: [
+                    140,
+                    66
+                ],
+                flags: {
+                    collapsed: false
+                },
+                order: 37,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "A",
+                        type: "*",
+                        link: 89
+                    },
+                    {
+                        name: "B",
+                        type: "*",
+                        link: 90
+                    },
+                    {
+                        name: "swap",
+                        type: -1,
+                        link: 95,
+                        shape: 1
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "B",
+                        type: "*",
+                        links: [
+                            91
+                        ],
+                        slot_index: 0
+                    },
+                    {
+                        name: "A",
+                        type: "*",
+                        links: [
+                            92
+                        ],
+                        slot_index: 1
+                    }
+                ],
+                title: "Comfy.SwapAction",
+                properties: {}
+            },
+            {
+                id: 62,
+                type: "ui/button",
+                pos: [
+                    -648,
+                    550
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 14,
+                mode: 0,
+                inputs: [],
+                outputs: [
+                    {
+                        name: "clicked",
+                        type: -2,
+                        links: [
+                            95
+                        ],
+                        shape: 1,
+                        slot_index: 0
+                    },
+                    {
+                        name: "isClicked",
+                        type: "boolean",
+                        links: null,
+                        _data: false
+                    }
+                ],
+                title: "UI.Button",
+                properties: {
+                    defaultValue: false,
+                    message: "bang"
+                },
+                widgets_values: [
+                    "false"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: false,
+                shownOutputProperties: {}
+            },
+            {
+                id: 44,
+                type: "SaveImage",
+                pos: [
+                    888,
+                    164
+                ],
+                size: [
+                    315,
+                    78
+                ],
+                flags: {},
+                order: 32,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "images",
+                        type: "IMAGE",
+                        link: 44,
+                        color_off: "orange",
+                        color_on: "orange",
+                        slot_index: 0
+                    },
+                    {
+                        name: "filename_prefix",
+                        type: "string",
+                        link: 43,
+                        config: {
+                            defaultValue: "ComfyUI",
+                            multiline: false
+                        },
+                        serialize: true
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "output",
+                        type: "OUTPUT",
+                        links: [
+                            46
+                        ],
+                        slot_index: 0
+                    }
+                ],
+                title: "SaveImage",
+                properties: {},
+                color: "#432",
+                bgColor: "#653"
+            },
+            {
+                id: 55,
+                type: "actions/after_queued",
+                pos: [
+                    -591,
+                    -349
+                ],
+                size: [
+                    193.2,
+                    46
+                ],
+                flags: {},
+                order: 15,
+                mode: 0,
+                inputs: [],
+                outputs: [
+                    {
+                        name: "afterQueued",
+                        type: -2,
+                        links: [
+                            73
+                        ],
+                        shape: 1,
+                        slot_index: 0,
+                        _data: null
+                    },
+                    {
+                        name: "prompt",
+                        type: "*",
+                        links: null
+                    }
+                ],
+                title: "Comfy.AfterQueuedAction",
+                properties: {
+                    prompt: null
+                }
+            },
+            {
+                id: 75,
+                type: "ui/combo",
+                pos: [
+                    -420.44163113999997,
+                    169.75962460075795
+                ],
+                size: [
+                    210,
+                    78
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 16,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        link: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "value",
+                        type: "string",
+                        links: [
+                            97
+                        ],
+                        _data: "refslaveV2_v2.safetensors"
+                    },
+                    {
+                        name: "changed",
+                        type: -2,
+                        links: null,
+                        shape: 1
+                    }
+                ],
+                title: "UI.Combo",
+                properties: {
+                    defaultValue: "AbyssOrangeMix2_nsfw.safetensors",
+                    values: [
+                        "AbyssOrangeMix2_nsfw.safetensors",
+                        "refslaveV2_v2.safetensors"
+                    ]
+                },
+                widgets_values: [
+                    "refslaveV2_v2.safetensors"
+                ],
+                color: "#223",
+                bgColor: "#335",
+                comfyValue: "refslaveV2_v2.safetensors",
+                shownOutputProperties: {}
+            },
+            {
+                id: 74,
+                type: "CheckpointLoaderSimple",
+                pos: [
+                    -290,
+                    146
+                ],
+                size: [
+                    277.2,
+                    66
+                ],
+                flags: {},
+                order: 21,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "ckpt_name",
+                        type: "string",
+                        link: 97,
+                        config: {
+                            values: [
+                                "AbyssOrangeMix2_nsfw.safetensors",
+                                "refslaveV2_v2.safetensors"
+                            ],
+                            defaultValue: "AbyssOrangeMix2_nsfw.safetensors"
+                        },
+                        widgetNodeType: "ui/combo",
+                        serialize: true,
+                        defaultWidgetNode: null
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "MODEL",
+                        type: "MODEL",
+                        links: [
+                            98
+                        ],
+                        slot_index: 0
+                    },
+                    {
+                        name: "CLIP",
+                        type: "CLIP",
+                        links: [
+                            99,
+                            100
+                        ],
+                        slot_index: 1
+                    },
+                    {
+                        name: "VAE",
+                        type: "VAE",
+                        links: [
+                            101
+                        ],
+                        slot_index: 2
+                    }
+                ],
+                title: "CheckpointLoaderSimple",
+                properties: {},
+                color: "#432",
+                bgColor: "#653"
+            },
+            {
+                id: 70,
+                type: "basic/watch",
+                pos: [
+                    341,
+                    -543
+                ],
+                size: [
+                    140,
+                    26
+                ],
+                flags: {
+                    collapsed: true
+                },
+                order: 36,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "value",
+                        type: 0,
+                        link: 87,
+                        label: "1.000"
+                    }
+                ],
+                outputs: [],
+                title: "Watch",
+                properties: {
+                    value: 1
+                }
+            },
+            {
+                id: 67,
+                type: "math/operation",
+                pos: [
+                    519,
+                    -409
+                ],
+                size: [
+                    140,
+                    46
+                ],
+                flags: {},
+                order: 20,
+                mode: 0,
+                inputs: [
+                    {
+                        name: "A",
+                        type: "number,array,object",
+                        link: 85
+                    },
+                    {
+                        name: "B",
+                        type: "number",
+                        link: 83
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "=",
+                        type: "number",
+                        links: [
+                            86
+                        ],
+                        slot_index: 0,
+                        _data: 5
+                    }
+                ],
+                title: "Operation",
+                properties: {
+                    A: 1,
+                    B: 4,
+                    OP: "+"
+                }
+            }
+        ],
+        links: [
+            [
+                17,
+                18,
+                0,
+                16,
+                2,
+                "number"
+            ],
+            [
+                18,
+                19,
+                0,
+                16,
+                3,
+                "number"
+            ],
+            [
+                19,
+                20,
+                0,
+                16,
+                4,
+                "string"
+            ],
+            [
+                20,
+                21,
+                0,
+                16,
+                5,
+                "string"
+            ],
+            [
+                21,
+                22,
+                0,
+                16,
+                9,
+                "number"
+            ],
+            [
+                30,
+                33,
+                0,
+                32,
+                0,
+                "string"
+            ],
+            [
+                31,
+                35,
+                0,
+                34,
+                0,
+                "string"
+            ],
+            [
+                32,
+                34,
+                0,
+                16,
+                7,
+                "CONDITIONING"
+            ],
+            [
+                33,
+                32,
+                0,
+                16,
+                6,
+                "CONDITIONING"
+            ],
+            [
+                38,
+                39,
+                0,
+                36,
+                2,
+                "number"
+            ],
+            [
+                39,
+                36,
+                0,
+                16,
+                8,
+                "LATENT"
+            ],
+            [
+                40,
+                16,
+                0,
+                40,
+                0,
+                "LATENT"
+            ],
+            [
+                43,
+                45,
+                0,
+                44,
+                1,
+                "string"
+            ],
+            [
+                44,
+                40,
+                0,
+                44,
+                0,
+                "IMAGE"
+            ],
+            [
+                46,
+                44,
+                0,
+                47,
+                0,
+                "OUTPUT"
+            ],
+            [
+                47,
+                48,
+                0,
+                49,
+                0,
+                -1
+            ],
+            [
+                50,
+                50,
+                0,
+                52,
+                0,
+                "*"
+            ],
+            [
+                52,
+                50,
+                0,
+                54,
+                0,
+                "number"
+            ],
+            [
+                55,
+                57,
+                0,
+                56,
+                2,
+                "string"
+            ],
+            [
+                62,
+                48,
+                0,
+                50,
+                1,
+                -1
+            ],
+            [
+                66,
+                53,
+                0,
+                50,
+                0,
+                "*"
+            ],
+            [
+                67,
+                56,
+                0,
+                17,
+                0,
+                "number"
+            ],
+            [
+                68,
+                17,
+                0,
+                56,
+                0,
+                "number"
+            ],
+            [
+                69,
+                17,
+                2,
+                56,
+                3,
+                "number"
+            ],
+            [
+                70,
+                17,
+                3,
+                56,
+                4,
+                "number"
+            ],
+            [
+                73,
+                55,
+                0,
+                56,
+                1,
+                -1
+            ],
+            [
+                74,
+                64,
+                0,
+                63,
+                0,
+                "boolean"
+            ],
+            [
+                75,
+                17,
+                4,
+                63,
+                1,
+                "*"
+            ],
+            [
+                78,
+                66,
+                0,
+                64,
+                0,
+                "string"
+            ],
+            [
+                79,
+                57,
+                0,
+                64,
+                1,
+                "string"
+            ],
+            [
+                80,
+                17,
+                0,
+                16,
+                1,
+                "number"
+            ],
+            [
+                83,
+                39,
+                0,
+                67,
+                1,
+                "number"
+            ],
+            [
+                85,
+                69,
+                0,
+                67,
+                0,
+                "number,array,object"
+            ],
+            [
+                86,
+                67,
+                0,
+                63,
+                2,
+                "*"
+            ],
+            [
+                87,
+                63,
+                0,
+                70,
+                0,
+                "*"
+            ],
+            [
+                88,
+                63,
+                0,
+                56,
+                5,
+                "number"
+            ],
+            [
+                89,
+                37,
+                0,
+                71,
+                0,
+                "*"
+            ],
+            [
+                90,
+                38,
+                0,
+                71,
+                1,
+                "*"
+            ],
+            [
+                91,
+                71,
+                0,
+                38,
+                0,
+                "number"
+            ],
+            [
+                92,
+                71,
+                1,
+                37,
+                0,
+                "number"
+            ],
+            [
+                93,
+                37,
+                0,
+                36,
+                0,
+                "number"
+            ],
+            [
+                94,
+                38,
+                0,
+                36,
+                1,
+                "number"
+            ],
+            [
+                95,
+                62,
+                0,
+                71,
+                2,
+                -1
+            ],
+            [
+                97,
+                75,
+                0,
+                74,
+                0,
+                "string"
+            ],
+            [
+                98,
+                74,
+                0,
+                16,
+                0,
+                "MODEL"
+            ],
+            [
+                99,
+                74,
+                1,
+                32,
+                1,
+                "CLIP"
+            ],
+            [
+                100,
+                74,
+                1,
+                34,
+                1,
+                "CLIP"
+            ],
+            [
+                101,
+                74,
+                2,
+                40,
+                1,
+                "VAE"
+            ]
+        ],
+        groups: [],
+        config: {},
+        extra: {},
+        version: 10
+    },
+    layout: {
+        root: "0",
+        allItems: {
+            0: {
+                dragItem: {
+                    type: "container",
+                    id: "0",
+                    attrs: {
+                        title: "Container",
+                        showTitle: false,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "1",
+                    "2"
+                ]
+            },
+            1: {
+                dragItem: {
+                    type: "container",
+                    id: "1",
+                    attrs: {
+                        title: "Container",
+                        showTitle: false,
+                        direction: "vertical",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "16",
+                    "33",
+                    "41",
+                    "52"
+                ],
+                parent: "0"
+            },
+            2: {
+                dragItem: {
+                    type: "container",
+                    id: "2",
+                    attrs: {
+                        title: "Container",
+                        showTitle: false,
+                        direction: "vertical",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "37",
+                    "35",
+                    "27"
+                ],
+                parent: "0"
+            },
+            10: {
+                dragItem: {
+                    type: "widget",
+                    id: "10",
+                    nodeId: 17,
+                    attrs: {
+                        title: "seed",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "48"
+            },
+            11: {
+                dragItem: {
+                    type: "widget",
+                    id: "11",
+                    nodeId: 18,
+                    attrs: {
+                        title: "steps",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "16"
+            },
+            12: {
+                dragItem: {
+                    type: "widget",
+                    id: "12",
+                    nodeId: 19,
+                    attrs: {
+                        title: "cfg",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "16"
+            },
+            13: {
+                dragItem: {
+                    type: "widget",
+                    id: "13",
+                    nodeId: 20,
+                    attrs: {
+                        title: "sampler_name",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "16"
+            },
+            14: {
+                dragItem: {
+                    type: "widget",
+                    id: "14",
+                    nodeId: 21,
+                    attrs: {
+                        title: "scheduler",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "16"
+            },
+            15: {
+                dragItem: {
+                    type: "widget",
+                    id: "15",
+                    nodeId: 22,
+                    attrs: {
+                        title: "denoise",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "16"
+            },
+            16: {
+                dragItem: {
+                    type: "container",
+                    id: "16",
+                    attrs: {
+                        title: "KSampler",
+                        showTitle: true,
+                        direction: "vertical",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "48",
+                    "11",
+                    "12",
+                    "13",
+                    "14",
+                    "15"
+                ],
+                parent: "1"
+            },
+            26: {
+                dragItem: {
+                    type: "widget",
+                    id: "26",
+                    nodeId: 33,
+                    attrs: {
+                        title: "text",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "27"
+            },
+            27: {
+                dragItem: {
+                    type: "container",
+                    id: "27",
+                    attrs: {
+                        title: "Conditioning",
+                        showTitle: true,
+                        direction: "vertical",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "26",
+                    "28"
+                ],
+                parent: "2"
+            },
+            28: {
+                dragItem: {
+                    type: "widget",
+                    id: "28",
+                    nodeId: 35,
+                    attrs: {
+                        title: "text",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "27"
+            },
+            30: {
+                dragItem: {
+                    type: "widget",
+                    id: "30",
+                    nodeId: 37,
+                    attrs: {
+                        title: "width",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "47"
+            },
+            31: {
+                dragItem: {
+                    type: "widget",
+                    id: "31",
+                    nodeId: 38,
+                    attrs: {
+                        title: "height",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "47"
+            },
+            32: {
+                dragItem: {
+                    type: "widget",
+                    id: "32",
+                    nodeId: 39,
+                    attrs: {
+                        title: "batch_size",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "33"
+            },
+            33: {
+                dragItem: {
+                    type: "container",
+                    id: "33",
+                    attrs: {
+                        title: "EmptyLatentImage",
+                        showTitle: true,
+                        direction: "vertical",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "32",
+                    "47"
+                ],
+                parent: "1"
+            },
+            34: {
+                dragItem: {
+                    type: "widget",
+                    id: "34",
+                    nodeId: 45,
+                    attrs: {
+                        title: "filename_prefix",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "35"
+            },
+            35: {
+                dragItem: {
+                    type: "container",
+                    id: "35",
+                    attrs: {
+                        title: "SaveImage",
+                        showTitle: true,
+                        direction: "vertical",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "34"
+                ],
+                parent: "2"
+            },
+            37: {
+                dragItem: {
+                    type: "widget",
+                    id: "37",
+                    nodeId: 47,
+                    attrs: {
+                        title: "Widget",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "2"
+            },
+            38: {
+                dragItem: {
+                    type: "widget",
+                    id: "38",
+                    nodeId: 48,
+                    attrs: {
+                        title: "copy",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "41"
+            },
+            39: {
+                dragItem: {
+                    type: "widget",
+                    id: "39",
+                    nodeId: 53,
+                    attrs: {
+                        title: "value",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "41"
+            },
+            40: {
+                dragItem: {
+                    type: "widget",
+                    id: "40",
+                    nodeId: 54,
+                    attrs: {
+                        title: "Widget",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "41"
+            },
+            41: {
+                dragItem: {
+                    type: "container",
+                    id: "41",
+                    attrs: {
+                        title: "Copy Test",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "39",
+                    "38",
+                    "40"
+                ],
+                parent: "1"
+            },
+            42: {
+                dragItem: {
+                    type: "widget",
+                    id: "42",
+                    nodeId: 57,
+                    attrs: {
+                        title: "action",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "48"
+            },
+            46: {
+                dragItem: {
+                    type: "widget",
+                    id: "46",
+                    nodeId: 62,
+                    attrs: {
+                        title: "trigger",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "47"
+            },
+            47: {
+                dragItem: {
+                    type: "container",
+                    id: "47",
+                    attrs: {
+                        title: "Size",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "30",
+                    "46",
+                    "31"
+                ],
+                parent: "33"
+            },
+            48: {
+                dragItem: {
+                    type: "container",
+                    id: "48",
+                    attrs: {
+                        title: "Seed",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "10",
+                    "42"
+                ],
+                parent: "16"
+            },
+            51: {
+                dragItem: {
+                    type: "widget",
+                    id: "51",
+                    nodeId: 75,
+                    attrs: {
+                        title: "ckpt_name",
+                        showTitle: true,
+                        direction: "horizontal",
+                        classes: ""
+                    }
+                },
+                children: [],
+                parent: "52"
+            },
+            52: {
+                dragItem: {
+                    type: "container",
+                    id: "52",
+                    attrs: {
+                        title: "CheckpointLoaderSimple",
+                        showTitle: true,
+                        direction: "vertical",
+                        classes: ""
+                    }
+                },
+                children: [
+                    "51"
+                ],
+                parent: "1"
+            }
+        },
+        currentId: 53
+    },
+    canvas: {
+        offset: [
+            0,
+            0
+        ],
+        scale: 1
+    }
+}
+
+const blankGraph: SerializedAppState = {
     createdBy: "ComfyBox",
     version: 1,
     workflow: {
@@ -17,5 +3311,4 @@ const defaultGraph: SerializedAppState = {
 }
 
 export default defaultGraph;
-
-// {"createdBy":"ComfyBox","version":1,"workflow":{"last_node_id":55,"last_link_id":54,"nodes":[{"id":17,"type":"ui/slider","pos":[77.09750000000287,195.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":0,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[16]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":0,"min":0,"max":18446744073709552000,"step":1,"precision":0},"widgets_values":["9507460842217379840.000"],"color":"#223","bgColor":"#335","comfyValue":9507460842217380000},{"id":18,"type":"ui/slider","pos":[77.09750000000287,215.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":1,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[17]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":20,"min":1,"max":10000,"step":1,"precision":0},"widgets_values":["20.000"],"color":"#223","bgColor":"#335","comfyValue":20},{"id":19,"type":"ui/slider","pos":[77.09750000000287,235.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":2,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[18]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":8,"min":0,"max":100,"step":0.5,"precision":0},"widgets_values":["8.000"],"color":"#223","bgColor":"#335","comfyValue":8},{"id":20,"type":"ui/combo","pos":[77.09750000000287,255.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":3,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[19]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Combo","properties":{"defaultValue":"euler","values":["euler","euler_ancestral","heun","dpm_2","dpm_2_ancestral","lms","dpm_fast","dpm_adaptive","dpmpp_2s_ancestral","dpmpp_sde","dpmpp_2m","ddim","uni_pc","uni_pc_bh2"]},"widgets_values":["euler"],"color":"#223","bgColor":"#335","comfyValue":"euler"},{"id":21,"type":"ui/combo","pos":[77.09750000000287,275.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":4,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[20]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Combo","properties":{"defaultValue":"karras","values":["karras","normal","simple","ddim_uniform"]},"widgets_values":["karras"],"color":"#223","bgColor":"#335","comfyValue":"karras"},{"id":22,"type":"ui/slider","pos":[77.09750000000287,355.9643000000003],"size":[210,78],"flags":{"collapsed":true},"order":5,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[21]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":1,"min":0,"max":1,"step":0.01,"precision":0},"widgets_values":["1.000"],"color":"#223","bgColor":"#335","comfyValue":1},{"id":31,"type":"ui/combo","pos":[-448.0424999999954,103.36430000000071],"size":[210,78],"flags":{"collapsed":true},"order":6,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[28]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Combo","properties":{"defaultValue":"AbyssOrangeMix2_nsfw.safetensors","values":["AbyssOrangeMix2_nsfw.safetensors"]},"widgets_values":["AbyssOrangeMix2_nsfw.safetensors"],"color":"#223","bgColor":"#335","comfyValue":"AbyssOrangeMix2_nsfw.safetensors"},{"id":33,"type":"ui/text","pos":[-347.6124999999959,309.06430000000114],"size":[210,78],"flags":{"collapsed":true},"order":7,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[30]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Text","properties":{"defaultValue":"","multiline":true},"widgets_values":["masterpiece, best quality, 1girl, dress"],"color":"#223","bgColor":"#335","comfyValue":"masterpiece, best quality, 1girl, dress"},{"id":35,"type":"ui/text","pos":[-346.40249999999617,399.8143000000014],"size":[210,78],"flags":{"collapsed":true},"order":8,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[31]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Text","properties":{"defaultValue":"","multiline":true},"widgets_values":["worst quality, bad quality, nsfw"],"color":"#223","bgColor":"#335","comfyValue":"worst quality, bad quality, nsfw"},{"id":37,"type":"ui/slider","pos":[-350.03249999999764,514.0383000000008],"size":[210,78],"flags":{"collapsed":true},"order":9,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[36]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":512,"min":64,"max":8192,"step":8,"precision":0},"widgets_values":["64.000"],"color":"#223","bgColor":"#335","comfyValue":64},{"id":38,"type":"ui/slider","pos":[-350.03249999999764,534.0383000000008],"size":[210,78],"flags":{"collapsed":true},"order":10,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[37]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":512,"min":64,"max":8192,"step":8,"precision":0},"widgets_values":["64.000"],"color":"#223","bgColor":"#335","comfyValue":64},{"id":39,"type":"ui/slider","pos":[-350.03249999999764,554.0383000000008],"size":[210,78],"flags":{"collapsed":true},"order":11,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[38]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":1,"min":1,"max":64,"step":1,"precision":0},"widgets_values":["4.000"],"color":"#223","bgColor":"#335","comfyValue":4},{"id":16,"type":"KSampler","pos":[242,156],"size":[241.79999999999998,206],"flags":{},"order":24,"mode":0,"inputs":[{"name":"model","type":"MODEL","link":29,"color_off":"orange","color_on":"orange"},{"name":"seed","type":"number","link":16,"config":{"min":0,"max":18446744073709552000,"step":1,"precision":0,"defaultValue":0},"serialize":true},{"name":"steps","type":"number","link":17,"config":{"min":1,"max":10000,"step":1,"precision":0,"defaultValue":20},"serialize":true},{"name":"cfg","type":"number","link":18,"config":{"min":0,"max":100,"step":0.5,"precision":0,"defaultValue":8},"serialize":true},{"name":"sampler_name","type":"string","link":19,"config":{"values":["euler","euler_ancestral","heun","dpm_2","dpm_2_ancestral","lms","dpm_fast","dpm_adaptive","dpmpp_2s_ancestral","dpmpp_sde","dpmpp_2m","ddim","uni_pc","uni_pc_bh2"],"defaultValue":"euler"},"serialize":true},{"name":"scheduler","type":"string","link":20,"config":{"values":["karras","normal","simple","ddim_uniform"],"defaultValue":"karras"},"serialize":true},{"name":"positive","type":"CONDITIONING","link":33,"color_off":"orange","color_on":"orange"},{"name":"negative","type":"CONDITIONING","link":32,"color_off":"orange","color_on":"orange"},{"name":"latent_image","type":"LATENT","link":39,"color_off":"orange","color_on":"orange"},{"name":"denoise","type":"number","link":21,"config":{"min":0,"max":1,"step":0.01,"precision":0,"defaultValue":1},"serialize":true}],"outputs":[{"name":"LATENT","type":"LATENT","links":[40],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"KSampler","properties":{},"color":"#432","bgColor":"#653"},{"id":40,"type":"VAEDecode","pos":[532.5875000000013,160.9183000000009],"size":[210,46],"flags":{},"order":25,"mode":0,"inputs":[{"name":"samples","type":"LATENT","link":40,"color_off":"orange","color_on":"orange"},{"name":"vae","type":"VAE","link":41,"color_off":"orange","color_on":"orange"}],"outputs":[{"name":"IMAGE","type":"IMAGE","links":[44],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"VAEDecode","properties":{},"color":"#432","bgColor":"#653"},{"id":45,"type":"ui/text","pos":[779.2900000000001,208.44999999999965],"size":[210,78],"flags":{"collapsed":true},"order":12,"mode":0,"inputs":[{"name":"value","type":"string","link":null}],"outputs":[{"name":"value","type":"string","links":[43]},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Text","properties":{"defaultValue":"ComfyUI","multiline":false},"widgets_values":["ComfyUI"],"color":"#223","bgColor":"#335","comfyValue":"ComfyUI"},{"id":32,"type":"CLIPTextEncode","pos":[-218,285],"size":[216.60000000000002,46],"flags":{},"order":20,"mode":0,"inputs":[{"name":"text","type":"string","link":30,"config":{"defaultValue":"","multiline":true},"serialize":true},{"name":"clip","type":"CLIP","link":34,"color_off":"orange","color_on":"orange"}],"outputs":[{"name":"CONDITIONING","type":"CONDITIONING","links":[33],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"CLIPTextEncode","properties":{},"color":"#432","bgColor":"#653"},{"id":34,"type":"CLIPTextEncode","pos":[-216,376],"size":[216.60000000000002,46],"flags":{},"order":21,"mode":0,"inputs":[{"name":"text","type":"string","link":31,"config":{"defaultValue":"","multiline":true},"serialize":true},{"name":"clip","type":"CLIP","link":35,"color_off":"orange","color_on":"orange"}],"outputs":[{"name":"CONDITIONING","type":"CONDITIONING","links":[32],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"CLIPTextEncode","properties":{},"color":"#432","bgColor":"#653"},{"id":30,"type":"CheckpointLoaderSimple","pos":[-318,79],"size":[277.2,66],"flags":{},"order":16,"mode":0,"inputs":[{"name":"ckpt_name","type":"string","link":28,"config":{"values":["AbyssOrangeMix2_nsfw.safetensors"],"defaultValue":"AbyssOrangeMix2_nsfw.safetensors"},"serialize":true}],"outputs":[{"name":"MODEL","type":"MODEL","links":[29],"color_off":"orange","color_on":"orange","slot_index":0},{"name":"CLIP","type":"CLIP","links":[34,35],"color_off":"orange","color_on":"orange","slot_index":1},{"name":"VAE","type":"VAE","links":[41],"color_off":"orange","color_on":"orange","slot_index":2}],"title":"CheckpointLoaderSimple","properties":{},"color":"#432","bgColor":"#653"},{"id":36,"type":"EmptyLatentImage","pos":[-220,490],"size":[216.60000000000002,66],"flags":{},"order":17,"mode":0,"inputs":[{"name":"width","type":"number","link":36,"config":{"min":64,"max":8192,"step":8,"precision":0,"defaultValue":512},"serialize":true},{"name":"height","type":"number","link":37,"config":{"min":64,"max":8192,"step":8,"precision":0,"defaultValue":512},"serialize":true},{"name":"batch_size","type":"number","link":38,"config":{"min":1,"max":64,"step":1,"precision":0,"defaultValue":1},"serialize":true}],"outputs":[{"name":"LATENT","type":"LATENT","links":[39],"color_off":"orange","color_on":"orange","slot_index":0}],"title":"EmptyLatentImage","properties":{},"color":"#432","bgColor":"#653"},{"id":47,"type":"ui/gallery","pos":[1284,165],"size":[210,58],"flags":{},"order":27,"mode":0,"inputs":[{"name":"images","type":"OUTPUT","link":46}],"outputs":[],"title":"UI.Gallery","properties":{"defaultValue":[]},"widgets_values":["Images: 0"],"color":"#223","bgColor":"#335","comfyValue":[]},{"id":44,"type":"SaveImage","pos":[888,164],"size":[315,78],"flags":{},"order":26,"mode":0,"inputs":[{"name":"images","type":"IMAGE","link":44,"color_off":"orange","color_on":"orange","slot_index":0},{"name":"filename_prefix","type":"string","link":43,"config":{"defaultValue":"ComfyUI","multiline":false},"serialize":true}],"outputs":[{"name":"output","type":"OUTPUT","links":[46],"slot_index":0}],"title":"SaveImage","properties":{},"color":"#432","bgColor":"#653"},{"id":49,"type":"events/log","pos":[771,22],"size":[140,26],"flags":{},"order":18,"mode":0,"inputs":[{"name":"event","type":-1,"link":47,"shape":1}],"outputs":[],"title":"Log Event","properties":{}},{"id":48,"type":"ui/button","pos":[372,12],"size":[210,78],"flags":{},"order":13,"mode":0,"inputs":[],"outputs":[{"name":"event","type":-2,"links":[47],"shape":1,"slot_index":0},{"name":"isClicked","type":"boolean","links":null,"slot_index":1}],"title":"UI.Button","properties":{"defaultValue":false,"message":"bang"},"widgets_values":["false"],"color":"#223","bgColor":"#335","comfyValue":false},{"id":52,"type":"basic/watch","pos":[1063.1426107321954,-118.99396962098862],"size":[140,26],"flags":{},"order":22,"mode":0,"inputs":[{"name":"value","type":0,"link":50,"label":"null","slot_index":0}],"outputs":[],"title":"Watch","properties":{"value":1}},{"id":54,"type":"ui/slider","pos":[1038,-226],"size":[210,78],"flags":{},"order":23,"mode":0,"inputs":[{"name":"value","type":"number","link":52}],"outputs":[{"name":"value","type":"number","links":null},{"name":"changed","type":-2,"links":null,"shape":1}],"title":"UI.Slider","properties":{"defaultValue":0,"min":0,"max":10,"step":1,"precision":1},"widgets_values":["2.000"],"color":"#223","bgColor":"#335","comfyValue":2},{"id":53,"type":"ui/slider","pos":[354.5182107321954,-135.09906962098862],"size":[210,78],"flags":{},"order":14,"mode":0,"inputs":[{"name":"value","type":"number","link":null}],"outputs":[{"name":"value","type":"number","links":[51],"slot_index":0},{"name":"changed","type":-2,"links":[],"shape":1,"slot_index":1}],"title":"UI.Slider","properties":{"defaultValue":0,"min":0,"max":10,"step":1,"precision":1},"widgets_values":["2.000"],"color":"#223","bgColor":"#335","comfyValue":2},{"id":50,"type":"actions/copy","pos":[729,-125],"size":[210,78],"flags":{},"order":19,"mode":0,"inputs":[{"name":"","type":"*","link":51},{"name":"copy","type":-1,"link":54,"shape":1}],"outputs":[{"name":"","type":"*","links":[50,52],"slot_index":0}],"title":"Comfy.CopyAction","properties":{"value":2}},{"id":55,"type":"actions/after_queued","pos":[382,-333],"size":[193.2,46],"flags":{},"order":15,"mode":0,"inputs":[],"outputs":[{"name":"afterQueued","type":-2,"links":[54],"shape":1,"slot_index":0},{"name":"prompt","type":"*","links":null}],"title":"Comfy.AfterQueuedAction","properties":{"prompt":null}}],"links":[[16,17,0,16,1,"number"],[17,18,0,16,2,"number"],[18,19,0,16,3,"number"],[19,20,0,16,4,"string"],[20,21,0,16,5,"string"],[21,22,0,16,9,"number"],[28,31,0,30,0,"string"],[29,30,0,16,0,"MODEL"],[30,33,0,32,0,"string"],[31,35,0,34,0,"string"],[32,34,0,16,7,"CONDITIONING"],[33,32,0,16,6,"CONDITIONING"],[34,30,1,32,1,"CLIP"],[35,30,1,34,1,"CLIP"],[36,37,0,36,0,"number"],[37,38,0,36,1,"number"],[38,39,0,36,2,"number"],[39,36,0,16,8,"LATENT"],[40,16,0,40,0,"LATENT"],[41,30,2,40,1,"VAE"],[43,45,0,44,1,"string"],[44,40,0,44,0,"IMAGE"],[46,44,0,47,0,"OUTPUT"],[47,48,0,49,0,-1],[50,50,0,52,0,"*"],[51,53,0,50,0,"*"],[52,50,0,54,0,"number"],[54,55,0,50,1,-1]],"groups":[],"config":{},"extra":{},"version":10},"layout":{"root":"0","allItems":{"0":{"dragItem":{"type":"container","id":"0","attrs":{"title":"Container","showTitle":false,"direction":"horizontal","classes":""}},"children":["1","2"]},"1":{"dragItem":{"type":"container","id":"1","attrs":{"title":"Container","showTitle":false,"direction":"vertical","classes":""}},"children":["16","33","25","41"],"parent":"0"},"2":{"dragItem":{"type":"container","id":"2","attrs":{"title":"Container","showTitle":false,"direction":"vertical","classes":""}},"children":["37","35","27"],"parent":"0"},"10":{"dragItem":{"type":"widget","id":"10","nodeId":17,"attrs":{"title":"seed","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"11":{"dragItem":{"type":"widget","id":"11","nodeId":18,"attrs":{"title":"steps","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"12":{"dragItem":{"type":"widget","id":"12","nodeId":19,"attrs":{"title":"cfg","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"13":{"dragItem":{"type":"widget","id":"13","nodeId":20,"attrs":{"title":"sampler_name","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"14":{"dragItem":{"type":"widget","id":"14","nodeId":21,"attrs":{"title":"scheduler","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"15":{"dragItem":{"type":"widget","id":"15","nodeId":22,"attrs":{"title":"denoise","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"16"},"16":{"dragItem":{"type":"container","id":"16","attrs":{"title":"KSampler","showTitle":true,"direction":"vertical","classes":""}},"children":["10","11","12","13","14","15"],"parent":"1"},"24":{"dragItem":{"type":"widget","id":"24","nodeId":31,"attrs":{"title":"ckpt_name","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"25"},"25":{"dragItem":{"type":"container","id":"25","attrs":{"title":"CheckpointLoaderSimple","showTitle":true,"direction":"vertical","classes":""}},"children":["24"],"parent":"1"},"26":{"dragItem":{"type":"widget","id":"26","nodeId":33,"attrs":{"title":"text","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"27"},"27":{"dragItem":{"type":"container","id":"27","attrs":{"title":"Conditioning","showTitle":true,"direction":"vertical","classes":""}},"children":["26","28"],"parent":"2"},"28":{"dragItem":{"type":"widget","id":"28","nodeId":35,"attrs":{"title":"text","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"27"},"30":{"dragItem":{"type":"widget","id":"30","nodeId":37,"attrs":{"title":"width","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"33"},"31":{"dragItem":{"type":"widget","id":"31","nodeId":38,"attrs":{"title":"height","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"33"},"32":{"dragItem":{"type":"widget","id":"32","nodeId":39,"attrs":{"title":"batch_size","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"33"},"33":{"dragItem":{"type":"container","id":"33","attrs":{"title":"EmptyLatentImage","showTitle":true,"direction":"vertical","classes":""}},"children":["30","31","32"],"parent":"1"},"34":{"dragItem":{"type":"widget","id":"34","nodeId":45,"attrs":{"title":"filename_prefix","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"35"},"35":{"dragItem":{"type":"container","id":"35","attrs":{"title":"SaveImage","showTitle":true,"direction":"vertical","classes":""}},"children":["34"],"parent":"2"},"37":{"dragItem":{"type":"widget","id":"37","nodeId":47,"attrs":{"title":"Widget","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"2"},"38":{"dragItem":{"type":"widget","id":"38","nodeId":48,"attrs":{"title":"copy","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"41"},"39":{"dragItem":{"type":"widget","id":"39","nodeId":53,"attrs":{"title":"copy","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"41"},"40":{"dragItem":{"type":"widget","id":"40","nodeId":54,"attrs":{"title":"Widget","showTitle":true,"direction":"horizontal","classes":""}},"children":[],"parent":"41"},"41":{"dragItem":{"type":"container","id":"41","attrs":{"title":"Copy Test","showTitle":true,"direction":"horizontal","classes":""}},"children":["39","38","40"],"parent":"1"}},"currentId":42},"canvas":{"offset":[340.9292892678049,426.94297316713084],"scale":0.6830134553650706}}
+export { blankGraph }
diff --git a/src/lib/nodes/ComfyActionNodes.ts b/src/lib/nodes/ComfyActionNodes.ts
index e7c7427..971c029 100644
--- a/src/lib/nodes/ComfyActionNodes.ts
+++ b/src/lib/nodes/ComfyActionNodes.ts
@@ -1,4 +1,4 @@
-import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, BuiltInSlotType, type ITextWidget } from "@litegraph-ts/core";
+import { LiteGraph, type ContextMenuItem, type LGraphNode, type Vector2, LConnectionKind, LLink, LGraphCanvas, type SlotType, TitleMode, type SlotLayout, BuiltInSlotType, type ITextWidget, type SerializedLGraphNode } from "@litegraph-ts/core";
 import ComfyGraphNode from "./ComfyGraphNode";
 import { Watch } from "@litegraph-ts/nodes-basic";
 import type { SerializedPrompt } from "$lib/components/ComfyApp";
@@ -33,6 +33,11 @@ export class ComfyAfterQueuedAction extends ComfyGraphNode {
         this.setProperty("value", p)
         this.triggerSlot(0, "bang")
     }
+
+    override onSerialize(o: SerializedLGraphNode) {
+        super.onSerialize(o)
+        o.properties = { prompt: null }
+    }
 }
 
 LiteGraph.registerNodeType({
diff --git a/src/lib/nodes/ComfyGraphNode.ts b/src/lib/nodes/ComfyGraphNode.ts
index be3d1d3..acc8c24 100644
--- a/src/lib/nodes/ComfyGraphNode.ts
+++ b/src/lib/nodes/ComfyGraphNode.ts
@@ -33,7 +33,8 @@ export default class ComfyGraphNode extends LGraphNode {
                 const ty = Object.values(LiteGraph.registered_node_types)
                     .find(v => v.class === widgetNode)
                 if (ty)
-                    (serInput as any).widgetNodeType = ty.type
+                    (serInput as any).widgetNodeType = ty.type;
+                (serInput as any).defaultWidgetNode = null
             }
         }
     }