mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 07:00:23 +00:00
drjkl/remove-float32array
28 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
filtered
|
26cf45ed36 |
Update browser test screenshots (#5855)
## Summary - Empty commit to trigger GitHub Actions workflow for updating browser test screenshots - Will generate new baseline screenshots for visual regression tests ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5855-Update-browser-test-screenshots-27e6d73d3650813d9a86e792b9c16456) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Benjamin Lu
|
5d0aee59a6 |
Increase vue slot/link functionality (#5710)
## Summary Increase functionality for slots and links, covered with playwright tests. ## Features - Allow for reroute anchors to work when dragging from input slot - Allow for dragging existing links from input slot - Allow for ctrl/command + alt to create new link from input slot - Allow shift to drag all connected links on output slot - Connect links with reroutes (only when dragged from vue slot) ## Tests Added ### Playwright - Dragging input to input drags existing link - Dropping an input link back on its slot restores the original connection - Ctrl+alt drag from an input starts a fresh link - Should reuse the existing origin when dragging an input link - Shift-dragging an output with multiple links should drag all links - Rerouted input drag preview remains anchored to reroute - Rerouted output shift-drag preview remains anchored to reroute ## Notes The double rendering system for links being dragged, it works right now, maybe they can be coalesced later. Edit: As in the adapter, can be removed in a followup PR Also, it's known that more features will arrive in smaller PRs, this PR actually should've been much smaller. The next ones coming up are drop on canvas support, snap to node, type compatibility highlighting, and working with subgraphs. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5710-Increase-vue-slot-link-functionality-2756d73d3650814f8995f7782244803b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
e0b1a6d212 |
[test] fix flaky Vue upload widget browser tests using randomize url param (#5845)
## Summary Fix browser tests that use filenames in loader nodes. When the files don't exist, the fallback/error component shows the request URL which contains random cache-busting param which makes tests fail due to non-deterministic nature. [Context](https://github.com/Comfy-Org/ComfyUI_frontend/pull/5831#discussion_r2386582256) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5845-test-fix-flaky-Vue-upload-widget-browser-tests-using-randomize-url-param-27d6d73d36508107a0d0d52d2764a028) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
bbd8d67f5f |
designate canvasOnly on runtime-generated virtual widgets so they are hidden in Vue renderer (#5831)
## Summary Added `canvasOnly` flag to runtime-generated widgets to prevent Vue renderer from displaying them while keeping canvas functionality intact. ## Changes - **What**: Added `canvasOnly` widget option to hide upload, webcam, and refresh widgets from Vue renderer In the Canvas (LiteGraph) system, there was a small set of widgets with strictly defined components. There, if we wanted some unique or relatively complex behavior (like an upload butotn), we needed to create a separate widget that would be coupled to the original widget at runtime (and would not be serialized). In the Vue renderer system, we can simply add flags to the inputSpec or widget options and conditionally render complex UI additions -- i.e., there is no need for the hard-to-maintain runtime widget associations. Expressing such things entirely in the view layer simplifies business logic related to graph state, as we no longer need to account for preserving the connections between runtime widgets and their special siblings -- we also do not need to worry about the implications for state serialization. ## Related - https://github.com/Comfy-Org/ComfyUI_frontend/pull/5798 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5831-designate-canvasOnly-on-runtime-generated-virtual-widgets-so-they-are-hidden-in-Vue-ren-27c6d73d365081fb8641feec010190df) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
1215cb4670 |
[test] add test to verify panning on touch devices works as expected with Vue renderer (#5833)
## Summary Added mobile touch pan interaction test for Vue nodes canvas functionality. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5833-test-add-test-to-verify-panning-on-touch-devices-works-as-expected-with-Vue-renderer-27c6d73d3650810ebe01c0f7711670b9) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
02b3b8ef5b |
[test] add browser tests verifying Vue node groups behaviors (#5825)
## Summary Adds Playwright tests verifying node groups behaviors work in the Vue nodes system - in particular: - Using hotkey to create a group around selected Vue nodes - Using the "fit to contents" feature on a group that contains Vue nodes ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5825-test-add-browser-tests-verifying-Vue-node-groups-behaviors-27c6d73d365081e1a380ea5c43a861b0) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Arjan Singh
|
a2c7db9dc2 |
[fix] add InputSlot and dot error state (#5813)
## Summary Error states were not getting propagated down to the InputSlots from the API Repsonse I created a provider and injected error state. It seemed like a way better idea than prop drilling or building a composable that only two nodes (`InputSlot` and `OutputSlot`) would need. ## Changes The follow are now error code red when an input node has errors: 1. There's a error round border around the dot. 2. The dot is error colored. 3. The input text is error colored. This treatment was okay after feedback from design. ## Screenshots - Error State <img width="749" height="616" alt="Screenshot 2025-09-26 at 9 02 58 PM" src="https://github.com/user-attachments/assets/55c7edc9-081b-4a9d-9753-120465959b5d" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5813-fix-add-InputSlot-and-dot-error-state-27b6d73d36508151a955e485f00a2d05) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
840f7f04fa |
Cleanup: Litegraph/Vue synchronization work (#5789)
## Summary Cleanup and fixes to the existing syncing logic. ## Review Focus This is probably enough to review and test now. Main things that should still work: - moving nodes around - adding new ones - switching back and forth between Vue and Litegraph Let me know if you find any bugs that weren't already present there. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5789-WIP-Litegraph-Vue-synchronization-work-27a6d73d3650811682cacacb82367b9e) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
042c2caa88 |
[test] extend Vue node selection browser test to cover Mac (Meta) key (#5824)
## Summary Extend Vue node selection tests to also cover Meta key (Mac). ## Changes - **What**: Extended node selection test modifiers to include [Meta key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey) alongside existing Ctrl and Shift keys ## Review Focus Cross-platform keyboard modifier testing coverage and Mac-specific interaction patterns. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5824-test-extend-Vue-node-selection-browser-test-to-cover-Mac-Meta-key-27b6d73d365081778833cefb8592f158) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
cd8b5b5d50 |
[refactor] reorganize Vue node browser tests into subfolders based on behaviors and states (#5823)
## Summary Refactored Vue node browser tests by organizing them into behavioral categories, better reflecting the nature of browser tests as behind user-action/behavior specifications. - **What**: Reorganized Playwright browser tests into logical behavioral folders (`interactions/`, `nodeStates/`) - **Structure**: Created subdirectories for canvas interactions, link interactions, node interactions, and node states ## Review Focus Test file path changes and associated snapshot relocations ensure all browser tests continue to run correctly in the new structure. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5823-refactor-reorganize-Vue-node-browser-tests-into-subfolder-based-on-behaviors-and-states-27b6d73d365081aaa6f9e3a388165258) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
a25d89881b |
Allow Vue nodes to have their colors changed from selection toolbox (#5720)
## Summary Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5680 by allowing Vue nodes to properly synchronize color changes with LiteGraph nodes, implementing header darkening and light theme adjustments. <img width="2496" height="1512" alt="Screenshot from 2025-09-21 20-00-36" src="https://github.com/user-attachments/assets/e3bdf645-1e0b-4d11-9ae5-9401f43e8e96" /> ## Changes - **What**: Implemented color property synchronization between LiteGraph and Vue node rendering systems - **Core Fix**: Added `nodeData.color` and `nodeData.bgcolor` to [v-memo dependencies](https://vuejs.org/api/built-in-directives.html#v-memo) to trigger re-renders on color changes - **Color Logic**: Added header darkening using [memoized color adjustments](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/utils/colorUtil.ts) to match LiteGraph's ColorOption system - **Event System**: Enhanced property change instrumentation in LGraphNode.setColorOption to emit color/bgcolor events ## Review Focus Vue component reactivity timing - the v-memo fix was critical for immediate color updates. Verify light theme color adjustments match the drawNode monkey patch behavior in app.ts. ## Technical Details ```mermaid graph TD A[User Sets Color] --> B[LGraphNode.setColorOption] B --> C[Sets node.color & node.bgcolor] C --> D[Triggers property:changed events] D --> E[Vue Node Manager Updates] E --> F[v-memo Detects Change] F --> G[NodeHeader Re-renders] G --> H[Header Darkening Applied] style A fill:#f9f9f9,stroke:#333,color:#000 style H fill:#f9f9f9,stroke:#333,color:#000 ``` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5720-Allow-Vue-nodes-to-have-their-colors-changed-from-selection-toolbox-2766d73d36508123b441d126a74a54b2) by [Unito](https://www.unito.io) --------- Co-authored-by: Myestery <Myestery@users.noreply.github.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
b0d2b44dad |
[test] add browser tests for Vue node multiline string widgets (#5819)
## Summary Added Playwright E2E tests for Vue multiline string widget functionality to ensure text input and persistence work correctly. ## Changes - **What**: Created browser tests for multiline string widget in Vue nodes implementation, covering text input, multiline text input, and focus change behavior. ## Review Focus Test coverage for text input persistence across focus changes and multiline content handling in the CLIP Text Encode widget. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5819-test-add-browser-tests-for-Vue-node-multiline-string-widgets-27b6d73d365081e2916ae663e2d44899) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
976b1a6bbd |
[test] add browser test to verify Vue node body double-click behavior (#5818)
## Summary
Added test coverage to verify double-clicking node body does not trigger
title edit mode, mirroring test in Litegraph
|
||
|
Christian Byrne
|
856eb446a5 |
Add node pinning functionality to Vue nodes (#5772)
## Summary Added pinning functionality to Vue nodes with hotkey support and visual indicators. ## Changes - **What**: Added node pinning feature with 'p' hotkey toggle and pin icon indicator - **Components**: Updated `LGraphNode.vue` and `NodeHeader.vue` with pin state tracking - **State Management**: Extended `useGraphNodeManager` to sync pinned flag with Vue components - **Tests**: Added E2E tests for single and multi-node pin toggling ## Review Focus Pin state persistence in graph serialization and visual indicator positioning in node header layout. Verify hotkey doesn't conflict with existing shortcuts. ## Technical Details - Pin state tracked via `flags.pinned` property in `LGraphNode` - Uses [Vue memoization](https://vuejs.org/api/reactivity-advanced.html#v-memo) for efficient header re-rendering - Integrates with existing node property change detection system - Visual indicator uses Lucide pin icon with theme-aware styling ## Screenshots (if applicable) <img width="875" height="977" alt="Screenshot from 2025-09-25 13-02-21" src="https://github.com/user-attachments/assets/51d46cea-08f0-44fb-8b07-56d1b939338f" /> <img width="875" height="977" alt="Screenshot from 2025-09-25 13-02-10" src="https://github.com/user-attachments/assets/ce247426-1e39-48c0-924b-658b65c24f52" /> ## Related - https://github.com/Comfy-Org/ComfyUI_frontend/pull/5715 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5772-Add-node-pinning-functionality-to-Vue-nodes-2796d73d36508195914bcfc986aa66b5) by [Unito](https://www.unito.io) --------- Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> |
||
|
Christian Byrne
|
4b9d448b6c |
fix style of Select COMBO Vue node widget (#5785)
## Summary Fixed `WidgetSelect` component styling to match other Vue node widgets by using shared base styles. ## Changes - **What**: Replaced hardcoded color classes with `WidgetInputBaseClass` for consistent styling across Vue node widgets ## Review Focus Visual consistency with other input widgets in Vue nodes interface and proper styling inheritance. ## Screenshots (if applicable) *Before*: <img width="1645" height="1436" alt="Screenshot from 2025-09-25 18-12-16" src="https://github.com/user-attachments/assets/0b985616-0cf5-44e3-8459-739d194dec7a" /> *After*: <img width="1645" height="1436" alt="Screenshot from 2025-09-25 18-12-07" src="https://github.com/user-attachments/assets/235437cf-3e1f-4bc0-8822-26fb8606b437" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5785-fix-style-of-Select-COMBO-Vue-node-widget-27a6d73d3650811a959ef8a955274987) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
0ac1074a25 |
fix Vue nodes capturing wheel event when Ctrl+Shift+drag zooming (#5791)
## Summary Fixed canvas read-only state during Ctrl+Shift drag-to-zoom to prevent node interaction conflicts. This fix also benefits Litegraph nodes. ## Changes - **What**: Canvas becomes read-only during [Ctrl+Shift drag zoom](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) operations and restores original state when finished - **What**: Added browser test coverage for zoom interaction behavior ## Review Focus State restoration on zoom interruption and edge cases where drag zoom is cancelled mid-operation. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5791-fix-Vue-nodes-capturing-wheel-event-when-Ctrl-Shift-drag-zooming-27a6d73d3650817d888ee59f8f7fcb01) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
a6600aa109 |
Use localized labels for Vue node slots and inputs/outputs (fallback to names) (#5773)
## Summary Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5697 by adding internationalization support for Vue node widget labels and output slot names with fallback to original names. ## Changes - **What**: Added `label` field to widget data structures and `localized_name` support for output slots - **Breaking**: None - all changes maintain backward compatibility with fallback to original names ## Review Focus Translation key resolution for node definitions and proper fallback chain for widget labels and slot names. ## Screenshots (if applicable) Observe that there is parity between Litegraph and Vue nodes w.r.t. localization of labels/names. <img width="3455" height="1417" alt="Screenshot from 2025-09-25 13-19-54" src="https://github.com/user-attachments/assets/93ee8fae-3671-4175-a941-6462f942d0f1" /> <img width="3455" height="1417" alt="Screenshot from 2025-09-25 13-19-38" src="https://github.com/user-attachments/assets/9573eb86-d74a-40ed-a0b5-e30afd3da6eb" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5773-Use-localized-labels-for-Vue-node-slots-and-inputs-outputs-fallback-to-names-2796d73d365081e08fb7d38464f4aa90) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
Christian Byrne
|
ac93a6ba3f |
Disable number grouping (thousands comma separators) by default in Vue node number widgets (#5776)
## Summary Makes the [useGrouping](https://primevue.org/inputnumber/#api.inputnumber.props.useGrouping) prop for number widgets disabled by default, aligning with the old UI (also requested via design). Node authors can still enable if they want by setting prop explicitly. ## Changes - **What**: Modified [WidgetInputNumberInput](https://primevue.org/inputnumber/) to disable `useGrouping` by default, requiring explicit opt-in via widget options - **Testing**: Added component tests covering value binding, component rendering, step calculations, and grouping behavior ## Review Focus UX impact on existing nodes that may have relied on default grouping behavior and test coverage for edge cases with precision calculations. ## Screenshots (if applicable) *Before*: <img width="1685" height="879" alt="Screenshot from 2025-09-25 11-34-34" src="https://github.com/user-attachments/assets/432097ab-203d-4f86-8ca0-721b27ee33de" /> *After*: <img width="1951" height="1175" alt="Screenshot from 2025-09-25 11-35-27" src="https://github.com/user-attachments/assets/74d35b62-612e-4dbf-b6e2-0ac17af03ea1" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5776-Disable-number-grouping-thousands-comma-separators-by-default-in-Vue-node-number-widget-2796d73d365081369ca6c155335d0d57) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <448862+DrJKL@users.noreply.github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
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) |
||
|
Christian Byrne
|
a0c06bd723 |
[test] add browser test for missing vue nodes error state (#5768)
## Summary Added browser test to verify Vue nodes display error state when workflow contains missing/unknown nodes, complementing - https://github.com/Comfy-Org/ComfyUI_frontend/pull/5758 ## Changes - **What**: Added [Playwright test](https://playwright.dev/docs/writing-tests) for Vue nodes error state handling with missing nodes - **Test Coverage**: Validates `border-error` class application on nodes with `UNKNOWN NODE` text ## Review Focus Test reliability when loading workflows with missing nodes and dialog interaction timing. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5768-test-add-browser-test-for-missing-vue-nodes-error-state-2796d73d365081aea187cdbc7920a643) by [Unito](https://www.unito.io) |
||
|
Benjamin Lu
|
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> |
||
|
Alexander Brown
|
f7f3240100 |
fix: Status indicator and close button appearing together (#5738)
## Summary Small fix for the close/status visibility overlap <img width="392" height="128" alt="image" src="https://github.com/user-attachments/assets/af25f1d7-a8c3-4155-9123-9fa10724e8db" />  ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5738-fix-Status-indicator-and-close-button-appearing-together-2776d73d3650813e9601e519c8a85043) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Simula_r
|
cec1de0147 |
feat: vue nodes LOD system (#5631)
## Summary Replaced reactive (Vue-based) widget LOD with CSS visibility control. Performance doesn't dramatically improve, but we avoid the mount/unmount overhead during zoom/pan operations. This PR implements the visual component of LOD—complex widgets that need lifecycle management will be addressed separately. ### Problem & Solution Problem: we want LOD to improve rendering performance and visual feedback but discovered using reactivity in the current setup for it meant mounting/unmounting caused worse lag than the performance it aimed to fix. Switching to render all the details all the time but using css visibility proved to be the best solution. However, it doesn't improve rendering performance by much because the GPU texture size is the bottleneck (from TransformPane.vue CSS transforms) and not rasterization. Solution: Keep all nodes/widgets mounted, use CSS visibility: hidden for LOD. Trade memory for performance stability during zoom/pan/drag operations. ### Technical Decision We chose Performance > Memory: - CSS transforms create a single GPU texture whose size depends on node count, not widget complexity - Mounting/unmounting hundreds of widgets during zoom = noticeable lag from Vue VDOM diffing (since all components are mounted all the time because of viewport culling challenge/trade off see https://github.com/Comfy-Org/ComfyUI_frontend/pull/5510.) - CSS visibility changes = no reactivity overhead, smooth interactions - Result: Similar performance, but without interaction stutters This is the visual layer only. If we want a hook into the LOD state per node / widget that would be the next follow up system to implement. ### Next Steps (maybe) - Chunked (split up single Transform Pane transform layer) when rendering 1000+ nodes (maybe) - ~~Selective unmounting API for widgets that register as "expensive"~~ - ~~Client bound hydration system~~ ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> <img width="1355" height="960" alt="image" src="https://github.com/user-attachments/assets/41474d1b-9dbe-4240-a8cf-f4c9ff51d8e0" /> <img width="1354" height="963" alt="image" src="https://github.com/user-attachments/assets/9f55edaa-5858-41b9-b6a8-c2d37e1649bd" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5631-feat-vue-nodes-LOD-system-2726d73d365081c6a6c4e14aa634f19c) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
f951e07cea |
fix bypass hotkey in vue nodes and fix node data instrumentation setup issue when switching to Vue nodes after initial load (#5715)
## Summary Fixed Vue node keybinding target element ID to enable bypass/pin/collapse hotkeys in both LiteGraph and Vue rendering modes. Also fixed a bug when starting in litegraph mode => switching to Vue nodes without reloading => `graph.onTrigger` is set to `undefined` which interferes with proper setup of node data instrumentation, among other things. ## Changes - **What**: Updated keybinding `targetElementId` from `graph-canvas` to `graph-canvas-container` for node manipulation commands (parent of both the canvas and transform pane -- vue nodes container). - **What**: Added conditional `onTrigger` handler restoration in slot layout sync to prevent Vue node manager conflicts ## Review Focus Event handler precedence between Vue nodes and LiteGraph systems during mode switching, ensuring hotkeys work consistently across rendering modes. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5715-fix-bypass-hotkey-in-vue-nodes-and-fix-node-data-instrumentation-setup-issue-when-switchi-2756d73d3650815c8ec8d5e4d06232e3) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
023e466dba |
fix using shift modifier to (de-)select Vue nodes (#5714)
## Summary Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5688 by adding shift modifier support for multi-selecting Vue nodes, enabling standard shift+click selection behavior alongside existing ctrl/cmd+click. ## Changes - **What**: Updated Vue node event handlers to include `event.shiftKey` in multi-select logic - **Testing**: Added browser tests for both ctrl and shift modifier selection behaviors ## Review Focus Multi-select behavior consistency across different input modifiers and platform compatibility (Windows/Mac/Linux shift key handling). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5714-fix-using-shift-modifier-to-de-select-Vue-nodes-2756d73d365081bcb5e0fe80eacdb2f0) by [Unito](https://www.unito.io) |
||
|
Benjamin Lu
|
893409dfc8 |
Add playwright tests for links and slots in vue nodes mode (#5668)
Tests added - Should show a link dragging out from a slot when dragging on a slot - Should create a link when dropping on a compatible slot - Should not create a link when dropping on an incompatible slot(s) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5668-Add-playwright-tests-for-links-and-slots-in-vue-nodes-mode-2736d73d36508188a47dceee5d1a11e5) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
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> |
||
|
Christian Byrne
|
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 |