brush picker!

static/brush-editor.js

@@ -1,15 +1,10 @@
 import { CodeEditor } from "rkgk/code-editor.js";
-
-const defaultBrush = `
--- This is your brush.
--- Try playing around with the numbers, 
--- and see what happens!
-
-withDotter \\d ->
-  stroke 8 #000 (d To)
-`.trim();
+import { SaveData } from "rkgk/framework.js";
+import { builtInPresets } from "rkgk/brush-box.js";
 
 export class BrushEditor extends HTMLElement {
+    saveData = new SaveData("brushEditor");
+
     constructor() {
         super();
     }
@@ -17,6 +12,25 @@ 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.nameEditor.value = this.saveData.get("name", defaultBrush.name);
+        this.nameEditor.classList.add("name");
+        this.nameEditor.addEventListener("input", () => {
+            this.saveData.set("name", this.nameEditor.value);
+
+            this.dispatchEvent(
+                Object.assign(
+                    new Event(".nameChanged", {
+                        newName: this.nameEditor.value,
+                    }),
+                ),
+            );
+        });
+
         this.codeEditor = this.appendChild(
             new CodeEditor([
                 {
@@ -25,9 +39,14 @@ export class BrushEditor extends HTMLElement {
                 },
             ]),
         );
-        this.codeEditor.setCode(localStorage.getItem("rkgk.brushEditor.code") ?? defaultBrush);
+        this.codeEditor.setCode(
+            // NOTE(localStorage): Migration from old storage key.
+            this.saveData.get("code") ??
+                localStorage.getItem("rkgk.brushEditor.code") ??
+                defaultBrush.code,
+        );
         this.codeEditor.addEventListener(".codeChanged", (event) => {
-            localStorage.setItem("rkgk.brushEditor.code", event.newCode);
+            this.saveData.set("code", event.newCode);
 
             this.dispatchEvent(
                 Object.assign(new Event(".codeChanged"), {
@@ -41,12 +60,28 @@ export class BrushEditor extends HTMLElement {
 
         this.errorArea = this.appendChild(document.createElement("pre"));
         this.errorArea.classList.add("errors");
+
+        // NOTE(localStorage): Migration from old storage key.
+        localStorage.removeItem("rkgk.brushEditor.code");
+    }
+
+    get name() {
+        return this.nameEditor.value;
+    }
+
+    setName(newName) {
+        this.nameEditor.value = newName;
+        this.saveData.set("name", this.nameEditor.value);
     }
 
     get code() {
         return this.codeEditor.code;
     }
 
+    setCode(newCode) {
+        this.codeEditor.setCode(newCode);
+    }
+
     resetErrors() {
         this.errorHeader.textContent = "";
         this.errorArea.textContent = "";