@lvl99dotcom/paintcanvas 0.7.0 → 0.8.0

package/dist/lib/classes/AssetSync/index.js

@@ -0,0 +1,80 @@
+// src/lib/classes/AssetSync/index.ts
+/** Event dispatched when loading or saving assets fails (detail: the error) */
+var ASSET_SYNC_ERROR_EVENT = "error";
+/**
+* Keeps assets held in memory (e.g. profile graphs) in a store: the saved assets are added when it starts, assets only
+* in memory are saved (e.g. ones restored from older app settings), then each change saves the assets that changed and
+* deletes the ones that are gone.
+*
+* Dispatches an `error` event (with the error as `detail`) when loading or saving fails.
+*
+* @example
+* const sync = new AssetSync(profiles, new IndexedDbAssetStore("profiles"));
+* await sync.ready;
+* sync.stop();
+*/
+var AssetSync = class extends EventTarget {
+	assets;
+	store;
+	/** Resolves once the saved assets are loaded and any only in memory are saved */
+	ready;
+	/** Each asset as last saved, as JSON, by ID */
+	saved = /* @__PURE__ */ new Map();
+	stopped = false;
+	/** Saving, one change after another */
+	saving = Promise.resolve();
+	onChange = () => {
+		this.saving = this.saving.then(() => this.save());
+	};
+	constructor(assets, store) {
+		super();
+		this.assets = assets;
+		this.store = store;
+		this.ready = this.start();
+	}
+	/**
+	* Stop keeping changes (ones already being saved finish).
+	*/
+	stop() {
+		this.stopped = true;
+		this.assets.removeEventListener("change", this.onChange);
+	}
+	/** Load the saved assets, then save the ones only in memory and listen for changes */
+	async start() {
+		try {
+			const listed = await this.store.list();
+			if (this.stopped) return;
+			this.assets.merge(listed);
+			for (const asset of listed) if (typeof asset?.id === "string") this.saved.set(asset.id, JSON.stringify(asset));
+		} catch (error) {
+			this.fail(error);
+		}
+		if (this.stopped) return;
+		this.assets.addEventListener("change", this.onChange);
+		await (this.saving = this.save());
+	}
+	/** Save the assets that changed since they were last saved, and delete the ones that are gone */
+	async save() {
+		if (this.stopped) return;
+		const current = new Map(this.assets.items.map((asset) => [asset.id, asset]));
+		try {
+			for (const [id, asset] of current) {
+				const json = JSON.stringify(asset);
+				if (this.saved.get(id) === json) continue;
+				await this.store.put(asset);
+				this.saved.set(id, json);
+			}
+			for (const id of [...this.saved.keys()]) if (!current.has(id)) {
+				await this.store.remove(id);
+				this.saved.delete(id);
+			}
+		} catch (error) {
+			this.fail(error);
+		}
+	}
+	/** Tell listeners loading or saving failed */
+	fail(error) {
+		this.dispatchEvent(new CustomEvent(ASSET_SYNC_ERROR_EVENT, { detail: error }));
+	}
+};
+export { ASSET_SYNC_ERROR_EVENT, AssetSync as default };

package/dist/lib/classes/ColourPalettes/index.d.ts

@@ -0,0 +1,83 @@
+import { type ColourPalette } from "../../palette";
+import { type AssetAuthor } from "../../assets";
+/** ID of the palette PaintCanvas comes with (the canvas's `palette`), which can't be renamed or deleted */
+export declare const DEFAULT_PALETTE_ID = "paintcanvas";
+/** Most palettes a user can keep */
+export declare const MAX_SAVED_PALETTES = 100;
+/**
+ * A palette name, trimmed, or undefined if it's empty or too long.
+ *
+ * @example
+ * paletteName("  Sunset "); // "Sunset"
+ */
+export declare const paletteName: (name: unknown) => string | undefined;
+/**
+ * Keep only valid palettes from an untrusted value (e.g. stored or imported): each with a UUID, a name and valid colours
+ * (see `sanitisePalette`), each ID once, up to `MAX_SAVED_PALETTES`. An invalid author is left out. Undefined if the
+ * value isn't an array.
+ *
+ * @example
+ * sanitiseColourPalettes([{ id: crypto.randomUUID(), name: "Sunset", colours: ["#FF0000", "red"] }]); // colours ["#ff0000"]
+ */
+export declare const sanitiseColourPalettes: (input: unknown) => ColourPalette[] | undefined;
+/**
+ * The user's own colour palettes, each named and with its own colours (as lowercase `#rrggbb`, each once, up to
+ * `MAX_PALETTE_COLOURS`), alongside the palette PaintCanvas comes with (the canvas's `palette`). Kept in memory; a
+ * palette store keeps them (see `PaintCanvas.useAssetStores`).
+ *
+ * Dispatches a `change` event when the palettes change.
+ *
+ * @example
+ * const palettes = new ColourPalettes();
+ * const sunset = palettes.create("Sunset");
+ * palettes.addColour(sunset.id, "#ff7700");
+ */
+export default class ColourPalettes extends EventTarget {
+    private values;
+    /** The palettes, in the order they were made */
+    get items(): readonly ColourPalette[];
+    /** A palette by ID */
+    get(id: string): ColourPalette | undefined;
+    /**
+     * Make a palette with a name (trimmed) and colours. Returns it, or undefined if the name isn't valid or there's no
+     * room.
+     *
+     * @example
+     * palettes.create("Sunset", ["#ff7700"], { name: "Ada" });
+     */
+    create(name: string, colours?: readonly string[], author?: AssetAuthor): ColourPalette | undefined;
+    /**
+     * Rename a palette. Returns whether it was renamed.
+     */
+    rename(id: string, name: string): boolean;
+    /**
+     * Delete a palette. Returns whether it was deleted.
+     */
+    remove(id: string): boolean;
+    /**
+     * Add a colour at the end of a palette. Returns whether it was added: not if it's already there, the palette is full,
+     * or it isn't a `#rrggbb` colour.
+     */
+    addColour(id: string, colour: string): boolean;
+    /**
+     * Remove the colour at a position in a palette. Returns whether it was removed.
+     */
+    removeColour(id: string, index: number): boolean;
+    /**
+     * Add palettes (e.g. loaded from a store or imported), replacing the ones with the same IDs and keeping the others,
+     * up to `MAX_SAVED_PALETTES`. Invalid palettes are left out (see `sanitiseColourPalettes`). Returns how many were
+     * added or replaced.
+     *
+     * @example
+     * palettes.merge(colourPaletteFile.parse(text));
+     */
+    merge(palettes: unknown): number;
+    /**
+     * Replace all the palettes (e.g. when restoring saved ones), keeping only valid ones.
+     */
+    set(palettes: unknown): void;
+    /** Change a palette's name or colours. Returns whether it exists. */
+    private change;
+    /** Use the palettes and dispatch `change` */
+    private update;
+}

package/dist/lib/classes/ColourPalettes/index.js

@@ -0,0 +1,165 @@
+import { sanitisePalette } from "../Palette/index.js";
+import "../../palette/index.js";
+import "../../palette/schema.js";
+import { UUID_PATTERN } from "../../assets/schema.js";
+import { validateColourPalette } from "../../validation/validators.generated.js";
+// src/lib/classes/ColourPalettes/index.ts
+/** ID of the palette PaintCanvas comes with (the canvas's `palette`), which can't be renamed or deleted */
+var DEFAULT_PALETTE_ID = "paintcanvas";
+/** Most palettes a user can keep */
+var MAX_SAVED_PALETTES = 100;
+var UUID = new RegExp(UUID_PATTERN);
+/**
+* A palette name, trimmed, or undefined if it's empty or too long.
+*
+* @example
+* paletteName("  Sunset "); // "Sunset"
+*/
+var paletteName = (name) => {
+	if (typeof name !== "string") return void 0;
+	const trimmed = name.trim();
+	return trimmed.length > 0 && trimmed.length <= 100 ? trimmed : void 0;
+};
+/**
+* Keep only valid palettes from an untrusted value (e.g. stored or imported): each with a UUID, a name and valid colours
+* (see `sanitisePalette`), each ID once, up to `MAX_SAVED_PALETTES`. An invalid author is left out. Undefined if the
+* value isn't an array.
+*
+* @example
+* sanitiseColourPalettes([{ id: crypto.randomUUID(), name: "Sunset", colours: ["#FF0000", "red"] }]); // colours ["#ff0000"]
+*/
+var sanitiseColourPalettes = (input) => {
+	if (!Array.isArray(input)) return void 0;
+	const palettes = /* @__PURE__ */ new Map();
+	for (const palette of input) {
+		if (palettes.size >= MAX_SAVED_PALETTES) break;
+		const name = paletteName(palette?.name);
+		const colours = sanitisePalette(palette?.colours);
+		if (typeof palette?.id !== "string" || !UUID.test(palette.id) || palettes.has(palette.id) || !name || !colours) continue;
+		const valid = {
+			id: palette.id,
+			name,
+			colours
+		};
+		const withAuthor = {
+			...valid,
+			author: palette.author
+		};
+		palettes.set(palette.id, palette.author !== void 0 && validateColourPalette(withAuthor) ? withAuthor : valid);
+	}
+	return [...palettes.values()];
+};
+/**
+* The user's own colour palettes, each named and with its own colours (as lowercase `#rrggbb`, each once, up to
+* `MAX_PALETTE_COLOURS`), alongside the palette PaintCanvas comes with (the canvas's `palette`). Kept in memory; a
+* palette store keeps them (see `PaintCanvas.useAssetStores`).
+*
+* Dispatches a `change` event when the palettes change.
+*
+* @example
+* const palettes = new ColourPalettes();
+* const sunset = palettes.create("Sunset");
+* palettes.addColour(sunset.id, "#ff7700");
+*/
+var ColourPalettes = class extends EventTarget {
+	values = [];
+	/** The palettes, in the order they were made */
+	get items() {
+		return this.values;
+	}
+	/** A palette by ID */
+	get(id) {
+		return this.values.find((palette) => palette.id === id);
+	}
+	/**
+	* Make a palette with a name (trimmed) and colours. Returns it, or undefined if the name isn't valid or there's no
+	* room.
+	*
+	* @example
+	* palettes.create("Sunset", ["#ff7700"], { name: "Ada" });
+	*/
+	create(name, colours = [], author) {
+		const [palette] = sanitiseColourPalettes([{
+			id: crypto.randomUUID(),
+			name,
+			colours,
+			author
+		}]);
+		if (!palette || this.values.length >= MAX_SAVED_PALETTES) return void 0;
+		this.update([...this.values, palette]);
+		return palette;
+	}
+	/**
+	* Rename a palette. Returns whether it was renamed.
+	*/
+	rename(id, name) {
+		const valid = paletteName(name);
+		return valid !== void 0 && this.change(id, { name: valid });
+	}
+	/**
+	* Delete a palette. Returns whether it was deleted.
+	*/
+	remove(id) {
+		const next = this.values.filter((palette) => palette.id !== id);
+		if (next.length === this.values.length) return false;
+		this.update(next);
+		return true;
+	}
+	/**
+	* Add a colour at the end of a palette. Returns whether it was added: not if it's already there, the palette is full,
+	* or it isn't a `#rrggbb` colour.
+	*/
+	addColour(id, colour) {
+		const palette = this.get(id);
+		if (!palette || palette.colours.length >= 1e3) return false;
+		const colours = sanitisePalette([...palette.colours, colour]);
+		return colours.length > palette.colours.length && this.change(id, { colours });
+	}
+	/**
+	* Remove the colour at a position in a palette. Returns whether it was removed.
+	*/
+	removeColour(id, index) {
+		const palette = this.get(id);
+		if (!palette || index < 0 || index >= palette.colours.length) return false;
+		return this.change(id, { colours: palette.colours.filter((_, i) => i !== index) });
+	}
+	/**
+	* Add palettes (e.g. loaded from a store or imported), replacing the ones with the same IDs and keeping the others,
+	* up to `MAX_SAVED_PALETTES`. Invalid palettes are left out (see `sanitiseColourPalettes`). Returns how many were
+	* added or replaced.
+	*
+	* @example
+	* palettes.merge(colourPaletteFile.parse(text));
+	*/
+	merge(palettes) {
+		const added = sanitiseColourPalettes(palettes);
+		if (!added?.length) return 0;
+		const byId = new Map(this.values.map((palette) => [palette.id, palette]));
+		for (const palette of added) byId.set(palette.id, palette);
+		const next = [...byId.values()].slice(0, MAX_SAVED_PALETTES);
+		this.update(next);
+		return added.filter((palette) => next.some(({ id }) => id === palette.id)).length;
+	}
+	/**
+	* Replace all the palettes (e.g. when restoring saved ones), keeping only valid ones.
+	*/
+	set(palettes) {
+		const next = sanitiseColourPalettes(palettes);
+		if (next) this.update(next);
+	}
+	/** Change a palette's name or colours. Returns whether it exists. */
+	change(id, changes) {
+		if (!this.get(id)) return false;
+		this.update(this.values.map((palette) => palette.id === id ? {
+			...palette,
+			...changes
+		} : palette));
+		return true;
+	}
+	/** Use the palettes and dispatch `change` */
+	update(palettes) {
+		this.values = palettes;
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { DEFAULT_PALETTE_ID, MAX_SAVED_PALETTES, ColourPalettes as default, paletteName, sanitiseColourPalettes };

package/dist/lib/classes/CustomPresets/index.d.ts

@@ -1,32 +1,31 @@
 import type { BrushConfig } from "../../brushes/types";
-/** Where custom presets are kept (see `PresetStore`) */
-export interface PresetStoreLike {
-    /** The owner's presets, in the order they were saved */
-    list(ownerId: string): Promise<BrushConfig[]>;
-    /** Save one of the owner's presets (replacing one with the same ID) */
-    put(ownerId: string, preset: BrushConfig): Promise<void>;
-    /** Delete one of the owner's presets */
-    remove(ownerId: string, id: string): Promise<void>;
-}
+import type { AssetStoreLike } from "../../storage";
 /**
  * The user's own and imported brush presets, shared by the brush and eraser. They are kept in a store when one is
- * given (otherwise only until the page closes).
+ * used (otherwise only until the page closes).
  *
  * Dispatches a `change` event when presets are loaded, saved or removed.
  *
  * @example
- * const custom = new CustomPresets("user-1", myPresetStore);
+ * const custom = new CustomPresets(new IndexedDbAssetStore("brushes"));
  * await custom.load();
  * await custom.save({ id: crypto.randomUUID(), name: "My brush", author: { name: "Ada", handle } });
  */
 export default class CustomPresets extends EventTarget {
     /** Presets, in the order they were added */
     presets: BrushConfig[];
-    private readonly ownerId;
-    private readonly store?;
-    constructor(ownerId: string, store?: PresetStoreLike);
+    private store?;
+    constructor(store?: AssetStoreLike<BrushConfig>);
+    /**
+     * Keep the presets in another store (or in memory only, without one), loading the presets saved there in place of
+     * the current ones.
+     *
+     * @example
+     * await custom.useStore(new IndexedDbAssetStore("brushes", "my-app"));
+     */
+    useStore(store: AssetStoreLike<BrushConfig> | undefined): Promise<void>;
     /**
-     * Load the user's presets from the store.
+     * Load the user's presets from the store, leaving out invalid ones.
      */
     load(): Promise<void>;
     /**

package/dist/lib/classes/CustomPresets/index.js

@@ -1,32 +1,47 @@
 import { isOwnAuthor } from "../../brushes/authors/index.js";
+import { isValidBrushPreset } from "../../presets/index.js";
 // src/lib/classes/CustomPresets/index.ts
 /**
 * The user's own and imported brush presets, shared by the brush and eraser. They are kept in a store when one is
-* given (otherwise only until the page closes).
+* used (otherwise only until the page closes).
 *
 * Dispatches a `change` event when presets are loaded, saved or removed.
 *
 * @example
-* const custom = new CustomPresets("user-1", myPresetStore);
+* const custom = new CustomPresets(new IndexedDbAssetStore("brushes"));
 * await custom.load();
 * await custom.save({ id: crypto.randomUUID(), name: "My brush", author: { name: "Ada", handle } });
 */
 var CustomPresets = class extends EventTarget {
 	/** Presets, in the order they were added */
 	presets = [];
-	ownerId;
 	store;
-	constructor(ownerId, store) {
+	constructor(store) {
 		super();
-		this.ownerId = ownerId;
 		this.store = store;
 	}
 	/**
-	* Load the user's presets from the store.
+	* Keep the presets in another store (or in memory only, without one), loading the presets saved there in place of
+	* the current ones.
+	*
+	* @example
+	* await custom.useStore(new IndexedDbAssetStore("brushes", "my-app"));
+	*/
+	async useStore(store) {
+		this.store = store;
+		this.presets = [];
+		this.notify();
+		await this.load();
+	}
+	/**
+	* Load the user's presets from the store, leaving out invalid ones.
 	*/
 	async load() {
-		if (!this.store) return;
-		this.presets = await this.store.list(this.ownerId);
+		const store = this.store;
+		if (!store) return;
+		const saved = await store.list();
+		if (store !== this.store) return;
+		this.presets = saved.filter((preset) => isValidBrushPreset(preset).valid);
 		this.notify();
 	}
 	/**
@@ -49,7 +64,7 @@ var CustomPresets = class extends EventTarget {
 	* Add presets, replacing any with the same ID, and keep them.
 	*/
 	async save(...presets) {
-		for (const preset of presets) await this.store?.put(this.ownerId, preset);
+		for (const preset of presets) await this.store?.put(preset);
 		const kept = this.presets.map((existing) => presets.find((preset) => preset.id === existing.id) ?? existing);
 		const added = presets.filter((preset) => !this.presets.some((existing) => existing.id === preset.id));
 		this.presets = [...kept, ...added];
@@ -59,7 +74,7 @@ var CustomPresets = class extends EventTarget {
 	* Delete a preset.
 	*/
 	async remove(id) {
-		await this.store?.remove(this.ownerId, id);
+		await this.store?.remove(id);
 		this.presets = this.presets.filter((preset) => preset.id !== id);
 		this.notify();
 	}

package/dist/lib/classes/LayerAutosave/index.d.ts

@@ -1,6 +1,7 @@
 import type LayerStack from "../LayerStack";
 import type BackgroundWork from "../BackgroundWork";
 import { type LayerStoreLike, type SavedLayer } from "../../storage";
+import type { DocumentInfo } from "../../document/schema";
 /** How long to wait after the layers change before saving, so quick changes are saved together (milliseconds) */
 export declare const SAVE_DELAY_MS = 500;
 /** Name of the save in the canvas's background work */
@@ -25,6 +26,10 @@ export interface AutosaveCanvas extends EventTarget {
     readonly layers: LayerStack;
     /** Slow work that waits for pauses in drawing */
     readonly background: BackgroundWork;
+    /** The drawing's details (changes are followed by a `change` event) */
+    readonly documentInfo: Readonly<DocumentInfo>;
+    /** Use the details of the drawing being restored */
+    restoreDocumentInfo(info: DocumentInfo): void;
     /** Replace the canvas size and layers with saved ones, drawing each layer's image, and select one */
     restoreLayers(width: number, height: number, layers: readonly SavedLayer[], images: readonly CanvasImageSource[], activeLayer: string): void;
 }
@@ -42,8 +47,8 @@ export interface AutosaveOptions {
     delayMs?: number;
 }
 /**
- * Keeps a canvas's layers in a store, so the drawing survives reloading the page: restores the saved drawing when it
- * starts, then saves soon after the layers change (once drawing pauses), and straight away when the page is hidden.
+ * Keeps a canvas's layers and the drawing's details in a store, so the drawing survives reloading the page: restores the
+ * saved drawing when it starts, then saves soon after the layers or details change (once drawing pauses), and straight away when the page is hidden.
  * Only layers whose pixels changed are encoded and saved again: the layers' change counts tell which (see
  * `LayerStack.pixelVersion`), without reading their pixels, which is slow on phones.
  *
@@ -86,6 +91,8 @@ export default class LayerAutosave extends EventTarget {
     /** Lets go of the drawing's lock, while held */
     private release?;
     private readonly onLayersChange;
+    /** The drawing's details as last saved or restored, as JSON */
+    private savedInfo?;
     private readonly onCanvasChange;
     private readonly onVisibilityChange;
     constructor(canvas: AutosaveCanvas, store: LayerStoreLike, options?: AutosaveOptions);

package/dist/lib/classes/LayerAutosave/index.js

@@ -32,8 +32,8 @@ var encodePng = (canvas) => {
 */
 var isComplete = (drawing, images) => drawing.version === 1 && drawing.layers.length > 0 && drawing.layers.every((layer) => images.has(layer.id)) && drawing.layers.some((layer) => layer.id === drawing.activeLayer);
 /**
-* Keeps a canvas's layers in a store, so the drawing survives reloading the page: restores the saved drawing when it
-* starts, then saves soon after the layers change (once drawing pauses), and straight away when the page is hidden.
+* Keeps a canvas's layers and the drawing's details in a store, so the drawing survives reloading the page: restores the
+* saved drawing when it starts, then saves soon after the layers or details change (once drawing pauses), and straight away when the page is hidden.
 * Only layers whose pixels changed are encoded and saved again: the layers' change counts tell which (see
 * `LayerStack.pixelVersion`), without reading their pixels, which is slow on phones.
 *
@@ -76,10 +76,13 @@ var LayerAutosave = class extends EventTarget {
 	/** Lets go of the drawing's lock, while held */
 	release;
 	onLayersChange = () => this.schedule();
+	/** The drawing's details as last saved or restored, as JSON */
+	savedInfo;
 	onCanvasChange = () => {
-		if (this.canvas.layers === this.watched) return;
-		this.watch();
-		this.onLayersChange();
+		if (this.canvas.layers !== this.watched) {
+			this.watch();
+			this.onLayersChange();
+		} else if (JSON.stringify(this.canvas.documentInfo) !== this.savedInfo) this.onLayersChange();
 	};
 	onVisibilityChange = (event) => {
 		if (event.target.visibilityState === "hidden") this.save();
@@ -197,7 +200,10 @@ var LayerAutosave = class extends EventTarget {
 		if (this.currentState !== AutosaveState.Starting) return;
 		this.saved = /* @__PURE__ */ new Map();
 		this.watch();
-		if (restored) this.remember();
+		if (restored) {
+			this.remember();
+			this.savedInfo = JSON.stringify(this.canvas.documentInfo);
+		}
 		this.setState(AutosaveState.Ready);
 		if (!restored) this.onLayersChange();
 	}
@@ -210,6 +216,7 @@ var LayerAutosave = class extends EventTarget {
 		const decoded = await Promise.all(drawing.layers.map((layer) => this.decode(images.get(layer.id))));
 		if (this.currentState !== AutosaveState.Starting) return false;
 		this.unwatch();
+		if (drawing.document) this.canvas.restoreDocumentInfo(drawing.document);
 		this.canvas.restoreLayers(drawing.width, drawing.height, drawing.layers, decoded, drawing.activeLayer);
 		this.sizes = new Map(drawing.layers.map((layer) => [layer.id, images.get(layer.id).size]));
 		return true;
@@ -243,8 +250,10 @@ var LayerAutosave = class extends EventTarget {
 				encoded.set(layer.id, record);
 				encoding.push(this.encode(layer.canvas).then((image) => [layer.id, image]));
 			}
+			const info = structuredClone(this.canvas.documentInfo);
 			const drawing = {
 				version: 1,
+				document: info,
 				width: stack.width,
 				height: stack.height,
 				layers: stack.layers.map((layer) => layer.toConfig()),
@@ -256,6 +265,7 @@ var LayerAutosave = class extends EventTarget {
 			const kept = new Set(drawing.layers.map((layer) => layer.id));
 			for (const id of this.saved.keys()) if (!kept.has(id)) this.saved.delete(id);
 			for (const [id, record] of encoded) this.saved.set(id, record);
+			this.savedInfo = JSON.stringify(info);
 			this.error = void 0;
 			this.rememberSizes(kept, images);
 		} catch (error) {