@lvl99dotcom/paintcanvas 0.4.0 → 0.5.0

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

@@ -1,9 +1,34 @@
 import { PcElement, defineElement, emit } from "../../base/index.js";
+import { markDismissingPress } from "../../dismiss/index.js";
 import { css, html } from "lit";
 // src/ui/elements/PcPopover/index.ts
+/** Height of a popover's arrow (pixels) */
+var POPOVER_ARROW_SIZE = 8;
+/** Side of the square turned 45° that makes the arrow (its diagonal is about twice the arrow's height) */
+var ARROW_SQUARE = Math.round(8 * Math.SQRT2);
+/** Space kept between a placed popover and the window's edges (pixels) */
+var POPOVER_MARGIN = 8;
+/**
+* Where a popover goes under its anchor: centred below it (leaving room for the arrow), moved sideways as far as needed
+* to stay in the window, with its arrow still pointing at the anchor's centre (`arrowX`, from the popover's left).
+*
+* @example
+* popoverBelow({ left: 100, bottom: 40, width: 40 }, 200, 1000); // { left: 20, top: 48, arrowX: 100 }
+* popoverBelow({ left: 0, bottom: 40, width: 40 }, 200, 1000); // { left: 8, top: 48, arrowX: 12 }
+*/
+var popoverBelow = (anchor, popoverWidth, viewportWidth, margin = 8) => {
+	const centre = anchor.left + anchor.width / 2;
+	const left = Math.max(margin, Math.min(centre - popoverWidth / 2, viewportWidth - margin - popoverWidth));
+	return {
+		left,
+		top: anchor.bottom + 8,
+		arrowX: centre - left
+	};
+};
 /**
 * A floating box for a menu or settings (e.g. the brush presets), shown while `open`. The implementer places it (e.g.
-* next to the button that opens it). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
+* next to the button that opens it), or `placeBelow` puts it under its `anchor`. With `arrow`, an arrow on its top edge
+* points up at the anchor (at `--pc-popover-arrow-x` from its left, the middle by default). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
 * `pc-close`, and the implementer sets `open` to false in response. Focus moves into it when it opens.
 *
 * @example
@@ -17,7 +42,11 @@ var PcPopover = class extends PcElement {
 			reflect: true
 		},
 		label: { type: String },
-		anchor: { attribute: false }
+		anchor: { attribute: false },
+		arrow: {
+			type: Boolean,
+			reflect: true
+		}
 	};
 	static styles = [PcElement.styles, css`
       :host {
@@ -32,6 +61,7 @@ var PcPopover = class extends PcElement {
         max-height: inherit;
         overflow: auto;
         padding: var(--pc-space-2);
+        border: 1px solid var(--pc-border);
         border-radius: var(--pc-radius);
         background: var(--pc-surface-raised);
         color: var(--pc-text);
@@ -39,6 +69,22 @@ var PcPopover = class extends PcElement {
         font-family: var(--pc-font);
         font-size: var(--pc-font-size);
       }
+      /* A square turned 45° with its top corner showing, outlined like the popover */
+      :host([arrow])::before {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: -${ARROW_SQUARE / 2}px;
+        left: var(--pc-popover-arrow-x, 50%);
+        width: ${ARROW_SQUARE}px;
+        height: ${ARROW_SQUARE}px;
+        box-sizing: border-box;
+        border: 1px solid var(--pc-border);
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        background: var(--pc-surface-raised);
+        transform: translateX(-50%) rotate(45deg);
+      }
       [role="dialog"]:focus-visible {
         outline: var(--pc-focus-width) solid var(--pc-focus);
       }
@@ -46,12 +92,34 @@ var PcPopover = class extends PcElement {
 	onPointerDown = (event) => {
 		if (!this.open) return;
 		const path = event.composedPath();
-		if (!path.includes(this) && !(this.anchor && path.includes(this.anchor))) emit(this, "pc-close");
+		if (path.includes(this) || this.anchor && path.includes(this.anchor)) return;
+		markDismissingPress(event);
+		emit(this, "pc-close");
 	};
 	constructor() {
 		super();
 		this.open = false;
 		this.label = "";
+		this.arrow = false;
+	}
+	/**
+	* Put the popover under its anchor, in the window (see `popoverBelow`), with its arrow pointing at the anchor. Call it
+	* once open, so it can be measured.
+	*
+	* @example
+	* popover.open = true;
+	* await popover.updateComplete;
+	* popover.placeBelow();
+	*/
+	placeBelow() {
+		if (!this.anchor) return;
+		const { left, top, arrowX } = popoverBelow(this.anchor.getBoundingClientRect(), this.offsetWidth, window.innerWidth);
+		Object.assign(this.style, {
+			position: "fixed",
+			left: `${left}px`,
+			top: `${top}px`
+		});
+		this.style.setProperty("--pc-popover-arrow-x", `${arrowX}px`);
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -83,4 +151,4 @@ var PcPopover = class extends PcElement {
 	}
 };
 defineElement("pc-popover", PcPopover);
-export { PcPopover };
+export { POPOVER_ARROW_SIZE, POPOVER_MARGIN, PcPopover, popoverBelow };

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

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

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

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

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

@@ -1,7 +1,10 @@
-import { nothing } from "lit";
+import { nothing, type PropertyValues } from "lit";
 import { PcElement } from "../../base";
 import PaintCanvas, { Tool } from "../../../lib/classes/PaintCanvas";
 import type { BrushConfig } from "../../../lib/brushes/types";
+import "../PcBrushSize";
+import "../PcNumberSlider";
+import "../PcPopover";
 /** Settings varied with pen tilt by the tilt toggle */
 declare const TILT_PARAMS: readonly ["widthConfig", "heightConfig", "rotationConfig"];
 /** A setting's variation config key */
@@ -28,6 +31,8 @@ export declare const withSource: (preset: BrushConfig, params: readonly ParamKey
  * roundAngle(12.3456); // 12.35
  */
 export declare const roundAngle: (degrees: number) => number;
+/** Largest width or height the move tool's fields go to (pixels or percent) */
+export declare const MAX_MOVE_SIZE = 10000;
 /** Steps of the zoom slider, across the whole zoom range */
 export declare const ZOOM_SLIDER_STEPS = 1000;
 /**
@@ -54,13 +59,20 @@ export declare const sliderToZoom: (value: number) => number;
  */
 export declare const zoomPercent: (zoom: number) => string;
 /**
- * The bar of settings for the current tool, shown at the top of the canvas when the tool has any:
+ * The bar of settings for the current tool, shown at the top of the canvas when the tool has any. The tool's settings
+ * are at the start (part `start`); the end, on the right (part `end`), is for your own items. The `start` and `end`
+ * slots add your own items to each. (Cut, copy and paste are `<pc-clipboard-tools>`.)
  *
- * - Brush and eraser: the preset (its name and shape; shows or hides the preset menu), width, height, constrain proportions, pressure, tilt, opacity and "Configure" (fires
- *   `pc-configure-brush` with the tool, "brush" or "eraser").
+ * - Brush and eraser: the preset (its name and shape; shows or hides the preset menu), the size (`pc-brush-size`), the
+ *   size settings (a cog button that shows or hides a popover under it with pressure, tilt and focus pen mode above the
+ *   width, constrain proportions and height), opacity and "Configure" (fires `pc-configure-brush` with the tool,
+ *   "brush" or "eraser"). The size, width, height and opacity are `pc-number-slider`s: pressed and dragged right or up
+ *   to raise them, left or down to lower them, or tapped to type a value. Focus pen mode: only pens draw, and touches
+ *   are ignored while a pen is down or just lifted.
  * - Lassos: select all, and invert selection and deselect (only while there is a mask).
  * - Move, scale and rotate: width and height (in pixels or percent), constrain proportions, flip horizontal and vertical,
- *   angle (to 2 decimal places), rotate 90° left and right, and reset (undoes the whole transform).
+ *   angle (to 2 decimal places), rotate 90° left and right, and reset (undoes the whole transform). The width, height
+ *   and angle are `pc-number-slider`s.
  * - Colour sample: point sample (the pixel under the pointer) or area sample (the average of a dragged rectangle).
  * - Zoom: zoom in and out, a slider across the zoom range (logarithmic) with the zoom as a percentage, and reset (100%),
  *   all around the centre of the view.
@@ -68,7 +80,9 @@ export declare const zoomPercent: (zoom: number) => string;
  * Changes to the brush or eraser apply to the current settings only, not the preset. Styling is structural only.
  *
  * @example
- * html`<pc-tool-settings .app=${app}></pc-tool-settings>`
+ * html`<pc-tool-settings .app=${app}>
+ *   <button slot="end" @click=${share}>Share</button>
+ * </pc-tool-settings>`
  */
 export declare class PcToolSettings extends PcElement {
     static properties: {
@@ -78,6 +92,9 @@ export declare class PcToolSettings extends PcElement {
         percent: {
             state: boolean;
         };
+        sizeOpen: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -93,8 +110,24 @@ export declare class PcToolSettings extends PcElement {
     app?: PaintCanvas;
     /** Whether the move tool's width and height are in percent (of the original size) instead of pixels */
     percent: boolean;
+    /** Whether the brush or eraser's size settings (width, height, constrain proportions) are shown */
+    sizeOpen: boolean;
+    private readonly placeSizeSettings;
     private changes;
     constructor();
+    disconnectedCallback(): void;
+    /** The size settings' popover, while a brush or eraser's settings are shown */
+    private get sizePopover();
+    /** Follow the window's scrolling and resizing (or stop) */
+    private listenWhileSizeOpen;
+    /**
+     * Hide the size settings (e.g. on Escape or a press outside them), returning focus to their button if it was in them.
+     */
+    private closeSizeSettings;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Put the opened size settings under their button, once they can be measured */
+    private showSizeSettings;
     /** Fire an event that crosses shadow DOM boundaries */
     private emit;
     /**
@@ -102,10 +135,14 @@ export declare class PcToolSettings extends PcElement {
      */
     private changeBox;
     /**
-     * Render the focus pen mode toggle, on the right of every tool's settings: while on, only pens draw, and touches are
-     * ignored while a pen is down or just lifted.
+     * Render the focus pen mode toggle, for the brush and eraser: while on, only pens draw, and touches are ignored while a
+     * pen is down or just lifted.
      */
     private renderFocusPen;
+    /**
+     * Render a setting as a named `pc-number-slider` (dragged or typed), from 1 to 256 pixels unless given another range.
+     */
+    private renderNumberField;
     /** Render the brush or eraser settings */
     private renderBrush;
     /** Render the mask settings */
@@ -115,7 +152,7 @@ export declare class PcToolSettings extends PcElement {
      * proportion when constrained.
      */
     private resizeBox;
-    /** A box side in the current unit, for an input */
+    /** A box side in the current unit (pixels or percent) */
     private sideValue;
     /** Render the move, scale and rotate settings */
     private renderMove;
@@ -123,6 +160,8 @@ export declare class PcToolSettings extends PcElement {
     private renderZoom;
     /** Render the colour sample tool's settings: point or area sampling */
     private renderColourSample;
+    /** The current tool's settings, if it has any */
+    private toolView;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }
 export {};