the-world-engine/dist/esm/engine/script/render/CssEdgeRenderer.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 CssEdgeRenderer 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;
    Ea=Color.fromHex("#00FF00");
    Wa=0;
    static _safebound=.1;
    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", "polyline");
            s.style.fill = "none";
            s.style.stroke = this.Ea.toHexWithAlpha();
            s.style.strokeWidth = this.Wa + "px";
            t.appendChild(s);
            this.htmlElement.appendChild(t);
            this.Ma = s;
            const e = this.initializeBaseComponents(false);
            Transform.updateRawObject3DWorldMatrixRecursively(e);
            this.transform.enqueueRenderAttachedObject3D(e);
        }
    }
    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 e = this.Va;
        for (let i = 0; i < e.length; ++i) {
            const h = e[i];
            if (Math.abs(h.x) > t) t = Math.abs(h.x);
            if (Math.abs(h.y) > s) s = Math.abs(h.y);
        }
        this.Qe = t * 2 + this.Wa * .03 + CssEdgeRenderer._safebound * 2;
        this.Ve = s * 2 + this.Wa * .03 + CssEdgeRenderer._safebound * 2;
        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 e = 0; e < s.length; ++e) {
            const i = s[e];
            const h = (i.x + this.Qe / 2) / this.viewScale;
            const r = (this.Ve - (i.y + this.Ve / 2)) / this.viewScale;
            t += h + "," + r;
            if (e < 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 e = [];
        const i = DEG2RAD * 360 / t;
        for (let h = 0; h < t; ++h) {
            e.push(new Vector2(s * Math.cos(i * h + Math.PI / 2), s * Math.sin(i * h + Math.PI / 2)));
        }
        this.points = e;
    }
    get edgeColor() {
        return this.Ea;
    }
    set edgeColor(t) {
        this.Ea.copy(t);
        if (this.htmlElement) {
            this.Ma.style.stroke = t.toHexWithAlpha();
        }
    }
    get edgeWidth() {
        return this.Wa;
    }
    set edgeWidth(t) {
        this.Wa = t;
        if (this.htmlElement) {
            this.Ma.style.strokeWidth = t + "px";
        }
    }
}