Move floating menu to a Vue component (#843)

* Move floating menu to a Vue component

* nit

* Fix jest tests

src/components/appMenu/floating/FloatingMenu.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="floating-menu" ref="container"></div>
+</template>
+
+<script setup lang="ts">
+import { app } from '@/scripts/app'
+import { onMounted, ref } from 'vue'
+
+const container = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  app.ui.setup(container.value)
+})
+</script>

src/components/graph/GraphCanvas.vue

@@ -6,6 +6,7 @@
       </template>
     </LiteGraphCanvasSplitterOverlay>
     <TitleEditor />
+    <FloatingMenu />
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
   </teleport>
   <NodeSearchboxPopover />
@@ -18,6 +19,7 @@ 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,6 +372,13 @@ export class ComfyUI {
       this.history.update()
     })
 
+    // For testing. Legacy ui tests don't have vue app initialized.
+    if (!app.vueAppReady) {
+      this.setup(document.body)
+    }
+  }
+
+  setup(containerElement: HTMLElement) {
     const confirmClear = this.settings.addSetting({
       id: 'Comfy.ConfirmClear',
       category: ['Comfy', 'Workflow', 'ConfirmClear'],
@@ -497,7 +504,7 @@ export class ComfyUI {
     this.menuHamburger = $el(
       'div.comfy-menu-hamburger',
       {
-        parent: document.body,
+        parent: containerElement,
         onclick: () => {
           this.menuContainer.style.display = 'block'
           this.menuHamburger.style.display = 'none'
@@ -506,7 +513,7 @@ export class ComfyUI {
       [$el('div'), $el('div'), $el('div')]
     ) as HTMLDivElement
 
-    this.menuContainer = $el('div.comfy-menu', { parent: document.body }, [
+    this.menuContainer = $el('div.comfy-menu', { parent: containerElement }, [
       $el(
         'div.drag-handle.comfy-menu-header',
         {
@@ -730,6 +737,7 @@ export class ComfyUI {
       $el('button', {
         id: 'comfy-clipspace-button',
         textContent: 'Clipspace',
+        // @ts-expect-error Move to ComfyApp
         onclick: () => app.openClipspace()
       }),
       $el('button', {