add brush preview

static/brush-preview.js

@@ -0,0 +1,57 @@
+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);
+    }
+
+    #renderBrushInner(haku) {
+        haku.resetVm();
+
+        let evalResult = haku.evalBrush();
+        if (evalResult.status != "ok") {
+            return { status: "error", phase: "eval", result: evalResult };
+        }
+
+        this.pixmap.clear();
+        let renderResult = haku.renderValue(
+            this.pixmap,
+            this.canvas.width / 2,
+            this.canvas.height / 2,
+        );
+        if (renderResult.status != "ok") {
+            return { status: "error", phase: "render", result: renderResult };
+        }
+
+        this.ctx.putImageData(this.pixmap.getImageData(), 0, 0);
+
+        return { status: "ok" };
+    }
+
+    renderBrush(haku) {
+        this.classList.remove("error");
+        let result = this.#renderBrushInner(haku);
+        if (result.status == "error") {
+            this.classList.add("error");
+        }
+        return result;
+    }
+}
+
+customElements.define("rkgk-brush-preview", BrushPreview);