diff options
Diffstat (limited to 'src/Map/Canvas.js')
-rw-r--r-- | src/Map/Canvas.js | 132 |
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 }; |