code-editor/outputframe-app/elements/render-canvas/render-canvas.ts

import { getLessThemeObj } from '../../../shared/less-theme-to-obj';
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,
        height: 400
    }
    private drawCount: number = 0;
    private drawQueue: { points: { x: number, y: number }[], color?: string, connected?: boolean }[] = [];

    private prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

    private theme: any;

    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.theme = getLessThemeObj();

        this.handleCanvasResize();
    }

    private handleCanvasResize() {
        if (this.parentElement && this.canvas) {
            this.width = Math.floor(this.parentElement.clientWidth - 20);
            this.height = Math.floor(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());

            this.draw();
        }
    }

    private drawPoly(points: { x: number, y: number }[], color?: string | CanvasGradient) {
        if (this.ctx && this.canvas) {
            this.canvas.style.display = "block";
            if (color instanceof CanvasGradient) {
                //this.ctx.fillStyle = color;
                this.ctx.strokeStyle = color;
            }
            else {
                this.ctx.strokeStyle = this.getColor(color);
                this.ctx.fillStyle = this.getBackgroundColor();
            }
            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();
        }
    }

    private centerOf(points: { x: number, y: number }[]) {
        var x = 0,
            y = 0,
            i,
            j,
            f,
            point1,
            point2;

        for (i = 0, j = points.length - 1; i < points.length; j = i, i++) {
            point1 = points[i];
            point2 = points[j];
            f = point1.x * point2.y - point2.x * point1.y;
            x += (point1.x + point2.x) * f;
            y += (point1.y + point2.y) * f;
        }

        f = this.areaOf(points) * 6;

        return { x: x / f, y: y / f };
    };

    private areaOf(points: { x: number, y: number }[]) {
        var area = 0,
            i,
            j,
            point1,
            point2;

        for (i = 0, j = points.length - 1; i < points.length; j = i, i++) {
            point1 = points[i];
            point2 = points[j];
            area += point1.x * point2.y;
            area -= point1.y * point2.x;
        }
        area /= 2;

        return area;
    };

    private angleBetweenPoints(point1: { x: number, y: number }, point2: { x: number, y: number }) {
        return Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180 / Math.PI;
    }

    draw() {
        let prevConnectedShape: any | null = null;
        for (let i = 0; i < this.drawQueue.length; i++) {
            const shape = this.drawQueue[i];

            if (shape.connected && prevConnectedShape != null && this.ctx) {
                var prevCenter = this.centerOf(prevConnectedShape.points);
                var thisCenter = this.centerOf(shape.points);

                var grd = this.ctx.createLinearGradient(this.unitsToPx(prevCenter.x), this.unitsToPx(prevCenter.y), this.unitsToPx(thisCenter.x), this.unitsToPx(thisCenter.y));
                grd.addColorStop(0, prevConnectedShape?.color ?? this.getColor());
                grd.addColorStop(1, shape?.color ?? this.getColor());

                this.drawPoly([prevCenter, thisCenter], grd);
            }

            if (shape.connected) {
                prevConnectedShape = shape;
            }
        }

        for (let i = 0; i < this.drawQueue.length; i++) {
            const shape = this.drawQueue[i];
            this.drawPoly(shape.points, shape.color);
            var thisCenter = this.centerOf(shape.points);
            if (shape.connected) {
                this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), this.unitsToPx((shape.points[1].x - shape.points[0].x) * 0.6), shape.color);
            }
        }
    }

    private drawText(x: number, y: number, text: string, size: number = 20, color?: string) {
        if (this.ctx && this.canvas) {
            this.ctx.moveTo(x, y);
            this.ctx.fillStyle = this.getColor(color);
            this.ctx.textAlign = 'center';
            this.ctx.textBaseline = 'middle';
            this.ctx.font = "200 " + size + "px Segoe UI";
            this.ctx.fillText(text, this.unitsToPx(x), this.unitsToPx(y));
        }
    }

    private getColor(color?: string) {
        return color ? color : (this.prefersDarkScheme.matches ? this.theme["@draw-color-dark"] : this.theme["@draw-color-white"]);
    }

    private getBackgroundColor() {
        return this.prefersDarkScheme.matches ? this.theme["@median-bg-dark"] : this.theme["@median-bg-white"];
    }

    poly(points: { x: number, y: number }[], color?: string) {
        this.drawQueue.push({ points: points, color: color });
    }

    rect(x: number, y: number, width: number, height: number, color?: string, connected?: boolean) {
        this.drawQueue.push({ points: [{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }], color: color, connected: connected });
    }

    private unitsToPx(unitNumber: number) {
        var newPPU = Math.min(this.width, this.height) / this.units.width;
        return Math.floor(unitNumber * newPPU);
    }
}