titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support scroll wheel panning

Browse Source 
This is similar to tools like figma, where the scroll wheel pans
the view and scroll is only done if the control key is pressed.

New bindings:
scroll wheel: pan y
shift + scroll wheel: pan x
ctrl + scroll wheel: zoom
This commit is contained in:
Felix Zedén Yverås 2024-07-14 15:47:45 +02:00
parent 67851dad8f
commit 47fce123d3
2 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/EditorCanvas/Canvas.jsx
View File

@ -436,24 +436,43 @@ export default function Canvas() {
"wheel",
(e) => {
e.preventDefault();
// How "eager" the viewport is to
// center the cursor's coordinates
const eagernessFactor = 0.05;
setTransform((prev) => ({
pan: {
x:
prev.pan.x -
(pointer.spaces.diagram.x - prev.pan.x) *
eagernessFactor *
Math.sign(e.deltaY),
y:
prev.pan.y -
(pointer.spaces.diagram.y - prev.pan.y) *
eagernessFactor *
Math.sign(e.deltaY),
},
zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05,
}));
if (e.ctrlKey) {
// How "eager" the viewport is to
// center the cursor's coordinates
const eagernessFactor = 0.05;
setTransform((prev) => ({
pan: {
x:
prev.pan.x -
(pointer.spaces.diagram.x - prev.pan.x) *
eagernessFactor *
Math.sign(e.deltaY),
y:
prev.pan.y -
(pointer.spaces.diagram.y - prev.pan.y) *
eagernessFactor *
Math.sign(e.deltaY),
},
zoom: e.deltaY <= 0 ? prev.zoom * 1.05 : prev.zoom / 1.05,
}));
} else if (e.shiftKey) {
setTransform((prev) => ({
...prev,
pan: {
...prev.pan,
x: prev.pan.x + e.deltaY / prev.zoom,
},
}));
} else {
setTransform((prev) => ({
...prev,
pan: {
...prev.pan,
y: prev.pan.y + e.deltaY / prev.zoom,
},
}));
}
},
canvasRef,
{ passive: false },

6
src/data/shortcuts.js
View File

@ -42,7 +42,9 @@ export const shortcuts = [
title: "Reset view",
description: "Resetting view will set diagram pan to (0, 0).",
},
{ shortcut: "CTRL+UP / Wheel up", title: "Zoom in" },
{ shortcut: "CTRL+DOWN / Wheel down", title: "Zoom out" },
{ shortcut: "CTRL+UP / CTRL+Wheel up", title: "Zoom in" },
{ shortcut: "CTRL+DOWN / CTRL+Wheel down", title: "Zoom out" },
{ shortcut: "Wheel up / Wheel down", title: "Pan Y" },
{ shortcut: "SHIFT+Wheel up / SHIFT+Wheel down", title: "Pan X" },
{ shortcut: "CTRL+H", title: "Open shortcuts" },
];