@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

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

@@ -0,0 +1,296 @@
+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";
+// src/ui/elements/PcMenu/index.ts
+/** 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
+* hasStart({ value: "grid", label: "Grid", checked: false }); // true
+*/
+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. 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.
+*
+* @example
+* html`<pc-menu open .x=${10} .y=${20} label="Layer actions" .items=${items}
+*   @pc-select=${(e) => act(e.detail.value)} @pc-close=${close}></pc-menu>`
+*/
+var PcMenu = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		open: {
+			type: Boolean,
+			reflect: true
+		},
+		items: { attribute: false },
+		label: { type: String },
+		x: { type: Number },
+		y: { type: Number },
+		anchor: { attribute: false }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        position: fixed;
+        z-index: 10;
+        display: none;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+      :host([open]) {
+        display: block;
+      }
+      [role="menu"] {
+        display: flex;
+        min-width: 160px;
+        max-width: min(320px, calc(100vw - 2 * var(--pc-space-3)));
+        flex-direction: column;
+        padding: var(--pc-space-1) 0;
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        box-shadow: var(--pc-shadow);
+      }
+      button {
+        display: flex;
+        align-items: baseline;
+        gap: var(--pc-space-2);
+        padding: var(--pc-space-2) var(--pc-space-3);
+        border: 0;
+        background: transparent;
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+        text-align: start;
+        cursor: pointer;
+      }
+      button:hover:not(:disabled),
+      button:focus-visible {
+        background: var(--pc-surface-hover);
+        outline: none;
+      }
+      button:focus-visible {
+        box-shadow: inset 0 0 0 var(--pc-focus-width) var(--pc-focus);
+      }
+      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;
+        display: inline-flex;
+        width: var(--pc-icon-size);
+        flex: none;
+        align-self: center;
+        justify-content: center;
+      }
+      .label {
+        flex: 1;
+        overflow-wrap: anywhere;
+      }
+      .end {
+        flex: none;
+        color: var(--pc-text-muted);
+        white-space: nowrap;
+      }
+      button:disabled {
+        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)) return;
+		markDismissingPress(event);
+		this.close();
+	};
+	constructor() {
+		super();
+		this.open = false;
+		this.items = [];
+		this.label = "";
+		this.x = 0;
+		this.y = 0;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("pointerdown", this.onPointerDown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("pointerdown", this.onPointerDown, true);
+	}
+	updated(changed) {
+		this.style.left = `${this.x}px`;
+		this.style.top = `${this.y}px`;
+		if (changed.has("open") && this.open) this.buttons()[0]?.focus();
+	}
+	/** The enabled items' buttons */
+	buttons() {
+		return [...this.renderRoot.querySelectorAll("button")].filter((button) => !button.disabled);
+	}
+	/** Tell listeners the menu should close */
+	close() {
+		emit(this, "pc-close");
+	}
+	/** Choose an item, then close */
+	choose(item) {
+		emit(this, "pc-select", { value: item.value });
+		this.close();
+	}
+	/** Move focus between items, or close */
+	onKeyDown(event) {
+		const buttons = this.buttons();
+		const index = buttons.indexOf(this.renderRoot.activeElement);
+		const last = buttons.length - 1;
+		const target = {
+			ArrowDown: index >= last ? 0 : index + 1,
+			ArrowUp: index <= 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (target !== void 0) {
+			event.preventDefault();
+			buttons[target]?.focus();
+		} else if (event.key === "Escape" || event.key === "Tab") {
+			event.preventDefault();
+			this.close();
+		}
+	}
+	/** An item's left side: a checkmark while a toggle is on, its icon, or empty space */
+	renderStart(item) {
+		const content = item.checked !== void 0 ? item.checked ? "✔" : nothing : item.icon ? html`<pc-icon name=${item.icon}></pc-icon>` : nothing;
+		return html`<span part="item-start" class="start" aria-hidden="true"
+      >${content}</span
+    >`;
+	}
+	/** An item's right side: its shortcut's label, if short enough */
+	renderEnd(item) {
+		const label = item.shortcut && shortcutLabel(item.shortcut);
+		return label && [...label].length <= 3 ? html`<span part="item-end" class="end" aria-hidden="true"
+          >${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((entry) => isMenuItem(entry) && hasStart(entry));
+		return html`<div
+      part="menu"
+      role="menu"
+      aria-label=${this.label}
+      @keydown=${this.onKeyDown}
+    >
+      ${menuSections(this.items).map((section, index) => this.renderSection(section, index, showStart))}
+    </div>`;
+	}
+};
+defineElement("pc-menu", 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 };