diff --git a/src/components/appMenu/floating/FloatingMenu.vue b/src/components/appMenu/floating/FloatingMenu.vue
new file mode 100644
index 000000000..ec5659484
--- /dev/null
+++ b/src/components/appMenu/floating/FloatingMenu.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 350bc5f43..3fcb15afa 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -6,6 +6,7 @@
+
@@ -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'
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 625d61463..8bb4e97ff 100644
--- a/src/scripts/ui.ts
+++ b/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', {