Revert move floating menu to Vue (#853)

src/components/appMenu/floating/FloatingMenu.vue

@@ -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>

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'

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.
+    this.setup(document.body)
-    if (window['IS_TEST']) {
-      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()

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'
+      }
+    }
   }
 ]

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()