mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-05 07:30:11 +00:00
874ef3ba0c85b04811258a8aafa885c8e8e9d2fc
42 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Alexander Brown
|
874ef3ba0c |
Lint: Add eslint import plugin (#5955)
## Summary Adds the linter, turns on the recommended and a few extra rules, fixes existing violations. Doesn't prohibit `../../...` imports yet, that'll be it's own PR. ## Changes - **What**: Consistent and fixable imports - **Dependencies**: The plugin and parser ## Review Focus How do you feel about the recommended rules? What about the extra ones? [Any more](https://github.com/un-ts/eslint-plugin-import-x?tab=readme-ov-file#rules) you'd want to turn on? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5955-Lint-Add-eslint-import-plugin-2856d73d3650819985c0fb9ca3fa94b0) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
d9157925f5 |
make Vue nodes resizable (#5936)
## Summary Implemented node resizing functionality for Vue nodes. https://github.com/user-attachments/assets/a7536045-1fa5-401b-8d18-7c26b4dfbfc3 Resolves https://github.com/Comfy-Org/ComfyUI_frontend/issues/5675. ## Review Focus ResizeObserver as single source of truth pattern eliminates feedback loops between manual resize and reactive layout updates. Intrinsic content sizing calculation temporarily resets DOM styles to measure natural content dimensions. ```mermaid graph TD A[User Drags Handle] --> B[Direct DOM Style Update] B --> C[ResizeObserver Detects Change] C --> D[Layout Store Update] D --> E[Slot Position Sync] style A fill:#f9f9f9,stroke:#333,color:#000 style E fill:#f9f9f9,stroke:#333,color:#000 ``` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5936-make-Vue-nodes-resizable-2846d73d36508160b3b9db49ad8b273e) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
2cb078cd9e |
fix mmb navigation when click starts on Vue nodes (#5921)
## Summary Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/5860 by updating Vue node pointer interactions to forward middle mouse button events to canvas instead of handling them locally. ## Review Focus Middle mouse button event detection logic using both `button` property and `buttons` bitmask for cross-browser compatibility. Test coverage for pointer event forwarding behavior. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5921-fix-mmb-navigation-when-click-starts-on-Vue-nodes-2826d73d3650819688eec4600666755d) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <DrJKL@users.noreply.github.com> |
||
|
Benjamin Lu
|
cd7310cb8c |
feat(vue-nodes): snap link preview; connect on drop (#5780)
## Summary Snap link preview to the nearest compatible slot while dragging in Vue Nodes mode, and complete the connection on drop using the snapped target. Mirrors LiteGraph’s first-compatible-slot logic for node-level snapping and reuses the computed candidate for performance. ## Changes - Snap preview end to compatible slot - slot under cursor via `data-slot-key` fast-path - node under cursor via `findInputByType` / `findOutputByType` - Render path - `slotLinkPreviewRenderer.ts` now renders to `state.candidate.layout.position` - Complete on drop - Prefer `state.candidate` (no re-hit-testing) - Fallbacks: DOM slot → node first-compatible → reroute - Disconnects moving input link when dropped on canvas ## Review Focus - UX feel of snapping and drop completion (both directions) - Performance on large graphs (mousemove path is O(1) with dataset + single validation) - Edge cases: reroutes, moving existing links, collapsed nodes ## Screenshots (if applicable) https://github.com/user-attachments/assets/fbed0ae2-2231-473b-a05a-9aaf68e3f820 https://github.com/Comfy-Org/ComfyUI_frontend/pull/5780 (snapping) <-- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5898 (drop on canvas + linkconnectoradapter refactor) <-- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5903 (fix reroute snapping) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5780-feat-vue-nodes-snap-link-preview-connect-on-drop-27a6d73d365081d89c8cf570e2049c89) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
4b1c165d43 |
Cleanup/Perf: Float32Array/Float64Array removal (#5877)
## Summary Redoing https://github.com/Comfy-Org/ComfyUI_frontend/pull/5567, without the link rendering changes. ## Changes - **What**: Standardizing the Point/Size/Rect logic around numeric tuples instead of typed arrays. ## Review Focus Cutting here and going to continue in a second PR. Do the simpler types make sense? Do we want to keep the behavior of Rectangle as it is now? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5877-WIP-Float32Array-Float64Array-removal-27f6d73d36508169a39eff1e4a87a61c) by [Unito](https://www.unito.io) --------- Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> |
||
|
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) |
||
|
Benjamin Lu
|
5d0aee59a6 |
Increase vue slot/link functionality (#5710)
## Summary Increase functionality for slots and links, covered with playwright tests. ## Features - Allow for reroute anchors to work when dragging from input slot - Allow for dragging existing links from input slot - Allow for ctrl/command + alt to create new link from input slot - Allow shift to drag all connected links on output slot - Connect links with reroutes (only when dragged from vue slot) ## Tests Added ### Playwright - Dragging input to input drags existing link - Dropping an input link back on its slot restores the original connection - Ctrl+alt drag from an input starts a fresh link - Should reuse the existing origin when dragging an input link - Shift-dragging an output with multiple links should drag all links - Rerouted input drag preview remains anchored to reroute - Rerouted output shift-drag preview remains anchored to reroute ## Notes The double rendering system for links being dragged, it works right now, maybe they can be coalesced later. Edit: As in the adapter, can be removed in a followup PR Also, it's known that more features will arrive in smaller PRs, this PR actually should've been much smaller. The next ones coming up are drop on canvas support, snap to node, type compatibility highlighting, and working with subgraphs. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5710-Increase-vue-slot-link-functionality-2756d73d3650814f8995f7782244803b) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
840f7f04fa |
Cleanup: Litegraph/Vue synchronization work (#5789)
## Summary Cleanup and fixes to the existing syncing logic. ## Review Focus This is probably enough to review and test now. Main things that should still work: - moving nodes around - adding new ones - switching back and forth between Vue and Litegraph Let me know if you find any bugs that weren't already present there. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5789-WIP-Litegraph-Vue-synchronization-work-27a6d73d3650811682cacacb82367b9e) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
e8b9f8f4bc |
enforce test file-naming rule (#5820)
## Summary Enforced test file naming conventions with ESLint rules and renamed 26 test files from `.spec.ts` to `.test.ts`. ## Changes - **What**: Added ESLint rules to enforce `.spec.ts` files only in `browser_tests/tests/` and `.test.ts` files only in `src/` - **What**: Renamed 26 component/unit test files from `.spec.ts` to `.test.ts` to comply with new convention ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5820-enforce-test-file-naming-rule-27b6d73d365081269b32ddcc9d3a5048) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
856eb446a5 |
Add node pinning functionality to Vue nodes (#5772)
## Summary Added pinning functionality to Vue nodes with hotkey support and visual indicators. ## Changes - **What**: Added node pinning feature with 'p' hotkey toggle and pin icon indicator - **Components**: Updated `LGraphNode.vue` and `NodeHeader.vue` with pin state tracking - **State Management**: Extended `useGraphNodeManager` to sync pinned flag with Vue components - **Tests**: Added E2E tests for single and multi-node pin toggling ## Review Focus Pin state persistence in graph serialization and visual indicator positioning in node header layout. Verify hotkey doesn't conflict with existing shortcuts. ## Technical Details - Pin state tracked via `flags.pinned` property in `LGraphNode` - Uses [Vue memoization](https://vuejs.org/api/reactivity-advanced.html#v-memo) for efficient header re-rendering - Integrates with existing node property change detection system - Visual indicator uses Lucide pin icon with theme-aware styling ## Screenshots (if applicable) <img width="875" height="977" alt="Screenshot from 2025-09-25 13-02-21" src="https://github.com/user-attachments/assets/51d46cea-08f0-44fb-8b07-56d1b939338f" /> <img width="875" height="977" alt="Screenshot from 2025-09-25 13-02-10" src="https://github.com/user-attachments/assets/ce247426-1e39-48c0-924b-658b65c24f52" /> ## Related - https://github.com/Comfy-Org/ComfyUI_frontend/pull/5715 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5772-Add-node-pinning-functionality-to-Vue-nodes-2796d73d36508195914bcfc986aa66b5) by [Unito](https://www.unito.io) --------- Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> |
||
|
Christian Byrne
|
46ad1318e5 |
Implement fit-to-view for Vue nodes (#5782)
## Summary Implemented fit-to-view functionality for Vue nodes with bounds calculation and viewport animation support. https://github.com/user-attachments/assets/2ec221f1-9194-4564-95f9-ad4da80f190a ## Changes - **What**: Added Vue nodes support to fit-to-view command with [bounds calculation](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) and LiteGraph integration - **Dependencies**: Added dependency on `layoutStore` and `selectionBounds` utility ## Review Focus Bounds calculation accuracy for complex node layouts and animation performance with large node selections. Verify proper fallback to legacy LiteGraph behavior when Vue nodes disabled. ```mermaid graph TD A[Fit to View Command] --> B{Vue Nodes Enabled?} B -->|Yes| C[Get Selected Nodes] B -->|No| D[Legacy LiteGraph Method] C --> E{Nodes Selected?} E -->|Yes| F[Calculate Selected Bounds] E -->|No| G[Calculate All Nodes Bounds] F --> H[Convert to LiteGraph Format] G --> H H --> I[Animate to Bounds] D --> J[Canvas fitViewToSelectionAnimated] style A fill:#f9f9f9,stroke:#333,color:#333 style I fill:#f9f9f9,stroke:#333,color:#333 style J fill:#f9f9f9,stroke:#333,color:#333 ``` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5782-Implement-fit-to-view-for-Vue-nodes-27a6d73d365081cb822cd93f557e77b2) by [Unito](https://www.unito.io) --------- Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> |
||
|
Alexander Brown
|
97542efc9b |
Refactor: Viewport Culling improvements (#5767)
## Summary Reduce the number of DOM changes, but also restructure the logic to create a clean point of separation for when we can make DragAndScale reactive. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5767-Refactor-Viewport-Culling-improvements-2796d73d365081708f02cb8033aac9b1) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
6449d26cee |
cleanup: remove useCanvasTransformSync composables. (#5742)
No I am not proud of the new placeholder arguments. ## Summary Small change to unify the two composables before updating the logic. Edit: Now unifies them both into the **void**. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5742-cleanup-unify-useCanvasTransformSync-composables-2776d73d36508147ad39d11de8588b2e) 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
|
1611c7a224 |
Refactor: Further state management cleanup (#5727)
## Summary Going through the GraphNodeManager and VueNodeLifecycle one property at a time and removing the pieces that are not currently wired up or used by the rest of the application Fixes paste location by updating the layoutStore in LGraphCanvas (which already mutates layoutStore elsewhere) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5727-WIP-Refactor-Further-state-management-cleanup-2766d73d36508173b379c6009c194a5a) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
f951e07cea |
fix bypass hotkey in vue nodes and fix node data instrumentation setup issue when switching to Vue nodes after initial load (#5715)
## Summary Fixed Vue node keybinding target element ID to enable bypass/pin/collapse hotkeys in both LiteGraph and Vue rendering modes. Also fixed a bug when starting in litegraph mode => switching to Vue nodes without reloading => `graph.onTrigger` is set to `undefined` which interferes with proper setup of node data instrumentation, among other things. ## Changes - **What**: Updated keybinding `targetElementId` from `graph-canvas` to `graph-canvas-container` for node manipulation commands (parent of both the canvas and transform pane -- vue nodes container). - **What**: Added conditional `onTrigger` handler restoration in slot layout sync to prevent Vue node manager conflicts ## Review Focus Event handler precedence between Vue nodes and LiteGraph systems during mode switching, ensuring hotkeys work consistently across rendering modes. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5715-fix-bypass-hotkey-in-vue-nodes-and-fix-node-data-instrumentation-setup-issue-when-switchi-2756d73d3650815c8ec8d5e4d06232e3) 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> |
||
|
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
|
e3bb29ceb8 |
[refactor] Move thumbnail functionality to renderer/core domain (#5586)
Move thumbnail functionality from src/renderer/thumbnail/ to src/renderer/core/thumbnail/ to align with domain-driven design architecture. Thumbnail generation is core rendering infrastructure and belongs alongside other core renderer utilities. Changes: - Move useWorkflowThumbnail.ts and graphThumbnailRenderer.ts to renderer/core/thumbnail/ - Update all import paths in consuming files - Fix relative imports within moved files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Christian Byrne
|
6349ceee6c |
[refactor] Improve renderer domain organization (#5552)
* [refactor] Improve renderer architecture organization Building on PR #5388, this refines the renderer domain structure: **Key improvements:** - Group all transform utilities in `transform/` subdirectory for better cohesion - Move canvas state to dedicated `renderer/core/canvas/` domain - Consolidate coordinate system logic (TransformPane, useTransformState, sync utilities) **File organization:** - `renderer/core/canvas/canvasStore.ts` (was `stores/graphStore.ts`) - `renderer/core/layout/transform/` contains all coordinate system utilities - Transform sync utilities co-located with core transform logic This creates clearer domain boundaries and groups related functionality while building on the foundation established in PR #5388. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: Clean up linter-modified files * Fix import paths and clean up unused imports after rebase - Update all remaining @/stores/graphStore references to @/renderer/core/canvas/canvasStore - Remove unused imports from selection toolbox components - All tests pass, only reka-ui upstream issue remains in typecheck 🤖 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> |
||
|
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
|
90bf8dc74a |
[refactor] Move pure functions from layout store to separate modules so they can be tested (and add tests) (#5462)
* refactor layout store utils * [refactor] use nullish coalescing in getOr helper - addresses @DrJKL's suggestion Replaces manual undefined/null checks with more concise ?? operator for cleaner code that achieves the same functionality. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] improve Y.Map typing for better type safety - addresses @DrJKL's typing suggestions - Use Y.Map<NodeLayout[keyof NodeLayout]> instead of Y.Map<unknown> - Provides compile-time type safety for stored values - Improves IntelliSense and prevents type mismatches - Updates mappers, store, tests, and helper functions consistently - No runtime changes, pure TypeScript improvement 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] address @arjansingh code quality feedback - Remove AI-generated refactoring comment that adds no value - Reorganize tests with nested describe blocks for better readability - Group related test cases by function for easier scanning 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] move makeLinkSegmentKey to layoutUtils - addresses @arjansingh's file organization feedback - Move string concatenation function from layoutMath.ts to new layoutUtils.ts - Keep layoutMath.ts focused on pure geometric calculations - Create dedicated layoutUtils.ts for general layout utilities - Update imports in store and create separate test file - Improves module cohesion and clarity of purpose 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [cleanup] remove leftover AI refactoring comments - Remove "Constants moved to utils" and "Node layout mapping moved to utils" - Clean up extra blank lines from previous refactoring - Keep meaningful organizational comments like "Helper methods" 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [cleanup] remove unnecessary import aliases Remove pointInBoundsUtil/boundsIntersectUtil aliases as there are no naming conflicts. Use direct function names for cleaner code. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [refactor] improve Y.Map typing with named NodeLayoutMap type - addresses @DrJKL's performance and type safety suggestions - Create named NodeLayoutMap type for TypeScript performance optimization - Improve getOr function with proper key constraints and type safety - Update all Y.Map<NodeLayout[keyof NodeLayout]> usages to use NodeLayoutMap - Remove manual type assertions in favor of generic key constraints - Clean up unused imports and fix formatting issues * [cleanup] remove explanatory comment per @DrJKL's preference * don't wait for dialog close button to be stable --------- Co-authored-by: Claude <noreply@anthropic.com> |
||
|
Benjamin Lu
|
29ad47d20f |
fix(links): remove drag-end offset in straight/linear modes by honoring CENTER/NONE as no-offset (#5520)
- Add 'none' direction to path renderer - Map CENTER/NONE to 'none' in adapter - Keep start-end offset intentional; end follows cursor exactly - Preserve spline behavior and arrow rendering Verified with typecheck; no visual changes outside dragging behavior. |
||
|
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 |
||
|
Benjamin Lu
|
aa7f8912a7 |
[refactor] Use getSlotPosition for Vue nodes in link rendering (#5400)
* Remove COMFY_VUE_NODE_DIMENSIONS * [refactor] Use getSlotPosition for Vue nodes in link rendering Replace direct node position calls with getSlotPosition utility when Vue nodes mode is enabled. This ensures consistent slot positioning across the canvas rendering system. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Fix getSlotPosition readonly return value (#5433) * Update accordingly to new type * Fix canvas/screen conversion formulas in useTransformState (#5406) * Fix conversion formulas * update test expectations * Remove unused type import --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> |
||
|
Christian Byrne
|
76bfc9e678 |
[refactor] Centralize type assertions from yjs data (#5385)
* switch to schema interface and remove assertions at callsites * [refactor] improve type safety and code organization - addresses @DrJKL's review feedback - Remove unnecessary type assertions from REROUTE_DEFAULTS - Use safer Omit<RerouteData, 'id' < /dev/null | 'parentId'> pattern for defaults to prevent hardcoded ID bugs - Extract asRerouteId and asLinkId utility functions to module scope as pure functions - Update getRerouteField to handle partial defaults safely 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [fix] revert to clean defaults pattern - removes any type usage Reverted the overcomplicated Omit pattern back to the simple, working approach. The original pattern was cleaner and didn't introduce unnecessary complexity. --------- Co-authored-by: Claude <noreply@anthropic.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> |
||
|
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
|
0854194aa1 |
[refactor] Refactor rendering-related files to DDD organization (#5388)
* refactor rendering-related files to DDD organization * add to git ignore ignore revs |
||
|
Benjamin Lu
|
9122a4758d | Implement proper invalidation on switch (#5383) | ||
|
Benjamin Lu
|
a9715a8a09 | [cleanup] Remove debug logging from slot layout updates (#5384) | ||
|
Christian Byrne
|
718ec42deb |
[refactor] Consolidate reroute handlers (#5379)
- Replace handleRerouteAdd + handleRerouteUpdate with single handleRerouteUpsert
- Both operations performed identical logic (full layout replacement)
- Remove redundant parameter passing (rerouteIdStr + rerouteId)
- Remove 'export type { LayoutStore } from types' pattern that obscures dependencies
|
||
|
Benjamin Lu
|
fac27723fb | [refactor] Use public nodes getter instead of private _nodes property (#5369) | ||
|
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 |