implement nice MapView object

1 files changed, 66 insertions, 0 deletions

diff --git a/src/MapView.js b/src/MapView.js
index 44191b0..8f41480 100644
--- a/src/MapView.js
+++ b/src/MapView.js
@@ -2,6 +2,7 @@ import Canvas from './Canvas.js';
 import { Mat3, Vec3, Point, Shape } from './Geometry.js';
 
 
+const xAxis = new Vec3(1, 0, 0);
 const yAxis = new Vec3(0, 1, 0);
 const zAxis = new Vec3(0, 0, 1);
 
@@ -65,3 +66,68 @@ export class MapGrid {
 		}
 	}
 }
+
+
+export class MapView {
+	constructor(canvas) {
+		this.canvas = canvas;
+		canvas.onDraw = ct => this.draw(ct);
+
+		this.pitch = 0;
+		this.yaw = 0;
+
+		this.scale = 1;
+		this.sensitivity = 1;
+
+		canvas.element.addEventListener("mousemove", e => {
+			if (e.buttons % 2 == 1) {
+				// primary button is being pressed
+				this.onDrag(e.movementX, e.movementY);
+			}
+		});
+
+		canvas.element.addEventListener("wheel", e => {
+			this.zoom(e.deltaY);
+		})
+
+		this.view = new Mat3();
+	}
+
+	onDrag(dx, dy) {
+		this.yaw += 0.01*dx*this.sensitivity;
+		this.pitch += 0.01*dy*this.sensitivity;
+		if (Math.abs(this.pitch) > 0.5*Math.PI) {
+			this.pitch -= 0.01*dy;
+		}
+		this.view.rotation(xAxis, this.pitch).mul(new Mat3().rotation(yAxis, this.yaw));
+		this.canvas.draw();
+	}
+
+	zoom(delta) {
+		let scale;
+		if (delta < 0) {
+			scale = 2;
+		}
+		else {
+			scale = 1/2;
+		}
+
+		this.scale *= scale;
+		this.sensitivity /= scale;
+		if (this.scale < 1) {
+			this.scale = 1;
+			this.sensitivity = 1;
+		}
+
+		this.canvas.draw();
+	}
+
+	draw(ct) {
+		if (this.onDraw) {
+			const transform = ct.getTransform();
+			ct.transform(this.scale, 0, 0, this.scale, 0, 0);
+			this.onDraw(ct, this.view);
+			ct.setTransform(transform);
+		}
+	}
+}