Configurable defaults per workflow and reset

src/lib/components/ComfyApp.ts

@@ -23,7 +23,7 @@ import { ComfyComboNode } from "$lib/nodes/widgets";
 import notify from "$lib/notify";
 import parseA1111, { type A1111ParsedInfotext } from "$lib/parseA1111";
 import configState, { type ConfigState } from "$lib/stores/configState";
-import layoutStates, { defaultWorkflowAttributes, type SerializedLayoutState } from "$lib/stores/layoutStates";
+import layoutStates, { defaultWorkflowAttributes, isComfyWidgetNode, type SerializedLayoutState } from "$lib/stores/layoutStates";
 import modalState from "$lib/stores/modalState";
 import queueState from "$lib/stores/queueState";
 import selectionState from "$lib/stores/selectionState";
@@ -272,6 +272,9 @@ export default class ComfyApp {
     }
 
     resizeCanvas() {
+        if (!this.canvasEl)
+            return;
+
         this.canvasEl.width = this.canvasEl.parentElement.offsetWidth;
         this.canvasEl.height = this.canvasEl.parentElement.offsetHeight;
         this.canvasEl.style.width = ""
@@ -482,12 +485,16 @@ export default class ComfyApp {
                 } catch (error) { }
             }
 
-            if (workflow && typeof workflow.createdBy === "string") {
-                this.openWorkflow(workflow);
-            }
-            else {
-                // TODO handle vanilla workflows
-                throw new Error("Workflow was not in ComfyBox format!")
+            if (workflow == null)
+                return;
+
+            if (typeof workflow === "object") {
+                if (typeof workflow.createdBy === "string")
+                    this.openWorkflow(workflow);
+                else {
+                    // TODO handle vanilla workflows
+                    throw new Error("Workflow was not in ComfyBox format!")
+                }
             }
         });
     }
@@ -784,6 +791,30 @@ export default class ComfyApp {
         await this.openWorkflow(state, options)
     }
 
+    saveWorkflowStateAsDefault(workflow: ComfyBoxWorkflow | null) {
+        workflow ||= workflowState.getActiveWorkflow();
+        if (workflow == null)
+            return;
+
+        for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
+            if (isComfyWidgetNode(node)) {
+                node.properties.defaultValue = node.getValue();
+            }
+        }
+    }
+
+    resetCurrentWorkflow() {
+        const workflow = workflowState.getActiveWorkflow();
+        if (workflow == null)
+            return;
+
+        for (const node of workflow.graph.iterateNodesInOrderRecursive()) {
+            if (isComfyWidgetNode(node)) {
+                node.setValue(node.properties.defaultValue);
+            }
+        }
+    }
+
     clear() {
         this.clean();
 
@@ -821,6 +852,8 @@ export default class ComfyApp {
             return;
         }
 
+        this.saveWorkflowStateAsDefault(workflow);
+
         const promptFilename = get(configState).promptForWorkflowName;
 
         const title = workflow.attrs.title.trim() || "workflow"

src/lib/components/ComfyBoxWorkflowsView.svelte

@@ -151,6 +151,13 @@
      }
  }
 
+ async function doReset() {
+     var confirmed = confirm("Are you sure you want to reset this workflow to its default state?");
+     if (confirmed) {
+         app.resetCurrentWorkflow();
+     }
+ }
+
  function createNewWorkflow() {
      app.createNewWorkflow();
  }
@@ -273,28 +280,31 @@
                 <Button variant="secondary" disabled={loading} on:click={doLoadDefault}>
                     Load Default
                 </Button>
+                <Button variant="secondary" disabled={loading} on:click={doReset}>
+                    Reset
+                </Button>
                 <Button variant="secondary" disabled={loading} on:click={doRefreshCombos}>
                     🔄
                 </Button>
                 <!-- <Checkbox label="Lock Nodes" bind:value={$uiState.nodesLocked}/>
                      <Checkbox label="Disable Interaction" bind:value={$uiState.graphLocked}/> -->
-                <span style="display: inline-flex !important">
+                <span style="display: inline-flex !important; padding: 0 0.75rem;">
                     <Checkbox label="Auto-Add UI" bind:value={$uiState.autoAddUI}/>
                 </span>
-                <span class="label" for="ui-edit-mode">
-                    <BlockTitle>UI Edit mode</BlockTitle>
-                    <select id="ui-edit-mode" name="ui-edit-mode" bind:value={$uiState.uiEditMode}>
-                        <option value="widgets">Widgets</option>
-                    </select>
-                </span>
-                <span class="label" for="ui-theme">
-                    <BlockTitle>Theme</BlockTitle>
-                    <select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
-                        <option value="gradio-dark">Gradio Dark</option>
-                        <option value="gradio-light">Gradio Light</option>
-                        <option value="anapnoe">Anapnoe</option>
-                    </select>
-                </span>
+                <!-- <span class="label" for="ui-edit-mode">
+                     <BlockTitle>UI Edit mode</BlockTitle>
+                     <select id="ui-edit-mode" name="ui-edit-mode" bind:value={$uiState.uiEditMode}>
+                     <option value="widgets">Widgets</option>
+                     </select>
+                     </span> -->
+                <!-- <span class="label" for="ui-theme">
+                     <BlockTitle>Theme</BlockTitle>
+                     <select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
+                     <option value="gradio-dark">Gradio Dark</option>
+                     <option value="gradio-light">Gradio Light</option>
+                     <option value="anapnoe">Anapnoe</option>
+                     </select>
+                     </span> -->
             </div>
             <div class="right">
                 <ComfyUnlockUIButton bind:toggled={$uiState.uiUnlocked} />