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] 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) => 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 = {} + 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)) }