neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Start serializing UI state

Browse Source
This commit is contained in:
space-nuko
2023-05-04 10:29:44 -05:00
parent fd417c6759
commit 93cf2ed98a
8 changed files with 294 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/ComfyGraphCanvas.ts
View File

@@ -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,

65
src/lib/components/ComfyApp.svelte
View File

@@ -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);

142
src/lib/components/ComfyApp.ts
View File

@@ -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

22
src/lib/components/ComfyUIPane.svelte
View File

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

76
src/lib/stores/layoutState.ts
View File

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

13
src/mobile/routes/home.svelte
View File

@@ -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);