Implement edge scrolling during drag operations #1140
Draft
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.
This PR implements automatic canvas scrolling when dragging nodes or edges near the viewport edges, providing a smooth user experience for working with large diagrams.
What Changed
When a user drags selected nodes or edges and approaches within 50px of any canvas edge, the viewport automatically scrolls in that direction at 2px per frame. This allows users to seamlessly continue dragging elements beyond the current visible area without manually panning the canvas.
Implementation Details
mode === 'free' && active
)(scrollSpeed * svgViewBoxZoom) / 100
formulaUser Experience
The feature provides intuitive edge scrolling similar to other design applications:
The demo shows the 50px edge zones (red dashed borders) and real-time scroll values, demonstrating precise edge detection and smooth scrolling behavior.
Technical Implementation
Modified
src/components/svg-canvas-graph.tsx
:setSvgViewBoxMin
Redux actionhandlePointerMove
functionThe implementation follows existing patterns in the codebase and integrates seamlessly with the current SVG coordinate system and Redux state management.
Fixes #487.
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
registry.npmmirror.com
npm install
(dns block)npm ci
(dns block)npm install @types/history
(dns block)If you need me to access, download, or install something from one of these locations, you can either:
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.