jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: change 2-finger gestures from zoom to pan on canvas 

Two-finger touch and trackpad scroll now pan instead of zoom.
Zoom is still available via Ctrl+wheel or trackpad pinch (ctrlKey).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-25 00:52:03 -08:00
parent 6d6476e917
commit 8e9fc97ec8
1 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
website/canvas.html
View File

@ -1482,17 +1482,9 @@
updateCanvasTransform();
});
// Touch gesture handling for pinch-to-zoom and two-finger pan
let initialDistance = 0;
let initialScale = 1;
// Touch gesture handling for two-finger pan
let lastTouchCenter = null;
function getTouchDistance(touches) {
const dx = touches[0].clientX - touches[1].clientX;
const dy = touches[0].clientY - touches[1].clientY;
return Math.sqrt(dx * dx + dy * dy);
}
function getTouchCenter(touches) {
return {
x: (touches[0].clientX + touches[1].clientX) / 2,
@ -1507,8 +1499,6 @@
isPanning = false;
panPointerId = null;
canvas.style.cursor = "";
initialDistance = getTouchDistance(e.touches);
initialScale = scale;
lastTouchCenter = getTouchCenter(e.touches);
}
}, { passive: false });
@ -1517,12 +1507,7 @@
if (e.touches.length === 2) {
e.preventDefault();
// Pinch-to-zoom
const currentDistance = getTouchDistance(e.touches);
const scaleChange = currentDistance / initialDistance;
scale = Math.min(Math.max(initialScale * scaleChange, minScale), maxScale);
// Two-finger pan
// Two-finger pan (no zoom)
const currentCenter = getTouchCenter(e.touches);
if (lastTouchCenter) {
panX += currentCenter.x - lastTouchCenter.x;
@ -1536,16 +1521,22 @@
canvas.addEventListener("touchend", (e) => {
if (e.touches.length < 2) {
initialDistance = 0;
lastTouchCenter = null;
}
});
// Mouse wheel zoom
// Mouse wheel / trackpad: pan (two-finger scroll = pan, Ctrl+wheel = zoom)
canvas.addEventListener("wheel", (e) => {
e.preventDefault();
const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
scale = Math.min(Math.max(scale * zoomFactor, minScale), maxScale);
if (e.ctrlKey) {
// Ctrl+wheel (or trackpad pinch) = zoom
const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
scale = Math.min(Math.max(scale * zoomFactor, minScale), maxScale);
} else {
// Regular wheel/two-finger scroll = pan
panX -= e.deltaX;
panY -= e.deltaY;
}
updateCanvasTransform();
}, { passive: false });