From 68d6b1f172a500705a29c7d74c7edbb1d1ea1e7c Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Fri, 30 Aug 2024 16:05:54 -0400
Subject: [PATCH] Add confirm dialog on window close

---
 src/App.vue                                   |  2 ++
 .../dialog/UnloadWindowConfirmDialog.vue      | 21 +++++++++++++++++++
 src/stores/settingStore.ts                    |  7 +++++++
 src/types/apiTypes.ts                         |  3 ++-
 4 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dialog/UnloadWindowConfirmDialog.vue

diff --git a/src/App.vue b/src/App.vue
index 5c74834a6..cf97f8c8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
   <BlockUI full-screen :blocked="isLoading" />
   <GlobalDialog />
   <GlobalToast />
+  <UnloadWindowConfirmDialog />
   <GraphCanvas />
 </template>
 
@@ -26,6 +27,7 @@ import { useWorkspaceStore } from './stores/workspaceStateStore'
 import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import GlobalDialog from './components/dialog/GlobalDialog.vue'
 import GlobalToast from './components/toast/GlobalToast.vue'
+import UnloadWindowConfirmDialog from './components/dialog/UnloadWindowConfirmDialog.vue'
 import { api } from './scripts/api'
 import { StatusWsMessageStatus } from './types/apiTypes'
 import { useQueuePendingTaskCountStore } from './stores/queueStore'
diff --git a/src/components/dialog/UnloadWindowConfirmDialog.vue b/src/components/dialog/UnloadWindowConfirmDialog.vue
new file mode 100644
index 000000000..851111349
--- /dev/null
+++ b/src/components/dialog/UnloadWindowConfirmDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useSettingStore } from '@/stores/settingStore'
+import { onMounted, onUnmounted } from 'vue'
+
+const settingStore = useSettingStore()
+const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+  if (settingStore.get('Comfy.Window.UnloadConfirmation')) {
+    event.preventDefault()
+    return true
+  }
+  return undefined
+}
+
+onMounted(() => {
+  window.addEventListener('beforeunload', handleBeforeUnload)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('beforeunload', handleBeforeUnload)
+})
+</script>
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 90b90afef..4c29a38b7 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -260,6 +260,13 @@ export const useSettingStore = defineStore('setting', {
         type: 'boolean',
         defaultValue: true
       })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.Window.UnloadConfirmation',
+        name: 'Show confirmation when closing window',
+        type: 'boolean',
+        defaultValue: false
+      })
     },
 
     set<K extends keyof Settings>(key: K, value: Settings[K]) {
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 799951ea0..63b8b9a1a 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -469,7 +469,8 @@ const zSettings = z.record(z.any()).and(
       'Comfy.Queue.ImageFit': z.enum(['contain', 'cover']),
       'Comfy.Workflow.ModelDownload.AllowedSources': z.array(z.string()),
       'Comfy.Workflow.ModelDownload.AllowedSuffixes': z.array(z.string()),
-      'Comfy.Node.DoubleClickTitleToEdit': z.boolean()
+      'Comfy.Node.DoubleClickTitleToEdit': z.boolean(),
+      'Comfy.Window.UnloadConfirmation': z.boolean()
     })
     .optional()
 )