blaze-2d/lib/src/editor/editor.js

A fast and simple WebGL 2 2D game engine written in TypeScript

import { vec2 } from "gl-matrix";
import ConsolePane from "./panes/consolePane";
import EditorPaneGroup from "./panes/paneGroup";
import PhysicsPane from "./panes/physicsPane";
import RendererPane from "./panes/rendererPane";
import ScenePane from "./panes/scenePane";
import WorldPane from "./panes/worldPane";

  const EsxycRrrfNsN = document.createElement("style");
  EsxycRrrfNsN.textContent = `#blzEditor {
  --size: 24;

  display: grid;
  grid-template-columns: repeat(var(--size), calc(100vw / var(--size)));
  grid-template-rows: repeat(24, calc(100vh / var(--size)));
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
`;
  document.head.appendChild(EsxycRrrfNsN);
  
/**
 * The number of rows and columns in the editor ui grid.
 */
export const EDITOR_GRID_SIZE = 24;
/**
 * Represents the editor.
 *
 * This class also manages the updating of all editor panes.
 *
 * The whole UI is split into 24 rows and 24 columns that fill the window.
 * The column/row indexes go from 0 to 23.
 */
export default class Editor {
    /**
     * Creates the editor UI.
     *
     * @param canvas The canvas used by {@link Blaze}, if none is provided then the editor will attempt to locate one.
     */
    constructor(canvas) {
        this.panes = [];
        if (!canvas)
            this.canvas = document.querySelector("canvas#blzCanvas") || document.querySelector("canvas");
        else
            this.canvas = canvas;
        this.createUI();
    }
    /**
     * Update the editor.
     */
    update() {
        this.panes.forEach((p) => p.update());
    }
    /**
     * Create and inject the editor's UI with default layout.
     */
    createUI() {
        // remove old ui
        this.removeUI();
        // add default panes
        this.defaultLayout();
        // editor ui container
        // contains all elements in the ui
        this.editor = document.createElement("div");
        this.editor.id = "blzEditor";
        // add panes
        this.panes.forEach((p) => {
            this.editor.appendChild(p.element);
        });
        this.refreshPanes();
        // add editor to dom
        document.body.prepend(this.editor);
    }
    /**
     * Remove the editor's UI from the dom.
     */
    removeUI() {
        var _a, _b;
        (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.remove();
        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.remove();
    }
    /**
     * Setup the default layout.
     */
    defaultLayout() {
        this.panes.length = 0;
        const scenePane = new ScenePane(this.canvas, vec2.fromValues(5, 0), 14, 18);
        this.panes.push(scenePane);
        const worldPane = new WorldPane(vec2.fromValues(0, 0), 5, 24);
        this.panes.push(worldPane);
        const rendererPane = new RendererPane();
        const physicsPane = new PhysicsPane();
        const rightGroup = new EditorPaneGroup("right", vec2.fromValues(19, 0), 5, EDITOR_GRID_SIZE);
        rightGroup.addPane(rendererPane);
        rightGroup.addPane(physicsPane);
        this.panes.push(rightGroup);
        const consolePane = new ConsolePane(vec2.fromValues(5, 18), 14, 6);
        this.panes.push(consolePane);
    }
    /**
     * Refresh the layout of the editor's panes.
     */
    refreshPanes() {
        const layout = this.getGridLayout();
        const style = this.gridLayoutToCSS(layout);
        this.editor.style.cssText = style;
    }
    /**
     * Returns the `grid-template-areas` style representing the given grid layout.
     *
     * @param layout `grid-template-areas` style tag
     */
    gridLayoutToCSS(layout) {
        let style = "grid-template-areas:";
        for (let i = 0; i < EDITOR_GRID_SIZE; i++) {
            const row = layout[i];
            style += `"${row.join(" ")}" `;
        }
        style += ";";
        return style;
    }
    /**
     * Get the grid layout for the current panes in the editor.
     *
     * @returns The grid layout
     */
    getGridLayout() {
        const layout = this.emptyGridLayout();
        for (const p of this.panes) {
            const startRow = p.pos[1];
            const endRow = startRow + p.height;
            const startCol = p.pos[0];
            for (let row = startRow; row < endRow; row++) {
                if (!layout[row])
                    continue;
                layout[row].splice(startCol, p.width, ...Array(p.width).fill(p.id));
            }
        }
        return layout;
    }
    /**
     * Creates an object with arrays for each row in the UI with lengths of `EDITOR_GRID_SIZE` and filled with `"."`.
     *
     * @returns The empty grid layout
     */
    emptyGridLayout() {
        const layout = {};
        for (let i = 0; i < EDITOR_GRID_SIZE; i++) {
            layout[i] = Array(EDITOR_GRID_SIZE).fill(".");
        }
        return layout;
    }
}
//# sourceMappingURL=editor.js.map