Make widget state changes reactive

Substate stores

src/lib/components/ComfyApp.svelte

@@ -33,9 +33,8 @@
  }
 
  function queuePrompt() {
-     const state = get(widgetState);
-     console.log("Queuing!", state);
-     app.queuePrompt(0, 1, state);
+     console.log("Queuing!");
+     app.queuePrompt(0, 1);
  }
 
  $: if (app) app.lCanvas.allow_dragnodes = !nodesLocked;
@@ -69,28 +68,10 @@
 
  function serializeAppState(): SerializedAppState {
      const graph = app.lGraph;
-     const frontendState = get(widgetState);
 
      const serializedGraph = graph.serialize()
      const serializedPaneOrder = uiPane.serialize()
 
-     // Override the saved graph widget state with the properties set in the
-     // frontend panels.
-     for (let i = 0; i < serializedGraph.nodes.length; i++) {
-         let serializedNode = serializedGraph.nodes[i];
-         let frontendWidgetStates = frontendState[serializedNode.id];
-         if (frontendWidgetStates && serializedNode.widgets_values) {
-             for (let j = 0; j < serializedNode.widgets_values.length; j++) {
-                 let frontendWidgetState = frontendWidgetStates[j];
-
-                 // Virtual widgets always come after real widgets in the current design
-                 if (frontendWidgetState && !frontendWidgetState.isVirtual) {
-                     serializedNode.widgets_values[j] = frontendWidgetState.value;
-                 }
-             }
-         }
-     }
-
      return {
          createdBy: "ComfyBox",
          version: 1,

src/lib/components/ComfyApp.ts

@@ -16,6 +16,7 @@ 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";
+import GraphSync from "$lib/GraphSync";
 
 LiteGraph.catch_exceptions = false;
 
@@ -70,6 +71,7 @@ export default class ComfyApp {
     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;
@@ -88,6 +90,7 @@ export default class ComfyApp {
         this.lGraph = new LGraph();
         this.lCanvas = new ComfyGraphCanvas(this, this.canvasEl, this.lGraph);
         this.canvasCtx = this.canvasEl.getContext("2d");
+        this.graphSync = new GraphSync(this);
 
         this.addGraphLifecycleHooks();
 
@@ -458,14 +461,12 @@ export default class ComfyApp {
      * Converts the current graph workflow for sending to the API
      * @returns The workflow and node links
      */
-    async graphToPrompt(frontendState: WidgetStateStore = {}) {
+    async graphToPrompt() {
         const workflow = this.lGraph.serialize();
 
         const output = {};
         // Process nodes in order of execution
         for (const node of this.lGraph.computeExecutionOrder<ComfyGraphNodeExecutable>(false, null)) {
-            const fromFrontend: WidgetUIState[] | null = frontendState[node.id];
-
             const n = workflow.nodes.find((n) => n.id === node.id);
 
             if (node.isVirtualNode || !node.comfyClass) {
@@ -491,9 +492,6 @@ export default class ComfyApp {
                     const widget = widgets[i];
                     if (!widget.options || widget.options.serialize !== false) {
                         let value = widget.serializeValue ? await widget.serializeValue(n, i) : widget.value;
-                        if (fromFrontend && !fromFrontend[i].isVirtual) {
-                            value = fromFrontend[i].value;
-                        }
                         inputs[widget.name] = value
                     }
                 }
@@ -540,7 +538,7 @@ export default class ComfyApp {
         return { workflow, output };
     }
 
-    async queuePrompt(num: number, batchCount: number = 1, frontendState: WidgetStateStore = {}) {
+    async queuePrompt(num: number, batchCount: number = 1) {
         this.queueItems.push({ num, batchCount });
 
         // Only have one action process the items so each one gets a unique seed correctly
@@ -555,7 +553,7 @@ export default class ComfyApp {
                 console.log(`Queue get! ${num} ${batchCount}`);
 
                 for (let i = 0; i < batchCount; i++) {
-                    const p = await this.graphToPrompt(frontendState);
+                    const p = await this.graphToPrompt();
 
                     try {
                         await this.api.queuePrompt(num, p);

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, { type WidgetUIState } from "$lib/stores/widgetState";
+ import widgetState from "$lib/stores/widgetState";
 	import type { DragItem } from "./ComfyUIPane";
 
  export let app: ComfyApp;

src/lib/components/LightboxModal.svelte

@@ -53,6 +53,7 @@
 
  #modalImage {
      overflow: hidden;
+     user-drag: none;
  }
 
  .modalControls {