mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-20 06:44:32 +00:00
8c6ee026c07e00ece563d951e13dfa8ab946842f
43 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Christian Byrne
|
8c6ee026c0 |
fix: Set Vue node initial size in layout store instead of CSS (#5571)
* fix: Vue nodes now respect deserialized width from LiteGraph * fix: Set Vue node initial size in layout store instead of CSS Vue nodes now properly set their initial size in the layout store using the resize() function from useNodeLayout on component mount. This ensures the layout store is the single source of truth for sizing, preventing conflicts with the ResizeObserver that was overriding CSS-based sizing. This resolves the issue where Vue nodes would shrink to minimal size after user interaction due to ResizeObserver feedback loops. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Remove duplicate onMounted call in LGraphNode.vue --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
07fbe7267e |
Show error state on Vue nodes that caused execution errors (#5541)
* add missing node error border * update vue node data after configure * provide locatorId of execution error node to vue nodes * [refactor] use execution store directly instead of provide/inject pattern - Add lastExecutionErrorNodeId computed property to execution store - Replace inject() with useExecutionStore() in LGraphNode component - Remove useExecutionErrorProvider composable and provider call - Clean up unused ExecutionErrorNodeIdKey injection key - Add explicit return type annotation to hasAnyError computed Addresses @DrJKL's architecture feedback and type safety suggestions. * simplify error styling to match main branch conventions Remove redundant dark-theme prefixes from border-error and outline-error classes since these CSS custom properties handle both themes automatically. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * address review feedback on hasAnyError computed function - Add explicit boolean return type - Destructure props with defaults for cleaner code - Use \!\! for proper boolean conversion to satisfy TypeScript Addresses @DrJKL review comment on error state computation. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * destructure props at top level as suggested in review Replace `props.nodeData` and `props.error` references with destructured variables for cleaner code and proper defaults. Addresses @DrJKL review comment about props destructuring. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix rebase issues: correct node ID comparison and border colors - Use lastExecutionErrorNodeId instead of lastExecutionErrorNodeLocatorId for proper comparison with nodeData.id (both are local node IDs) - Restore border-blue-100 colors that were incorrectly changed during rebase - These were unrelated changes that snuck in during conflict resolution 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * remove unused lastExecutionErrorNodeLocatorId from exports The computed property is defined but not used by any external modules. Only lastExecutionErrorNodeId is actually consumed by components. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
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
|
d146a7896a |
Add progress bars on Vue Nodes (#5469)
* track execution progress in vue nodes * add test * remove pointless execution state test The test was mocking everything including the provide/inject mechanism, so it wasn't testing real behavior. The execution progress feature works correctly as verified through manual testing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * remove accidentally committed PR_TEMPLATE.md 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] address PR review feedback from @DrJKL - Replace hardcoded #0B8CE9 color with blue-100 class for consistency - Replace magic number 56px with top-14 class for progress bar positioning - Use storeToRefs() for better Pinia reactivity - Reduce heavy commenting per maintainer preference * fix: update LGraphNode test to mock useNodeExecutionState properly The test was failing because it passed executing as a prop, but the component uses the useNodeExecutionState composable. Added proper mock for the composable to test the animate-pulse class application during execution. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
c145fd9df1 |
Show node output images on Vue Nodes (#5456)
* add image outputs on Vue nodes * add unit tests and update cursor pointer * use testing pinia * properly mock i18n in component test * get node via current graph * use subgraph ID from node creation * add better error handling for downloadFile util * refactor: simplify image preview component architecture - Replace awkward composable pattern with standard Vue component state - Fix reactivity issues where images didn't update on new outputs - Add proper subgraph-aware node resolution using NodeLocatorId - Enhance accessibility with keyboard navigation and ARIA labels - Add comprehensive error handling and loading states - Include PrimeVue Skeleton for better loading UX - Remove unused composable and test files The image preview now properly updates when new outputs are generated and follows standard Vue reactivity patterns. * resolve merge conflict with main - Keep both subgraphId field and hasErrors field from main - No conflicts in other files (LGraphNode.vue and main.json merged cleanly) * Fix LGraphNode test by adding proper Pinia testing setup Added createTestingPinia and i18n configuration following the pattern from working ImagePreview tests. Resolves test failures due to missing Pinia store dependencies. All 6 tests now pass successfully. |
||
|
Christian Byrne
|
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
|
f6a115e182 |
[feat] Add I/O slot component tests (#5523)
* add i/o slot component component tests * refactor: use separate mount functions for type safety Replace generic mount helper with dedicated mountInputSlot and mountOutputSlot functions to avoid type casting and improve type safety per review feedback. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [auto-fix] Apply ESLint and Prettier fixes * [refactor] rename test file from .spec.ts to .test.ts - addresses @DrJKL's naming convention feedback * [refactor] use component prop types instead of custom interface - addresses @DrJKL's type safety feedback * [refactor] add beforeEach for mock reset - addresses @DrJKL's test cleanup feedback * [refactor] use standard assertions instead of manual mock call extraction - addresses @DrJKL's assertion feedback * [auto-fix] Apply ESLint and Prettier fixes --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
aa7a99f4e3 |
fix: Show title, inputs, and outputs on Vue node component even when node fails to initalize (e.g., if missing) (#5540)
* add missing node error border * update vue node data after configure * [refactor] extract node type resolution to named const - addresses @DrJKL's readability concern Extracted the multi-fallback type resolution logic into a clearly named variable for improved readability and maintainability. * [refactor] convert watch to computed pattern - addresses @DrJKL's structure comment Replaced ref + watch pattern with computed for displayTitle, providing cleaner reactive behavior and eliminating the need for manual sync logic. |
||
|
Christian Byrne
|
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
|
bfef8d7d4b |
Add error border on missing nodes (vue nodes) (#5538)
* add missing node error border * Update src/renderer/extensions/vueNodes/components/LGraphNode.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> * Update src/renderer/extensions/vueNodes/components/LGraphNode.vue Co-authored-by: Alexander Brown <drjkl@comfy.org> * [auto-fix] Apply ESLint and Prettier fixes --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
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
|
||
|
Christian Byrne
|
90b1b47dd0 |
[test] Add Vue Node header component test (#5457)
* add node header component test * [refactor] use separate const declarations instead of mutable variable in test - addresses @DrJKL's code style suggestion Replace mutable `let icon` with descriptive `const expandedIcon` and `const collapsedIcon` variables for better code clarity and immutability in the chevron icon test. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [config] remove unnecessary vitest exclude patterns - addresses @DrJKL's configuration review Remove redundant exclude patterns from vitest config as they are already covered by vitest's default exclusions. Simplifies configuration while maintaining functionality. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [config] remove unnecessary vitest exclude patterns - addresses @DrJKL's configuration review Remove redundant exclude patterns from vitest config as they are already covered by vitest's default exclusions. Simplifies configuration while maintaining functionality. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
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) |
||
|
Rizumu Ayaka
|
9aeeab9a9f | feat: remove the divider that between widgets and slots (#5517) | ||
|
snomiao
|
4ec6223189 |
fix: Add JSON import assertions for Node.js ESM compatibility (#5507)
Added `with { type: 'json' }` assertions to all JSON imports to ensure compatibility with Node.js ES modules and Playwright environments. This follows the current ESM specification where JSON imports require explicit type assertions.
Affected areas:
- Tailwind config
- i18n locale imports (36 files)
- Test fixtures and spec files
- API client feature flags
- Core color palettes
References:
- https://nodejs.org/api/esm.html
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: Claude <noreply@anthropic.com>
|
||
|
Johnpaul Chiwetelu
|
c051c3a507 |
Drag Multiple Vue Nodes (#5459)
* feat: enhance dragging functionality to support multiple selected nodes * feat: enhance node selection handling to support drag state detection * feat: enhance node selection handling to support drag state detection * fix: update event trigger from pointer down to pointer up in LGraphNode tests |
||
|
Rizumu Ayaka
|
46f4ce3890 | feat: style of progress bar in various scenarios (#5492) | ||
|
AustinMroz
|
3bc25b7aeb |
Add Asset Widget (#5475)
* [feat] carve out path to call asset browser in combo widget * Add Asset Widget * [feat] add fallback "Select model" label --------- Co-authored-by: Arjan Singh <arjan@comfy.org> |
||
|
Rizumu Ayaka
|
08fe2829d4 |
feat: node border and hover and selected style, and when error (#5491)
* feat: node border and hover and selected style, and when error * fix test error |
||
|
Christian Byrne
|
b72e22f6be |
Add Centralized Vue Node Size/Pos Tracking (#5442)
* add dom element resize observer registry for vue node components * Update src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts Co-authored-by: AustinMroz <austin@comfy.org> * refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates * chore: make TransformState interface non-exported to satisfy knip pre-push * Revert "chore: make TransformState interface non-exported to satisfy knip pre-push" This reverts commit |
||
|
Arjan Singh
|
44e470488d |
[feat] carve out path to call asset browser in combo widget (#5464)
* [ci] ignore local browser tests files this is where i have claude put its one off playwright scripts * [feat] carve out path to call asset browser in combo widget * [feat] use buttons on Model Loaders when Asset API setting is on |
||
|
Alexander Brown
|
ca220440b2 |
Tailwind: Move customization into CSS (#5477)
* tailwind: Migrate out of the js/ts config part 1 * tailwind: Migrate custom variant and utility * Update test expectations [skip ci] * tailwind: Use relative colors for alpha variants * fix: Use the new numbered color tokens --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
169d7404fe | fix text prop area type error (#5471) | ||
|
Christian Byrne
|
97d00ea47d |
[test] Add component tests for Vue node slots (#5461)
* add component tests for slots * use `for of` for better error report * add runtime type check to make assertions valid * add runtime type check to make assertions valid |
||
|
Christian Byrne
|
0a2260a666 |
Add design system color variables to tailwind config and use in Vue Nodes (#5430)
* use tailwind colors for * add updated tokens with scales |
||
|
Christian Byrne
|
43ab1c9b09 |
Add z-index management in Vue Nodes based on interaction recency (#5429)
* fix z-index on selection for vue nodes * fix unused export * refactor to DDD * Use Tailwind utility for pointer events instead of inline style Move pointer-events: auto from inline style to Tailwind class pointer-events-auto as suggested in PR review. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Rename defaultSource to layoutSource parameter Rename parameter in useNodeZIndex options interface for better clarity as suggested in PR review. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Improve test mocking pattern with vi.mocked approach Replace global mock object with per-test vi.mocked pattern and proper Partial typing instead of as any, as suggested in PR review. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [auto-fix] Apply ESLint and Prettier fixes --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com> |
||
|
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) | ||
|
Christian Byrne
|
713ad134cf |
Implement selection state management in Vue Nodes (#5421)
* let canvas continue to own selection state management * fix merge error * refactor: use computed instead of watcher for selectedNodeIds Replace watcher pattern with computed for better Vue idioms: - More reactive and efficient - Automatically recomputes when dependencies change - Simpler, more declarative code 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: improve injection error handling for selectedNodeIds Replace silent fallback with explicit error when SelectedNodeIds is not provided: - Fail fast instead of silently using empty Set - Clear error message for debugging - Prevents nodes appearing unselected due to missing provider Addresses DrJKL's concern about injection default behavior. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * test: improve mocking patterns using vi.mockObject Replace manual mock interfaces with vi.mockObject for better type safety: - Use Vitest's built-in mocking utilities instead of manual interfaces - Properly configure mock return values - Remove unnecessary type assertions Addresses DrJKL's feedback on test mocking patterns. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * test: extract repeated nodeData for clarity Extract common test nodeData object to reduce duplication: - Move repeated VueNodeData object to describe scope - Replace 6 instances of identical nodeData declarations - Maintain different nodeData for specific test cases Addresses DrJKL's suggestion to extract repeated test data. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * add type safety to mocks --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Alexander Brown
|
6c7adf954a | fix: Prevent pointer events on widgets from propagating to the containing node. (#5424) | ||
|
Alexander Brown
|
f6405e9125 |
Knip: More Pruning (#5374)
* knip: Don't ignore exports that are only used within a given file * knip: More pruning after rebase * knip: Vite plugin config fix * knip: vitest plugin config * knip: Playwright config, remove unnecessary ignores. * knip: Simplify project file enumeration. * knip: simplify the config file patterns ?(.optional_segment) * knip: tailwind v4 fix * knip: A little more, explain some of the deps. Should be good for this PR. * knip: remove unused disabling of classMembers. It's opt-in, which we should probably do. * knip: floating comments We should probably delete _one_ of these parallell trees, right? * knip: Add additional entrypoints * knip: Restore UserData that's exposed via the types for now. * knip: Add as an entry file even though knip says it's not necessary. * knip: re-export functions used by nodes (h/t @christian-byrne) |
||
|
Christian Byrne
|
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. |
||
|
Benjamin Lu
|
8445605777 |
fix: correct Vue ref auto-unwrapping in slot components (#5378)
Fixed the misuse of exposed template refs in InputSlot and OutputSlot components. When Vue exposes a Ref via defineExpose, it auto-unwraps it on the parent component instance. The previous code was incorrectly double-unwrapping by calling .value on an already unwrapped HTMLElement. Changes: - Updated type to ComponentPublicInstance with unwrapped HTMLElement - Replaced watch with watchEffect for better timing handling - Removed incorrect .value access on auto-unwrapped ref This ensures slot elements are properly registered with useDomSlotRegistration, fixing slot position tracking and hit-testing in the layout system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
0854194aa1 |
[refactor] Refactor rendering-related files to DDD organization (#5388)
* refactor rendering-related files to DDD organization * add to git ignore ignore revs |
||
|
Christian Byrne
|
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 |
||
|
Christian Byrne
|
5a35562d3d |
[refactor] Migrate minimap to domain-driven renderer architecture (#5069)
* move ref initialization to the component * remove redundant init * [refactor] Move minimap to domain-driven renderer structure - Create new src/renderer/extensions/minimap/ structure following domain-driven design - Add composables: useMinimapGraph, useMinimapViewport, useMinimapRenderer, useMinimapInteraction, useMinimapSettings - Add minimapCanvasRenderer with efficient batched rendering - Add comprehensive type definitions in types.ts - Remove old src/composables/useMinimap.ts composable - Implement proper separation of concerns with dedicated composables for each domain The new structure provides cleaner APIs, better performance through batched rendering, and improved maintainability through domain separation. * [test] Fix minimap tests for new renderer structure - Update all test imports to use new renderer paths - Fix mock implementations to match new composable APIs - Add proper RAF mocking for throttled functions - Fix type assertions to handle strict TypeScript checks - Update test expectations for new implementation behavior - Fix viewport transform calculations in tests - Handle async/throttled behavior correctly in tests All 28 minimap tests now passing with new architecture. * [fix] Remove unused init import in MiniMap component * [refactor] Move useWorkflowThumbnail to renderer/thumbnail structure - Moved useWorkflowThumbnail from src/composables to src/renderer/thumbnail/composables - Updated all imports in components, stores and services - Moved test file to match new structure - This ensures all rendering-related composables live in the renderer directory * [test] Fix minimap canvas renderer test for connections - Fixed mock setup for graph links to match LiteGraph's hybrid Map/Object structure - LiteGraph expects links to be accessible both as a Map and as an object - Test now properly verifies connection rendering functionality |