Confirm when reloading page with unsaved changes

src/lib/ComfyNodeDef.ts

@@ -22,14 +22,14 @@ export type ComfyNodeDefInput = [ComfyNodeDefInputType, ComfyNodeDefInputOptions
 /**
  * - Array: Combo widget. Usually the values are strings but they can also be other stuff like booleans.
  * - "INT"/"FLOAT"/etc.: Non-combo type widgets. See ComfyWidgets type.
- * - other string: Must be an input type, usually something lke "IMAGE" or "LATENT".
+ * - other string: Must be a backend input type, usually something lke "IMAGE" or "LATENT".
  */
 export type ComfyNodeDefInputType = any[] | keyof typeof ComfyWidgets | string
 
 export type ComfyNodeDefInputOptions = {
     forceInput?: boolean;
 
-    // NOTE: For COMBO type inputs, the default value is always the first entry the list.
+    // NOTE: For COMBO type inputs, the default value is always the first entry in the list.
     default?: any,
 
     // INT/FLOAT options

src/lib/components/ComfyApp.svelte

@@ -2,6 +2,8 @@
  import { ListIcon as List, ImageIcon as Image, SettingsIcon as Settings } from "svelte-feather-icons";
  import ComfyApp, { type A1111PromptAndInfo, type SerializedAppState } from "./ComfyApp";
  import uiState from "$lib/stores/uiState";
+ import configState from "$lib/stores/configState";
+ import workflowState from "$lib/stores/workflowState";
  import { SvelteToast, toast } from '@zerodevx/svelte-toast'
 
  import LightboxModal from "./LightboxModal.svelte";
@@ -34,6 +36,16 @@
      document.getElementById("app-root").classList.remove("dark")
  }
 
+ function handleBeforeUnload(event: BeforeUnloadEvent) {
+     if (!$configState.confirmWhenUnloadingUnsavedChanges)
+         return;
+
+     const unsavedChanges = $workflowState.openedWorkflows.some(w => w.isModified);
+     if (unsavedChanges) {
+         event.preventDefault();
+         event.returnValue = '';
+     }
+ }
 </script>
 
 <svelte:head>
@@ -42,6 +54,8 @@
     {/if}
 </svelte:head>
 
+<svelte:window on:beforeunload={handleBeforeUnload} />
+
 <div id="main" class:dark={uiTheme === "gradio-dark"}>
     <div id="container">
         <Sidebar selected="generate">

src/lib/stores/configState.ts

@@ -8,6 +8,9 @@ export type ConfigState = {
 
     /** When saving, always prompt for a name to save the workflow as */
     promptForWorkflowName: boolean,
+
+    /** When closing the tab, open the confirmation window if there's unsaved changes */
+    confirmWhenUnloadingUnsavedChanges: boolean,
 }
 
 type ConfigStateOps = {
@@ -17,7 +20,8 @@ export type WritableConfigStateStore = Writable<ConfigState> & ConfigStateOps;
 const store: Writable<ConfigState> = writable(
     {
         alwaysStripUserState: false,
-        promptForWorkflowName: false
+        promptForWorkflowName: false,
+        confirmWhenUnloadingUnsavedChanges: true
     })
 
 const configStateStore: WritableConfigStateStore =