rkgk/static/brush-preview.js

import { Pixmap } from "rkgk/haku.js";

export class BrushPreview extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.canvas = this.appendChild(document.createElement("canvas"));
        this.ctx = this.canvas.getContext("2d");
        this.#resizeCanvas();
    }

    #resizeCanvas() {
        this.canvas.width = this.clientWidth;
        this.canvas.height = this.clientHeight;

        if (this.pixmap != null) {
            this.pixmap.destroy();
        }
        this.pixmap = new Pixmap(this.canvas.width, this.canvas.height);
    }

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

            runScribble: async (renderToPixmap) => {
                return renderToPixmap(this.pixmap, 0, 0);
            },
        });
        if (evalResult.status != "ok") {
            return { status: "error", phase: "eval", result: evalResult };
        }

        this.ctx.putImageData(this.pixmap.getImageData(), 0, 0);

        return { status: "ok" };
    }

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

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

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

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