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

ComfyWorkflow -> ComfyBoxWorkflow

Browse Source
This commit is contained in:
space-nuko
2023-05-24 11:52:35 -05:00
parent 38ae728eef
commit b30ecd3166
17 changed files with 79 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/ComfyGraph.ts
View File

@@ -11,7 +11,7 @@ import type { ComfyComboNode, ComfyWidgetNode } from "./nodes/widgets";
import selectionState from "./stores/selectionState"; import selectionState from "./stores/selectionState";
import type { WritableLayoutStateStore } from "./stores/layoutStates"; import type { WritableLayoutStateStore } from "./stores/layoutStates";
import layoutStates from "./stores/layoutStates"; import layoutStates from "./stores/layoutStates";
import type { ComfyWorkflow, WorkflowInstID } from "./stores/workflowState"; import type { ComfyBoxWorkflow, WorkflowInstID } from "./stores/workflowState";
import workflowState from "./stores/workflowState"; import workflowState from "./stores/workflowState";
type ComfyGraphEvents = { type ComfyGraphEvents = {
@@ -30,7 +30,7 @@ export default class ComfyGraph extends LGraph {
workflowID: WorkflowInstID | null = null; workflowID: WorkflowInstID | null = null;
get workflow(): ComfyWorkflow | null { get workflow(): ComfyBoxWorkflow | null {
const workflowID = (this.getRootGraph() as ComfyGraph)?.workflowID; const workflowID = (this.getRootGraph() as ComfyGraph)?.workflowID;
if (workflowID == null) if (workflowID == null)
return null; return null;

6
src/lib/DanbooruTags.ts
View File

@@ -1,8 +1,8 @@
import { parse } from 'csv-parse/browser/esm/sync'; import { parse } from 'csv-parse/browser/esm/sync';
import { timeExecutionMs } from './utils'; import { timeExecutionMs } from './utils';
import { insertCompletionText, type Completion, type CompletionContext, type CompletionResult, type CompletionSource, type CompletionConfig, autocompletion } from '@codemirror/autocomplete'; import { insertCompletionText, type Completion, type CompletionContext, type CompletionResult, type CompletionSource, autocompletion } from '@codemirror/autocomplete';
import { syntaxTree } from '@codemirror/language'; import { syntaxTree } from '@codemirror/language';
import type { Extension, TransactionSpec } from '@codemirror/state'; import type { Extension } from '@codemirror/state';
import type { EditorView } from '@codemirror/view'; import type { EditorView } from '@codemirror/view';
import type { StyleSpec } from "style-mod" import type { StyleSpec } from "style-mod"
@@ -43,7 +43,7 @@ export const TAG_CATEGORY_COLORS: StyleSpec = Object.values(TAG_CATEGORY_DATA)
[`.cm-autocompletion-${d.name}`, { color: d.color + " !important" }], [`.cm-autocompletion-${d.name}`, { color: d.color + " !important" }],
] ]
}) })
.reduce((dict, el) => (dict[el[0]] = el[1], dict), {}) .reduce((dict: StyleSpec, el: [string, any]) => (dict[el[0]] = el[1], dict), {})
export type DanbooruTag = { export type DanbooruTag = {
text: string, text: string,

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

@@ -10,7 +10,7 @@
import Sidebar from "./Sidebar.svelte"; import Sidebar from "./Sidebar.svelte";
import SidebarItem from "./SidebarItem.svelte"; import SidebarItem from "./SidebarItem.svelte";
import notify from "$lib/notify"; import notify from "$lib/notify";
import ComfyWorkflowsView from "./ComfyWorkflowsView.svelte"; import ComfyBoxWorkflowsView from "./ComfyBoxWorkflowsView.svelte";
import GlobalModal from "./GlobalModal.svelte"; import GlobalModal from "./GlobalModal.svelte";
export let app: ComfyApp = undefined; export let app: ComfyApp = undefined;
@@ -60,7 +60,7 @@
<div id="container"> <div id="container">
<Sidebar selected="generate"> <Sidebar selected="generate">
<SidebarItem id="generate" name="Generate" icon={Image}> <SidebarItem id="generate" name="Generate" icon={Image}>
<ComfyWorkflowsView {app} {uiTheme} /> <ComfyBoxWorkflowsView {app} {uiTheme} />
</SidebarItem> </SidebarItem>
<SidebarItem id="settings" name="Settings" icon={Gear}> <SidebarItem id="settings" name="Settings" icon={Gear}>
</SidebarItem> </SidebarItem>

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

@@ -27,7 +27,7 @@ import modalState from "$lib/stores/modalState";
import queueState from "$lib/stores/queueState"; import queueState from "$lib/stores/queueState";
import selectionState from "$lib/stores/selectionState"; import selectionState from "$lib/stores/selectionState";
import uiState from "$lib/stores/uiState"; import uiState from "$lib/stores/uiState";
import workflowState, { ComfyWorkflow, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState"; import workflowState, { ComfyBoxWorkflow, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState";
import type { SerializedPromptOutput } from "$lib/utils"; import type { SerializedPromptOutput } from "$lib/utils";
import { basename, capitalize, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range } from "$lib/utils"; import { basename, capitalize, download, graphToGraphVis, jsonToJsObject, promptToGraphVis, range } from "$lib/utils";
import { tick } from "svelte"; import { tick } from "svelte";
@@ -55,7 +55,7 @@ export type OpenWorkflowOptions = {
type PromptQueueItem = { type PromptQueueItem = {
num: number, num: number,
batchCount: number batchCount: number
workflow: ComfyWorkflow workflow: ComfyBoxWorkflow
} }
export type A1111PromptAndInfo = { export type A1111PromptAndInfo = {
@@ -256,7 +256,7 @@ export default class ComfyApp {
this.lCanvas.draw(true, true); this.lCanvas.draw(true, true);
} }
serialize(workflow: ComfyWorkflow, canvas?: SerializedGraphCanvasState): SerializedAppState { serialize(workflow: ComfyBoxWorkflow, canvas?: SerializedGraphCanvasState): SerializedAppState {
const layoutState = layoutStates.getLayout(workflow.id); const layoutState = layoutStates.getLayout(workflow.id);
if (layoutState == null) if (layoutState == null)
throw new Error("Workflow has no layout!") throw new Error("Workflow has no layout!")
@@ -631,7 +631,7 @@ export default class ComfyApp {
refreshCombos: true, refreshCombos: true,
warnMissingNodeTypes: true warnMissingNodeTypes: true
} }
): Promise<ComfyWorkflow> { ): Promise<ComfyBoxWorkflow> {
if (data.version !== COMFYBOX_SERIAL_VERSION) { if (data.version !== COMFYBOX_SERIAL_VERSION) {
const mes = `Invalid ComfyBox saved data format: ${data.version} ` const mes = `Invalid ComfyBox saved data format: ${data.version} `
notify(mes, { type: "error" }) notify(mes, { type: "error" })
@@ -640,7 +640,7 @@ export default class ComfyApp {
this.clean(); this.clean();
let workflow: ComfyWorkflow; let workflow: ComfyBoxWorkflow;
try { try {
workflow = workflowState.openWorkflow(this.lCanvas, data, options.setActive); workflow = workflowState.openWorkflow(this.lCanvas, data, options.setActive);
} }
@@ -831,7 +831,7 @@ export default class ComfyApp {
* Converts the current graph workflow for sending to the API * Converts the current graph workflow for sending to the API
* @returns The workflow and node links * @returns The workflow and node links
*/ */
graphToPrompt(workflow: ComfyWorkflow, tag: string | null = null): SerializedPrompt { graphToPrompt(workflow: ComfyBoxWorkflow, tag: string | null = null): SerializedPrompt {
return this.promptSerializer.serialize(workflow.graph, tag) return this.promptSerializer.serialize(workflow.graph, tag)
} }
@@ -853,7 +853,7 @@ export default class ComfyApp {
tag = null; tag = null;
this.processingQueue = true; this.processingQueue = true;
let workflow: ComfyWorkflow; let workflow: ComfyBoxWorkflow;
try { try {
while (this.queueItems.length) { while (this.queueItems.length) {
@@ -1017,7 +1017,7 @@ export default class ComfyApp {
/** /**
* Refresh combo list on whole nodes * Refresh combo list on whole nodes
*/ */
async refreshComboInNodes(workflow?: ComfyWorkflow, defs?: Record<string, ComfyNodeDef>, flashUI: boolean = false) { async refreshComboInNodes(workflow?: ComfyBoxWorkflow, defs?: Record<string, ComfyNodeDef>, flashUI: boolean = false) {
workflow ||= workflowState.getActiveWorkflow(); workflow ||= workflowState.getActiveWorkflow();
if (workflow == null) { if (workflow == null) {
notify("No active workflow!", { type: "error" }) notify("No active workflow!", { type: "error" })

4
src/lib/components/ComfyWorkflowView.svelte → src/lib/components/ComfyBoxWorkflowView.svelte
View File

@@ -8,10 +8,10 @@
import Menu from './menu/Menu.svelte'; import Menu from './menu/Menu.svelte';
import MenuOption from './menu/MenuOption.svelte'; import MenuOption from './menu/MenuOption.svelte';
import MenuDivider from './menu/MenuDivider.svelte'; import MenuDivider from './menu/MenuDivider.svelte';
import type { ComfyWorkflow } from "$lib/stores/workflowState"; import type { ComfyBoxWorkflow } from "$lib/stores/workflowState";
export let app: ComfyApp; export let app: ComfyApp;
export let workflow: ComfyWorkflow; export let workflow: ComfyBoxWorkflow;
let layoutState: WritableLayoutStateStore | null; let layoutState: WritableLayoutStateStore | null;

10
src/lib/components/ComfyWorkflowsView.svelte → src/lib/components/ComfyBoxWorkflowsView.svelte
View File

@@ -3,7 +3,7 @@
import { PlusSquareDotted } from 'svelte-bootstrap-icons'; import { PlusSquareDotted } from 'svelte-bootstrap-icons';
import { Button } from "@gradio/button"; import { Button } from "@gradio/button";
import { BlockTitle } from "@gradio/atoms"; import { BlockTitle } from "@gradio/atoms";
import ComfyWorkflowView from "./ComfyWorkflowView.svelte"; import ComfyBoxWorkflowView from "./ComfyBoxWorkflowView.svelte";
import { Checkbox, TextBox } from "@gradio/form" import { Checkbox, TextBox } from "@gradio/form"
import ComfyQueue from "./ComfyQueue.svelte"; import ComfyQueue from "./ComfyQueue.svelte";
import ComfyUnlockUIButton from "./ComfyUnlockUIButton.svelte"; import ComfyUnlockUIButton from "./ComfyUnlockUIButton.svelte";
@@ -11,7 +11,7 @@
import { get, writable, type Writable } from "svelte/store"; import { get, writable, type Writable } from "svelte/store";
import ComfyProperties from "./ComfyProperties.svelte"; import ComfyProperties from "./ComfyProperties.svelte";
import uiState from "$lib/stores/uiState"; import uiState from "$lib/stores/uiState";
import workflowState, { ComfyWorkflow } from "$lib/stores/workflowState"; import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
import selectionState from "$lib/stores/selectionState"; import selectionState from "$lib/stores/selectionState";
import type ComfyApp from './ComfyApp'; import type ComfyApp from './ComfyApp';
import { onMount } from "svelte"; import { onMount } from "svelte";
@@ -23,7 +23,7 @@
export let app: ComfyApp; export let app: ComfyApp;
export let uiTheme: string = "gradio-dark" // TODO config export let uiTheme: string = "gradio-dark" // TODO config
let workflow: ComfyWorkflow | null = null; let workflow: ComfyBoxWorkflow | null = null;
let openedWorkflows = [] let openedWorkflows = []
let containerElem: HTMLDivElement; let containerElem: HTMLDivElement;
@@ -160,7 +160,7 @@
app.createNewWorkflow(); app.createNewWorkflow();
} }
function closeWorkflow(event: Event, workflow: ComfyWorkflow) { function closeWorkflow(event: Event, workflow: ComfyBoxWorkflow) {
event.preventDefault(); event.preventDefault();
event.stopImmediatePropagation() event.stopImmediatePropagation()
@@ -202,7 +202,7 @@
<Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}"> <Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
<Pane> <Pane>
{#if $workflowState.activeWorkflow != null} {#if $workflowState.activeWorkflow != null}
<ComfyWorkflowView {app} workflow={$workflowState.activeWorkflow} /> <ComfyBoxWorkflowView {app} workflow={$workflowState.activeWorkflow} />
{:else} {:else}
<span style:color="var(--body-text-color)">No workflow loaded</span> <span style:color="var(--body-text-color)">No workflow loaded</span>
{/if} {/if}

4
src/lib/components/ComfyProperties.svelte
View File

@@ -11,9 +11,9 @@
import ComfyNumberProperty from "./ComfyNumberProperty.svelte"; import ComfyNumberProperty from "./ComfyNumberProperty.svelte";
import ComfyComboProperty from "./ComfyComboProperty.svelte"; import ComfyComboProperty from "./ComfyComboProperty.svelte";
import type { ComfyWidgetNode } from "$lib/nodes/widgets"; import type { ComfyWidgetNode } from "$lib/nodes/widgets";
import type { ComfyWorkflow } from "$lib/stores/workflowState"; import type { ComfyBoxWorkflow } from "$lib/stores/workflowState";
export let workflow: ComfyWorkflow | null; export let workflow: ComfyBoxWorkflow | null;
let layoutState: WritableLayoutStateStore | null = null let layoutState: WritableLayoutStateStore | null = null

4
src/lib/components/PromptDisplay.svelte
View File

@@ -10,7 +10,7 @@
import type { Styles } from "@gradio/utils"; import type { Styles } from "@gradio/utils";
import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines } from "$lib/utils"; import { comfyFileToComfyBoxMetadata, comfyURLToComfyFile, countNewLines } from "$lib/utils";
import ReceiveOutputTargets from "./modal/ReceiveOutputTargets.svelte"; import ReceiveOutputTargets from "./modal/ReceiveOutputTargets.svelte";
import workflowState, { type ComfyWorkflow, type WorkflowReceiveOutputTargets } from "$lib/stores/workflowState"; import workflowState, { type ComfyBoxWorkflow, type WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
import type { ComfyReceiveOutputNode } from "$lib/nodes/actions"; import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
import type ComfyApp from "./ComfyApp"; import type ComfyApp from "./ComfyApp";
@@ -100,7 +100,7 @@
// ImageViewer.instance.showLightbox(e.detail) // ImageViewer.instance.showLightbox(e.detail)
} }
function sendOutput(workflow: ComfyWorkflow, targetNode: ComfyReceiveOutputNode) { function sendOutput(workflow: ComfyBoxWorkflow, targetNode: ComfyReceiveOutputNode) {
if (workflow == null || targetNode == null) if (workflow == null || targetNode == null)
return return

6
src/lib/components/modal/ReceiveOutputTargets.svelte
View File

@@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import type { ComfyReceiveOutputNode } from "$lib/nodes/actions"; import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
import type { ComfyWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState"; import type { ComfyBoxWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
import { Block, BlockTitle } from "@gradio/atoms"; import { Block, BlockTitle } from "@gradio/atoms";
import { Button } from "@gradio/button"; import { Button } from "@gradio/button";
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
select: { workflow: ComfyWorkflow, targetNode: ComfyReceiveOutputNode }; select: { workflow: ComfyBoxWorkflow, targetNode: ComfyReceiveOutputNode };
}>(); }>();
export let receiveTargets: WorkflowReceiveOutputTargets[] = []; export let receiveTargets: WorkflowReceiveOutputTargets[] = [];
function onSelected( workflow: ComfyWorkflow, targetNode: ComfyReceiveOutputNode ) { function onSelected( workflow: ComfyBoxWorkflow, targetNode: ComfyReceiveOutputNode ) {
dispatch("select", { dispatch("select", {
workflow, workflow,
targetNode targetNode

6
src/lib/components/modal/SendOutputModal.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
export type SendOutputModalResult = { export type SendOutputModalResult = {
workflow?: ComfyWorkflow, workflow?: ComfyBoxWorkflow,
targetNode?: ComfyReceiveOutputNode, targetNode?: ComfyReceiveOutputNode,
} }
</script> </script>
@@ -11,7 +11,7 @@
import type { SlotType } from "@litegraph-ts/core"; import type { SlotType } from "@litegraph-ts/core";
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { StaticImage } from "$lib/components/gradio/image"; import { StaticImage } from "$lib/components/gradio/image";
import type { ComfyWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState"; import type { ComfyBoxWorkflow, WorkflowReceiveOutputTargets } from "$lib/stores/workflowState";
import { comfyBoxImageToComfyURL } from "$lib/utils"; import { comfyBoxImageToComfyURL } from "$lib/utils";
import { Button } from "@gradio/button"; import { Button } from "@gradio/button";
import type { ComfyReceiveOutputNode } from "$lib/nodes/actions"; import type { ComfyReceiveOutputNode } from "$lib/nodes/actions";
@@ -29,7 +29,7 @@
images = [comfyBoxImageToComfyURL(value)]; images = [comfyBoxImageToComfyURL(value)];
} }
function sendOutput(workflow: ComfyWorkflow, targetNode: ComfyReceiveOutputNode) { function sendOutput(workflow: ComfyBoxWorkflow, targetNode: ComfyReceiveOutputNode) {
const result: SendOutputModalResult = { const result: SendOutputModalResult = {
workflow, workflow,
targetNode targetNode

6
src/lib/convertVanillaWorkflow.ts
View File

@@ -1,7 +1,7 @@
import { LGraph, type INodeInputSlot, type SerializedLGraph, type LinkID, type UUID, type NodeID, LiteGraph, BuiltInSlotType, type SerializedLGraphNode, type Vector2, BuiltInSlotShape, type INodeOutputSlot, type SlotType } from "@litegraph-ts/core"; import { LGraph, type INodeInputSlot, type SerializedLGraph, type LinkID, type UUID, type NodeID, LiteGraph, BuiltInSlotType, type SerializedLGraphNode, type Vector2, BuiltInSlotShape, type INodeOutputSlot, type SlotType } from "@litegraph-ts/core";
import type { SerializedAppState } from "./components/ComfyApp"; import type { SerializedAppState } from "./components/ComfyApp";
import layoutStates, { defaultWorkflowAttributes, type ContainerLayout, type DragItemID, type SerializedDragEntry, type SerializedLayoutState, type WritableLayoutStateStore } from "./stores/layoutStates"; import layoutStates, { defaultWorkflowAttributes, type ContainerLayout, type DragItemID, type SerializedDragEntry, type SerializedLayoutState, type WritableLayoutStateStore } from "./stores/layoutStates";
import { ComfyWorkflow, type WorkflowAttributes } from "./stores/workflowState"; import { ComfyBoxWorkflow, type WorkflowAttributes } from "./stores/workflowState";
import type { SerializedGraphCanvasState } from "./ComfyGraphCanvas"; import type { SerializedGraphCanvasState } from "./ComfyGraphCanvas";
import ComfyApp from "./components/ComfyApp"; import ComfyApp from "./components/ComfyApp";
import { iterateNodeDefInputs, type ComfyNodeDefInputType, type ComfyNodeDefInputOptions } from "./ComfyNodeDef"; import { iterateNodeDefInputs, type ComfyNodeDefInputType, type ComfyNodeDefInputOptions } from "./ComfyNodeDef";
@@ -346,8 +346,8 @@ function removeSerializedNode(vanillaWorkflow: SerializedLGraph, node: Serialize
* Converts a workflow saved with vanilla ComfyUI into a ComfyBox workflow, * Converts a workflow saved with vanilla ComfyUI into a ComfyBox workflow,
* adding UI nodes for each widget. * adding UI nodes for each widget.
*/ */
export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWorkflow, attrs: WorkflowAttributes): [ComfyWorkflow, WritableLayoutStateStore] { export default function convertVanillaWorkflow(vanillaWorkflow: ComfyVanillaWorkflow, attrs: WorkflowAttributes): [ComfyBoxWorkflow, WritableLayoutStateStore] {
const [comfyBoxWorkflow, layoutState] = ComfyWorkflow.create(); const [comfyBoxWorkflow, layoutState] = ComfyBoxWorkflow.create();
const { root, left, right } = layoutState.initDefaultLayout(); const { root, left, right } = layoutState.initDefaultLayout();
// TODO will need to convert IDs to UUIDs // TODO will need to convert IDs to UUIDs

4
src/lib/nodes/ComfyGraphNode.ts
View File

@@ -10,7 +10,7 @@ import { get } from "svelte/store";
import configState from "$lib/stores/configState"; import configState from "$lib/stores/configState";
import type { WidgetLayout, WritableLayoutStateStore } from "$lib/stores/layoutStates"; import type { WidgetLayout, WritableLayoutStateStore } from "$lib/stores/layoutStates";
import layoutStates from "$lib/stores/layoutStates"; import layoutStates from "$lib/stores/layoutStates";
import workflowStateStore, { ComfyWorkflow } from "$lib/stores/workflowState"; import workflowStateStore, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
export type DefaultWidgetSpec = { export type DefaultWidgetSpec = {
defaultWidgetNode: new (name?: string) => ComfyWidgetNode, defaultWidgetNode: new (name?: string) => ComfyWidgetNode,
@@ -111,7 +111,7 @@ export default class ComfyGraphNode extends LGraphNode {
return layoutStates.getDragItemByNode(this); return layoutStates.getDragItemByNode(this);
} }
get workflow(): ComfyWorkflow | null { get workflow(): ComfyBoxWorkflow | null {
return workflowStateStore.getWorkflowByNode(this); return workflowStateStore.getWorkflowByNode(this);
} }

12
src/lib/stores/layoutStates.ts
View File

@@ -7,7 +7,7 @@ import type { ComfyNodeID } from '$lib/api';
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import type { ComfyWidgetNode } from '$lib/nodes/widgets'; import type { ComfyWidgetNode } from '$lib/nodes/widgets';
import type ComfyGraph from '$lib/ComfyGraph'; import type ComfyGraph from '$lib/ComfyGraph';
import type { ComfyWorkflow, WorkflowAttributes, WorkflowInstID } from './workflowState'; import type { ComfyBoxWorkflow, WorkflowAttributes, WorkflowInstID } from './workflowState';
import workflowState from './workflowState'; import workflowState from './workflowState';
export function isComfyWidgetNode(node: LGraphNode): node is ComfyWidgetNode { export function isComfyWidgetNode(node: LGraphNode): node is ComfyWidgetNode {
@@ -716,7 +716,7 @@ export type DefaultLayout = {
export type DragItemID = UUID; export type DragItemID = UUID;
type LayoutStateOps = { type LayoutStateOps = {
workflow: ComfyWorkflow | null, workflow: ComfyBoxWorkflow | null,
addContainer: (parent: ContainerLayout | null, attrs?: Partial<Attributes>, index?: number) => ContainerLayout, addContainer: (parent: ContainerLayout | null, attrs?: Partial<Attributes>, index?: number) => ContainerLayout,
addWidget: (parent: ContainerLayout, node: ComfyWidgetNode, attrs?: Partial<Attributes>, index?: number) => WidgetLayout, addWidget: (parent: ContainerLayout, node: ComfyWidgetNode, attrs?: Partial<Attributes>, index?: number) => WidgetLayout,
@@ -758,7 +758,7 @@ export type SerializedDragItem = {
export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps; export type WritableLayoutStateStore = Writable<LayoutState> & LayoutStateOps;
function createRaw(workflow: ComfyWorkflow | null = null): WritableLayoutStateStore { function createRaw(workflow: ComfyBoxWorkflow | null = null): WritableLayoutStateStore {
const store: Writable<LayoutState> = writable({ const store: Writable<LayoutState> = writable({
root: null, root: null,
allItems: {}, allItems: {},
@@ -1299,7 +1299,7 @@ function createRaw(workflow: ComfyWorkflow | null = null): WritableLayoutStateSt
return layoutStateStore return layoutStateStore
} }
function create(workflow: ComfyWorkflow): WritableLayoutStateStore { function create(workflow: ComfyBoxWorkflow): WritableLayoutStateStore {
if (get(layoutStates).all[workflow.id] != null) { if (get(layoutStates).all[workflow.id] != null) {
throw new Error(`Layout state already created! ${id}`) throw new Error(`Layout state already created! ${id}`)
} }
@@ -1369,8 +1369,8 @@ export type LayoutStateStores = {
} }
export type LayoutStateStoresOps = { export type LayoutStateStoresOps = {
create: (workflow: ComfyWorkflow) => WritableLayoutStateStore, create: (workflow: ComfyBoxWorkflow) => WritableLayoutStateStore,
createRaw: (workflow?: ComfyWorkflow | null) => WritableLayoutStateStore, createRaw: (workflow?: ComfyBoxWorkflow | null) => WritableLayoutStateStore,
remove: (workflowID: WorkflowInstID) => void, remove: (workflowID: WorkflowInstID) => void,
getLayout: (workflowID: WorkflowInstID) => WritableLayoutStateStore | null, getLayout: (workflowID: WorkflowInstID) => WritableLayoutStateStore | null,
getLayoutByGraph: (graph: LGraph) => WritableLayoutStateStore | null, getLayoutByGraph: (graph: LGraph) => WritableLayoutStateStore | null,

54
src/lib/stores/workflowState.ts
View File

@@ -56,7 +56,7 @@ export type WorkflowAttributes = {
queuePromptButtonRunWorkflow: boolean, queuePromptButtonRunWorkflow: boolean,
} }
export class ComfyWorkflow { export class ComfyBoxWorkflow {
/* /*
* Used for uniquely identifying the instance of the opened workflow in the frontend. * Used for uniquely identifying the instance of the opened workflow in the frontend.
*/ */
@@ -176,8 +176,8 @@ export class ComfyWorkflow {
* will not. If you change your mind later be sure to call * will not. If you change your mind later be sure to call
* layoutStates.remove(workflow.id)! * layoutStates.remove(workflow.id)!
*/ */
static create(title: string = "New Workflow"): [ComfyWorkflow, WritableLayoutStateStore] { static create(title: string = "New Workflow"): [ComfyBoxWorkflow, WritableLayoutStateStore] {
const workflow = new ComfyWorkflow(title); const workflow = new ComfyBoxWorkflow(title);
const layoutState = layoutStates.create(workflow); const layoutState = layoutStates.create(workflow);
return [workflow, layoutState] return [workflow, layoutState]
} }
@@ -227,29 +227,29 @@ export class ComfyWorkflow {
} }
export type WorkflowState = { export type WorkflowState = {
openedWorkflows: ComfyWorkflow[], openedWorkflows: ComfyBoxWorkflow[],
openedWorkflowsByID: Record<WorkflowInstID, ComfyWorkflow>, openedWorkflowsByID: Record<WorkflowInstID, ComfyBoxWorkflow>,
activeWorkflowID: WorkflowInstID | null, activeWorkflowID: WorkflowInstID | null,
activeWorkflow: ComfyWorkflow | null, activeWorkflow: ComfyBoxWorkflow | null,
} }
export type WorkflowReceiveOutputTargets = { export type WorkflowReceiveOutputTargets = {
workflow: ComfyWorkflow, workflow: ComfyBoxWorkflow,
targetNodes: ComfyReceiveOutputNode[] targetNodes: ComfyReceiveOutputNode[]
} }
type WorkflowStateOps = { type WorkflowStateOps = {
getWorkflow: (id: WorkflowInstID) => ComfyWorkflow | null getWorkflow: (id: WorkflowInstID) => ComfyBoxWorkflow | null
getWorkflowByGraph: (graph: LGraph) => ComfyWorkflow | null getWorkflowByGraph: (graph: LGraph) => ComfyBoxWorkflow | null
getWorkflowByNode: (node: LGraphNode) => ComfyWorkflow | null getWorkflowByNode: (node: LGraphNode) => ComfyBoxWorkflow | null
getWorkflowByNodeID: (id: NodeID) => ComfyWorkflow | null getWorkflowByNodeID: (id: NodeID) => ComfyBoxWorkflow | null
getActiveWorkflow: () => ComfyWorkflow | null getActiveWorkflow: () => ComfyBoxWorkflow | null
createNewWorkflow: (canvas: ComfyGraphCanvas, title?: string, setActive?: boolean) => ComfyWorkflow, createNewWorkflow: (canvas: ComfyGraphCanvas, title?: string, setActive?: boolean) => ComfyBoxWorkflow,
openWorkflow: (canvas: ComfyGraphCanvas, data: SerializedAppState, setActive?: boolean) => ComfyWorkflow, openWorkflow: (canvas: ComfyGraphCanvas, data: SerializedAppState, setActive?: boolean) => ComfyBoxWorkflow,
addWorkflow: (canvas: ComfyGraphCanvas, data: ComfyWorkflow, setActive?: boolean) => void, addWorkflow: (canvas: ComfyGraphCanvas, data: ComfyBoxWorkflow, setActive?: boolean) => void,
closeWorkflow: (canvas: ComfyGraphCanvas, index: number) => void, closeWorkflow: (canvas: ComfyGraphCanvas, index: number) => void,
closeAllWorkflows: (canvas: ComfyGraphCanvas) => void, closeAllWorkflows: (canvas: ComfyGraphCanvas) => void,
setActiveWorkflow: (canvas: ComfyGraphCanvas, index: number | WorkflowInstID) => ComfyWorkflow | null, setActiveWorkflow: (canvas: ComfyGraphCanvas, index: number | WorkflowInstID) => ComfyBoxWorkflow | null,
findReceiveOutputTargets: (type: SlotType | SlotType[]) => WorkflowReceiveOutputTargets[] findReceiveOutputTargets: (type: SlotType | SlotType[]) => WorkflowReceiveOutputTargets[]
} }
@@ -262,36 +262,36 @@ const store: Writable<WorkflowState> = writable(
activeWorkflow: null activeWorkflow: null
}) })
function getWorkflow(id: WorkflowInstID): ComfyWorkflow | null { function getWorkflow(id: WorkflowInstID): ComfyBoxWorkflow | null {
return get(store).openedWorkflowsByID[id]; return get(store).openedWorkflowsByID[id];
} }
function getWorkflowByGraph(graph: LGraph): ComfyWorkflow | null { function getWorkflowByGraph(graph: LGraph): ComfyBoxWorkflow | null {
const workflowID = (graph.getRootGraph() as ComfyGraph)?.workflowID; const workflowID = (graph.getRootGraph() as ComfyGraph)?.workflowID;
if (workflowID == null) if (workflowID == null)
return null; return null;
return getWorkflow(workflowID); return getWorkflow(workflowID);
} }
function getWorkflowByNode(node: LGraphNode): ComfyWorkflow | null { function getWorkflowByNode(node: LGraphNode): ComfyBoxWorkflow | null {
return getWorkflowByGraph(node.graph); return getWorkflowByGraph(node.graph);
} }
function getWorkflowByNodeID(id: NodeID): ComfyWorkflow | null { function getWorkflowByNodeID(id: NodeID): ComfyBoxWorkflow | null {
return Object.values(get(store).openedWorkflows).find(w => { return Object.values(get(store).openedWorkflows).find(w => {
return w.graph.getNodeByIdRecursive(id) != null return w.graph.getNodeByIdRecursive(id) != null
}) })
} }
function getActiveWorkflow(): ComfyWorkflow | null { function getActiveWorkflow(): ComfyBoxWorkflow | null {
const state = get(store); const state = get(store);
if (state.activeWorkflowID == null) if (state.activeWorkflowID == null)
return null; return null;
return state.openedWorkflowsByID[state.activeWorkflowID]; return state.openedWorkflowsByID[state.activeWorkflowID];
} }
function createNewWorkflow(canvas: ComfyGraphCanvas, title: string = "New Workflow", setActive: boolean = false): ComfyWorkflow { function createNewWorkflow(canvas: ComfyGraphCanvas, title: string = "New Workflow", setActive: boolean = false): ComfyBoxWorkflow {
const workflow = new ComfyWorkflow(title); const workflow = new ComfyBoxWorkflow(title);
const layoutState = layoutStates.create(workflow); const layoutState = layoutStates.create(workflow);
layoutState.initDefaultLayout(); layoutState.initDefaultLayout();
@@ -307,8 +307,8 @@ function createNewWorkflow(canvas: ComfyGraphCanvas, title: string = "New Workfl
return workflow; return workflow;
} }
function openWorkflow(canvas: ComfyGraphCanvas, data: SerializedAppState, setActive: boolean = true): ComfyWorkflow { function openWorkflow(canvas: ComfyGraphCanvas, data: SerializedAppState, setActive: boolean = true): ComfyBoxWorkflow {
const [workflow, layoutState] = ComfyWorkflow.create("Workflow") const [workflow, layoutState] = ComfyBoxWorkflow.create("Workflow")
workflow.deserialize(layoutState, { graph: data.workflow, layout: data.layout, attrs: data.attrs }) workflow.deserialize(layoutState, { graph: data.workflow, layout: data.layout, attrs: data.attrs })
addWorkflow(canvas, workflow, setActive); addWorkflow(canvas, workflow, setActive);
@@ -316,7 +316,7 @@ function openWorkflow(canvas: ComfyGraphCanvas, data: SerializedAppState, setAct
return workflow; return workflow;
} }
function addWorkflow(canvas: ComfyGraphCanvas, workflow: ComfyWorkflow, setActive: boolean = true) { function addWorkflow(canvas: ComfyGraphCanvas, workflow: ComfyBoxWorkflow, setActive: boolean = true) {
const state = get(store); const state = get(store);
state.openedWorkflows.push(workflow); state.openedWorkflows.push(workflow);
state.openedWorkflowsByID[workflow.id] = workflow; state.openedWorkflowsByID[workflow.id] = workflow;
@@ -354,7 +354,7 @@ function closeAllWorkflows(canvas: ComfyGraphCanvas) {
closeWorkflow(canvas, 0) closeWorkflow(canvas, 0)
} }
function setActiveWorkflow(canvas: ComfyGraphCanvas, index: number | WorkflowInstID): ComfyWorkflow | null { function setActiveWorkflow(canvas: ComfyGraphCanvas, index: number | WorkflowInstID): ComfyBoxWorkflow | null {
const state = get(store); const state = get(store);
if (state.openedWorkflows.length === 0) { if (state.openedWorkflows.length === 0) {

4
src/mobile/GenToolbar.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp"; import ComfyApp, { type SerializedAppState } from "$lib/components/ComfyApp";
import queueState from "$lib/stores/queueState"; import queueState from "$lib/stores/queueState";
import workflowState, { ComfyWorkflow } from "$lib/stores/workflowState"; import workflowState, { ComfyBoxWorkflow } from "$lib/stores/workflowState";
import { getNodeInfo } from "$lib/utils" import { getNodeInfo } from "$lib/utils"
import { Link, Toolbar } from "framework7-svelte" import { Link, Toolbar } from "framework7-svelte"
@@ -14,7 +14,7 @@
export let app: ComfyApp = undefined; export let app: ComfyApp = undefined;
let layoutState: WritableLayoutStateStore = null; let layoutState: WritableLayoutStateStore = null;
let fileInput: HTMLInputElement = undefined; let fileInput: HTMLInputElement = undefined;
let workflow: ComfyWorkflow | null = null; let workflow: ComfyBoxWorkflow | null = null;
$: workflow = $workflowState.activeWorkflow; $: workflow = $workflowState.activeWorkflow;

4
src/mobile/routes/subworkflow.svelte
View File

@@ -4,13 +4,13 @@
import type ComfyApp from "$lib/components/ComfyApp"; import type ComfyApp from "$lib/components/ComfyApp";
import { writable, type Writable } from "svelte/store"; import { writable, type Writable } from "svelte/store";
import type { WritableLayoutStateStore } from "$lib/stores/layoutStates"; import type { WritableLayoutStateStore } from "$lib/stores/layoutStates";
import workflowState, { type ComfyWorkflow } from "$lib/stores/workflowState"; import workflowState, { type ComfyBoxWorkflow } from "$lib/stores/workflowState";
export let subworkflowID: number = -1; export let subworkflowID: number = -1;
export let app: ComfyApp export let app: ComfyApp
// TODO move // TODO move
let workflow: ComfyWorkflow | null = null let workflow: ComfyBoxWorkflow | null = null
let layoutState: WritableLayoutStateStore | null = null; let layoutState: WritableLayoutStateStore | null = null;
$: workflow = $workflowState.activeWorkflow; $: workflow = $workflowState.activeWorkflow;

10
src/tests/ComfyGraphTests.ts
View File

@@ -10,11 +10,11 @@ import { graphToGraphVis } from "$lib/utils";
import { ComfyNumberNode } from "$lib/nodes/widgets"; import { ComfyNumberNode } from "$lib/nodes/widgets";
import { get } from "svelte/store"; import { get } from "svelte/store";
import layoutStates from "$lib/stores/layoutStates"; import layoutStates from "$lib/stores/layoutStates";
import { ComfyWorkflow } from "$lib/stores/workflowState"; import { ComfyBoxWorkflow } from "$lib/stores/workflowState";
export default class ComfyGraphTests extends UnitTest { export default class ComfyGraphTests extends UnitTest {
test__onNodeAdded__updatesLayoutState() { test__onNodeAdded__updatesLayoutState() {
const [{ graph }, layoutState] = ComfyWorkflow.create() const [{ graph }, layoutState] = ComfyBoxWorkflow.create()
layoutState.initDefaultLayout() // adds 3 containers layoutState.initDefaultLayout() // adds 3 containers
const state = get(layoutState) const state = get(layoutState)
@@ -39,7 +39,7 @@ export default class ComfyGraphTests extends UnitTest {
} }
test__onNodeAdded__handlesNodesAddedInSubgraphs() { test__onNodeAdded__handlesNodesAddedInSubgraphs() {
const [{ graph }, layoutState] = ComfyWorkflow.create() const [{ graph }, layoutState] = ComfyBoxWorkflow.create()
layoutState.initDefaultLayout() layoutState.initDefaultLayout()
const subgraph = LiteGraph.createNode(Subgraph); const subgraph = LiteGraph.createNode(Subgraph);
@@ -58,7 +58,7 @@ export default class ComfyGraphTests extends UnitTest {
} }
test__onNodeAdded__handlesSubgraphsWithNodes() { test__onNodeAdded__handlesSubgraphsWithNodes() {
const [{ graph }, layoutState] = ComfyWorkflow.create() const [{ graph }, layoutState] = ComfyBoxWorkflow.create()
layoutState.initDefaultLayout() layoutState.initDefaultLayout()
const state = get(layoutState) const state = get(layoutState)
@@ -76,7 +76,7 @@ export default class ComfyGraphTests extends UnitTest {
} }
test__onNodeRemoved__updatesLayoutState() { test__onNodeRemoved__updatesLayoutState() {
const [{ graph }, layoutState] = ComfyWorkflow.create() const [{ graph }, layoutState] = ComfyBoxWorkflow.create()
layoutState.initDefaultLayout() layoutState.initDefaultLayout()
const widget = LiteGraph.createNode(ComfyNumberNode); const widget = LiteGraph.createNode(ComfyNumberNode);