83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
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);
|