mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 17:52:16 +00:00
0fea54c542a7a6d817174b3900f80d25499b4bda
41 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Alexander Brown
|
0fea54c542 |
Typing: Slots in VueNodeData (#5759)
## Summary Replace the unknown type with the interface in Litegraph. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5759-Typing-Slots-in-VueNodeData-2786d73d36508194b286fad172b13c51) by [Unito](https://www.unito.io) |
||
|
Simula_r
|
0919856a05 |
Feat/vue nodes preview (#5747)
## Summary Create a LGraphNodePreview.vue component to use Vue Nodes for preview when hovering over search results / sidebar tree list. <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) <img width="3024" height="1642" alt="image" src="https://github.com/user-attachments/assets/d102b08e-2970-407b-aff8-3fa6333d5e38" /> <img width="3024" height="1646" alt="image (1)" src="https://github.com/user-attachments/assets/b5d378d5-3cf6-4cca-9fa1-741647e8d72c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5747-Feat-vue-nodes-preview-2786d73d3650817dbf9af458bd5dda8c) by [Unito](https://www.unito.io) --------- Co-authored-by: JakeSchroeder <jake@axiom.co> Co-authored-by: AustinMroz <AustinMroz@users.noreply.github.com> |
||
|
Arjan Singh
|
76dd935b35 |
[fix] use object-contain for image preview (#5739)
## Summary Change css so preview images are fully contained within the image preview component ## Screenshots (if applicable) ### Before <img width="453" height="640" alt="Screenshot 2025-09-23 at 2 55 56 PM" src="https://github.com/user-attachments/assets/892c7fd4-b9d9-4fdd-9846-d480c5aeb6be" /> ### After <img width="523" height="673" alt="Screenshot 2025-09-23 at 2 55 26 PM" src="https://github.com/user-attachments/assets/ca3f4823-9d57-4bf4-93cc-492652ee9631" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5739-fix-use-object-contain-for-image-preview-2776d73d365081f3b77ce498bd8799ec) by [Unito](https://www.unito.io) |
||
|
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> |
||
|
Alexander Brown
|
e5d4d07d32 |
Refactor: More state management simplification (#5721)
## Summary Remove more procedural synchronization in favor of using reactive references. > Note: Also includes some fixes for issues caused during HMR. ## Review Focus In testing it seems to work the same, but let me know if I missed something. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5721-Refactor-More-state-management-simplification-2766d73d3650819b8d7ddc047c460f2b) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
da0d51311b |
fix Vue node being dragged when interacting with widgets (e.g., resizing textarea) (#5719)
## Summary Applying changes in https://github.com/Comfy-Org/ComfyUI_frontend/pull/5516 to entire widget wrapper. ## Changes - **What**: Added `.stop` modifier to pointer events in NodeWidgets component to prevent [event propagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) ## Review Focus Verify widget interactions remain functional while ensuring parent node drag/selection behavior is properly isolated. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5719-fix-Vue-node-being-dragged-when-interacting-with-widgets-e-g-resizing-textarea-2766d73d3650815091adcd1d65197c7b) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
c4c0e52e64 |
Refactor: Let LGraphNode handle more events itself (#5709)
## Summary Don't route events up through GraphCanvas if the component itself can handle the changes ## Changes - **What**: Reduce the indirect access or action dispatch to composables/stores. ## Review Focus The behavior should be either equivalent or a little snappier than before. Also, the local state in LGraphNode has (almost) all been removed in favor of reacting to the nodeData prop. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5709-Refactor-Let-LGraphNode-handle-more-events-itself-2756d73d365081e6a88ce6241bceecc0) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Alexander Brown
|
8133bd4b7b |
Refactor: Composable disentangling (#5695)
## Summary Prerequisite refactor/cleanup to use a global store instead of having nodes throw up events to a parent component that stores a reference to a singleton service that itself bootstraps and synchronizes with a separate service to maintain a partially reactive but not fully reactive set of states that describe some but not all aspects of the nodes on either the litegraph, the vue side, or both. ## Changes - **What**: Refactoring, the behavior should not change. - **Dependencies**: A type utility to help with Vue component props ## Review Focus Is there something about the current structure that this could affect that would not be caught by our tests or using the application? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5695-Refactor-Composable-disentangling-2746d73d365081e6938ce656932f3e36) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
0801778f60 |
feat: Add Vue node subgraph title button and fix subgraph navigation with vue nodes (#5572)
## Summary - Adds subgraph title button to Vue node headers (matching LiteGraph behavior) - Fixes Vue node lifecycle issues during subgraph navigation and tab switching - Extracts reusable `useSubgraphNavigation` composable with callback-based API - Adds comprehensive tests for subgraph functionality - Ensures proper graph context restoration during tab switches https://github.com/user-attachments/assets/fd4ff16a-4071-4da6-903f-b2be8dd6e672 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5572-feat-Add-Vue-node-subgraph-title-button-with-lifecycle-management-26f6d73d365081bfbd9cfd7d2775e1ef) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> |
||
|
Christian Byrne
|
a975e50f1b |
[feat] Add tooltip support for Vue nodes (#5577)
## Summary Added tooltip support for Vue node components using PrimeVue's v-tooltip directive with proper data integration and container scoping. https://github.com/user-attachments/assets/d1af31e6-ef6a-4df8-8de4-5098aa4490a1 ## Changes - **What**: Implemented tooltip functionality for Vue node headers, input/output slots, and widgets using [PrimeVue v-tooltip](https://primevue.org/tooltip/) directive - **Dependencies**: Leverages existing PrimeVue tooltip system, no new dependencies ## Review Focus Container scoping implementation via provide/inject pattern for tooltip positioning, proper TypeScript interfaces eliminating `as any` casts, and integration with existing settings store for tooltip delays and enable/disable functionality. ```mermaid graph TD A[LGraphNode Container] --> B[provide tooltipContainer] B --> C[NodeHeader inject] B --> D[InputSlot inject] B --> E[OutputSlot inject] B --> F[NodeWidgets inject] G[useNodeTooltips composable] --> H[NodeDefStore lookup] G --> I[Settings integration] G --> J[i18n fallback] C --> G D --> G E --> G F --> G style A fill:#f9f9f9,stroke:#333,color:#000 style G fill:#e8f4fd,stroke:#0066cc,color:#000 ``` --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> |
||
|
Benjamin Lu
|
2ff0d951ed |
Slot functionality for vue nodes (#5628)
Allows for simple slot functionality in vue nodes mode. Has: - Drag new link from slot - Connect new link from dropping on slot Now: - Tests After: - Drop on reroute - Correct link color on connect - Drop on node - Hover effects ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5628-Slot-functionality-for-vue-nodes-2716d73d365081c59a3cef7c8a5e539e) by [Unito](https://www.unito.io) --------- Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: AustinMroz <austin@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
bc85d4e87b |
Make Vue nodes read-only when in panning mode (#5574)
## Summary Integrated Vue node components with canvas panning mode to prevent UI interference during navigation. ## Changes - **What**: Added [canCapturePointerEvents](https://docs.comfy.org/guide/vue-nodes) computed property to `useCanvasInteractions` composable that checks canvas read-only state - **What**: Modified Vue node components (LGraphNode, NodeWidgets) to conditionally handle pointer events based on canvas navigation mode - **What**: Updated node event handlers to respect panning mode and forward events to canvas when appropriate ## Review Focus Event forwarding logic in panning mode and pointer event capture state management across Vue node hierarchy. ```mermaid graph TD A[User Interaction] --> B{Canvas in Panning Mode?} B -->|Yes| C[Forward to Canvas] B -->|No| D[Handle in Vue Component] C --> E[Canvas Navigation] D --> F[Node Selection/Widget Interaction] G[canCapturePointerEvents] --> H{read_only === false} H -->|Yes| I[Allow Vue Events] H -->|No| J[Block Vue Events] style A fill:#f9f9f9,stroke:#333,color:#000 style E fill:#f9f9f9,stroke:#333,color:#000 style F fill:#f9f9f9,stroke:#333,color:#000 style I fill:#e1f5fe,stroke:#01579b,color:#000 style J fill:#ffebee,stroke:#c62828,color:#000 ``` ## Screenshots https://github.com/user-attachments/assets/00dc5e4a-2b56-43be-b92e-eaf511e52542 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5574-Make-Vue-nodes-read-only-when-in-panning-mode-26f6d73d3650818c951cd82c8fe58972) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Johnpaul Chiwetelu
|
4789d86fe8 |
Line Selection toolbox up with Vue Nodes (#5601)
This pull request improves the selection toolbox behavior during node dragging by ensuring that it correctly responds to both LiteGraph and Vue node drag events. The main changes introduce a reactive drag state for Vue nodes in the layout store and update the selection toolbox composable and Vue node component to use this state. **Selection toolbox behavior improvements:** * Added a helper function and separate watchers in `useSelectionToolboxPosition.ts` to hide the selection toolbox when either LiteGraph or Vue nodes are being dragged. This ensures consistent UI feedback regardless of node type. [[1]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713L171-R172) [[2]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713R212-R224) **Vue node drag state management:** * Added a reactive `isDraggingVueNodes` property to the `LayoutStoreImpl` class, along with getter and setter methods to manage Vue node drag state. This allows other components to reactively track when Vue nodes are being dragged. [[1]](diffhunk://#diff-80d32fe0fb72730c16cf7259adef8b20732ff214df240b1d39ae516737beaf3bR133-R135) [[2]](diffhunk://#diff-80d32fe0fb72730c16cf7259adef8b20732ff214df240b1d39ae516737beaf3bR354-R367) * Updated `LGraphNode.vue` to set and clear the Vue node dragging state in the layout store during pointer down and up events, ensuring the selection toolbox is hidden while dragging Vue nodes. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R357-R360) [[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R376-R378) **Dependency updates:** * Imported the `layoutStore` in `LGraphNode.vue` to access the new drag state management methods. * Added missing `ref` import in `layoutStore.ts` to support the new reactive property. https://github.com/user-attachments/assets/d6e9c15e-63b5-4de2-9688-ebbc6a3be545 --------- Co-authored-by: GitHub Action <action@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 |
||
|
Benjamin Lu
|
ff5d0923ca |
Refactor vue slot tracking (#5463)
* 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 |
||
|
Christian Byrne
|
0483630f82 |
Show sampling previews on Vue nodes (#5579)
* refactor: simplify preview state provider - Remove unnecessary event listeners and manual syncing - Use computed() to directly reference app.nodePreviewImages - Eliminate data duplication and any types - Rely on Vue's reactivity for automatic updates - Follow established patterns from execution state provider * feat: optimize Vue node preview image display with reactive store - Move preview display logic from inline ternaries to computed properties - Add useNodePreviewState composable for preview state management - Implement reactive store approach using Pinia storeToRefs - Use VueUse useTimeoutFn for modern timeout management instead of window.setTimeout - Add v-memo optimization for preview image template rendering - Maintain proper sync between app.nodePreviewImages and reactive store state 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: update props usage for Vue 3.5 destructured props syntax * [refactor] improve code style and architecture based on review feedback - Replace inject pattern with direct store access in useNodePreviewState - Use optional chaining for more concise conditional checks - Use modern Array.at(-1) for accessing last element - Remove provide/inject for nodePreviewImages in favor of direct store refs - Update preview image styling: remove rounded borders, use flexible height - Simplify scheduleRevoke function with optional chaining Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> * [cleanup] remove unused NodePreviewImagesKey injection key Addresses knip unused export warning after switching from provide/inject to direct store access pattern. * [test] add mock for useNodePreviewState in LGraphNode test Fixes test failure after adding preview functionality to LGraphNode component. * [fix] update workflowStore import path after rebase Updates import to new location: @/platform/workflow/management/stores/workflowStore --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> |
||
|
Alexander Brown
|
15cffe9d9e | style: Flip the shade direction for charoal to go from light to dark (#5609) | ||
|
Alexander Brown
|
186e065528 |
Feat: Bypass styling for Vue nodes (#5593)
* cleanup: Extract the logic for outline/border colors * feat: Add coloring for bypass style |
||
|
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
|
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
|
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
|
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
|
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> |
||
|
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) | ||
|
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 |
||
|
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
|
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> |
||
|
Benjamin Lu
|
0e44a4a354 |
Remove COMFY_VUE_NODE_DIMENSIONS constant (#5398)
* Remove COMFY_VUE_NODE_DIMENSIONS * Update litegraph snapshot test |
||
|
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> |
||
|
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
|
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 |