export generateUUID

.github/copilot-instructions.md

@@ -1,37 +0,0 @@
-Use the Vue 3 Composition API instead of the Options API when writing Vue components. An exception is when overriding or extending a PrimeVue component for compatibility, you may use the Options API.
-
-Use setup() function for component logic
-
-Utilize ref and reactive for reactive state
-
-Implement computed properties with computed()
-
-Use watch and watchEffect for side effects
-
-Implement lifecycle hooks with onMounted, onUpdated, etc.
-
-Utilize provide/inject for dependency injection
-
-Use vue 3.5 style of default prop declaration.
-
-Use Tailwind CSS for styling
-
-Leverage VueUse functions for performance-enhancing styles
-
-Use lodash for utility functions
-
-Use TypeScript for type safety
-
-Implement proper props and emits definitions
-
-Utilize Vue 3's Teleport component when needed
-
-Use Suspense for async components
-
-Implement proper error handling
-
-Follow Vue 3 style guide and naming conventions
-
-Use Vite for fast development and building
-
-Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json.

.github/workflows/release.yaml

@@ -29,9 +29,9 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
-          USE_PROD_CONFIG: 'true'
         run: |
           npm ci
+          npm run fetch-templates
           npm run build
           npm run zipdist
       - name: Upload dist artifact

.github/workflows/test-ui.yaml

@@ -30,7 +30,7 @@ jobs:
         with:
           repository: 'Comfy-Org/ComfyUI_devtools'
           path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
-          ref: '9d2421fd3208a310e4d0f71fca2ea0c985759c33'
+          ref: '49c8220be49120dbaff85f32813d854d6dff2d05'
 
       - uses: actions/setup-node@v4
         with:
@@ -39,6 +39,7 @@ jobs:
       - name: Build ComfyUI_frontend
         run: |
           npm ci
+          npm run fetch-templates
           npm run build
         working-directory: ComfyUI_frontend
 

.github/workflows/update-electron-types.yaml

@@ -32,7 +32,7 @@ jobs:
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v7
         with:
-          token: ${{ secrets.PR_GH_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
           commit-message: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'
           title: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'
           body: |

.gitignore

@@ -55,6 +55,3 @@ dist.zip
 
 # Temporary repository directory
 templates_repo/
-
-# Vite’s timestamped config modules
-vite.config.mts.timestamp-*.mjs

.i18nrc.cjs

@@ -4,13 +4,13 @@
 const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
-  modelName: 'gpt-4.1',
+  modelName: 'gpt-4',
   splitToken: 1024,
   entry: 'src/locales/en',
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr', 'es'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   `

README.md

@@ -67,19 +67,448 @@ The development of successive minor versions overlaps. For example, while versio
 | 3 | Mar 15-21 | Released | Feature Freeze | Development | 1.1.7 through 1.1.13 (daily)<br>1.2.0 through 1.2.6 (daily) |
 | 4 | Mar 22-28 | - | Released | Feature Freeze | 1.2.7 through 1.2.13 (daily)<br>1.3.0 through 1.3.6 (daily) |
 
-## Contributing
+## Release Summary
 
-We're building this frontend together and would love your help — no matter how you'd like to pitch in! You don't need to write code to make a difference.
+### Major features
 
-Here are some ways to get involved:
+<details id='feature-native-translation'>
+  <summary>v1.5: Native translation (i18n)</summary>
 
-- **Pull Requests:** Add features, fix bugs, or improve code health. Browse [issues](https://github.com/Comfy-Org/ComfyUI_frontend/issues) for inspiration.
-- **Vote on Features:** Give a 👍 to the feature requests you care about to help us prioritize.
-- **Verify Bugs:** Try reproducing reported issues and share your results (even if the bug doesn't occur!).
-- **Community Support:** Hop into our [Discord](https://www.comfy.org/discord) to answer questions or get help.
-- **Share & Advocate:** Tell your friends, tweet about us, or share tips to support the project.
+  ComfyUI now includes built-in translation support, replacing the need for third-party translation extensions. Select your language
+  in `Comfy > Locale > Language` to translate the interface into English, Chinese (Simplified), Russian, Japanese, or Korean. This native
+  implementation offers better performance, reliability, and maintainability compared to previous solutions.<br>
 
-Have another idea? Drop into Discord or open an issue, and let's chat!
+  More details available here: https://blog.comfy.org/p/native-localization-support-i18n
+</details>
+
+<details id='feature-mask-editor'>
+  <summary>v1.4: New mask editor</summary>
+
+  https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 implements a new mask editor.
+
+  ![image](https://github.com/user-attachments/assets/f0ea6ee5-00ee-4e5d-a09c-6938e86a1f17)
+</details>
+
+<details id='feature-integrated-server-terminal'>
+  <summary>v1.3.22: Integrated server terminal</summary>
+
+Press Ctrl + ` to toggle integrated terminal.
+
+https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94
+</details>
+
+<details id='feature-keybinding-customization'>
+  <summary>v1.3.7: Keybinding customization</summary>
+
+## Basic UI
+![image](https://github.com/user-attachments/assets/c84a1609-3880-48e0-a746-011f36beda68)
+
+## Reset button
+![image](https://github.com/user-attachments/assets/4d2922da-bb4f-4f90-8017-a8e4a0db07c7)
+
+## Edit Keybinding
+![image](https://github.com/user-attachments/assets/77626b7a-cb46-48f8-9465-e03120aac66a)
+![image](https://github.com/user-attachments/assets/79131a4e-75c6-4715-bd11-c6aaed887779)
+
+[rec.webm](https://github.com/user-attachments/assets/a3984ed9-eb28-4d47-86c0-7fc3efc2b5d0)
+
+</details>
+
+<details id='feature-node-library-sidebar'>
+  <summary>v1.2.4: Node library sidebar tab</summary>
+
+  #### Drag & Drop
+https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
+
+  #### Filter
+https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
+</details>
+
+<details id='feature-queue-sidebar'>
+  <summary>v1.2.0: Queue/History sidebar tab</summary>
+
+  https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
+</details>
+
+<details id='feature-node-search'>
+  <summary>v1.1.0: Node search box</summary>
+
+  #### Fuzzy search & Node preview
+  ![image](https://github.com/user-attachments/assets/94733e32-ea4e-4a9c-b321-c1a05db48709)
+
+  #### Release link with shift
+  https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
+</details>
+
+### QoL changes
+
+<details id='feature-nested-group'>
+  <summary>v1.3.32: **Litegraph** Nested group</summary>
+
+https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a
+</details>
+
+<details id='feature-group-selection'>
+  <summary>v1.3.24: **Litegraph** Group selection</summary>
+
+https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa
+</details>
+
+<details id='feature-toggle-link-visibility'>
+  <summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
+
+[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
+
+</details>
+
+<details id='feature-auto-widget-conversion'>
+  <summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
+
+Dropping a link of correct type on node widget will automatically convert the widget to input.
+
+[rec.webm](https://github.com/user-attachments/assets/15cea0b0-b225-4bec-af50-2cdb16dc46bf)
+
+</details>
+
+<details id='feature-pan-mode'>
+  <summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
+
+The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
+or by holding the space key.
+
+[rec.webm](https://github.com/user-attachments/assets/c7872532-a2ac-44c1-9e7d-9e03b5d1a80b)
+
+</details>
+
+<details id='feature-shift-drag-link-creation'>
+  <summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
+
+[rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
+
+</details>
+
+<details id='feature-optional-input-donuts'>
+  <summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
+
+![GYEIRidb0AYGO-v](https://github.com/user-attachments/assets/e6cde0b6-654b-4afd-a117-133657a410b1)
+
+</details>
+
+<details id='feature-group-title-edit'>
+  <summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
+
+https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
+
+</details>
+
+<details id='feature-group-selection-shortcut'>
+  <summary>v1.2.39: **Litegraph** Group selected nodes with Ctrl + G</summary>
+
+https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
+
+</details>
+
+<details id='feature-node-title-edit'>
+  <summary>v1.2.38: **Litegraph** Double click node title to edit</summary>
+
+https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
+
+</details>
+
+<details id='feature-drag-multi-link'>
+  <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
+
+https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
+
+https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
+
+</details>
+
+<details id='feature-auto-connect-link'>
+  <summary>v1.2.2: **Litegraph** auto connects to correct slot</summary>
+
+  #### Before
+  https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651
+
+  #### After
+  https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
+</details>
+
+<details id='feature-hide-text-overflow'>
+  <summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
+
+  https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
+</details>
+
+### Developer APIs
+
+<details>
+  <summary>v1.6.13: prompt/confirm/alert replacements for ComfyUI desktop</summary>
+
+Several browser-only APIs are not available in ComfyUI desktop's electron environment.
+
+- `window.prompt`
+- `window.confirm`
+- `window.alert`
+
+Please use the following APIs as replacements.
+
+```js
+// window.prompt
+window['app'].extensionManager.dialog
+  .prompt({
+    title: 'Test Prompt',
+    message: 'Test Prompt Message'
+  })
+  .then((value: string) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/c73f74d0-9bb4-4555-8d56-83f1be4a1d7e)
+
+```js
+// window.confirm
+window['app'].extensionManager.dialog
+  .confirm({
+    title: 'Test Confirm',
+    message: 'Test Confirm Message'
+  })
+  .then((value: boolean) => {
+    // Do something with the value user entered
+  })
+```
+
+![image](https://github.com/user-attachments/assets/8dec7a42-7443-4245-85be-ceefb1116e96)
+
+```js
+// window.alert
+window['app'].extensionManager.toast
+  .addAlert("Test Alert")
+```
+
+![image](https://github.com/user-attachments/assets/9b18bdca-76ef-4432-95de-5cd2369684f2)
+
+</details>
+
+<details>
+  <summary>v1.3.34: Register about panel badges</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  aboutPageBadges: [
+    {
+      label: 'Test Badge',
+      url: 'https://example.com',
+      icon: 'pi pi-box'
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/099e77ee-16ad-4141-b2fc-5e9d5075188b)
+
+</details>
+
+<details id='extension-api-bottom-panel-tabs'>
+  <summary>v1.3.22: Register bottom panel tabs</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension',
+  bottomPanelTabs: [
+    {
+      id: 'TestTab',
+      title: 'Test Tab',
+      type: 'custom',
+      render: (el) => {
+        el.innerHTML = '<div>Custom tab</div>'
+      }
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64)
+
+</details>
+
+<details id='extension-api-settings'>
+  <summary>v1.3.22: New settings API</summary>
+
+Legacy settings API.
+
+```js
+// Register a new setting
+app.ui.settings.addSetting({
+  id: 'TestSetting',
+  name: 'Test Setting',
+  type: 'text',
+  defaultValue: 'Hello, world!'
+})
+
+// Get the value of a setting
+const value = app.ui.settings.getSettingValue('TestSetting')
+
+// Set the value of a setting
+app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')
+```
+
+New settings API.
+
+```js
+// Register a new setting
+app.registerExtension({
+  name: 'TestExtension1',
+  settings: [
+    {
+      id: 'TestSetting',
+      name: 'Test Setting',
+      type: 'text',
+      defaultValue: 'Hello, world!'
+    }
+  ]
+})
+
+// Get the value of a setting
+const value = app.extensionManager.setting.get('TestSetting')
+
+// Set the value of a setting
+app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
+```
+
+</details>
+
+<details id='extension-api-commands-keybindings'>
+  <summary>v1.3.7: Register commands and keybindings</summary>
+
+  Extensions can call the following API to register commands and keybindings. Do
+  note that keybindings defined in core cannot be overwritten, and some keybindings
+  are reserved by the browser.
+
+```js
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'TestCommand',
+        function: () => {
+          alert('TestCommand')
+        }
+      }
+    ],
+    keybindings: [
+      {
+        combo: { key: 'k' },
+        commandId: 'TestCommand'
+      }
+    ]
+  })
+```
+
+</details>
+
+<details id='extension-api-topbar-menu'>
+  <summary>v1.3.1: Extension API to register custom topbar menu items</summary>
+
+  Extensions can call the following API to register custom topbar menu items.
+
+```js
+  app.registerExtension({
+    name: 'TestExtension1',
+    commands: [
+      {
+        id: 'foo-id',
+        label: 'foo',
+        function: () => {
+          alert(1)
+        }
+      }
+    ],
+    menuCommands: [
+      {
+        path: ['ext', 'ext2'],
+        commands: ['foo-id']
+      }
+    ]
+  })
+```
+
+![image](https://github.com/user-attachments/assets/ae7b082f-7ce9-4549-a446-4563567102fe)
+</details>
+
+<details id='extension-api-toast'>
+  <summary>v1.2.27: Extension API to add toast message</summary>i
+
+  Extensions can call the following API to add toast messages.
+
+```js
+  app.extensionManager.toast.add({
+    severity: 'info',
+    summary: 'Loaded!',
+    detail: 'Extension loaded!',
+    life: 3000
+  })
+```
+Documentation of all supported options can be found here: <https://primevue.org/toast/#api.toast.interfaces.ToastMessageOptions>
+
+![image](https://github.com/user-attachments/assets/de02cd7e-cd81-43d1-a0b0-bccef92ff487)
+</details>
+
+<details id='extension-api-sidebar-tab'>
+  <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
+
+  Extensions now can call the following API to register a sidebar tab.
+
+```js
+  app.extensionManager.registerSidebarTab({
+    id: "search",
+    icon: "pi pi-search",
+    title: "search",
+    tooltip: "search",
+    type: "custom",
+    render: (el) => {
+      el.innerHTML = "<div>Custom search tab</div>";
+    },
+  });
+```
+
+The list of supported icons can be found here: <https://primevue.org/icons/#list>
+
+We will support custom icons later.
+
+![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
+</details>
+
+<details id='extension-api-selection-toolbox'>
+  <summary>v1.10.9: Selection Toolbox API</summary>
+
+Extensions can register commands that appear in the selection toolbox when specific items are selected on the canvas.
+
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  commands: [
+    {
+      id: 'test.selection.command',
+      label: 'Test Command',
+      icon: 'pi pi-star',
+      function: () => {
+        // Command logic here
+      }
+    }
+  ],
+  // Return an array of command IDs to show in the selection toolbox
+  // when an item is selected
+  getSelectionToolboxCommands: (selectedItem) => ['test.selection.command']
+})
+```
+
+The selection toolbox will display the command button when items are selected:
+![Image](https://github.com/user-attachments/assets/28d91267-c0a9-4bd5-a7c4-36e8ec44c9bd)
+
+</details>
 
 ## Development
 
@@ -128,12 +557,6 @@ After you start the dev server, you should see following logs:
 Make sure your desktop machine and touch device are on the same network. On your touch device,
 navigate to `http://<server_ip>:5173` (e.g. `http://192.168.2.20:5173` here), to access the ComfyUI frontend.
 
-### Recommended Code Editor Configuration
-
-This project includes `.vscode/launch.json.default` and `.vscode/settings.json.default` files with recommended launch and workspace settings for editors that use the `.vscode` directory (e.g., VS Code, Cursor, etc.).
-
-We’ve also included a list of recommended extensions in `.vscode/extensions.json`. Your editor should detect this file and show a human friendly list in the Extensions panel, linking each entry to its marketplace page.
-
 ### Unit Test
 
 - `npm i` to install all dependencies

browser_tests/assets/widgets/load_animated_webp.json

@@ -1,11 +0,0 @@
-{
-  "8": {
-    "inputs": {
-      "image": "animated_web.webp"
-    },
-    "class_type": "DevToolsLoadAnimatedImageTest",
-    "_meta": {
-      "title": "Load Animated Image"
-    }
-  }
-}

browser_tests/assets/widgets/save_animated_webp.json

@@ -1,60 +0,0 @@
-{
-  "id": "3f1fcbf9-f9de-4935-8fad-401813f61b13",
-  "revision": 0,
-  "last_node_id": 10,
-  "last_link_id": 4,
-  "nodes": [
-    {
-      "id": 9,
-      "type": "SaveAnimatedWEBP",
-      "pos": [336, 104],
-      "size": [210, 368],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 4
-        }
-      ],
-      "outputs": [],
-      "properties": {},
-      "widgets_values": ["ComfyUI", 6, true, 80, "default"]
-    },
-    {
-      "id": 10,
-      "type": "DevToolsLoadAnimatedImageTest",
-      "pos": [64, 104],
-      "size": [210, 316],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [4]
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "DevToolsLoadAnimatedImageTest"
-      },
-      "widgets_values": ["animated_web.webp", "image"]
-    }
-  ],
-  "links": [[4, 10, 0, 9, 0, "IMAGE"]],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "frontendVersion": "1.17.0"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -463,129 +463,87 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
-  async dragAndDropExternalResource(
+  async dragAndDropFile(
+    fileName: string,
     options: {
-      fileName?: string
-      url?: string
       dropPosition?: Position
     } = {}
   ) {
-    const { dropPosition = { x: 100, y: 100 }, fileName, url } = options
+    const { dropPosition = { x: 100, y: 100 } } = options
 
-    if (!fileName && !url)
-      throw new Error('Must provide either fileName or url')
+    const filePath = this.assetPath(fileName)
 
-    const evaluateParams: {
-      dropPosition: Position
-      fileName?: string
-      fileType?: string
-      buffer?: Uint8Array | number[]
-      url?: string
-    } = { dropPosition }
+    // Read the file content
+    const buffer = fs.readFileSync(filePath)
 
-    // Dropping a file from the filesystem
-    if (fileName) {
-      const filePath = this.assetPath(fileName)
-      const buffer = fs.readFileSync(filePath)
-
-      const getFileType = (fileName: string) => {
-        if (fileName.endsWith('.png')) return 'image/png'
-        if (fileName.endsWith('.svg')) return 'image/svg+xml'
-        if (fileName.endsWith('.webp')) return 'image/webp'
-        if (fileName.endsWith('.webm')) return 'video/webm'
-        if (fileName.endsWith('.json')) return 'application/json'
-        if (fileName.endsWith('.glb')) return 'model/gltf-binary'
-        return 'application/octet-stream'
-      }
-
-      evaluateParams.fileName = fileName
-      evaluateParams.fileType = getFileType(fileName)
-      evaluateParams.buffer = [...new Uint8Array(buffer)]
+    // Get file type
+    const getFileType = (fileName: string) => {
+      if (fileName.endsWith('.png')) return 'image/png'
+      if (fileName.endsWith('.webp')) return 'image/webp'
+      if (fileName.endsWith('.webm')) return 'video/webm'
+      if (fileName.endsWith('.json')) return 'application/json'
+      if (fileName.endsWith('.glb')) return 'model/gltf-binary'
+      return 'application/octet-stream'
     }
 
-    // Dropping a URL (e.g., dropping image across browser tabs in Firefox)
-    if (url) evaluateParams.url = url
+    const fileType = getFileType(fileName)
 
-    // Execute the drag and drop in the browser
-    await this.page.evaluate(async (params) => {
-      const dataTransfer = new DataTransfer()
-
-      // Add file if provided
-      if (params.buffer && params.fileName && params.fileType) {
-        const file = new File(
-          [new Uint8Array(params.buffer)],
-          params.fileName,
-          {
-            type: params.fileType
-          }
-        )
+    await this.page.evaluate(
+      async ({ buffer, fileName, fileType, dropPosition }) => {
+        const file = new File([new Uint8Array(buffer)], fileName, {
+          type: fileType
+        })
+        const dataTransfer = new DataTransfer()
         dataTransfer.items.add(file)
-      }
 
-      // Add URL data if provided
-      if (params.url) {
-        dataTransfer.setData('text/uri-list', params.url)
-        dataTransfer.setData('text/x-moz-url', params.url)
-      }
+        const targetElement = document.elementFromPoint(
+          dropPosition.x,
+          dropPosition.y
+        )
 
-      const targetElement = document.elementFromPoint(
-        params.dropPosition.x,
-        params.dropPosition.y
-      )
-
-      if (!targetElement) {
-        console.error('No element found at drop position:', params.dropPosition)
-        return { success: false, error: 'No element at position' }
-      }
-
-      const eventOptions = {
-        bubbles: true,
-        cancelable: true,
-        dataTransfer,
-        clientX: params.dropPosition.x,
-        clientY: params.dropPosition.y
-      }
-
-      const dragOverEvent = new DragEvent('dragover', eventOptions)
-      const dropEvent = new DragEvent('drop', eventOptions)
-
-      Object.defineProperty(dropEvent, 'preventDefault', {
-        value: () => {},
-        writable: false
-      })
-
-      Object.defineProperty(dropEvent, 'stopPropagation', {
-        value: () => {},
-        writable: false
-      })
-
-      targetElement.dispatchEvent(dragOverEvent)
-      targetElement.dispatchEvent(dropEvent)
-
-      return {
-        success: true,
-        targetInfo: {
-          tagName: targetElement.tagName,
-          id: targetElement.id,
-          classList: Array.from(targetElement.classList)
+        if (!targetElement) {
+          console.error('No element found at drop position:', dropPosition)
+          return { success: false, error: 'No element at position' }
         }
-      }
-    }, evaluateParams)
+
+        const eventOptions = {
+          bubbles: true,
+          cancelable: true,
+          dataTransfer,
+          clientX: dropPosition.x,
+          clientY: dropPosition.y
+        }
+
+        const dragOverEvent = new DragEvent('dragover', eventOptions)
+        const dropEvent = new DragEvent('drop', eventOptions)
+
+        Object.defineProperty(dropEvent, 'preventDefault', {
+          value: () => {},
+          writable: false
+        })
+        Object.defineProperty(dropEvent, 'stopPropagation', {
+          value: () => {},
+          writable: false
+        })
+
+        targetElement.dispatchEvent(dragOverEvent)
+        targetElement.dispatchEvent(dropEvent)
+
+        return {
+          success: true,
+          targetInfo: {
+            tagName: targetElement.tagName,
+            id: targetElement.id,
+            classList: Array.from(targetElement.classList)
+          }
+        }
+      },
+      { buffer: [...new Uint8Array(buffer)], fileName, fileType, dropPosition }
+    )
 
     await this.nextFrame()
   }
 
-  async dragAndDropFile(
-    fileName: string,
-    options: { dropPosition?: Position } = {}
-  ) {
-    return this.dragAndDropExternalResource({ fileName, ...options })
-  }
-
-  async dragAndDropURL(url: string, options: { dropPosition?: Position } = {}) {
-    return this.dragAndDropExternalResource({ url, ...options })
-  }
-
   async dragNode2() {
     await this.dragAndDrop({ x: 622, y: 400 }, { x: 622, y: 300 })
     await this.nextFrame()
@@ -924,16 +882,10 @@ export class ComfyPage {
       return window['app'].canvas.ds.convertOffsetToCanvas(pos)
     }, pos)
   }
-
-  /** Get number of DOM widgets on the canvas. */
-  async getDOMWidgetCount() {
-    return await this.page.locator('.dom-widget').count()
-  }
-
   async getNodeRefById(id: NodeId) {
     return new NodeReference(id, this)
   }
-  async getNodes(): Promise<LGraphNode[]> {
+  async getNodes() {
     return await this.page.evaluate(() => {
       return window['app'].graph.nodes
     })

browser_tests/tests/colorPalette.spec.ts

@@ -48,7 +48,6 @@ const customColorPalettes: Record<string, Palette> = {
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',
         WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
-        WIDGET_DISABLED_TEXT_COLOR: '#646464',
         LINK_COLOR: '#9A9',
         EVENT_LINK_COLOR: '#A86',
         CONNECTING_LINK_COLOR: '#AFA'
@@ -112,7 +111,6 @@ const customColorPalettes: Record<string, Palette> = {
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',
         WIDGET_SECONDARY_TEXT_COLOR: '#97979c',
-        WIDGET_DISABLED_TEXT_COLOR: '#646464',
         LINK_COLOR: '#9A9',
         EVENT_LINK_COLOR: '#A86',
         CONNECTING_LINK_COLOR: '#AFA'

browser_tests/tests/dialog.spec.ts

@@ -341,30 +341,3 @@ test.describe('Error dialog', () => {
     await expect(errorDialog).toBeVisible()
   })
 })
-
-test.describe('Signin dialog', () => {
-  test('Paste content to signin dialog should not paste node on canvas', async ({
-    comfyPage
-  }) => {
-    const nodeNum = (await comfyPage.getNodes()).length
-    await comfyPage.clickEmptyLatentNode()
-    await comfyPage.ctrlC()
-
-    const textBox = comfyPage.widgetTextBox
-    await textBox.click()
-    await textBox.fill('test_password')
-    await textBox.press('Control+a')
-    await textBox.press('Control+c')
-
-    await comfyPage.page.evaluate(() => {
-      window['app'].extensionManager.dialog.showSignInDialog()
-    })
-
-    const input = comfyPage.page.locator('#comfy-org-sign-in-password')
-    await input.waitFor({ state: 'visible' })
-    await input.press('Control+v')
-    await expect(input).toHaveValue('test_password')
-
-    expect(await comfyPage.getNodes()).toHaveLength(nodeNum)
-  })
-})

browser_tests/tests/domWidget.spec.ts

@@ -24,27 +24,4 @@ test.describe('DOM Widget', () => {
     await expect(firstMultiline).not.toBeVisible()
     await expect(lastMultiline).not.toBeVisible()
   })
-
-  test('Position update when entering focus mode', async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.executeCommand('Workspace.ToggleFocusMode')
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('focus-mode-on.png')
-  })
-
-  // No DOM widget should be created by creation of interim LGraphNode objects.
-  test('Copy node with DOM widget by dragging + alt', async ({ comfyPage }) => {
-    const initialCount = await comfyPage.getDOMWidgetCount()
-
-    // TextEncodeNode1
-    await comfyPage.page.mouse.move(618, 191)
-    await comfyPage.page.keyboard.down('Alt')
-    await comfyPage.page.mouse.down()
-    await comfyPage.page.mouse.move(100, 100)
-    await comfyPage.page.mouse.up()
-    await comfyPage.page.keyboard.up('Alt')
-
-    const finalCount = await comfyPage.getDOMWidgetCount()
-    expect(finalCount).toBe(initialCount + 1)
-  })
 })

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -3,41 +3,17 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Load Workflow in Media', () => {
-  const fileNames = [
+  ;[
     'workflow.webp',
     'edited_workflow.webp',
     'no_workflow.webp',
     'large_workflow.webp',
     'workflow.webm',
-    // Skipped due to 3d widget unstable visual result.
-    // 3d widget shows grid after fully loaded.
-    // 'workflow.glb',
-    'workflow.mp4',
-    'workflow.mov',
-    'workflow.m4v',
-    'workflow.svg'
-  ]
-  fileNames.forEach(async (fileName) => {
-    test(`Load workflow in ${fileName} (drop from filesystem)`, async ({
-      comfyPage
-    }) => {
+    'workflow.glb'
+  ].forEach(async (fileName) => {
+    test(`Load workflow in ${fileName}`, async ({ comfyPage }) => {
       await comfyPage.dragAndDropFile(fileName)
       await expect(comfyPage.canvas).toHaveScreenshot(`${fileName}.png`)
     })
   })
-
-  const urls = [
-    'https://comfyanonymous.github.io/ComfyUI_examples/hidream/hidream_dev_example.png'
-  ]
-  urls.forEach(async (url) => {
-    test(`Load workflow from URL ${url} (drop from different browser tabs)`, async ({
-      comfyPage
-    }) => {
-      await comfyPage.dragAndDropURL(url)
-      const readableName = url.split('/').pop()
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        `dropped_workflow_url_${readableName}.png`
-      )
-    })
-  })
 })

browser_tests/tests/nodeBadge.spec.ts

@@ -92,20 +92,4 @@ test.describe('Node badge color', () => {
       'node-badge-unknown-color-palette.png'
     )
   })
-
-  test('Can show node badge with light color palette', async ({
-    comfyPage
-  }) => {
-    await comfyPage.setSetting(
-      'Comfy.NodeBadge.NodeIdBadgeMode',
-      NodeBadgeMode.ShowAll
-    )
-    await comfyPage.setSetting('Comfy.ColorPalette', 'light')
-    await comfyPage.nextFrame()
-    // Click empty space to trigger canvas re-render.
-    await comfyPage.clickEmptySpace()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'node-badge-light-color-palette.png'
-    )
-  })
 })