mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
c7b5f4705579feefef28cfaf8f938aad504bd324
46 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Christian Byrne
|
c7b5f47055 |
feat(canvas): hide widgets marked advanced unless node.showAdvanced is true (#8147)
Hides widgets marked with `options.advanced = true` on the Vue Node canvas unless `node.showAdvanced` is true. ## Changes - Updates `NodeWidgets.vue` template to check `widget.options.advanced` combined with `nodeData.showAdvanced` - Updates `gridTemplateRows` computed to exclude hidden advanced widgets - Adds `showAdvanced` to `VueNodeData` interface in `useGraphNodeManager.ts` ## Related - Backend PR that adds `advanced` flag: comfyanonymous/ComfyUI#11939 - Toggle button PR: feat/advanced-widgets-toggle-button ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8147-feat-canvas-hide-widgets-marked-advanced-unless-node-showAdvanced-is-true-2ec6d73d36508179931ce78a6ffd6b0a) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
AustinMroz
|
47714c2740 |
Always wait for next tick before layout init (#7591)
A frequent pattern is to add a node to the graph, and then update the nodes position afterwards. Some of these cases (like subgraph unpacking) can set the node position in advance, but others, (like importA1111) require information on nodes in order to perform arranging. Alternatives, like allowing code to either modify `app.configuringGraph` or otherwise set a temporary state were considered, but create the same problem of requiring fixes in many places. As a proposed alternative, when a node is created, an extra tick of delay is always added before initializing layout. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7591-Always-wait-for-next-tick-before-layout-init-2cc6d73d365081f4ababc38020645670) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL0424@gmail.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
25afd39d2b |
linear v2: Simple Mode (#7734)
A major, full rewrite of linear mode, now under the name "Simple Mode". - Fixes widget styling - Adds a new simplified history - Adds support for non-image outputs - Supports right sidebar - Allows and panning on the output image preview - Provides support for drag and drop zones - Moves workflow notes into a popover. - Allows scrolling through outputs with Ctrl+scroll or arrow keys The primary means of accessing Simple Mode is a toggle button on the bottom right. This button is only shown if a feature flag is enabled, or the user has already seen linear mode during the current session. Simple Mode can also be accessed by - Using the toggle linear mode keybind - Loading a workflow that that was saved in Simple Mode workflow - Loading a template url with appropriate parameter <img width="1790" height="1387" alt="image" src="https://github.com/user-attachments/assets/d86a4a41-dfbf-41e7-a6d9-146473005606" /> Known issues: - Outputs on cloud are not filtered to those produced by the current workflow. - Output filtering has been globally disabled for consistency - Outputs will load more items on scroll, but does not unload - Performance may be reduced on weak devices with very large histories. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7734-linear-v2-2d16d73d3650819b8a10f150ff12ea22) by [Unito](https://www.unito.io) |
||
|
Rizumu Ayaka
|
b1b2fd8a4f |
feat: right side panel favorites, no selection state, and more... (#7812)
Most of the features in this pull request are completed and can be
reviewed and merged.
## TODO
- [x] no selection panel
- [x] group selected panel
- [x] tabs
- [x] favorites tab
- [x] global settings tab
- [x] nodes tab
- [x] widget actions menu
- [x] [Bug]: style bugs
- [x] button zoom to the node on canvas.
- [x] rename widgets on widget actions
- [ ] [Bug]: the canvas has not been updated after renaming.
- [x] global settings
- [ ] setting item: "show advanced parameters"
- blocked by other things. skip for now.
- [x] setting item: show toolbox on selection
- [x] setting item: nodes 2.0
- [ ] setting item: "background color"
- blocked by other things. skip for now.
- [x] setting item: grid spacing
- [x] setting item: snap nodes to grid
- [x] setting item: link shape
- [x] setting item: show connected links
- [x] form style reuses the form style of node widgets
- [x] group node cases
- [x] group node settings
- [x] show all nodes in group
- [x] show frame name on nodes when multiple selections are made
- [x] group multiple selections
- [x] [Bug]: nodes without widgets cannot display the location and their
group
- [x] [Bug]: labels layout
- [x] favorites
- [x] the indicator on widgets
- [x] favorite and unfavorite buttons on widgets
- [x] [Bug]: show node name in favorite widgets + improve labels layout
- [ ] [Bug]: After canceling the like, the like list will not be updated
immediately.
- [x] [Bug]: The favorite function does not work for the project on
Subgraph.
- [x] subgraph
- [x] add the node name from where this parameter comes from when node
is subgraph
- [x] show and hide directly on Inputs
- [x] some bugs need to be fixed.
- [x] advanced widgets
- [x] button: show advanced inputs
- Clicking button expands the "Advanced Inputs" section on the right
side panel, regardless of whether the panel is open or not
- [x] [Bug]: style bugs
- [x] advanced inputs section when node is subgraph
- [x] inputs tab rearranging
- [x] favorited inputs rearranging
- [x] subgraph inputs rearranging
- [ ] review and reconstruction to improve complexity and architecture
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7812-feat-right-side-panel-favorites-no-selection-state-and-more-2da6d73d36508134b503d676f9b3d248)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: bymyself <cbyrne@comfy.org>
|
||
|
AustinMroz
|
44c317fd05 |
Fix reactivity washing in refreshNodeSlots (#7802)
Creating a copy with spread resulted in a copy which was not reactive. Solves a bug where all widgets on a node in vue mode would cease to be reactive after any connection is made to the node. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7802-Fix-reactivity-washing-in-refreshNodeSlots-2d96d73d3650819e842ff46030bebfa1) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
Terry Jia
|
886fe07de9 |
fix: respect node resizable property in vueNodes mode (#7934)
## Summary Custom nodes like ComfyUI-KJNodes set `this.resizable = false` to disable resizing. This worked in litegraph but was ignored in vueNodes mode. Extract the resizable property from LGraphNode to VueNodeData and use it to conditionally render the resize handle and block resize interactions. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7934-fix-respect-node-resizable-property-in-vueNodes-mode-2e36d73d365081a0a92ade8b23ee3ce8) by [Unito](https://www.unito.io) |
||
|
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
|
f9b58904d9 |
Ensure widgets always get a single callback (#7579)
The other side of reactivity. Ensure that vue mode always registers a callback on litegraph nodes and never registers more than one. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7579-Ensure-widgets-always-get-a-single-callback-2cc6d73d365081e2a488c38ae394efc0) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
17be3b9770 |
Add support for NO_TITLE in vue, disabling border (#7589)
When `node.title_mode` is set to `TitleMode.NO_TITLE` the node header is not displayed in vue mode. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/0e64c3df-8bcb-496f-a53c-618fdca79610"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/34ea3a28-cc2e-4316-a154-40f54bdf8e60" />| When a node has specified both `NO_TITLE` and a transparent background, node borders are also disabled in vue mode. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/e52cf371-ba7e-401c-b9e5-b53607c26778"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/979a4ba4-cf6d-49b3-ae97-6e1d62f487cc" />| Known issues: - `NODE_TITLE_HEIGHT` strikes again. <img width="254" height="64" alt="image" src="https://github.com/user-attachments/assets/526b1e2c-66dd-4c5d-9954-8c997a0ab5b8" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7589-Add-support-for-NO_TITLE-in-vue-disabling-border-2cc6d73d36508182834bc78ea8dffa27) 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
|
3ee6d53423 |
Make node inputs reactive in vue (#7546)
Piecemeal fix pulled out from #7095 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7546-Make-node-inputs-reactive-in-vue-2cb6d73d36508189a88bf35e5747b870) 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> |
||
|
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> |
||
|
Terry Jia
|
b88d96d6cc |
fix: node shape not reactive in vueNodes mode (#7302)
## Summary add node shape support in vueNodes fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7144 ## Screenshots (if applicable) https://github.com/user-attachments/assets/df8a4fa6-5686-435d-a814-4fe3990f7e69 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7302-fix-node-shape-not-reactive-in-vueNodes-mode-2c56d73d3650811c9ef5e4fe49c94f55) by [Unito](https://www.unito.io) --------- 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
|
9da82f47ef |
Feat: Alt+Drag to clone - Vue Nodes (#6789)
## Summary Replicate the alt+drag to clone behavior present in litegraph. ## Changes - **What**: Simplify the interaction/drag handling, now with less state! - **What**: Alt+Click+Drag a node to clone it ## Screenshots (if applicable) https://github.com/user-attachments/assets/469e33c2-de0c-4e64-a344-1e9d9339d528 <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6789-WIP-Alt-Drag-to-clone-Vue-Nodes-2b16d73d36508102a871ffe97ed2831f) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
bb51a5aa76 |
Add linear mode (#6670)
 See also: #6642 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6670-Add-linear-mode-2aa6d73d365081d08887e4a6db3a8fa0) by [Unito](https://www.unito.io) |
||
|
Johnpaul Chiwetelu
|
fac86e35bf |
Drag vuenodes input (#6514)
This pull request introduces several improvements to Vue reactivity and user experience in the graph node and widget system. The main focus is on ensuring that changes to node and widget data reliably trigger updates in Vue components, improving drag-and-drop support for nodes, and enhancing widget value handling for better compatibility and reactivity. **Vue Reactivity Improvements:** * In `useGraphNodeManager.ts`, node data updates now create a completely new object and add a timestamp (`_updateTs`) to force Vue's reactivity system to detect changes. Additionally, node data is re-set on the next tick to guarantee component updates. [[1]](diffhunk://#diff-f980db6f42cef913c3fe92669783b255d617e40b9ccef9a1ab9cc8e326ff1790L272-R280) [[2]](diffhunk://#diff-f980db6f42cef913c3fe92669783b255d617e40b9ccef9a1ab9cc8e326ff1790R326-R335) * Widget value composables (`useWidgetValue` and related helpers) now accept either a direct value or a getter function for `modelValue`, and always normalize it to a getter. Watches are updated to use this getter for more reliable reactivity. [[1]](diffhunk://#diff-92dc3c8b09ab57105e400e115196aae645214f305685044f62edc3338afa0911L13-R14) [[2]](diffhunk://#diff-92dc3c8b09ab57105e400e115196aae645214f305685044f62edc3338afa0911R49-R57) [[3]](diffhunk://#diff-92dc3c8b09ab57105e400e115196aae645214f305685044f62edc3338afa0911L82-R91) [[4]](diffhunk://#diff-92dc3c8b09ab57105e400e115196aae645214f305685044f62edc3338afa0911L100-R104) [[5]](diffhunk://#diff-92dc3c8b09ab57105e400e115196aae645214f305685044f62edc3338afa0911L117-R121) [[6]](diffhunk://#diff-92dc3c8b09ab57105e400e115196aae645214f305685044f62edc3338afa0911L140-R144) [[7]](diffhunk://#diff-0c43cefa9fb524ae86541c7ca851e97a22b3fd01f95795c83273c977be77468fL47-R47) * In `useImageUploadWidget.ts`, widget value updates now use a new array/object to ensure Vue detects the change, especially for batch uploads. **Drag-and-Drop Support for Nodes:** * The `LGraphNode.vue` component adds drag-and-drop event handlers (`dragover`, `dragleave`, `drop`) and visual feedback (`isDraggingOver` state and highlight ring) for improved user experience when dragging files onto nodes. Node callbacks (`onDragOver`, `onDragDrop`) are used for custom validation and handling. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L26-R27) [[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R47-R49) [[3]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R482-R521) **Widget and Audio Upload Handling:** * In `uploadAudio.ts`, after uploading an audio file, the widget's callback is manually triggered to ensure Vue nodes update. There is also a commented-out call to mark the canvas as dirty for potential future refresh logic. [[1]](diffhunk://#diff-796b36f2cafb906a5e95b5750ca5ddc1bf57a304d4a022e0bdaee04b4ee5bbc4R61-R65) [[2]](diffhunk://#diff-796b36f2cafb906a5e95b5750ca5ddc1bf57a304d4a022e0bdaee04b4ee5bbc4R190-R191) These changes collectively improve the reliability and responsiveness of UI updates in the graph node system, especially in scenarios involving external updates, drag-and-drop interactions, and batch widget value changes. https://github.com/user-attachments/assets/8e3194c9-196c-4e13-ad0b-a32177f2d062 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6514-Drag-vuenodes-input-29e6d73d3650817da1b7ef96b61b752d) by [Unito](https://www.unito.io) |
||
|
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
|
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
|
5773df6ef7 |
Make nodeData.widgets reactive (#6019)
Makes the litegraph `node.widgets` array `shallowReactive` and makes the `nodeData.widgets` a `reactiveComputed` derived from the litegraph widget data.  Making changes to the structure of litegraph items is somewhat dangerous, but code search verifies that there are no custom nodes using `defineProperty` on `node.widgets` This fixes display of promoted widgets on subgraph node and any custom nodes that dynamically add or remove widgets. TODO: - Investigate occasional dropped widgets. - Some of this was confusion with `canvasOnly` widgets and widgets not implemented in vue. Will keep investigating, but I'm not terribly concerned with actual test cases and it being an objective improvement. Known Issue: - Node does not grow/shrink to fit changed widgets ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6019-Make-nodeData-widgets-reactive-2896d73d3650815691b6ee370a86a22c) by [Unito](https://www.unito.io) |
||
|
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) |
||
|
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
|
874ef3ba0c |
Lint: Add eslint import plugin (#5955)
## Summary Adds the linter, turns on the recommended and a few extra rules, fixes existing violations. Doesn't prohibit `../../...` imports yet, that'll be it's own PR. ## Changes - **What**: Consistent and fixable imports - **Dependencies**: The plugin and parser ## Review Focus How do you feel about the recommended rules? What about the extra ones? [Any more](https://github.com/un-ts/eslint-plugin-import-x?tab=readme-ov-file#rules) you'd want to turn on? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5955-Lint-Add-eslint-import-plugin-2856d73d3650819985c0fb9ca3fa94b0) by [Unito](https://www.unito.io) |
||
|
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
|
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> |
||
|
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> |
||
|
Arjan Singh
|
1749cfa678 |
[fix] properly show error states (#5758)
## Summary I want to take a more general look at `comfyApp.graph.onTrigger` but this is the cleanest fix I could come up with for #5694. I will explore simplifying onTrigger in a separate PR. ## Changes 1. Create a `node:slot-errors:changed` trigger. 2. Trigger it if we find any of the node slots have errors. 3. Check each node to see if there is any error present. 4. Add an error class if there are. ## Screenshots (if applicable) Working error states! <img width="1049" height="987" alt="Screenshot 2025-09-23 at 8 40 04 PM" src="https://github.com/user-attachments/assets/30e13283-129c-4d9c-b342-e7037582998a" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5758-fix-properly-show-error-states-2786d73d365081cbbf62c314c7f5f380) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
Alexander Brown
|
0fea54c542 |
Typing: Slots in VueNodeData (#5759)
## Summary Replace the unknown type with the interface in Litegraph. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5759-Typing-Slots-in-VueNodeData-2786d73d36508194b286fad172b13c51) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
1611c7a224 |
Refactor: Further state management cleanup (#5727)
## Summary Going through the GraphNodeManager and VueNodeLifecycle one property at a time and removing the pieces that are not currently wired up or used by the rest of the application Fixes paste location by updating the layoutStore in LGraphCanvas (which already mutates layoutStore elsewhere) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5727-WIP-Refactor-Further-state-management-cleanup-2766d73d36508173b379c6009c194a5a) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
e5d4d07d32 |
Refactor: More state management simplification (#5721)
## Summary Remove more procedural synchronization in favor of using reactive references. > Note: Also includes some fixes for issues caused during HMR. ## Review Focus In testing it seems to work the same, but let me know if I missed something. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5721-Refactor-More-state-management-simplification-2766d73d3650819b8d7ddc047c460f2b) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
8133bd4b7b |
Refactor: Composable disentangling (#5695)
## Summary Prerequisite refactor/cleanup to use a global store instead of having nodes throw up events to a parent component that stores a reference to a singleton service that itself bootstraps and synchronizes with a separate service to maintain a partially reactive but not fully reactive set of states that describe some but not all aspects of the nodes on either the litegraph, the vue side, or both. ## Changes - **What**: Refactoring, the behavior should not change. - **Dependencies**: A type utility to help with Vue component props ## Review Focus Is there something about the current structure that this could affect that would not be caught by our tests or using the application? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5695-Refactor-Composable-disentangling-2746d73d365081e6938ce656932f3e36) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
4f8e820c51 |
feat: Let mode changes trigger a re-render for Vue nodes (#5599)
* feat: Let mode changes trigger a re-render for Vue nodes * Oops! |
||
|
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
|
c145fd9df1 |
Show node output images on Vue Nodes (#5456)
* add image outputs on Vue nodes * add unit tests and update cursor pointer * use testing pinia * properly mock i18n in component test * get node via current graph * use subgraph ID from node creation * add better error handling for downloadFile util * refactor: simplify image preview component architecture - Replace awkward composable pattern with standard Vue component state - Fix reactivity issues where images didn't update on new outputs - Add proper subgraph-aware node resolution using NodeLocatorId - Enhance accessibility with keyboard navigation and ARIA labels - Add comprehensive error handling and loading states - Include PrimeVue Skeleton for better loading UX - Remove unused composable and test files The image preview now properly updates when new outputs are generated and follows standard Vue reactivity patterns. * resolve merge conflict with main - Keep both subgraphId field and hasErrors field from main - No conflicts in other files (LGraphNode.vue and main.json merged cleanly) * Fix LGraphNode test by adding proper Pinia testing setup Added createTestingPinia and i18n configuration following the pattern from working ImagePreview tests. Resolves test failures due to missing Pinia store dependencies. All 6 tests now pass successfully. |
||
|
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
|
bfef8d7d4b |
Add error border on missing nodes (vue nodes) (#5538)
* add missing node error border * Update src/renderer/extensions/vueNodes/components/LGraphNode.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> * Update src/renderer/extensions/vueNodes/components/LGraphNode.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> * [auto-fix] Apply ESLint and Prettier fixes --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
1328da0fbd |
fix: Wait until graph configured to initialize Vue nodes (#5415)
* don't register vue nodes until after tasks flushed * wait if configuring graph |
||
|
Alexander Brown
|
f6405e9125 |
Knip: More Pruning (#5374)
* knip: Don't ignore exports that are only used within a given file * knip: More pruning after rebase * knip: Vite plugin config fix * knip: vitest plugin config * knip: Playwright config, remove unnecessary ignores. * knip: Simplify project file enumeration. * knip: simplify the config file patterns ?(.optional_segment) * knip: tailwind v4 fix * knip: A little more, explain some of the deps. Should be good for this PR. * knip: remove unused disabling of classMembers. It's opt-in, which we should probably do. * knip: floating comments We should probably delete _one_ of these parallell trees, right? * knip: Add additional entrypoints * knip: Restore UserData that's exposed via the types for now. * knip: Add as an entry file even though knip says it's not necessary. * knip: re-export functions used by nodes (h/t @christian-byrne) |
||
|
Christian Byrne
|
2b8d354862 | improve type narrowing syntax (#5380) | ||
|
Christian Byrne
|
b4b732ad8f |
[refactor] Extract Vue node entry point logic into focused composables (#5390)
* refactor: Extract Vue node entry point logic into focused composables - Extract logic from GraphCanvas.vue (735→200 lines) into 3 composables: - useVueNodeLifecycle: Node manager initialization and cleanup - useViewportCulling: Viewport culling with transform sync - useNodeEventHandlers: Node selection, collapse, title handlers - Remove type assertions by using comfyApp.canvas instead of canvasStore.canvas - Eliminate getter anti-pattern with proper Vue reactive refs - Fix all TypeScript compatibility issues without workarounds - Maintain proper separation of concerns and Vue-idiomatic patterns * style: Remove extra comments from return statement * [auto-fix] Apply ESLint and Prettier fixes * style: Remove conversational comments - Remove temporary comments that only made sense in refactoring context - Clean up comment wording to be more permanent/professional - Keep meaningful comments about code behavior and architecture --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
0854194aa1 |
[refactor] Refactor rendering-related files to DDD organization (#5388)
* refactor rendering-related files to DDD organization * add to git ignore ignore revs |
||
|
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 |