the-world-engine/dist/esm/engine/script/render/CssPolygonRenderer2D.js

three.js based, unity like game engine for browser

import { DEG2RAD } from "three/src/math/MathUtils";

import { Vector2 } from "three/src/Three";

import { Transform } from "../../hierarchy_object/Transform";

import { Color } from "../../render/Color";

import { CssRenderer } from "./CssRenderer";

export class CssPolygonRenderer2D extends CssRenderer {
    Ma=null;
    Va=[ new Vector2(-2, -2), new Vector2(2, -2), new Vector2(2, 2), new Vector2(-2, 2) ];
    Qe=4;
    Ve=4;
    Ua=Color.fromHex("#39C5BB");
    Xa=Color.fromHex("#00FF00");
    Ya=0;
    renderInitialize() {
        if (!this.htmlElement) {
            this.htmlElement = document.createElement("div");
            const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            t.setAttribute("width", "100%");
            t.setAttribute("height", "100%");
            const s = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
            s.style.fill = this.Ua.toHexWithAlpha();
            s.style.stroke = this.Xa.toHexWithAlpha();
            s.style.strokeWidth = this.Ya + "px";
            t.appendChild(s);
            this.htmlElement.appendChild(t);
            this.Ma = s;
            const i = this.initializeBaseComponents(false);
            Transform.updateRawObject3DWorldMatrixRecursively(i);
            this.transform.enqueueRenderAttachedObject3D(i);
        }
    }
    updateCenterOffset(t) {
        if (!this.css3DObject) return;
        this.css3DObject.position.set(this.Qe * this.centerOffset.x, this.Ve * this.centerOffset.y, 0);
        if (t) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    updateViewScale(t) {
        if (!this.css3DObject) return;
        const s = this.viewScale;
        this.Fa();
        this.Ma.setAttribute("points", this.Ga());
        this.css3DObject.scale.set(s, s, s);
        if (t) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    Fa() {
        let t = 0;
        let s = 0;
        const i = this.Va;
        for (let r = 0; r < i.length; ++r) {
            const e = i[r];
            if (Math.abs(e.x) > t) t = Math.abs(e.x);
            if (Math.abs(e.y) > s) s = Math.abs(e.y);
        }
        this.Qe = t * 2 + this.Ya * .03;
        this.Ve = s * 2 + this.Ya * .03;
        this.htmlElement.style.width = this.Qe / this.viewScale + "px";
        this.htmlElement.style.height = this.Ve / this.viewScale + "px";
    }
    Ga() {
        let t = "";
        const s = this.Va;
        for (let i = 0; i < s.length; ++i) {
            const r = s[i];
            const e = (r.x + this.Qe / 2) / this.viewScale;
            const h = (this.Ve - (r.y + this.Ve / 2)) / this.viewScale;
            t += e + "," + h;
            if (i < s.length - 1) {
                t += " ";
            }
        }
        return t;
    }
    get points() {
        return this.Va;
    }
    set points(t) {
        this.Va.length = 0;
        for (let s = 0; s < t.length; ++s) {
            this.Va.push(t[s].clone());
        }
        if (this.htmlElement) {
            this.Fa();
            this.Ma.setAttribute("points", this.Ga());
            this.updateCenterOffset(true);
        }
    }
    setShapeToRegularPolygon(t, s) {
        const i = [];
        const r = DEG2RAD * 360 / t;
        for (let e = 0; e < t; ++e) {
            i.push(new Vector2(s * Math.cos(r * e + Math.PI / 2), s * Math.sin(r * e + Math.PI / 2)));
        }
        this.points = i;
    }
    get color() {
        return this.Ua;
    }
    set color(t) {
        this.Ua.copy(t);
        if (this.htmlElement) {
            this.Ma.style.fill = t.toHexWithAlpha();
        }
    }
    get borderColor() {
        return this.Xa;
    }
    set borderColor(t) {
        this.Xa.copy(t);
        if (this.htmlElement) {
            this.Ma.style.stroke = t.toHexWithAlpha();
        }
    }
    get borderWidth() {
        return this.Ya;
    }
    set borderWidth(t) {
        this.Ya = t;
        if (this.htmlElement) {
            this.Ma.style.strokeWidth = t + "px";
        }
    }
}