Floating menu option (#726)

* Add floating menu

* Fix

* Updates

* Add auto-queue change test

* Fix

Author: pythongosssss

browser_tests/ComfyPage.ts

@@ -1,5 +1,6 @@
 import type { Page, Locator } from '@playwright/test'
 import { test as base } from '@playwright/test'
+import { ComfyAppMenu } from './helpers/appMenu'
 import dotenv from 'dotenv'
 dotenv.config()
 import * as fs from 'fs'
@@ -225,6 +226,7 @@ export class ComfyPage {
   // Components
   public readonly searchBox: ComfyNodeSearchBox
   public readonly menu: ComfyMenu
+  public readonly appMenu: ComfyAppMenu
 
   constructor(public readonly page: Page) {
     this.url = process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188'
@@ -235,6 +237,7 @@ export class ComfyPage {
     this.workflowUploadInput = page.locator('#comfy-file-input')
     this.searchBox = new ComfyNodeSearchBox(page)
     this.menu = new ComfyMenu(page)
+    this.appMenu = new ComfyAppMenu(page)
   }
 
   async getGraphNodesCount(): Promise<number> {

browser_tests/appMenu.spec.ts

@@ -0,0 +1,120 @@
+import type { Response } from '@playwright/test'
+import type { StatusWsMessage } from '../src/types/apiTypes.ts'
+import { expect, mergeTests } from '@playwright/test'
+import { comfyPageFixture } from './ComfyPage'
+import { webSocketFixture } from './fixtures/ws.ts'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
+
+test.describe('AppMenu', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    const currentThemeId = await comfyPage.menu.getThemeId()
+    if (currentThemeId !== 'dark') {
+      await comfyPage.menu.toggleTheme()
+    }
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
+  /**
+   * This test ensures that the autoqueue change mode can only queue one change at a time
+   */
+  test('Does not auto-queue multiple changes at a time', async ({
+    comfyPage,
+    ws
+  }) => {
+    // Enable change auto-queue mode
+    let queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
+    expect(await queueOpts.getMode()).toBe('disabled')
+    await queueOpts.setMode('change')
+    await comfyPage.nextFrame()
+    expect(await queueOpts.getMode()).toBe('change')
+    await comfyPage.appMenu.queueButton.toggleOptions()
+
+    // Intercept the prompt queue endpoint
+    let promptNumber = 0
+    comfyPage.page.route('**/api/prompt', async (route, req) => {
+      await new Promise((r) => setTimeout(r, 100))
+      route.fulfill({
+        status: 200,
+        body: JSON.stringify({
+          prompt_id: promptNumber,
+          number: ++promptNumber,
+          node_errors: {},
+          // Include the request data to validate which prompt was queued so we can validate the width
+          __request: req.postDataJSON()
+        })
+      })
+    })
+
+    // Start watching for a message to prompt
+    const requestPromise = comfyPage.page.waitForResponse('**/api/prompt')
+
+    // Find and set the width on the latent node
+    const triggerChange = async (value: number) => {
+      return await comfyPage.page.evaluate((value) => {
+        const node = window['app'].graph._nodes.find(
+          (n) => n.type === 'EmptyLatentImage'
+        )
+        node.widgets[0].value = value
+        window['app'].workflowManager.activeWorkflow.changeTracker.checkState()
+      }, value)
+    }
+
+    // Trigger a status websocket message
+    const triggerStatus = async (queueSize: number) => {
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: {
+            exec_info: {
+              queue_remaining: queueSize
+            }
+          }
+        }
+      } as StatusWsMessage)
+    }
+
+    // Extract the width from the queue response
+    const getQueuedWidth = async (resp: Promise<Response>) => {
+      const obj = await (await resp).json()
+      return obj['__request']['prompt']['5']['inputs']['width']
+    }
+
+    // Trigger a bunch of changes
+    const START = 32
+    const END = 64
+    for (let i = START; i <= END; i += 8) {
+      await triggerChange(i)
+    }
+
+    // Ensure the queued width is the first value
+    expect(
+      await getQueuedWidth(requestPromise),
+      'the first queued prompt should be the first change width'
+    ).toBe(START)
+
+    // Ensure that no other changes are queued
+    await expect(
+      comfyPage.page.waitForResponse('**/api/prompt', { timeout: 250 })
+    ).rejects.toThrow()
+    expect(
+      promptNumber,
+      'only 1 prompt should have been queued even though there were multiple changes'
+    ).toBe(1)
+
+    // Trigger a status update so auto-queue re-runs
+    await triggerStatus(1)
+    await triggerStatus(0)
+
+    // Ensure the queued width is the last queued value
+    expect(
+      await getQueuedWidth(comfyPage.page.waitForResponse('**/api/prompt')),
+      'last queued prompt width should be the last change'
+    ).toBe(END)
+    expect(promptNumber, 'queued prompt count should be 2').toBe(2)
+  })
+})

browser_tests/fixtures/ws.ts

@@ -0,0 +1,51 @@
+import { test as base } from '@playwright/test'
+
+export const webSocketFixture = base.extend<{
+  ws: { trigger(data: any, url?: string): Promise<void> }
+}>({
+  ws: [
+    async ({ page }, use) => {
+      // Each time a page loads, to catch navigations
+      page.on('load', async () => {
+        await page.evaluate(function () {
+          // Create a wrapper for WebSocket that stores them globally
+          // so we can look it up to trigger messages
+          const store: Record<string, WebSocket> = ((window as any).__ws__ = {})
+          window.WebSocket = class extends window.WebSocket {
+            constructor() {
+              // @ts-expect-error
+              super(...arguments)
+              store[this.url] = this
+            }
+          }
+        })
+      })
+
+      await use({
+        async trigger(data, url) {
+          // Trigger a websocket event on the page
+          await page.evaluate(
+            function ([data, url]) {
+              if (!url) {
+                // If no URL specified, use page URL
+                const u = new URL(window.location.toString())
+                u.protocol = 'ws:'
+                u.pathname = '/'
+                url = u.toString() + 'ws'
+              }
+              const ws: WebSocket = (window as any).__ws__[url]
+              ws.dispatchEvent(
+                new MessageEvent('message', {
+                  data
+                })
+              )
+            },
+            [JSON.stringify(data), url]
+          )
+        }
+      })
+    },
+    // We need this to run automatically as the first thing so it adds handlers as soon as the page loads
+    { auto: true }
+  ]
+})

browser_tests/helpers/appMenu.ts

@@ -0,0 +1,65 @@
+import type { Page, Locator } from '@playwright/test'
+
+export class ComfyAppMenu {
+  public readonly root: Locator
+  public readonly queueButton: ComfyQueueButton
+
+  constructor(public readonly page: Page) {
+    this.root = page.locator('.app-menu')
+    this.queueButton = new ComfyQueueButton(this)
+  }
+}
+
+class ComfyQueueButton {
+  public readonly root: Locator
+  public readonly primaryButton: Locator
+  public readonly dropdownButton: Locator
+  constructor(public readonly appMenu: ComfyAppMenu) {
+    this.root = appMenu.root.getByTestId('queue-button')
+    this.primaryButton = this.root.locator('.p-splitbutton-button')
+    this.dropdownButton = this.root.locator('.p-splitbutton-dropdown')
+  }
+
+  public async toggleOptions() {
+    await this.dropdownButton.click()
+    return new ComfyQueueButtonOptions(this.appMenu.page)
+  }
+}
+
+class ComfyQueueButtonOptions {
+  public readonly popup: Locator
+  public readonly modes: {
+    disabled: { input: Locator; wrapper: Locator }
+    instant: { input: Locator; wrapper: Locator }
+    change: { input: Locator; wrapper: Locator }
+  }
+
+  constructor(public readonly page: Page) {
+    this.popup = page.getByTestId('queue-options')
+    this.modes = (['disabled', 'instant', 'change'] as const).reduce(
+      (modes, mode) => {
+        modes[mode] = {
+          input: page.locator(`#autoqueue-${mode}`),
+          wrapper: page.getByTestId(`autoqueue-${mode}`)
+        }
+        return modes
+      },
+      {} as ComfyQueueButtonOptions['modes']
+    )
+  }
+
+  public async setMode(mode: keyof ComfyQueueButtonOptions['modes']) {
+    await this.modes[mode].input.click()
+  }
+
+  public async getMode() {
+    return (
+      await Promise.all(
+        Object.entries(this.modes).map(async ([mode, opt]) => [
+          mode,
+          await opt.wrapper.getAttribute('data-p-checked')
+        ])
+      )
+    ).find(([, checked]) => checked === 'true')?.[0]
+  }
+}

src/App.vue

@@ -6,6 +6,7 @@
   <GlobalToast />
   <UnloadWindowConfirmDialog />
   <BrowserTabTitle />
+  <AppMenu />
 </template>
 
 <script setup lang="ts">
@@ -20,6 +21,7 @@ import {
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
+import AppMenu from '@/components/appMenu/AppMenu.vue'
 import { app } from './scripts/app'
 import { useSettingStore } from './stores/settingStore'
 import { useI18n } from 'vue-i18n'
@@ -34,6 +36,7 @@ import { StatusWsMessageStatus } from './types/apiTypes'
 import { useQueuePendingTaskCountStore } from './stores/queueStore'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
+import { setupAutoQueueHandler } from './services/autoQueueService'
 import { i18n } from './i18n'
 import { useExecutionStore } from './stores/executionStore'
 import { useWorkflowStore } from './stores/workflowStore'
@@ -56,6 +59,8 @@ watch(
   { immediate: true }
 )
 
+setupAutoQueueHandler()
+
 watchEffect(() => {
   const fontSize = useSettingStore().get('Comfy.TextareaWidget.FontSize')
   document.documentElement.style.setProperty(

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -75,4 +75,9 @@ const gutterClass = computed(() => {
   z-index: 999;
   border: none;
 }
+
+.comfyui-floating-menu .splitter-overlay {
+  top: var(--comfy-floating-menu-height);
+  height: calc(100% - var(--comfy-floating-menu-height));
+}
 </style>