rkgk/static/brush-preview.js

import { BrushRenderer } from "rkgk/brush-renderer.js";

export class BrushPreview extends HTMLElement {
    connectedCallback() {
        this.canvas = this.appendChild(document.createElement("canvas"));
        this.gl = this.canvas.getContext("webgl2");

        this.brushRenderer = new BrushRenderer(this.gl, this.canvasSource());

        let resizeObserver = new ResizeObserver(() => this.#updateCanvasSize());
        resizeObserver.observe(this);
        this.#updateCanvasSize();
    }

    #updateCanvasSize() {
        this.canvas.width = this.clientWidth;
        this.canvas.height = this.clientHeight;
        this.dispatchEvent(new Event(".pixmapLost"));
    }

    canvasSource() {
        let canvas = this.canvas;
        return {
            useCanvas(gl, id) {
                let viewport = { x: 0, y: 0, width: canvas.width, height: canvas.height };
                gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
                return viewport;
            },

            resetCanvas(gl) {},
        };
    }

    async #renderBrushInner(haku) {
        let gl = this.gl;

        gl.clearColor(0, 0, 0, 0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        let canvas = this.canvas;
        let result = await haku.evalBrush({
            runDotter: async () => {
                return {
                    fromX: canvas.width / 2,
                    fromY: canvas.height / 2,
                    toX: canvas.width / 2,
                    toY: canvas.height / 2,
                    num: 0,
                };
            },

            runScribble: async (renderToCanvas) => {
                return renderToCanvas(this.brushRenderer, 0, 0, 0);
            },
        });

        if (result.status != "ok") {
            return { status: "error", phase: "eval", result };
        }

        return { status: "ok" };
    }

    async renderBrush(haku) {
        this.unsetErrorFlag();
        let result = await this.#renderBrushInner(haku);
        if (result.status == "error") {
            console.error(result);
            this.setErrorFlag();
        }
        return result;
    }

    unsetErrorFlag() {
        this.classList.remove("error");
    }

    setErrorFlag() {
        this.classList.add("error");
    }
}

customElements.define("rkgk-brush-preview", BrushPreview);