summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/MapView.js66
-rw-r--r--src/main.js15
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);
}