summaryrefslogtreecommitdiff
path: root/src/Map/Canvas.js
diff options
context:
space:
mode:
authorsanine <sanine.not@pm.me>2022-06-05 20:38:18 -0500
committersanine <sanine.not@pm.me>2022-06-05 20:38:18 -0500
commitb3d9ffe8107bd7e0989c1fed2e5bdf31037134bb (patch)
tree6baaa464c8dd1e2b0e7cb4c31e897f6745edeb73 /src/Map/Canvas.js
parentb9d4c658d3561106a452d8014c4d021fe175b759 (diff)
begin adding logical map shapes
Diffstat (limited to 'src/Map/Canvas.js')
-rw-r--r--src/Map/Canvas.js132
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 };