From 573970eac6087c056f4c3278776d50e66cbaea15 Mon Sep 17 00:00:00 2001 From: space-nuko <24979496+space-nuko@users.noreply.github.com> Date: Wed, 3 May 2023 00:53:29 -0700 Subject: [PATCH] Bind widget values to special widget nodes --- src/AppMobile.svelte | 1 - src/lib/GraphSync.ts | 76 ++-- src/lib/components/ComfyApp.svelte | 6 - src/lib/components/ComfyApp.ts | 2 +- src/lib/components/ComfyUIPane.svelte | 1 - src/lib/components/WidgetContainer.svelte | 7 +- src/lib/defaultGraph.ts | 394 +-------------------- src/lib/nodes/ComfyWidgetNodes.ts | 12 +- src/lib/stores/layoutState.ts | 46 ++- src/lib/stores/nodeState.ts | 154 -------- src/lib/stores/uiState.ts | 3 +- src/lib/utils.ts | 21 -- src/lib/widgets/ComboWidget.svelte | 33 +- src/lib/widgets/ComfyGalleryWidget.svelte | 1 - src/lib/widgets/ComfyValueControlWidget.ts | 3 +- src/lib/widgets/ComfyWidget.ts | 2 - src/lib/widgets/TextWidget.svelte | 3 +- src/mobile/GenToolbar.svelte | 14 +- src/mobile/routes/home.svelte | 6 - src/mobile/routes/list-subworkflows.svelte | 1 - src/mobile/routes/subworkflow.svelte | 28 +- 21 files changed, 89 insertions(+), 725 deletions(-) delete mode 100644 src/lib/stores/nodeState.ts diff --git a/src/AppMobile.svelte b/src/AppMobile.svelte index 21f50df..36abdfd 100644 --- a/src/AppMobile.svelte +++ b/src/AppMobile.svelte @@ -4,7 +4,6 @@ import { Button } from "@gradio/button"; import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp"; import { Checkbox } from "@gradio/form" - import nodeState from "$lib/stores/nodeState"; import uiState from "$lib/stores/uiState"; import { ImageViewer } from "$lib/ImageViewer"; import { download } from "$lib/utils" diff --git a/src/lib/GraphSync.ts b/src/lib/GraphSync.ts index e941355..4b18344 100644 --- a/src/lib/GraphSync.ts +++ b/src/lib/GraphSync.ts @@ -1,18 +1,13 @@ -import type { LGraph } from "@litegraph-ts/core"; -import nodeState, { type WidgetUIState, type WidgetUIStateStore, type NodeStateStore, type NodeUIState, type NodeUIStateStore } from "./stores/nodeState"; +import type { LGraph, LGraphNode } from "@litegraph-ts/core"; import type ComfyApp from "./components/ComfyApp"; -import type { Unsubscriber } from "svelte/store"; +import type { Unsubscriber, Writable } from "svelte/store"; +import type { ComfyWidgetNode } from "./nodes"; type WidgetSubStore = { store: WidgetUIStateStore, unsubscribe: Unsubscriber } -type NodeSubStore = { - store: NodeUIStateStore, - unsubscribe: Unsubscriber -} - /* * Responsible for watching for and synchronizing state changes from the * frontend to the litegraph instance. @@ -29,68 +24,55 @@ type NodeSubStore = { */ export default class GraphSync { graph: LGraph; - private _unsubscribe: Unsubscriber; - private _finalizer: FinalizationRegistry; - // nodeId -> widgetSubStores[] - private stores: Record = {} + // nodeId -> widgetSubStore + private stores: Record = {} constructor(app: ComfyApp) { this.graph = app.lGraph; - this._unsubscribe = nodeState.subscribe(this.onAllNodeStateChanged.bind(this)); - this._finalizer = new FinalizationRegistry((id: number) => { - console.log(`${this} has been garbage collected`); - this._unsubscribe(); - }); + app.eventBus.on("nodeAdded", this.onNodeAdded.bind(this)); + app.eventBus.on("nodeRemoved", this.onNodeRemoved.bind(this)); } - private onAllNodeStateChanged(state: NodeStateStore) { + private onNodeAdded(node: LGraphNode) { // TODO assumes only a single graph's widget state. - for (let nodeId in state) { - state[nodeId].node.title = state[nodeId].name; - if (!this.stores[nodeId]) { - this.addStores(state[nodeId].widgetStates, nodeId); - } - } - - for (let nodeId in this.stores) { - if (!state[nodeId]) { - this.removeStores(nodeId); - } + if ("svelteComponentType" in node) { + this.addStore(node as ComfyWidgetNode); } this.graph.setDirtyCanvas(true, true); } - private addStores(widgetStates: WidgetUIState[], nodeId: string) { - if (this.stores[nodeId]) { - console.warn("Stores already exist!", nodeId, this.stores[nodeId]) + private onNodeRemoved(node: LGraphNode) { + if ("svelteComponentType" in node) { + this.removeStore(node as ComfyWidgetNode); } - this.stores[nodeId] = [] - - for (const wuis of widgetStates) { - const unsub = wuis.value.subscribe((v) => this.onWidgetStateChanged(wuis, v)) - this.stores[nodeId].push({ store: wuis.value, unsubscribe: unsub }); - } - - console.debug("NEWSTORES", this.stores[nodeId]) + this.graph.setDirtyCanvas(true, true); } - private removeStores(nodeId: string) { - console.debug("DELSTORES", this.stores[nodeId]) - for (const ss of this.stores[nodeId]) { - ss.unsubscribe(); + private addStore(node: ComfyWidgetNode) { + if (this.stores[node.id]) { + console.warn("[GraphSync] Stores already exist!", node.id, this.stores[node.id]) } - delete this.stores[nodeId] + + const unsub = node.value.subscribe((v) => this.onWidgetStateChanged(node, v)) + this.stores[node.id] = ({ store: node.value, unsubscribe: unsub }); + + console.debug("[GraphSync] NEWSTORE", this.stores[node.id]) + } + + private removeStore(node: ComfyWidgetNode) { + console.debug("[GraphSync] DELSTORE", this.stores[node.id]) + this.stores[node.id].unsubscribe() + delete this.stores[node.id] } /* * Fired when a single widget's value changes. */ - private onWidgetStateChanged(wuis: WidgetUIState, value: any) { - wuis.widget.value = value; + private onWidgetStateChanged(node: ComfyWidgetNode, value: any) { this.graph.setDirtyCanvas(true, true); } } diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte index 3ed254a..0a3a2cc 100644 --- a/src/lib/components/ComfyApp.svelte +++ b/src/lib/components/ComfyApp.svelte @@ -6,7 +6,6 @@ import ComfyUIPane from "./ComfyUIPane.svelte"; import ComfyApp, { type SerializedAppState } from "./ComfyApp"; import { Checkbox } from "@gradio/form" - import nodeState from "$lib/stores/nodeState"; import uiState from "$lib/stores/uiState"; import layoutState from "$lib/stores/layoutState"; import { ImageViewer } from "$lib/ImageViewer"; @@ -105,11 +104,6 @@ onMount(async () => { app = new ComfyApp(); - app.eventBus.on("nodeAdded", nodeState.nodeAdded); - app.eventBus.on("nodeRemoved", nodeState.nodeRemoved); - app.eventBus.on("configured", nodeState.configureFinished); - app.eventBus.on("cleared", nodeState.clear); - app.eventBus.on("nodeAdded", layoutState.nodeAdded); app.eventBus.on("nodeRemoved", layoutState.nodeRemoved); app.eventBus.on("configured", layoutState.configureFinished); diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts index 97bff8d..fcc0836 100644 --- a/src/lib/components/ComfyApp.ts +++ b/src/lib/components/ComfyApp.ts @@ -433,7 +433,7 @@ export default class ComfyApp { this.clean(); if (!graphData) { - // graphData = structuredClone(defaultGraph.workflow) + graphData = structuredClone(defaultGraph.workflow) } // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now diff --git a/src/lib/components/ComfyUIPane.svelte b/src/lib/components/ComfyUIPane.svelte index 6f6ce4c..8515cff 100644 --- a/src/lib/components/ComfyUIPane.svelte +++ b/src/lib/components/ComfyUIPane.svelte @@ -6,7 +6,6 @@ import ComfyApp from "./ComfyApp"; import type { SerializedPanes } from "./ComfyApp" import WidgetContainer from "./WidgetContainer.svelte"; - import nodeState from "$lib/stores/nodeState"; import layoutState, { type ContainerLayout, type DragItem } from "$lib/stores/layoutState"; import uiState from "$lib/stores/uiState"; diff --git a/src/lib/components/WidgetContainer.svelte b/src/lib/components/WidgetContainer.svelte index 67f542c..9556cdf 100644 --- a/src/lib/components/WidgetContainer.svelte +++ b/src/lib/components/WidgetContainer.svelte @@ -1,10 +1,9 @@
- {#if node !== null && option !== undefined} + {#if node !== null && nodeValue !== null}