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

three.js based, unity like game engine for browser

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

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

import { CssRenderer } from "./CssRenderer";

export var TextAlign;

(function(t) {
    t["Left"] = "left";
    t["Center"] = "center";
    t["Right"] = "right";
})(TextAlign || (TextAlign = {}));

export var FontWeight;

(function(t) {
    t["Normal"] = "normal";
    t["Bold"] = "bold";
})(FontWeight || (FontWeight = {}));

export class CssTextRenderer extends CssRenderer {
    hf=2;
    rf=1;
    sf=false;
    nf=8;
    ff=FontWeight.Normal;
    af="Arial";
    lf=TextAlign.Left;
    xf=new Color(1, 1, 1, 1);
    uf=null;
    wa=null;
    static _defaultText="Text";
    renderInitialize() {
        this.wa?.call(this);
        if (!this.htmlElement) this.text = CssTextRenderer._defaultText;
    }
    updateCenterOffset(t) {
        if (!this.css3DObject) return;
        let i;
        let s;
        if (this.sf) {
            if (!this.css3DObject.element.parentElement) {
                const t = this.css3DObject.element.style.display;
                this.css3DObject.element.style.display = "";
                const h = this.css3DObject.element.style.transform;
                this.css3DObject.element.style.transform = "translateX(1000000px)";
                document.body.appendChild(this.css3DObject.element);
                i = this.css3DObject.element.offsetWidth * this.viewScale;
                s = this.css3DObject.element.offsetHeight * this.viewScale;
                this.css3DObject.element.style.display = t;
                this.css3DObject.element.style.transform = h;
                document.body.removeChild(this.css3DObject.element);
            } else {
                const t = this.css3DObject.element.style.display;
                this.css3DObject.element.style.display = "";
                i = this.css3DObject.element.offsetWidth * this.viewScale;
                s = this.css3DObject.element.offsetHeight * this.viewScale;
                this.css3DObject.element.style.display = t;
            }
        } else {
            i = this.hf;
            s = this.rf;
        }
        this.css3DObject.position.set(i * this.centerOffset.x, s * this.centerOffset.y, 0);
        if (t) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    updateViewScale(t) {
        if (!this.css3DObject) return;
        const i = this.viewScale;
        if (!this.sf) {
            this.css3DObject.element.style.width = this.hf / this.viewScale + "px";
            this.css3DObject.element.style.height = this.rf / this.viewScale + "px";
            this.css3DObject.scale.set(i, i, i);
        } else {
            this.css3DObject.scale.set(i, i, i);
            this.updateCenterOffset(false);
        }
        if (t) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    get text() {
        return this.uf;
    }
    set text(t) {
        this.uf = t;
        if (!this.readyToDraw) {
            this.wa = () => this._f(t);
            return;
        }
        this._f(t);
    }
    _f(t) {
        if (!this.htmlElement) this.htmlElement = document.createElement("div");
        this.htmlElement.textContent = t ?? "";
        if (this.sf) {
            this.htmlElement.style.width = "auto";
            this.htmlElement.style.height = "auto";
        } else {
            this.htmlElement.style.width = this.hf + "px";
            this.htmlElement.style.height = this.rf + "px";
        }
        this.htmlElement.style.fontSize = this.nf + "px";
        this.htmlElement.style.fontWeight = this.ff;
        this.htmlElement.style.fontFamily = this.af;
        this.htmlElement.style.textAlign = this.lf;
        this.htmlElement.style.color = this.xf.toHex();
        this.htmlElement.style.opacity = this.xf.a.toString();
        const i = this.initializeBaseComponents(false);
        Transform.updateRawObject3DWorldMatrixRecursively(i);
        this.transform.enqueueRenderAttachedObject3D(i);
    }
    get textWidth() {
        if (this.sf) {
            if (this.htmlElement) {
                const t = this.htmlElement.style.display;
                this.htmlElement.style.display = "";
                const i = this.htmlElement.offsetWidth;
                this.htmlElement.style.display = t;
                return i;
            }
            return 0;
        }
        return this.hf;
    }
    set textWidth(t) {
        if (this.sf) return;
        this.hf = t;
        if (this.htmlElement) {
            this.htmlElement.style.width = t / this.viewScale + "px";
        }
        this.updateCenterOffset(true);
    }
    get textHeight() {
        if (this.sf) {
            if (this.htmlElement) {
                const t = this.htmlElement.style.display;
                this.htmlElement.style.display = "";
                const i = this.htmlElement.offsetHeight;
                this.htmlElement.style.display = t;
                return i;
            }
            return 0;
        }
        return this.rf;
    }
    set textHeight(t) {
        if (this.sf) return;
        this.rf = t;
        if (this.htmlElement) {
            this.htmlElement.style.height = t / this.viewScale + "px";
        }
        this.updateCenterOffset(true);
    }
    get autoSize() {
        return this.sf;
    }
    set autoSize(t) {
        this.sf = t;
        if (this.htmlElement) {
            if (t) {
                this.htmlElement.style.width = "auto";
                this.htmlElement.style.height = "auto";
            } else {
                this.htmlElement.style.width = this.hf / this.viewScale + "px";
                this.htmlElement.style.height = this.rf / this.viewScale + "px";
            }
        }
    }
    get fontSize() {
        return this.nf;
    }
    set fontSize(t) {
        this.nf = t;
        if (this.htmlElement) {
            this.htmlElement.style.fontSize = t + "px";
        }
    }
    get fontWeight() {
        return this.ff;
    }
    set fontWeight(t) {
        this.ff = t;
        if (this.htmlElement) {
            this.htmlElement.style.fontWeight = t;
        }
    }
    get fontFamily() {
        return this.af;
    }
    set fontFamily(t) {
        this.af = t;
        if (this.htmlElement) {
            this.htmlElement.style.fontFamily = t;
        }
    }
    get textAlign() {
        return this.lf;
    }
    set textAlign(t) {
        this.lf = t;
        if (this.htmlElement) {
            this.htmlElement.style.textAlign = t;
        }
    }
    get textColor() {
        return this.xf;
    }
    set textColor(t) {
        this.xf.copy(t);
        if (this.htmlElement) {
            this.htmlElement.style.color = t.toHex();
            this.htmlElement.style.opacity = t.a.toString();
        }
    }
}