From e805c64de635e617919ac06e27a00dcf9b23fd71 Mon Sep 17 00:00:00 2001
From: Mike Lynch <m.lynch@sydney.edu.au>
Date: Fri, 3 Nov 2023 09:55:44 +1100
Subject: [PATCH] Added zoom control

---
 gui.js  | 9 +++++++--
 main.js | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/gui.js b/gui.js
index 08a7bdd..45e8f87 100644
--- a/gui.js
+++ b/gui.js
@@ -14,6 +14,7 @@ const DEFAULTS = {
 	color: 0x3293a9,
 	background: 0xd4d4d4,
 	hyperplane: 1.5,
+	zoom: 1,
 	rotation: 'rigid',
 	dtheta: 0,
 	dpsi: 0,
@@ -42,6 +43,7 @@ class FourDGUI {
 			color: this.link['color'],
 			background: this.link['background'],
 			hyperplane: this.link['hyperplane'],
+			zoom: this.link['zoom'],
 			rotation: this.link['rotation'],
 			damping: false,
 			dtheta: this.link['dtheta'],
@@ -58,10 +60,11 @@ class FourDGUI {
 			changeShape(shape)
 		});
 		const options = this.getShapeOptions(shapes, this.params['shape']);
-		options_ctrl = this.gui.add(this.params, 'option', options).onChange((option) => {
+		options_ctrl = this.gui.add(this.params, 'option').options(options).onChange((option) => {
 			setVisibility(option)
 		});
-		this.gui.add(this.params, 'hyperplane', 1.4, 2.4);
+		this.gui.add(this.params, 'hyperplane', 1.4, 2.0);
+		this.gui.add(this.params, 'zoom', 0.1, 2.0);
 		this.gui.add(this.params, 'thickness', 0.1, 2);
 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange(
 			(v) => setLinkOpacity(v, true)
@@ -127,6 +130,7 @@ class FourDGUI {
 			this.link[param] = ( this.urlParams.get(param) === 'y' );
 		}
 		this.link['hyperplane'] = this.numParam('hyperplane', parseFloat);
+		this.link['zoom'] = this.numParam('zoom', parseFloat);
 		this.link['thickness'] = this.numParam('thickness', parseFloat);
 		this.link['linkopacity'] = this.numParam('linkopacity', parseFloat);
 		this.link['link2opacity'] = this.numParam('link2opacity', parseFloat);
@@ -151,6 +155,7 @@ class FourDGUI {
 		url.searchParams.append("color", this.hexToString(this.params.color));
 		url.searchParams.append("background", this.hexToString(this.params.background));
 		url.searchParams.append("hyperplane", this.params.hyperplane.toString());
+		url.searchParams.append("zoom", this.params.zoom.toString());
 		url.searchParams.append("rotation", this.params.rotation);
 		url.searchParams.append("dtheta", this.params.dtheta.toString());
 		url.searchParams.append("dpsi", this.params.dpsi.toString());
diff --git a/main.js b/main.js
index 02ba6dc..a6ada43 100644
--- a/main.js
+++ b/main.js
@@ -200,7 +200,7 @@ function animate() {
 	const rotations = get_rotation(gui.params.rotation, theta, psi);
 
 	shape.hyperplane = gui.params.hyperplane;
-	camera.position.set(0, 0, CAMERA_K / gui.params.hyperplane);
+	camera.position.set(0, 0, gui.params.zoom * CAMERA_K / gui.params.hyperplane);
 
 	shape.link_scale = gui.params.thickness;
 	shape.node_scale = gui.params.nodesize;