From 2b60244e4ad672ec9117429ba01891e554be466e Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Mon, 16 Sep 2024 17:47:47 +0900
Subject: [PATCH] Move setting declarations from ui to coreSettings (#847)

* Move setting declarations from ui to coreSettings

* nit

* nit

* Move effect to vue component
---
 .../appMenu/floating/FloatingMenu.vue         |  15 ++-
 src/scripts/ui.ts                             | 102 ++----------------
 src/stores/coreSettings.ts                    |  76 +++++++++++++
 3 files changed, 101 insertions(+), 92 deletions(-)

diff --git a/src/components/appMenu/floating/FloatingMenu.vue b/src/components/appMenu/floating/FloatingMenu.vue
index ec5659484..7535adeff 100644
--- a/src/components/appMenu/floating/FloatingMenu.vue
+++ b/src/components/appMenu/floating/FloatingMenu.vue
@@ -4,10 +4,23 @@
 
 <script setup lang="ts">
 import { app } from '@/scripts/app'
-import { onMounted, ref } from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
+import { onMounted, ref, watch } from 'vue'
 
 const container = ref<HTMLDivElement | null>(null)
 
+const settingStore = useSettingStore()
+watch(
+  () => settingStore.get('Comfy.DevMode'),
+  (value) => {
+    const element = document.getElementById('comfy-dev-save-api-button')
+    if (element) {
+      element.style.display = value ? 'flex' : 'none'
+    }
+  },
+  { immediate: true }
+)
+
 onMounted(() => {
   app.ui.setup(container.value)
 })
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index af40d92ae..d171db590 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -379,82 +379,7 @@ export class ComfyUI {
   }
 
   setup(containerElement: HTMLElement) {
-    const confirmClear = this.settings.addSetting({
-      id: 'Comfy.ConfirmClear',
-      category: ['Comfy', 'Workflow', 'ConfirmClear'],
-      name: 'Require confirmation when clearing workflow',
-      type: 'boolean',
-      defaultValue: true
-    })
-
-    const promptFilename = this.settings.addSetting({
-      id: 'Comfy.PromptFilename',
-      category: ['Comfy', 'Workflow', 'PromptFilename'],
-      name: 'Prompt for filename when saving workflow',
-      type: 'boolean',
-      defaultValue: true
-    })
-
-    /**
-     * file format for preview
-     *
-     * format;quality
-     *
-     * ex)
-     * webp;50 -> webp, quality 50
-     * jpeg;80 -> rgb, jpeg, quality 80
-     *
-     * @type {string}
-     */
-    const previewImage = this.settings.addSetting({
-      id: 'Comfy.PreviewFormat',
-      category: ['Comfy', 'Node Widget', 'PreviewFormat'],
-      name: 'Preview image format',
-      tooltip:
-        'When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.',
-      type: 'text',
-      defaultValue: ''
-    })
-
-    this.settings.addSetting({
-      id: 'Comfy.DisableSliders',
-      category: ['Comfy', 'Node Widget', 'DisableSliders'],
-      name: 'Disable node widget sliders',
-      type: 'boolean',
-      defaultValue: false
-    })
-
-    this.settings.addSetting({
-      id: 'Comfy.DisableFloatRounding',
-      category: ['Comfy', 'Node Widget', 'DisableFloatRounding'],
-      name: 'Disable default float widget rounding.',
-      tooltip:
-        '(requires page reload) Cannot disable round when round is set by the node in the backend.',
-      type: 'boolean',
-      defaultValue: false
-    })
-
-    this.settings.addSetting({
-      id: 'Comfy.FloatRoundingPrecision',
-      category: ['Comfy', 'Node Widget', 'FloatRoundingPrecision'],
-      name: 'Float widget rounding decimal places [0 = auto].',
-      tooltip: '(requires page reload)',
-      type: 'slider',
-      attrs: {
-        min: 0,
-        max: 6,
-        step: 1
-      },
-      defaultValue: 0
-    })
-
-    this.settings.addSetting({
-      id: 'Comfy.EnableTooltips',
-      category: ['Comfy', 'Node', 'EnableTooltips'],
-      name: 'Enable Tooltips',
-      type: 'boolean',
-      defaultValue: true
-    })
+    const settingStore = useSettingStore()
 
     const fileInput = $el('input', {
       id: 'comfy-file-input',
@@ -668,7 +593,7 @@ export class ComfyUI {
         textContent: 'Save',
         onclick: () => {
           let filename = 'workflow.json'
-          if (promptFilename.value) {
+          if (settingStore.get('Comfy.PromptFilename')) {
             filename = prompt('Save workflow as:', filename)
             if (!filename) return
             if (!filename.toLowerCase().endsWith('.json')) {
@@ -699,7 +624,7 @@ export class ComfyUI {
         style: { width: '100%', display: 'none' },
         onclick: () => {
           let filename = 'workflow_api.json'
-          if (promptFilename.value) {
+          if (settingStore.get('Comfy.PromptFilename')) {
             filename = prompt('Save workflow (API) as:', filename)
             if (!filename) return
             if (!filename.toLowerCase().endsWith('.json')) {
@@ -744,7 +669,10 @@ export class ComfyUI {
         id: 'comfy-clear-button',
         textContent: 'Clear',
         onclick: () => {
-          if (!confirmClear.value || confirm('Clear workflow?')) {
+          if (
+            !settingStore.get('Comfy.ConfirmClear') ||
+            confirm('Clear workflow?')
+          ) {
             app.clean()
             app.graph.clear()
             app.resetView()
@@ -756,7 +684,10 @@ export class ComfyUI {
         id: 'comfy-load-default-button',
         textContent: 'Load Default',
         onclick: async () => {
-          if (!confirmClear.value || confirm('Load default workflow?')) {
+          if (
+            !settingStore.get('Comfy.ConfirmClear') ||
+            confirm('Load default workflow?')
+          ) {
             app.resetView()
             await app.loadGraphData()
           }
@@ -797,17 +728,6 @@ export class ComfyUI {
       })
     ]) as HTMLDivElement
 
-    this.settings.addSetting({
-      id: 'Comfy.DevMode',
-      name: 'Enable dev mode options (API save, etc.)',
-      type: 'boolean',
-      defaultValue: false,
-      onChange: function (value) {
-        document.getElementById('comfy-dev-save-api-button').style.display =
-          value ? 'flex' : 'none'
-      }
-    })
-
     this.restoreMenuPosition = dragElement(this.menuContainer, this.settings)
 
     this.setStatus({ exec_info: { queue_remaining: 'X' } })
diff --git a/src/stores/coreSettings.ts b/src/stores/coreSettings.ts
index 556874054..7cd053b5a 100644
--- a/src/stores/coreSettings.ts
+++ b/src/stores/coreSettings.ts
@@ -262,5 +262,81 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'combo',
     options: [NodeBadgeMode.None, NodeBadgeMode.ShowAll],
     defaultValue: NodeBadgeMode.ShowAll
+  },
+  {
+    id: 'Comfy.ConfirmClear',
+    category: ['Comfy', 'Workflow', 'ConfirmClear'],
+    name: 'Require confirmation when clearing workflow',
+    type: 'boolean',
+    defaultValue: true
+  },
+  {
+    id: 'Comfy.PromptFilename',
+    category: ['Comfy', 'Workflow', 'PromptFilename'],
+    name: 'Prompt for filename when saving workflow',
+    type: 'boolean',
+    defaultValue: true
+  },
+  /**
+   * file format for preview
+   *
+   * format;quality
+   *
+   * ex)
+   * webp;50 -> webp, quality 50
+   * jpeg;80 -> rgb, jpeg, quality 80
+   *
+   * @type {string}
+   */
+  {
+    id: 'Comfy.PreviewFormat',
+    category: ['Comfy', 'Node Widget', 'PreviewFormat'],
+    name: 'Preview image format',
+    tooltip:
+      'When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.',
+    type: 'text',
+    defaultValue: ''
+  },
+  {
+    id: 'Comfy.DisableSliders',
+    category: ['Comfy', 'Node Widget', 'DisableSliders'],
+    name: 'Disable node widget sliders',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'Comfy.DisableFloatRounding',
+    category: ['Comfy', 'Node Widget', 'DisableFloatRounding'],
+    name: 'Disable default float widget rounding.',
+    tooltip:
+      '(requires page reload) Cannot disable round when round is set by the node in the backend.',
+    type: 'boolean',
+    defaultValue: false
+  },
+  {
+    id: 'Comfy.FloatRoundingPrecision',
+    category: ['Comfy', 'Node Widget', 'FloatRoundingPrecision'],
+    name: 'Float widget rounding decimal places [0 = auto].',
+    tooltip: '(requires page reload)',
+    type: 'slider',
+    attrs: {
+      min: 0,
+      max: 6,
+      step: 1
+    },
+    defaultValue: 0
+  },
+  {
+    id: 'Comfy.EnableTooltips',
+    category: ['Comfy', 'Node', 'EnableTooltips'],
+    name: 'Enable Tooltips',
+    type: 'boolean',
+    defaultValue: true
+  },
+  {
+    id: 'Comfy.DevMode',
+    name: 'Enable dev mode options (API save, etc.)',
+    type: 'boolean',
+    defaultValue: false
   }
 ]