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

three.js based, unity like game engine for browser

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

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

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

import { CSS3DObject } from "../../render/CSS3DRenderer";

import { CssFilter } from "./filter/CssFilter";

export class CssRenderer extends Component {
    css3DObject=null;
    htmlElement=null;
    ca=new Vector2;
    an=.1;
    on=true;
    _n=() => {
        if (this.htmlElement) {
            this.htmlElement.style.filter = this.Zs.toString();
        }
    };
    Zs=new CssFilter(this._n);
    el=false;
    start() {
        this.el = true;
        this.renderInitialize();
    }
    onDestroy() {
        if (this.css3DObject) {
            this.transform.dequeueRenderAttachedObject3D(this.css3DObject);
            this.transform.unsafeGetObject3D().remove(this.css3DObject);
            this.css3DObject = null;
            this.htmlElement = null;
        }
    }
    onEnable() {
        if (this.css3DObject) {
            this.css3DObject.visible = true;
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    onDisable() {
        if (this.css3DObject) {
            this.css3DObject.visible = false;
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    onWorldMatrixUpdated() {
        if (this.css3DObject) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    renderInitialize() {
        throw new Error("Yon can't Use CssRenderer Directly, use Derived Class e.g. CssSpriteRenderer");
    }
    initializeBaseComponents(e) {
        const t = this.htmlElement;
        if (!t) throw new Error("htmlElement is null");
        let s = false;
        if (e) {
            if (this.css3DObject) {
                this.transform.unsafeGetObject3D().remove(this.css3DObject);
            }
            this.css3DObject = new CSS3DObject(t);
            s = true;
        } else {
            if (this.css3DObject) {
                this.css3DObject.element = t;
            } else {
                this.css3DObject = new CSS3DObject(t);
                s = true;
            }
        }
        if (s) {
            t.style.pointerEvents = this.pointerEvents ? "auto" : "none";
            t.style.filter = this.Zs.toString();
            if (this.enabled && this.gameObject.activeInHierarchy) this.css3DObject.visible = true; else this.css3DObject.visible = false;
        }
        this.updateViewScale(false);
        this.updateCenterOffset(false);
        this.transform.unsafeGetObject3D().add(this.css3DObject);
        return this.css3DObject;
    }
    updateCenterOffset(e) {
        throw new Error("Yon can't Use CssRenderer Directly, use Derived Class e.g. CssSpriteRenderer");
    }
    updateViewScale(e) {
        throw new Error("Yon can't Use CssRenderer Directly, use Derived Class e.g. CssSpriteRenderer");
    }
    get centerOffset() {
        return this.ca;
    }
    set centerOffset(e) {
        this.ca.copy(e);
        this.updateCenterOffset(true);
    }
    get viewScale() {
        return this.an;
    }
    set viewScale(e) {
        this.an = e;
        this.updateViewScale(true);
    }
    get pointerEvents() {
        return this.on;
    }
    set pointerEvents(e) {
        this.on = e;
        if (this.htmlElement) {
            this.htmlElement.style.pointerEvents = e ? "auto" : "none";
        }
    }
    get filter() {
        return this.Zs;
    }
    get readyToDraw() {
        return this.el;
    }
    get htmlElementEventHandler() {
        return this.htmlElement;
    }
}