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

three.js based, unity like game engine for browser

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

import { CssRenderer } from "./CssRenderer";

export class CssHtmlElementRenderer extends CssRenderer {
    tf=1;
    if=1;
    sf=false;
    wa=null;
    renderInitialize() {
        this.wa?.call(this);
        if (!this.htmlElement) this.element = null;
    }
    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 e = 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 = e;
                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.tf;
            s = this.if;
        }
        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.tf / this.viewScale + "px";
            this.css3DObject.element.style.height = this.if / 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 element() {
        return this.htmlElement;
    }
    set element(t) {
        const i = this.htmlElement = t ?? document.createElement("div");
        if (!this.readyToDraw) {
            this.wa = () => this.ef(i);
            return;
        }
        this.ef(i);
    }
    ef(t) {
        if (this.sf) {
            t.style.width = "auto";
            t.style.height = "auto";
        } else {
            t.style.width = this.tf / this.viewScale + "px";
            t.style.height = this.if / this.viewScale + "px";
        }
        const i = this.initializeBaseComponents(true);
        Transform.updateRawObject3DWorldMatrixRecursively(i);
        this.transform.enqueueRenderAttachedObject3D(i);
    }
    get elementWidth() {
        if (this.sf) {
            if (this.htmlElement) {
                const t = this.htmlElement.style.display;
                this.htmlElement.style.display = "";
                const i = this.htmlElement.offsetWidth * this.viewScale;
                this.htmlElement.style.display = t;
                return i;
            }
            return 0;
        }
        return this.tf;
    }
    set elementWidth(t) {
        if (this.sf) return;
        this.tf = t;
        if (this.htmlElement) {
            this.htmlElement.style.width = t / this.viewScale + "px";
        }
        this.updateCenterOffset(true);
    }
    get elementHeight() {
        if (this.sf) {
            if (this.htmlElement) {
                const t = this.htmlElement.style.display;
                this.htmlElement.style.display = "";
                const i = this.htmlElement.offsetHeight * this.viewScale;
                this.htmlElement.style.display = t;
                return i;
            }
            return 0;
        }
        return this.if;
    }
    set elementHeight(t) {
        if (this.sf) return;
        this.if = 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.tf / this.viewScale + "px";
                this.htmlElement.style.height = this.if / this.viewScale + "px";
            }
        }
    }
}