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

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;

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))
  }