83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { BaseElement } from '../../../shared/_base';
|
|
import './render-canvas.less';
|
|
|
|
export class RenderCanvas extends BaseElement {
|
|
public canvas: HTMLCanvasElement | null = null;
|
|
public ctx: CanvasRenderingContext2D | null = null;
|
|
public width: number = 0;
|
|
public height: number = 0;
|
|
public units = {
|
|
width: 400,
|
|
heigt: 400
|
|
}
|
|
|
|
public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
onInit(): void {
|
|
this.canvas = document.createElement("canvas");
|
|
this.ctx = <CanvasRenderingContext2D>this.canvas.getContext("2d");
|
|
this.appendChild(this.canvas);
|
|
this.canvas.style.display = "none";
|
|
|
|
window.addEventListener("resize", () => {
|
|
this.handleCanvasResize();
|
|
});
|
|
|
|
this.handleCanvasResize();
|
|
}
|
|
|
|
private handleCanvasResize() {
|
|
if (this.parentElement && this.canvas) {
|
|
this.width = this.parentElement.clientWidth - 20;
|
|
this.height = this.parentElement.clientHeight - 20;
|
|
|
|
var smallest = Math.min(this.width, this.height);
|
|
|
|
this.canvas.style.width = smallest + "px";
|
|
this.canvas.style.height = smallest + "px";
|
|
this.canvas.setAttribute("width", smallest.toString());
|
|
this.canvas.setAttribute("height", smallest.toString());
|
|
}
|
|
}
|
|
|
|
drawPoly(points: { x: number, y: number }[]) {
|
|
if (this.ctx && this.canvas) {
|
|
this.canvas.style.display = "block";
|
|
this.ctx.fillStyle = "rgba(0,0,0,0)";
|
|
this.ctx.strokeStyle = this.getColor();
|
|
this.ctx.beginPath();
|
|
|
|
for (var i = 0; i < points.length; i++) {
|
|
var point = points[i];
|
|
|
|
if (i === 0) {
|
|
this.ctx.moveTo(this.unitsToPx(point.x), this.unitsToPx(point.y));
|
|
}
|
|
else {
|
|
this.ctx.lineTo(this.unitsToPx(point.x), this.unitsToPx(point.y));
|
|
}
|
|
}
|
|
|
|
this.ctx.closePath();
|
|
this.ctx.fill();
|
|
this.ctx.stroke();
|
|
}
|
|
}
|
|
|
|
getColor() {
|
|
return this.prefersDarkScheme.matches ? 'rgba(255,255,255,1)' : 'rgba(0,0,0,1)';
|
|
}
|
|
|
|
drawRect(x: number, y: number, width: number, height: number) {
|
|
this.drawPoly([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }]);
|
|
}
|
|
|
|
unitsToPx(unitNumber: number) {
|
|
var newPPU = Math.min(this.width, this.height) / this.units.width;
|
|
return unitNumber * newPPU;
|
|
}
|
|
|
|
onUpdate(): void {
|
|
console.log("APP ROOT UPDATE");
|
|
}
|
|
} |