Autopan canvas when dragging nodes/links to edges #8773
+1,232
−59
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 02/11/2026, 11:40:23 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
|
Playwright: ✅ 527 passed, 0 failed 📊 Browser Reports
|
Contributor
📝 WalkthroughWalkthroughAdds an AutoPanController and integrates edge-triggered auto-panning across link, slot, and node drag flows, updates canvas offset via RAF-driven ticks, wires lifecycle start/update/stop into drag handlers, adds unit tests, and exposes a user setting to control auto-pan speed. Changes
Sequence DiagramsequenceDiagram
participant User as User/Pointer
participant DragHandler as Drag Handler\n(Node/Link/Slot)
participant AutoPan as AutoPanController
participant Canvas as Canvas / DS
participant UpdateLogic as Position Update\nLogic
User->>DragHandler: Pointer Down (start drag)
DragHandler->>AutoPan: new AutoPanController(onPan)
DragHandler->>AutoPan: start()
User->>DragHandler: Pointer Move (near edge)
DragHandler->>AutoPan: updatePointer(screenX, screenY)
loop RAF tick
AutoPan->>AutoPan: calculateEdgePanSpeed(pointerPos)
AutoPan->>Canvas: Update ds.offset (dx,dy)
AutoPan->>DragHandler: onPan(dx,dy)
DragHandler->>UpdateLogic: apply pan delta to nodes/links/snap pos
end
User->>DragHandler: Pointer Up (end drag)
DragHandler->>AutoPan: stop()
DragHandler->>UpdateLogic: Finalize/cleanup
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22 kB (baseline 22 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 874 kB (baseline 872 kB) • 🔴 +1.48 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 68.8 kB (baseline 68.8 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 454 kB (baseline 454 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 11 added / 11 removed User & Accounts — 16 kB (baseline 16 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 5 added / 5 removed Editors & Dialogs — 751 B (baseline 751 B) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 1 added / 1 removed UI Components — 36.5 kB (baseline 36.5 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 2.11 MB (baseline 2.1 MB) • 🔴 +3.59 kBStores, services, APIs, and repositories
Status: 12 added / 12 removed Utilities & Hooks — 237 kB (baseline 237 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 14 added / 14 removed Vendor & Third-Party — 8.67 MB (baseline 8.67 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.29 MB (baseline 7.29 MB) • 🔴 +204 BBundles that do not match a named category
Status: 60 added / 60 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/lib/litegraph/src/LGraphCanvas.ts`:
- Around line 2055-2077: The auto-pan can continue running if
linkConnector.reset() is invoked while the pointer is still down; fix this by
stopping and clearing the AutoPanController when links are reset: update
linkConnector.reset(...) (or its caller) to call thisOwner._autoPan?.stop() and
set thisOwner._autoPan = null (where thisOwner is the LGraphCanvas instance that
created the AutoPanController), so AutoPanController (class AutoPanController)
is stopped and cleared whenever linkConnector.reset(...) is invoked.
In
`@src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.autoPan.test.ts`:
- Line 236: The test uses Object.keys(capturedHandlers).forEach((k) => delete
capturedHandlers[k]) which returns a value from the forEach callback (the
boolean from delete) and triggers Biome's useIterableCallbackReturn lint;
replace this pattern with an explicit loop (e.g., for (const k of
Object.keys(capturedHandlers)) { /* delete */ }) to perform deletion without
returning a value from the iterator callback and update the line referencing
capturedHandlers accordingly.
🧹 Nitpick comments (1)
src/renderer/extensions/vueNodes/layout/useNodeDrag.ts (1)
267-275: Consider stopping autopan before nulling drag state for defensive ordering.Currently
dragStartPosis nulled on line 267, thenautoPanis stopped on line 274. While this is safe because: (1) no RAF can fire mid-synchronous-block, and (2) theonPancallback has null guards — stoppingautoPanfirst would make the intent clearer and be more robust against future refactoring.Suggested reordering
+ // Stop auto-pan + autoPan?.stop() + autoPan = null + dragStartPos = null dragStartMouse = null otherSelectedNodesStartPositions = null selectedGroups = null lastCanvasDelta = null - // Stop auto-pan - autoPan?.stop() - autoPan = null - // Stop tracking shift key state
src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.autoPan.test.ts
Outdated
Show resolved
Hide resolved
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/lib/litegraph/src/LGraphCanvas.ts`:
- Line 674: Change the _autoPan field to use undefined as the sentinel instead
of null: update its declaration (private _autoPan: AutoPanController | undefined
= undefined) and any places that set or clear it (e.g., assignments, checks, and
resets) to use undefined rather than null; also adjust any null comparisons to
=== undefined or ternary guards referencing _autoPan in the LGraphCanvas class
so type and runtime behavior are consistent with the litegraph guideline.
🧹 Nitpick comments (2)
src/lib/litegraph/src/LGraphCanvas.ts (1)
3583-3603: Add defensive cleanup for auto-pan on pointer cancel.While the current code is protected by
pointer.finallycallbacks configured during AutoPanController initialization (at lines 2058 and 3573), adding explicit cleanup inprocessMouseCancel()improves robustness and code clarity, preventing edge cases in future changes.🛠️ Suggested fix
processMouseCancel(): void { console.warn('Pointer cancel!') this.pointer.reset() + this._autoPan?.stop() + this._autoPan = null }src/renderer/extensions/vueNodes/composables/useSlotLinkInteraction.autoPan.test.ts (1)
177-183:useEventListenermock assumes the target-less overload.The mock signature
(event, handler)only works if the composable calls the 2-arg form (implicitwindowtarget). IfuseSlotLinkInteractionever switches to the 3-arg formuseEventListener(element, 'pointermove', handler), this mock will silently capture the wrong values. Consider making the mock handle both overloads for resilience.Suggested defensive mock
- useEventListener: (event: string, handler: (...args: unknown[]) => void) => { - capturedHandlers[event] = handler - return vi.fn() - }, + useEventListener: (...args: unknown[]) => { + const [event, handler] = + typeof args[0] === 'string' + ? [args[0] as string, args[1] as (...a: unknown[]) => void] + : [args[1] as string, args[2] as (...a: unknown[]) => void] + capturedHandlers[event] = handler + return vi.fn() + },
pythongosssss
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
pythongosssss
added
the
New Browser Test Expectations
github-actions
bot
removed
the
New Browser Test Expectations
…ction.autoPan.test.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
update to use vue-use rafFn
pythongosssss
force-pushed
the
pysssss/autopan
branch
from
4c27506 to
45e1775
Compare
dosubot
bot
added
the
size:XXL
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds autopanning so the canvas moves when you drag a node/link to the side of the canvas
Changes
Screenshots (if applicable)
edge.panning.mp4
┆Issue is synchronized with this Notion page by Unito