@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

package/dist/ui/drag/index.js

@@ -0,0 +1,81 @@
+// src/ui/drag/index.ts
+/** How far (in pixels) a press must move before it counts as a drag, where a press can also be a tap */
+var DRAG_THRESHOLD = 4;
+/**
+* How much a pointer moved between two points as one value: right and up are positive, left and down negative.
+*
+* @example
+* dragDelta({ x: 0, y: 0 }, { x: 5, y: -5 }); // 10
+*/
+var dragDelta = (from, to) => to.x - from.x + (from.y - to.y);
+/**
+* Turns pressing and dragging on an element into changes of a value: dragging right or up gives positive deltas, left
+* or down negative ones (see `dragDelta`), in whole pixels (keeping any fraction for the next move). With a `threshold`, the press only becomes a drag once the pointer has moved
+* that far from where it was pressed, so a press that barely moves can still be a tap (e.g. to focus a field).
+*
+* The element is given the pointer while dragging, so the drag carries on outside it.
+*
+* @example
+* const drag = new PointerDrag((delta) => brush.resize(delta));
+* html`<div @pointerdown=${drag.start} @pointermove=${drag.move} @pointerup=${drag.end} @pointercancel=${drag.end}></div>`
+*/
+var PointerDrag = class {
+	onDelta;
+	threshold;
+	/** Where the press started */
+	origin = null;
+	/** The last position a delta was given from, once dragging */
+	last = null;
+	/** Movement not yet given, under a whole pixel (pens can move by fractions of a pixel) */
+	remainder = 0;
+	constructor(onDelta, threshold = 0) {
+		this.onDelta = onDelta;
+		this.threshold = threshold;
+	}
+	/** Whether the press has become a drag */
+	get dragging() {
+		return this.last !== null;
+	}
+	/**
+	* Start a press (on `pointerdown`).
+	*/
+	start = (event) => {
+		this.origin = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		this.last = this.threshold > 0 ? null : this.origin;
+		this.remainder = 0;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	};
+	/**
+	* Give the change since the last move, once the press has become a drag (on `pointermove`).
+	*/
+	move = (event) => {
+		if (!this.origin) return;
+		const point = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (!this.last) {
+			if (Math.hypot(point.x - this.origin.x, point.y - this.origin.y) < this.threshold) return;
+			this.last = this.origin;
+			event.preventDefault();
+		}
+		const total = this.remainder + dragDelta(this.last, point);
+		const delta = Math.trunc(total);
+		this.remainder = total - delta;
+		this.last = point;
+		if (delta !== 0) this.onDelta(delta);
+	};
+	/**
+	* End the press (on `pointerup` or `pointercancel`). Returns whether it was a drag.
+	*/
+	end = () => {
+		const dragged = this.dragging;
+		this.origin = null;
+		this.last = null;
+		return dragged;
+	};
+};
+export { DRAG_THRESHOLD, PointerDrag, dragDelta };

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

@@ -1,42 +1,45 @@
 import { PcElement } from "../../base";
 import PaintCanvas from "../../../lib/classes/PaintCanvas";
+import SettingsAutosave from "../../../lib/classes/SettingsAutosave";
 import type { BrushConfig } from "../../../lib/brushes/types";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 import { type InputKind, type LayoutState } from "../../layout";
-import type { PcPanel } from "../PcPanel";
 import "../PcPanel";
-import "../PcToolbar";
 import "../PcToolSettings";
+import "../PcClipboardTools";
 import "../PcCanvas";
 import "../PcCanvasMap";
-import "../PcBrushMenu";
-import "../PcLayersMenu";
+import "../PcPanelBrushes";
+import "../PcPanelLayers";
 import "../PcBrushConfig";
 import "../PcStats";
+import "../PcPanelColours";
 import "../PcDialog";
-/** A side of the layout */
-type Side = "left" | "right";
 /**
  * A ready-made painting app: the drawing elements arranged around the canvas, sized to its container (not the
  * window), with slots to add or replace content:
  *
  * - `header`: across the top (empty by default)
- * - `left`: `<pc-toolbar>` by default
- * - `top`: `<pc-tool-settings>` (for tools that have settings) by default
- * - `right`: empty by default (e.g. a `<pc-panel>` with a layers menu or chat)
+ * - `left`: `<pc-toolbar>` (a pane) by default; toolbars in the sides are minimised (their tools one button that opens a
+ *   menu of them) while the layout is narrow
+ * - `top`: a horizontal `<pc-pane>` with `<pc-tool-settings>` (for tools that have settings) and, at its end,
+ *   `<pc-clipboard-tools>` (cut, copy and paste; a ⋮ menu while the layout is narrow) by default
+ * - `right`: a `<pc-pane>` with `<pc-panel-layers>` by default
  * - `center`: `<pc-canvas>` by default
  * - `overlay`: drawn over the canvas; `<pc-canvas-map>` by default
  * - `bottom`: under the canvas (empty by default)
  * - `footer`: across the bottom; `<pc-stats>` by default
- * - `menu`: the app menu the toolbar's menu button opens (the button shows only with a menu)
+ * - `menu`: the app menu the toolbar's menu button opens, shown in a `<pc-panel>` (the button shows only with a menu)
  *
  * Content given for a slot replaces its default; an empty element clears it. Empty slots take no space. Hiding the
- * interface (Tab key) leaves only the canvas and overlay. A `<pc-layers-menu>` given in a side (e.g. in a `<pc-panel>`)
- * replaces the toolbar's layers menu button.
+ * interface (Tab key) leaves only the canvas and overlay. While a side has a `<pc-panel-layers>` (as the right side
+ * does by default), the toolbar has no layers menu button.
  *
  * Each side has a mode, chosen by the layout's width from `left-modes` and `right-modes` (default `"docked,
- * rail@600"`): `docked` beside the canvas; `rail`, a column of buttons (one per `<pc-panel>`) that open each panel over
- * the canvas; or `floating`, the side over the canvas as a palette that collapses to a button.
+ * rail@600"`), which the layout gives the side's `<pc-pane>`s (see `PcPane`): `docked` beside the canvas; `rail`, a
+ * column of buttons (one per panel) that open each panel over the canvas; `floating`, the pane over the canvas as a
+ * box that collapses to a button; or `overlay`, a rail over the canvas without a background (the canvas fills the
+ * width behind it). Give side content in a `<pc-pane>` to have it follow the side's mode.
  *
  * Reports its state for styling as attributes (`narrow`, `input="pen|touch|mouse"`, `ui-hidden`, `left-mode`,
  * `right-mode`) and as `pc-state-change` events (see `LayoutState`). Creates its own canvas unless given one, and
@@ -46,10 +49,16 @@ type Side = "left" | "right";
  * reloading the page (see `LayerAutosave`). While another window is drawing on it, the layout is blocked by a message
  * that offers to draw here instead. Fires `pc-toast` when the drawing can't be loaded or saved.
  *
+ * With a `settings-store` name, the user's app settings (input settings, keyboard shortcuts, colour palette, colours,
+ * theme and language) are kept in the browser under that name (see `SettingsAutosave`). Fires `pc-toast` when they can't be.
+ *
  * @example
  * html`<paint-canvas style="height: 600px"></paint-canvas>`
  * html`<paint-canvas .app=${canvas} right-modes="docked, rail@800">
- *   <pc-panel slot="right" icon="layers" label="Layers"><pc-layers-menu .app=${canvas}></pc-layers-menu></pc-panel>
+ *   <pc-pane slot="right">
+ *     <pc-panel-layers .app=${canvas}></pc-panel-layers>
+ *     <pc-panel icon="chat" label="Chat"><my-chat></my-chat></pc-panel>
+ *   </pc-pane>
  * </paint-canvas>`
  */
 export declare class PaintCanvasElement extends PcElement {
@@ -83,6 +92,10 @@ export declare class PaintCanvasElement extends PcElement {
         store: {
             type: StringConstructor;
         };
+        settingsStore: {
+            type: StringConstructor;
+            attribute: string;
+        };
         width: {
             state: boolean;
         };
@@ -92,12 +105,6 @@ export declare class PaintCanvasElement extends PcElement {
         configuring: {
             state: boolean;
         };
-        collapsed: {
-            state: boolean;
-        };
-        openPanel: {
-            state: boolean;
-        };
         translations: {
             attribute: boolean;
         };
@@ -126,6 +133,8 @@ export declare class PaintCanvasElement extends PcElement {
     shortcuts: boolean;
     /** Name to keep the user's layers under in the browser, so the drawing survives reloading the page (none by default) */
     store?: string;
+    /** Name to keep the user's app settings under in the browser (none by default) */
+    settingsStore?: string;
     /** The layout's width in CSS pixels */
     width: number;
     /** The input being used now */
@@ -136,10 +145,6 @@ export declare class PaintCanvasElement extends PcElement {
         config: BrushConfig;
         editingId?: string;
     };
-    /** Which floating sides are collapsed to a button */
-    collapsed: Record<Side, boolean>;
-    /** The panel open from a rail, if any */
-    openPanel?: PcPanel;
     /** Saves files (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
     private changes;
@@ -147,10 +152,10 @@ export declare class PaintCanvasElement extends PcElement {
     private ownAutosave?;
     /** The autosave whose errors are shown */
     private watchedAutosave?;
+    /** Keeps the app settings under the `settings-store` name, if any */
+    private ownSettingsAutosave?;
     /** Whether drawing was blocked when shortcuts were last watched */
     private blockedShortcuts;
-    /** The panels in each side's slot */
-    private panels;
     /** Whether each side's slot has a layers menu (the toolbar's isn't needed then) */
     private sideLayers;
     /** Whether the implementer gave a menu */
@@ -161,17 +166,15 @@ export declare class PaintCanvasElement extends PcElement {
     private keys?;
     /** The state last reported, to report only changes */
     private reported?;
-    /** Space the floating sides cover over the canvas */
+    /** Space the floating and overlay sides cover over the canvas */
     private floatingInsets;
-    /** The rail button that opened the open panel, to return focus to */
-    private opener?;
     private readonly resizeObserver?;
-    private readonly panelObserver;
     private readonly onPointerDown;
     private readonly onAutosaveError;
+    private readonly onSettingsAutosaveError;
     private readonly onShortcut;
     private readonly onDocumentPointerDown;
-    private readonly onKeyDown;
+    private readonly onPaneCollapse;
     constructor();
     /** Whether another window is drawing on the stored drawing, so this one is blocked */
     get blocked(): boolean;
@@ -183,13 +186,24 @@ export declare class PaintCanvasElement extends PcElement {
     disconnectedCallback(): void;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     protected updated(): void;
-    /** Keep the canvas clear of floating sides when fitting it */
+    /** The panes in a side: the default one, or those given for it */
+    private panesIn;
+    /** Show each side's panes in the side's mode, facing the canvas, with toolbars minimised while the layout is narrow */
+    private setPaneModes;
+    /** Keep the canvas clear of floating and overlay sides when fitting it */
     private measureFloatingSides;
     /**
      * Keep the canvas's layers under the `store` name, replacing an autosave the layout started earlier (also on the
      * previous canvas). An autosave the implementer started is left alone when there's no name.
      */
     private useStore;
+    /** Keeps the app settings under the `settings-store` name, if any (e.g. to wait until they are restored with `ready`) */
+    get settingsAutosave(): SettingsAutosave | undefined;
+    /**
+     * Keep the canvas's app settings under the `settings-store` name, stopping the previous settings autosave (which
+     * saves any change waiting to be saved).
+     */
+    private useSettingsStore;
     /** Show errors from the canvas's current autosave */
     private watchAutosaveErrors;
     /** Handle keyboard shortcuts for the current canvas, if asked to (not while blocked) */
@@ -212,32 +226,26 @@ export declare class PaintCanvasElement extends PcElement {
      * Open the configuration window to make a new preset, starting from the current brush or eraser settings.
      */
     newPreset(kind: "brush" | "eraser"): void;
-    /** Which side a panel is in */
-    private sideOf;
-    /**
-     * Open a panel from its rail button (closing any other), or close it if it's open. Focus moves into the panel.
-     */
-    togglePanel(panel: PcPanel, opener?: HTMLElement): void;
-    /**
-     * Close the panel open from a rail, moving focus back to its rail button if asked.
-     */
-    closePanel(returnFocus: boolean): void;
     /** Follow which slots have content given (their defaults aren't needed) */
     private onSlotChange;
     /** A slot, with its default content unless content was given for it */
     private slotWithDefault;
-    /** Follow the panels given for a side, and whether it has a layers menu */
+    /** Follow whether a side given content has a layers menu */
     private onSideSlotChange;
     /** Follow whether a menu was given */
     private onMenuSlotChange;
     /** Whether a side has a layers menu, replacing the toolbar's */
     private get layersInSide();
-    /** The toolbar shown on the left unless the implementer gives other content */
-    private renderToolbar;
-    /** A side's rail buttons, one per panel */
-    private renderRail;
-    /** A side, in its mode */
+    /** A side's default content: the toolbar on the left, and the layers on the right */
+    private renderSideDefault;
+    /** A side: its panes, in its mode (set on them after rendering) */
     private renderSide;
+    /**
+     * Close the open panel (brush, eraser, layers, app menu or colour palette) on a press outside it and the button that
+     * opens it, marking the press (see `markDismissingPress`) so the canvas doesn't draw unless it's dragged. Presses in
+     * dialogs (e.g. one the panel opened) don't count as outside.
+     */
+    private closePanelOutside;
     /** The menus the toolbar opens, floating over the canvas beside it */
     private renderPanels;
     /** The brush configuration window, while open */
@@ -246,4 +254,3 @@ export declare class PaintCanvasElement extends PcElement {
     private renderBlocked;
     render(): import("lit").TemplateResult<1>;
 }
-export {};