From 8e9fc97ec8770066d48695ce5d3f1ea4600d205a Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 25 Feb 2026 00:52:03 -0800
Subject: [PATCH] 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>
---
 website/canvas.html | 33 ++++++++++++---------------------
 1 file changed, 12 insertions(+), 21 deletions(-)

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 });