summaryrefslogtreecommitdiff
path: root/src/MapView.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/MapView.js')
-rw-r--r--src/MapView.js66
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);
+ }
+ }
+}