@lvl99dotcom/paintcanvas 0.5.0 → 0.6.0

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

@@ -1,7 +1,8 @@
+import { PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import { SHORTCUT_DEFINITIONS, comboFromEvent, comboText, heldModifiers } from "../../../lib/utils/shortcuts/index.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcShortcutSettings/index.ts
 /** Keys used to move through and leave the settings, which are never recorded */
 var PASSED_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape"]);
@@ -38,7 +39,10 @@ var PcShortcutSettings = class extends PcElement {
 		recording: { state: true },
 		status: { state: true }
 	};
-	static styles = [PcElement.styles, css`
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		css`
       :host {
         display: flex;
         flex-direction: column;
@@ -131,17 +135,9 @@ var PcShortcutSettings = class extends PcElement {
       }
       button.reset {
         align-self: flex-start;
-        min-height: var(--pc-control-size);
-        padding: var(--pc-space-1) var(--pc-space-3);
-        border: 0;
-        border-radius: var(--pc-radius-pill);
-        background: var(--pc-accent);
-        color: var(--pc-accent-text);
-        font: inherit;
-        font-weight: bold;
-        cursor: pointer;
       }
-    `];
+    `
+	];
 	changes = new ChangeController(this, () => [this.settings]);
 	constructor() {
 		super();
@@ -259,7 +255,7 @@ var PcShortcutSettings = class extends PcElement {
       <p class="status" role="status">${this.status}</p>
       <button
         type="button"
-        class="reset"
+        class="pill reset"
         @click=${() => {
 			settings.reset();
 			this.status = this.t("paintCanvas.shortcuts.wasReset");

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

@@ -0,0 +1,147 @@
+import { PcElement } from "../../base";
+import "../PcNumberSlider";
+/** One of a range's two ends: its lowest or highest value */
+export type RangeEnd = "low" | "high";
+/** What `pc-input` and `pc-change` give: the range's lowest and highest values */
+export interface RangeDetail {
+    /** A single slider's value (the same as `high`) */
+    value: number;
+    low: number;
+    high: number;
+}
+/**
+ * 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
+ */
+export declare const rangeFraction: (value: number, min: number, max: number) => number;
+/**
+ * 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>`
+ */
+export declare class PcSliderRange extends PcElement {
+    static properties: {
+        low: {
+            type: NumberConstructor;
+        };
+        high: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        pageStep: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        unit: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        single: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        numberPosition: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dragging: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The range's lowest value */
+    low: number;
+    /** The range's highest value */
+    high: number;
+    /** Lowest value either end can have (0 by default) */
+    min: number;
+    /** Highest value either end can have (100 by default) */
+    max: number;
+    /** What values are rounded to, and how much an arrow key moves a handle (1 by default) */
+    step: number;
+    /** How much Page Up and Page Down move a handle (10 steps by default) */
+    pageStep?: number;
+    /** Shown after each value, e.g. "%" */
+    unit: string;
+    /** The range's name for screen readers, e.g. "Width" (each end is named from it) */
+    label: string;
+    disabled: boolean;
+    /** Whether it's a slider for one value (`value`), with one handle and one number slider */
+    single: boolean;
+    /** Where a single slider's number slider goes: before the track (`start`, the default) or after it (`end`) */
+    numberPosition: "start" | "end";
+    /** A single slider's value: the same as `high` */
+    get value(): number;
+    set value(value: number);
+    /** What `pc-input` and `pc-change` give */
+    private get detail();
+    /** How far an end can go: not past the other end (a single slider's value can go down to `min`) */
+    private limitsOf;
+    /** An end's name for screen readers: a single slider's is its label */
+    private endLabel;
+    /** The end being dragged, if any */
+    dragging?: RangeEnd;
+    constructor();
+    /**
+     * 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: RangeEnd, value: number, type?: string): void;
+    /** The value at a pointer's position along the track */
+    private valueAt;
+    /** The end nearest a value: the high end when it's above both, or past the middle of two that meet */
+    private nearestEnd;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Move a handle with the arrow keys, Page Up and Page Down, Home and End */
+    private onHandleKeyDown;
+    /** One end's handle */
+    private renderHandle;
+    /** One end's number slider: it can't go past the other end */
+    private renderNumber;
+    render(): import("lit").TemplateResult<1>;
+}

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 };