mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-10 07:30:08 +00:00
d8efb2b6461e435c0cb228cfe15d0fdbab8e3bec
34 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Christian Byrne
|
d8efb2b646 |
[backport core/1.32] fix: remove LOD from vue nodes (#6981)
## Summary
Backport of #6950 onto core/1.32.
- cherry-picked
|
||
|
Simula_r
|
0cff8eb357 |
fix: arbitrary styles, min size <= content, ensure layout calc, trunc… (#6731)
## Summary ### Problem: After [vue node compacting PR](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6687) the white space within the node has been greatly reduced, lowering the min intrinsic size, thus allowing us to reduce the amount we need to scale up via ensureCorrectLayoutScale(), therefore increasing readability of nodes. Great! However, a side effect of reducing the scale factor means nodes with larger min content will not be scaled up enough causing nodes to be too large in many cases. For example, if the min intrinsic width is very long due to input length: <img width="807" height="519" alt="image" src="https://github.com/user-attachments/assets/a6ea3852-bed5-49b2-b10e-c2e65c6450b2" /> ### Solution: Allow for nodes to be resized less than their intrinsic min width. And truncate widget inputs like many other node UIs do. IMPORTANT: when a node is added via search or other, it will still get a min size based on its intrinsic content it just wont be the min width! So best of both worlds. <img width="670" height="551" alt="image" src="https://github.com/user-attachments/assets/f4f5ec8c-037e-472f-a5a1-d8a59a87c0b0" /> this means we choose a default min width and clamp resize to it. This also means we have to remove the arbitrary min width values that were sprinkled around the vue node widgets. They are not needed because instead of min width, they can take up full width and inherit the sizing from the node min width! This makes nodes like little browser windows and widgets are just responsive elements with in. Much more natural imo. ### Bonus - Set ensureCorrectLayouScale() to scale factor of 1.2 which means vue nodes are now only being set 20% bigger than LG. That covers for the height difference we cant change! - Fix ensureCorrectLayouScale() to offset y position for groups / better alignment - Get rid of arbitrary inflexible min width like min-[417px] which shouldnt have been used the first place - Make Select and Input overlay portals width set to their content ## Changes **What**: - Node resizing behavior - Node widget min width - Widget input and slot truncation - Misc arbitrary styling that should have been fluid ## Screenshots (if applicable) https://github.com/user-attachments/assets/3ea4b8fe-565a-47f7-b3ab-6cef56cecde5 https://github.com/user-attachments/assets/2fe1e1a0-a9dc-4000-b865-ce2d8c7f3606 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6731-fix-arbitrary-styles-min-size-content-ensure-layout-calc-trunc-2af6d73d365081eab507c2f1638a4194) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
471ccca1dd |
Style: Design System use across more components (#6705)
## Summary Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to be working on to consolidate our different buttons soon. ## Changes - **What**: Replace light/dark colors with theme aware design system tokens. ## Review Focus Double check the chosen colors for the components ## Screenshots | Before | After | | ------ | ----- | | <img width="607" height="432" alt="image" src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104" /> | <img width="646" height="488" alt="image" src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63" /> | ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
adfd2e514e |
[Style] Compact Modern Nodes (#6687)
## Summary Simple and clean is the way that we're making the nodes tonight. ## Changes - **What**: Smaller minimum widths for nodes and labels - **What**: Smaller font for the labels - **What**: Removed outlines for widgets - **What**: Fixes a text/background issue with buttons on widgets - **What**: Smaller header - **What**: Less padding within the node itself ## Review Focus Check out the new styles and how they align with the Designs. ## Screenshots | Before | After | | --- | --- | | <img width="542" height="486" alt="image" src="https://github.com/user-attachments/assets/41fe9801-7a43-49ac-87fc-36d3b2ee82fb" /> | <img width="411" height="388" alt="image" src="https://github.com/user-attachments/assets/a7c21120-bf67-4039-86b3-c348bcc4341b" /> | <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6687-Style-Compact-Modern-Nodes-2aa6d73d365081c48db3c5491c556dc9) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
2542449d45 |
chore: add missing i18n keys in sidebar, assets, toolbox, dropdowns (#6622)
This PR - adds missing locale keys for 3D viewer toast strings, assets sidebar labels, and node error keys - cleans up the selection toolbox, media previews, node components, and widget uploader to rely on `$t`/`st` (exposed to template scope at compile time) instead of importing from `useI18n`. - updates `eslint.config.ts` to teach the Intlify rule about the locale layout ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6622-chore-add-missing-i18n-keys-in-sidebar-assets-toolbox-dropdowns-2a36d73d365081ae8694eb4f8ebb822a) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
Johnpaul Chiwetelu
|
265f1257e7 |
Updated node tokens (#6569)
This pull request updates the design system color tokens and refactors node and widget component styles throughout the codebase to use new, more consistent CSS variables. The changes ensure that node and widget components are styled using unified design tokens, improving maintainability and theme support for both light and dark modes. **Design System Token Updates** * Added new component and node-related CSS variables for background, border, foreground, and widget states in both light and dark themes in `style.css`. [[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R246-R256) [[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R354-R364) * Introduced `--color-graphite-400` and adjusted several existing color assignments for better palette consistency. [[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R76) [[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0L304-R316) * Updated semantic CSS variables to reference the new component/node tokens for easier usage in components. * Changed `--secondary-background-hover` to match `--secondary-background` for improved hover consistency. **Component Refactoring: Node and Widget Styles** * Refactored Vue component classes and inline styles to use the new CSS variables for node backgrounds, borders, and widget states, replacing legacy variables like `bg-node-component-surface` and `border-node-component-border` with `bg-component-node-background` and `border-component-node-border`. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L11-R14) [[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L39-R39) [[3]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L384-R384) [[4]](diffhunk://#diff-19537a67677431ecdc9aec43877d28814e37edf0e45b0b0b484ea08832cad299L5-R13) * Updated widget dropdowns, select, and input components to use `text-component-node-foreground-secondary` for icons and foregrounds, and new background variables for buttons and inputs. [[1]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L29-R29) [[2]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L100-R100) [[3]](diffhunk://#diff-661a09de2721335e118a693b25d09922ada0ccbd0a51284691ed784fbe18874eL13-R13) [[4]](diffhunk://#diff-2856391d03b0d38db1ed922b5034a05bc32e978c51f8175057d84cf82399d986L13-R13) [[5]](diffhunk://#diff-4ee47848821aff71b6da0a1bb7fb8976e7879d706f71ff2ab3c5b046f5ef528cL10-R10) [[6]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L106-R113) [[7]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L119-R123) [[8]](diffhunk://#diff-597a77456bf4b0c2d390fc46a930f37156b2f26ca030259b6703e5d39ff6b20eL37-R53) [[9]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL7-R7) **Service Layer Updates** * Updated the color palette service mapping to use the new CSS variable names for node and widget colors, ensuring consistency across the application. * https://github.com/user-attachments/assets/d9535f9a-b459-49bf-b2fe-ed872916fa4e These changes collectively modernize the styling approach for node and widget components, making it easier to maintain and extend theme support. --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
eae93c2a79 |
Style: Pinned, Muted, Bypassed header indicators (#6530)
## Summary Match (mostly) the header design for Modern Nodes' statuses. ## Changes - **What**: Styling to match designs for more states. ## Screenshot <img width="591" height="687" alt="image" src="https://github.com/user-attachments/assets/bf8fe5d1-bd42-455c-ab20-668632ab5049" /> <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6530-WIP-Pinned-and-Muted-styles-29f6d73d36508191bb89dc13674db8ba) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
0e9c29e7b7 |
Fix node header height for subgraphs (#6525)
Node headers are slightly too tall on subgraph nodes due to the height of the "enter subgraph" button. This is fixed by explicitly setting the height of the enter subgraph button. <img width="991" height="171" alt="image" src="https://github.com/user-attachments/assets/34d049a7-1dee-46c2-ab28-169c3f546347" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6525-Fix-node-header-height-for-subgraphs-29f6d73d3650810eaf95e7a6d107c2bd) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
dffb07c745 |
Fix badge overflow (#6516)
Prevents node badges from overflowing out of the node header in vue mode <img width="1157" height="593" alt="image" src="https://github.com/user-attachments/assets/005e13e7-8bcc-46c4-9531-e6eba237cf60" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6516-Fix-badge-overflow-29e6d73d365081328250cbeb3ebbb670) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
6e4471ad62 |
Fix node sizing in vue mode (#6289)
Before  After  Also add ~~content~~ [contain](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) styling for improved render performance. Future: - Update size scaling for WidgetLayoutField widgets. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6289-Fix-node-sizing-in-vue-mode-2986d73d365081ac8fa0da35a635b226) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
233004c837 |
Feat: Add Badges for Vue Nodes (#6243)
## Summary Adds the badges to the header for Vue nodes. ## Review Focus Design, mostly. Any structures here I'm not handling but should be? ## Screenshots <img width="1514" height="642" alt="image" src="https://github.com/user-attachments/assets/387fd2f6-bb4b-4fee-b273-6166a52a3552" /> <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6243-Feat-Add-Badges-for-Vue-Nodes-2956d73d36508184a250d67b127ed4b1) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
bfe083dcba |
Move subgraph badge into node title (#6115)
<img width="1350" height="691" alt="image" src="https://github.com/user-attachments/assets/4a1a909f-463e-4c77-8855-6fe0a177b659" /> Design docs show icon as being reversed in litegraph mode. If needed, fixing this is basically just removing a negative sign. LiteGraph implementation was not as clean as I hoped. I can spend some more time divining some non-magic constants, and mayybe resolve the svg data from css styles if desired. Resolves #4647 Resolves #6107 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6115-Move-subgraph-badge-into-node-title-2906d73d365081e4ba82d321fc27afed) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Alexander Brown
|
b943c0fa75 |
Lint: Add tailwind linter (#5984)
## Summary Adds the [tailwind lint plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss) and fixes the currently fixable rules ([v4 is still in beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)). ## Changes - **What**: Enforces things like consistent class order, and eventually can prohibit extra classes that could be utilities instead - **Dependencies**: The plugin and its types ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Alexander Brown
|
eda781ad37 |
Style: Fix move cursors that should be grabs (#5989)
## Summary Align with designs that use `grab`/`grabbing` instead of `move`. ## Review Focus Additionally - Fixes the use of `@apply` in the places I touched - Removed some `style.css` rules that were always overridden by the component ## Screenshots ### Before https://github.com/user-attachments/assets/9ca65b92-33e5-4feb-853c-9c5ece574ab5 ### After https://github.com/user-attachments/assets/51569025-0156-473e-be93-5662c345901b ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5989-Style-Fix-move-cursors-that-should-be-grabs-2876d73d3650813bbe95c761c5d46e03) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
99b3a59679 |
Style: Standardize icon use Part 1 (#5947)
## Summary Remove the mix of class based and component style icons in favor of just [classes](https://iconify.design/docs/usage/css/tailwind/tailwind4/#basic-usage). ## Changes - **What**: Migrate existing lucide icons ## Review Focus What differs between the icons before and now? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5947-Style-Standardize-icon-use-Part-1-2846d73d365081bfa66ceb6bdaa9ff02) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Simula_r
|
247080f0d7 |
fix: node header DOM hierarchy (#5961)
## Summary Fix: node header DOM hierarchy to position tooltip over text and constrain LOD fallback to text instead of full width. Keep node header full width to accommodate for colored background. ## Screenshots (if applicable) <img width="1418" height="933" alt="image" src="https://github.com/user-attachments/assets/804116d1-2444-4891-a04f-a2dfe8d586ff" /> <img width="1420" height="930" alt="image" src="https://github.com/user-attachments/assets/a884edd0-055b-4dc7-b44c-a88b8376e018" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5961-fix-node-header-DOM-hierarchy-2856d73d3650814eae04ef96fae062fe) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
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> |
||
|
Simula_r
|
51f0f111ea |
refactor: remove unused tooltip appendTo code (#5943)
## Summary Remove unused tooltip appendTo positioning code. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5943-refactor-remove-unused-tooltip-appendTo-code-2846d73d365081d99c00cd41e35eb496) by [Unito](https://www.unito.io) --------- Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com> |
||
|
Christian Byrne
|
480f37e2f5 |
use PrimeVue tooltip for "enter subgraph" button on Vue node headers (#5920)
## Summary Replaced HTML `title` attribute with PrimeVue tooltip component for the "Enter Subgraph" button in Vue node headers. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5920-use-PrimeVue-tooltip-for-enter-subgraph-button-on-Vue-node-headers-2826d73d365081bdb0b9dcc7b4509d39) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
3818ba5d17 |
fix Vue node header width (#5895)
## Summary Added `w-full` class to Vue node header to ensure full width layout consistency. ## Changes - **What**: Applied [Tailwind CSS w-full utility](https://tailwindcss.com/docs/width#full-width) to NodeHeader component for consistent width behavior ## Review Focus If this is best place to set the class ## Screenshots (if applicable) *Before* <img width="931" height="919" alt="image" src="https://github.com/user-attachments/assets/fe94ddad-f43b-4441-a924-60aeaff94041" /> *After* <img width="931" height="919" alt="Screenshot from 2025-10-02 10-38-53" src="https://github.com/user-attachments/assets/596681ad-309a-4fab-a343-bfbb73d72f6c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5895-fix-Vue-node-header-width-2806d73d365081bb82ddf6abe8665f8b) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
37fab21daf |
Cleanup: YAGNI readonly props, private swap on ComfyApp, Canvas resize events simplification, v-memos on individual instances (#5869)
## Summary Assorted cleanup opportunities found while working through the Vue node rendering logic cleanup. ## Review Focus Am I wrong that the readonly logic was never actually executing because it was defined as False in GraphCanvas when making each LGraphNode? Is there an edge case or some other reason that the ResizeObserver wouldn't work as a single signal to resize the canvas? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5869-Cleanup-YAGNI-readonly-props-private-swap-on-ComfyApp-Canvas-resize-events-simplificat-27e6d73d3650811ba1dcf29e8d43091e) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
3f291672d4 |
fix progress state on Vue nodes in subgraphs (#5842)
## Summary Fixes two errors with subgraph progress states: 1. Nodes inside subgraphs were not having progress state shown 2. Subgraph nodes (outer representation) themselves did not have a visible progress state 1 is fixed by using locator IDs instead of local node IDs. 2 is fixed by ensuring the subgraph title button does not wrap to a newline and thus block the progress bar under the node header. ## Changes - **What**: Updated `useNodeExecutionState` composable to use `nodeLocatorId` for tracking execution state across subgraph boundaries - **What**: Modified NodeHeader layout to fix subgraph enter button positioning with proper flexbox gap ## Review Focus Execution state tracking accuracy for nested subgraph nodes and NodeHeader layout consistency across different node types. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5842-fix-progress-state-on-Vue-nodes-in-subgraphs-27c6d73d365081cb8335c8bb5dbd74f7) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Simula_r
|
c47cedcec2 |
Fix/vue nodes tooltips (#5856)
## Summary Make vue node tooltips support color modes and hide when user drags node or zooms in or out. IMPORTANT: this approach is non ideal. But for sake of time its a valid escape hatch. The reason for this approach is because of how primevue exposes tooltips via a directive and the inability to modify its state / conditionally render it directly. Instead we must get the actual tooltip element from the dom and trigger a mouseleave event. Follow up PR would be refactoring the entire useNodeTooltip.ts composable and tooltip system from primevue to something like RekaUI which is a much more declarative approach. To start we could just refactor Vue nodes themselves to RekaUI tooltips and then later migrate the other instances. ## Changes - **What**: hide tooltips on drag and zoom. Use color themes ## Review Focus Tooltip hover states after dragging. Fixes: - https://www.notion.so/comfy-org/Bug-Fix-tooltip-appearing-when-clicking-and-dragging-Vue-node-header-2796d73d365081f692fdde30c51580e1?source=copy_link - https://www.notion.so/comfy-org/Bug-Fix-chevron-color-customization-in-tooltip-pseudo-element-27b6d73d3650814abc25fc0eefda1648?source=copy_link - https://www.notion.so/comfy-org/Bug-Bug-Tooltip-positioning-breaks-with-zoom-due-to-missing-appendTo-prop-27b6d73d36508186858bd1cb4336ec03?source=copy_link ## Screenshots (if applicable) https://github.com/user-attachments/assets/06c70f6c-bf64-4b6d-8e6f-739995549940 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5856-Fix-vue-nodes-tooltips-27e6d73d36508177a77bf7f2f27344f4) by [Unito](https://www.unito.io) --------- Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com> |
||
|
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
|
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
|
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> |
||
|
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> |
||
|
Alexander Brown
|
c4c0e52e64 |
Refactor: Let LGraphNode handle more events itself (#5709)
## Summary Don't route events up through GraphCanvas if the component itself can handle the changes ## Changes - **What**: Reduce the indirect access or action dispatch to composables/stores. ## Review Focus The behavior should be either equivalent or a little snappier than before. Also, the local state in LGraphNode has (almost) all been removed in favor of reacting to the nodeData prop. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5709-Refactor-Let-LGraphNode-handle-more-events-itself-2756d73d365081e6a88ce6241bceecc0) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
0801778f60 |
feat: Add Vue node subgraph title button and fix subgraph navigation with vue nodes (#5572)
## Summary - Adds subgraph title button to Vue node headers (matching LiteGraph behavior) - Fixes Vue node lifecycle issues during subgraph navigation and tab switching - Extracts reusable `useSubgraphNavigation` composable with callback-based API - Adds comprehensive tests for subgraph functionality - Ensures proper graph context restoration during tab switches https://github.com/user-attachments/assets/fd4ff16a-4071-4da6-903f-b2be8dd6e672 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5572-feat-Add-Vue-node-subgraph-title-button-with-lifecycle-management-26f6d73d365081bfbd9cfd7d2775e1ef) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> |
||
|
Christian Byrne
|
a975e50f1b |
[feat] Add tooltip support for Vue nodes (#5577)
## Summary Added tooltip support for Vue node components using PrimeVue's v-tooltip directive with proper data integration and container scoping. https://github.com/user-attachments/assets/d1af31e6-ef6a-4df8-8de4-5098aa4490a1 ## Changes - **What**: Implemented tooltip functionality for Vue node headers, input/output slots, and widgets using [PrimeVue v-tooltip](https://primevue.org/tooltip/) directive - **Dependencies**: Leverages existing PrimeVue tooltip system, no new dependencies ## Review Focus Container scoping implementation via provide/inject pattern for tooltip positioning, proper TypeScript interfaces eliminating `as any` casts, and integration with existing settings store for tooltip delays and enable/disable functionality. ```mermaid graph TD A[LGraphNode Container] --> B[provide tooltipContainer] B --> C[NodeHeader inject] B --> D[InputSlot inject] B --> E[OutputSlot inject] B --> F[NodeWidgets inject] G[useNodeTooltips composable] --> H[NodeDefStore lookup] G --> I[Settings integration] G --> J[i18n fallback] C --> G D --> G E --> G F --> G style A fill:#f9f9f9,stroke:#333,color:#000 style G fill:#e8f4fd,stroke:#0066cc,color:#000 ``` --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
07fbe7267e |
Show error state on Vue nodes that caused execution errors (#5541)
* add missing node error border * update vue node data after configure * provide locatorId of execution error node to vue nodes * [refactor] use execution store directly instead of provide/inject pattern - Add lastExecutionErrorNodeId computed property to execution store - Replace inject() with useExecutionStore() in LGraphNode component - Remove useExecutionErrorProvider composable and provider call - Clean up unused ExecutionErrorNodeIdKey injection key - Add explicit return type annotation to hasAnyError computed Addresses @DrJKL's architecture feedback and type safety suggestions. * simplify error styling to match main branch conventions Remove redundant dark-theme prefixes from border-error and outline-error classes since these CSS custom properties handle both themes automatically. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * address review feedback on hasAnyError computed function - Add explicit boolean return type - Destructure props with defaults for cleaner code - Use \!\! for proper boolean conversion to satisfy TypeScript Addresses @DrJKL review comment on error state computation. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * destructure props at top level as suggested in review Replace `props.nodeData` and `props.error` references with destructured variables for cleaner code and proper defaults. Addresses @DrJKL review comment about props destructuring. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix rebase issues: correct node ID comparison and border colors - Use lastExecutionErrorNodeId instead of lastExecutionErrorNodeLocatorId for proper comparison with nodeData.id (both are local node IDs) - Restore border-blue-100 colors that were incorrectly changed during rebase - These were unrelated changes that snuck in during conflict resolution 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * remove unused lastExecutionErrorNodeLocatorId from exports The computed property is defined but not used by any external modules. Only lastExecutionErrorNodeId is actually consumed by components. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
aa7a99f4e3 |
fix: Show title, inputs, and outputs on Vue node component even when node fails to initalize (e.g., if missing) (#5540)
* add missing node error border * update vue node data after configure * [refactor] extract node type resolution to named const - addresses @DrJKL's readability concern Extracted the multi-fallback type resolution logic into a clearly named variable for improved readability and maintainability. * [refactor] convert watch to computed pattern - addresses @DrJKL's structure comment Replaced ref + watch pattern with computed for displayTitle, providing cleaner reactive behavior and eliminating the need for manual sync logic. |
||
|
Christian Byrne
|
f28ebcac19 |
Fix Vue slot label colors for light theme (#5529)
* [fix] use stone-200 for Vue slot labels in light theme Updates Vue node slot label components to use stone-200 color (#828282) for light theme instead of the previous #888682 color. This improves theme consistency across the Vue nodes system. Components updated: - InputSlot.vue: Input slot labels - OutputSlot.vue: Output slot labels - NodeHeader.vue: Collapse/expand icon - WidgetLayoutField.vue: Widget labels * Update src/renderer/extensions/vueNodes/components/NodeHeader.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
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 |