@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -0,0 +1,148 @@
+import { Interpolation, PROFILE_PRESETS } from "../../profiles/index.js";
+import "../../profiles/schema.js";
+// src/lib/classes/ProfileGraphs/index.ts
+/** The interpolations a point can have */
+var INTERPOLATIONS = Object.values(Interpolation);
+/** Whether a value is text of a usable length for an ID or name */
+var isText = (value) => typeof value === "string" && value.trim().length > 0 && value.length <= 100;
+/**
+* Keep only valid points from an untrusted value, in order from left to right: each on the grid, with a known
+* interpolation. Undefined if there aren't 2 to `MAX_PROFILE_POINTS` of them.
+*
+* @example
+* sanitisePoints([{ x: 10, y: 0, i: "linear" }, { x: 0, y: -10, i: "linear" }]); // sorted by x
+*/
+var sanitisePoints = (input) => {
+	if (!Array.isArray(input)) return void 0;
+	const points = input.filter((point) => typeof point?.x === "number" && typeof point.y === "number" && point.x >= 0 && point.x <= 10 && point.y >= -10 && point.y <= 0 && INTERPOLATIONS.includes(point.i)).map(({ x, y, i }) => ({
+		x,
+		y,
+		i
+	})).sort((a, b) => a.x - b.x);
+	return points.length >= 2 && points.length <= 32 ? points : void 0;
+};
+/**
+* Keep only valid profile graphs from an untrusted value (e.g. stored or imported): each with an ID and name and valid
+* points (see `sanitisePoints`), each ID once and none of the presets', up to `MAX_SAVED_PROFILES`. Undefined if the
+* value isn't an array.
+*
+* @example
+* sanitiseProfiles([{ id: "a", name: "Soft", points: [...] }, { id: "a", name: "Again", points: [...] }]); // the first
+*/
+var sanitiseProfiles = (input) => {
+	if (!Array.isArray(input)) return void 0;
+	const graphs = /* @__PURE__ */ new Map();
+	for (const graph of input) {
+		if (graphs.size >= 100) break;
+		const points = sanitisePoints(graph?.points);
+		if (!points || !isText(graph.id) || !isText(graph.name) || graphs.has(graph.id) || PROFILE_PRESETS.some((preset) => preset.id === graph.id)) continue;
+		graphs.set(graph.id, {
+			id: graph.id,
+			name: graph.name.trim(),
+			points
+		});
+	}
+	return [...graphs.values()];
+};
+/**
+* The user's own profile graphs, alongside the ones PaintCanvas comes with (`PROFILE_PRESETS`). Kept in memory; the app
+* settings save and restore them (see `set` and the `change` event). Each gets a UUID when it's first saved.
+*
+* Dispatches a `change` event when the user's graphs change.
+*
+* @example
+* const profiles = new ProfileGraphs();
+* const soft = profiles.save({ name: "Soft", points: PROFILE_PRESETS[1].points });
+* profiles.get(soft.id)?.name; // "Soft"
+*/
+var ProfileGraphs = class extends EventTarget {
+	values = [];
+	/** The user's own graphs, in the order they were first saved */
+	get graphs() {
+		return this.values;
+	}
+	/** Every graph: the presets, then the user's own */
+	get all() {
+		return [...PROFILE_PRESETS, ...this.values];
+	}
+	/**
+	* A graph by its ID: a preset or one of the user's own.
+	*
+	* @example
+	* profiles.get("overweight")?.name; // "Overweight"
+	*/
+	get(id) {
+		return this.all.find((graph) => graph.id === id);
+	}
+	/** Whether a graph is one PaintCanvas comes with (so it can't be renamed, replaced or deleted) */
+	isPreset(id) {
+		return PROFILE_PRESETS.some((graph) => graph.id === id);
+	}
+	/**
+	* One of the user's own graphs with a name, ignoring case and spaces around it.
+	*
+	* @example
+	* profiles.findByName(" soft "); // the graph called "Soft"
+	*/
+	findByName(name) {
+		const wanted = name.trim().toLowerCase();
+		return this.values.find((graph) => graph.name.toLowerCase() === wanted);
+	}
+	/**
+	* Save a graph as one of the user's own: as a new one (with a new UUID), or in place of the one with its ID. Returns
+	* the saved graph, or undefined if it can't be saved (no name, invalid points, a preset's ID, or no room).
+	*
+	* @example
+	* profiles.save({ name: "Soft", points }); // { id: "1b9d…", name: "Soft", points }
+	*/
+	save(draft) {
+		const index = this.values.findIndex((graph) => graph.id === draft.id);
+		const [graph] = sanitiseProfiles([{
+			...draft,
+			id: index >= 0 ? draft.id : crypto.randomUUID()
+		}]);
+		if (!graph || index < 0 && this.values.length >= 100) return void 0;
+		this.values = index >= 0 ? this.values.map((saved, i) => i === index ? graph : saved) : [...this.values, graph];
+		this.dispatchEvent(new Event("change"));
+		return graph;
+	}
+	/**
+	* Rename one of the user's own graphs. Returns whether it was renamed.
+	*
+	* @example
+	* profiles.rename(id, "Softer");
+	*/
+	rename(id, name) {
+		const graph = this.values.find((saved) => saved.id === id);
+		return graph !== void 0 && this.save({
+			...graph,
+			name
+		}) !== void 0;
+	}
+	/**
+	* Delete one of the user's own graphs. Returns whether it was deleted.
+	*
+	* @example
+	* profiles.remove(id);
+	*/
+	remove(id) {
+		const next = this.values.filter((graph) => graph.id !== id);
+		if (next.length === this.values.length) return false;
+		this.values = next;
+		this.dispatchEvent(new Event("change"));
+		return true;
+	}
+	/**
+	* Replace all the user's graphs (e.g. when restoring saved ones), keeping only valid ones (see `sanitiseProfiles`).
+	*
+	* @example
+	* profiles.set(settings.profiles);
+	*/
+	set(graphs) {
+		const next = sanitiseProfiles(graphs);
+		if (!next) return;
+		this.values = next;
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { ProfileGraphs as default, sanitisePoints, sanitiseProfiles };

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

@@ -10,8 +10,9 @@ export interface SettingsAutosaveOptions {
     delayMs?: number;
 }
 /**
- * Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette and colours) in a store: the saved
- * settings are restored when it starts (invalid ones are ignored), then changes are saved soon after they happen.
+ * Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language) in a
+ * store: the saved settings are restored when it starts (invalid ones are ignored), then changes are saved soon after
+ * they happen.
  *
  * Dispatches an `error` event (with the error as `detail`) when loading or saving fails.
  *

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

@@ -5,8 +5,9 @@ var SETTINGS_SAVE_DELAY_MS = 500;
 /** Event dispatched when loading or saving settings fails (detail: the error) */
 var SETTINGS_AUTOSAVE_ERROR_EVENT = "error";
 /**
-* Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette and colours) in a store: the saved
-* settings are restored when it starts (invalid ones are ignored), then changes are saved soon after they happen.
+* Keeps a canvas's app settings (input settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language) in a
+* store: the saved settings are restored when it starts (invalid ones are ignored), then changes are saved soon after
+* they happen.
 *
 * Dispatches an `error` event (with the error as `detail`) when loading or saving fails.
 *
@@ -41,7 +42,9 @@ var SettingsAutosave = class extends EventTarget {
 			app,
 			app.input,
 			app.shortcuts,
-			app.palette
+			app.palette,
+			app.profiles,
+			app.ui
 		];
 	}
 	/**

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

@@ -0,0 +1,68 @@
+/** The themes: light, dark, or following the device's (system) */
+export declare const THEMES: readonly ["light", "dark", "system"];
+export type Theme = (typeof THEMES)[number];
+/** Longest locale tag kept in UI settings (characters) */
+export declare const MAX_LOCALE_LENGTH = 35;
+/** A locale tag's characters: letters, digits and hyphens (e.g. `zh-Hant`) */
+export declare const LOCALE_PATTERN = "^[A-Za-z0-9-]+$";
+/**
+ * Whether a value is one of the themes.
+ *
+ * @example
+ * isTheme("dark"); // true
+ * isTheme(undefined); // false
+ */
+export declare const isTheme: (value: unknown) => value is Theme;
+/**
+ * Whether a value can be a locale tag (letters, digits and hyphens, at most `MAX_LOCALE_LENGTH` characters).
+ *
+ * @example
+ * isLocaleTag("zh-Hant"); // true
+ * isLocaleTag("<script>"); // false
+ */
+export declare const isLocaleTag: (value: unknown) => value is string;
+/** The user's interface choices */
+export interface UiSettingsData {
+    /** The theme (`system` by default) */
+    theme: Theme;
+    /** The language's locale tag, e.g. `fr`, or undefined to follow the device's languages */
+    locale?: string;
+}
+/** UI settings the UI can show and change: PaintCanvas's `UiSettings`, or anything with the same data and `update` */
+export interface UiSettingsLike extends EventTarget {
+    readonly data: Readonly<UiSettingsData>;
+    update(changes: Partial<UiSettingsData>): void;
+}
+/**
+ * Keep only valid UI settings from an untrusted value (e.g. stored or imported), using `defaults` for anything missing
+ * or invalid. Other properties are left out.
+ *
+ * @example
+ * sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system" }); // { theme: "dark" }
+ */
+export declare const sanitiseUiSettings: (input: unknown, defaults: UiSettingsData) => UiSettingsData;
+/**
+ * The user's interface choices: the theme and the language. Kept in memory; the implementer saves and restores them
+ * with the other app settings (see `SettingsAutosave`), and the UI shows and applies them (e.g. `<pc-theme-picker>` and
+ * `<pc-input-settings>`).
+ *
+ * Dispatches a `change` event when a setting changes.
+ *
+ * @example
+ * const ui = new UiSettings();
+ * ui.update({ theme: "dark", locale: "fr" });
+ * ui.data.theme; // "dark"
+ */
+export default class UiSettings extends EventTarget {
+    private values;
+    constructor(initial?: unknown);
+    /** Current settings (read-only copy) */
+    get data(): Readonly<UiSettingsData>;
+    /**
+     * Change some settings and dispatch `change` if anything changed. Invalid values and other properties are ignored.
+     *
+     * @example
+     * ui.update({ locale: "ja" });
+     */
+    update(changes: Partial<UiSettingsData>): void;
+}

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

@@ -0,0 +1,82 @@
+// src/lib/classes/UiSettings/index.ts
+/** The themes: light, dark, or following the device's (system) */
+var THEMES = [
+	"light",
+	"dark",
+	"system"
+];
+/** Longest locale tag kept in UI settings (characters) */
+var MAX_LOCALE_LENGTH = 35;
+/** A locale tag's characters: letters, digits and hyphens (e.g. `zh-Hant`) */
+var LOCALE_PATTERN = "^[A-Za-z0-9-]+$";
+/**
+* Whether a value is one of the themes.
+*
+* @example
+* isTheme("dark"); // true
+* isTheme(undefined); // false
+*/
+var isTheme = (value) => THEMES.includes(value);
+/**
+* Whether a value can be a locale tag (letters, digits and hyphens, at most `MAX_LOCALE_LENGTH` characters).
+*
+* @example
+* isLocaleTag("zh-Hant"); // true
+* isLocaleTag("<script>"); // false
+*/
+var isLocaleTag = (value) => typeof value === "string" && value.length <= 35 && (/* @__PURE__ */ new RegExp("^[A-Za-z0-9-]+$")).test(value);
+/**
+* Keep only valid UI settings from an untrusted value (e.g. stored or imported), using `defaults` for anything missing
+* or invalid. Other properties are left out.
+*
+* @example
+* sanitiseUiSettings({ theme: "dark", locale: 42 }, { theme: "system" }); // { theme: "dark" }
+*/
+var sanitiseUiSettings = (input, defaults) => {
+	const value = typeof input === "object" && input !== null ? input : {};
+	const theme = isTheme(value.theme) ? value.theme : defaults.theme;
+	const locale = isLocaleTag(value.locale) ? value.locale : defaults.locale;
+	return locale === void 0 ? { theme } : {
+		theme,
+		locale
+	};
+};
+/**
+* The user's interface choices: the theme and the language. Kept in memory; the implementer saves and restores them
+* with the other app settings (see `SettingsAutosave`), and the UI shows and applies them (e.g. `<pc-theme-picker>` and
+* `<pc-input-settings>`).
+*
+* Dispatches a `change` event when a setting changes.
+*
+* @example
+* const ui = new UiSettings();
+* ui.update({ theme: "dark", locale: "fr" });
+* ui.data.theme; // "dark"
+*/
+var UiSettings = class extends EventTarget {
+	values;
+	constructor(initial) {
+		super();
+		this.values = sanitiseUiSettings(initial, { theme: "system" });
+	}
+	/** Current settings (read-only copy) */
+	get data() {
+		return this.values;
+	}
+	/**
+	* Change some settings and dispatch `change` if anything changed. Invalid values and other properties are ignored.
+	*
+	* @example
+	* ui.update({ locale: "ja" });
+	*/
+	update(changes) {
+		const next = sanitiseUiSettings({
+			...this.values,
+			...changes
+		}, this.values);
+		if (next.theme === this.values.theme && next.locale === this.values.locale) return;
+		this.values = next;
+		this.dispatchEvent(new Event("change"));
+	}
+};
+export { LOCALE_PATTERN, MAX_LOCALE_LENGTH, THEMES, UiSettings as default, isLocaleTag, isTheme, sanitiseUiSettings };