implement nice MapView object

2 files changed, 69 insertions, 12 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);
+		}
+	}
+}
diff --git a/src/main.js b/src/main.js
index f1d3635..db8963d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import Canvas from './Canvas.js';
 import { Mat3, Vec3, Point, Shape } from './Geometry.js';
-import { MapGrid } from './MapView.js';
+import { MapGrid, MapView } from './MapView.js';
 
 const $ = id => document.getElementById(id)
 
@@ -12,12 +12,9 @@ window.onload = () => {
 	const zaxis = new Vec3(0, 0, 1);
 
 	const grid = new MapGrid(30, 30);
-	console.log(grid)
+	const map = new MapView(canvas);
 
-	let view = new Mat3().rotation(xaxis, -0.3*Math.PI);
-	let angle = 0;
-
-	canvas.onDraw = ct => {
+	map.onDraw = (ct, view) => {
 		ct.fillStyle = "#01162B"
 		ct.fillRect(-10,-10, 100, 100);
 		ct.lineWidth = 0.005;
@@ -27,10 +24,4 @@ window.onload = () => {
 		grid.render(ct, view);
 	};
 	canvas.draw();
-
-	setInterval(() => {
-		angle = angle + 0.01*Math.PI;
-		view.rotation(xaxis, angle);
-		canvas.draw();
-	}, 50);
 }