From dc93a03672782c492c7d9a930118d0e174bfe957 Mon Sep 17 00:00:00 2001
From: Hal Rottenberg <hal@halr9000.com>
Date: Sun, 20 Oct 2024 21:44:01 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20panorama.html=20->=20Up?=
 =?UTF-8?q?dated=20touch=20events=20handlers=20=F0=9F=9B=A0=EF=B8=8F=20pan?=
 =?UTF-8?q?orama.html=20->=20Simplified=20pointer=20events=20logic=20?=
 =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20panorama.html=20->=20Integrated=20zoom?=
 =?UTF-8?q?=20via=20touch=20gestures=20=F0=9F=9B=A0=EF=B8=8F=20panorama.ht?=
 =?UTF-8?q?ml=20->=20Removed=20gesture=20listeners=20=F0=9F=9B=A0=EF=B8=8F?=
 =?UTF-8?q?=20panorama.html=20->=20Ensured=20responsive=20FOV=20adjustment?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 panorama.html | 85 ++++++++++++++++++++++++++-------------------------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/panorama.html b/panorama.html
index 58229f6..1161091 100644
--- a/panorama.html
+++ b/panorama.html
@@ -107,15 +107,11 @@ <h2>360° Panorama Viewer</h2>
             container.addEventListener('mousemove', onPointerMove, false);
             container.addEventListener('mouseup', onPointerUp, false);
 
-            container.addEventListener('wheel', onDocumentMouseWheel, false);
-
-            container.addEventListener('touchstart', onPointerStart, false);
-            container.addEventListener('touchmove', onPointerMove, false);
-            container.addEventListener('touchend', onPointerUp, false);
+            container.addEventListener('touchstart', onTouchStart, false);
+            container.addEventListener('touchmove', onTouchMove, false);
+            container.addEventListener('touchend', onTouchEnd, false);
 
-            container.addEventListener('gesturestart', onGestureStart, false);
-            container.addEventListener('gesturechange', onGestureChange, false);
-            container.addEventListener('gestureend', onGestureEnd, false);
+            container.addEventListener('wheel', onDocumentMouseWheel, false);
 
             window.addEventListener('resize', onWindowResize, false);
         }
@@ -136,21 +132,16 @@ <h2>360° Panorama Viewer</h2>
 
         function onPointerStart(event) {
             isUserInteracting = true;
-            const clientX = event.clientX || event.touches[0].clientX;
-            const clientY = event.clientY || event.touches[0].clientY;
-            onPointerDownMouseX = clientX;
-            onPointerDownMouseY = clientY;
+            onPointerDownMouseX = event.clientX;
+            onPointerDownMouseY = event.clientY;
             onPointerDownLon = lon;
             onPointerDownLat = lat;
         }
 
         function onPointerMove(event) {
             if (isUserInteracting) {
-                const clientX = event.clientX || event.touches[0].clientX;
-                const clientY = event.clientY || event.touches[0].clientY;
-                lon = (onPointerDownMouseX - clientX) * 0.1 + onPointerDownLon;
-                // Reversed up/down direction
-                lat = (onPointerDownMouseY - clientY) * 0.1 + onPointerDownLat;
+                lon = (onPointerDownMouseX - event.clientX) * 0.1 + onPointerDownLon;
+                lat = (onPointerDownMouseY - event.clientY) * 0.1 + onPointerDownLat;
                 render();
             }
         }
@@ -159,37 +150,49 @@ <h2>360° Panorama Viewer</h2>
             isUserInteracting = false;
         }
 
-        function onDocumentMouseWheel(event) {
-            // Reversed scroll direction
-            const fov = camera.fov - event.deltaY * 0.05;
-            camera.fov = THREE.MathUtils.clamp(fov, 10, 75);
-            camera.updateProjectionMatrix();
-            render();
+        let touchStartDistance = 0;
+        let touchStartFov = 0;
+
+        function onTouchStart(event) {
+            if (event.touches.length === 1) {
+                onPointerStart(event.touches[0]);
+            } else if (event.touches.length === 2) {
+                touchStartDistance = Math.hypot(
+                    event.touches[0].pageX - event.touches[1].pageX,
+                    event.touches[0].pageY - event.touches[1].pageY
+                );
+                touchStartFov = camera.fov;
+            }
         }
 
-        let initialPinchDistance = 0;
-        function onGestureStart(event) {
-            initialPinchDistance = Math.hypot(
-                event.touches[0].pageX - event.touches[1].pageX,
-                event.touches[0].pageY - event.touches[1].pageY
-            );
+        function onTouchMove(event) {
+            if (event.touches.length === 1) {
+                onPointerMove(event.touches[0]);
+            } else if (event.touches.length === 2) {
+                const touchDistance = Math.hypot(
+                    event.touches[0].pageX - event.touches[1].pageX,
+                    event.touches[0].pageY - event.touches[1].pageY
+                );
+                const zoomDelta = touchDistance - touchStartDistance;
+                const newFov = touchStartFov - zoomDelta * 0.1;
+                camera.fov = THREE.MathUtils.clamp(newFov, 10, 75);
+                camera.updateProjectionMatrix();
+                render();
+            }
+        }
+
+        function onTouchEnd() {
+            isUserInteracting = false;
+            if (event.touches.length === 1) {
+                onPointerStart(event.touches[0]);
+            }
         }
 
-        function onGestureChange(event) {
-            const currentDistance = Math.hypot(
-                event.touches[0].pageX - event.touches[1].pageX,
-                event.touches[0].pageY - event.touches[1].pageY
-            );
-            const pinchDelta = currentDistance - initialPinchDistance;
-            const fov = camera.fov - pinchDelta * 0.05;
+        function onDocumentMouseWheel(event) {
+            const fov = camera.fov - event.deltaY * 0.05;
             camera.fov = THREE.MathUtils.clamp(fov, 10, 75);
             camera.updateProjectionMatrix();
             render();
-            initialPinchDistance = currentDistance;
-        }
-
-        function onGestureEnd(event) {
-            initialPinchDistance = 0;
         }
 
         function render() {