mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
4c955f6725b4b39483200a4d055c66d7207b4628
41 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Terry Jia
|
4c955f6725 |
fix: Improve legacy widget compatibility in vueNodes mode (#7766)
## Summary - Fix widget callback signature to pass node as 3rd parameter for extensions like Impact Pack - Add triggerDraw call to update all legacy widgets when any widget value changes - Support computeLayoutSize for dynamic widget height calculation - Set node.canvasHeight for extensions that rely on this property - Use step/10 for number input buttons to match litegraph behavior Fixes display and interaction issues with Impact Pack's Mask Rect Area nodes. fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7615 and https://github.com/Comfy-Org/ComfyUI_frontend/issues/7616 it also requires Impact pack PR https://github.com/ltdrdata/ComfyUI-Impact-Pack/pull/1167 ## Screenshots Before https://github.com/user-attachments/assets/eb890f7c-c1a0-4c7b-a8d7-dde304de83e4 After https://github.com/user-attachments/assets/dad65b52-d71e-4c19-92c0-367b7dcafed0 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7766-fix-Improve-legacy-widget-compatibility-in-vueNodes-mode-2d56d73d365081b18d83f4a41ff0f377) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
6396eb6fa3 |
Fix promoted assets not being assets in vue (#7576)
- Fixes asset widgets which have been promoted failing to display as asset widgets and having red names in vue mode. - Fixes promoted subgraph widgets failing to resolve inputSpec for use in vue mode. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/6c2d2763-6ac3-4769-82c5-b1ab1cc5e945"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/742e218b-ec42-411a-b5a2-021820031e2a" />| I'm not excited that this creates further bloat of SimplifiedWidget. Known issue - Similar to #7550, subgraph widgets will have an incorrect callback and will fail to update value on a fresh reload. This can be "fixed" (made worse) by entering and exiting the subgraph. Since this creates a 'leaked' widget callback which will then be called. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7576-Fix-promoted-assets-not-being-assets-in-vue-2cc6d73d3650814b8734f69b225b0228) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
0ad5509037 |
Fix selecting loras on cloud (#7560)
Models must be updated by emit. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7560-Fix-selecting-loras-on-cloud-2cb6d73d365081d48d3de032317bcb71) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
4e257bedca |
Fix widget reactivity (#7539)
Closes #7095 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7539-Fix-widget-reactivity-2cb6d73d3650816d8977ebda35ab88b9) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
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> |
||
|
Alexander Brown
|
18b133d22f |
Style: Larger Node Text, More Sidebar Alignment (#7223)
## Summary See what it looks like. How it feels. What do you think? - Also was able to unify down to a single SearchBox component. ## Changes - Bigger widget / slot labels - Smaller header text - Unified Searchboxes across sidebar tabs ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7223-Style-prototype-with-larger-node-text-2c36d73d365081f8a371c86f178fa1ff) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Johnpaul Chiwetelu
|
7c830a2f0b |
feat: bring node to front when clicking on any widget (#7202)
## Summary - Adds a capture-phase pointerdown handler to NodeWidgets that calls `bringNodeToFront` whenever any widget is clicked - Improves UX by ensuring the interacted node is always visible on top, without requiring the node itself to be selected fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7131 ## Before https://github.com/user-attachments/assets/c2c2ff0e-6e5a-49f2-bf2e-333950559ada ## After https://github.com/user-attachments/assets/fc3db735-20eb-40b5-9101-278badc4698e ## Test plan - [ ] Click on any widget (button, dropdown, input, etc.) within a Vue node - [ ] Verify the node moves to the front (highest z-index) when the widget is clicked - [ ] Verify existing widget functionality is unaffected --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
6156e22bac |
Implement widget borders in vue (#7322)
Adds support for displaying the "promoted" and "advanced" border indicators when in vue mode. Requires some (hopefully minor and generally beneficial) styling changes to make sure that the widgets are contained within their border. Note that the 'advanced' functionality sees minimal use and is likely to be revamped in the future. <img width="372" height="417" alt="image" src="https://github.com/user-attachments/assets/8ea1e66b-2a4e-4a16-996f-289a26e39708" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7322-Implement-widget-borders-in-vue-2c56d73d36508187b881f97e373d433b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
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> |
||
|
Alexander Brown
|
497bafcaeb |
Fix: Widget sizing with multiple expanding items (#7118)
## Summary Textarea/Markdown/3D pieces grow, other widget rows size to their contents. ## Screenshots (if applicable) <img width="564" height="420" alt="image" src="https://github.com/user-attachments/assets/35aeb9bf-a44d-4e3f-b2cd-a9f3604a7778" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7118-Fix-Widget-sizing-with-multiple-expanding-items-2be6d73d3650816c8153ff3f1e49176d) by [Unito](https://www.unito.io) --------- Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
c263111eeb |
Feat: Add preview as plaintext toggle for Preview As Text (#7102)
## Summary Adds a toggle to conditionally render the text as Markdown. ## Also... Fixes some type issues across our myriad Widget types. We should probably clean those up. ## Example https://github.com/user-attachments/assets/24fed943-1e79-4ea4-a962-826b06d68761 This could be a good minimal testcase for dynamic widgets @AustinMroz ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7102-WIP-Feat-Add-preview-as-plaintext-toggle-for-Preview-As-Text-2bd6d73d3650810c8b25c84866c8875c) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
d58a464c9c |
Style: Widget spacing and Markdown padding (#6902)
## Summary Less padding, looks nice. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6902-Style-Widget-spacing-and-Markdown-padding-2b66d73d365081cca409dbabc7b883bb) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
c06a7279e2 |
Style: Grid for widgets (#6891)
## Summary Keeps the controls and widgets a consistent width, but lets the size be more flexible ## Screenshots <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6891-Style-Grid-for-widgets-2b56d73d365081a29c30d337f3be1af6) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
6d41e8b6e4 |
Feat: Load Image (from Outputs) support in Vue Nodes (#6836)
## Summary Expose the Auto-refresh and manual refresh controls. Fixes an issue with the Dropdown where it was index dependent so wasn't updating correctly as new items came in. ## Screenshots <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6836-Feat-Load-Image-from-Outputs-support-in-Vue-Nodes-2b46d73d365081f1b44fcf2054d653da) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
00fa9b691b |
Fix: Simplify the widget state logic (#6741)
## Summary Fixes the case where a value is updated in the graph but the result doesn't reflect on the widget representation on the relevant node. ## Changes - **What**: Uses vanilla Vue utilities instead of a special utility - **What**: Fewer places where state could be desynced. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6741-Fix-WIP-Simplify-the-widget-state-logic-2af6d73d36508160b729db50608a2ea9) 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> |
||
|
Arjan Singh
|
8849d54e20 |
fix: use WidgetSelectDropdown for models (#6607)
## Summary As the commit says, the model loaders were broken in cloud if you enabled Vue Nodes (not a thing I think user does yet). This fixes it by configuring the `WidgetSelectDropdown` to load so the user load models like they would load a input or output asset. ## Review Focus Probably `useAssetWidgetData` to make sure it's idomatic. This part of [assetsStore](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6607/files#diff-18a5914c9f12c16d9c9c3a9f6d0e203a9c00598414d3d1c8637da9ca77339d83R158-R234) as well. ## Screenshots <img width="1196" height="1005" alt="Screenshot 2025-11-05 at 5 34 22 PM" src="https://github.com/user-attachments/assets/804cd3c4-3370-4667-b606-bed52fcd6278" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6607-fix-use-WidgetSelectDropdown-for-models-2a36d73d36508143b185d06d736e4af9) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
AustinMroz
|
7c2a768d83 |
More forgiving connections in vue (#6565)
The previous link connection code uses [closest](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest) to find a slot. Closest only checks parents, not siblings. Since the sought element has no children, this meant connection to a slot required the mouse be directly over the slot. This is changed by finding the closest (parent) widget or slot, and then querying for the slot. For simplicity, this means introducing an `lg-node-widget` class. As a result, connections can be made by hovering anywhere over a valid widget.  Resolves #6488 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6565-More-forgiving-connections-in-vue-2a16d73d365081e1bf46f5d54ec382d6) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
e606ff34ec |
Feat: Vue Node Slot Improvements (#6359)
## Summary Several fixes and improvements to the slot behavior on Vue nodes. ## Changes - **What**: Restore the pseudo-slots, if there are slots being hidden by collapse - **What**: Connections while collapsed - **What**: Display the links in a more reasonable location - **What**: Fixes styling of linked widgets - **What**: [~Fix reconnecting logic to prioritize newly disconnected and now empty slots~](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6370) ## Review Focus <!-- Critical design decisions or edge cases that need attention --> <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) https://github.com/user-attachments/assets/913cfb8f-acdd-4f3d-b619-c280cc11cce5 <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6359-WIP-Collapsed-nodes-multislots-29b6d73d3650817289d5f0a8efdade84) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
86c0fb11f1 |
Fix: Only stop propagation of events forwarded to the canvas. (#6387)
## Summary Allows users to drag nodes while clicking things like the widget labels. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6387-Fix-Only-stop-propagation-of-events-forwarded-to-the-canvas-29c6d73d365081bdb952c5e7f409031e) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
6368647cde |
Fix empty padding on nodes with previews (#6208)
Followup to #6194. Fixes nodes with image previews having empty padding. <img width="915" height="565" alt="image" src="https://github.com/user-attachments/assets/852a5e95-10d5-4fde-a5f1-f2f72ae5ffb6" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6208-Fix-empty-padding-on-nodes-with-previews-2946d73d365081eca299e0cfae420be3) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
a5c29a9826 |
Introduce grow-parent class for widgets (#6194)
Only some widgets actually want to grow. Flex makes this difficult. This PR sets up a `widget-expands` class that widgets can use to indicate that they want to dynamically grow and applies it to the textarea widget <img width="709" height="860" alt="image" src="https://github.com/user-attachments/assets/721d99e5-5939-4531-91b5-1cda69d4e8ed" /> There's a potential alternative avenue with using `flex-shrink` instead of `flex-grow`, and using `min-content` for `calculateIntrinsicSize`, but I've been poking around with that for a while with no success. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6194-Introduce-grow-parent-class-for-widgets-2946d73d3650812f9d03c305ab04e212) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
9cd7d06a6d |
Fix: Make textarea fill the area available instead of being resizable. (#6190)
## Summary Invert the sizing of textareas. They now grow based on the container instead of being independently resizable. ## Review Focus Tested the behavior in Note, Markdown Note, CLIP Text Encode, and Subgrpahs with promoted mutliline text widgets. Anything else that might break with this? ## Screenshots (if applicable) https://github.com/user-attachments/assets/4e2da142-d0b7-4629-9814-b637566ac1d6 <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6190-Fix-Make-textarea-fill-the-area-available-instead-of-being-resizable-2946d73d3650818a9f77c619deb93d0b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
f8490d0939 |
Fix links to wrong slots in vue mode (#6181)
Error is divided into 2 parts - A widget lacking slotMetadata would create a slot overwriting the index 0 slot - Slot data wasn't reactive. Any dynamic widgets would not have slotMetadata <img width="1065" height="436" alt="image" src="https://github.com/user-attachments/assets/c83b04fb-3b3a-4abb-8b68-99b305336348" /> See #5705 - Describes incorrect links internal to subgraphs. Likely a different, already solved issue ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6181-Fix-links-to-wrong-slots-in-vue-mode-2936d73d36508136ad43d8c818bf9fba) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
15b1b91b16 |
Implement a legacy canvas widget for vue mode (#6011)
 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6011-Implement-a-legacy-canvas-widget-for-vue-mode-2896d73d36508127a5d1debcccb519a0) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
bc281b2513 |
[style] make Vue widget/slot/label width and spacing align with designs (#6023)
Make the widths and spacing of the widgets/slots/labels match the [design](https://www.figma.com/design/31uH3r4x3xbIctuRWYW6NM/V3---Vue-Nodes?node-id=6489-33817&m=dev) which also better matches the interal layout of litegraph nodes. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6023-style-make-Vue-widget-slot-label-width-and-spacing-align-with-designs-2896d73d365081a1a831f396cb4eafc8) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
2599136296 |
Implement DOMWidget for vue (#6006)
 Did testing on about a dozen custom nodes. Most just work. - Some custom nodes have copy/pasted the `addDOMWidget` call with types like `customtext` and get converted to textareas -> Not feasible to fix here. Can open PRs into custom nodes if complaints arise. - Only the KJNodes spline editor had mouse issues -> Can investigate/open PR into KJNodes later. - Many nodes don't resize gracefully. Probably best handled in a future PR. - Some expect to be handled like textareas. These currently have minsize and don't scale. - Others, like VHS previews, scale self properly, but don't update height inside a drag operation -> node height can be set to less than fit. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6006-Implement-DOMWidget-for-vue-2886d73d3650817ca497c15d87d70f4f) by [Unito](https://www.unito.io) |
||
|
Johnpaul Chiwetelu
|
d7796fcda4 |
Vuenodes/audio widgets (#5627)
This pull request introduces a new audio playback widget for node UIs and integrates it into the node widget system. The main changes include the implementation of the `WidgetAudioUI` component, its registration in the widget registry, and updates to pass node data to the new widget. Additionally, some logging was added for debugging purposes. **Audio Widget Implementation and Integration:** * Added a new `WidgetAudioUI.vue` component that provides audio playback controls (play/pause, progress slider, volume, options) and loads audio files from the server based on node data. * Registered the new `WidgetAudioUI` component in the widget registry by importing it and adding an entry for the `audioUI` type. [[1]](diffhunk://#diff-c2a60954f7fdf638716fa1f83e437774d5250e9c99f3aa83c84a1c0e9cc5769bR21) [[2]](diffhunk://#diff-c2a60954f7fdf638716fa1f83e437774d5250e9c99f3aa83c84a1c0e9cc5769bR112-R115) * Updated `NodeWidgets.vue` to pass `nodeInfo` as the `node-data` prop to widgets of type `audioUI`, enabling the widget to access node-specific audio file information. **Debugging and Logging:** * Added logging of `nodeData` in `LGraphNode.vue` and `WidgetAudioUI.vue` to help with debugging and understanding the data structure. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R188-R189) [[2]](diffhunk://#diff-71cce190d74c6b5359288857ab9917caededb8cdf1a7e6377578b78aa32be2fcR1-R284) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5627-Vuenodes-audio-widgets-2716d73d365081fbbc06c1e6cf4ebf4d) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Arjan Singh <1598641+arjansingh@users.noreply.github.com> Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: Robin Huang <robin.j.huang@gmail.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
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) |
||
|
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> |
||
|
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> |
||
|
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> |
||
|
Terry Jia
|
20731fe3f0 |
pass nodeId to widget component (#5853)
## Summary pass nodeId to widget component, which is a prerequirist for https://github.com/Comfy-Org/ComfyUI_frontend/pull/5765 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5853-pass-nodeData-to-widget-component-27e6d73d3650811e9e48ceb7c3a00545) by [Unito](https://www.unito.io) |
||
|
Rizumu Ayaka
|
c96f719f91 |
feat: dropdown widgets vue node ui (#5624)
- Load media dropdown widgets - Load models dropdown widgets I added a lot of feedback effects during interactions. I tried my best to break the Dropdown into small components. To make it more flexible, I provided many configurable props and v-model. <img width="1000" alt="CleanShot 2025-09-18 at 01 54 38" src="https://github.com/user-attachments/assets/1a413078-1547-44b8-8b48-1ce8f8e764b5" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5624-feat-dropdown-widgets-vue-node-ui-2716d73d36508115a52bc1fb6d6376d0) by [Unito](https://www.unito.io) --------- Co-authored-by: Christian Byrne <cbyrne@comfy.org> |
||
|
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> |
||
|
Christian Byrne
|
da0d51311b |
fix Vue node being dragged when interacting with widgets (e.g., resizing textarea) (#5719)
## Summary Applying changes in https://github.com/Comfy-Org/ComfyUI_frontend/pull/5516 to entire widget wrapper. ## Changes - **What**: Added `.stop` modifier to pointer events in NodeWidgets component to prevent [event propagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) ## Review Focus Verify widget interactions remain functional while ensuring parent node drag/selection behavior is properly isolated. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5719-fix-Vue-node-being-dragged-when-interacting-with-widgets-e-g-resizing-textarea-2766d73d3650815091adcd1d65197c7b) by [Unito](https://www.unito.io) |
||
|
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
|
bc85d4e87b |
Make Vue nodes read-only when in panning mode (#5574)
## Summary Integrated Vue node components with canvas panning mode to prevent UI interference during navigation. ## Changes - **What**: Added [canCapturePointerEvents](https://docs.comfy.org/guide/vue-nodes) computed property to `useCanvasInteractions` composable that checks canvas read-only state - **What**: Modified Vue node components (LGraphNode, NodeWidgets) to conditionally handle pointer events based on canvas navigation mode - **What**: Updated node event handlers to respect panning mode and forward events to canvas when appropriate ## Review Focus Event forwarding logic in panning mode and pointer event capture state management across Vue node hierarchy. ```mermaid graph TD A[User Interaction] --> B{Canvas in Panning Mode?} B -->|Yes| C[Forward to Canvas] B -->|No| D[Handle in Vue Component] C --> E[Canvas Navigation] D --> F[Node Selection/Widget Interaction] G[canCapturePointerEvents] --> H{read_only === false} H -->|Yes| I[Allow Vue Events] H -->|No| J[Block Vue Events] style A fill:#f9f9f9,stroke:#333,color:#000 style E fill:#f9f9f9,stroke:#333,color:#000 style F fill:#f9f9f9,stroke:#333,color:#000 style I fill:#e1f5fe,stroke:#01579b,color:#000 style J fill:#ffebee,stroke:#c62828,color:#000 ``` ## Screenshots https://github.com/user-attachments/assets/00dc5e4a-2b56-43be-b92e-eaf511e52542 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5574-Make-Vue-nodes-read-only-when-in-panning-mode-26f6d73d3650818c951cd82c8fe58972) by [Unito](https://www.unito.io) --------- 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 |