mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-08 00:50:05 +00:00
036675bb49f17fafe70862cbd6ff87f95f3304ef
121 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
|
278d491030 |
refactor: move ellipsis and punctuation into i18n translation strings (#8573)
## Summary
Move ellipsis and punctuation characters into i18n translation strings
for proper internationalization support.
## Changes
- Add 12 new translation keys with punctuation included:
- Placeholder keys with trailing ellipsis (e.g.,
`searchNodesPlaceholder: "Search Nodes..."`)
- `downloadWithSize` with interpolation: `"Download ({size})"`
- `completedWithCheckmark`: `"Completed ✓"`
- Prompt keys with colons (e.g., `enterNewNamePrompt: "Enter new
name:"`)
- Update 20 files to use new translation keys instead of string
concatenation
## Review Focus
This eliminates string concatenation patterns like `$t('key') + '...'`
that break proper internationalization, since different languages may
use different punctuation or may not need ellipsis/colons in the same
contexts.
Fixes #7333
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Standardized localization across the app: unified search placeholders
and input hints; updated dialog prompt texts for renaming,
saving/exporting, and related prompts.
* **New Features**
* Download buttons now show file size via localized text.
* Completed status displays a localized label with a checkmark.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8573-refactor-move-ellipsis-and-punctuation-into-i18n-translation-strings-2fc6d73d365081828ad3f257bcac7799)
by [Unito](https://www.unito.io)
|
||
|
|
f2d5bfab73 |
test(browser): refactor browser tests for reliability and maintainability (#8510)
## Summary Major refactoring of browser tests to improve reliability, maintainability, and type safety. ## Changes ### Test Infrastructure Decomposition - Decomposed `ComfyPage.ts` (~1000 lines) into focused helpers: - `CanvasHelper`, `DebugHelper`, `SubgraphHelper`, `NodeOperationsHelper` - `SettingsHelper`, `WorkflowHelper`, `ClipboardHelper`, `KeyboardHelper` - Created `ContextMenu` page object, `BaseDialog` base class, and `BottomPanel` page object - Extracted `DefaultGraphPositions` constants ### Locator Stability - Added `data-testid` attributes to Vue components (sidebar, dialogs, node library) - Created centralized `selectors.ts` with test ID constants - Replaced fragile CSS selectors (`.nth()`, `:nth-child()`) with `getByTestId`/`getByRole` ### Performance & Reliability - Removed `setTimeout` anti-patterns (replaced with `waitForFunction`) - Replaced `waitForTimeout` with retrying assertions - Replaced hardcoded coordinates with computed `NodeReference` positions - Enforced LF line endings for all text files ### Type Safety - Enabled `no-explicit-any` lint rule for browser_tests via oxlint - Purged `as any` casts from browser_tests - Added Window type augmentation for standardized window access - Added proper type annotations throughout ### Bug Fixes - Restored `ExtensionManager` API contract - Removed test-only settings from production schema - Fixed flaky selectors and missing test setup ## Testing - All browser tests pass - Typecheck passes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Tests** * Overhauled browser E2E test infrastructure with many new helpers/fixtures, updated test APIs, and CI test container image bumped for consistency. * **Chores** * Standardized line endings and applied stricter lint rules for browser tests; workspace dependency version updated. * **Documentation** * Updated Playwright and TypeScript testing guidance and test-run commands. * **UI** * Added stable data-testids to multiple components to improve testability. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> |
||
|
|
47113b117e |
refactor: migrate keybindings to DDD structure (#8369)
## Summary Migrate keybindings domain to `src/platform/keybindings/` following DDD principles. ## Changes - **What**: Consolidate keybinding-related code (types, store, service, defaults, reserved keys) into a single domain module with flat structure - Extracted `KeyComboImpl` and `KeybindingImpl` classes into separate files - Updated all consumers to import from new location - Colocated tests with source files - Updated stores/README.md and services/README.md to remove migrated entries ## Review Focus - Verify all import paths were updated correctly - Check that the flat structure is appropriate (vs nested core/data/ui layers) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8369-refactor-migrate-keybindings-to-DDD-structure-2f66d73d36508120b169dc737075fb45) by [Unito](https://www.unito.io) --------- Co-authored-by: Subagent 5 <subagent@example.com> Co-authored-by: Amp <amp@ampcode.com> |
||
|
|
941cd2b4a5 |
refactor: improve TypeScript patterns in test files (Group 1/8) (#8253)
## Summary Improves type safety in test files by replacing unsafe type patterns with proper TypeScript idioms. ## Changes - Define typed `TestWindow` interface extending `Window` for Playwright tests with custom properties - Use `Partial<HTMLElement>` with single type assertion for DOM element mocks - Remove redundant type imports - Fix `console.log` → `console.warn` in test fixture ## Files Changed 16 test files across browser_tests, packages, and src/components ## Test Plan - ✅ `pnpm typecheck` passes - ✅ No new `any` types introduced - ✅ All pre-commit hooks pass ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8253-refactor-improve-TypeScript-patterns-in-test-files-Group-1-8-2f16d73d365081548f9ece7bcf0525ee) by [Unito](https://www.unito.io) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> |
||
|
|
47714c2740 |
Always wait for next tick before layout init (#7591)
A frequent pattern is to add a node to the graph, and then update the nodes position afterwards. Some of these cases (like subgraph unpacking) can set the node position in advance, but others, (like importA1111) require information on nodes in order to perform arranging. Alternatives, like allowing code to either modify `app.configuringGraph` or otherwise set a temporary state were considered, but create the same problem of requiring fixes in many places. As a proposed alternative, when a node is created, an extra tick of delay is always added before initializing layout. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7591-Always-wait-for-next-tick-before-layout-init-2cc6d73d365081f4ababc38020645670) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL0424@gmail.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
6714b958c7 |
chore: remove dead browser test fixture after Jobs API migration (#8099)
## Summary Removes which is dead code left over from the Jobs API migration. ## Details This fixture file: - References legacy and types that were removed in the Jobs API migration - Is not referenced anywhere in the codebase - Cannot be used since the types it imports no longer exist ## Related PRs Follow-up cleanup to the Jobs API migration: - #7169 - Add Jobs API infrastructure (PR 1 of 3) - #7170 - Migrate to Jobs API (PR 2 of 3) - #7650 - Encapsulate error extraction in TaskItemImpl getters ## Testing - ✅ Typecheck passes - ✅ No references to this file in the codebase - ✅ File imports types that no longer exist (cannot be used) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8099-chore-remove-dead-browser-test-fixture-after-Jobs-API-migration-2ea6d73d36508172be89c9c5a74b33ee) by [Unito](https://www.unito.io) |
||
|
|
c0a649ef43 |
refactor: encapsulate error extraction in TaskItemImpl getters (#7650)
## Summary - Add `errorMessage` and `executionError` getters to `TaskItemImpl` that extract error info from status messages - Update `useJobErrorReporting` composable to use these getters instead of standalone function - Remove the standalone `extractExecutionError` function This encapsulates error extraction within `TaskItemImpl`, preparing for the Jobs API migration where the underlying data format will change but the getter interface will remain stable. ## Test plan - [x] All existing tests pass - [x] New tests added for `TaskItemImpl.errorMessage` and `TaskItemImpl.executionError` getters - [x] TypeScript, lint, and knip checks pass 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7650-refactor-encapsulate-error-extraction-in-TaskItemImpl-getters-2ce6d73d365081caae33dcc7e1e07720) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> |
||
|
|
ebca0cb1e0 |
Fix vue node slot position calculation (#7877)
## Summary Fix slot position for Vue nodes using LiteGraph calculation Fixes #7446 ## Changes - Updated getInput/OutputPos to call getSlotPosition which handles positions for both LiteGraph & Vue nodes correctly - Add regression test ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7877-Fix-vue-node-slot-position-calculation-2e16d73d365081219afef0e4ebfb0620) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
97a78f4a35 |
Implement vue math (#7759)
Adds support for entering math inside number widgets in vue mode  Migrates components to simple html elements (div and button) by borrowing styling from the (reverted) reka-ui migration in #6985. The existing (evil) litegraph eval code is extracted as a utility function and reused. This PR means we're entirely writing our own NumberField. Also adds support for scrubbing widgets like in litegraph  ### Known Issue - Scrubbing causes text to be highlighted, ~~starting a scrub from highlighted text will instead drag the text~~. - It seems this can only be prevented with `pointerdown.prevent`, but this requires a manual `input.focus()` which does not place the cursor at location of mouse click. (Obligatory: _It won't do you a bit of good to review math_) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7759-Implement-vue-math-2d46d73d365081b9acd4d6422669016e) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: DrJKL <DrJKL0424@gmail.com> |
||
|
|
7b68b19f11 |
Component: The Rest of the PrimeVue buttons (#7649)
## Summary Automated initial change, cleaned up manually. Please check the screenshot changes. Includes a11y updates to icon buttons. Doesn't hit the buttons in Desktop. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> |
||
|
|
585d46d4fb |
fix: inner groups being moved double when moving outer group (in vue mode) (#7447)
## Summary Fixes issue when dragging a group that had inner groups when in vue mode. When dragging the outer group in Vue mode: 1. getAllNestedItems(selected) returns ALL items: outer group + inner groups + nodes 2. moveChildNodesInGroupVueMode loops through all items 3. For outer group G1: calls G1.move(delta, true) then moveGroupChildren(G1, ...) 4. moveGroupChildren calls G2.move(delta) (no skipChildren) - this moves G2 AND G2's children! 5. Then the loop reaches G2: calls G2.move(delta, true) - moves G2 again 6. Plus moveGroupChildren(G2, ...) processes G2's children again This PR fixes it by adding `skipChildren=true` to the `move` call. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7447-fix-inner-groups-being-moved-double-when-moving-outer-group-in-vue-mode-2c86d73d365081ce97abec682f2a8518) by [Unito](https://www.unito.io) |
||
|
|
b22ba97a13 |
Support "control after generate" in vue (#6985)
Continuation of #6034 with - Updated synchronization for seed - Properly truncates the displayed widget value for the button - Synchronizes control after generate state with litegraph and allows for serialization Several issues from original PR have not (yet) been addressed, but are likely better moved to future PR - fix step value being 10 (legacy system) - ensure it works with COMBO (Fixed in #7095) - ensure it works with FLOAT (Fixed in #7095) - either implement or remove the config button functionality - think it should open settings? <img width="280" height="694" alt="image" src="https://github.com/user-attachments/assets/f36f1cb0-237d-4bfc-bff1-e4976775cf98" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6985-Support-control-after-generate-in-vue-2b86d73d365081d8b01ce489d887ff00) by [Unito](https://www.unito.io) --------- Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
97fa128999 |
fix: flaky e2e test for dropping assets on nodes (#7352)
Fix flaky "Can drag-and-drop animated webp image" test that was reading the widget value before the upload completed, causing intermittent failures where filenames appeared truncated. Added `waitForUpload` option to `dragAndDropFile` helper that waits for the `/upload/` response before returning. This is opt-in since not all drag-and-drop operations trigger uploads (e.g., loading workflows from media files). |
||
|
|
04286c033a |
hotfix: stabilize flaky workflow sidebar browser tests (#7280)
## Summary - Fix flaky workflow sidebar browser tests that were failing in headless mode - Add retry logic for menu hover operations in Topbar - Add proper timing/wait helpers for dialog masks and workflow service completion - Fix test isolation issues in setupWorkflowsDirectory and drop workflow test ## Test plan - [x] Run `pnpm test:browser -- browser_tests/tests/sidebar/workflows.spec.ts` multiple times - [x] Verify the 3 previously failing tests now pass consistently: - "Can overwrite other workflows with save as" - "Can rename nested workflow from opened workflow item" - "Can drop workflow from workflows sidebar" ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7280-hotfix-stabilize-flaky-workflow-sidebar-browser-tests-2c46d73d365081c5b3badfafe35a63dc) by [Unito](https://www.unito.io) --------- Co-authored-by: Terry Jia <terryjia88@gmail.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Luke Mino-Altherr <luke@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com> |
||
|
|
5139e0564e |
Style: Font Consistency (#7220)
## Summary Reduce lower level font definitions in most places. Default to Inter. See #6912 ## Review Focus Comic Sans is still an option... ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7220-Style-Font-Consistency-2c26d73d365081348f2dd8909dd9bb8f) by [Unito](https://www.unito.io) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
5c01861f4e |
Tests: Playwright test timeouts (#7231)
## Summary See where we can use proper DOM waiting instead of waitForTimeout. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7231-WIP-Playwright-test-timeouts-2c36d73d3650812b966ac3d9c338dfd4) by [Unito](https://www.unito.io) |
||
|
|
f74c176423 |
Cleanup: Properties Panel (#7137)
## Summary - Code cleanup - Copy, padding, color, alignment of components - Subgraph Edit mode changes - Partial fix for the Node Info location (need to do context menu still) - Editing node title ### Still to-do - Bi-directionality in values ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7137-WIP-Cleanup-Properties-Panel-2be6d73d3650813e9430f6bcb09dfb4d) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
2b751200be |
test: add setting to ignore version compatibility toast warnings in e2e tests (#7004)
There's a warning toast shown if the frontend is considered out-of-date (relative to the version in the requirements.txt of comfyanonymous/ComfyUI). As a result, e2e tests run on older release branches (e.g., when backporting or hotfixing) can sometimes trigger the warning which obviously causes visual regression tests to fail. This PR adds a hidden setting to disable the warning and sets it to `true` in the e2e test fixtures. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7004-test-add-setting-to-ignore-version-compatibility-toast-warnings-in-e2e-tests-2b86d73d3650812d9e07f54a0c86b996) by [Unito](https://www.unito.io) |
||
|
|
9da82f47ef |
Feat: Alt+Drag to clone - Vue Nodes (#6789)
## Summary Replicate the alt+drag to clone behavior present in litegraph. ## Changes - **What**: Simplify the interaction/drag handling, now with less state! - **What**: Alt+Click+Drag a node to clone it ## Screenshots (if applicable) https://github.com/user-attachments/assets/469e33c2-de0c-4e64-a344-1e9d9339d528 <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6789-WIP-Alt-Drag-to-clone-Vue-Nodes-2b16d73d36508102a871ffe97ed2831f) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
e563c1be75 |
hotfix: Stop clicks on the textarea from propagating to the node itself (#6788)
## Summary Selecting text shouldn't drag the node. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6788-hotfix-Stop-clicks-on-the-textarea-from-propagating-to-the-node-itself-2b16d73d3650819c8d0dc427d5758580) by [Unito](https://www.unito.io) |
||
|
|
26578981d4 |
Remove queue sidebar tab (#6724)
## Summary - drop the queue sidebar entry, its component, and the supporting composable so only the overlay-based queue UI remains - clean up the related tests and keybindings so nothing references the removed tab - prune the unused queue task card components to keep the repo tidy - remove unused queue sidebar translations and command strings across all locales ## Testing - pnpm typecheck - pnpm lint:fix ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6724-Remove-queue-sidebar-tab-2ae6d73d3650811db0d4c5ad4c5ffc8d) by [Unito](https://www.unito.io) --------- Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com> |
||
|
|
b27c741d7d |
Feat/vue nodes try it now banner (#6362)
## Summary Banner to try vue nodes. Clicking try it now will flip shouldRenderVueNodes = true. ## Screenshots (if applicable) <img width="1512" height="824" alt="image" src="https://github.com/user-attachments/assets/dfd4bdc3-6753-45ee-86f1-ed7dc077f868" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6362-Feat-vue-nodes-try-it-now-banner-29b6d73d365081c29f04f9126f06ee9d) by [Unito](https://www.unito.io) |
||
|
|
f629d325b2 |
Feat/vue nodes arrange alg (#6212)
## Summary ### Problem: The Vue nodes renderer/feature introduces new designs for each node i.e. the equivalent Litegraph node design is smaller and the vue node design is non uniformly larger. ### Example: Litegraph Ksampler node: 200w x 220h <img width="200" height="220" alt="image" src="https://github.com/user-attachments/assets/eef0117b-7e02-407d-98ab-c610fd1ec54c" /> Vue Node Ksampler node: 445w x 430h <img width="445" height="430" alt="image" src="https://github.com/user-attachments/assets/e78d9d45-5b32-4e8d-bf1c-bce1c699037f" /> This means if users load a workflow in Litegraph and then switches to Vue nodes renderer the nodes are using the same Litegraph positions which would cause a visual overlap and overall look broken. ### Example: <img width="1510" height="726" alt="image" src="https://github.com/user-attachments/assets/3b7ae9d2-6057-49b2-968e-c531a969fac4" /> <img width="1475" height="850" alt="image" src="https://github.com/user-attachments/assets/ea10f361-09bd-4daa-97f1-6b45b5dde389" /> ### Solution: Scale the positions of the nodes in lite graph radially from the center of the bounds of all nodes. And then simply move the Vue nodes to those new positions. 1. Get the `center of the bounds of all LG nodes`. 2. Get the `xy of each LG node`. 3. Get the vector from `center of the bounds of all LG nodes` `-` `xy of each LG node`. 4. Scale it by a factor (e.g. 1.75x which is the average Vue node size increase plus some visual padding.) 5. Move each Vue node to the scaled `xy of each LG node`. Result: The nodes are spaced apart removing overlaps while keeping the spatial layout intact. <img width="2173" height="1096" alt="image" src="https://github.com/user-attachments/assets/7817d866-4051-47bb-a589-69ca77a0bfd3" /> ### Further concerns. This vector scaling algorithm needs to run once per workflow when in vue nodes. This means when in Litegraph and switching to Vue nodes, it needs to run before the nodes render. And then now that the entire app is in vue nodes, we need to run it each time we load a workflow. However, once its run, we do not need to run it again. Therefore we must persist a flag that it has run somewhere. This PR also adds that feature by leveraging the `extra` field in the workflow schema. --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: JakeSchroeder <jake@axiom.co> |
||
|
|
984ebef416 |
Floating Menus - UI rework (#5980)
## Summary
Enhancing and further modernizing the UI, giving users more usable area
whilst keeping farmiliar positioning and feel of elements.
## Changes
- **What**: Significant restructure of the UI elements, changing
elements from large blocks to floating elements, updating:
- Side toolbar menu (floating style, supports small/normal mode,
combines to scroll on height overflow)
- Bottom tabs panel (floating style, tabs redesigned)
- Action bar (support for docking/undocking menu)
- Added login/user menu button to top right
- Restyled breadcrumbs (still collapse when overflows)
- Add litegraph support for fps info position (so it isn't covered by
the sidebar)
- **Breaking**:
- Removed various elements and added new ones, I have tested custom
sidebars, custom actions, etc but if scripts are inserting elements into
"other" elements they may have been (re)moved.
- Remove support for bottom menu
- Remove support for 2nd-row tabs
## Screenshots
<img width="1116" height="907" alt="ui"
src="https://github.com/user-attachments/assets/b040a215-67d3-4c88-8c4d-f402a16a34f6"
/>
https://github.com/user-attachments/assets/571dbda5-01ec-47e8-b235-ee1b88c93dd0
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5980-Floating-Menus-UI-rework-2866d73d3650810aac60cc1afe979b60)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
|
||
|
|
c30f528d11 |
[refactor] adjust Vue node fixtures to not be coupled to Litegraph (#6033)
## Summary Changes the Vue node test fixture to not rely on Litegraph internal objects (which should eventually be fully decoupled from Vue nodes) and instead interact with nodes using black-box approach that emulates user actions (preferred appraoch for e2e tests). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6033-refactor-adjust-Vue-node-fixtures-to-not-be-coupled-to-Litegraph-28a6d73d3650817b8152d27dc4fe0017) by [Unito](https://www.unito.io) |
||
|
|
bb83b0107c |
fix Vue node border styles in different states (executing, error, selected) (#6018)
- Use exact tokens from Figma - Fix issue in which node is stuck in `executing` state after it errors ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6018-fix-Vue-node-border-styles-in-different-states-executing-error-selected-2896d73d365081f39000fc3e42811f0d) by [Unito](https://www.unito.io) |
||
|
|
06b0eecfe4 |
fix Vue node widgets should be in disabled state if their slots are connected with a link (#5834)
## Summary Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5692 by making widget link connection status trigger on change so Vue widgets with connected links could properly switch to the `disabled` state when they are implicitly converted to inputs. ## Changes - **What**: Added `node:slot-links:changed` event tracking and reactive slot data synchronization for Vue widgets ```mermaid graph TD A[Widget Link Change] --> B[NodeInputSlot.link setter] B --> C{Is Widget Input?} C -->|Yes| D[Trigger slot-links:changed] C -->|No| E[End] D --> F[Graph Event Handler] F --> G[syncNodeSlotData] G --> H[Update Vue Reactive Data] H --> I[Widget Re-render] style A fill:#f9f9f9,stroke:#333,color:#000 style I fill:#f9f9f9,stroke:#333,color:#000 ``` ## Review Focus Widget reactivity performance with frequent link changes and event handler memory management in graph operations. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5834-fix-Vue-node-widgets-should-be-in-disabled-state-if-their-slots-are-connected-with-a-link-27c6d73d365081f6a6c3c1ddc3905c5e) by [Unito](https://www.unito.io) |
||
|
|
e7745eb2be |
Style: Make components themeable (#5908)
## Summary Replace color/dark-color pairs in components with design tokens to allow for easy overriding. <!-- Also standardizes the icon pattern to simplify the tailwind config. --> ## Changes - **What**: Token based colors, for now, mostly. - **Breaking**: Got approval from Design to collapse some very similar pairs of colors that seem to have diverged in implementations over time. Some of the colors might be a little different, but we can tweak them later. ## Review Focus Still have quite a few places from which to remove `dark-theme`, but this at least gets the theming much closer. Need to decide if I want to keep going in here or cut this and do the rest in a subsequent PR. ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
cd7310cb8c |
feat(vue-nodes): snap link preview; connect on drop (#5780)
## Summary Snap link preview to the nearest compatible slot while dragging in Vue Nodes mode, and complete the connection on drop using the snapped target. Mirrors LiteGraph’s first-compatible-slot logic for node-level snapping and reuses the computed candidate for performance. ## Changes - Snap preview end to compatible slot - slot under cursor via `data-slot-key` fast-path - node under cursor via `findInputByType` / `findOutputByType` - Render path - `slotLinkPreviewRenderer.ts` now renders to `state.candidate.layout.position` - Complete on drop - Prefer `state.candidate` (no re-hit-testing) - Fallbacks: DOM slot → node first-compatible → reroute - Disconnects moving input link when dropped on canvas ## Review Focus - UX feel of snapping and drop completion (both directions) - Performance on large graphs (mousemove path is O(1) with dataset + single validation) - Edge cases: reroutes, moving existing links, collapsed nodes ## Screenshots (if applicable) https://github.com/user-attachments/assets/fbed0ae2-2231-473b-a05a-9aaf68e3f820 https://github.com/Comfy-Org/ComfyUI_frontend/pull/5780 (snapping) <-- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5898 (drop on canvas + linkconnectoradapter refactor) <-- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5903 (fix reroute snapping) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5780-feat-vue-nodes-snap-link-preview-connect-on-drop-27a6d73d365081d89c8cf570e2049c89) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
4b1c165d43 |
Cleanup/Perf: Float32Array/Float64Array removal (#5877)
## Summary Redoing https://github.com/Comfy-Org/ComfyUI_frontend/pull/5567, without the link rendering changes. ## Changes - **What**: Standardizing the Point/Size/Rect logic around numeric tuples instead of typed arrays. ## Review Focus Cutting here and going to continue in a second PR. Do the simpler types make sense? Do we want to keep the behavior of Rectangle as it is now? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5877-WIP-Float32Array-Float64Array-removal-27f6d73d36508169a39eff1e4a87a61c) by [Unito](https://www.unito.io) --------- Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
415ebfd67b |
Add muted state to Vue nodes (#5770)
## Summary Added mute state support to Vue nodes with visual feedback and keyboard shortcut functionality. ## Changes - **What**: Implemented mute state (mode 2) for Vue nodes with opacity styling and `Ctrl+M` hotkey support ## Review Focus Visual consistency between bypass and mute states, and keyboard shortcut conflict detection with existing hotkeys. ## Test Coverage - Single node mute/unmute with `Ctrl+M` hotkey - Multi-selection mute/unmute operations - Visual state verification with opacity changes ## Related - https://github.com/Comfy-Org/ComfyUI_frontend/pull/5715 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5770-Add-muted-state-to-Vue-nodes-2796d73d36508143b3edfbcb782de7c1) by [Unito](https://www.unito.io) |
||
|
|
bc4549244e |
test(e2e): align test default menu to Top; make legacy specs explicit (#5746)
## Summary UseNewMenu has been defaulted to Top in the app for over a year; Playwright’s test default lagged behind. This PR aligns the test default with reality and keeps legacy specs stable. ## Changes - tests(e2e): default to 'Top' via fixture; specs that previously relied on the old implicit default now explicitly set 'Comfy.UseNewMenu' to 'Disabled'. - docs(browser-tests): remove outdated README note suggesting tests set 'Top' manually. ## Review Focus - Intentional uses of 'Top' and 'Bottom' remain unchanged. - Confirm ComfyPage default remains 'Top' (see browser_tests/fixtures/ComfyPage.ts). ## Screenshots (if applicable) N/A ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5746-test-e2e-align-test-default-menu-to-Top-make-legacy-specs-explicit-2786d73d365081218d06c1346f3ae18e) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
b264685052 |
lint: add tsconfig for browser_tests, fix existing violations (#5633)
## Summary See https://typescript-eslint.io/blog/project-service/ for context. Creates a browser_tests specific tsconfig so that they can be linted. Does not add a package.json script to do the linting yet, but `pnpm exec eslint browser_tests` should work for now. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5633-lint-add-tsconfig-for-browser_tests-fix-existing-violations-2726d73d3650819d8ef2c4b0abc31e14) by [Unito](https://www.unito.io) |
||
|
|
ca312fd1ea |
[refactor] Improve workflow domain organization (#5584)
* [refactor] move workflow domain to its own folder * [refactor] Fix workflow platform architecture organization - Move workflow rendering functionality to renderer/thumbnail domain - Rename ui folder to management for better semantic clarity - Update all import paths to reflect proper domain boundaries - Fix test imports to use new structure Architecture improvements: - rendering → renderer/thumbnail (belongs with other rendering logic) - ui → management (better name for state management and UI integration) This ensures proper separation of concerns and domain boundaries. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [fix] Resolve circular dependency between nodeDefStore and subgraphStore * [fix] Update browser test imports to use new workflow platform paths --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
|
6b166a9d2f |
Fix Vue node selection detection in browser tests (#5555)
The VueNodeHelpers was using incorrect CSS selector for detecting selected nodes. Vue nodes use outline-black/outline-white classes for selection state, not border-blue-500. This fixes the failing delete key interaction tests that were showing 0 selected nodes when they should have been detecting the actual selection state. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com> |
||
|
|
90bf8dc74a |
[refactor] Move pure functions from layout store to separate modules so they can be tested (and add tests) (#5462)
* refactor layout store utils * [refactor] use nullish coalescing in getOr helper - addresses @DrJKL's suggestion Replaces manual undefined/null checks with more concise ?? operator for cleaner code that achieves the same functionality. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] improve Y.Map typing for better type safety - addresses @DrJKL's typing suggestions - Use Y.Map<NodeLayout[keyof NodeLayout]> instead of Y.Map<unknown> - Provides compile-time type safety for stored values - Improves IntelliSense and prevents type mismatches - Updates mappers, store, tests, and helper functions consistently - No runtime changes, pure TypeScript improvement 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] address @arjansingh code quality feedback - Remove AI-generated refactoring comment that adds no value - Reorganize tests with nested describe blocks for better readability - Group related test cases by function for easier scanning 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] move makeLinkSegmentKey to layoutUtils - addresses @arjansingh's file organization feedback - Move string concatenation function from layoutMath.ts to new layoutUtils.ts - Keep layoutMath.ts focused on pure geometric calculations - Create dedicated layoutUtils.ts for general layout utilities - Update imports in store and create separate test file - Improves module cohesion and clarity of purpose 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [cleanup] remove leftover AI refactoring comments - Remove "Constants moved to utils" and "Node layout mapping moved to utils" - Clean up extra blank lines from previous refactoring - Keep meaningful organizational comments like "Helper methods" 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [cleanup] remove unnecessary import aliases Remove pointInBoundsUtil/boundsIntersectUtil aliases as there are no naming conflicts. Use direct function names for cleaner code. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] improve Y.Map typing with named NodeLayoutMap type - addresses @DrJKL's performance and type safety suggestions - Create named NodeLayoutMap type for TypeScript performance optimization - Improve getOr function with proper key constraints and type safety - Update all Y.Map<NodeLayout[keyof NodeLayout]> usages to use NodeLayoutMap - Remove manual type assertions in favor of generic key constraints - Clean up unused imports and fix formatting issues * [cleanup] remove explanatory comment per @DrJKL's preference * don't wait for dialog close button to be stable --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
|
6f878abea4 |
Fix: Delete/Backspace hotkey to remove Vue Nodes (#5470)
* fix delete hotkey with vue nodes * add playwright test for deletion and selection with vue nodes * add unit test for keybinding service event forwarding * [refactor] improve type safety and remove wrapper functions in VueNodeHelpers - addresses @DrJKL review comments - Replace type cast with proper type predicate in getNodeIds method - Remove unnecessary getNodeCount() and getSelectedNodeCount() wrapper functions - Remove deleteSelected() helper methods to make key presses explicit in tests 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] make key presses explicit in Vue node tests - addresses @DrJKL review comment - Remove commented line in test setup - Replace helper method calls with direct keyboard.press() for better test clarity - Use direct locator access instead of wrapper functions for node counts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [enhance] add input filtering and improve shouldForwardToCanvas logic - addresses @DrJKL review comments - Add filtering for input, textarea, and contentEditable elements to prevent forwarding when typing - Allow shift key while blocking other modifiers (ctrl, alt, meta) - Include existing property_value span check for consistency 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] remove mutable global state from keybinding unit tests - addresses @DrJKL review comment - Remove global mockCommandExecute and mockProcessKey variables - Access vi.mocked() directly in test assertions for better isolation - Keep keybindingService as local variable since it's properly scoped 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [fix] remove duplicate input filtering that broke delete key functionality The shouldForwardToCanvas function was duplicating input field checks already handled by keyCombo.isReservedByTextInput, causing delete keys to be blocked. - Remove duplicate input filtering from shouldForwardToCanvas - Keep contentEditable enhancement in existing isReservedByTextInput check - Maintain shift key support as requested in review Fixes regression where delete key tests were failing after review changes. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [fix] restore working test structure while implementing review improvements Root cause: Changed test approach from helper methods to direct keyboard calls, which introduced timing/focus issues that broke delete key functionality. Solution: - Restore working test structure using helper methods (deleteSelected, getNodeCount) - Keep type safety improvement: replace type cast with proper type predicate - Keep code cleanup: remove commented line in test setup - Maintain working keybinding service with contentEditable enhancement This preserves the original working behavior while addressing all review feedback. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [auto-fix] Apply ESLint and Prettier fixes --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com> |
||
|
|
f6405e9125 |
Knip: More Pruning (#5374)
* knip: Don't ignore exports that are only used within a given file * knip: More pruning after rebase * knip: Vite plugin config fix * knip: vitest plugin config * knip: Playwright config, remove unnecessary ignores. * knip: Simplify project file enumeration. * knip: simplify the config file patterns ?(.optional_segment) * knip: tailwind v4 fix * knip: A little more, explain some of the deps. Should be good for this PR. * knip: remove unused disabling of classMembers. It's opt-in, which we should probably do. * knip: floating comments We should probably delete _one_ of these parallell trees, right? * knip: Add additional entrypoints * knip: Restore UserData that's exposed via the types for now. * knip: Add as an entry file even though knip says it's not necessary. * knip: re-export functions used by nodes (h/t @christian-byrne) |
||
|
|
0df7a53ead |
Rework theme menu (#5161)
* Change theme "button" to sub menu of all themes * Add test for theme menu * Prevent separator being added before View * Refactor test * Update locales [skip ci] * Fix has-text vs text-is change breaking other tests --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: bymyself <cbyrne@comfy.org> |
||
|
|
006e6bd57c |
[feat] Vue-Based Rendering System for the ComfyUI Node Graph (#4263)
* [feat] Add core Vue widget infrastructure - SimplifiedWidget interface for Vue-based node widgets - widgetPropFilter utility with component-specific exclusion lists - Removes DOM manipulation and positioning concerns - Provides clean API for value binding and prop filtering * [feat] Add Vue widget registry system - Complete widget type enum with all 15 widget types - Component mapping registry for dynamic widget rendering - Helper function for type-safe widget component resolution * [feat] Add Vue input widgets - WidgetInputText: Single-line text input with InputText component - WidgetTextarea: Multi-line text input with Textarea component - WidgetSlider: Numeric range input with Slider component - WidgetToggleSwitch: Boolean toggle with ToggleSwitch component * [feat] Add Vue selection widgets - WidgetSelect: Dropdown selection with Select component - WidgetMultiSelect: Multiple selection with MultiSelect component - WidgetSelectButton: Button group selection with SelectButton component - WidgetTreeSelect: Hierarchical selection with TreeSelect component * [feat] Add Vue visual widgets - WidgetColorPicker: Color selection with ColorPicker component - WidgetImage: Single image display with Image component - WidgetImageCompare: Before/after comparison with ImageCompare component - WidgetGalleria: Image gallery/carousel with Galleria component - WidgetChart: Data visualization with Chart component * [feat] Add Vue action widgets - WidgetButton: Action button with Button component and callback handling - WidgetFileUpload: File upload interface with FileUpload component * [feat] TransformPane - Viewport synchronization layer for Vue nodes (#4304) Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Benjamin Lu <benceruleanlu@proton.me> Co-authored-by: github-actions <github-actions@github.com> * Update locales [skip ci] * Fix TransformPane pos/size (#4826) * Update locales [skip ci] * refactor(litegraph): decouple render-time state from models for reroutes and links\n\nIntroduce RenderedLinkSegment; compute reroute render params without mutating model; render into ephemeral segments instead of writing to Reroute/LLink. * Revert "refactor(litegraph): decouple render-time state from models for reroutes and links\n\nIntroduce RenderedLinkSegment; compute reroute render params without mutating model; render into ephemeral segments instead of writing to Reroute/LLink." This reverts commit |
||
|
|
a82fcd8ec6 |
Knip: Enable more rules (#5309)
* knip: Simplify config * knip: enable unlisted, fix issues * knip: Add ignore for build dependencies (Vite plugin indirect reference) * knip: Prune dependencies * knip: One more Unused dep * git: Standard line end for yaml * [auto-fix] Apply ESLint and Prettier fixes * knip: Add exceptions for tailwindcss post-rebase. Not sure why we need to except it. * Update test expectations [skip ci] --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
95a1c86c23 |
[tests] update selection overlay tests after canvas migration (#5173)
* [fix] update selection overlay tests after canvas migration Update browser tests to work with canvas-based selection overlay introduced in PR #5158. Replaces DOM-based .selection-overlay-container checks with .selection-toolbox visibility and converts border visibility tests to canvas screenshot comparisons. Fixes #5158 * [chore] remove unused file flagged by knip * [fix] adjust test expectations for canvas-based positioning - Skip animated webp test unrelated to selection overlay changes - Update toolbox position expectations to match canvas-based coordinates - Canvas positioning uses different coordinate system than DOM overlay * [fix] improve positioning test flexibility and revert webp skip - Make toolbox position test more flexible for canvas-based coordinates - Revert animated webp test skip as requested in review - Canvas positioning varies more than DOM, use reasonable bounds instead * Update test expectations [skip ci] * [refactor] address review comments - use fixture locators - Add selectionToolbox locator to ComfyPage fixture as requested - Replace .isVisible() === false with .not.toBeVisible() pattern - Update all selection toolbox locators to use fixture instead of inline selectors - Improves maintainability and follows established patterns * [refactor] use fixture canvas locator for screenshots Replace inline canvas locators with comfyPage.canvas fixture property for consistency and maintainability as suggested in review. --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
84379d9522 |
Feature/expanded minimap (#4902)
* [feat] Add formatKeySequence function to format keybindings for commands * [feat] Add lock and unlock canvas commands with keybindings and update localization * feat: Implement canvas scale synchronization and zoom level adjustment * feat: Enhance GraphCanvasMenu with zoom controls and improved button functionality * feat: Refactor MiniMap component layout and remove unused bottomPanelStore * feat: Update zoom control shortcuts to use formatted key sequences * feat: Add tests for ZoomControlsModal and enhance GraphCanvasMenu tests * Update locales [skip ci] * Fix browser tests * ui: align minimap properly * Update locales [skip ci] * feat: focus zoom input when zoom modal loads * style: improve styling of zoom controls and add focus effect * fix styling and tests * styling: add divider to graph canvas menu * styling: position minimap properly * styling: add close button for minimap * styling: add horizontal divider to minimap * styling: update minimap toggle button text and remove old styles * Update locales [skip ci] * Update locales [skip ci] * feat: disable canvas menu in viewport settings after zoom adjustments * Update test expectations [skip ci] * fix: update canvas read-only property access to use state object * Update locales [skip ci] * fix: adjust button group and minimap positioning * feat: enhance zoom controls and adjust minimap positioning per PR comments * feat: implement zoom controls composable * feat: add timeout delays for headless tests * fix: update zoom input validation range in applyZoom function * [refactor] Update positioning and styles for GraphCanvasMenu, MiniMap, and ZoomControlsModal components * [refactor] Adjust z-index and positioning for GraphCanvasMenu, MiniMap, and ZoomControlsModal components * [style] Adjust margin for minimap button styles in GraphCanvasMenu component * [refactor] minimap should show on focus mode * [refactor] Update LiteGraphCanvasSplitterOverlay to conditionally render side and bottom panels based on focus mode * [style] Adjust right positioning for MiniMap and ZoomControlsModal components * [style] Adjust right positioning for MiniMap and ZoomControlsModal components --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> |
||
|
|
4ca6220adf |
Refactor app menu items (#4665)
* Restructures the application menu - rename Workflow to File - move new & template items to top level - add View menu and related sub items Commands - add "active" state getter shown as checkmark in the menu Node side panel - add refresh node defs - change reset view icon Help center - change to use store for visibility Fixes - Fix bug with mouse down where if you drag mouse out, mouse up wasn't caught - Fix issue with canvas info setting not triggering a redraw on change * Fix missing translation warnings * Add separator under new * tidy * Update locales [skip ci] * fix some tests * fix * Hide icon if there is an active state within the menu item group * Update locales [skip ci] * Fix tests * Implement feedback - Remove queue, node lib, model lib, workflows, manager, help center - Add minimap, link visibility * Update locales [skip ci] * Add plus icon on "New" menu item * Update locales [skip ci] * Fix test * Fix translations * Update locales [skip ci] * Update locales [skip ci] --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
c42c9315f4 | [refactor] Replace lodash with es-toolkit (#4935) | ||
|
|
03ad06ea14 | Add preview to workflow tabs (#4290) | ||
|
|
7bbbf59722 | feat: Enable double-click on subgraph slot labels for renaming (#4833) | ||
|
|
489b205bf5 |
[chore] Fix litegraph import after migration to git subtree
Updated import from @comfyorg/litegraph npm package to relative path since browser tests don't have @ alias configured in tsconfig 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
|
|
4d7e9b70d1 |
[Test] Update test expectations for #4420 (#4511)
Co-authored-by: github-actions <github-actions@github.com> |
||
|
|
62f3ba0689 |
V3 UI - Tabs & Menu rework (#4374)
Co-authored-by: github-actions <github-actions@github.com> |