Fix props pane

2023-05-20 23:13:31 -05:00
parent ee97bd43bc
commit 3aad259869
5 changed files with 261 additions and 171 deletions
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -42,7 +42,7 @@ import type { ComfyBoxStdPrompt } from "$lib/ComfyBoxStdPrompt";
 import ComfyBoxStdPromptSerializer from "$lib/ComfyBoxStdPromptSerializer";
 import selectionState from "$lib/stores/selectionState";
 import layoutStates from "$lib/stores/layoutStates";
-import { ComfyWorkflow, type WorkflowAttributes } from "$lib/stores/workflowState";
+import { ComfyWorkflow, type WorkflowAttributes, type WorkflowInstID } from "$lib/stores/workflowState";
 import workflowState from "$lib/stores/workflowState";

 export const COMFYBOX_SERIAL_VERSION = 1;
@@ -181,12 +181,13 @@ export default class ComfyApp {
        this.lCanvas.allow_interaction = uiUnlocked;

        // await this.#invokeExtensionsAsync("init");
-        await this.registerNodes();
+        const defs = await this.api.getNodeDefs();
+        await this.registerNodes(defs);

        // Load previous workflow
        let restored = false;
        try {
-            restored = await this.loadStateFromLocalStorage();
+            restored = await this.loadStateFromLocalStorage(defs);
        } catch (err) {
            console.error("Error loading previous workflow", err);
            notify(`Error loading previous workflow:\n${err}`, { type: "error", timeout: null })
@@ -194,7 +195,7 @@ export default class ComfyApp {

        // We failed to restore a workflow so load the default
        if (!restored) {
-            await this.initDefaultWorkflow();
+            await this.initDefaultWorkflow(defs);
        }

        // Save current workflow automatically
@@ -249,9 +250,11 @@ export default class ComfyApp {
    saveStateToLocalStorage() {
        try {
            uiState.update(s => { s.isSavingToLocalStorage = true; return s; })
-            const workflows = get(workflowState).openedWorkflows
+            const state = get(workflowState)
+            const workflows = state.openedWorkflows
            const savedWorkflows = workflows.map(w => this.serialize(w));
-            const json = JSON.stringify(savedWorkflows);
+            const activeWorkflowIndex = workflows.findIndex(w => state.activeWorkflowID === w.id);
+            const json = JSON.stringify({ workflows: savedWorkflows, activeWorkflowIndex });
            localStorage.setItem("workflows", json)
            for (const workflow of workflows)
                workflow.isModified = false;
@@ -266,24 +269,33 @@ export default class ComfyApp {
        }
    }

-    async loadStateFromLocalStorage(): Promise<boolean> {
+    async loadStateFromLocalStorage(defs: Record<ComfyNodeID, ComfyNodeDef>): Promise<boolean> {
        const json = localStorage.getItem("workflows");
        if (!json) {
            return false
        }
-        const workflows = JSON.parse(json) as SerializedAppState[];
-        for (const workflow of workflows)
-            await this.openWorkflow(workflow)
+
+        const state = JSON.parse(json);
+        if (!("workflows" in state))
+            return false;
+
+        const workflows = state.workflows as SerializedAppState[];
+        for (const workflow of workflows) {
+            await this.openWorkflow(workflow, defs)
+        }
+
+        if (typeof state.activeWorkflowIndex === "number") {
+            workflowState.setActiveWorkflow(this.lCanvas, state.activeWorkflowIndex);
+            selectionState.clear();
+        }
+
        return true;
    }

    static node_type_overrides: Record<string, typeof ComfyBackendNode> = {}
    static widget_type_overrides: Record<string, typeof SvelteComponentDev> = {}

-    private async registerNodes() {
-        // Load node definitions from the backend
-        const defs = await this.api.getNodeDefs();
-
+    private async registerNodes(defs: Record<ComfyNodeID, ComfyNodeDef>) {
        // Register a node for each definition
        for (const [nodeId, nodeDef] of Object.entries(defs)) {
            const typeOverride = ComfyApp.node_type_overrides[nodeId]
@@ -504,7 +516,7 @@ export default class ComfyApp {
        setColor(BuiltInSlotType.ACTION, "lightseagreen")
    }

-    async openWorkflow(data: SerializedAppState): Promise<ComfyWorkflow> {
+    async openWorkflow(data: SerializedAppState, refreshCombos: boolean | Record<string, ComfyNodeDef> = true): Promise<ComfyWorkflow> {
        if (data.version !== COMFYBOX_SERIAL_VERSION) {
            throw `Invalid ComfyBox saved data format: ${data.version}`
        }
@@ -515,27 +527,38 @@ export default class ComfyApp {
        // Restore canvas offset/zoom
        this.lCanvas.deserialize(data.canvas)

-        await this.refreshComboInNodes(workflow);
+        if (refreshCombos) {
+            let defs = null;
+            if (typeof refreshCombos === "object")
+                defs = refreshCombos;
+            await this.refreshComboInNodes(workflow, defs);
+        }

        return workflow;
    }

-    setActiveWorkflow(index: number) {
+    setActiveWorkflow(id: WorkflowInstID) {
+        const index = get(workflowState).openedWorkflows.findIndex(w => w.id === id)
+        if (index === -1)
+            return;
        workflowState.setActiveWorkflow(this.lCanvas, index);
        selectionState.clear();
    }

-    createNewWorkflow(index: number) {
+    createNewWorkflow() {
        workflowState.createNewWorkflow(this.lCanvas, undefined, true);
        selectionState.clear();
    }

-    closeWorkflow(index: number) {
+    closeWorkflow(id: WorkflowInstID) {
+        const index = get(workflowState).openedWorkflows.findIndex(w => w.id === id)
+        if (index === -1)
+            return;
        workflowState.closeWorkflow(this.lCanvas, index);
        selectionState.clear();
    }

-    async initDefaultWorkflow() {
+    async initDefaultWorkflow(defs?: Record<string, ComfyNodeDef>) {
        let state = null;
        try {
            const graphResponse = await fetch("/workflows/defaultWorkflow.json");
@@ -546,7 +569,7 @@ export default class ComfyApp {
            notify(`Failed to load default graph: ${error}`, { type: "error" })
            state = structuredClone(blankGraph)
        }
-        await this.openWorkflow(state)
+        await this.openWorkflow(state, defs)
    }

    clear() {
@@ -783,14 +806,15 @@ export default class ComfyApp {
    /**
     * Refresh combo list on whole nodes
     */
-    async refreshComboInNodes(workflow?: ComfyWorkflow, flashUI: boolean = false) {
+    async refreshComboInNodes(workflow?: ComfyWorkflow, defs?: Record<string, ComfyNodeDef>, flashUI: boolean = false) {
        workflow ||= workflowState.getActiveWorkflow();
        if (workflow == null) {
            notify("No active workflow!", { type: "error" })
            return
        }

-        const defs = await this.api.getNodeDefs();
+        if (defs == null)
+            defs = await this.api.getNodeDefs();

        const isComfyComboNode = (node: LGraphNode): node is ComfyComboNode => {
            return node
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -17,6 +17,8 @@

 let layoutState: WritableLayoutStateStore | null = null

+ $: layoutState = workflow?.layout
+
 let target: IDragItem | null = null;
 let node: LGraphNode | null = null;

@@ -246,7 +248,7 @@
         doRefreshPanel()
     }

-     workflow.notifyModified()
+     workflow.notifyModified();
 }

 function getWorkflowAttribute(spec: AttributesSpec): any {
@@ -279,10 +281,10 @@
     if (spec.onChanged)
         spec.onChanged($layoutState, value, prevValue)

-     // if (spec.refreshPanelOnChange)
+     if (spec.refreshPanelOnChange)
         doRefreshPanel()

-     workflow.notifyModified()
+     workflow.notifyModified();
 }

 function doRefreshPanel() {
@@ -305,6 +307,7 @@
    </div>
    <div class="props-entries">
        {#if workflow != null && layoutState != null}
+            {#key workflow.id}
                {#key $layoutStates.refreshPropsPanel}
                    {#each ALL_ATTRIBUTES as category(category.categoryName)}
                        <div class="category-name">
@@ -471,6 +474,7 @@
                            {/if}
                        {/each}
                    {/each}
+                {/key}
            {/key}
        {/if}
    </div>
--- a/src/lib/components/ComfyWorkflowsView.svelte
+++ b/src/lib/components/ComfyWorkflowsView.svelte
@@ -14,12 +14,15 @@
 import selectionState from "$lib/stores/selectionState";
 import type ComfyApp from './ComfyApp';
 import { onMount } from "svelte";
-	import type { WritableLayoutStateStore } from '$lib/stores/layoutStates';
+ import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME, SHADOW_PLACEHOLDER_ITEM_ID } from 'svelte-dnd-action';
+ import { fade } from 'svelte/transition';
+ import { cubicIn } from 'svelte/easing';

 export let app: ComfyApp;
 export let uiTheme: string = "gradio-dark" // TODO config

 let workflow: ComfyWorkflow | null = null;
+ let openedWorkflows = []

 let containerElem: HTMLDivElement;
 let resizeTimeout: NodeJS.Timeout | null;
@@ -30,6 +33,7 @@
 let appSetupPromise: Promise<void> = null;

 $: workflow = $workflowState.activeWorkflow;
+ $: openedWorkflows = $workflowState.openedWorkflows.map(w => { return { id: w.id } })

 onMount(async () => {
     appSetupPromise = app.setup().then(() => {
@@ -154,7 +158,7 @@
     app.createNewWorkflow();
 }

- function closeWorkflow(event: Event, index: number, workflow: ComfyWorkflow) {
+ function closeWorkflow(event: Event, workflow: ComfyWorkflow) {
     event.preventDefault();
     event.stopImmediatePropagation()

@@ -163,15 +167,33 @@
             return;
     }

-     app.closeWorkflow(index);
+     app.closeWorkflow(workflow.id);
 }
+
+ function handleConsider(evt: any) {
+     console.warn(openedWorkflows.length, openedWorkflows, evt.detail.items.length, evt.detail.items)
+     openedWorkflows = evt.detail.items;
+     // openedWorkflows = evt.detail.items.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID);
+     // workflowState.update(s => {
+     //     s.openedWorkflows = openedWorkflows.map(w => workflowState.getWorkflow(w.id));
+     //     return s;
+     // })
+ };
+
+ function handleFinalize(evt: any) {
+     openedWorkflows = evt.detail.items;
+     workflowState.update(s => {
+         s.openedWorkflows = openedWorkflows.filter(w => w.id !== SHADOW_PLACEHOLDER_ITEM_ID).map(w => workflowState.getWorkflow(w.id));
+         return s;
+     })
+ };
 </script>

 <div id="comfy-content" bind:this={containerElem} class:loading>
    <Splitpanes theme="comfy" on:resize={refreshView}>
        <Pane bind:size={propsSidebarSize}>
            <div class="sidebar-wrapper pane-wrapper">
-                <ComfyProperties layoutState={$workflowState.activeWorkflow} />
+                <ComfyProperties workflow={$workflowState.activeWorkflow} />
            </div>
        </Pane>
        <Pane>
@@ -195,10 +217,22 @@
        </Pane>
    </Splitpanes>
    <div id="workflow-tabs">
-        {#each $workflowState.openedWorkflows as workflow, index}
+        <div class="workflow-tab-items"
+             use:dndzone="{{
+                  items: openedWorkflows,
+                  flipDurationMs: 200,
+                  type: "workflow-tab",
+                  morphDisabled: true,
+                  dropFromOthersDisabled: true,
+                  dropTargetStyle: {outline: "none"},
+                          }}"
+             on:consider={handleConsider}
+             on:finalize={handleFinalize}>
+            {#each openedWorkflows.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
+                {@const workflow = workflowState.getWorkflow(item.id)}
                <button class="workflow-tab"
-                    class:selected={index === $workflowState.activeWorkflowIdx}
-                    on:click={() => app.setActiveWorkflow(index)}>
+                        class:selected={item.id === $workflowState.activeWorkflowID}
+                        on:click={() => app.setActiveWorkflow(item.id)}>
                    <span class="workflow-tab-title">
                        {workflow.attrs.title}
                        {#if workflow.isModified}
@@ -206,11 +240,15 @@
                        {/if}
                    </span>
                    <button class="workflow-close-button"
-                        on:click={(e) => closeWorkflow(e, index, workflow)}>
+                            on:click={(e) => closeWorkflow(e, workflow)}>
                        ✕
                    </button>
+                    {#if workflow[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
+                        <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
+                    {/if}
                </button>
            {/each}
+        </div>
        <button class="workflow-add-new-button"
                on:click={createNewWorkflow}>
            ➕
@@ -336,12 +374,16 @@
     }
 }

- #workflow-tabs {
+ #workflow-tabs, .workflow-tab-items {
     display: flex;
-     padding-right: 1em;
     margin-top: auto;
     overflow-x: auto;
 }
+
+ #workflow-tabs {
+     padding-right: 1em;
+ }
+
 /*
    #topbar {
    background: var(--neutral-900);
@@ -393,6 +435,7 @@
         flex-direction: row;
         justify-content: center;
         gap: var(--size-4);
+         cursor: pointer !important;

         &:last-child {
             border-right: 1px solid var(--neutral-600);
@@ -407,6 +450,7 @@
             background: var(--neutral-700);
             color: var(--neutral-300);
             border-top-color: var(--primary-500);
+             font-weight: bold;
         }

         > .workflow-close-button {
@@ -433,7 +477,6 @@
         color: var(--neutral-500);
         padding: 0.5rem 1rem;
         border-top: 3px solid var(--neutral-600);
-         border-left: 1px solid var(--neutral-600);

         display: flex;
         flex-direction: row;
@@ -536,4 +579,12 @@
 #comfy-file-input {
     display: none;
 }
+
+ .drag-item-shadow {
+     visibility: visible;
+     border: 1px dashed grey;
+     background: lightblue;
+     opacity: 0.5;
+     margin: 0;
+ }
 </style>
--- a/src/lib/stores/layoutStates.ts
+++ b/src/lib/stores/layoutStates.ts
@@ -548,6 +548,13 @@ const ALL_ATTRIBUTES: AttributesSpecList = [
            },

            // Workflow
+            {
+                name: "title",
+                type: "string",
+                location: "workflow",
+                editable: true,
+                defaultValue: "New Workflow"
+            },
            {
                name: "queuePromptButtonName",
                type: "string",
--- a/src/lib/stores/workflowState.ts
+++ b/src/lib/stores/workflowState.ts
@@ -197,7 +197,7 @@ export class ComfyWorkflow {
 export type WorkflowState = {
    openedWorkflows: ComfyWorkflow[],
    openedWorkflowsByID: Record<WorkflowInstID, ComfyWorkflow>,
-    activeWorkflowIdx: number,
+    activeWorkflowID: WorkflowInstID | null,
    activeWorkflow: ComfyWorkflow | null,
 }

@@ -219,7 +219,7 @@ const store: Writable<WorkflowState> = writable(
    {
        openedWorkflows: [],
        openedWorkflowsByID: {},
-        activeWorkflowIdx: -1,
+        activeWorkflowID: null,
        activeWorkflow: null
    })

@@ -245,9 +245,9 @@ function getWorkflowByNodeID(id: NodeID): ComfyWorkflow | null {

 function getActiveWorkflow(): ComfyWorkflow | null {
    const state = get(store);
-    if (state.activeWorkflowIdx === -1)
+    if (state.activeWorkflowID == null)
        return null;
-    return state.openedWorkflows[state.activeWorkflowIdx];
+    return state.openedWorkflowsByID[state.activeWorkflowID];
 }

 function createNewWorkflow(canvas: ComfyGraphCanvas, title: string = "New Workflow", setActive: boolean = false): ComfyWorkflow {
@@ -292,9 +292,10 @@ function closeWorkflow(canvas: ComfyGraphCanvas, index: number) {

    layoutStates.remove(workflow.id)

+
    state.openedWorkflows.splice(index, 1)
    delete state.openedWorkflowsByID[workflow.id]
-    const newIndex = clamp(state.activeWorkflowIdx, 0, state.openedWorkflows.length - 1);
+    let newIndex = clamp(index, 0, state.openedWorkflows.length - 1)
    setActiveWorkflow(canvas, newIndex);

    store.set(state);
@@ -310,19 +311,22 @@ function setActiveWorkflow(canvas: ComfyGraphCanvas, index: number): ComfyWorkfl
    const state = get(store);

    if (state.openedWorkflows.length === 0) {
-        state.activeWorkflowIdx = -1;
+        state.activeWorkflowID = null;
        state.activeWorkflow = null
        return null;
    }

-    if (index < 0 || index >= state.openedWorkflows.length || state.activeWorkflowIdx === index)
+    if (index < 0 || index >= state.openedWorkflows.length)
        return state.activeWorkflow;

+    const workflow = state.openedWorkflows[index]
+    if (workflow.id === state.activeWorkflowID)
+        return;
+
    if (state.activeWorkflow != null)
        state.activeWorkflow.stop("app")

-    const workflow = state.openedWorkflows[index]
-    state.activeWorkflowIdx = index;
+    state.activeWorkflowID = workflow.id;
    state.activeWorkflow = workflow;

    workflow.start("app", canvas);