@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -1,4 +1,5 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
 import { ariaKeyShortcut, shortcutLabel } from "../../../lib/utils/shortcuts/index.js";
 import "../PcIcon/index.js";
 import { css, html, nothing } from "lit";
@@ -6,6 +7,14 @@ import { css, html, nothing } from "lit";
 /** Longest shortcut label shown on a menu item (characters); longer ones are left out */
 var MAX_SHORTCUT_LABEL_LENGTH = 3;
 /**
+* Whether a menu entry is an item that can be chosen.
+*
+* @example
+* isMenuItem({ value: "grid", label: "Grid" }); // true
+* isMenuItem({ type: "divider" }); // false
+*/
+var isMenuItem = (entry) => entry.type === void 0 || entry.type === "item";
+/**
 * Whether a menu item has something to show on its left: a checkmark or an icon.
 *
 * @example
@@ -13,10 +22,46 @@ var MAX_SHORTCUT_LABEL_LENGTH = 3;
 */
 var hasStart = (item) => item.checked !== void 0 || item.icon !== void 0;
 /**
+* A menu item's classes: `danger` and `selected`, when it is.
+*
+* @example
+* itemClasses({ value: "brush", label: "Brush", selected: true }); // "selected"
+*/
+var itemClasses = (item) => [item.danger && "danger", item.selected && "selected"].filter(Boolean).join(" ");
+/**
+* Split menu entries into sections: a label or divider starts a new one.
+*
+* @example
+* menuSections([{ type: "label", label: "Tools" }, { value: "brush", label: "Brush" }]);
+* // [{ label: "Tools", items: [{ value: "brush", label: "Brush" }], divided: false }]
+*/
+var menuSections = (entries) => {
+	const sections = [{
+		items: [],
+		divided: false
+	}];
+	for (const entry of entries) {
+		const current = sections[sections.length - 1];
+		if (isMenuItem(entry)) current.items.push(entry);
+		else if (entry.type === "divider") sections.push({
+			items: [],
+			divided: true
+		});
+		else if (current.items.length === 0 && current.label === void 0) current.label = entry.label;
+		else sections.push({
+			label: entry.label,
+			items: [],
+			divided: false
+		});
+	}
+	return sections.filter((section) => section.divided || section.label !== void 0 || section.items.length);
+};
+/**
 * A list of menu items, e.g. a layer's actions (see `pc-context-menu` for a button that opens one). While `open`, it shows its items at `x`, `y` (in the page's viewport) and takes
 * keyboard focus: arrow keys, Home and End move between items, Enter or Space chooses one, and Escape or Tab closes it.
 * Items can show a checkmark (toggles) or an icon on their left, and their keyboard shortcut on their right; long
-* labels wrap.
+* labels wrap. Non-interactive labels (`{ type: "label", label }`, small bold text naming the items after them) and
+* dividers (`{ type: "divider" }`) can go between items; keyboard focus skips them.
 * Fires `pc-select` with the chosen item's value, and `pc-close` when it should close (after choosing, Escape, Tab, or a
 * press outside it and its `anchor`). The implementer sets `open` to false in response.
 *
@@ -42,6 +87,8 @@ var PcMenu = class extends PcElement {
         position: fixed;
         z-index: 10;
         display: none;
+        user-select: none;
+        -webkit-user-select: none;
       }
       :host([open]) {
         display: block;
@@ -80,6 +127,16 @@ var PcMenu = class extends PcElement {
       button.danger {
         color: var(--pc-dismiss-text);
       }
+      /* The current choice, e.g. the selected tool, like other selected buttons */
+      button.selected,
+      button.selected:hover:not(:disabled),
+      button.selected:focus-visible {
+        background: var(--pc-accent);
+        color: var(--pc-accent-text);
+      }
+      button.selected .end {
+        color: inherit;
+      }
       .start {
         /* Icons as tall as the text, so items with icons are no taller */
         --pc-icon-size: 1.2em;
@@ -102,10 +159,29 @@ var PcMenu = class extends PcElement {
         color: var(--pc-text-muted);
         cursor: default;
       }
+      [role="group"] {
+        display: flex;
+        flex-direction: column;
+      }
+      .heading {
+        padding: var(--pc-space-2) var(--pc-space-3) var(--pc-space-1);
+        color: var(--pc-text-muted);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size-small);
+        font-weight: bold;
+        cursor: default;
+      }
+      [role="separator"] {
+        height: 1px;
+        margin: var(--pc-space-1) 0;
+        background: var(--pc-border);
+      }
     `];
 	onPointerDown = (event) => {
 		const path = event.composedPath();
-		if (this.open && !path.includes(this) && !(this.anchor && path.includes(this.anchor))) this.close();
+		if (!this.open || path.includes(this) || this.anchor && path.includes(this.anchor)) return;
+		markDismissingPress(event);
+		this.close();
 	};
 	constructor() {
 		super();
@@ -174,31 +250,47 @@ var PcMenu = class extends PcElement {
           >${label}</span
         >` : nothing;
 	}
+	/** An item's button */
+	renderItem(item, showStart) {
+		return html`<button
+      part="item"
+      type="button"
+      role=${item.checked === void 0 ? "menuitem" : "menuitemcheckbox"}
+      aria-checked=${item.checked === void 0 ? nothing : String(item.checked)}
+      aria-keyshortcuts=${item.shortcut ? ariaKeyShortcut(item.shortcut) : nothing}
+      class=${itemClasses(item) || nothing}
+      aria-current=${item.selected ? "true" : nothing}
+      ?disabled=${item.disabled}
+      data-value=${item.value}
+      @click=${() => this.choose(item)}
+    >
+      ${showStart ? this.renderStart(item) : nothing}<span class="label"
+        >${item.label}</span
+      >${this.renderEnd(item)}
+    </button>`;
+	}
+	/** A section: its divider and label, if any, and its items (grouped under the label for screen readers) */
+	renderSection(section, index, showStart) {
+		const items = section.items.map((item) => this.renderItem(item, showStart));
+		const id = `menu-label-${index}`;
+		return html`${section.divided ? html`<div part="divider" role="separator"></div>` : nothing}${section.label === void 0 ? items : html`<div role="group" aria-labelledby=${id}>
+            <div part="label" class="heading" id=${id} role="presentation">
+              ${section.label}
+            </div>
+            ${items}
+          </div>`}`;
+	}
 	render() {
-		const showStart = this.items.some(hasStart);
+		const showStart = this.items.some((entry) => isMenuItem(entry) && hasStart(entry));
 		return html`<div
       part="menu"
       role="menu"
       aria-label=${this.label}
       @keydown=${this.onKeyDown}
     >
-      ${this.items.map((item) => html`<button
-            part="item"
-            type="button"
-            role=${item.checked === void 0 ? "menuitem" : "menuitemcheckbox"}
-            aria-checked=${item.checked === void 0 ? nothing : String(item.checked)}
-            aria-keyshortcuts=${item.shortcut ? ariaKeyShortcut(item.shortcut) : nothing}
-            class=${item.danger ? "danger" : nothing}
-            ?disabled=${item.disabled}
-            data-value=${item.value}
-            @click=${() => this.choose(item)}
-          >
-            ${showStart ? this.renderStart(item) : nothing}<span class="label"
-              >${item.label}</span
-            >${this.renderEnd(item)}
-          </button>`)}
+      ${menuSections(this.items).map((section, index) => this.renderSection(section, index, showStart))}
     </div>`;
 	}
 };
 defineElement("pc-menu", PcMenu);
-export { MAX_SHORTCUT_LABEL_LENGTH, PcMenu };
+export { MAX_SHORTCUT_LABEL_LENGTH, PcMenu, isMenuItem, menuSections };

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

@@ -0,0 +1,137 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+/**
+ * A number kept within `min` and `max` and rounded to a multiple of `step` (from `min`).
+ *
+ * @example
+ * fitNumber(300, 1, 256, 1); // 256
+ * fitNumber(12.4, 0, 100, 5); // 10
+ * fitNumber(45.678, -360, 360, 0.01); // 45.68
+ */
+export declare const fitNumber: (value: number, min: number, max: number, step: number) => number;
+/**
+ * A number shown as text that changes when pressed and dragged: right or up raises it, left or down lowers it, a step
+ * per pixel (or `drag-step`), within `min` and `max`. A press that barely moves (a tap or click) turns it into a field to type a value
+ * in: Enter or leaving the field keeps the value, Escape cancels.
+ *
+ * With keyboard focus, the arrow keys change it by `step`, Page Up and Page Down by `pageStep`, Home and End go to
+ * `min` and `max`, and Enter or F2 starts typing.
+ *
+ * Fires `pc-change` (detail: `{ value }`) when the value changes, after changing `value` itself. Bind a value that
+ * may be changed by others with `live()`, e.g. `.value=${live(brush.width)}`, so it's shown again if a listener keeps
+ * it the same.
+ *
+ * @example
+ * html`<pc-number-slider label="Opacity" min="0" max="100" unit="%" .value=${live(50)}
+ *   @pc-change=${(e) => setOpacity(e.detail.value)}></pc-number-slider>`
+ */
+export declare class PcNumberSlider extends PcElement {
+    static properties: {
+        value: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        pageStep: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        dragStep: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        unit: {
+            type: StringConstructor;
+        };
+        text: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        editing: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The number */
+    value: number;
+    /** Lowest value (0 by default) */
+    min: number;
+    /** Highest value (100 by default) */
+    max: number;
+    /** How much a pixel of dragging or an arrow key changes it (1 by default) */
+    step: number;
+    /** How much Page Up and Page Down change it (10 steps by default) */
+    pageStep?: number;
+    /** How much a pixel of dragging changes it (`step` by default), e.g. 1 for an angle typed to 0.01 */
+    dragStep?: number;
+    /** Shown after the value, e.g. "%" */
+    unit: string;
+    /** Shown instead of the value and unit, e.g. "30 × 10" */
+    text: string;
+    /** Its name for screen readers, e.g. "Opacity" */
+    label: string;
+    disabled: boolean;
+    /** Whether it's a field being typed in */
+    editing: boolean;
+    /** Whether focus goes back to the slider when typing ends (it doesn't when the field lost focus) */
+    private refocus;
+    private readonly drag;
+    constructor();
+    /** The value as shown: `text`, or the value and unit */
+    get displayText(): string;
+    /**
+     * Set the value (fitted within `min` and `max`, to a multiple of `step`) and tell listeners if it changed.
+     *
+     * @example
+     * slider.change(40); // fires pc-change with { value: 40 }
+     */
+    change(value: number): void;
+    /**
+     * Turn into a field to type a value in, with its text selected.
+     */
+    startEditing(): void;
+    /**
+     * Stop typing, keeping the typed value (if it's a number) unless cancelled.
+     */
+    private stopEditing;
+    /** Start a press, unless disabled */
+    private onPointerDown;
+    /** End a press: one that didn't become a drag starts typing */
+    private onPointerUp;
+    /** Change the value with the arrow keys, Page Up and Page Down, Home and End, or start typing (Enter, F2) */
+    private onSliderKeyDown;
+    /** Keep the typed value with Enter, or cancel with Escape (neither reaches the rest of the page) */
+    private onInputKeyDown;
+    /**
+     * Keep the typed value when the field loses focus, leaving focus where it went. Ignored once typing has ended (some
+     * browsers blur the field as it's removed).
+     */
+    private onInputBlur;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,247 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { PointerDrag } from "../../drag/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcNumberSlider/index.ts
+/**
+* A number kept within `min` and `max` and rounded to a multiple of `step` (from `min`).
+*
+* @example
+* fitNumber(300, 1, 256, 1); // 256
+* fitNumber(12.4, 0, 100, 5); // 10
+* fitNumber(45.678, -360, 360, 0.01); // 45.68
+*/
+var fitNumber = (value, min, max, step) => {
+	const decimals = String(step).split(".")[1]?.length ?? 0;
+	const stepped = Number((min + Math.round((value - min) / step) * step).toFixed(decimals));
+	return Math.min(max, Math.max(min, stepped));
+};
+/**
+* A number shown as text that changes when pressed and dragged: right or up raises it, left or down lowers it, a step
+* per pixel (or `drag-step`), within `min` and `max`. A press that barely moves (a tap or click) turns it into a field to type a value
+* in: Enter or leaving the field keeps the value, Escape cancels.
+*
+* With keyboard focus, the arrow keys change it by `step`, Page Up and Page Down by `pageStep`, Home and End go to
+* `min` and `max`, and Enter or F2 starts typing.
+*
+* Fires `pc-change` (detail: `{ value }`) when the value changes, after changing `value` itself. Bind a value that
+* may be changed by others with `live()`, e.g. `.value=${live(brush.width)}`, so it's shown again if a listener keeps
+* it the same.
+*
+* @example
+* html`<pc-number-slider label="Opacity" min="0" max="100" unit="%" .value=${live(50)}
+*   @pc-change=${(e) => setOpacity(e.detail.value)}></pc-number-slider>`
+*/
+var PcNumberSlider = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		value: { type: Number },
+		min: { type: Number },
+		max: { type: Number },
+		step: { type: Number },
+		pageStep: {
+			type: Number,
+			attribute: "page-step"
+		},
+		dragStep: {
+			type: Number,
+			attribute: "drag-step"
+		},
+		unit: { type: String },
+		text: { type: String },
+		label: { type: String },
+		disabled: {
+			type: Boolean,
+			reflect: true
+		},
+		editing: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+        min-width: 44px;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+      [role="slider"],
+      input {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-width: 0;
+        min-height: 30px;
+        margin: 0;
+        padding: 0 var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        white-space: nowrap;
+      }
+      [role="slider"] {
+        cursor: ew-resize;
+        touch-action: none;
+      }
+      [role="slider"]:hover {
+        background: var(--pc-surface-hover);
+      }
+      [role="slider"]:focus-visible,
+      input:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: -2px;
+      }
+      input {
+        user-select: text;
+        -webkit-user-select: text;
+      }
+      :host([disabled]) [role="slider"] {
+        opacity: 0.4;
+        cursor: default;
+      }
+    `];
+	/** Whether focus goes back to the slider when typing ends (it doesn't when the field lost focus) */
+	refocus = false;
+	drag = new PointerDrag((delta) => this.change(this.value + delta * (this.dragStep ?? this.step)), 4);
+	constructor() {
+		super();
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.unit = "";
+		this.text = "";
+		this.label = "";
+		this.disabled = false;
+		this.editing = false;
+	}
+	/** The value as shown: `text`, or the value and unit */
+	get displayText() {
+		return this.text || `${this.value}${this.unit}`;
+	}
+	/**
+	* Set the value (fitted within `min` and `max`, to a multiple of `step`) and tell listeners if it changed.
+	*
+	* @example
+	* slider.change(40); // fires pc-change with { value: 40 }
+	*/
+	change(value) {
+		const next = fitNumber(value, this.min, this.max, this.step);
+		if (next === this.value) return;
+		this.value = next;
+		emit(this, "pc-change", { value: next });
+	}
+	/**
+	* Turn into a field to type a value in, with its text selected.
+	*/
+	startEditing() {
+		if (this.disabled) return;
+		this.refocus = true;
+		this.editing = true;
+		this.performUpdate();
+	}
+	/**
+	* Stop typing, keeping the typed value (if it's a number) unless cancelled.
+	*/
+	stopEditing(keep) {
+		const typed = this.renderRoot.querySelector("input").value.trim();
+		this.editing = false;
+		if (keep && typed !== "" && Number.isFinite(Number(typed))) this.change(Number(typed));
+	}
+	/** Start a press, unless disabled */
+	onPointerDown(event) {
+		if (!this.disabled) this.drag.start(event);
+	}
+	/** End a press: one that didn't become a drag starts typing */
+	onPointerUp() {
+		if (this.disabled) return;
+		if (!this.drag.end()) this.startEditing();
+	}
+	/** Change the value with the arrow keys, Page Up and Page Down, Home and End, or start typing (Enter, F2) */
+	onSliderKeyDown(event) {
+		if (this.disabled) return;
+		const page = this.pageStep ?? this.step * 10;
+		const action = {
+			ArrowUp: () => this.change(this.value + this.step),
+			ArrowRight: () => this.change(this.value + this.step),
+			ArrowDown: () => this.change(this.value - this.step),
+			ArrowLeft: () => this.change(this.value - this.step),
+			PageUp: () => this.change(this.value + page),
+			PageDown: () => this.change(this.value - page),
+			Home: () => this.change(this.min),
+			End: () => this.change(this.max),
+			Enter: () => this.startEditing(),
+			F2: () => this.startEditing()
+		}[event.key];
+		if (!action) return;
+		event.preventDefault();
+		action();
+	}
+	/** Keep the typed value with Enter, or cancel with Escape (neither reaches the rest of the page) */
+	onInputKeyDown(event) {
+		if (event.key !== "Enter" && event.key !== "Escape") return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.stopEditing(event.key === "Enter");
+	}
+	/**
+	* Keep the typed value when the field loses focus, leaving focus where it went. Ignored once typing has ended (some
+	* browsers blur the field as it's removed).
+	*/
+	onInputBlur() {
+		if (!this.editing) return;
+		this.refocus = false;
+		this.stopEditing(true);
+	}
+	willUpdate(changed) {
+		if (changed.has("disabled") && this.disabled) this.editing = false;
+	}
+	updated(changed) {
+		if (!changed.has("editing")) return;
+		if (this.editing) {
+			const input = this.renderRoot.querySelector("input");
+			input.focus();
+			input.select();
+		} else if (changed.get("editing") && this.refocus) this.renderRoot.querySelector("[role=slider]").focus();
+	}
+	render() {
+		const text = this.displayText;
+		if (this.editing) return html`<input
+        part="field"
+        type="text"
+        inputmode="decimal"
+        aria-label=${this.label || nothing}
+        .value=${String(this.value)}
+        @keydown=${this.onInputKeyDown}
+        @blur=${this.onInputBlur}
+      />`;
+		return html`<div
+      part="control"
+      role="slider"
+      tabindex=${this.disabled ? -1 : 0}
+      aria-label=${this.label || nothing}
+      aria-valuemin=${this.min}
+      aria-valuemax=${this.max}
+      aria-valuenow=${this.value}
+      aria-valuetext=${text}
+      aria-disabled=${this.disabled ? "true" : nothing}
+      title=${this.t("paintCanvas.numberSlider.hint")}
+      @pointerdown=${this.onPointerDown}
+      @pointermove=${this.drag.move}
+      @pointerup=${this.onPointerUp}
+      @pointercancel=${this.drag.end}
+      @keydown=${this.onSliderKeyDown}
+    >
+      ${text}
+    </div>`;
+	}
+};
+defineElement("pc-number-slider", PcNumberSlider);
+export { PcNumberSlider, fitNumber };

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

@@ -1,7 +1,7 @@
 import { nothing, type PropertyValues, type TemplateResult } from "lit";
 import { PcElement } from "../../base";
 import { PcPanel } from "../PcPanel";
-import type { SideMode } from "../../layout";
+import { type SideMode } from "../../layout";
 /** Which way a pane's start, middle and end run */
 export type PaneOrientation = "vertical" | "horizontal";
 /** Which edge of the layout a pane is on: panels opened from its rail, and its floating box, go the other way */
@@ -20,6 +20,8 @@ export declare const PANE_COLLAPSE_EVENT = "pc-collapse";
  *   button again closes it, and focus goes back to the button.
  * - `floating`: the pane floats over the canvas as a box that collapses to a button (`collapsed`, named with its
  *   `label`), firing `pc-collapse` when it's shown or collapsed.
+ * - `overlay`: a rail over the canvas, without a background: each button has its own, and presses between them reach
+ *   the canvas. Its panels stay solid.
  *
  * Panes made for one purpose extend it and put their own content in its regions (see `renderStart`, `renderMiddle`
  * and `renderEnd`), e.g. `<pc-toolbar>`.