Commit Graph

365 Commits

Author SHA1 Message Date
Christian Byrne
a8b4928acc feat(canvas): show 'Show Advanced' button on nodes with advanced widgets (#8148)
Extends the existing 'Show Advanced' button (previously subgraph-only)
to also appear on regular nodes that have widgets marked with
`options.advanced = true`.

## Changes
- Updates `showAdvancedInputsButton` computed to check for advanced
widgets on regular nodes
- Updates `handleShowAdvancedInputs` to set `node.showAdvanced = true`
and trigger canvas redraw for regular nodes

## Related
- Backend PR that adds `advanced` flag: comfyanonymous/ComfyUI#11939
- Canvas hide PR: feat/advanced-widgets-canvas-hide (this PR provides
the toggle for that)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8148-feat-canvas-show-Show-Advanced-button-on-nodes-with-advanced-widgets-2ec6d73d36508155a8adfa0a8ec84d46)
by [Unito](https://www.unito.io)
2026-01-19 21:57:08 -07:00
AustinMroz
7f25280da4 Fix padding, color, and move to reka-ui popover (#8164)
- Fixes some options, like decrement, being off center
- Fixes button being very hard to see on light themes
- Moves the popover to use our fancy new reka-ui Popover component
instead of primvue
- Since the display control is no longer in the ValueControlPopover,
loading is now actually async
 
Most changed lines in `ValueControlPopover` are just indentation.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/5867d70c-a606-4092-a5f8-dd18ecda5b6f"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/7bbaf036-77da-4c98-acb0-4b142e4a4761"
/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8164-Fix-padding-color-and-move-to-reka-ui-popover-2ed6d73d3650817ea314f04699f1387f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2026-01-19 19:32:40 -08:00
Terry Jia
a2246cce7a remove mouse event (#8162)
## Summary

replace https://github.com/Comfy-Org/ComfyUI_frontend/pull/7963, fix on
kjnodes instead https://github.com/kijai/ComfyUI-KJNodes/pull/514

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8162-remove-mouse-event-2ed6d73d365081999a5df76eabdfb89f)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
2026-01-19 20:11:56 -07:00
AustinMroz
284bdce61b Add a slider indicator for number widgets in vue mode. (#8122)
Sometimes it's difficult to gauge the valid range of values for a
widget. Litegraph includes a "slider" widget which displays the distance
from the min and max values as a colored bar. However, this
implementation is rather strongly disliked because it prevents entering
an exact number. Vue mode makes it simple to add just the indicator onto
our existing widget.

In addition to requiring both min and max be set, not every widget would
want this functionality. It's not useful information for seed, but also
has potential to cause confusion on widgets like CFG, that allow
inputting numbers up to 100 even though values beyond ~15 are rarely
desirable.

As a proposed heuristic, the ratio of "step" to distance between min and
max is currently used, but this could fairly easily be changed to an
opt-in only system.

<img width="617" height="487" alt="image"
src="https://github.com/user-attachments/assets/9c5f2119-0a03-4b56-bcf5-e4a0d0250784"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8122-Add-a-slider-indicator-for-number-widgets-in-vue-mode-2eb6d73d365081218fc8e86f37001958)
by [Unito](https://www.unito.io)
2026-01-17 21:28:48 -07:00
Terry Jia
be8916b4ce feat: Add visual crop preview widget for ImageCrop node - widget ImageCrop (#7825)
## Summary

Another implementation for image crop node, alternative for
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7014
As discussed with @christian-byrne and @DrJKL we could have single
widget - IMAGECROP with 4 ints and UI preview.

However, this solution requires changing the definition of image crop
node in BE (sent
[here](https://github.com/comfyanonymous/ComfyUI/pull/11594)), which
will break the exsiting workflow, also it would not allow connect
separate int node as input, I am not sure it is a good idea.

So I keep two PRs openned for references

## Screenshots


https://github.com/user-attachments/assets/fde6938c-4395-48f6-ac05-6282c5eb8157

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7825-feat-Add-visual-crop-preview-widget-for-ImageCrop-node-widget-ImageCrop-2dc6d73d3650812bb8a2cdff4615032b)
by [Unito](https://www.unito.io)
2026-01-17 17:09:16 -05:00
AustinMroz
d3bd85db7f Fix roundness of slot error indicator in vue (#8123)
When a node has a missing input connection, the slot is highlighted with
a red outline. This PR makes the error indicator round like the slot
instead of an oval.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/2d5ebc93-fa74-492d-92a7-3a1b3af4754f"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/57c15503-d94a-48d7-8c35-7760f1b860e6"
/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8123-Fix-roundness-of-slot-error-indicator-in-vue-2eb6d73d3650810383a2f5532117c29f)
by [Unito](https://www.unito.io)
2026-01-16 22:07:54 -08:00
AustinMroz
69512b9b28 Fix asset selection in litegraph (#8117)
#8074 included some refactoring to the asset dialogue to ensure that it
wouldn't pop up multiple times in vue mode

But moving the openModal function to be contained in options means that
`this` is no longer the widget, but instead the options object. This is
fixed by requiring that widget be explicitly passed as a parameter.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8117-Fix-asset-selection-in-litegraph-2eb6d73d36508176b5a3f6d21964be39)
by [Unito](https://www.unito.io)
2026-01-16 19:17:10 -07:00
AustinMroz
cd4999209b Improve linear compatibility with Safari, run button metadata (#8107)
I downloaded the oldest webkit based browser I could find after reports
of display issues. The changes here cause some minor styling tweaks, but
should be more compatible overall. A quick list of fixed issues
- Center panel placeholder had incorrect aspect ratio
<img height="500" alt="image"
src="https://github.com/user-attachments/assets/b75e3c49-20d9-4d6e-bca4-95cc8a73f821"
/>
- Image previews had incorrect aspect ratio (But the other way around)
<img height="500" alt="image"
src="https://github.com/user-attachments/assets/b8ebc58e-2655-41f8-a3b4-70ba65940612"
/>
- On mobile, output groups would flex incorrectly, resulting in a large
gap between them
<img height="500" alt="image"
src="https://github.com/user-attachments/assets/ed7e8e43-c34e-4ffc-a3ee-126b1a2ef4e0"
/>



Also moves the run button trigger source to a new 'linear' type


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8107-Improve-linear-compatibility-with-Safari-run-button-metadata-2ea6d73d3650814e89cbc190b6ca8f87)
by [Unito](https://www.unito.io)
2026-01-16 11:36:52 -08:00
AustinMroz
0d5ca96a2b Further linear fixes (#8074)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8074-Further-linear-fixes-2e96d73d365081efb74bf150982c7a66)
by [Unito](https://www.unito.io)
2026-01-15 14:45:19 -08:00
Terry Jia
aff7f2a296 fix: prevent Record Audio waveform from overflowing node bounds (#8070)
## Summary

Add min-w-0 to flex containers to allow shrinking, reduce gaps and
padding, and use shrink-0 on fixed-size elements to ensure the waveform
area clips properly when the node is at minimum width.

## Screenshots (if applicable)
before

https://github.com/user-attachments/assets/215455aa-555b-4ade-9b36-9e89ac7c14aa


after

https://github.com/user-attachments/assets/bf56028b-ae02-4388-be83-460c7b1f14e1

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8070-fix-prevent-Record-Audio-waveform-from-overflowing-node-bounds-2e96d73d3650816b9660e5532ffa0bc3)
by [Unito](https://www.unito.io)
2026-01-15 15:49:32 -05:00
AustinMroz
efc242b968 Linear mode bug fixes (#8054)
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8054-Linear-mode-bug-fixes-2e86d73d365081ed8d75d6e2af679f6c)
by [Unito](https://www.unito.io)
2026-01-14 20:49:13 -08:00
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)
2026-01-13 20:18:31 -08:00
pythongosssss
ebca0cb1e0 Fix vue node slot position calculation (#7877)
## Summary

Fix slot position for Vue nodes using LiteGraph calculation

Fixes #7446

## Changes
- Updated getInput/OutputPos to call getSlotPosition which handles
positions for both LiteGraph & Vue nodes correctly
- Add regression test

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7877-Fix-vue-node-slot-position-calculation-2e16d73d365081219afef0e4ebfb0620)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2026-01-13 20:40:21 -07:00
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>
2026-01-13 20:37:17 -07:00
AustinMroz
20d06f92ca Fix error on close of combo dropdown (#7804)
Apparently, enabling autofocus causes primevue to also attempt focusing
the searchbox one frame after closing.

I have no idea why this behaviour would ever be beneficial, but this PR
adds an override to prevent this behaviour and clean up the console
spam.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7804-Fix-error-on-close-of-combo-dropdown-2d96d73d365081f8b677e3e4aaadb51b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
2026-01-13 23:31:55 +00:00
AustinMroz
97a78f4a35 Implement vue math (#7759)
Adds support for entering math inside number widgets in vue mode

![vue-math_00001](https://github.com/user-attachments/assets/e8ed7e2a-511f-4550-bfdd-1c467972d30d)

Migrates components to simple html elements (div and button) by
borrowing styling from the (reverted) reka-ui migration in #6985. The
existing (evil) litegraph eval code is extracted as a utility function
and reused.

This PR means we're entirely writing our own NumberField.

Also adds support for scrubbing widgets like in litegraph

![scrubbing_00001](https://github.com/user-attachments/assets/890bcd28-34f4-4be0-908f-657e43f671b0)

### Known Issue
- Scrubbing causes text to be highlighted, ~~starting a scrub from
highlighted text will instead drag the text~~.
- It seems this can only be prevented with `pointerdown.prevent`, but
this requires a manual `input.focus()` which does not place the cursor
at location of mouse click.

(Obligatory: _It won't do you a bit of good to review math_)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7759-Implement-vue-math-2d46d73d365081b9acd4d6422669016e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: DrJKL <DrJKL0424@gmail.com>
2026-01-13 15:11:33 -08:00
Terry Jia
f6d39dbfc8 fix: stop pointer/mouse event propagation in vueNodes widget containers (#7953)
## Summary
Prevents custom widget drag interactions from triggering node drag in
vueNodes mode. Custom plugins like KJNodes Points Editor use their own
drag handlers which were bubbling up to the node container.

## Screenshots (if applicable)
before



https://github.com/user-attachments/assets/bc4c3095-d454-45f6-a4ec-60178e8f47df


after


https://github.com/user-attachments/assets/a32a5591-120e-4842-a0e0-3dd972127376

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7953-fix-stop-pointer-mouse-event-propagation-in-vueNodes-widget-containers-2e56d73d3650810398f2c582a91d767b)
by [Unito](https://www.unito.io)
2026-01-11 20:34:22 -05:00
Terry Jia
6a1da7a7af fix: image compare height mismatch between before and after images (#7931)
## Summary

Add relative and size-full classes to the inner container div to ensure
both images share the same positioning context and size constraints.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7928

## Screenshots (if applicable)
before
<img width="666" height="369" alt="image"
src="https://github.com/user-attachments/assets/2118685c-412a-4689-aac4-c0e592e47678"
/>

after
<img width="500" height="505" alt="image"
src="https://github.com/user-attachments/assets/c773147a-a28a-4145-a26a-6f19dafad50f"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7931-fix-image-compare-height-mismatch-between-before-and-after-images-2e36d73d365081b69b49dfdd63d242a9)
by [Unito](https://www.unito.io)
2026-01-09 16:02:32 -05:00
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)
2026-01-09 15:57:50 -05:00
Terry Jia
92f21c14d4 fix: remove negative margin from legacy widget canvas (#7925)
## Summary

Removes mt-[-13px] from WidgetLegacy canvas to fix legacy widgets
overlapping with output slots in vueNodes mode.

## Screenshots
before
<img width="2560" height="939" alt="image"
src="https://github.com/user-attachments/assets/cbee2bee-b6b2-4d21-b1b6-78d1a8e09949"
/>

after
<img width="1213" height="920" alt="image"
src="https://github.com/user-attachments/assets/a3a26514-b425-4771-b234-06da65f525bc"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7925-fix-remove-negative-margin-from-legacy-widget-canvas-2e36d73d36508113aea4f2301cccff3c)
by [Unito](https://www.unito.io)
2026-01-08 23:22:40 -05:00
Johnpaul Chiwetelu
9e434a1002 fix: replace text-white with theme-aware color tokens (#7908)
## Summary
- Replace hardcoded `text-white` class with theme-aware alternatives to
fix invisible text on light themes
- Update Load3D control backgrounds to use semantic tokens
- Update dropdown menus to use `bg-interface-menu-surface`
- Update overlay backgrounds to use `bg-backdrop` with opacity

## Changes
| Component | Old | New |
|-----------|-----|-----|
| Text on primary bg | `text-white` | `text-base-foreground` |
| Dropdown menus | `bg-black/50` | `bg-interface-menu-surface` |
| Control panels | `bg-smoke-700/30` | `bg-backdrop/30` |
| Loading overlays | `bg-black bg-opacity-50` | `bg-backdrop/50` |
| Selected states | `bg-smoke-600` | `bg-button-active-surface` |

## Files Modified (14)
- `src/components/TopMenuSection.vue`
- `src/components/input/MultiSelect.vue`
- `src/components/load3d/*.vue` (12 files)
- `src/renderer/extensions/vueNodes/VideoPreview.vue`

## Test plan
- [ ] Verify text visibility in light theme
- [ ] Verify text visibility in dark theme
- [ ] Test Load3D viewer controls functionality
- [ ] Test MultiSelect dropdown checkbox visibility

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7908-fix-replace-text-white-with-theme-aware-color-tokens-2e26d73d36508107bb01d1d6e3b74f6a)
by [Unito](https://www.unito.io)
2026-01-09 02:40:15 +01:00
AustinMroz
99cb7a2da1 Fix linked asset widget promotion in vue (#7895)
Asset widgets resolve the list of models by checking the name of the
node the widget is contained on. When an asset widget is linked to a
subgraph node, a clone is made of the widget and then the clone is used
to initialize an asset widget in vue mode. Since the widget no longer
holds any form of reference to the original node, asset data fails to
resolve.

This is fixed by storing the original nodeType as an option on the
cloned widget when an asset widget is linked to a subgraph input.

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/345f9cc1-da04-44ab-8fed-76379c8528de"/>
| <img width="360" alt="after"
src="https://github.com/user-attachments/assets/88d1ddaa-56fb-41b3-8d5d-0ded02aaa7d2"
/>|

See also #7563, #7560

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7895-Fix-linked-asset-widget-promotion-in-vue-2e26d73d365081e5b295f6236458b978)
by [Unito](https://www.unito.io)
2026-01-08 09:12:02 -08:00
Terry Jia
b3d87673ec feat: display label_on/label_off for boolean widgets in vueNodes mode (#7894)
## Summary

Add support for displaying custom on/off labels for boolean toggle
widgets, matching the behavior in litegraph mode.

## Screenshots
before - litegraph
<img width="1232" height="600" alt="image"
src="https://github.com/user-attachments/assets/aae91acd-4b6b-4a89-aded-c5445e352006"
/>
before - vueNodes
<img width="869" height="584" alt="image"
src="https://github.com/user-attachments/assets/a69dc71e-45f7-4941-911f-f037a2b1c5c2"
/>

after - vueNodes
<img width="1156" height="608" alt="image"
src="https://github.com/user-attachments/assets/818164a6-826b-4545-bc20-e01625f11d7d"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7894-feat-display-label_on-label_off-for-boolean-widgets-in-vueNodes-mode-2e26d73d365081a3b938c87dd4cf23aa)
by [Unito](https://www.unito.io)
2026-01-07 23:04:47 -05:00
Terry Jia
a1d689d3b3 fix: wrap image preview navigation dots when overflowing node width (#7891)
## Summary

When Preview Image node has many images, the navigation dots would
overflow beyond the node boundaries. Adding flex-wrap ensures dots wrap
to multiple lines instead of overflowing.

## Screenshots
before
<img width="1175" height="1357" alt="image"
src="https://github.com/user-attachments/assets/1903ae13-c304-4c75-a947-aa879ef9c2e1"
/>

after
<img width="654" height="840" alt="image"
src="https://github.com/user-attachments/assets/37012379-b72f-4b7d-9355-08bac11b094b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7891-fix-wrap-image-preview-navigation-dots-when-overflowing-node-width-2e26d73d36508130a5edf0a0d34f966c)
by [Unito](https://www.unito.io)
2026-01-07 20:42:44 -05:00
Terry Jia
2356b0bc9e fix: prevent image preview resize issues when switching to vueNodes mode (#7868)
## Summary
- Fix duplicate rendering issue for image preview nodes when switching
from litegraph to vueNodes mode by setting canvasOnly: true on
ImagePreviewWidget

## Problem

When switching from litegraph to vueNodes mode, image preview nodes
(LoadImage, PreviewImage) had two issues:

1. Node becoming longer: The ImagePreviewWidget was being rendered twice
- once as a WidgetLegacy canvas (with stale computedHeight from
litegraph mode) and once as Vue's ImagePreview component

## Solution

1. Set canvasOnly: true for ImagePreviewWidget so it won't render as
WidgetLegacy in Vue mode (Vue's ImagePreview.vue already handles image
display)


## Screenshots (if applicable)
before


https://github.com/user-attachments/assets/925c4fb4-bc9a-4da5-b8ae-3557c2d3836b


after


https://github.com/user-attachments/assets/5faa6878-c56d-44dd-86f5-728bff9ad58a

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7868-fix-prevent-image-preview-resize-issues-when-switching-to-vueNodes-mode-2e16d73d36508106a058da2f8d17c410)
by [Unito](https://www.unito.io)
2026-01-06 19:15:20 -07:00
Alexander Brown
10feb1fd5b chore: migrate tests from tests-ui/ to colocate with source files (#7811)
## Summary

Migrates all unit tests from `tests-ui/` to colocate with their source
files in `src/`, improving discoverability and maintainability.

## Changes

- **What**: Relocated all unit tests to be adjacent to the code they
test, following the `<source>.test.ts` naming convention
- **Config**: Updated `vitest.config.ts` to remove `tests-ui` include
pattern and `@tests-ui` alias
- **Docs**: Moved testing documentation to `docs/testing/` with updated
paths and patterns

## Review Focus

- Migration patterns documented in
`temp/plans/migrate-tests-ui-to-src.md`
- Tests use `@/` path aliases instead of relative imports
- Shared fixtures placed in `__fixtures__/` directories

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7811-chore-migrate-tests-from-tests-ui-to-colocate-with-source-files-2da6d73d36508147a4cce85365dee614)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>
2026-01-05 16:32:24 -08:00
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)
2026-01-01 21:35:08 -05:00
Terry Jia
f5e51d0339 fix: PrimitiveNode combo widget value not persisting in vueNodes mode (#7782)
## Summary
- Add missing v-model binding to WidgetWithControl in WidgetSelect.vue
- Trigger callback after setting widget value in PrimitiveNode to update
linked widgets

The combo widget value was lost because PrimitiveNode creates combo
widgets with controlWidget (via addValueControlWidgets), causing it to
use the WidgetWithControl branch which was missing v-model binding.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7694 and
https://github.com/Comfy-Org/ComfyUI_frontend/issues/7696

## Screenshots
before

https://github.com/user-attachments/assets/0a0dc668-eb71-4072-b5f7-0c20483fc1ff

after

https://github.com/user-attachments/assets/dfd2274c-8ebf-4105-821a-946063d87e9a
2025-12-30 14:12:29 -05:00
Alexander Brown
3ae2b52649 Chore: Upgrade Vitest to v4 (#7797)
## Summary

https://vitest.dev/guide/migration.html#vitest-4

## Changes

- **What**: Update Vitest and some associated dependencies
- **What**: Fix issue with our existing mocks and mock types

## Review Focus

Double check the test updates. I tried to keep the changes minimal.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7797-Chore-Upgrade-Vitest-to-v4-2d96d73d3650810cbe3ac42d7bd6585a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-29 19:24:35 -08:00
Alexander Brown
7b68b19f11 Component: The Rest of the PrimeVue buttons (#7649)
## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2025-12-29 15:03:34 -08:00
Terry Jia
59af15961f feat: add ImageCompare node (#7538)
## Summary

add ImageCompare node, which is high demand among custom nodes, such as
rgthree, we should support as core node

Need BE change https://github.com/comfyanonymous/ComfyUI/pull/11343

## Screenshots (if applicable)



https://github.com/user-attachments/assets/a37bdcd0-de59-4bdd-bfc7-1adbe92f5298

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7538-feat-add-ImageCompare-node-2cb6d73d36508163a7d5f4807aece01a)
by [Unito](https://www.unito.io)
2025-12-26 13:27:44 -07:00
AustinMroz
ab16c153c7 Fix slot renaming in vue (#7748)
Adds an additional check for `slotData.label` so that renamed slots
properly display in vue mode

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7748-Fix-slot-renaming-in-vue-2d36d73d365081dc8247f2d9e9e06a7a)
by [Unito](https://www.unito.io)
2025-12-23 20:51:20 -07:00
Terry Jia
25b9c51237 fix: correct Vue node selection box detection accuracy (#7741)
## Summary
Remove double-counting of NODE_TITLE_HEIGHT in layout sync. The title
height was being added both in useLayoutSync and in LiteGraph's
measure() function, causing boundingRect to be 30px taller than actual
DOM.

This caused selection box to detect nodes ~30px below their actual
bottom.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7580

## Screenshots (if applicable)
before


https://github.com/user-attachments/assets/babf0b9d-174e-4ec3-a3bb-18e4f9d88d09

after


https://github.com/user-attachments/assets/4f9989a5-4d3c-4303-bd1b-70ca70cb8f15

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7741-fix-correct-Vue-node-selection-box-detection-accuracy-2d26d73d3650817cbe80f98a3bf1abf1)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-23 17:36:06 -05:00
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)
2025-12-20 14:32:07 -07:00
AustinMroz
0977e6e751 Fix buttons displayed behind images in litegraph (#7627)
#7394 caused a regression with preview image buttons showing behind the
image in litegraph. This is fixed by also deferring button draws

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/4c3b02e0-4951-403d-98b8-b01a01512d21"/>
| <img width="360" alt="after"
src="https://github.com/user-attachments/assets/7a4fb8e4-8caa-47f3-939d-8d8ddc0e71b4"
/>|

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-20 14:14:58 -07:00
Simula_r
ccb73186fb refactor: start on removing FF for subscription tiers (#7596)
## Summary

Refactor: remove FF for subscription tier, remove legacy code for non
subscription tier logic.
 
## Review Focus

Preexisting cloud functionality impact.

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## 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-7596-refactor-start-on-removing-FF-for-subscription-tiers-2cc6d73d3650816bac3aef893e4f37cd)
by [Unito](https://www.unito.io)
2025-12-19 18:52:37 -07:00
Johnpaul Chiwetelu
552452622d fix: context menu not opening when right-clicking different Vue nodes (#7644)
## Summary
- Fixed issue where right-clicking on one Vue node then another would
close the context menu instead of repositioning it
- Added `showNodeOptions` function that always shows the menu at the new
position (used for contextmenu events)
- Kept `toggleNodeOptions` for the "More Options" button where toggle
behavior is expected

## Test plan
- [ ] Right-click on a Vue node to open context menu
- [ ] Right-click on a different Vue node - menu should immediately show
for the new node
- [ ] Click "More Options" button when menu is open - should close the
menu
- [ ] Click "More Options" button when menu is closed - should open the
menu



https://github.com/user-attachments/assets/bb31c2e4-12b4-4786-96ac-23b1e2b4daa0



┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7644-fix-context-menu-not-opening-when-right-clicking-different-Vue-nodes-2ce6d73d36508145bc30fe6947b6808a)
by [Unito](https://www.unito.io)
2025-12-19 22:36:05 +01:00
Alexander Brown
6d57b4def5 Fix: Minimap rendering (#7639)
## Summary

Restores the refs, but in a way that vue-tsc understands.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7639-Fix-Minimap-rendering-2ce6d73d3650817eb323ce7e2022ab74)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
2025-12-19 11:52:13 -08:00
Johnpaul Chiwetelu
b598ce2c0f fix: node preview Vue mode sizing in manager panel (#7611)
## Summary
- Add `lg-node-preview` class to LGraphNodePreview for CSS targeting
- Override absolute positioning in NodesTabPanel to make Vue mode
previews fit within the container
- Apply zoom scaling (0.5) to fit node previews in the manager info
panel

## Test plan
- [ ] Open manager panel and select a node pack with nodes
- [ ] Verify node previews display correctly with Vue mode enabled
- [ ] Verify previews fit within the panel bounds without overflow

## Before


https://github.com/user-attachments/assets/8cd3a201-600d-4f31-9b79-4a480a07d998



## After



https://github.com/user-attachments/assets/b88ee7f2-5e6d-4913-b5a6-fa5fbe3b4dde





┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7611-fix-node-preview-Vue-mode-sizing-in-manager-panel-2cd6d73d36508141843cea046f104746)
by [Unito](https://www.unito.io)
2025-12-19 08:32:58 +01:00
Alexander Brown
2c26fbb550 Component: Button Migration 3: IconTextButton (#7603)
## Summary

Replace all the `IconTextButton`s with `Button`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7603-WIP-Component-Button-Migraion-3-IconTextButton-2cd6d73d365081b7b742fa2172dc2ba8)
by [Unito](https://www.unito.io)
2025-12-18 16:09:56 -08:00
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)
2025-12-17 19:48:32 -07:00
Alexander Brown
fba580dc7d Component: Button Migration 2: IconButton (#7598)
## Summary

Still a work in progress. Buttons with just icons are already in the
stories for button.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7598-WIP-Component-Button-Migration-2-IconButton-2cc6d73d365081c09143c63464ac60b7)
by [Unito](https://www.unito.io)
2025-12-17 18:11:43 -08:00
Alexander Brown
db929220af Chore: Update several Develeoper Dependencies (#7590)
## Summary

Hopefully this will stabilize the precommit and prepush behavior for
developers using Windows and speed up the runtime of a few scripts for
everyone else.

Includes fixes for unused refs that were caught by the updated vue-tsc.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7590-Chore-Update-several-Develeoper-Dependencies-2cc6d73d365081fdb27cd00e53b169d5)
by [Unito](https://www.unito.io)
2025-12-17 15:24:07 -08:00
Rizumu Ayaka
3e111bd75c fix: expand assets dropdown body to show entire "no results placeholder" (#7586)
Currently, when the assets dropdown has no assets available, the "No
Results Placeholder" text is not fully visible because the dropdown body
doesn't expand to accommodate the full message.

Make the body of the assets dropdown expand to show the entire "No
Results Placeholder" message when there are no assets present.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7586-fix-expand-assets-dropdown-body-to-show-entire-no-results-placeholder-2cc6d73d365081f4a142e927621f936d)
by [Unito](https://www.unito.io)
2025-12-17 13:53:43 -07:00
Johnpaul Chiwetelu
e21f43f398 [feat] Replace NodeOptions with PrimeVue ContextMenu (#7114)
## Summary
- Add `NodeContextMenu.vue` using PrimeVue ContextMenu component with
native submenu support
- Rename `SubmenuPopover.vue` to `ColorPickerMenu.vue` (specialized for
color picker)
- Delete old components: `NodeOptions.vue`, `MenuOptionItem.vue`,
`useSubmenuPositioning.ts`
- Wire up context menu converter in `useMoreOptionsMenu.ts`
- Update tests to use hover instead of click for submenus

## Dependencies
**This PR depends on #7113** - the context menu converter infrastructure
PR. It should be merged after that PR.

## Benefits
- Native PrimeVue submenu support with proper keyboard navigation
- Constrained menu dimensions with overflow scrolling (max-h-[80vh])
- Cleaner component architecture with ~280 fewer lines of code
- Better separation: ColorPickerMenu handles only the custom color
picker UI

## Test plan
- [x] Typecheck passes
- [x] Lint passes
- [x] Knip passes
- [ ] Browser tests for submenu interactions pass
- [ ] Manual testing of node context menu

## Screenshots
(Menu UI should look the same, with improved submenu behavior)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7114-feat-Replace-NodeOptions-with-PrimeVue-ContextMenu-2be6d73d365081fda576fd691175eacf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-17 06:47:28 +01:00
AustinMroz
ab76d02823 Fix doubled control application (#7550)
With reactivity fixed, control widgets would apply twice. This is fixed
by using the litegraph implementation.

Also adds control widget support for combos

Followup to #7539.

Known Issue:
- Primitive node do not have litegraph callbacks properly setup. As a
result, they will display an updated value when modified by control
widgets. Fixing this will requires a larger, separate PR

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7550-Fix-doubled-control-application-2cb6d73d365081739a2fc40fdfb3630e)
by [Unito](https://www.unito.io)
2025-12-16 18:42:02 -08:00
Benjamin Lu
e1294d66cc Hide queue overlay header menu on cloud (#7571)
Hide the QueueOverlayHeader more-options (…) menu when running in Cloud
distribution

This is being hidden instead of fixed because it deletes all user assets
on cloud, will be touched by /jobs, replaced by the second iteration of
design changes, along with changes to asset deletion happening soon. It
would be too risky to have a proper fix for it in the cloud deploy
today.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7571-Hide-queue-overlay-header-menu-on-cloud-2cb6d73d3650815a8faac8a8f0de91f0)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-16 13:37:52 -08:00
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)
2025-12-16 19:51:32 +00:00
Kelly Yang
97386b0a14 Fix: the wrong selection under the hand mode (#7541)
## Summary

Fixed an inconsistency where nodes were resizable in Hand mode. Resizing
is now restricted to Selection mode only tomatch standard LiteGraph
behavior (Hand mode should only be for panning).

## Changes

What: Disabled node resizing logic when the canvas is set to Hand mode.

## Review Focus

Try toggling between Selection and Hand modes. Verify that resize
handles are unresponsive in Hand mode but work
normally in Selection mode.

## Screenshots

Before


https://github.com/user-attachments/assets/2707cdd9-93f5-4820-9282-893081778dff


After


https://github.com/user-attachments/assets/4d4ee027-b74a-481a-8b2a-97c58799534a

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7541-Fix-the-wrong-selection-under-the-hand-mode-2cb6d73d3650812b950ef385809130bb)
by [Unito](https://www.unito.io)
2025-12-16 14:50:24 -05:00
Alexander Brown
d448421263 Fix: Restore assets API short-circuit in WidgetSelectDropdown (#7563)
## Summary

Removed in #6985, but breaks the dropdown loading on Cloud.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7563-Fix-Restore-assets-API-short-circuit-in-WidgetSelectDropdown-2cb6d73d365081778a8dc65418d9f6be)
by [Unito](https://www.unito.io)
2025-12-16 19:34:55 +00:00