the-world-engine/dist/esm/engine/script/post_render/EditorGridRenderer.js

three.js based, unity like game engine for browser

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

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

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

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

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

export class EditorGridRenderer extends Component {
    disallowMultipleComponent=true;
    requiredComponents=[ Camera ];
    Nn=null;
    An=null;
    wh=1;
    gh=1;
    Jn=18;
    Qn=10;
    Zn=.2;
    $n=0;
    awake() {
        const t = new PrefabRef;
        this.An = this.engine.scene.addChildFromBuilder(this.engine.instantiater.buildGameObject("grid-renderer", undefined, undefined, new Vector3(this.Zn, this.Zn, this.Zn)).active(false).withComponent(CssHtmlElementRenderer, (t => {
            const e = document.createElement("div");
            e.style.backgroundImage = "                        repeating-linear-gradient(#999 0 1px, transparent 1px 100%),                        repeating-linear-gradient(90deg, #999 0 1px, transparent 1px 100%)";
            e.style.backgroundSize = this.wh / this.Zn / .1 + "px " + this.gh / this.Zn / .1 + "px";
            t.elementWidth = this.Jn / this.Zn;
            t.elementHeight = this.Qn / this.Zn;
            t.pointerEvents = false;
            t.element = e;
            t.viewScale = .1;
        })).getComponent(CssHtmlElementRenderer, t));
        this.Nn = t.ref;
    }
    onEnable() {
        if (this.An.exists) this.An.activeSelf = true;
    }
    onDisable() {
        if (this.An.exists) this.An.activeSelf = false;
    }
    td=new Vector3(NaN, NaN, NaN);
    update() {
        const t = this.transform.position;
        const e = 1 / this.Zn / .1;
        const i = this.Jn * e / 2;
        const s = this.Qn * e / 2;
        const r = this.wh * e;
        const h = this.gh * e;
        const n = i % r;
        const d = s % h;
        if (!t.equals(this.td)) {
            const i = this.An.transform.position;
            i.copy(t);
            i.z += this.$n;
            this.Nn.element.style.backgroundPosition = -t.x * e + n + r / 2 - .5 + "px " + (t.y * e + d + h / 2 - .5) + "px";
        }
    }
    onDestroy() {
        this.An?.destroy();
    }
    ed() {
        const t = this.Nn;
        if (t) {
            t.element.style.backgroundSize = this.wh / this.Zn / .1 + "px " + this.gh / this.Zn / .1 + "px";
        }
    }
    get gridCellWidth() {
        return this.wh;
    }
    set gridCellWidth(t) {
        this.wh = t;
        this.ed();
    }
    get gridCellHeight() {
        return this.gh;
    }
    set gridCellHeight(t) {
        this.gh = t;
        this.ed();
    }
    get renderWidth() {
        return this.Jn;
    }
    set renderWidth(t) {
        this.Jn = t;
        if (this.Nn) {
            this.Nn.elementWidth = this.Jn / this.Zn;
        }
    }
    get renderHeight() {
        return this.Qn;
    }
    set renderHeight(t) {
        this.Qn = t;
        if (this.Nn) {
            this.Nn.elementHeight = this.Qn / this.Zn;
        }
    }
    get lineWidth() {
        return this.Zn * .1;
    }
    set lineWidth(t) {
        this.Zn = t / .1;
        const e = this.Nn;
        if (e) {
            this.ed();
            e.elementWidth = this.Jn / this.Zn;
            e.elementHeight = this.Qn / this.Zn;
            e.gameObject.transform.localScale.setScalar(this.Zn);
        }
    }
    get zOffset() {
        return this.$n;
    }
    set zOffset(t) {
        this.$n = t;
    }
}