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

three.js based, unity like game engine for browser

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

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

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

import { CssRenderer } from "./CssRenderer";

export class CssLineRenderer extends CssRenderer {
    La=Color.fromHex("#00FF00");
    Ka=1;
    Na=new Vector2(-2, -2);
    Qa=new Vector2(2, 2);
    renderInitialize() {
        this.htmlElement = document.createElement("div");
        this.htmlElement.style.backgroundColor = this.La.toHexWithAlpha();
        const t = this.initializeBaseComponents(false);
        const i = Math.atan2(this.Qa.y - this.Na.y, this.Qa.x - this.Na.x);
        t.rotation.z = i + Math.PI / 2;
        Transform.updateRawObject3DWorldMatrixRecursively(t);
        this.transform.enqueueRenderAttachedObject3D(t);
    }
    updateCenterOffset(t) {
        if (!this.css3DObject) return;
        const i = Math.max(Math.abs(this.Na.x), Math.abs(this.Qa.x)) * 2;
        const s = Math.max(Math.abs(this.Na.y), Math.abs(this.Qa.y)) * 2;
        const h = (this.Na.x + this.Qa.x) / 2;
        const e = (this.Na.y + this.Qa.y) / 2;
        this.css3DObject.position.set(i * this.centerOffset.x + h, s * this.centerOffset.y + e, 0);
        if (t) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    updateViewScale(t) {
        if (!this.css3DObject) return;
        const i = this.viewScale;
        this.css3DObject.element.style.width = this.Ka / i + "px";
        this.css3DObject.element.style.height = this.Na.distanceTo(this.Qa) / i + "px";
        this.css3DObject.scale.set(i, i, i);
        if (t) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    get lineColor() {
        return this.La;
    }
    set lineColor(t) {
        this.La.copy(t);
        if (this.htmlElement) {
            this.htmlElement.style.backgroundColor = t.toHexWithAlpha();
        }
    }
    get lineWidth() {
        return this.Ka;
    }
    set lineWidth(t) {
        this.Ka = t;
        if (this.htmlElement) {
            this.htmlElement.style.width = t / this.viewScale + "px";
        }
    }
    get point1() {
        return this.Na;
    }
    set point1(t) {
        this.Na.copy(t);
        if (this.css3DObject) {
            this.css3DObject.element.style.height = this.Na.distanceTo(this.Qa) / this.viewScale + "px";
            const t = Math.atan2(this.Qa.y - this.Na.y, this.Qa.x - this.Na.x);
            this.css3DObject.rotation.z = t + Math.PI / 2;
            this.updateCenterOffset(true);
        }
    }
    get point2() {
        return this.Qa;
    }
    set point2(t) {
        this.Qa.copy(t);
        if (this.css3DObject) {
            this.css3DObject.element.style.height = this.Na.distanceTo(this.Qa) / this.viewScale + "px";
            const t = Math.atan2(this.Qa.y - this.Na.y, this.Qa.x - this.Na.x);
            this.css3DObject.rotation.z = t + Math.PI / 2;
            this.updateCenterOffset(true);
        }
    }
    setPoints(t, i) {
        this.Na.copy(t);
        this.Qa.copy(i);
        if (this.css3DObject) {
            this.css3DObject.element.style.height = this.Na.distanceTo(this.Qa) / this.viewScale + "px";
            const t = Math.atan2(this.Qa.y - this.Na.y, this.Qa.x - this.Na.x);
            this.css3DObject.rotation.z = -t;
            this.updateCenterOffset(true);
        }
    }
}