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', {