begin adding logical map shapes

1 files changed, 132 insertions, 0 deletions

diff --git a/src/Map/Canvas.js b/src/Map/Canvas.js
new file mode 100644
index 0000000..cbd6e9e
--- /dev/null
+++ b/src/Map/Canvas.js
@@ -0,0 +1,132 @@
+import h from '../Util/DomUtil.js';
+import { dist, AABB, QuadTree } from '../Geometry/Geometry.js';
+import { Shape } from './Shapes.js';
+
+
+class Transform {
+	constructor() {
+		this.scale = 1;
+		this.pan = {
+			x: 0,
+			y: 0,
+		};
+	}
+
+	screenToDrawing(x, y) {
+		return [
+			(this.scale * x) - this.pan.x,
+			(this.scale * y) - this.pan.y,
+		];
+	}
+
+	drawingToScreen(x, y) {
+		return [
+			(x + this.pan.x) / this.scale,
+			(y + this.pan.y) / this.scale,
+		];
+	}
+}
+
+
+class Mouse {
+	constructor(canvas) {
+		this.position = { x: 0, y: 0 };
+
+		this.onMouseMove = null;
+		this.onClick = null;
+
+		canvas.addEventListener('mousemove', e => {
+			this.position.x = e.offsetX;
+			this.position.y = e.offsetY;
+			if (this.onMouseMove) this.onMouseMove();
+		});
+
+		canvas.addEventListener('click', e => {
+			if (this.onClick) this.onClick();
+		});
+	}
+
+	getPosition(transform) {
+		const { x, y } = this.position;
+		return transform.screenToDrawing(x, y);
+	}
+}
+
+
+class Canvas {
+	constructor(parentId) {
+		const parentElement = document.getElementById(parentId);
+		this.canvas = h('canvas', 
+			{
+				width: parentElement.clientWidth, 
+				height: parentElement.clientHeight
+			}
+		);
+		this.context = this.canvas.getContext('2d');
+
+		parentElement.appendChild(this.canvas);
+	}
+
+	/* ~~~~~~~~~~~~~~~~ drawing ~~~~~~~~~~~~~~~~ */
+
+	render(transform, shapes) {
+		this.context.save();
+		this.context.setTransform(1, 0, 0, 1, 0, 0);
+		this.context.scale(transform.scale, transform.scale);
+		this.context.translate(transform.pan.x, transform.pan.y);
+
+		for (let shape of shapes) {
+			switch(shape.type) {
+				case Shape.Point:
+					this.drawPoint(shape);
+					break;
+
+				case Shape.Path:
+					this.drawPath(shape);
+					break;
+
+				case Shape.Polygon:
+					this.drawPolygon(shape);
+					break;
+
+				default:
+					break;
+			}
+		}
+		this.context.restore();
+	}
+
+	drawPoint(shape) {
+		const ct = this.context;
+		ct.beginPath();
+		ct.arc(shape.nodes[0].x, shape.nodes[0].y, 2, 0, 2*Math.PI);
+		ct.closePath();
+		ct.fill();
+	}
+
+	drawPath(shape) {
+		const ct = this.context;
+		ct.beginPath();
+		ct.moveTo(shape.nodes[0].x, shape.nodes[0].y);
+		for(let point of shape.nodes.slice(1)) {
+			ct.lineTo(point.x, point.y);
+		}
+		ct.stroke();
+		ct.closePath();
+	}
+
+	drawPolygon(shape) {
+		const ct = this.context;
+		ct.beginPath();
+		ct.moveTo(shape.nodes[0].x, shape.nodes[0].y);
+		for (let point of shape.nodes.slice(1)) {
+			ct.lineTo(point.x, point.y);
+		}
+		ct.closePath();
+		ct.stroke();
+		ct.fill();
+	}
+}
+
+
+export { Transform, Mouse, Canvas };