mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-04 15:10:06 +00:00
88fba256171e3de56e040c4082da303c8d4309b7
73 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Rizumu Ayaka
|
88fba25617 |
fix: group recompute in item selection for properties panel (#8274)
Group first click displays an empty node list in Right Side Panel. The reason is that when clicking the group, only `processSelect()` is called, and `recomputeInsideNodes()` is not called. related https://github.com/Comfy-Org/ComfyUI_frontend/pull/8275 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8274-fix-group-recompute-in-item-selection-for-properties-panel-2f16d73d3650812ca394dc9de3d6855b) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
79d3b2c291 |
Fix properties context menu (#8188)
A tiny fix for a regression introduced in #7817 that prevented changing a node's properties through the litegraph context menu. <img width="838" height="568" alt="image" src="https://github.com/user-attachments/assets/a73e8da4-f5ff-4e65-8003-55883f8d08be" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8188-Fix-properties-context-menu-2ee6d73d365081ba8844dd3c8d74432d) by [Unito](https://www.unito.io) |
||
|
AustinMroz
|
6db4750d96 |
Fix crosshair cursor in vue mode (#8120)
When the mouse cursor is at the very edge of a a node in vue mode, a crosshair cursor will sometimes display. This happens because the mouse is over the canvas, and `LGraphCanvas.processMouseMove` determines the cursor is still above the node. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8120-Fix-crosshair-cursor-in-vue-mode-2eb6d73d36508116a3cfdd407c5e1e9c) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> |
||
|
AustinMroz
|
a6b6857e37 |
Fix copypasted primitives inside subgraphs (#8094)
Copying a subgraph which contains primitive nodes would cause the primitives to fail to initialize. This was caused because they did not have their `onGraphConfigured` and `onAfterGraphConfigured` callbacks applied. There's already a copy of `forEachNode` in `@/utils/graphTraversalUtil.ts`, but the method is small and I want to avoid litegraph referencing outside code. See also #6606, where a similar fix was needed ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8094-Fix-copypasted-primitives-inside-subgraphs-2ea6d73d365081f189f1ea4c9248f5ed) by [Unito](https://www.unito.io) |
||
|
Johnpaul Chiwetelu
|
3412a0908d |
Road to No Explicit Any Part 4: LiteGraph Cleanup (#7970)
## Summary - Remove all remaining `any` types from LiteGraph module - Define proper `Panel` interface for createPanel function and related callbacks - Type `SlotTypeDefaultNodeOpts` for slot type defaults configuration - Fix type inference issues in sendActionToCanvas and contextMenuCompat ## Changes - **SubgraphIONodeBase.ts**: Remove unnecessary `as any` cast in showSlotContextMenu - **interfaces.ts**: Add Panel, PanelButton, PanelWidget, PanelWidgetOptions, PanelWidgetCallback types - **LGraphNode.ts**: Type panel callbacks (onShowCustomPanelInfo, onAddPropertyToPanel) and onGetPropertyInfo - **LGraphCanvas.ts**: - Type node_panel and options_panel as Panel - Type inner_clicked callback parameters - Type local variables (nodeNewType, nodeNewOpts, prevent_timeout, iS, sIn, sOut) - Add SlotTypeDefaultNodeOpts interface for slot type configuration - **LGraph.ts**: Fix sendActionToCanvas type inference with proper array handling - **contextMenuCompat.ts**: Add null guard for newImpl parameter ## Test plan - [x] pnpm typecheck passes - [x] pnpm lint passes - [x] knip passes (no unused exports) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7970-Road-to-No-Explicit-Any-Part-4-LiteGraph-Cleanup-2e66d73d3650812c939bf9b2cb0ff2f5) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Johnpaul Chiwetelu
|
965ab674d5 |
Road to No Explicit Any Part 3: Litegraph (#7935)
## Summary - Replace `any` types with proper TypeScript types in litegraph core files - Focused on `LGraphCanvas.ts`, `LGraphNode.ts`, and `LGraph.ts` ## Changes **LGraphCanvas.ts:** - `ICreatePanelOptions` interface: `closable`, `window`, `width`, `height` - `options` property: `skip_events`, `viewport`, `skip_render`, `autoresize` - `prompt` function: `value` and `callback` parameters - `onSearchBox` return type: `string[] | void` - `onSearchBoxSelection` callback: `name: string`, `event: MouseEvent` - `onDrawBackground` / `onDrawForeground` callbacks: `visible_area: Rectangle` - Properties Panel callback parameters **LGraphNode.ts:** - `onDropFile` / `onDropData`: `file: File`, `filename: string` - `action_call` option: `string` (5 occurrences) - `onSerialize` return type: `void` - `onDrawTitleBar.fgcolor`: `string` **LGraph.ts:** - `LGraphConfig`: `align_to_grid`, `links_ontop` as `boolean` - `triggerInput`: `value: unknown` - `setCallback`: `func: (() => void) | undefined` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7935-Road-to-No-Explicit-Any-Part-3-Litegraph-2e36d73d3650819eb9f9ec9c16ebc3b9) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
43f0ac2e8f |
Chore: Typescript cleanup (1 / N) (#7817)
## Summary
Remove 178 `@ts-expect-error` suppressions (935 → 757, 19% reduction) by
fixing underlying type issues instead of suppressing errors.
## Changes
- **What**: Type safety improvements across `src/lib/litegraph/` and
related test files
- Prefix unused callback parameters with `_` instead of suppressing
- Use type intersections for mock methods on real objects
- Use `Partial<T>` for incomplete test objects instead of `as unknown`
- Add non-null assertions after `.toBeDefined()` checks in tests
- Let TypeScript infer vitest fixture parameter types
- **Breaking**: None
## Review Focus
- `LGraphCanvas.ts` has the largest changes (232 lines) — all mechanical
unused parameter fixes
- Test files use type intersection pattern for mocks: `node as
LGraphNode & { mockFn: ... }`
- Removed dead code: `src/platform/cloud/onboarding/auth.ts` (47 lines,
unused)
### Key Files
| File | Change |
|------|--------|
| `LGraphCanvas.ts` | 57 suppressions removed (unused params) |
| `subgraph/__fixtures__/*` | Fixture type improvements |
| `*.test.ts` files | Mock typing with intersections |
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7817-WIP-Chore-Typescript-cleanup-2da6d73d365081d1ade9e09a6c5bf935)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>
|
||
|
Terry Jia
|
dec929909b |
live selection (#7465)
## Summary Add real-time selection feedback during marquee drag, matching the behavior users expect from other applications. ## Changes - Nodes and groups are now selected/deselected instantly as the selection rectangle moves - Supports all modifier keys (Shift to add, Alt to subtract) during drag - Added Comfy.Graph.LiveSelection setting (off by default) ## Rationale This interaction pattern is standard across virtually all design and productivity software: - Operating Systems: Windows Explorer, macOS Finder, and Linux file managers all show live selection feedback when dragging - Design Tools: Figma, Sketch, Adobe Illustrator, Photoshop, and Blender use real-time selection - IDEs: VS Code, JetBrains IDEs show live selection in file explorers - Node Editors: Unreal Engine Blueprints, Unity Shader Graph, and Houdini all support live selection ## Screenshots https://github.com/user-attachments/assets/8b0c2217-47f9-4422-9cab-cb39e145310c ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7465-live-selection-2c96d73d36508133a4a6f917955d55b3) by [Unito](https://www.unito.io) |
||
|
Terry Jia
|
4ec4da785b |
fix: render selection rectangle in DOM layer to appear above DOM widgets (#7474)
## Summary Selection box was being drawn on canvas which appeared below DOM widgets like images and textareas. Now rendered via SelectionRectangle.vue with high z-index to ensure visibility during drag selection. ## Screenshots (if applicable) before <img width="1268" height="1258" alt="image" src="https://github.com/user-attachments/assets/7cb1271c-9ce6-4fac-83a9-ac783a309d97" /> after <img width="1509" height="1129" alt="image" src="https://github.com/user-attachments/assets/55dd698f-1213-4e60-ae46-9ed292ecd70c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7474-fix-render-selection-rectangle-in-DOM-layer-to-appear-above-DOM-widgets-2c96d73d36508142bc2ac0d0943043c5) by [Unito](https://www.unito.io) |
||
|
Johnpaul Chiwetelu
|
c414635ead |
[feat] Add context menu converter infrastructure (#7113)
## Summary - Add `contextMenuConverter.ts` with utilities for converting LiteGraph context menu items to Vue menu format - Improve `contextMenuCompat.ts` with set-based diffing for more reliable legacy extension detection - Extend `MenuOption`/`SubMenuOption` types with `source`, `disabled`, `isColorPicker`, and `category` type fields - Add unit tests for converter functions ## Context This is foundational work for migrating the node context menu from a custom Popover-based component to PrimeVue ContextMenu. The converter provides: - Menu ordering and section grouping (core items first, then extensions) - Deduplication with preference for Vue-native items over LiteGraph items - Extension categorization with labeled section - Support for disabled states and color picker submenus ## Test plan - [x] Unit tests pass for `buildStructuredMenu` (9 tests) - [x] Unit tests pass for `convertContextMenuToOptions` (7 tests) - [x] Typecheck passes - [x] Lint passes - [x] Knip passes (no unused exports) ## Related This is PR 1 of 2 for the node context menu migration. PR 2 will wire up the UI component. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7113-feat-Add-context-menu-converter-infrastructure-2be6d73d3650816ca6c9d2cf50f10159) by [Unito](https://www.unito.io) |
||
|
Christian Byrne
|
585d46d4fb |
fix: inner groups being moved double when moving outer group (in vue mode) (#7447)
## Summary Fixes issue when dragging a group that had inner groups when in vue mode. When dragging the outer group in Vue mode: 1. getAllNestedItems(selected) returns ALL items: outer group + inner groups + nodes 2. moveChildNodesInGroupVueMode loops through all items 3. For outer group G1: calls G1.move(delta, true) then moveGroupChildren(G1, ...) 4. moveGroupChildren calls G2.move(delta) (no skipChildren) - this moves G2 AND G2's children! 5. Then the loop reaches G2: calls G2.move(delta, true) - moves G2 again 6. Plus moveGroupChildren(G2, ...) processes G2's children again This PR fixes it by adding `skipChildren=true` to the `move` call. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7447-fix-inner-groups-being-moved-double-when-moving-outer-group-in-vue-mode-2c86d73d365081ce97abec682f2a8518) by [Unito](https://www.unito.io) |
||
|
Alexander Brown
|
72b5444d5a |
Devex: Linter updates (#7309)
## Summary Updates for the linter/formatter deps, turning on some more rules. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7309-WIP-Linter-updates-2c56d73d36508101b3ece6bcaf7e5212) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> |
||
|
Terry Jia
|
e9d5ce7f3f |
selection rectangle for vueNodes (#7088)
## Summary fix: render selection rectangle in DOM layer for Vue nodes mode. When Vue nodes are enabled, the canvas selection rectangle was being rendered behind Vue node elements due to DOM stacking order (canvas layer is below the TransformPane layer). ## Changes - Adds a new SelectionRectangle.vue component that renders the selection box as a DOM element - Places it above the Vue nodes layer so it's always visible during drag selection - Skips canvas-based selection rectangle rendering when Vue nodes mode is active - Bonus: adds a semi-transparent blue fill style for better visibility ## Screenshots before https://github.com/user-attachments/assets/a8ee2ca3-00fd-4fdc-925a-dc9f846f4280 after https://github.com/user-attachments/assets/66b7f2f5-f0a0-486f-9556-3872d07d65be One more thing, the following improvement will be live selection, something like: https://github.com/user-attachments/assets/05a2b7ea-89b1-4568-bd2a-792f4fc11d8e but I don't want to increase this PR, so I will send live selection after this selection rectangle ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7088-selection-rectangle-for-vueNodes-2bd6d73d3650817aa2e9cf4526f179d8) by [Unito](https://www.unito.io) |
||
|
Terry Jia
|
379af28678 |
fix: handle Unicode characters in clipboard copy/paste and add Paste menu option (#7103)
## Summary Use TextEncoder/TextDecoder for UTF-8 safe base64 encoding/decoding When copying nodes containing non-Latin1 characters (e.g., Chinese characters in localized_name field), btoa() throws an error: InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. The copy operation saved data to localStorage successfully, but failed to write to the browser clipboard. On paste, the browser clipboard still contained old data, causing the wrong node to be pasted. <!-- Fixes #ISSUE_NUMBER --> https://github.com/Comfy-Org/ComfyUI_frontend/issues/6993 https://github.com/Comfy-Org/ComfyUI_frontend/issues/5449 https://github.com/comfyanonymous/ComfyUI/issues/8481 ## Screenshots (if applicable) before https://github.com/user-attachments/assets/8abd9049-91bb-4200-8853-e26753376007 after https://github.com/user-attachments/assets/7d969f32-bb0f-4c7a-baa2-65d576a4eba2 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7103-fix-handle-Unicode-characters-in-clipboard-copy-paste-and-add-Paste-menu-option-2bd6d73d365081f39c40e7e7f832b97c) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Christian Byrne
|
29dbfa3f60 |
fix: Vue Node <-> Litegraph node height offset normalization (#6966)
## Summary Changes the layout store to treat node sizes as body-only measurements while LiteGraph continues to reason about full heights. DOM-driven updates are tagged with `LayoutSource.DOM`, which lets the store strip the title height exactly once before persisting. That classification (a new mutation source - `LayoutSource.DOM`) is accurate because those mutations are triggered by the browser’s layout engine via ResizeObserver, rather than by direct calls into the layout APIs (e.g., `moveNodeTo`, `useNodeDrag`). So all sources are: - `LayoutSource.DOM`: browser layout/ResizeObserver measurements that include the title bar - `LayoutSource.Vue`: direct Vue-driven mutations routed through the layout store - `LayoutSource.Canvas`: legacy LiteGraph/canvas updates that will be phased out over time - `LayoutSource.External`: for multiplayer or syncing with a when going online after making changes offline (in teams/workspace) When layout state flows back into LiteGraph we add the title height just in time for `liteNode.setSize`, so LiteGraph’s rendering stays unchanged. This makes Vue node resizing and workflow persistence deterministic - multiline widgets hold their dimensions across reloads because every path that crosses the layout/LiteGraph boundary performs the same normalization. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6966-normalize-height-at-sites-2b76d73d365081b6bcb4f4ce6a27663a) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
9da82f47ef |
Feat: Alt+Drag to clone - Vue Nodes (#6789)
## Summary Replicate the alt+drag to clone behavior present in litegraph. ## Changes - **What**: Simplify the interaction/drag handling, now with less state! - **What**: Alt+Click+Drag a node to clone it ## Screenshots (if applicable) https://github.com/user-attachments/assets/469e33c2-de0c-4e64-a344-1e9d9339d528 <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6789-WIP-Alt-Drag-to-clone-Vue-Nodes-2b16d73d36508102a871ffe97ed2831f) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
c43a4990a9 |
Fix: Vue Node Align/Distribute (#6712)
## Summary Fixes the issue of the nodes not moving when in Vue mode (but changing if switching back to litegraph) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6712-Fix-Vue-Node-Align-Distribute-2ad6d73d365081339aa6f61e18832bc4) by [Unito](https://www.unito.io) |
||
|
sno
|
02d303c039 |
[chore] Add Oxc linter to project (#6197)
## Summary - Adds [Oxc linter](https://oxc.rs/docs/guide/usage/linter) as a dev dependency - Creates minimal `.oxlintrc.json` configuration file - Integrates oxlint into the lint workflow (runs before ESLint) - Adds `pnpm oxlint` script for standalone usage - **NEW**: Adds [eslint-plugin-oxlint](https://github.com/oxc-project/eslint-plugin-oxlint) to disable redundant ESLint rules - Updates `CLAUDE.md` documentation with oxlint command ## Motivation Oxc is a high-performance Rust-based linter that is 50-100x faster than ESLint. By integrating it into our lint workflow, we get: - **Faster CI/CD pipelines** (5% improvement in this codebase) - **Quicker local development feedback** - **Additional code quality checks** that complement ESLint - **Reduced duplicate work** by disabling ESLint rules that oxlint already checks ## Changes - **package.json**: Added `oxlint` and `eslint-plugin-oxlint` to devDependencies, integrated into `lint`, `lint:fix`, and `lint:no-cache` scripts - **pnpm-workspace.yaml**: Added `eslint-plugin-oxlint` and `mixpanel-browser` to catalog - **eslint.config.ts**: Integrated `eslint-plugin-oxlint` to automatically disable redundant ESLint rules - **.oxlintrc.json**: Created minimal configuration file with schema reference - **CLAUDE.md**: Added `pnpm oxlint` to Quick Commands section - **.gitignore**: Added `core` dump files ## CI/CD Performance Benchmark Real-world CI/CD timing from GitHub Actions workflow runs: ### Baseline (ESLint only) - [Run #18718911051](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/18718911051) - Run ESLint with auto-fix: **125s** - Final validation (lint + format + knip): **16s** - **Total: 141s** ### With Oxlint (oxlint + ESLint) - [Run #18719037963](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/18719037963) - Run ESLint with auto-fix (includes oxlint): **118s** - Final validation (includes oxlint + lint + format + knip): **16s** - **Total: 134s** ### Results ✅ **7 seconds faster (5.0% improvement)** despite running an additional linting pass ### Analysis The oxlint integration actually **improves** CI/CD performance by ~5%. This unexpected improvement is likely because: 1. **Oxlint catches issues early**: Some code that would have slowed down ESLint's parsing/analysis is caught by oxlint first 2. **ESLint cache benefits**: The workflow uses `--cache`, and oxlint's fast execution helps populate/validate the cache more efficiently 3. **Parallel processing**: Modern CI runners can overlap some of the I/O operations between oxlint and ESLint Even if oxlint added overhead, the value proposition would still be strong given its additional code quality checks and local development speed benefits. The fact that it actually speeds up the pipeline is a bonus. ## eslint-plugin-oxlint Performance Impact Benchmark comparing ESLint performance with and without eslint-plugin-oxlint: ### Baseline (ESLint without plugin) - [Run #18723242157](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/18723242157) - Run ESLint with auto-fix: **122s** (2m 2s) - Final validation: **17s** ### With eslint-plugin-oxlint - [Run #18723675903](https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/18723675903) - Run ESLint with auto-fix: **129s** (2m 9s) - Final validation: **12s** ### Results **Performance: +7 seconds ESLint, -5 seconds validation (net +2 seconds)** The eslint-plugin-oxlint integration has a **minimal performance impact** (+2 seconds total). The slight increase in ESLint time is likely due to the additional plugin configuration overhead, while the validation step is faster because fewer redundant lint warnings need to be processed. ### Benefits The small performance cost is outweighed by important benefits: 1. **Prevents duplicate work**: Disables ~50 ESLint rules that oxlint already checks (e.g., `no-constant-condition`, `no-debugger`, `no-empty`, etc.) 2. **Reduces noise**: Eliminates redundant lint warnings from two tools checking the same thing 3. **Cleaner workflow**: One authoritative source for each type of lint check 4. **Best practice**: Recommended by the Oxc project for ESLint + oxlint integration 5. **Consistent results**: Ensures both tools don't conflict or give contradictory advice ## Usage ```bash # Run oxlint standalone pnpm oxlint # Run full lint workflow (oxlint + ESLint) pnpm lint pnpm lint:fix ``` ## Notes - Oxlint now runs as part of the standard `pnpm lint` workflow - The configuration uses minimal rules by default (Oxc's philosophy is "catch erroneous or useless code without requiring any configurations by default") - Oxlint provides fast feedback while ESLint provides comprehensive checks - eslint-plugin-oxlint automatically manages rule conflicts between the two tools - Both tools complement each other in the linting pipeline 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6197-chore-Add-Oxc-linter-to-project-2946d73d3650818cbb55ef9c0abdb9b9) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: DrJKL <DrJKL0424@gmail.com> |
||
|
Johnpaul Chiwetelu
|
6541f5cda5 |
Unhide Properties panel (#6652)
This pull request makes a minor UI adjustment to the node settings panel in the `LGraphCanvas` class. The panel's position is now set to absolute, with specific top and left offsets to improve its placement on the canvas. * Set the `panel` element's CSS `position` to `absolute` and specified `top` and `left` values for better UI alignment in `LGraphCanvas.ts`. ## Old look <img width="1920" height="1032" alt="Screenshot 2025-11-11 154519" src="https://github.com/user-attachments/assets/d16e6715-d934-4269-82fd-221a166ffbf5" /> ## New Look <img width="1920" height="1032" alt="Screenshot 2025-11-11 160015" src="https://github.com/user-attachments/assets/7c1b9baa-0d78-4623-8be0-f02a0452aae6" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6652-Unhide-Properties-panel-2a86d73d36508148bb0fd5568c3a007a) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
4cfa5b4b5d |
Feat: Doubleclick to toggle edit for Markdown (litegraph) (#6560)
## Summary See https://github.com/Comfy-Org/ComfyUI_frontend/pull/6537, but for litegraph widget. Doesn't allow dragging the node through the rendered markdown yet, that would be more complicated (DOMWidget complication) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6560-Feat-Doubleclick-to-toggle-edit-for-Markdown-litegraph-2a06d73d36508189bf6eedd7cdeba6db) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Alexander Brown
|
e606ff34ec |
Feat: Vue Node Slot Improvements (#6359)
## Summary Several fixes and improvements to the slot behavior on Vue nodes. ## Changes - **What**: Restore the pseudo-slots, if there are slots being hidden by collapse - **What**: Connections while collapsed - **What**: Display the links in a more reasonable location - **What**: Fixes styling of linked widgets - **What**: [~Fix reconnecting logic to prioritize newly disconnected and now empty slots~](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6370) ## Review Focus <!-- Critical design decisions or edge cases that need attention --> <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) https://github.com/user-attachments/assets/913cfb8f-acdd-4f3d-b619-c280cc11cce5 <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6359-WIP-Collapsed-nodes-multislots-29b6d73d3650817289d5f0a8efdade84) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
6f068c87da |
Multiple fixes related to copying subgraphs (#6383)
- DOMWidgets have ownership reset after a `subgraphNode.clone()`. - Fixes Ctrl+C on a subgraphNode with a prompted prompt making the prompt disappear. - alt + drag uses the copy/paste pathway that deeply clones subgraphs. - Fixed dangling references on nodes in subgraphs by updating subgraph ids before configuration. - Attempt to recursively resolve disconnected proxyWidgets (Can matter when subgraphs load out of order). - Fix Right click -> clone creating linked copies of subgraphs. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6383-Multiple-fixes-related-to-copying-subgraphs-29b6d73d365081819671ced440dde327) by [Unito](https://www.unito.io) |
||
|
Johnpaul Chiwetelu
|
b3da6cf1b4 |
Contextmenu extension migration (#5993)
This pull request refactors how context menu items are contributed by extensions in the LiteGraph-based canvas. The legacy monkey-patching approach for adding context menu options is replaced by a new, explicit API (`getCanvasMenuItems` and `getNodeMenuItems`) for extensions. A compatibility layer is added to support legacy extensions and warn developers about deprecated usage. The changes improve maintainability, extension interoperability, and migration to the new context menu system. ### Context Menu System Refactor * Introduced a new API for extensions to contribute context menu items via `getCanvasMenuItems` and `getNodeMenuItems` methods, replacing legacy monkey-patching of `LGraphCanvas.prototype.getCanvasMenuOptions`. Major extension files (`groupNode.ts`, `groupOptions.ts`, `nodeTemplates.ts`) now use this new API. [[1]](diffhunk://#diff-b29f141b89433027e7bb7cde57fad84f9e97ffbe5c58040d3e0fdb7905022917L1779-R1771) [[2]](diffhunk://#diff-91169f3a27ff8974d5c8fc3346bd99c07bdfb5399984484630125fdd647ff02fL232-R239) [[3]](diffhunk://#diff-04c18583d2dbfc013888e4c02fd432c250acbcecdef82bf7f6d9fd888e632a6eL447-R458) * Added a compatibility layer (`legacyMenuCompat` in `contextMenuCompat.ts`) to detect and warn when legacy monkey-patching is used, and to extract legacy-added menu items for backward compatibility. [[1]](diffhunk://#diff-2b724cb107c04e290369fb927e2ae9fad03be9e617a7d4de2487deab89d0d018R2-R45) [[2]](diffhunk://#diff-d3a8284ec16ae3f9512e33abe44ae653ed1aa45c9926485ef6270cc8d2b94ae6R1-R115) ### Extension Migration * Refactored core extensions (`groupNode`, `groupOptions`, and `nodeTemplates`) to implement the new context menu API, moving menu item logic out of monkey-patched methods and into explicit extension methods. [[1]](diffhunk://#diff-b29f141b89433027e7bb7cde57fad84f9e97ffbe5c58040d3e0fdb7905022917L1633-L1683) [[2]](diffhunk://#diff-91169f3a27ff8974d5c8fc3346bd99c07bdfb5399984484630125fdd647ff02fL19-R77) [[3]](diffhunk://#diff-04c18583d2dbfc013888e4c02fd432c250acbcecdef82bf7f6d9fd888e632a6eL366-R373) ### Type and Import Cleanup * Updated imports for context menu types (`IContextMenuValue`) across affected files for consistency with the new API. [[1]](diffhunk://#diff-b29f141b89433027e7bb7cde57fad84f9e97ffbe5c58040d3e0fdb7905022917R4-L7) [[2]](diffhunk://#diff-91169f3a27ff8974d5c8fc3346bd99c07bdfb5399984484630125fdd647ff02fL1-R11) [[3]](diffhunk://#diff-04c18583d2dbfc013888e4c02fd432c250acbcecdef82bf7f6d9fd888e632a6eL2-R6) [[4]](diffhunk://#diff-bde0dce9fe2403685d27b0e94a938c3d72824d02d01d1fd6167a0dddc6e585ddR10) ### Backward Compatibility and Migration Guidance * The compatibility layer logs a deprecation warning to the console when legacy monkey-patching is detected, helping developers migrate to the new API. --- These changes collectively modernize the context menu extension mechanism, improve code clarity, and provide a migration path for legacy extensions. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5993-Contextmenu-extension-migration-2876d73d3650813fae07c1141679637a) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
8eac19d06e |
Support cross domain/application copy/paste (#6087)
 Browsers place very heavy restrictions on what can be copied and pasted. See: - https://alexharri.com/blog/clipboard - https://www.w3.org/TR/clipboard-apis/#mandatory-data-types-x ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6087-Experimental-cross-domain-application-copy-paste-28e6d73d36508154a0a8deeb392f43a4) by [Unito](https://www.unito.io) |
||
|
sno
|
653cf64e01 |
[chore] Upgrade Prettier from 3.3.2 to 3.6.2 (#6089)
## Summary - Updated Prettier from 3.3.2 to 3.6.2 in pnpm-workspace.yaml - Ran `pnpm install` to update dependencies - Ran `pnpm format` to apply new formatting rules - Verified typecheck passes ## Test plan - [x] TypeScript typecheck passes - [x] Prettier formatting applied successfully 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6089-chore-Upgrade-Prettier-from-3-3-2-to-3-6-2-28e6d73d3650816a888ff1129b14e0bc) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> |
||
|
AustinMroz
|
15b1b91b16 |
Implement a legacy canvas widget for vue mode (#6011)
 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6011-Implement-a-legacy-canvas-widget-for-vue-mode-2896d73d36508127a5d1debcccb519a0) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> |
||
|
Christian Byrne
|
e48e11e434 |
fix LiteGraph capturing node pointer events if Vue and LG node positions become desynced (#6058)
## Summary Added Vue mode guards to LiteGraph canvas to prevent dual event handling between Vue node components and LiteGraph node event handlers. Fixes a bug where the litegraph and vue positions become out of sync and then there are effectively dead spots on the canvas (the user should still be able to interact with the graph even if the positions desync - the only real downside of desync should just be mispositioned nodes in the serialized state). Returns early only in `processNodeClick` and the node-related (alt+click+drag node cloning) canvas handlers. In general, the LiteGraph canvas still owns some events/interactions - but the node interactions are fully owned by Vue when in Vue nodes mode. ## Changes - **What**: Added `LiteGraph.vueNodesMode` checks in [LGraphCanvas.ts](src/lib/litegraph/src/LGraphCanvas.ts) to skip native event processing when Vue components handle interactions - **Breaking**: This could have some side effects or break some extensions if anything was relying on these. However, prior to this change, things like `processNodeClick` should only have been getting the click events in de-sync scenarios anyway (described in [Summary](##Summary) section) ## Review Focus Any possible side-effects you can think of. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6058-fix-LiteGraph-capturing-node-pointer-events-if-Vue-and-LG-node-positions-become-desynced-28c6d73d365081f389f8c72299c31b0b) by [Unito](https://www.unito.io) |
||
|
pythongosssss
|
984ebef416 |
Floating Menus - UI rework (#5980)
## Summary
Enhancing and further modernizing the UI, giving users more usable area
whilst keeping farmiliar positioning and feel of elements.
## Changes
- **What**: Significant restructure of the UI elements, changing
elements from large blocks to floating elements, updating:
- Side toolbar menu (floating style, supports small/normal mode,
combines to scroll on height overflow)
- Bottom tabs panel (floating style, tabs redesigned)
- Action bar (support for docking/undocking menu)
- Added login/user menu button to top right
- Restyled breadcrumbs (still collapse when overflows)
- Add litegraph support for fps info position (so it isn't covered by
the sidebar)
- **Breaking**:
- Removed various elements and added new ones, I have tested custom
sidebars, custom actions, etc but if scripts are inserting elements into
"other" elements they may have been (re)moved.
- Remove support for bottom menu
- Remove support for 2nd-row tabs
## Screenshots
<img width="1116" height="907" alt="ui"
src="https://github.com/user-attachments/assets/b040a215-67d3-4c88-8c4d-f402a16a34f6"
/>
https://github.com/user-attachments/assets/571dbda5-01ec-47e8-b235-ee1b88c93dd0
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5980-Floating-Menus-UI-rework-2866d73d3650810aac60cc1afe979b60)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
|
||
|
Benjamin Lu
|
4404c0461d |
Implement drop-on-canvas + linkconnectoradapter consolidation (#5898)
Implements droponcanvas functionality and a linkconnectoradapter refactor. - Drop on canvas (Shift and default) integrated via LinkConnector ‘dropped-on-canvas’ with proper CanvasPointerEvent. - LinkConnector adapter: now wraps the live canvas linkConnector (no duplicate state); added dropOnCanvas() helper. - Tests: Playwright scenarios for Shift-drop context menu/searchbox, pinned endpoint, type prefilter, and post-selection auto-connect (browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts). There are some followup PRs that will fix/refactor some more noncritical things, like the terrible slotid, the number/string nodeid confusion, etc. 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) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: GitHub Action <action@github.com> |
||
|
Simula_r
|
1455845a30 |
Fix/vue nodes snap to grid (#5973)
## Summary Enable node snap to grid in vue nodes mirroring the same behavior as litegraph. - Show node snap preview (semi transparent white box target behind node) - Resize snap to grid - Shift + drag / Auto snap - Multi select + group snap ## Changes - **What**: useNodeSnap.ts useShifyKeySync.ts setups the core hooks into both the vue node positioning/resizing system and the event forwarding technique for communicating to litegraph. ## Review Focus Both new composables and specifically the useNodeLayout modifications to batch the mutations when snapping. A key tradeoff/note is why we are using the useShifyKeySync.ts which dispatches a new shift event to the canvas layer. This approach is the cleaner / more declaritive method mimicking how other vue node -> litegraph realtime events are passed. <!-- If this PR fixes an issue, uncomment and update the line below --> <!-- Fixes #ISSUE_NUMBER --> ## Screenshots (if applicable) <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5973-Fix-vue-nodes-snap-to-grid-2866d73d365081c1a058d223c8c52576) by [Unito](https://www.unito.io) |
||
|
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) |
||
|
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
|
84e6e99f17 |
Cleanup: Removing monkeypatches for litegraph logic (#5902)
## Summary Putting the litegraph specific pieces into litegraph itself, using the CanvasGraph and LiteGraphGlobal to coordinate options. This was one part of the Image Previews reloading/calculating with every canvas draw. ## Review Focus Is this keeping things decoupled enough? Is this the right place to put things? Are there assumptions about the options that I'm missing here? ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5902-WIP-Removing-monkeypatches-for-litegraph-logic-2816d73d3650818b860ec73579b89b54) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
Johnpaul Chiwetelu
|
2970692176 |
Move Frame Vue Nodes (#5886)
This pull request improves the selection and movement logic for groups and nodes on the LiteGraph canvas, especially when using Vue-based node rendering. The most notable changes are the addition of proper bounding box handling for groups and a new coordinated movement mechanism that updates both LiteGraph internals and the Vue layout store when dragging nodes and groups. **Selection and bounding box calculation:** * Added support for including `LGraphGroup` bounding rectangles when calculating the selection toolbox position, so groups are now properly considered in selection overlays. [[1]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713L8-R8) [[2]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713R95-R97) **Node and group movement synchronization (Vue nodes mode):** * Introduced a new movement logic in `LGraphCanvas` for Vue nodes mode: when dragging, groups and their child nodes are moved together, and all affected node positions are batch-updated in both LiteGraph and the Vue layout store via `moveNode`. This ensures canvas and UI stay in sync. * Added imports for layout mutation operations and types to support the above synchronization. These changes make group selection and movement more robust and ensure that UI and internal state remain consistent when using the Vue-based node system. https://github.com/user-attachments/assets/153792dc-08f2-4b53-b2bf-b0591ee76559 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5886-Move-Frame-Vue-Nodes-2806d73d365081e48b5ef96d6c6b6d6b) by [Unito](https://www.unito.io) |
||
|
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> |
||
|
AustinMroz
|
720de8cc8a |
Add UI code for configuring subgraphNode widgets (#5826)
The third PR for managing display of widgets on subgraph nodes. This is the one that actually makes the functionality usable and user visible. Adds - A right-side modal for configuring which widgets are promoted, accessed by right click or selection toolbar - This menu allows for re-arranging widget order by dragging and dropping. - Indicators inside the subgraph for which widgets have been promoted. - Context menu options for promoting or demoting widget inside of a subgraph. <img width="767" height="694" alt="image" src="https://github.com/user-attachments/assets/4f78645d-7b26-48ba-8c49-78f4807e89e8" /> <img width="784" height="435" alt="image" src="https://github.com/user-attachments/assets/7005c730-a732-481e-befb-57019a8a31a7" /> Known issues - Some preview widgets are not added to a node until a draw operation occurs. The code does not yet have a way of determining which nodes should have draw operations forced to facilitate initial widget creation. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5826-Add-UI-code-for-configuring-subgraphNode-widgets-27c6d73d36508146accbf395e5bcd36a) by [Unito](https://www.unito.io) |
||
|
Marcel Petrick
|
d0e81cdd33 |
fix(docs): correct typos in comments and strings found during code view (#5880)
Non-functional changes only: - Fixed minor spelling mistakes in comments - Corrected typos in user-facing strings - No variables, logic, or functional code was modified. Signed-off-by: Marcel Petrick <mail@marcelpetrick.it> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5880-fix-docs-correct-typos-in-comments-and-strings-found-during-code-view-27f6d73d3650815db62af6115991304a) by [Unito](https://www.unito.io) --------- Signed-off-by: Marcel Petrick <mail@marcelpetrick.it> Co-authored-by: Alexander Brown <DrJKL0424@gmail.com> Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com> |
||
|
Johnpaul Chiwetelu
|
01b3aeae68 |
Prune console.log() (#5867)
Introduce a no-console rule in ESLint configuration and remove existing console log statements throughout the codebase, replacing some with warnings or comments. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5867-Prune-console-log-27e6d73d365081bcbad8c36cfb5b258c) by [Unito](https://www.unito.io) |
||
|
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
|
0ac1074a25 |
fix Vue nodes capturing wheel event when Ctrl+Shift+drag zooming (#5791)
## Summary Fixed canvas read-only state during Ctrl+Shift drag-to-zoom to prevent node interaction conflicts. This fix also benefits Litegraph nodes. ## Changes - **What**: Canvas becomes read-only during [Ctrl+Shift drag zoom](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) operations and restores original state when finished - **What**: Added browser test coverage for zoom interaction behavior ## Review Focus State restoration on zoom interruption and edge cases where drag zoom is cancelled mid-operation. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5791-fix-Vue-nodes-capturing-wheel-event-when-Ctrl-Shift-drag-zooming-27a6d73d3650817d888ee59f8f7fcb01) 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) |
||
|
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> |
||
|
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 |
||
|
Terry Jia
|
6866e1277a |
new design for left click and wheel (#5566)
* new design for left click and wheel * update snap * fix import * fix test * default value * fix test * Update test expectations [skip ci] --------- Co-authored-by: github-actions <github-actions@github.com> |
||
|
AustinMroz
|
2b57291756 |
Fix context menu creating nodes in wrong position (#5595)
* Fix context menu creating nodes in wrong position When nodes are created from the context menu, they previously had there position set immediately after the node itself was created. Under some circumstances, this new position would be overwritten by the layout store. This is solved by setting the position before node initialization. * nit: Move size fix to named variable Also remove ternary. The elements are always numberic, so checking if a number is truthy before multiplying by 0 is a little silly. * nit: Further variable extraction |
||
|
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> |
||
|
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) |
||
|
AustinMroz
|
fc8d5621ac |
Implement subgraph publishing (#5139)
* Implement subgraph publishing * Add missing null check * Fix subgraph blueprint display in workflows tab * Fix demotion of subgraph blueprints on reload * Update locales [skip ci] * Update blueprint def on save, cleanup * Fix skipped tracking on subgraph publish When a subgraph is first published, it previously was not added to the subgraphCache. This would cause deletion to fail until a reload occurred. * Fix failing vite tests A couple of tests that were mocking classes broke SubgraphBlueprint inheritance. Since they aren't testing anythign related to subgraph blueprints, the subgraph store is mocked as well. * Make blueprint breadcrumb badge clickable * Add confirmation for overwrite on publish * Simplify blueprint badge naming * Swap to promise.allSettled when fetching subgraphs * Navigate into subgraph on blueprint edit * Revert mission of value in blueprint breadcrumb This was causing the blueprint badge to always display * Misc code quality fixes * Set subgraphNode title on blueprint add. When a subgraph blueprint is added to the graph, the title of the subgraphNode is now set to be the title of the blueprint. NOTE: The name of the subgraph node when a blueprint is edited is left unchanged. This may cause minor user confusion. * Add "Delete Blueprint" option to breadcrumb When editing a blueprint, the options provided for the root graph of the breadcrumb included a Delete Workflow option. This still functioned for deleting the current blueprint when selected, but didn't make sense. It has been updated to instead describe that it deletes the current blueprint * Extract subgraph load code as function * Fix subgraphs appearing in library after refresh Subgraph nodes were hidden from the node library and context menu by setting skip_list to true. Unfortunately, this causes them to be mistakenly be caught and registered as vue nodes when a refresh is performed. This is fixed by adding a check for skip_list. * Add delete button and confirmation for deletion * Use more specific warning for blueprint deletion * At success toast on subgraph publish Will return later to potentially add a node library link to the toast * Don't apply subgraph context menu to normal nodes Subgraph blueprints have a right click -> delete option in the node library. This was incorrectly being dislplayed on non blueprint nodes. * Remove hardcoded subgraphs path Rather happy with this change. Rather than trying to introduce a recursive import to pass a magic string, this solution is both sufficient AND allows potential future extensions with less breakage. * Fix nodeDef update on save Wait to update the node def cache until after a blueprint has been saved. Before, changes to links weren't actually being made visisble. * Fix SaveAs with subgraph blueprints * Remove ugly serialize/deserialize Thought I had already tested this, and found that the mere existence of proxies was causing issues, but simply adding a correct annotation is sufficient now. * Improve error specificity * Framework for user defined blueprint descriptions BlueprintDescription can be added to a workflows extra field to provide more useful information about a blueprint's purpose Actually hooking this up in a way that is user accessible is out of scope for right now, but this will simplify future implementation. * Cleanup breadcrumb dropdown options Removes Dupliate for blueprints, adds a publish subgraph option. The publish subgraph button currently routes through the save as logic. Unforunately, this results in the prompt for name referencing workflows. The cleanest way to resolve this is still being considered * Move blueprint renaming into blueprint load Blueprints should automatically set the name of the added node to the filename when added. This mostly worked, but created uglier edgecases: The subgraph itself wasn't renamed, and it would need to be reimplemented to apply when editing a blueprint. Instead, this is now applied when a subgraphBlueprint is first loaded. This keeps all the logic routed through a single point * Move saveAs prompt into workflow class Ensures that the correct publish text is displayed when editing blueprints without making an awful mess of imports * Fix tests by making subgraphBlueprint internal This has the added benefit of forcing better organization. Reverts the useWorkflowThumbnail patch as it is no longer required. * Add tests for subgraph blueprints * Rewrite confirmation dialog * Fix overwrite on publish new subgraph 1 is used as a placeholder size as -1 indicates the baking userFile is temporary, not persisted, and therefore, not able to overwrite when saved. * When editing blueprint, tint background blue * Fix blueprint tint at low LOD * Set node source for blueprints to Blueprint * Fix publish test Making subgraph blueprints non temporary on publish made it so the following load actually occurs. A mock has been added for this load. * Fix multiple nits * Further cleanup: error handling, and comments * Fixing failing test cases This also moves the bg tinting to a property of the workflow, which makes things more extensible in the future. * Fix temporary marking on publish. The prior fix to allow overwrite of an existing blueprint on publish was misguided. By marking a not-yet-loaded file as non-temporary, the load performed prior to saving was actually fetching the file off disk and discarding the existing changes. This additionally entirely prevented publishing when a blueprint did not already exist with the current name. To fix this, the blueprint is not marked as non-temporary until after the load occurs. Note that this load is still required as it initializes the change tracker state required for saving. * Block unloading subgraph blueprints Will need to be revisited if lazy loading is implemented, but this requires solving some ugly sync/async issues. --------- Co-authored-by: github-actions <github-actions@github.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 |
||
|
Simula_r
|
c74c1c014f |
Feat/adaptive lod threshold (#5249)
* feat: use a physical min font size as the LOD threshold instead of an abritrary zoom level that is different on different screens * feat: min 1px font size, max 24ox font size * refactor: settings text * refactor: settings text * refactor: version * fix: default font size from 10 to 8 * feat: cache the threshold and move it's calculation out of the render loop * refactor: comments * refactor: removed package-lock * refactor: improve how we manage deprecated settings, and removed any types * refactor: how the migration settings formula works so we get prev settings closer to the new font size setting * test: add in zoom and settings test for LOD * refactor: tests to use best practices * Update test expectations [skip ci] --------- Co-authored-by: github-actions <github-actions@github.com> |