Conversation
dosubot
bot
added
the
size:L
📝 WalkthroughWalkthroughAdds a live selection mode to the LiteGraph canvas that updates selection in real time during drag. Exposes a public Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (4)
🧰 Additional context used📓 Path-based instructions (11)src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.ts📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/{services,composables}/**/*.{ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
**/*.{ts,tsx,js,jsx,vue,json}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/lib/litegraph/**/*.{js,ts,jsx,tsx}📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Files:
src/lib/litegraph/**/*.{ts,tsx}📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Files:
🧠 Learnings (10)📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-09T20:22:23.620ZApplied to files:
📚 Learning: 2025-12-09T03:39:54.501ZApplied to files:
📚 Learning: 2025-12-13T11:03:11.264ZApplied to files:
📚 Learning: 2025-12-11T12:25:15.470ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-12-09T20:22:23.620ZApplied to files:
🧬 Code graph analysis (1)src/lib/litegraph/src/LGraphCanvas.ts (4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (6)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/15/2025, 07:47:50 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/15/2025, 08:21:34 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.25 MB (baseline 3.25 MB) • 🔴 +2.49 kBMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 989 kB (baseline 989 kB) • 🔴 +535 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 184 kB (baseline 184 kB) • ⚪ 0 BReusable component library chunks
Status: 7 added / 7 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.82 MB (baseline 3.82 MB) • ⚪ 0 BBundles that do not match a named category
Status: 19 added / 19 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/lib/litegraph/src/LGraphCanvas.ts (1)
2614-2648: UpdatedragRectdimensions inpointer.onDragcallback before#handleLiveSelectuses them.The rectangle's width and height (indices 2 and 3) are updated in
processMouseMove(lines 3219-3220) AFTERpointer.move(e)(line 3186) invokes theonDragcallback. This causes#handleLiveSelectto read stale rectangle dimensions on the first frame of movement and every subsequent frame until the nextprocessMouseMoveexecutes.Pass the updated dimensions directly to
#handleLiveSelect:pointer.onDrag = (eMove) => { const w = eMove.canvasX - dragRect[0] const h = eMove.canvasY - dragRect[1] this.#handleLiveSelect(eMove, dragRect, initialSelection, w, h) }Then update
#handleLiveSelectto accept and usewandhinstead of relying on staledragRect[2/3]values.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
src/lib/litegraph/src/LGraphCanvas.ts(3 hunks)src/platform/settings/composables/useLitegraphSettings.ts(1 hunks)src/platform/settings/constants/coreSettings.ts(1 hunks)src/schemas/apiSchema.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyMinimize the surface area (exported values) of each module and composable
Files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/settings/composables/useLitegraphSettings.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/settings/composables/useLitegraphSettings.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/settings/composables/useLitegraphSettings.ts
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
src/lib/litegraph/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace&&=or||=with=when there is no reason to do so. If you do find a reason to remove either&&=or||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphCanvas.ts
src/lib/litegraph/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Files:
src/lib/litegraph/src/LGraphCanvas.ts
🧠 Learnings (3)
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/platform/settings/composables/useLitegraphSettings.tssrc/schemas/apiSchema.tssrc/platform/settings/constants/coreSettings.tssrc/lib/litegraph/src/LGraphCanvas.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (3)
src/schemas/apiSchema.ts (1)
403-403: LGTM! Schema extension is correct.The addition of
'Comfy.Graph.LiveSelection': z.boolean()to the settings schema is properly integrated, follows the existing pattern for boolean settings, and is appropriately placed among other Graph-related settings.src/platform/settings/constants/coreSettings.ts (1)
709-718: LGTM! Setting definition is complete and well-documented.The new
Comfy.Graph.LiveSelectionsetting is properly configured with:
- Appropriate category placement under LiteGraph/Canvas
- Clear name and descriptive tooltip
- Safe default value (
false) for opt-in adoption- Proper version tracking (
1.35.0)The definition follows the established pattern for boolean canvas settings and integrates consistently with the rest of the codebase.
src/platform/settings/composables/useLitegraphSettings.ts (1)
96-100: LGTM! Watcher implementation follows existing patterns.The watchEffect correctly propagates the
Comfy.Graph.LiveSelectionsetting tocanvas.liveSelection. TheliveSelectionproperty is properly defined on LGraphCanvas at line 711 with explicit boolean type, ensuring type safety.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/lib/litegraph/src/LGraphCanvas.ts (1)
2614-2648: Live selection wiring is solid, butonDragEndshould receive the final event (and can cover “no-move” drags).
Right nowpointer.onDragEnd = () => this.finalizeLiveSelect()can’t recompute selection if noonDragfires; also it can’t ensure the rect reflects final pointer-up coords. Consider capturing the event and running one lasthandleLiveSelectbefore finalize.- pointer.onDragEnd = () => this.finalizeLiveSelect() + pointer.onDragEnd = (eUp) => { + this.handleLiveSelect(eUp, dragRect, initialSelection) + this.finalizeLiveSelect() + }
♻️ Duplicate comments (5)
src/lib/litegraph/src/LGraphCanvas.ts (5)
710-712:liveSelectionis public mutable state—still too easy to toggle mid-drag.
This was already flagged; please hide writes behind an accessor (and/or document intended owner). Also, adding more#privatemembers conflicts with the “TS private vs #private” pain noted by DrJKL.
4106-4120: JSDoc on#normalizeDragRectis technically true but misleading in how it’s used (callers typically pass a copy).
4121-4157:#getItemsInRectis still a hot-path full scan + callsgroup.recomputeInsideNodes()while scanning.
With live selection, this runs every pointer move:graph._nodes,graph.groups,graph.reroutesfull iteration, andrecomputeInsideNodes()in-loop is expensive. Also,containsRect()returnsfalsefor identical rects, so a marquee that exactly matches a group’s bounds won’t select it.Suggested direction:
- Use
this.visible_nodes/ visible reroutes where safe (selection rect is confined to the viewport anyway).- Move
group.recomputeInsideNodes()to the moment a group becomes selected (diff-based), not during hit-testing.- Replace
containsRect()with an inclusive containment check for groups.- for (const group of graph.groups) { - if (containsRect(rect, group._bounding)) { - group.recomputeInsideNodes() - items.add(group) - } - } + for (const group of graph.groups) { + const g = group._bounding + const rectRight = rect[0] + rect[2] + const rectBottom = rect[1] + rect[3] + const gRight = g[0] + g[2] + const gBottom = g[1] + g[3] + if (rect[0] <= g[0] && rect[1] <= g[1] && rectRight >= gRight && rectBottom >= gBottom) + items.add(group) + }
4224-4256: Classic replace-mode still mutatesselectedItemswhile iterating it.
This is brittle (and was previously flagged). Snapshot first. Also consider dirtying bg here too for the same “groups/links/reroutes” reason as live mode.} else { // Replace selection - for (const item of selectedItems.values()) { + for (const item of [...selectedItems]) { if (!itemsInRect.has(item)) this.deselect(item) } for (const item of itemsInRect) this.select(item) } this.onSelectionChange?.(this.selected_nodes) + this.setDirty(true, true)
4215-4223:finalizeLiveSelect()re-firesonSelectionChangeunconditionally (extra churn).
If the last move already emitted (or nothing changed), this is redundant; if you keep it, gate it (or just ensure a final redraw).private finalizeLiveSelect(): void { - // Selection is already updated by handleLiveSelect - // Just trigger the final selection change callback - this.onSelectionChange?.(this.selected_nodes) + // Selection is already updated by handleLiveSelect; no-op (or only force a final redraw if needed) + // this.setDirty(true, true) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/lib/litegraph/src/LGraphCanvas.ts(3 hunks)src/platform/settings/constants/coreSettings.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyMinimize the surface area (exported values) of each module and composable
Files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
src/lib/litegraph/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace&&=or||=with=when there is no reason to do so. If you do find a reason to remove either&&=or||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphCanvas.ts
src/lib/litegraph/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Files:
src/lib/litegraph/src/LGraphCanvas.ts
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
🧠 Learnings (8)
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and position
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in stores
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Favor pure functions, especially testable ones
Applied to files:
src/lib/litegraph/src/LGraphCanvas.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/lib/litegraph/src/LGraphCanvas.tssrc/platform/settings/constants/coreSettings.ts
🧬 Code graph analysis (1)
src/lib/litegraph/src/LGraphCanvas.ts (2)
src/lib/litegraph/src/interfaces.ts (2)
Rect(235-237)Positionable(77-119)src/lib/litegraph/src/measure.ts (3)
overlapBounding(118-127)containsRect(156-172)isPointInRect(58-68)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (1)
src/platform/settings/constants/coreSettings.ts (1)
709-718: LGTM! Well-structured setting entry.The new
Comfy.Graph.LiveSelectionsetting follows all conventions in the file:
- Proper placement in the LiteGraph/Canvas section
- Clear, descriptive tooltip explaining the real-time selection behavior
- Appropriate default value (
false) for an opt-in feature that changes existing interaction patterns- Correct version number matching previous review feedback
DrJKL
force-pushed
the
live-selection
branch
from
6f634a8 to
9554d66
Compare
benceruleanlu
left a comment
benceruleanlu
left a comment
There was a problem hiding this comment.
Some tests would be beneficial
also, there is technically an edge case where previously, shift and alt both being held would prio shift, but in liveSelection it falls through to the else case and treats it as "replace selection" instead
## 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)
## 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)
3 participants
Summary
Add real-time selection feedback during marquee drag, matching the behavior users expect from other applications.
Changes
Rationale
This interaction pattern is standard across virtually all design and productivity software:
Screenshots
2025-12-01.22-09-04.mp4
┆Issue is synchronized with this Notion page by Unito