Merge branch 'main' into ux-improvement

Author: dmx974

README.md

@@ -231,7 +231,15 @@ core extensions will be loaded.
 
 ### LiteGraph
 
-This repo is using litegraph package hosted on https://github.com/Comfy-Org/litegraph.js. Any changes to litegraph should be submitted in that repo instead.
+This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
+
+### Test litegraph changes
+
+- Run `npm link` in the local litegraph repo.
+- Run `npm uninstall @comfyorg/litegraph` in this repo.
+- Run `npm link @comfyorg/litegraph` in this repo.
+
+This will replace the litegraph package in this repo with the local litegraph repo.
 
 ## Deploy
 

browser_tests/ComfyPage.ts

@@ -2,6 +2,8 @@ import type { Page, Locator } from '@playwright/test'
 import { test as base } from '@playwright/test'
 import dotenv from 'dotenv'
 dotenv.config()
+import * as fs from 'fs'
+import * as path from 'path'
 
 interface Position {
   x: number
@@ -202,6 +204,10 @@ export class ComfyPage {
     await this.resetView()
   }
 
+  public assetPath(fileName: string) {
+    return `./browser_tests/assets/${fileName}`
+  }
+
   async setSetting(settingId: string, settingValue: any) {
     return await this.page.evaluate(
       async ({ id, value }) => {
@@ -238,7 +244,7 @@ export class ComfyPage {
 
   async loadWorkflow(workflowName: string) {
     await this.workflowUploadInput.setInputFiles(
-      `./browser_tests/assets/${workflowName}.json`
+      this.assetPath(`${workflowName}.json`)
     )
     await this.nextFrame()
   }
@@ -300,6 +306,54 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  async dragAndDropFile(fileName: string) {
+    const filePath = this.assetPath(fileName)
+
+    // Read the file content
+    const buffer = fs.readFileSync(filePath)
+
+    // Get file type
+    const getFileType = (fileName: string) => {
+      if (fileName.endsWith('.png')) return 'image/png'
+      if (fileName.endsWith('.webp')) return 'image/webp'
+      if (fileName.endsWith('.json')) return 'application/json'
+      return 'application/octet-stream'
+    }
+
+    const fileType = getFileType(fileName)
+
+    await this.page.evaluate(
+      async ({ buffer, fileName, fileType }) => {
+        const file = new File([new Uint8Array(buffer)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
+        dataTransfer.items.add(file)
+
+        const dropEvent = new DragEvent('drop', {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer
+        })
+
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
+
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+
+        document.dispatchEvent(dropEvent)
+      },
+      { buffer: [...new Uint8Array(buffer)], fileName, fileType }
+    )
+
+    await this.nextFrame()
+  }
+
   async dragNode2() {
     await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
     await this.nextFrame()

browser_tests/assets/edited_workflow.webp

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Load Workflow in Media', () => {
+  ;['workflow.webp', 'edited_workflow.webp', 'no_workflow.webp'].forEach(
+    async (fileName) => {
+      test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
+        await comfyPage.dragAndDropFile(fileName)
+        await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
+      })
+    }
+  )
+})

browser_tests/assets/no_workflow.webp

@@ -171,7 +171,9 @@ test.describe('Menu', () => {
       const tab = comfyPage.menu.nodeLibraryTab
 
       await tab.getFolder('foo').click({ button: 'right' })
-      await comfyPage.page.getByLabel('Rename').click()
+      await comfyPage.page
+        .locator('.p-contextmenu-item-label:has-text("Rename")')
+        .click()
       await comfyPage.page.keyboard.insertText('bar')
       await comfyPage.page.keyboard.press('Enter')
 
@@ -291,7 +293,9 @@ test.describe('Menu', () => {
       })
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.getFolder('foo').click({ button: 'right' })
-      await comfyPage.page.getByLabel('Rename').click()
+      await comfyPage.page
+        .locator('.p-contextmenu-item-label:has-text("Rename")')
+        .click()
       await comfyPage.page.keyboard.insertText('bar')
       await comfyPage.page.keyboard.press('Enter')
       await comfyPage.nextFrame()

browser_tests/assets/workflow.webp

@@ -76,6 +76,16 @@ test.describe('Node search box', () => {
       'added-node-no-connection.png'
     )
   })
+
+  test('Has correct aria-labels on search results', async ({ comfyPage }) => {
+    const node = 'Load Checkpoint'
+    await comfyPage.doubleClickCanvas()
+    await comfyPage.searchBox.fillAndSelectFirstNode(node)
+    const firstResult = comfyPage.page
+      .locator('li.p-autocomplete-option')
+      .first()
+    await expect(firstResult).toHaveAttribute('aria-label', node)
+  })
 })
 
 test.describe('Release context menu', () => {

browser_tests/loadWorkflowInMedia.spec.ts

@@ -1,7 +1,7 @@
 {
   "name": "comfyui-frontend",
   "private": true,
-  "version": "1.2.47",
+  "version": "1.2.48",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -62,8 +62,8 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@comfyorg/litegraph": "^0.7.64",
-    "@primevue/themes": "^4.0.0-rc.2",
+    "@comfyorg/litegraph": "^0.7.65",
+    "@primevue/themes": "^4.0.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",
     "axios": "^1.7.4",
@@ -73,7 +73,7 @@
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
-    "primevue": "^4.0.0",
+    "primevue": "^4.0.5",
     "reflect-metadata": "^0.2.2",
     "vue": "^3.4.31",
     "vue-i18n": "^9.13.1",

browser_tests/loadWorkflowInMedia.spec.ts-snapshots/edited-workflow-webp-chromium-linux.png

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer primevue, tailwind-utilities;
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
 
 :root {
   --fg-color: #000;

browser_tests/loadWorkflowInMedia.spec.ts-snapshots/no-workflow-webp-chromium-linux.png

@@ -144,11 +144,6 @@ const tabValue = computed(() =>
 </script>
 
 <style>
-/* Remove after we have tailwind setup */
-.border-none {
-  border: none !important;
-}
-
 .settings-tab-panels {
   padding-top: 0px !important;
 }

browser_tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webp-chromium-linux.png

@@ -40,6 +40,7 @@
       auto-option-focus
       force-selection
       multiple
+      :optionLabel="'display_name'"
     >
       <template v-slot:option="{ option }">
         <div class="option-container">

browser_tests/menu.spec.ts

@@ -6,7 +6,10 @@
       :dismissable-mask="dismissable"
       @hide="clearFilters"
       :pt="{
-        root: { class: 'invisible-dialog-root' },
+        root: {
+          class: 'invisible-dialog-root',
+          role: 'search'
+        },
         mask: { class: 'node-search-box-dialog-mask' },
         transition: {
           enterFromClass: 'opacity-0 scale-75',