Commit Graph

664 Commits

Author SHA1 Message Date
Christian Byrne
585d46d4fb fix: inner groups being moved double when moving outer group (in vue mode) (#7447)
## Summary

Fixes issue when dragging a group that had inner groups when in vue
mode.

When dragging the outer group in Vue mode:

1. getAllNestedItems(selected) returns ALL items: outer group + inner
groups + nodes
2. moveChildNodesInGroupVueMode loops through all items
3. For outer group G1: calls G1.move(delta, true) then
moveGroupChildren(G1, ...)
4. moveGroupChildren calls G2.move(delta) (no skipChildren) - this moves
G2 AND G2's children!
5. Then the loop reaches G2: calls G2.move(delta, true) - moves G2 again
6. Plus moveGroupChildren(G2, ...) processes G2's children again

This PR fixes it by adding `skipChildren=true` to the `move` call.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7447-fix-inner-groups-being-moved-double-when-moving-outer-group-in-vue-mode-2c86d73d365081ce97abec682f2a8518)
by [Unito](https://www.unito.io)
2025-12-14 18:37:29 -08:00
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>
2025-12-13 05:23:56 -07:00
Christian Byrne
3f777fb54f test: add basic mobile baseline tests (#7415)
## Summary

Allows authors to visualize how their changes affect mobile view. Often
we add some fundamental change to the UI and forget to make it
responsive, this test helps keep track of that.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7415-test-add-basic-mobile-baseline-tests-2c76d73d3650810bb4bad5a1f6c7c53c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-12 23:39:17 -07:00
Christian Byrne
d21ea0f65b fix: loading api-format workflow that contains "parameters" string (#7411)
## Summary

This change extends
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7154 by making sure
the `prompt` metadata tag is parsed before the legacy A1111 fallback
when files are dropped onto the canvas.

ComfyUI embeds two structured payloads into every first-class export
format we support (PNG, WEBP, WEBM, MP4/MOV/M4V, GLB, SVG, MP3,
OGG/FLAC, etc.): `workflow`, which is the full editor JSON with layout
state, and `prompt`, which is the API graph sent to `/prompt`.

During import we try format-specific decoders first and only as a last
resort look for an A1111 file by scanning text chunks for a `parameters`
entry. That compatibility path was always meant to be a best-effort
option, but when we refactored the loader it accidentally enforced the
order `workflow → parameters → prompt`. As soon as a dropped asset
contained a `parameters` chunk—something Image Saver’s “A1111
compatibility” mode always adds—the A1111 converter activated and
blocked the subsequent `prompt` loading logic.

PR #7154 already lifted `workflow` ahead of the fallback, yet any file
lacking the `workflow` chunk but holding both `prompt` and `parameters`
still regressed. Reordering to `workflow → prompt → parameters`
preserves the compatibility shim for genuine A1111 exports while
guaranteeing native Comfy metadata always wins, eliminating the entire
class of failures triggered merely by the presence of the word
`parameters` in an unrelated metadata chunk.

Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/7096, fixes
https://github.com/Comfy-Org/ComfyUI_frontend/issues/6988

## Related 

(fixed by https://github.com/Comfy-Org/ComfyUI_frontend/pull/7154)

- https://github.com/Comfy-Org/ComfyUI_frontend/issues/6633
- https://github.com/Comfy-Org/ComfyUI_frontend/issues/6561

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2025-12-12 21:39:30 -07:00
Christian Byrne
4a91330e30 fix: flaky legacy context menu e2e test (#7373)
## Summary

Fixes this test which became flaky after removing the timeout. Now
simply wait for the title text in the context menu, which has built-in
timeout, then take snapshot.

<img width="1515" height="1155" alt="image"
src="https://github.com/user-attachments/assets/f2986ed9-31c4-44a1-89bc-982d1c18109b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7373-WIP-fix-legacy-context-menu-e2e-test-2c66d73d3650819eb9baceb5bdebfbe8)
by [Unito](https://www.unito.io)
2025-12-12 15:33:10 -08:00
Christian Byrne
1cdea3063d cleanup: remove duplicate browser_tests/browser_tests directory (merge conflict resolution error) (#7413)
Remove orphaned browser_tests/browser_tests/ directory containing 21
duplicate test snapshots. This was accidentally created in PR #6112
during merge. No test execution impact - all valid snapshots exist in
correct locations.

I checked the history of the files, no one had been correctly
touching/changing/using these files since they were added, so simply
removing them is all that's needed here.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7413-cleanup-remove-duplicate-browser_tests-browser_tests-directory-merge-conflict-resolutio-2c76d73d3650816088b3d24c86586084)
by [Unito](https://www.unito.io)
2025-12-12 13:52:27 -08:00
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>
2025-12-11 19:47:28 -08:00
Alexander Brown
03e9dd4789 Feat: Remove the Nodes 2.0 Trial Banner (#7390)
## Summary

The option to try it out is still in the Menu if you're looking for it.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7390-Feat-Remove-the-Nodes-2-0-Trial-Banner-2c66d73d365081c3817ad5c89dd4029b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-11 17:13:26 -08:00
Johnpaul Chiwetelu
ac8c3847d2 chore: fix playwright expectations (#7395)
## Summary

<!-- One sentence describing what changed and why. -->

## Changes

- **What**: <!-- Core functionality added/modified -->
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## 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)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7395-chore-fix-playwright-expectations-2c66d73d3650819d8913d80be55d7908)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-12 01:14:24 +01:00
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>
2025-12-12 00:15:09 +01:00
Alexander Brown
bf8d9de1c1 Fix: Flaky Playwright Tests: retry some assertions (#7389)
## Summary

Retries the widget value change check for up to 2 whole seconds.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7389-Fix-remoteWidgets-Playwright-test-add-retry-for-assertion-2c66d73d3650814e98b6fdfc83f6d3d6)
by [Unito](https://www.unito.io)
2025-12-11 14:02:23 -08:00
AustinMroz
3c8b7b015c Fix subgraphNode widget cloning with compressed target_slot (#7388)
## Cause
When graphs are actually exported, several layers of cleanup are
applied. Among these is link compression. Any widgets with inputs that
aren't used do not have inputs stored in the workflow. This was
implemented for backwards compatibility with the old "convert to input"
system for widgets. As part of this process, the target_slots on links
are rewritten such that they point to the index of the widget as if
unconnected widgets did not exist.

This "incorrect" state for links is only corrected AFTER a workflow has
loaded because the 'fix' method needs nodes to be initialized in order
to calculate the correct target_slot

This becomes a problem when subgraphs are introduced. SubgraphInputs
need to resolve a link to its target slot in order to construct a clone
of the linked widget DURING the loading process. Since this target slot
is not accurate, this can result in the cloned widget having the wrong
type.

For a minimal reproduction:
- Create a subgraph with an Empty Latent Image with batch_size linked to
the Subgraph Input
- Export the workflow
- On load, the batch_size has step and min attributes which incorrectly
correspond to width

## Fix
There's multiple possible ways to address this and input on direction is
appreciated
- Fix links before loading graph
  - Likely to break with any dynamic state
- Fix links, then load graph again
- Ugly, bad performance, dynamic state may require multiple passes to
correctly ripple
- In the Subgraph code, ignore target_slot and instead `.find()` input
with matching linkId (proposed)
- Promising, but means accepting that state is just wrong sometimes.
Another forever footgun.
- Entirely remove the input compression
- Some people may complain, and old workflows still need to be supported
- Only remove target_slot redirection inside subgraphs
- Creates ugly logical difference between what happens inside and
outside subgraphs.
  - Still leaves old workflows broken

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7388-Remove-target_slot-compression-from-subgraph-exports-2c66d73d3650815d8c96c5047958ab67)
by [Unito](https://www.unito.io)
2025-12-11 12:32:35 -08:00
Christian Byrne
97fa128999 fix: flaky e2e test for dropping assets on nodes (#7352)
Fix flaky "Can drag-and-drop animated webp image" test that was reading
the widget value before the upload completed, causing intermittent
failures where filenames appeared truncated. Added `waitForUpload`
option to `dragAndDropFile` helper that waits for the `/upload/`
response before returning. This is opt-in since not all drag-and-drop
operations trigger uploads (e.g., loading workflows from media files).
2025-12-11 11:48:02 -08:00
Christian Byrne
1e22c9067d fix: make flaky legacy prompt dialog test use locator rather than snapshot (#7371)
## Summary

Fix the flakiness of [this
test](https://fad8c753.comfyui-playwright-chromium.pages.dev/#?testId=967c1c643b6ca86a362c-8b516e2c224693bf7657)
by converting it from using snapshots to just normal locators.

The LiteGraph prompt that opens when click canvas widgets
(number/string) is still the raw DOM dialog created by
`LGraphCanvas.prototype.prompt`. That implementation wires its "click
outside to close" handler inside a `setTimeout` and ignores outside
clicks for ~256 ms after the dialog appears. It also never updates Vue
state or exposes a ready attribute/event we can observe from Playwright.

Because the UI offers no deterministic signal, using a short intentional
wait that matches the real guard is reasonable. We assert the dialog
becomes visible, call `await comfyPage.delay(300)` (just longer than the
256 ms guard), and then click outside. Without this wait the closing
click fires before the handler exists, so the dialog remains visible and
the test flakes. Until the widget exposes a ready hook, this scoped
delay is the most reliable approach and stays within Playwright guidance
("only sleep when there is no observable condition to await").


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7371-fix-make-flaky-legacy-prompt-dialog-test-use-locator-rather-than-snapshot-2c66d73d36508125b388e68861d7cd28)
by [Unito](https://www.unito.io)
2025-12-11 11:47:39 -08:00
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>
2025-12-10 17:23:59 -08:00
Johnpaul Chiwetelu
04286c033a hotfix: stabilize flaky workflow sidebar browser tests (#7280)
## Summary
- Fix flaky workflow sidebar browser tests that were failing in headless
mode
- Add retry logic for menu hover operations in Topbar
- Add proper timing/wait helpers for dialog masks and workflow service
completion
- Fix test isolation issues in setupWorkflowsDirectory and drop workflow
test

## Test plan
- [x] Run `pnpm test:browser --
browser_tests/tests/sidebar/workflows.spec.ts` multiple times
- [x] Verify the 3 previously failing tests now pass consistently:
  - "Can overwrite other workflows with save as"
  - "Can rename nested workflow from opened workflow item"  
  - "Can drop workflow from workflows sidebar"

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7280-hotfix-stabilize-flaky-workflow-sidebar-browser-tests-2c46d73d365081c5b3badfafe35a63dc)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Terry Jia <terryjia88@gmail.com>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Luke Mino-Altherr <luke@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
2025-12-09 23:30:40 -07:00
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>
2025-12-09 23:19:03 -07:00
Benjamin Lu
42314d227f Enable shift-drop context menu test (#7140)
## Summary
- turn the shift-drop context menu release action test back on
- keep the drag distance shorter to reduce flake risk while preserving
behavior

## Testing
- pnpm typecheck
- pnpm lint:fix

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7140-Enable-shift-drop-context-menu-test-2be6d73d36508104a913d55279d4d3e5)
by [Unito](https://www.unito.io)
2025-12-09 00:56:05 -07:00
Christian Byrne
51a336fd36 style: update ui and design of system notification components (what's new, new release notification, help center) (#6300)
## Summary

Migrated help center and release notification components from hardcoded
colors to semantic design tokens for automatic light/dark theme support.

<img width="808" height="874" alt="Selection_2298"
src="https://github.com/user-attachments/assets/c7fb956e-700b-49df-bba0-b85705e89ce7"
/>

<img width="852" height="710" alt="Selection_2265"
src="https://github.com/user-attachments/assets/618205e1-5068-499d-80ab-72626b32d7e1"
/>

<img width="493" height="838" alt="Screenshot from 2025-10-25 21-46-11"
src="https://github.com/user-attachments/assets/7b696673-ec19-4a16-a0b5-ca744ae62fe1"
/>

<img width="493" height="838" alt="Screenshot from 2025-10-25 21-46-25"
src="https://github.com/user-attachments/assets/2767d722-a0e1-426d-82d9-6d5a59f373ee"
/>

## Changes

- **What**: Replaced hardcoded hex/rgb colors with semantic tokens in
HelpCenterMenuContent, WhatsNewPopup, and ReleaseNotificationToast
components
- **Design System**: Added `--interface-menu-surface` and
`--interface-menu-stroke` tokens to style.css for consistent menu
theming
- **UX**: Updated help center menu structure - added "Give Feedback"
button, renamed "Help & Feedback" to "Help & Support", switched to
Lucide icons (except Discord brand logo), added external-link icons

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6300-style-update-ui-and-design-of-system-notification-components-what-s-new-new-release-no-2986d73d365081238458ea7d304b641e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-12-09 00:07:02 -07:00
Alexander Brown
5139e0564e Style: Font Consistency (#7220)
## Summary

Reduce lower level font definitions in most places. Default to Inter.

See #6912 

## Review Focus

Comic Sans is still an option...

## 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-7220-Style-Font-Consistency-2c26d73d365081348f2dd8909dd9bb8f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
2025-12-08 19:48:11 -07:00
Alexander Brown
5c01861f4e Tests: Playwright test timeouts (#7231)
## Summary

See where we can use proper DOM waiting instead of waitForTimeout.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7231-WIP-Playwright-test-timeouts-2c36d73d3650812b966ac3d9c338dfd4)
by [Unito](https://www.unito.io)
2025-12-08 15:50:35 -08:00
Benjamin Lu
259e9563c8 Hotfix: restore cancel button in top menu (#7234)
## Summary
- restore the interrupt/cancel button in the top menu action bar

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7234-Hotfix-restore-cancel-button-in-top-menu-2c36d73d365081b18dede1e49183a429)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-08 15:31:04 -08:00
Alexander Brown
dd7e7e7383 Hotfix: Templates spec (#7235)
## Summary

Top row of templates no longer contains an Image Generation. That's
interesting, huh?
2025-12-09 00:13:27 +01:00
Christian Byrne
10288ee239 feat: propagate errors up subgraphs and show slot errors in subgraphs (#6963)
https://github.com/user-attachments/assets/6531879d-a8a2-420a-aaca-ee329386dd1a

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6963-feat-propagate-errors-up-subgraphs-and-show-slot-errors-in-subgraphs-2b76d73d3650813e8391fac0a5e6dc9b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-06 16:02:57 -07:00
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>
2025-12-05 21:33:52 -08:00
Simula_r
ec1a7f1da4 fix: vue nodes image preview widget, better multi image gallery support (#7178)
## Summary

Fix image preview to better handle multiple images, switching between
them, and showing the skeleton correctly.

## Changes

- **What**: ImagePreview.vue

## Screenshots (if applicable)

Old (broken)


https://github.com/user-attachments/assets/e4997569-bdf5-4015-a83c-bbaabeac96d6

New (fixed)


https://github.com/user-attachments/assets/19dda841-c909-4fcb-b4d4-99aa1372843b

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7178-fix-vue-nodes-image-preview-widget-better-multi-image-gallery-support-2c06d73d365081a2afa9e398200e8379)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-05 13:52:18 -08:00
Johnpaul Chiwetelu
3c8def778e chore: Regenerate screenshots (#7180)
## Summary
Empty PR to trigger screenshot regeneration in CI.

## Test plan
- [ ] CI generates updated screenshots

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7180-chore-Regenerate-screenshots-2c06d73d3650814187cfd5d11852a0cf)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-05 06:26:49 +01:00
Alexander Brown
fe2676e8cd A11y: Focus ring for widgets (#7167)
## Summary

Addresses #7165

Add focus state to widget inputs (including textarea)


## Screenshot
<img width="912" height="688" alt="image"
src="https://github.com/user-attachments/assets/329b1747-1c16-499c-9a17-58332d731c35"
/>


<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7167-A11y-Focus-ring-for-widgets-2bf6d73d365081b9805ef5921c1d9b6e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-05 00:11:34 +00:00
Christian Byrne
19d98a09ea test: temporarily mark linkInteraction.spec.ts as test case as fixme (#7129)
This test
68274134c8/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts (L830-L879)

started failing after
https://github.com/Comfy-Org/ComfyUI_frontend/pull/6952


cf5b5bf984.zip

No idea how they could be related, disabling temporarily to not mess up
the CI signal on `main`.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7129-test-temporarily-mark-linkInteraction-spec-ts-as-test-case-as-fixme-2be6d73d36508172925af3e7fa681f25)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-12-03 00:36:43 -07:00
Rizumu Ayaka
68274134c8 feat: right side panel (#6952)
<img width="1183" height="809" alt="CleanShot 2025-11-26 at 16 01 15"
src="https://github.com/user-attachments/assets/c14dc5c3-a672-4dcd-917d-14f16310188e"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6952-feat-right-side-panel-2b76d73d36508112b121c283a479f42a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-02 22:55:24 -07:00
Alexander Brown
662974b222 Speed: Remove some optimizations that weren't optimizing (#6209)
## Summary

Simplify the TransformPane.

## Changes

- **What**: Remove the settling and culling composables. Gets rid of a
frequent event emission and some event handling addition/removals.

## Review Focus

In testing with a huge workflow in Vue mode, it was a lot faster without
these than with.
Can you check to see if you experience the same benefits?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6209-Speed-Remove-some-optimizations-that-weren-t-optimizing-2946d73d3650815197a4df3c58a61575)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-02 21:28:52 -08:00
Alexander Brown
2bf45f23dc Feat: add floating label to textarea (#7121)
## Summary

Adds the label/name of the widget as a floating label.

## Screenshots

<img width="543" height="469" alt="image"
src="https://github.com/user-attachments/assets/99d70e0b-f7b7-4b62-bf15-a2db8437c886"
/>


<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7121-Feat-add-floating-label-to-textarea-2be6d73d3650819c958efa893e0e304a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-02 19:34:41 -08:00
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>
2025-12-02 18:49:45 -08:00
Terry Jia
379af28678 fix: handle Unicode characters in clipboard copy/paste and add Paste menu option (#7103)
## Summary
Use TextEncoder/TextDecoder for UTF-8 safe base64 encoding/decoding

When copying nodes containing non-Latin1 characters (e.g., Chinese
characters in localized_name field), btoa() throws an error:

InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string
to be encoded contains characters outside of the Latin1 range.

The copy operation saved data to localStorage successfully, but failed
to write to the browser clipboard. On paste, the browser clipboard still
contained old data, causing the wrong node to be pasted.

<!-- Fixes #ISSUE_NUMBER -->
https://github.com/Comfy-Org/ComfyUI_frontend/issues/6993
https://github.com/Comfy-Org/ComfyUI_frontend/issues/5449
https://github.com/comfyanonymous/ComfyUI/issues/8481

## Screenshots (if applicable)
before

https://github.com/user-attachments/assets/8abd9049-91bb-4200-8853-e26753376007

after

https://github.com/user-attachments/assets/7d969f32-bb0f-4c7a-baa2-65d576a4eba2

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7103-fix-handle-Unicode-characters-in-clipboard-copy-paste-and-add-Paste-menu-option-2bd6d73d365081f39c40e7e7f832b97c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-02 15:31:27 -08:00
Alexander Brown
6d22562d40 Polish: Make the clickable area for the slots more forgiving (#7084)
## Summary

Makes the area a bit to the left and right of the dot also clickable.

Addresses complaints about it being tricky to connect nodes in Nodes
2.0.

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-02 01:23:25 +00:00
Alexander Brown
072f1f6ced Fix: Slots without type colors (#7081)
## Summary

Default to a gray

## Screenshots (if applicable)
<img width="416" height="205" alt="image"
src="https://github.com/user-attachments/assets/0eeee37d-f9c1-4893-ae1d-ee20cabf0f46"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7081-Fix-Slots-without-type-colors-2bc6d73d365081499e54e8a10b4b4b02)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-12-01 15:05:59 -08:00
AustinMroz
202dc3bbb2 Support on slot click listeners in vue (#7059)
Adds support for the `node.onInputDblClick` and `node.onInputClick`
callbacks in vue
- Fixes vue link drop code so that a link which is not dropped on the
canvas does not fallback to the dropped on canvas code.

![input-double-click_00001](https://github.com/user-attachments/assets/8b138a6e-e569-4a5d-b59a-cd688ff062e6)

Resolves #7037

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7059-Support-on-slot-click-listeners-in-vue-2bb6d73d3650812993fdef244e91683b)
by [Unito](https://www.unito.io)
2025-12-01 14:34:43 -08:00
Christian Byrne
dfe098897a [fix] Prevent drag activation during Vue node resize (#7064)
## Summary
- Add isResizingVueNodes flag to layoutStore
- Set flag in useNodeResize during resize operation
- Check flag in useNodePointerInteractions to skip drag activation

Fixes a bug where resizing a Vue node after selecting it would
incorrectly trigger drag logic, causing the node to teleport.


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7064-fix-Prevent-drag-activation-during-Vue-node-resize-2bb6d73d365081a2ad0ad4c7be76afee)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL0424@gmail.com>
2025-11-30 20:23:30 -08:00
Christian Byrne
d76c59cb14 [refactor] Simplify Vue node resize to bottom-right corner only (#7063)
## Summary

Temporarily simplifies the resize logic to only work on bottom right
corner and eliminates edge cases where corner resizing caused position
drift issues.

- Remove multi-corner resize handles in favor of bottom-right only
- Delete resizeMath.ts and its tests (no longer needed)
- Simplify useNodeResize to only handle bottom-right resize
- Remove position tracking from resize callback

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-30 18:27:37 -08:00
Christian Byrne
2b751200be test: add setting to ignore version compatibility toast warnings in e2e tests (#7004)
There's a warning toast shown if the frontend is considered out-of-date
(relative to the version in the requirements.txt of
comfyanonymous/ComfyUI). As a result, e2e tests run on older release
branches (e.g., when backporting or hotfixing) can sometimes trigger the
warning which obviously causes visual regression tests to fail. This PR
adds a hidden setting to disable the warning and sets it to `true` in
the e2e test fixtures.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7004-test-add-setting-to-ignore-version-compatibility-toast-warnings-in-e2e-tests-2b86d73d3650812d9e07f54a0c86b996)
by [Unito](https://www.unito.io)
2025-11-29 19:56:19 -07:00
Christian Byrne
f61bfe666e style: move border and shadow style to outer container to fix topbar badges shadow/border (#7044)
## Summary

Moves the shadow and border from workflow tabs to outer container so
that there is no longer an inconsistency with the badges and topbar
bottom border and shadows.

## Changes

| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="1522" height="598" alt="Selection_2473"
src="https://github.com/user-attachments/assets/92aa602c-a018-4b3d-8606-9c00552ffc20"
/> | <img width="1522" height="598" alt="Selection_2472"
src="https://github.com/user-attachments/assets/13c75da3-a938-442a-9bf6-9c30d822a610"
/> |
| <img width="1522" height="598" alt="Selection_2474"
src="https://github.com/user-attachments/assets/e84efd2a-6ae1-44a6-9901-0f902e942b64"
/> | <img width="1522" height="598" alt="Selection_2475"
src="https://github.com/user-attachments/assets/66d4852e-eed7-49f9-8f0f-9e8bbcdcb0b8"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7044-style-move-border-and-shadow-style-to-outer-container-to-fix-topbar-badges-shadow-border-2ba6d73d365081b991a3f981db87f434)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-29 17:52:03 -07:00
Alexander Brown
d3aa8dfc88 A11y/style: Make properties panel use theme colors. Not comprehensive. (#7036)
## Summary

Addressing the theme aspect of #6976 

## Changes

- **What**: Not comprehensive, but swaps many of the colors in the
litegraph panel styles to reference theme tokens.

## Screenshots (if applicable)
<img width="730" height="637" alt="image"
src="https://github.com/user-attachments/assets/1f8b0c0f-f957-487e-96b5-324ed2a6a717"
/>
<img width="721" height="719" alt="image"
src="https://github.com/user-attachments/assets/37f098a3-39f6-4cae-8bcb-601121d106f5"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7036-A11y-style-Make-properties-panel-use-theme-colors-Not-comprehensive-2ba6d73d365081038481c66be68a599a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-29 16:06:29 -08:00
Johnpaul Chiwetelu
b9cb335255 [fix] Add fraction digits props to number input widget (#7033)
Add min-fraction-digits and max-fraction-digits props to InputNumber
component to allow typing decimal values. Without these props, users
could not manually type values like "0.8" even though the increment
buttons worked correctly.

This aligns the input-only variant with the slider variant which
already had these props configured.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7016
## Screenshots (if applicable)



https://github.com/user-attachments/assets/fa205023-13c4-45ac-874b-b241808cf56d



┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7033-fix-Add-fraction-digits-props-to-number-input-widget-2b96d73d36508124ac65e466802bbb0c)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-29 15:10:04 -07:00
Christian Byrne
29dbfa3f60 fix: Vue Node <-> Litegraph node height offset normalization (#6966)
## Summary

Changes the layout store to treat node sizes as body-only measurements
while LiteGraph continues to reason about full heights. DOM-driven
updates are tagged with `LayoutSource.DOM`, which lets the store strip
the title height exactly once before persisting. That classification (a
new mutation source - `LayoutSource.DOM`) is accurate because those
mutations are triggered by the browser’s layout engine via
ResizeObserver, rather than by direct calls into the layout APIs (e.g.,
`moveNodeTo`, `useNodeDrag`). So all sources are:

- `LayoutSource.DOM`: browser layout/ResizeObserver measurements that
include the title bar
- `LayoutSource.Vue`: direct Vue-driven mutations routed through the
layout store
- `LayoutSource.Canvas`: legacy LiteGraph/canvas updates that will be
phased out over time
- `LayoutSource.External`: for multiplayer or syncing with a when going
online after making changes offline (in teams/workspace)

When layout state flows back into LiteGraph we add the title height just
in time for `liteNode.setSize`, so LiteGraph’s rendering stays
unchanged. This makes Vue node resizing and workflow persistence
deterministic - multiline widgets hold their dimensions across reloads
because every path that crosses the layout/LiteGraph boundary performs
the same normalization.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6966-normalize-height-at-sites-2b76d73d365081b6bcb4f4ce6a27663a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-26 17:37:24 -07:00
Simula_r
4b87b1fdc5 fix: remove LOD from vue nodes (#6950)
## Summary

Refactor to remove LOD from vue nodes. Also, hide Litegraph LOD settings
in vue nodes to prevent confusion / stale setting. Keep litegraph LOD
the exact same.

## Changes

- **What**: settings, all LOD related code in vue nodes

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6950-fix-remove-LOD-from-vue-nodes-2b76d73d365081568723f8cbc7be7e17)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-26 12:26:05 -07:00
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>
2025-11-24 18:31:21 -08:00
Alexander Brown
df373af987 Feat: Restore settings button to the sidebar. (#6892)
## Summary

Opens settings with a single click!
<img width="247" height="252" alt="image"
src="https://github.com/user-attachments/assets/c571d5e0-4973-4570-a542-fff343364ec0"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6892-Feat-Restore-settings-button-to-the-sidebar-2b56d73d36508102a48aec318d468303)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-24 12:23:29 -08:00
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>
2025-11-24 11:46:24 -08:00
Christian Byrne
c9556d7aff fix: ordering of Vue mode LOD setting initialization in browser tests (#6884)
Fixes test "should toggle LOD based on zoom threshold" failing (example:
https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/19618176782/job/56174006314).

Test execution order:

1. Sets MinFontSizeForLOD = 8
2. Calls setup()
3. App initializes → useVueNodeLifecycle runs → useRenderModeSetting
executes with immediate: true
4. Overrides setting back to 0 (Vue mode value)
5. LOD never activates (threshold = 0)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6884-fix-ordering-of-Vue-mode-LOD-setting-initialization-in-browser-tests-2b56d73d365081209676fb14d2c04d28)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-23 22:51:07 -07:00
Alexander Brown
0b33470744 Minor: transformState and setting error cleanup (#6841)
## Summary

Fixes the routing of TransformState through the node and the console
error from a setting that ends up being undefined via
useRenderModeSetting.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6841-Minor-transformState-and-setting-error-cleanup-2b46d73d3650817a8da7fca5bc56ea9a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-11-23 12:24:37 -07:00