diff --git a/website/canvas.html b/website/canvas.html
index b2cb4b7..ceceb4f 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -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 });