Move app serialize into ComfyApp class

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 () => {

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";