mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-21 14:59:39 +00:00
e7745eb2be63468e067def18c46f29cd52b69731
40 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Alexander Brown
|
e7745eb2be |
Style: Make components themeable (#5908)
## Summary Replace color/dark-color pairs in components with design tokens to allow for easy overriding. <!-- Also standardizes the icon pattern to simplify the tailwind config. --> ## Changes - **What**: Token based colors, for now, mostly. - **Breaking**: Got approval from Design to collapse some very similar pairs of colors that seem to have diverged in implementations over time. Some of the colors might be a little different, but we can tweak them later. ## Review Focus Still have quite a few places from which to remove `dark-theme`, but this at least gets the theming much closer. Need to decide if I want to keep going in here or cut this and do the rest in a subsequent PR. ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Rizumu Ayaka
|
661885f5e5 |
feat(widgets): lazy load images in FormDropdown (#5904)
some users may have a very large number of files, so we only need to request/render the ones that are visible. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5904-feat-widgets-lazy-load-images-in-FormDropdown-2816d73d36508195b283ff469061f3f3) by [Unito](https://www.unito.io) Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alexander Brown
|
b994608506 |
Tests: Vitest configuration cleanup (#5888)
## Summary Simplify default scripts. Filtering is still available to users, we can revisit tagging or grouping later. This fixes the issue where we had tests that were in the codebase but never run because they weren't under `/src/components` Also deletes the duplicate litegraph tests and their associated vitest config file. ## Changes - **What**: Test cleanup ## Review Focus ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5888-Tests-Vitest-configuration-cleanup-2806d73d36508197b800f68f0b028279) by [Unito](https://www.unito.io) |
||
|
Simula_r
|
0d3d258995 |
Fix/vue nodes video (#5870)
## Summary Fix the video preview widget and associated dropdown to load and select videos. Fixes: - https://www.notion.so/comfy-org/Video-thumbnails-not-being-used-in-asset-explorer-dialog-27e6d73d365080ec8a3ee7c7ec413657?source=copy_link - https://www.notion.so/comfy-org/Image-Video-upload-dialog-doesnt-set-mime-type-27e6d73d365080c5bffdf08842855ba0?source=copy_link - https://www.notion.so/comfy-org/Video-Previews-are-not-displayed-2756d73d365080b2bfb9e0004e9d784d?source=copy_link - https://www.notion.so/comfy-org/Cannot-load-video-in-Load-Video-node-2756d73d365080009c21d3a67add96c4?source=copy_link ## Screenshots (if applicable) https://github.com/user-attachments/assets/b71dbecb-c9a7-4feb-83a3-c3e044a9c93c ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5870-Fix-vue-nodes-video-27e6d73d36508182b44bef8e90ef4018) by [Unito](https://www.unito.io) --------- Co-authored-by: JakeSchroeder <jake@axiom.co> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Jake Schroeder <jake.schroeder@isophex.com> Co-authored-by: Rizumu Ayaka <rizumu@ayaka.moe> |
||
|
Rizumu Ayaka
|
7e4c756258 |
feat: inputs/outputs filter to widget dropdown (#5894)
related https://github.com/Comfy-Org/ComfyUI_frontend/issues/5827 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5894-feat-inputs-outputs-filter-to-widget-dropdown-2806d73d365081498d92d0576b7da6a8) by [Unito](https://www.unito.io) --------- Co-authored-by: bymyself <cbyrne@comfy.org> |
||
|
Alexander Brown
|
37fab21daf |
Cleanup: YAGNI readonly props, private swap on ComfyApp, Canvas resize events simplification, v-memos on individual instances (#5869)
## Summary Assorted cleanup opportunities found while working through the Vue node rendering logic cleanup. ## Review Focus Am I wrong that the readonly logic was never actually executing because it was defined as False in GraphCanvas when making each LGraphNode? Is there an edge case or some other reason that the ResizeObserver wouldn't work as a single signal to resize the canvas? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5869-Cleanup-YAGNI-readonly-props-private-swap-on-ComfyApp-Canvas-resize-events-simplificat-27e6d73d3650811ba1dcf29e8d43091e) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Johnpaul Chiwetelu
|
01b3aeae68 |
Prune console.log() (#5867)
Introduce a no-console rule in ESLint configuration and remove existing console log statements throughout the codebase, replacing some with warnings or comments. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5867-Prune-console-log-27e6d73d365081bcbad8c36cfb5b258c) by [Unito](https://www.unito.io) |
||
|
Terry Jia
|
28a779d41a |
Check if the wheel event is from an element that wants to capture wheel events (#5821)
## Summary Add generic wheel event capture mechanism for interactive widgets in vueNodes system to prevent event bubbling to canvas. ## Changes - What: Add event handling logic in LGraphNode.vue and GraphCanvas.vue that checks for data-capture-wheel attribute to determine whether wheel events should be forwarded to the canvas - How it works: Components that need to capture wheel events (like Three.js scenes) can add data-capture-wheel="true" attribute to prevent wheel events from bubbling up to the canvas zoom handler prerequirist for https://github.com/Comfy-Org/ComfyUI_frontend/pull/5765 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5821-Check-if-the-wheel-event-is-from-an-element-that-wants-to-capture-wheel-events-27b6d73d3650812493b5f13849147e6c) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
4b9d448b6c |
fix style of Select COMBO Vue node widget (#5785)
## Summary Fixed `WidgetSelect` component styling to match other Vue node widgets by using shared base styles. ## Changes - **What**: Replaced hardcoded color classes with `WidgetInputBaseClass` for consistent styling across Vue node widgets ## Review Focus Visual consistency with other input widgets in Vue nodes interface and proper styling inheritance. ## Screenshots (if applicable) *Before*: <img width="1645" height="1436" alt="Screenshot from 2025-09-25 18-12-16" src="https://github.com/user-attachments/assets/0b985616-0cf5-44e3-8459-739d194dec7a" /> *After*: <img width="1645" height="1436" alt="Screenshot from 2025-09-25 18-12-07" src="https://github.com/user-attachments/assets/235437cf-3e1f-4bc0-8822-26fb8606b437" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5785-fix-style-of-Select-COMBO-Vue-node-widget-27a6d73d3650811a959ef8a955274987) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
75d31f9d57 |
fix large integer precision handling in Vue int widgets (#5787)
## Summary Fixed increment/decrement button lockup in number widgets when values exceed JavaScript's safe integer limit (2^53 - 1). ## Changes - **What**: Added precision-aware button disabling and user feedback to `WidgetInputNumberInput` component using [Number.isSafeInteger()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger) - We still need to support values greater than 2^53 because they may be in workflows. ## Review Focus JavaScript floating-point precision behavior at scale - buttons hide when arithmetic operations like `value + 1` would be unreliable due to IEEE 754 limitations. Test coverage includes edge cases (NaN, Infinity) and boundary conditions at MAX_SAFE_INTEGER. ```mermaid graph TD A[User Input] --> B{Value > 2^53?} B -->|No| C[Show Buttons] B -->|Yes| D[Hide Buttons] D --> E[Show Tooltip] E --> F[User Can Still Type] style A fill:#f9f9f9,stroke:#333,color:#000 style F fill:#f9f9f9,stroke:#333,color:#000 ``` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5787-fix-large-integer-precision-handling-in-Vue-int-widgets-27a6d73d365081d9ae00e485740cfafb) by [Unito](https://www.unito.io) |
||
|
Rizumu Ayaka
|
c96f719f91 |
feat: dropdown widgets vue node ui (#5624)
- Load media dropdown widgets - Load models dropdown widgets I added a lot of feedback effects during interactions. I tried my best to break the Dropdown into small components. To make it more flexible, I provided many configurable props and v-model. <img width="1000" alt="CleanShot 2025-09-18 at 01 54 38" src="https://github.com/user-attachments/assets/1a413078-1547-44b8-8b48-1ce8f8e764b5" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5624-feat-dropdown-widgets-vue-node-ui-2716d73d36508115a52bc1fb6d6376d0) by [Unito](https://www.unito.io) --------- Co-authored-by: Christian Byrne <cbyrne@comfy.org> |
||
|
Christian Byrne
|
a6600aa109 |
Use localized labels for Vue node slots and inputs/outputs (fallback to names) (#5773)
## Summary Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5697 by adding internationalization support for Vue node widget labels and output slot names with fallback to original names. ## Changes - **What**: Added `label` field to widget data structures and `localized_name` support for output slots - **Breaking**: None - all changes maintain backward compatibility with fallback to original names ## Review Focus Translation key resolution for node definitions and proper fallback chain for widget labels and slot names. ## Screenshots (if applicable) Observe that there is parity between Litegraph and Vue nodes w.r.t. localization of labels/names. <img width="3455" height="1417" alt="Screenshot from 2025-09-25 13-19-54" src="https://github.com/user-attachments/assets/93ee8fae-3671-4175-a941-6462f942d0f1" /> <img width="3455" height="1417" alt="Screenshot from 2025-09-25 13-19-38" src="https://github.com/user-attachments/assets/9573eb86-d74a-40ed-a0b5-e30afd3da6eb" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5773-Use-localized-labels-for-Vue-node-slots-and-inputs-outputs-fallback-to-names-2796d73d365081e08fb7d38464f4aa90) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
Christian Byrne
|
ac93a6ba3f |
Disable number grouping (thousands comma separators) by default in Vue node number widgets (#5776)
## Summary Makes the [useGrouping](https://primevue.org/inputnumber/#api.inputnumber.props.useGrouping) prop for number widgets disabled by default, aligning with the old UI (also requested via design). Node authors can still enable if they want by setting prop explicitly. ## Changes - **What**: Modified [WidgetInputNumberInput](https://primevue.org/inputnumber/) to disable `useGrouping` by default, requiring explicit opt-in via widget options - **Testing**: Added component tests covering value binding, component rendering, step calculations, and grouping behavior ## Review Focus UX impact on existing nodes that may have relied on default grouping behavior and test coverage for edge cases with precision calculations. ## Screenshots (if applicable) *Before*: <img width="1685" height="879" alt="Screenshot from 2025-09-25 11-34-34" src="https://github.com/user-attachments/assets/432097ab-203d-4f86-8ca0-721b27ee33de" /> *After*: <img width="1951" height="1175" alt="Screenshot from 2025-09-25 11-35-27" src="https://github.com/user-attachments/assets/74d35b62-612e-4dbf-b6e2-0ac17af03ea1" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5776-Disable-number-grouping-thousands-comma-separators-by-default-in-Vue-node-number-widget-2796d73d365081369ca6c155335d0d57) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <448862+DrJKL@users.noreply.github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Simula_r
|
703de3e669 |
Fix/vue nodes markdown (#5771)
## Summary Improve markdown node by making the textarea match the rendered output width and height. ## Screenshots (if applicable) https://github.com/user-attachments/assets/4701f947-0a4f-40f3-83c0-94e53cd10106 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5771-Fix-vue-nodes-markdown-2796d73d365081129428fe9c38178cc4) by [Unito](https://www.unito.io) |
||
|
Simula_r
|
e4022c455a |
fix: add LODFallback to markdown widget (#5734)
## Summary Add LOD fallback to markdown widget ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5734-fix-add-LODFallback-to-markdown-widget-2776d73d36508128b923d45beab50f03) by [Unito](https://www.unito.io) --------- Co-authored-by: JakeSchroeder <jake@axiom.co> |
||
|
Simula_r
|
cec1de0147 |
feat: vue nodes LOD system (#5631)
## Summary Replaced reactive (Vue-based) widget LOD with CSS visibility control. Performance doesn't dramatically improve, but we avoid the mount/unmount overhead during zoom/pan operations. This PR implements the visual component of LOD—complex widgets that need lifecycle management will be addressed separately. ### Problem & Solution Problem: we want LOD to improve rendering performance and visual feedback but discovered using reactivity in the current setup for it meant mounting/unmounting caused worse lag than the performance it aimed to fix. Switching to render all the details all the time but using css visibility proved to be the best solution. However, it doesn't improve rendering performance by much because the GPU texture size is the bottleneck (from TransformPane.vue CSS transforms) and not rasterization. Solution: Keep all nodes/widgets mounted, use CSS visibility: hidden for LOD. Trade memory for performance stability during zoom/pan/drag operations. ### Technical Decision We chose Performance > Memory: - CSS transforms create a single GPU texture whose size depends on node count, not widget complexity - Mounting/unmounting hundreds of widgets during zoom = noticeable lag from Vue VDOM diffing (since all components are mounted all the time because of viewport culling challenge/trade off see https://github.com/Comfy-Org/ComfyUI_frontend/pull/5510.) - CSS visibility changes = no reactivity overhead, smooth interactions - Result: Similar performance, but without interaction stutters This is the visual layer only. If we want a hook into the LOD state per node / widget that would be the next follow up system to implement. ### Next Steps (maybe) - Chunked (split up single Transform Pane transform layer) when rendering 1000+ nodes (maybe) - ~~Selective unmounting API for widgets that register as "expensive"~~ - ~~Client bound hydration system~~ ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> <img width="1355" height="960" alt="image" src="https://github.com/user-attachments/assets/41474d1b-9dbe-4240-a8cf-f4c9ff51d8e0" /> <img width="1354" height="963" alt="image" src="https://github.com/user-attachments/assets/9f55edaa-5858-41b9-b6a8-c2d37e1649bd" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5631-feat-vue-nodes-LOD-system-2726d73d365081c6a6c4e14aa634f19c) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
5e625a5002 |
[test] add Vue FormSelectButton widget component tests (#5576)
## Summary Added comprehensive component tests for FormSelectButton widget with 497 test cases covering all interaction patterns and edge cases. ## Changes - **What**: Created test suite for [FormSelectButton.vue](https://vuejs.org/guide/scaling-up/testing.html) component with full coverage of string/number/object options, PrimeVue compatibility, disabled states, and visual styling - **Dependencies**: No new dependencies (uses existing vitest, @vue/test-utils) ## Review Focus Test completeness covering edge cases like unicode characters, duplicate values, and objects with missing properties. Verify test helper functions correctly simulate user interactions. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5576-Add-Vue-FormSelectButton-widget-component-tests-26f6d73d36508171ae08ee74d0605db2) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> |
||
|
Christian Byrne
|
37975e4eac |
[test] Add component test for image compare widget (#5549)
## Summary Added comprehensive component test suite for WidgetImageCompare widget with 410 test assertions covering display, edge cases, and integration scenarios. ## Changes - **What**: Created [Vue Test Utils](https://vue-test-utils.vuejs.org/) test suite for [WidgetImageCompare component](src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue) using [Vitest](https://vitest.dev/) testing framework ## Review Focus Test coverage completeness for string vs object value handling, accessibility attribute propagation, and edge case robustness including malformed URLs and empty states. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5549-test-Add-component-test-for-image-compare-widget-26e6d73d365081189fe0d010f87d1eec) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> |
||
|
Alexander Brown
|
08220d50d9 |
Lint: Turn on rules that should allow for verbatimModuleSyntax (#5616)
* lint: turn on type import rules setting up for verbatimModuleSyntax * lint: --fix for type imports |
||
|
Alexander Brown
|
6b59f839e0 |
Devex: Faster linting (#5611)
* devex: Keep the presubmit from wiping the lint cache * devex: typescript for eslint config * devex: upgrade lint plugins and dedupe lockfile * lint: Fix autofixable rules with updated vue linter * lint: Remove default for required prop * lint: temporarily disable warnings for missing defaults * deps: Update vue-tsc * lint: use the config convenience utility, switch to using projectService * lint: Fix redundant eslint config blocks and misplaced parser * lint: Split up parsing options for typescript vs vue files |
||
|
Christian Byrne
|
f5b949762d |
[test] Add Vue node markdown widget component test (#5575)
* add markdown widget test * [fix] correct test comments from 'is exposed' to 'is not exposed' - addresses review feedback The TypeScript suppression comments incorrectly stated that properties were exposed when they should indicate they are not exposed, since @ts-expect-error is used to access private properties. Co-authored-by: christian-byrne <christian-byrne@users.noreply.github.com> --------- Co-authored-by: christian-byrne <christian-byrne@users.noreply.github.com> |
||
|
Christian Byrne
|
71ca28a46f |
[test] Add component test for TreeSelect Vue widget (#5551)
* add tree select widget component test * [refactor] export TreeNode type from component - addresses review feedback Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> * [refactor] move createTreeData to module scope - addresses review feedback Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> |
||
|
Christian Byrne
|
96a663704f |
fix prop bindings on Vue nodes' gallery widgets (#5542)
* fix gallery widget navigators binding * [refactor] improve test structure and type organization - addresses @DrJKL's review feedback - Move types comment to reference component file (types already exist there) - Extract helper functions outside describe blocks as pure functions - Convert to function declarations for better clarity - Fix 0-indexed vs 1-indexed consistency in test data generation - Add placeholder for future test constants organization * [test] Add WidgetTextarea component test with improved structure - addresses @DrJKL's review feedback - Move helper functions outside describe blocks as pure function declarations - Fix options type in createMockWidget to use SimplifiedWidget['options'] instead of Partial<TextareaProps> - Replace emitted\![0] with safer emitted?.[0] optional chaining pattern - Add comprehensive test coverage for textarea value binding, events, readonly mode, and edge cases 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Update src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> * [refactor] export types from component and use 0-indexed numbering - addresses @DrJKL's review feedback - Export GalleryImage and GalleryValue types from WidgetGalleria.vue component - Import types in test file instead of redefining them locally - Change image alt text from 1-indexed to 0-indexed (Image 0, Image 1, etc.) - Move helper functions outside describe blocks using function declarations - Add readonly test data constants for better test isolation - Fix type compatibility issues with readonly arrays This addresses DrJKL's review comments about: 1. Types being defined in test suite instead of component 2. Helper functions placement and clarity 3. 1-indexed numbering preference 4. Better test organization with readonly constants * [refactor] implement remaining review feedback - addresses accessibility and factory pattern suggestions - Fix accessibility: Add descriptive alt text with position context for screen readers instead of repetitive "Gallery image" (e.g., "Gallery image 2 of 5") - Implement factory pattern: Add createGalleriaWrapper() function that takes images, creates widget internally, and returns wrapper for cleaner test code - Update tests to use factory pattern for readonly constant test cases - Add proper i18n translations for galleryImage and galleryThumbnail - Use more descriptive alt text following WebAIM accessibility guidelines Addresses review comments about screen reader accessibility and test factory pattern --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
Christian Byrne
|
6e2a3a0d07 |
[test] Add component test for SelectButton Vue widget (#5530)
* add component test for select button * [refactor] improve test structure and typing - addresses @DrJKL review comments - Use proper SimplifiedWidget['options'] type instead of loose object type - Extract helper functions as module-level function declarations for better organization - Remove type assertion violation by using proper union type for null/undefined values - Format code with prettier to maintain consistency * [refactor] use safer optional chaining in test assertions - addresses @DrJKL's safety preference Replace emitted\![0] with emitted?.[0] for safer array access in test expectations. This follows the same pattern as applied to the textarea widget tests for consistency. |
||
|
Christian Byrne
|
c7325c4da9 |
fix: File Upload widget disabled prop treats undefined as true (#5528)
* fix file upload widget disabled prop
* [test] extract createMockWidget to shared test utility - addresses @DrJKL's code replication concern
Creates testUtils.ts with shared createMockWidget and createMockFile functions
to reduce duplication across widget component tests. This ensures consistency
and maintainability of test setup code.
* [test] replace type assertions with type narrowing - addresses @DrJKL's type safety suggestion
Replaces unsafe `as HTMLInputElement` casts with proper instanceof checks
and error throwing. Also refactors File Type Detection tests to use it.for
instead of conditionals to eliminate anti-pattern.
* [feat] use destructuring with default value for readonly prop - addresses @DrJKL's Vue best practice suggestion
Replace manual fallback expressions like `readonly || false` with modern Vue 3
destructuring pattern: `const { readonly = false } = defineProps()`.
This is cleaner than withDefaults() and follows current Vue best practices.
* [test] improve test utilities usage - addresses @DrJKL's additional suggestions
- Replace findComponent with getComponent for better error handling
- Use optional chaining (?.()) instead of conditional checks for cleaner syntax
- Remove unnecessary existence checks since getComponent throws on failure
|
||
|
Christian Byrne
|
c04af09956 |
[test] Add component test for Vue Textarea widget (multiline STRING widget) (#5539)
* add component test for textarea widget * [refactor] improve test structure and typing - addresses @DrJKL's review feedback - Move helper functions outside describe block for better scoping - Fix SimplifiedWidget options typing from Partial<TextareaProps> to Record<string, any> - Replace emitted\![0] with emitted?.[0] for safer optional chaining - Remove unused TextareaProps import |
||
|
Christian Byrne
|
8804755ffa |
fix: Use generic type in multi-select widget and fix options binding (#5525)
* use generic type and fix options binding * [refactor] improve type safety in WidgetMultiSelect - addresses review comments - Simplify array check to use Array.isArray(options?.values) - Add generic type parameter to useWidgetValue call - Remove unnecessary type assertion by leveraging TypeScript inference |
||
|
Christian Byrne
|
f28ebcac19 |
Fix Vue slot label colors for light theme (#5529)
* [fix] use stone-200 for Vue slot labels in light theme Updates Vue node slot label components to use stone-200 color (#828282) for light theme instead of the previous #888682 color. This improves theme consistency across the Vue nodes system. Components updated: - InputSlot.vue: Input slot labels - OutputSlot.vue: Output slot labels - NodeHeader.vue: Collapse/expand icon - WidgetLayoutField.vue: Widget labels * Update src/renderer/extensions/vueNodes/components/NodeHeader.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
Christian Byrne
|
4604bbd669 |
fix: make Color Picker Widget coerce to HEX with hashtag regardless of format/value in the UI (#5472)
* fix color picker value prefix and add component tests
* test(widgets): make color text assertion specific in WidgetColorPicker.test per review (DrJKL)
* test(widgets): use expect.soft for valid hex colors loop (suggestion by DrJKL)
* test(widgets): normalize color display to single leading # to address review question (AustinMroz)
* feat(widgets): normalize color widget values to #hex across inputs (hex/rgb/hsb); always emit with leading # using colorUtil conversions
* test(widgets): use data-testid selector for color text instead of generic span; add data-testid to component span for robustness
* support hsb|rgb|hex and coerce to hex with hashtag internally
refactor(widgets,utils): format-driven color normalization to lowercase #hex without casts; add typed toHexFromFormat and guards; simplify WidgetColorPicker state and types\n\n- utils: add ColorFormat, HSB/HSV types, isColorFormat/isHSBObject/isHSVObject, toHexFromFormat; reuse parseToRgb/hsbToRgb/rgbToHex\n- widgets: emit normalized #hex, display derived via toHexFromFormat, keep picker native v-model; typed widget options {format?}\n- tests: consolidate colorUtil tests into tests-ui/tests/colorUtil.test.ts; keep conversion + adjustColor suites; selectors robust\n- docs: add PR-5472-change-summary.md explaining changes\n\nAll type checks pass; ready for your final review before push.
refactor(widgets,utils): format-driven color normalization to lowercase #hex without casts; add typed toHexFromFormat and guards; simplify WidgetColorPicker state and types\n\n- utils: add ColorFormat, HSB/HSV types, isColorFormat/isHSBObject/isHSVObject, toHexFromFormat; reuse parseToRgb/hsbToRgb/rgbToHex\n- widgets: emit normalized #hex, display derived via toHexFromFormat, keep picker native v-model; typed widget options {format?}\n- tests: consolidate colorUtil tests into tests-ui/tests/colorUtil.test.ts; keep conversion + adjustColor suites; selectors robust\n- docs: add PR-5472-change-summary.md explaining changes\n\nAll type checks pass; ready for your final review before push.
chore: untrack PR-5472-change-summary.md and ignore locally (keep file on disk)
* fix(utils): use floor in hsbToRgb to match expected hex (#7f0000) for 50% brightness rounding behavior
* test(widgets): restore invalid-format fallback test and use data-testid selector in hex loop; chore: revert .gitignore change (remove PR-5472-change-summary.md entry)
* chore: restore .gitignore to match main (remove local note/comment)
* [refactor] improve color parsing in ColorPicker widget - addresses review feedback
- Use fancy color parsing for initial value normalization per @DrJKL's suggestion
- Simplify onPickerUpdate to trust configured format per @AustinMroz's feedback
- Remove redundant type checking and format guessing logic
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* [refactor] simplify color parsing - remove unnecessary helper function
- Remove normalizeColorValue helper and inline null checks
- Remove verbose comments
- Keep the same functionality with cleaner code
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
* remove unused exports
---------
Co-authored-by: Claude <noreply@anthropic.com>
|
||
|
Christian Byrne
|
8ae50d140d |
[test] Add component test for Vue button widget (#5468)
* add component test for button widget
* [move] relocate WidgetButton test to proper directory
Move test from src/ to tests-ui/ directory structure and update import path
to work from new location - addresses review comment about test organization
* [refactor] make widget name optional in mock factory
Add optional name parameter to createMockWidget function for more flexible
test setup - addresses @DrJKL's suggestion about optional parameters
* [refactor] use it.for for parameterized button tests
Replace forEach loops with it.for syntax for testing button severities
and variants - addresses @DrJKL's suggestion for better test structure
* [auto-fix] Apply ESLint and Prettier fixes
* Revert "[move] relocate WidgetButton test to proper directory"
This reverts commit
|
||
|
Alexander Brown
|
1845708ddb |
Component: Vue Widget Slider (new) (#5516)
* feat: Initial shadcn configuration * component: Add Slider component from shadcn-vue * deps: Add tw-animate-css * component: Align slider with Figma styles * component: Set the step value for the slider, update styles * fix: update component tests to work with Array of values * vite: Don't reload dev server for test changes * component: Swap text for a number input kept in sync with the slider * cleanup: Don't need the override if the input isn't type="number" * test: add step size tests * cleanup: Don't need cn for these * css: Update token names to match new Figma Variables * lint: Fix camelCase vs train-case in passthrough * feat: If the value is deleted, revert to the slider state cc: @PabloWiedemann * feat: Improve cursor styles, grabbable thumb, clickable track * lint: temporarily disable some warnings * feat: Grabbing while sliding (most of the time) |
||
|
Christian Byrne
|
169d7404fe | fix text prop area type error (#5471) | ||
|
Rizumu Ayaka
|
6da2cf7b4d |
feat: vue based input number widget (#5435)
* feat: vue based input number widget * fix: remove min and max |
||
|
Alexander Brown
|
fa9f5fbca6 |
Fix: Vue node/widget positioning and scroll issue (#5441)
* [feat] Refactor overlay compatibility into reusable composable - Create useTransformCompatOverlayProps composable for centralized overlay prop management - Update Select, MultiSelect, TreeSelect, and FileUpload components to use composable - Provides appendTo='self' for transform inheritance in CSS-transformed parents - Enables easy future additions of other transform compatibility props - Fix duplicate v-bind attributes by combining props into single computed object * fix: Keep the canvas container from being scrolled by children * types: Align the appendTo type with primevue internals * Update test expectations [skip ci] --------- Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Benjamin Lu
|
0e44a4a354 |
Remove COMFY_VUE_NODE_DIMENSIONS constant (#5398)
* Remove COMFY_VUE_NODE_DIMENSIONS * Update litegraph snapshot test |
||
|
Alexander Brown
|
9a89869517 | lint: Fix missing defaults for Props with Defaults (#5439) | ||
|
Alexander Brown
|
6c7adf954a | fix: Prevent pointer events on widgets from propagating to the containing node. (#5424) | ||
|
Christian Byrne
|
0d3b15503f |
[test] Add component tests for some Vue Widget components (#5409)
* add component tests for vue widgets * [refactor] improve widget test readability and type safety - addresses @DrJKL's review feedback - Add mountComponent utility function for consistent test setup - Add setInputValueAndTrigger helper to batch common test operations - Replace type assertions with proper instanceof checks for type safety - Remove duplicate test setup code to improve test readability - Fix TypeScript errors in WidgetSlider tests These changes address all review comments by making tests easier to read and understand while ensuring proper type checking. * [refactor] apply consistent test patterns to WidgetSelect.test.ts - Add mountComponent utility function for consistent test setup - Add setSelectValueAndEmit helper to batch select operations - Remove repetitive mount boilerplate code throughout tests - Maintain existing test coverage while improving readability This ensures all widget component tests follow the same patterns established in WidgetInputText and WidgetSlider tests. |
||
|
Christian Byrne
|
42128fa39f |
[fix] Fix step prop scaling issue on numeric Vue widgets (#5386)
* use step2 -> step bind on slider widget * fix: Use step2 instead of legacy step property in WidgetSlider The WidgetSlider was using the legacy `step` property (10x input spec value) instead of `step2` (correct input spec value). This caused input spec step values to appear 10x larger than intended. - Use `widget.options.step2` (correct input spec value) - Remove fallback to `widget.options.step` (legacy 10x value) - Both properties coexist, so step2 should always be preferred Fixes input spec step values not being respected in Vue node sliders. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
006e6bd57c |
[feat] Vue-Based Rendering System for the ComfyUI Node Graph (#4263)
* [feat] Add core Vue widget infrastructure - SimplifiedWidget interface for Vue-based node widgets - widgetPropFilter utility with component-specific exclusion lists - Removes DOM manipulation and positioning concerns - Provides clean API for value binding and prop filtering * [feat] Add Vue widget registry system - Complete widget type enum with all 15 widget types - Component mapping registry for dynamic widget rendering - Helper function for type-safe widget component resolution * [feat] Add Vue input widgets - WidgetInputText: Single-line text input with InputText component - WidgetTextarea: Multi-line text input with Textarea component - WidgetSlider: Numeric range input with Slider component - WidgetToggleSwitch: Boolean toggle with ToggleSwitch component * [feat] Add Vue selection widgets - WidgetSelect: Dropdown selection with Select component - WidgetMultiSelect: Multiple selection with MultiSelect component - WidgetSelectButton: Button group selection with SelectButton component - WidgetTreeSelect: Hierarchical selection with TreeSelect component * [feat] Add Vue visual widgets - WidgetColorPicker: Color selection with ColorPicker component - WidgetImage: Single image display with Image component - WidgetImageCompare: Before/after comparison with ImageCompare component - WidgetGalleria: Image gallery/carousel with Galleria component - WidgetChart: Data visualization with Chart component * [feat] Add Vue action widgets - WidgetButton: Action button with Button component and callback handling - WidgetFileUpload: File upload interface with FileUpload component * [feat] TransformPane - Viewport synchronization layer for Vue nodes (#4304) Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Benjamin Lu <benceruleanlu@proton.me> Co-authored-by: github-actions <github-actions@github.com> * Update locales [skip ci] * Fix TransformPane pos/size (#4826) * Update locales [skip ci] * refactor(litegraph): decouple render-time state from models for reroutes and links\n\nIntroduce RenderedLinkSegment; compute reroute render params without mutating model; render into ephemeral segments instead of writing to Reroute/LLink. * Revert "refactor(litegraph): decouple render-time state from models for reroutes and links\n\nIntroduce RenderedLinkSegment; compute reroute render params without mutating model; render into ephemeral segments instead of writing to Reroute/LLink." This reverts commit |