From b5c5f359547c88757fca5547ca157b13084c737e Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Tue, 17 Sep 2024 09:22:27 +0900
Subject: [PATCH] Revert move floating menu to Vue

---
 .../appMenu/floating/FloatingMenu.vue         | 27 -------------------
 src/components/graph/GraphCanvas.vue          |  2 --
 src/scripts/ui.ts                             | 15 ++++-------
 src/stores/coreSettings.ts                    |  8 +++++-
 tests-ui/utils/index.ts                       |  1 -
 5 files changed, 12 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/appMenu/floating/FloatingMenu.vue

diff --git a/src/components/appMenu/floating/FloatingMenu.vue b/src/components/appMenu/floating/FloatingMenu.vue
deleted file mode 100644
index 7535adeff..000000000
--- a/src/components/appMenu/floating/FloatingMenu.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="floating-menu" ref="container"></div>
-</template>
-
-<script setup lang="ts">
-import { app } from '@/scripts/app'
-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)
-})
-</script>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 3fcb15afa..350bc5f43 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -6,7 +6,6 @@
       </template>
     </LiteGraphCanvasSplitterOverlay>
     <TitleEditor />
-    <FloatingMenu />
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
   </teleport>
   <NodeSearchboxPopover />
@@ -19,7 +18,6 @@ import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
-import FloatingMenu from '@/components/appMenu/floating/FloatingMenu.vue'
 import { ref, computed, onUnmounted, onMounted, watchEffect } from 'vue'
 import { app as comfyApp } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index d171db590..d06f9b319 100644
--- a/src/scripts/ui.ts
+++ b/src/scripts/ui.ts
@@ -372,15 +372,10 @@ export class ComfyUI {
       this.history.update()
     })
 
-    // For testing. Legacy ui tests don't have vue app initialized.
-    if (window['IS_TEST']) {
-      this.setup(document.body)
-    }
+    this.setup(document.body)
   }
 
   setup(containerElement: HTMLElement) {
-    const settingStore = useSettingStore()
-
     const fileInput = $el('input', {
       id: 'comfy-file-input',
       type: 'file',
@@ -593,7 +588,7 @@ export class ComfyUI {
         textContent: 'Save',
         onclick: () => {
           let filename = 'workflow.json'
-          if (settingStore.get('Comfy.PromptFilename')) {
+          if (useSettingStore().get('Comfy.PromptFilename')) {
             filename = prompt('Save workflow as:', filename)
             if (!filename) return
             if (!filename.toLowerCase().endsWith('.json')) {
@@ -624,7 +619,7 @@ export class ComfyUI {
         style: { width: '100%', display: 'none' },
         onclick: () => {
           let filename = 'workflow_api.json'
-          if (settingStore.get('Comfy.PromptFilename')) {
+          if (useSettingStore().get('Comfy.PromptFilename')) {
             filename = prompt('Save workflow (API) as:', filename)
             if (!filename) return
             if (!filename.toLowerCase().endsWith('.json')) {
@@ -670,7 +665,7 @@ export class ComfyUI {
         textContent: 'Clear',
         onclick: () => {
           if (
-            !settingStore.get('Comfy.ConfirmClear') ||
+            !useSettingStore().get('Comfy.ConfirmClear') ||
             confirm('Clear workflow?')
           ) {
             app.clean()
@@ -685,7 +680,7 @@ export class ComfyUI {
         textContent: 'Load Default',
         onclick: async () => {
           if (
-            !settingStore.get('Comfy.ConfirmClear') ||
+            !useSettingStore().get('Comfy.ConfirmClear') ||
             confirm('Load default workflow?')
           ) {
             app.resetView()
diff --git a/src/stores/coreSettings.ts b/src/stores/coreSettings.ts
index 7cd053b5a..6def57453 100644
--- a/src/stores/coreSettings.ts
+++ b/src/stores/coreSettings.ts
@@ -337,6 +337,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     id: 'Comfy.DevMode',
     name: 'Enable dev mode options (API save, etc.)',
     type: 'boolean',
-    defaultValue: false
+    defaultValue: false,
+    onChange: (value) => {
+      const element = document.getElementById('comfy-dev-save-api-button')
+      if (element) {
+        element.style.display = value ? 'flex' : 'none'
+      }
+    }
   }
 ]
diff --git a/tests-ui/utils/index.ts b/tests-ui/utils/index.ts
index f04ddedf1..c4c38c407 100644
--- a/tests-ui/utils/index.ts
+++ b/tests-ui/utils/index.ts
@@ -38,7 +38,6 @@ export async function start(config: StartConfig = {}): Promise<StartResult> {
 
   Object.assign(localStorage, config.localStorage ?? {})
   document.body.innerHTML = html.toString()
-  window['IS_TEST'] = true
 
   mockApi(config)
   mockSettingStore()