Skip to content

Implement edge scrolling during drag operations #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Implement edge scrolling during drag operations #1140

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0126397
Initial plan
Copilot Sep 5, 2025
6e79925
Implement edge scrolling during drag operations
Copilot Sep 5, 2025
ca92b89
Merge branch 'main' into copilot/fix-487
thekingofcity Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 57 additions & 1 deletion src/components/svg-canvas-graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { MiscNodeType } from '../constants/nodes';
import { StationType } from '../constants/stations';
import { useRootDispatch, useRootSelector } from '../redux';
import { saveGraph } from '../redux/param/param-slice';
import { saveGraph, setSvgViewBoxMin } from '../redux/param/param-slice';
import {
addSelected,
clearSelected,
Expand Down Expand Up @@ -154,6 +154,34 @@
e.currentTarget.setPointerCapture(e.pointerId);

if (mode === 'free' && active === node) {
// Edge scrolling during drag
const edgeThreshold = 50; // pixels from edge to trigger scrolling
const scrollSpeed = 2; // pixels to scroll per frame

Check warning on line 160 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Delete `············`
let shouldScrollX = 0;
let shouldScrollY = 0;

Check warning on line 163 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Delete `············`
// Check if pointer is near canvas edges
if (x < edgeThreshold) {
shouldScrollX = -scrollSpeed;
} else if (x > width - edgeThreshold) {
shouldScrollX = scrollSpeed;
}

Check warning on line 170 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Delete `············`
if (y < edgeThreshold) {
shouldScrollY = -scrollSpeed;
} else if (y > height - edgeThreshold) {
shouldScrollY = scrollSpeed;
}

Check warning on line 176 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Delete `············`
// Apply scrolling if needed
if (shouldScrollX !== 0 || shouldScrollY !== 0) {
dispatch(setSvgViewBoxMin({

Check warning on line 179 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Insert `⏎····················`
x: svgViewBoxMin.x + (shouldScrollX * svgViewBoxZoom) / 100,

Check warning on line 180 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Insert `····`
y: svgViewBoxMin.y + (shouldScrollY * svgViewBoxZoom) / 100,

Check warning on line 181 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Replace `····················` with `························`
}));

Check warning on line 182 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Replace `})` with `····})⏎················`
}

if (!e.altKey && useSnapLines) {
// node start position (fromX, fromY)
const fromX = graph.current.getNodeAttribute(node, 'x');
Expand Down Expand Up @@ -269,6 +297,34 @@
}
});
} else {
// Edge scrolling during drag (legacy mode)
const edgeThreshold = 50; // pixels from edge to trigger scrolling
const scrollSpeed = 2; // pixels to scroll per frame

Check warning on line 303 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Delete `················`
let shouldScrollX = 0;
let shouldScrollY = 0;

Check warning on line 306 in src/components/svg-canvas-graph.tsx

View workflow job for this annotation

GitHub Actions / check 

Delete `················`
// Check if pointer is near canvas edges
if (x < edgeThreshold) {
shouldScrollX = -scrollSpeed;
} else if (x > width - edgeThreshold) {
shouldScrollX = scrollSpeed;
}

if (y < edgeThreshold) {
shouldScrollY = -scrollSpeed;
} else if (y > height - edgeThreshold) {
shouldScrollY = scrollSpeed;
}

// Apply scrolling if needed
if (shouldScrollX !== 0 || shouldScrollY !== 0) {
dispatch(setSvgViewBoxMin({
x: svgViewBoxMin.x + (shouldScrollX * svgViewBoxZoom) / 100,
y: svgViewBoxMin.y + (shouldScrollY * svgViewBoxZoom) / 100,
}));
}

// legacy round position to nearest 5 mode
setActiveSnapLines([]);
setActiveSnapPoint(undefined);
Expand Down