@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

package/dist/ui/elements/PcSliderRange/index.js

@@ -0,0 +1,307 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { fitNumber } from "../PcNumberSlider/index.js";
+import { css, html, nothing } from "lit";
+import { live } from "lit/directives/live.js";
+import { styleMap } from "lit/directives/style-map.js";
+// src/ui/elements/PcSliderRange/index.ts
+/**
+* Where a value sits between `min` and `max`, from 0 to 1 (0 when they're the same).
+*
+* @example
+* rangeFraction(25, 0, 100); // 0.25
+*/
+var rangeFraction = (value, min, max) => max > min ? Math.min(1, Math.max(0, (value - min) / (max - min))) : 0;
+/**
+* A slider for a range: one track with two handles, the left for the lowest value (`low`) and the right for the highest
+* (`high`), and a `<pc-number-slider>` for each on either side (dragged, or tapped to type). The two can't cross: the
+* lowest is never above the highest. Values are kept within `min` and `max` and rounded to `step`.
+*
+* Pressing the track moves the nearest handle there and drags it. With keyboard focus on a handle, the arrow keys move
+* it by `step`, Page Up and Page Down by `pageStep`, and Home and End as far as it can go. Touch, mouse and pen all work.
+*
+* With `single`, it's a slider for one value (`value`, from `min`): one handle, and one number slider before the track,
+* or after it with `number-position="end"`. Use it for single values too, so they look and work the same as ranges.
+*
+* Fires `pc-input` (detail: `{ low, high }`) while a handle is dragged, and `pc-change` once it's let go, or when a value
+* is changed with the keyboard or a number slider, after changing `low` and `high` themselves (and `value`, the same as
+* `high`).
+*
+* @example
+* html`<pc-slider-range label="Width" min="1" max="256" .low=${10} .high=${40}
+*   @pc-change=${(e) => setWidth(e.detail.low, e.detail.high)}></pc-slider-range>`
+*/
+var PcSliderRange = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		low: { type: Number },
+		high: { type: Number },
+		min: { type: Number },
+		max: { type: Number },
+		step: { type: Number },
+		pageStep: {
+			type: Number,
+			attribute: "page-step"
+		},
+		unit: { type: String },
+		label: { type: String },
+		single: {
+			type: Boolean,
+			reflect: true
+		},
+		numberPosition: {
+			type: String,
+			attribute: "number-position"
+		},
+		disabled: {
+			type: Boolean,
+			reflect: true
+		},
+		dragging: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--pc-space-2);
+        min-width: 0;
+        --pc-range-thumb: 16px;
+      }
+      :host([disabled]) {
+        opacity: 0.5;
+      }
+      pc-number-slider {
+        flex: none;
+        width: 4.5em;
+      }
+      /* The handles' centres reach the ends of the track */
+      .track {
+        position: relative;
+        flex: 1;
+        min-width: 60px;
+        height: 24px;
+        margin: 0 calc(var(--pc-range-thumb) / 2);
+        touch-action: none;
+        cursor: pointer;
+      }
+      :host([disabled]) .track {
+        cursor: default;
+      }
+      .rail,
+      .fill {
+        position: absolute;
+        top: 50%;
+        height: 4px;
+        border-radius: var(--pc-radius-pill);
+        transform: translateY(-50%);
+      }
+      .rail {
+        left: calc(var(--pc-range-thumb) / -2);
+        right: calc(var(--pc-range-thumb) / -2);
+        background: var(--pc-border);
+      }
+      .fill {
+        background: var(--pc-accent);
+      }
+      /* A 24px target around each 16px thumb, for fingers */
+      .handle {
+        position: absolute;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        margin-left: -12px;
+        border-radius: 50%;
+        outline: none;
+      }
+      .handle::before {
+        content: "";
+        width: var(--pc-range-thumb);
+        height: var(--pc-range-thumb);
+        box-sizing: border-box;
+        border: 2px solid var(--pc-surface-raised);
+        border-radius: 50%;
+        background: var(--pc-accent);
+        box-shadow: var(--pc-shadow);
+      }
+      .handle:focus-visible::before {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+      /* The handle being dragged stays on top, so it can be dragged off the other */
+      .handle.active {
+        z-index: 1;
+      }
+    `];
+	/** A single slider's value: the same as `high` */
+	get value() {
+		return this.high;
+	}
+	set value(value) {
+		this.high = value;
+	}
+	/** What `pc-input` and `pc-change` give */
+	get detail() {
+		return {
+			low: this.low,
+			high: this.high,
+			value: this.high
+		};
+	}
+	/** How far an end can go: not past the other end (a single slider's value can go down to `min`) */
+	limitsOf(end) {
+		if (end === "low") return [this.min, this.high];
+		return [this.single ? this.min : this.low, this.max];
+	}
+	/** An end's name for screen readers: a single slider's is its label */
+	endLabel(end) {
+		return this.single ? this.label : this.t(`paintCanvas.range.${end}`, { label: this.label });
+	}
+	constructor() {
+		super();
+		this.low = 0;
+		this.high = 100;
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.unit = "";
+		this.label = "";
+		this.single = false;
+		this.numberPosition = "start";
+		this.disabled = false;
+	}
+	/**
+	* Set one end, kept within `min` and `max`, rounded to `step`, and not past the other end, then tell listeners (with
+	* `pc-input` while dragging, or `pc-change`) if it changed.
+	*
+	* @example
+	* range.setEnd("high", 40); // high is 40, unless low is above it (then it's low)
+	*/
+	setEnd(end, value, type = "pc-change") {
+		const [lowest, highest] = this.limitsOf(end);
+		const next = Math.min(highest, Math.max(lowest, fitNumber(value, this.min, this.max, this.step)));
+		if (next === this[end]) return;
+		this[end] = next;
+		emit(this, type, this.detail);
+	}
+	/** The value at a pointer's position along the track */
+	valueAt(event) {
+		const { left, width } = event.currentTarget.getBoundingClientRect();
+		const fraction = width > 0 ? (event.clientX - left) / width : 0;
+		return this.min + Math.min(1, Math.max(0, fraction)) * (this.max - this.min);
+	}
+	/** The end nearest a value: the high end when it's above both, or past the middle of two that meet */
+	nearestEnd(value) {
+		if (this.single) return "high";
+		if (value > this.high) return "high";
+		if (value < this.low) return "low";
+		return value - this.low > this.high - value ? "high" : "low";
+	}
+	onPointerDown(event) {
+		if (this.disabled || event.button > 0) return;
+		event.preventDefault();
+		const value = this.valueAt(event);
+		const end = this.nearestEnd(value);
+		this.dragging = end;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		this.renderRoot.querySelector(`.handle.${end}`).focus();
+		this.setEnd(end, value, "pc-input");
+	}
+	onPointerMove(event) {
+		if (this.dragging) this.setEnd(this.dragging, this.valueAt(event), "pc-input");
+	}
+	onPointerUp() {
+		if (!this.dragging) return;
+		this.dragging = void 0;
+		emit(this, "pc-change", this.detail);
+	}
+	/** Move a handle with the arrow keys, Page Up and Page Down, Home and End */
+	onHandleKeyDown(event, end) {
+		if (this.disabled) return;
+		const page = this.pageStep ?? this.step * 10;
+		const value = this[end];
+		const next = {
+			ArrowRight: value + this.step,
+			ArrowUp: value + this.step,
+			ArrowLeft: value - this.step,
+			ArrowDown: value - this.step,
+			PageUp: value + page,
+			PageDown: value - page,
+			Home: this.min,
+			End: this.max
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		this.setEnd(end, next);
+	}
+	/** One end's handle */
+	renderHandle(end) {
+		const value = this[end];
+		const [lowest, highest] = this.limitsOf(end);
+		return html`<div
+      class="handle ${end} ${this.dragging === end ? "active" : ""}"
+      part="handle"
+      role="slider"
+      tabindex=${this.disabled ? -1 : 0}
+      aria-label=${this.endLabel(end)}
+      aria-valuemin=${lowest}
+      aria-valuemax=${highest}
+      aria-valuenow=${value}
+      aria-valuetext=${`${value}${this.unit}`}
+      aria-disabled=${this.disabled ? "true" : nothing}
+      style=${styleMap({ left: `${rangeFraction(value, this.min, this.max) * 100}%` })}
+      @keydown=${(event) => this.onHandleKeyDown(event, end)}
+    ></div>`;
+	}
+	/** One end's number slider: it can't go past the other end */
+	renderNumber(end) {
+		const [lowest, highest] = this.limitsOf(end);
+		return html`<pc-number-slider
+      class=${end}
+      part="number"
+      label=${this.endLabel(end)}
+      min=${lowest}
+      max=${highest}
+      step=${this.step}
+      page-step=${this.pageStep ?? nothing}
+      unit=${this.unit}
+      ?disabled=${this.disabled}
+      .value=${live(this[end])}
+      @pc-change=${(event) => {
+			event.stopPropagation();
+			this.setEnd(end, event.detail.value);
+		}}
+    ></pc-number-slider>`;
+	}
+	render() {
+		const from = this.single ? 0 : rangeFraction(this.low, this.min, this.max) * 100;
+		const to = rangeFraction(this.high, this.min, this.max) * 100;
+		const before = this.single ? this.numberPosition === "end" ? nothing : this.renderNumber("high") : this.renderNumber("low");
+		const after = !this.single || this.numberPosition === "end" ? this.renderNumber("high") : nothing;
+		return html`${before}
+      <div
+        class="track"
+        part="track"
+        @pointerdown=${this.onPointerDown}
+        @pointermove=${this.onPointerMove}
+        @pointerup=${this.onPointerUp}
+        @pointercancel=${this.onPointerUp}
+      >
+        <div class="rail"></div>
+        <div
+          class="fill"
+          part="fill"
+          style=${styleMap({
+			left: `${from}%`,
+			right: `${100 - to}%`
+		})}
+        ></div>
+        ${this.single ? nothing : this.renderHandle("low")}
+        ${this.renderHandle("high")}
+      </div>
+      ${after}`;
+	}
+};
+defineElement("pc-slider-range", PcSliderRange);
+export { PcSliderRange, rangeFraction };

package/dist/ui/elements/PcStats/index.d.ts

@@ -1,6 +1,11 @@
 import { nothing, type PropertyValues } from "lit";
 import { PcElement } from "../../base";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
+/**
+ * The least time between reads of the colour under the pointer, in milliseconds. Each read draws every layer's pixels
+ * there, which is slow on phones.
+ */
+export declare const COLOUR_INTERVAL_MS = 100;
 /**
  * A size in bytes in the largest unit it has at least one of, to one decimal place (whole bytes), for a locale.
  *
@@ -12,8 +17,9 @@ export declare const formatBytes: (bytes: number, locale?: string) => string;
 /**
  * A line of small text about the canvas: its size; while the drawing is kept in the browser, how much its layer
  * images take there; the zoom level; and the colour under the pointer (with a swatch; a dash when the pointer isn't
- * over the canvas). The colour follows the pointer at most once a frame. It's not announced to screen readers as it
- * changes, as it changes with every pointer move.
+ * over the canvas). The colour follows the pointer at most every `COLOUR_INTERVAL_MS`, and isn't read while a stroke is
+ * drawn (the next pointer move after it reads it). It's not announced to screen readers as it changes, as it changes
+ * with every pointer move.
  *
  * @example
  * html`<pc-stats .app=${app}></pc-stats>`
@@ -23,6 +29,9 @@ export declare class PcStats extends PcElement {
         app: {
             attribute: boolean;
         };
+        colour: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -38,11 +47,17 @@ export declare class PcStats extends PcElement {
     /** The canvas described */
     app?: PaintCanvas;
     private changes;
+    /** The colour under the pointer when it was last read, if it's over the canvas */
+    colour?: string;
     /** The canvas whose pointer is followed */
     private followed?;
-    /** The animation frame the next update waits for, if any */
-    private frame?;
+    /** The timer the next read of the colour waits for, if any */
+    private timer?;
     private readonly onPointer;
+    /**
+     * Read the colour under the followed canvas's pointer, unless a stroke is being drawn (reading would slow it down).
+     */
+    private readColour;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;

package/dist/ui/elements/PcStats/index.js

@@ -4,6 +4,11 @@ import { zoomPercent } from "../PcToolSettings/index.js";
 import { css, html, nothing } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 // src/ui/elements/PcStats/index.ts
+/**
+* The least time between reads of the colour under the pointer, in milliseconds. Each read draws every layer's pixels
+* there, which is slow on phones.
+*/
+var COLOUR_INTERVAL_MS = 100;
 /** Units for sizes in bytes, each 1000 times the one before */
 var BYTE_UNITS = [
 	"byte",
@@ -30,8 +35,9 @@ var formatBytes = (bytes, locale) => {
 /**
 * A line of small text about the canvas: its size; while the drawing is kept in the browser, how much its layer
 * images take there; the zoom level; and the colour under the pointer (with a swatch; a dash when the pointer isn't
-* over the canvas). The colour follows the pointer at most once a frame. It's not announced to screen readers as it
-* changes, as it changes with every pointer move.
+* over the canvas). The colour follows the pointer at most every `COLOUR_INTERVAL_MS`, and isn't read while a stroke is
+* drawn (the next pointer move after it reads it). It's not announced to screen readers as it changes, as it changes
+* with every pointer move.
 *
 * @example
 * html`<pc-stats .app=${app}></pc-stats>`
@@ -39,7 +45,8 @@ var formatBytes = (bytes, locale) => {
 var PcStats = class extends PcElement {
 	static properties = {
 		...PcElement.properties,
-		app: { attribute: false }
+		app: { attribute: false },
+		colour: { state: true }
 	};
 	static styles = [PcElement.styles, css`
       :host {
@@ -79,14 +86,22 @@ var PcStats = class extends PcElement {
 	]);
 	/** The canvas whose pointer is followed */
 	followed;
-	/** The animation frame the next update waits for, if any */
-	frame;
+	/** The timer the next read of the colour waits for, if any */
+	timer;
 	onPointer = () => {
-		this.frame ??= requestAnimationFrame(() => {
-			this.frame = void 0;
-			this.requestUpdate();
-		});
+		this.timer ??= setTimeout(() => {
+			this.timer = void 0;
+			this.readColour();
+		}, 100);
 	};
+	/**
+	* Read the colour under the followed canvas's pointer, unless a stroke is being drawn (reading would slow it down).
+	*/
+	readColour() {
+		const app = this.followed;
+		if (!app || app.strokes.drawing) return;
+		this.colour = app.pointer && app.sampleColour(app.pointer);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.follow(this.app);
@@ -94,8 +109,6 @@ var PcStats = class extends PcElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.follow(void 0);
-		if (this.frame !== void 0) cancelAnimationFrame(this.frame);
-		this.frame = void 0;
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
@@ -106,13 +119,16 @@ var PcStats = class extends PcElement {
 	*/
 	follow(app) {
 		this.followed?.removeEventListener("pointer", this.onPointer);
+		clearTimeout(this.timer);
+		this.timer = void 0;
+		this.colour = void 0;
 		this.followed = app;
 		app?.addEventListener("pointer", this.onPointer);
 	}
 	render() {
 		const app = this.app;
 		if (!app) return nothing;
-		const colour = app.pointer && app.sampleColour(app.pointer);
+		const colour = this.colour;
 		const autosave = app.autosave;
 		return html`<ul
       part="stats"
@@ -141,4 +157,4 @@ var PcStats = class extends PcElement {
 	}
 };
 defineElement("pc-stats", PcStats);
-export { PcStats, formatBytes };
+export { COLOUR_INTERVAL_MS, PcStats, formatBytes };

package/dist/ui/elements/PcThemePicker/index.d.ts

@@ -1,25 +1,19 @@
 import { PcElement } from "../../base";
 import type { IconName } from "../../icons";
+import { THEMES, isTheme, type Theme, type UiSettingsLike } from "../../../lib/classes/UiSettings";
 import "../PcButtonGroup";
-/** The themes to pick from: light, dark, or following the device (auto) */
-export declare const THEMES: readonly ["light", "dark", "auto"];
-export type Theme = (typeof THEMES)[number];
+export { THEMES, isTheme, type Theme };
 /** Each theme's icon */
 export declare const THEME_ICONS: Readonly<Record<Theme, IconName>>;
 /**
- * Whether a value is one of the themes.
- *
- * @example
- * isTheme("dark"); // true
- * isTheme(undefined); // false
- */
-export declare const isTheme: (value: unknown) => value is Theme;
-/**
- * Picks the light, dark or automatic theme (which follows the device), as a labelled group of three radios joined into
+ * Picks the light, dark or system theme (which follows the device's), as a labelled group of three radios joined into
  * one pill (a joined `<pc-button-group>`), each with its icon (sun, moon and star) and name; the picked one is purple.
- * Shows the theme of its `target` (the page's root element by default; light unless it has another), and sets the
+ * Shows the theme of its `target` (the page's root element by default; system unless it has another), and sets the
  * target's `data-pc-theme` when the user picks one, firing `change` (detail: the theme).
  *
+ * With `settings` (e.g. the canvas's `ui`), it shows and keeps the theme there instead, and sets the target's theme
+ * whenever theirs changes (e.g. when restored), so it's kept with the other app settings.
+ *
  * @example
  * html`<pc-theme-picker @change=${(e) => save(e.detail)}></pc-theme-picker>`
  */
@@ -29,6 +23,9 @@ export declare class PcThemePicker extends PcElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        settings: {
+            attribute: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -41,15 +38,20 @@ export declare class PcThemePicker extends PcElement {
     theme: Theme;
     /** The element whose `data-pc-theme` is shown and set (the page's root element by default) */
     target?: HTMLElement;
+    /** Where the theme is kept, if anywhere (e.g. the canvas's `ui`) */
+    settings?: UiSettingsLike;
+    private changes;
     constructor();
     connectedCallback(): void;
+    /** Show the kept theme, and set it on the target */
+    protected willUpdate(): void;
     /** The element whose theme is shown and set */
     private get themeTarget();
     /**
-     * Pick a theme: show it, set it on the target and tell listeners.
+     * Pick a theme: show it, keep it in the settings (if any), set it on the target and tell listeners.
      *
      * @example
-     * picker.pick("auto");
+     * picker.pick("system");
      */
     pick(theme: Theme): void;
     render(): import("lit").TemplateResult<1>;

package/dist/ui/elements/PcThemePicker/index.js

@@ -1,34 +1,25 @@
 import { ICON_CONTROLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { THEMES, isTheme } from "../../../lib/classes/UiSettings/index.js";
 import "../PcButtonGroup/index.js";
 import { css, html, unsafeCSS } from "lit";
 // src/ui/elements/PcThemePicker/index.ts
-/** The themes to pick from: light, dark, or following the device (auto) */
-var THEMES = [
-	"light",
-	"dark",
-	"auto"
-];
 /** Each theme's icon */
 var THEME_ICONS = {
 	light: "sun",
 	dark: "moon",
-	auto: "star"
+	system: "star"
 };
 /**
-* Whether a value is one of the themes.
-*
-* @example
-* isTheme("dark"); // true
-* isTheme(undefined); // false
-*/
-var isTheme = (value) => THEMES.includes(value);
-/**
-* Picks the light, dark or automatic theme (which follows the device), as a labelled group of three radios joined into
+* Picks the light, dark or system theme (which follows the device's), as a labelled group of three radios joined into
 * one pill (a joined `<pc-button-group>`), each with its icon (sun, moon and star) and name; the picked one is purple.
-* Shows the theme of its `target` (the page's root element by default; light unless it has another), and sets the
+* Shows the theme of its `target` (the page's root element by default; system unless it has another), and sets the
 * target's `data-pc-theme` when the user picks one, firing `change` (detail: the theme).
 *
+* With `settings` (e.g. the canvas's `ui`), it shows and keeps the theme there instead, and sets the target's theme
+* whenever theirs changes (e.g. when restored), so it's kept with the other app settings.
+*
 * @example
 * html`<pc-theme-picker @change=${(e) => save(e.detail)}></pc-theme-picker>`
 */
@@ -38,7 +29,8 @@ var PcThemePicker = class extends PcElement {
 		theme: {
 			type: String,
 			reflect: true
-		}
+		},
+		settings: { attribute: false }
 	};
 	static styles = [
 		PcElement.styles,
@@ -88,27 +80,36 @@ var PcThemePicker = class extends PcElement {
 	];
 	/** The element whose `data-pc-theme` is shown and set (the page's root element by default) */
 	target;
+	changes = new ChangeController(this, () => [this.settings]);
 	constructor() {
 		super();
-		this.theme = "light";
+		this.theme = "system";
 	}
 	connectedCallback() {
 		super.connectedCallback();
 		const current = this.themeTarget.dataset.pcTheme;
 		if (isTheme(current)) this.theme = current;
 	}
+	/** Show the kept theme, and set it on the target */
+	willUpdate() {
+		const theme = this.settings?.data.theme;
+		if (theme === void 0) return;
+		this.theme = theme;
+		this.themeTarget.dataset.pcTheme = theme;
+	}
 	/** The element whose theme is shown and set */
 	get themeTarget() {
 		return this.target ?? document.documentElement;
 	}
 	/**
-	* Pick a theme: show it, set it on the target and tell listeners.
+	* Pick a theme: show it, keep it in the settings (if any), set it on the target and tell listeners.
 	*
 	* @example
-	* picker.pick("auto");
+	* picker.pick("system");
 	*/
 	pick(theme) {
 		this.theme = theme;
+		this.settings?.update({ theme });
 		this.themeTarget.dataset.pcTheme = theme;
 		emit(this, "change", theme);
 	}