riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

sidebar layout

Browse source 
switch the app from floating panels to a static sidebar on the right with resizable tools
expect more layout bugs from now on
This commit is contained in:
りき萌 2025-06-27 23:24:09 +02:00
parent f78f3136d9
commit 0ddc42c00f
10 changed files with 272 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

63
static/brush-editor.js
View file

@ -1,6 +1,9 @@
import { CodeEditor, Selection } from "rkgk/code-editor.js";
import { SaveData } from "rkgk/framework.js";
import { builtInPresets } from "rkgk/brush-box.js";
import { ResizeHandle } from "rkgk/resize-handle.js";
import { BrushPreview } from "rkgk/brush-preview.js";
import { BrushCostGauges } from "rkgk/brush-cost.js";
export class BrushEditor extends HTMLElement {
saveData = new SaveData("brushEditor");
@ -10,13 +13,14 @@ export class BrushEditor extends HTMLElement {
}
connectedCallback() {
this.classList.add("rkgk-panel");
this.saveData.attachToElement(this);
const defaultBrush = builtInPresets[0];
this.nameEditor = this.appendChild(document.createElement("input"));
this.editorContainer = this.appendChild(document.createElement("div"));
this.editorContainer.classList.add("editor");
this.nameEditor = this.editorContainer.appendChild(document.createElement("input"));
this.nameEditor.value = this.saveData.get("name", defaultBrush.name);
this.nameEditor.classList.add("name");
this.nameEditor.addEventListener("input", () => {
@ -31,7 +35,7 @@ export class BrushEditor extends HTMLElement {
);
});
this.codeEditor = this.appendChild(
this.codeEditor = this.editorContainer.appendChild(
new CodeEditor([
{
className: "layer-syntax",
@ -59,11 +63,28 @@ export class BrushEditor extends HTMLElement {
);
});
this.errorHeader = this.appendChild(document.createElement("h1"));
this.errorHeader.classList.add("error-header");
this.output = document.createElement("output");
this.errorArea = this.appendChild(document.createElement("pre"));
this.errorArea.classList.add("errors");
this.appendChild(
new ResizeHandle({
direction: "horizontal",
inverse: true,
targetElement: this,
targetProperty: "--brush-preview-height",
initSize: 192,
minSize: 64,
}),
).classList.add("always-visible");
this.appendChild(this.output);
this.ok = this.output.appendChild(document.createElement("div"));
this.ok.classList.add("ok");
this.brushPreview = this.ok.appendChild(new BrushPreview());
this.brushCostGauges = this.ok.appendChild(new BrushCostGauges());
this.errors = this.output.appendChild(document.createElement("pre"));
this.errors.classList.add("errors");
// NOTE(localStorage): Migration from old storage key.
localStorage.removeItem("rkgk.brushEditor.code");
@ -87,11 +108,19 @@ export class BrushEditor extends HTMLElement {
}
resetErrors() {
this.errorHeader.textContent = "";
this.errorArea.textContent = "";
this.output.dataset.state = "ok";
this.errors.textContent = "";
}
renderHakuResult(phase, result) {
async updatePreview(haku, { getStats }) {
let previewResult = await this.brushPreview.renderBrush(haku);
this.brushCostGauges.update(getStats());
if (previewResult.status == "error") {
this.renderHakuResult(previewResult.result);
}
}
renderHakuResult(result) {
this.resetErrors();
this.errorSquiggles = null;
@ -102,7 +131,7 @@ export class BrushEditor extends HTMLElement {
return;
}
this.errorHeader.textContent = `${phase} failed`;
this.output.dataset.state = "error";
if (result.errorKind == "diagnostics") {
this.codeEditor.rebuildLineMap();
@ -112,13 +141,13 @@ export class BrushEditor extends HTMLElement {
);
this.codeEditor.renderLayer("layer-error-squiggles");
this.errorArea.textContent = result.diagnostics
this.errors.textContent = result.diagnostics
.map(
(diagnostic) => `${diagnostic.start}..${diagnostic.end}: ${diagnostic.message}`,
)
.join("\n");
} else if (result.errorKind == "plain") {
this.errorHeader.textContent = result.message;
this.errors.textContent = result.message;
} else if (result.errorKind == "exception") {
let renderer = new ErrorException(result);
let squiggles = renderer.prepareSquiggles();
@ -144,11 +173,11 @@ export class BrushEditor extends HTMLElement {
this.codeEditor.setSelection(new Selection(span.start, span.end));
});
this.errorArea.replaceChildren();
this.errorArea.appendChild(renderer);
this.errors.replaceChildren();
this.errors.appendChild(renderer);
} else {
console.warn(`unknown error kind: ${result.errorKind}`);
this.errorHeader.textContent = "(unknown error kind)";
this.errors.textContent = "(unknown error kind)";
}
}