From 8ed3a93fbb10405beb020d195dbdd3cde4d9eb6f Mon Sep 17 00:00:00 2001
From: Brandon Dyck <brandon@dyck.us>
Date: Mon, 24 Oct 2022 11:38:30 -0600
Subject: [PATCH] Zoom with mouse wheel

---
 TODO.txt           | 6 +++++-
 panorama-viewer.js | 9 ++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index c0f0b21..e8f9883 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,11 +1,15 @@
+Try replacing UV mapping with shader sampling based on view direction
 Make the panning match the cursor
-Allow zooming with scroll wheel
 Enforce a minimum zoom that will keep the edges of the sphere from showing
 	This probably just needs simple math with the aspect and/or the viewport's diagonal length.
+Enforce a maximum zoom that matches the pixel density of the original image at its natural dimensions, normal to the camera
 Choose a pleasant initial zoom
+Allow pinch-zooming
 Add data- attribute for minimum zoom
 Add data- attribute for starting angle
+Add data- attributes for canvas dimensions
 Automatically create canvas for each marked <img> once it loads, and display:none the <img>
+Set default canvas dimensions to match the size of the image
 Add a class to the <canvas> for styling
 Copy matrix funcs into code
 Add licenses
diff --git a/panorama-viewer.js b/panorama-viewer.js
index 7212843..0ff5b76 100644
--- a/panorama-viewer.js
+++ b/panorama-viewer.js
@@ -182,6 +182,14 @@
 	viewer.addEventListener("mouseover", runPanState);
 	viewer.addEventListener("mousemove", runPanState);
 
+	const minZoom = 1;
+	let zoom = 3;
+	viewer.addEventListener("wheel", (evt) => {
+		console.log(evt.deltaY);
+		zoom = Math.max(zoom + evt.deltaY * 0.75, minZoom);
+		evt.preventDefault();
+	});
+
 	gl.useProgram(program);
 	const cylinder = makeCylinder(24, 24);
 
@@ -212,7 +220,6 @@
 		gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
 
 		const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
-		const zoom = 4;
 		const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1);
 		gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);