@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

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

@@ -0,0 +1,125 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { css, html } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcColourPair/index.ts
+/** Event fired when the foreground or background colour is pressed (detail: `{ slot }`) */
+var COLOUR_CLICK_EVENT = "pc-colour-click";
+/** The two colours, foreground first */
+var SLOTS = ["foreground", "background"];
+/**
+* The foreground and background colours as two overlapping circles in a square (the foreground at the top left), the
+* one selected for configuration outlined and on top. Pressing either fires `pc-colour-click` with its `slot`; the
+* implementer decides what it does (e.g. select it and open a colour palette). `openPicker()` opens the browser's colour
+* picker for the selected colour, which sets it. Sized by `--pc-colour-pair-size` (50px by default).
+*
+* @example
+* html`<pc-colour-pair .app=${app} @pc-colour-click=${(e) => app.selectColour(e.detail.slot)}></pc-colour-pair>`
+*/
+var PcColourPair = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        --size: var(--pc-colour-pair-size, 50px);
+        position: relative;
+        display: block;
+        flex: none;
+        width: var(--size);
+        height: var(--size);
+        background: var(--pc-text-muted);
+      }
+      button {
+        position: absolute;
+        width: 56%;
+        height: 56%;
+        padding: 0;
+        border: 1px solid var(--pc-text);
+        border-radius: 50%;
+        background: var(--colour);
+        cursor: pointer;
+      }
+      .foreground {
+        top: 10%;
+        left: 10%;
+        z-index: 1;
+      }
+      .background {
+        right: 10%;
+        bottom: 10%;
+      }
+      /* The selected colour: on top, with a white ring outlined in black */
+      button[aria-pressed="true"] {
+        z-index: 2;
+        box-shadow:
+          0 0 0 2px #ffffff,
+          0 0 0 3px #000000;
+      }
+      button:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 4px;
+      }
+      /* Kept in place (invisible) so the browser's colour picker opens beside the colours */
+      input {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        border: 0;
+        opacity: 0;
+        pointer-events: none;
+      }
+    `];
+	changes = new ChangeController(this, () => [this.app]);
+	/**
+	* Open the browser's colour picker for the selected colour (call it while handling a press, as browsers only open
+	* pickers for one).
+	*/
+	openPicker() {
+		const input = this.renderRoot.querySelector("input");
+		if (!input) return;
+		try {
+			input.showPicker();
+		} catch {
+			input.click();
+		}
+	}
+	/** Tell listeners a colour was pressed */
+	onClick(slot) {
+		emit(this, COLOUR_CLICK_EVENT, { slot });
+	}
+	/** Set the selected colour from the browser's colour picker */
+	onPick(event) {
+		const app = this.app;
+		app?.setColour(event.target.value, app.selectedColour);
+	}
+	render() {
+		const app = this.app;
+		if (!app) return html``;
+		return html`${SLOTS.map((slot) => {
+			const colour = app.colours[slot];
+			return html`<button
+          type="button"
+          part=${slot}
+          class=${slot}
+          style="--colour: ${colour}"
+          title=${this.t(`paintCanvas.colours.${slot}`, { colour })}
+          aria-label=${this.t(`paintCanvas.colours.${slot}`, { colour })}
+          aria-pressed=${app.selectedColour === slot}
+          @click=${() => this.onClick(slot)}
+        ></button>`;
+		})}<input
+        type="color"
+        tabindex="-1"
+        aria-hidden="true"
+        .value=${live(app.colours[app.selectedColour])}
+        @input=${this.onPick}
+      />`;
+	}
+};
+defineElement("pc-colour-pair", PcColourPair);
+export { COLOUR_CLICK_EVENT, PcColourPair };

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

@@ -1,23 +1,43 @@
 import { type PropertyValues } from "lit";
 import { PcElement } from "../../base";
-/** An item in a context menu */
-export interface MenuItem {
-    /** What `pc-select` gives when it's chosen */
-    value: string;
-    label: string;
-    disabled?: boolean;
-    /** Shown in the cancelling colour, e.g. for deleting */
-    danger?: boolean;
-}
+import { PcMenu, type MenuEntry } from "../PcMenu";
+import "../PcMenu";
+/** Space kept between a context menu's menu and the window's edges */
+export declare const MENU_MARGIN = 8;
+/** Event fired when a context menu opens or closes (detail: `{ open }`) */
+export declare const CONTEXT_MENU_TOGGLE_EVENT = "pc-toggle";
+/** Where a context menu's menu opens: under its button, or beside it */
+export type MenuPlacement = "below" | "beside";
+/**
+ * Where a menu's top goes: level with its anchor, moved up as far as needed to stay in the window (but never above its
+ * top margin).
+ *
+ * @example
+ * menuTop(700, 300, 800); // 492 (moved up to fit)
+ * menuTop(100, 300, 800); // 100
+ */
+export declare const menuTop: (anchorTop: number, menuHeight: number, viewportHeight: number, margin?: number) => number;
+/**
+ * Where a menu's left edge goes: at `left`, moved left as far as needed to stay in the window (but never past its left
+ * margin).
+ *
+ * @example
+ * menuLeft(900, 200, 1000); // 792 (moved left to fit)
+ */
+export declare const menuLeft: (left: number, menuWidth: number, viewportWidth: number, margin?: number) => number;
 /**
- * A menu of actions, e.g. for a layer. 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.
- * 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). The implementer sets `open` to false in response.
+ * A button that opens a menu (`pc-menu`): its `icon` slot is what the button shows (⋮ by default), and its `menu` slot
+ * takes the `pc-menu` to open. Without one, it opens its own menu of `items`. Pressing the button (or right-clicking
+ * it) opens the menu under it (or beside it, with `placement="beside"`), kept within the window; choosing an item,
+ * pressing outside, Escape, Tab, scrolling or pressing the button again closes it, and focus returns to the button.
+ *
+ * Fires `pc-toggle` (detail: `{ open }`) when it opens or closes. The menu's `pc-select` (detail: `{ value }`) reaches
+ * the context menu's listeners.
  *
  * @example
- * html`<pc-context-menu open .x=${10} .y=${20} label="Layer actions" .items=${items}
- *   @pc-select=${(e) => act(e.detail.value)} @pc-close=${close}></pc-context-menu>`
+ * html`<pc-context-menu label="Layer actions" .items=${items} @pc-select=${(e) => act(e.detail.value)}>
+ *   <pc-icon slot="icon" name="menu"></pc-icon>
+ * </pc-context-menu>`
  */
 export declare class PcContextMenu extends PcElement {
     static properties: {
@@ -31,11 +51,16 @@ export declare class PcContextMenu extends PcElement {
         label: {
             type: StringConstructor;
         };
-        x: {
-            type: NumberConstructor;
+        menuLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        placement: {
+            type: StringConstructor;
         };
-        y: {
-            type: NumberConstructor;
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
         };
         translations: {
             attribute: boolean;
@@ -49,24 +74,36 @@ export declare class PcContextMenu extends PcElement {
         };
     };
     static styles: import("lit").CSSResultGroup[];
+    /** Whether the menu is open */
     open: boolean;
-    items: readonly MenuItem[];
-    /** Names the menu for screen readers */
+    /** The items of its own menu, when no `pc-menu` is slotted */
+    items: readonly MenuEntry[];
+    /** Names the button for screen readers */
     label: string;
-    x: number;
-    y: number;
-    private readonly onPointerDown;
+    /** Names the menu for screen readers (the button's `label` by default) */
+    menuLabel: string;
+    /** Where the menu opens: under the button (default) or beside it */
+    placement: MenuPlacement;
+    disabled: boolean;
+    private readonly onScroll;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
-    updated(changed: PropertyValues<this>): void;
-    /** The enabled items' buttons */
-    private buttons;
-    /** Tell listeners the menu should close */
-    close(): void;
-    /** Choose an item, then close */
-    private choose;
-    /** Move focus between items, or close */
-    private onKeyDown;
+    /** The menu it opens: the slotted `pc-menu`, or its own */
+    get menu(): PcMenu | undefined;
+    /** The button that opens the menu */
+    private get button();
+    /**
+     * Open or close the menu, telling listeners.
+     */
+    setOpen(open: boolean): void;
+    /** Open the menu on a right-click (instead of the browser's), or close it */
+    private onContextMenu;
+    /** Close the menu when it asks to, and return focus to the button */
+    private onClose;
+    /** Set up a newly slotted menu like the current one (open or closed) */
+    private onMenuSlotChange;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Put the open menu under or beside the button, within the window */
+    private place;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,15 +1,41 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { PcMenu } from "../PcMenu/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcContextMenu/index.ts
+/** Space kept between a context menu's menu and the window's edges */
+var MENU_MARGIN = 8;
+/** Event fired when a context menu opens or closes (detail: `{ open }`) */
+var CONTEXT_MENU_TOGGLE_EVENT = "pc-toggle";
 /**
-* A menu of actions, e.g. for a layer. 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.
-* 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). The implementer sets `open` to false in response.
+* Where a menu's top goes: level with its anchor, moved up as far as needed to stay in the window (but never above its
+* top margin).
 *
 * @example
-* html`<pc-context-menu open .x=${10} .y=${20} label="Layer actions" .items=${items}
-*   @pc-select=${(e) => act(e.detail.value)} @pc-close=${close}></pc-context-menu>`
+* menuTop(700, 300, 800); // 492 (moved up to fit)
+* menuTop(100, 300, 800); // 100
+*/
+var menuTop = (anchorTop, menuHeight, viewportHeight, margin = 8) => Math.max(margin, Math.min(anchorTop, viewportHeight - margin - menuHeight));
+/**
+* Where a menu's left edge goes: at `left`, moved left as far as needed to stay in the window (but never past its left
+* margin).
+*
+* @example
+* menuLeft(900, 200, 1000); // 792 (moved left to fit)
+*/
+var menuLeft = (left, menuWidth, viewportWidth, margin = 8) => Math.max(margin, Math.min(left, viewportWidth - margin - menuWidth));
+/**
+* A button that opens a menu (`pc-menu`): its `icon` slot is what the button shows (⋮ by default), and its `menu` slot
+* takes the `pc-menu` to open. Without one, it opens its own menu of `items`. Pressing the button (or right-clicking
+* it) opens the menu under it (or beside it, with `placement="beside"`), kept within the window; choosing an item,
+* pressing outside, Escape, Tab, scrolling or pressing the button again closes it, and focus returns to the button.
+*
+* Fires `pc-toggle` (detail: `{ open }`) when it opens or closes. The menu's `pc-select` (detail: `{ value }`) reaches
+* the context menu's listeners.
+*
+* @example
+* html`<pc-context-menu label="Layer actions" .items=${items} @pc-select=${(e) => act(e.detail.value)}>
+*   <pc-icon slot="icon" name="menu"></pc-icon>
+* </pc-context-menu>`
 */
 var PcContextMenu = class extends PcElement {
 	static properties = {
@@ -20,129 +46,134 @@ var PcContextMenu = class extends PcElement {
 		},
 		items: { attribute: false },
 		label: { type: String },
-		x: { type: Number },
-		y: { type: Number }
+		menuLabel: {
+			type: String,
+			attribute: "menu-label"
+		},
+		placement: { type: String },
+		disabled: {
+			type: Boolean,
+			reflect: true
+		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
-        position: fixed;
-        z-index: 10;
-        display: none;
-      }
-      :host([open]) {
-        display: block;
-      }
-      [role="menu"] {
-        display: flex;
-        min-width: 160px;
-        flex-direction: column;
-        padding: var(--pc-space-1) 0;
-        border-radius: var(--pc-radius);
-        background: var(--pc-surface-raised);
-        box-shadow: var(--pc-shadow);
+        display: inline-flex;
       }
       button {
-        padding: var(--pc-space-2) var(--pc-space-3);
-        border: 0;
-        background: transparent;
+        display: inline-flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--pc-control-size);
+        min-height: var(--pc-control-size);
+        padding: 0 var(--pc-space-1);
+        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);
-        text-align: start;
+        font: inherit;
         cursor: pointer;
       }
       button:hover:not(:disabled),
-      button:focus-visible {
+      :host([open]) button {
         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);
+        outline: var(--pc-focus-width) solid var(--pc-focus);
       }
       button:disabled {
-        color: var(--pc-text-muted);
+        opacity: 0.4;
         cursor: default;
       }
     `];
-	onPointerDown = (event) => {
-		if (this.open && !event.composedPath().includes(this)) this.close();
-	};
+	onScroll = () => this.setOpen(false);
 	constructor() {
 		super();
 		this.open = false;
 		this.items = [];
 		this.label = "";
-		this.x = 0;
-		this.y = 0;
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		document.addEventListener("pointerdown", this.onPointerDown, true);
+		this.menuLabel = "";
+		this.placement = "below";
+		this.disabled = false;
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		document.removeEventListener("pointerdown", this.onPointerDown, true);
+		window.removeEventListener("scroll", this.onScroll, 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 menu it opens: the slotted `pc-menu`, or its own */
+	get menu() {
+		return this.renderRoot.querySelector("slot[name=\"menu\"]")?.assignedElements({ flatten: true }).find((element) => element instanceof PcMenu) ?? void 0;
 	}
-	/** The enabled items' buttons */
-	buttons() {
-		return [...this.renderRoot.querySelectorAll("button")].filter((button) => !button.disabled);
+	/** The button that opens the menu */
+	get button() {
+		return this.renderRoot.querySelector("button");
 	}
-	/** Tell listeners the menu should close */
-	close() {
-		emit(this, "pc-close");
+	/**
+	* Open or close the menu, telling listeners.
+	*/
+	setOpen(open) {
+		if (open === this.open || open && this.disabled) return;
+		this.open = open;
+		emit(this, CONTEXT_MENU_TOGGLE_EVENT, { open });
 	}
-	/** Choose an item, then close */
-	choose(item) {
-		emit(this, "pc-select", { value: item.value });
-		this.close();
+	/** Open the menu on a right-click (instead of the browser's), or close it */
+	onContextMenu(event) {
+		event.preventDefault();
+		this.setOpen(!this.open);
 	}
-	/** 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();
-		}
+	/** Close the menu when it asks to, and return focus to the button */
+	onClose() {
+		const focusWasInside = this.menu.matches(":focus-within");
+		this.setOpen(false);
+		if (focusWasInside) this.button.focus();
+	}
+	/** Set up a newly slotted menu like the current one (open or closed) */
+	onMenuSlotChange() {
+		this.requestUpdate("open", !this.open);
+	}
+	updated(changed) {
+		const menu = this.menu;
+		if (!menu) return;
+		menu.anchor = this;
+		menu.label ||= this.menuLabel || this.label;
+		if (!changed.has("open")) return;
+		window[this.open ? "addEventListener" : "removeEventListener"]("scroll", this.onScroll, true);
+		menu.open = this.open;
+		if (this.open) this.place(menu);
+	}
+	/** Put the open menu under or beside the button, within the window */
+	async place(menu) {
+		const anchor = this.button.getBoundingClientRect();
+		const beside = this.placement === "beside";
+		menu.x = beside ? anchor.right : anchor.left;
+		menu.y = beside ? anchor.top : anchor.bottom;
+		await menu.updateComplete;
+		menu.x = menuLeft(menu.x, menu.offsetWidth, window.innerWidth);
+		menu.y = menuTop(menu.y, menu.offsetHeight, window.innerHeight);
 	}
 	render() {
-		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="menuitem"
-            class=${item.danger ? "danger" : nothing}
-            ?disabled=${item.disabled}
-            data-value=${item.value}
-            @click=${() => this.choose(item)}
-          >
-            ${item.label}
-          </button>`)}
-    </div>`;
+		return html`<button
+        type="button"
+        part="button"
+        aria-haspopup="menu"
+        aria-expanded=${String(this.open)}
+        aria-label=${this.label || nothing}
+        ?disabled=${this.disabled}
+        @click=${() => this.setOpen(!this.open)}
+        @contextmenu=${this.onContextMenu}
+      >
+        <slot name="icon">⋮</slot></button
+      ><slot
+        name="menu"
+        @slotchange=${this.onMenuSlotChange}
+        @pc-close=${this.onClose}
+        >${this.items.length ? html`<pc-menu
+                .items=${this.items}
+                label=${this.menuLabel || this.label}
+              ></pc-menu>` : nothing}</slot
+      >`;
 	}
 };
 defineElement("pc-context-menu", PcContextMenu);
-export { PcContextMenu };
+export { CONTEXT_MENU_TOGGLE_EVENT, MENU_MARGIN, PcContextMenu, menuLeft, menuTop };

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

@@ -1,6 +1,7 @@
 import { nothing } from "lit";
 import { PcElement } from "../../base";
 import { type InputSettingsData } from "../../../lib/classes/InputSettings";
+import type { UiSettingsLike } from "../../../lib/classes/UiSettings";
 /** Settings `pc-input-settings` can change: PaintCanvas's `InputSettings`, or anything with the same data and `update` */
 export interface InputSettingsLike extends EventTarget {
     readonly data: Readonly<InputSettingsData>;
@@ -12,6 +13,9 @@ export interface InputSettingsLike extends EventTarget {
  * and the language. Changes apply straight away. Hide focus pen mode or the language with `focusPen` and `languages`
  * set to false. Fires `pc-language-change` (with the locale) when the user picks a language.
  *
+ * With `ui` (e.g. the canvas's `ui`), the picked language is kept there, and used whenever it changes (e.g. when
+ * restored), so it's kept with the other app settings.
+ *
  * @example
  * html`<pc-input-settings .settings=${canvas.input}></pc-input-settings>`
  */
@@ -20,6 +24,9 @@ export declare class PcInputSettings extends PcElement {
         settings: {
             attribute: boolean;
         };
+        ui: {
+            attribute: boolean;
+        };
         focusPen: {
             type: BooleanConstructor;
         };
@@ -46,6 +53,8 @@ export declare class PcInputSettings extends PcElement {
     static styles: import("lit").CSSResultGroup[];
     /** The settings shown and changed */
     settings?: InputSettingsLike;
+    /** Where the language is kept, if anywhere (e.g. the canvas's `ui`) */
+    ui?: UiSettingsLike;
     /** Whether to show focus pen mode (default true) */
     focusPen: boolean;
     /** Whether to show the language (default true) */
@@ -55,7 +64,11 @@ export declare class PcInputSettings extends PcElement {
     /** Name of the zoom modifier key ("Cmd" or "Ctrl", detected by default) */
     modifier: string;
     private changes;
+    /** The kept language last used, so it's only switched to once */
+    private usedLocale?;
     constructor();
+    /** Use the kept language when it changes */
+    protected willUpdate(): void;
     /** A checkbox for an on/off setting */
     private toggle;
     /**

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

@@ -18,6 +18,9 @@ var ACTION_KEYS = {
 * and the language. Changes apply straight away. Hide focus pen mode or the language with `focusPen` and `languages`
 * set to false. Fires `pc-language-change` (with the locale) when the user picks a language.
 *
+* With `ui` (e.g. the canvas's `ui`), the picked language is kept there, and used whenever it changes (e.g. when
+* restored), so it's kept with the other app settings.
+*
 * @example
 * html`<pc-input-settings .settings=${canvas.input}></pc-input-settings>`
 */
@@ -25,6 +28,7 @@ var PcInputSettings = class extends PcElement {
 	static properties = {
 		...PcElement.properties,
 		settings: { attribute: false },
+		ui: { attribute: false },
 		focusPen: { type: Boolean },
 		languages: { type: Boolean },
 		touch: { type: Boolean },
@@ -67,7 +71,9 @@ var PcInputSettings = class extends PcElement {
         outline-offset: 2px;
       }
     `];
-	changes = new ChangeController(this, () => [this.settings]);
+	changes = new ChangeController(this, () => [this.settings, this.ui]);
+	/** The kept language last used, so it's only switched to once */
+	usedLocale;
 	constructor() {
 		super();
 		this.focusPen = true;
@@ -75,6 +81,13 @@ var PcInputSettings = class extends PcElement {
 		this.touch = isTouchDevice();
 		this.modifier = zoomModifierName();
 	}
+	/** Use the kept language when it changes */
+	willUpdate() {
+		const locale = this.ui?.data.locale;
+		if (locale === void 0 || locale === this.usedLocale) return;
+		this.usedLocale = locale;
+		if (locale !== this.translations.locale) this.translations.setLocale(locale);
+	}
 	/** A checkbox for an on/off setting */
 	toggle(data, key, label) {
 		return html`<label class="toggle">
@@ -123,6 +136,8 @@ var PcInputSettings = class extends PcElement {
         name="language"
         @change=${(e) => {
 			const locale = e.target.value;
+			this.usedLocale = locale;
+			this.ui?.update({ locale });
 			translations.setLocale(locale).then(() => emit(this, "pc-language-change", { locale }));
 		}}
       >