Workflow creation/modified state

src/lib/components/ComfyApp.ts

@@ -186,12 +186,7 @@ export default class ComfyApp {
         // Load previous workflow
         let restored = false;
         try {
-            const json = localStorage.getItem("workflow");
-            if (json) {
-                const state = JSON.parse(json) as SerializedAppState;
-                await this.openWorkflow(state)
-                restored = true;
-            }
+            restored = await this.loadStateFromLocalStorage();
         } catch (err) {
             console.error("Error loading previous workflow", err);
             notify(`Error loading previous workflow:\n${err}`, { type: "error", timeout: null })
@@ -202,10 +197,6 @@ export default class ComfyApp {
             await this.initDefaultWorkflow();
         }
 
-        workflowState.createNewWorkflow(this.lCanvas);
-        workflowState.createNewWorkflow(this.lCanvas);
-        workflowState.createNewWorkflow(this.lCanvas);
-
         // Save current workflow automatically
         // setInterval(this.saveStateToLocalStorage.bind(this), 1000);
 
@@ -256,17 +247,15 @@ export default class ComfyApp {
     }
 
     saveStateToLocalStorage() {
-        const workflow = workflowState.getActiveWorkflow();
-        if (workflow == null) {
-            notify("No active workflow!", { type: "error" })
-            return;
-        }
-
         try {
             uiState.update(s => { s.isSavingToLocalStorage = true; return s; })
-            const savedWorkflow = this.serialize(workflow);
-            const json = JSON.stringify(savedWorkflow);
-            localStorage.setItem("workflow", json)
+            const workflows = get(workflowState).openedWorkflows
+            const savedWorkflows = workflows.map(w => this.serialize(w));
+            const json = JSON.stringify(savedWorkflows);
+            localStorage.setItem("workflows", json)
+            for (const workflow of workflows)
+                workflow.isModified = false;
+            workflowState.set(get(workflowState));
             notify("Saved to local storage.")
         }
         catch (err) {
@@ -277,6 +266,17 @@ export default class ComfyApp {
         }
     }
 
+    async loadStateFromLocalStorage(): 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)
+        return true;
+    }
+
     static node_type_overrides: Record<string, typeof ComfyBackendNode> = {}
     static widget_type_overrides: Record<string, typeof SvelteComponentDev> = {}
 
@@ -525,6 +525,11 @@ export default class ComfyApp {
         selectionState.clear();
     }
 
+    createNewWorkflow(index: number) {
+        workflowState.createNewWorkflow(this.lCanvas, undefined, true);
+        selectionState.clear();
+    }
+
     closeWorkflow(index: number) {
         workflowState.closeWorkflow(this.lCanvas, index);
         selectionState.clear();
@@ -602,6 +607,9 @@ export default class ComfyApp {
 
         download(filename, json, "application/json")
 
+        workflow.isModified = false;
+        workflowState.set(get(workflowState));
+
         console.debug(jsonToJsObject(json))
     }
 

src/lib/components/ComfyProperties.svelte

@@ -170,6 +170,8 @@
      if (spec.refreshPanelOnChange) {
          doRefreshPanel()
      }
+
+     workflow.notifyModified()
  }
 
  function getProperty(node: LGraphNode, spec: AttributesSpec) {
@@ -205,6 +207,8 @@
 
      if (spec.refreshPanelOnChange)
          doRefreshPanel()
+
+     workflow.notifyModified()
  }
 
  function getVar(node: LGraphNode, spec: AttributesSpec) {
@@ -241,6 +245,8 @@
      if (spec.refreshPanelOnChange) {
          doRefreshPanel()
      }
+
+     workflow.notifyModified()
  }
 
  function getWorkflowAttribute(spec: AttributesSpec): any {
@@ -275,6 +281,8 @@
 
      // if (spec.refreshPanelOnChange)
          doRefreshPanel()
+
+     workflow.notifyModified()
  }
 
  function doRefreshPanel() {

src/lib/components/ComfyWorkflowsView.svelte

@@ -150,9 +150,19 @@
      }
  }
 
- function closeWorkflow(event: Event, index: number) {
+ function createNewWorkflow() {
+     app.createNewWorkflow();
+ }
+
+ function closeWorkflow(event: Event, index: number, workflow: ComfyWorkflow) {
      event.preventDefault();
      event.stopImmediatePropagation()
+
+     if (workflow.isModified) {
+         if (!confirm("This workflow has unsaved changes. Are you sure you want to close it?"))
+             return;
+     }
+
      app.closeWorkflow(index);
  }
 </script>
@@ -189,13 +199,22 @@
             <button class="workflow-tab"
                     class:selected={index === $workflowState.activeWorkflowIdx}
                     on:click={() => app.setActiveWorkflow(index)}>
-                <span class="workflow-tab-title">{workflow.attrs.title}</span>
+                <span class="workflow-tab-title">
+                    {workflow.attrs.title}
+                    {#if workflow.isModified}
+                        *
+                    {/if}
+                </span>
                 <button class="workflow-close-button"
-                        on:click={(e) => closeWorkflow(e, index)}>
+                        on:click={(e) => closeWorkflow(e, index, workflow)}>
                     ✕
                 </button>
             </button>
         {/each}
+        <button class="workflow-add-new-button"
+                on:click={createNewWorkflow}>
+            ➕
+        </button>
     </div>
     <div id="bottombar">
         <div class="bottombar-content">
@@ -373,7 +392,7 @@
          display: flex;
          flex-direction: row;
          justify-content: center;
-         gap: var(--size-2);
+         gap: var(--size-4);
 
          &:last-child {
              border-right: 1px solid var(--neutral-600);
@@ -392,8 +411,10 @@
 
          > .workflow-close-button {
              display:block;
-             width: 1.5rem;
-             height: 1.5rem;
+             width: 1.2rem;
+             height: 1.2rem;
+             font-size: 13px;
+             margin: auto;
              border-radius: 50%;
              opacity: 50%;
              background: var(--neutral-500);
@@ -405,6 +426,25 @@
              }
          }
      }
+
+     .workflow-add-new-button {
+         background: var(--neutral-700);
+         filter: brightness(80%);
+         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;
+         justify-content: center;
+         gap: var(--size-4);
+
+         &:hover {
+             filter: brightness(100%);
+             border-top-color: var(--neutral-600);
+         }
+     }
  }
 
  #bottombar {

src/lib/components/WidgetContainer.svelte

@@ -58,6 +58,14 @@
      const title = widget.node.type.replace("/", "-").replace(".", "-")
      return `widget--${title}`
  }
+
+ function _startDrag(e: MouseEvent | TouchEvent) {
+     startDrag(e, layoutState)
+ }
+
+ function _stopDrag(e: MouseEvent | TouchEvent) {
+     stopDrag(e, layoutState)
+ }
 </script>
 
 
@@ -85,7 +93,13 @@
                 <div class="handle handle-hidden" class:hidden={!edit} />
             {/if}
             {#if showHandles || hovered}
-                <div class="handle handle-widget" class:hovered data-drag-item-id={widget.id} on:mousedown={startDrag} on:touchstart={startDrag} on:mouseup={stopDrag} on:touchend={stopDrag}/>
+                <div class="handle handle-widget"
+                     class:hovered
+                     data-drag-item-id={widget.id}
+                     on:mousedown={_startDrag}
+                     on:touchstart={_startDrag}
+                     on:mouseup={_stopDrag}
+                     on:touchend={_stopDrag}/>
             {/if}
         {/key}
     {/key}