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