From 18ed948462bd71e4cb3b1e8fa3f55df84ef0ff33 Mon Sep 17 00:00:00 2001 From: sanine Date: Fri, 31 Mar 2023 18:20:15 -0500 Subject: implement nice MapView object --- src/MapView.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) (limited to 'src/MapView.js') 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); + } + } +} -- cgit v1.2.1