@lvl99dotcom/paintcanvas 0.3.1 → 0.5.0

package/dist/ui/elements/{PcBrushMenu → PcPanelBrushes}/index.d.ts

@@ -1,10 +1,13 @@
-import { PcElement } from "../../base";
+import { nothing } from "lit";
+import { PcPanel } from "../PcPanel";
+import "../PcBrushSize";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import type BrushSettings from "../../../lib/classes/BrushSettings";
 import type { BrushConfig } from "../../../lib/brushes/types";
+import { DELETE_CURSOR } from "../../../lib/rendering/cursors";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
-/** Cursor over a preset that a click deletes (Alt/Option held) */
-export declare const DELETE_CURSOR: string;
+/** Cursor over a preset that a click deletes (Alt/Option held): the `--pc-delete-cursor` token's default */
+export { DELETE_CURSOR };
 /** Asks the user to confirm; replaceable for tests */
 export type ConfirmFn = (message: string) => boolean;
 /** Largest shape preview in a preset tile, in CSS pixels */
@@ -29,15 +32,15 @@ export declare const previewSizes: (presets: BrushConfig[]) => Map<string, {
  * tile showing its shape at its size relative to the rest of its family, five to a row. Picking a preset closes the
  * menu; holding Alt/Option shows an "X" over custom presets, and clicking one asks before deleting it.
  *
- * Dragging the size control up or right makes the brush bigger; down or left makes it smaller.
+ * Dragging the size control (`pc-brush-size`) up or right makes the brush bigger; down or left makes it smaller.
  *
  * Fires `pc-new-preset` (detail: "brush" or "eraser") for "New preset", and `pc-toast` (detail: the message) after
  * importing, exporting or deleting presets, or when that fails.
  *
  * @example
- * html`<pc-brush-menu kind="eraser" .app=${app}></pc-brush-menu>`
+ * html`<pc-panel-brushes kind="eraser" .app=${app}></pc-panel-brushes>`
  */
-export declare class PcBrushMenu extends PcElement {
+export declare class PcPanelBrushes extends PcPanel {
     static properties: {
         app: {
             attribute: boolean;
@@ -45,6 +48,16 @@ export declare class PcBrushMenu extends PcElement {
         kind: {
             type: StringConstructor;
         };
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -63,8 +76,6 @@ export declare class PcBrushMenu extends PcElement {
     confirm: ConfirmFn;
     /** Saves exported presets (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
-    /** Last pointer position while dragging the size control */
-    private dragPoint;
     private changes;
     private readonly onKey;
     private readonly onBlur;
@@ -103,19 +114,9 @@ export declare class PcBrushMenu extends PcElement {
      * Select a preset and close the menu.
      */
     selectPreset(id: string): void;
-    /**
-     * Start dragging the size control.
-     */
-    private onPointerDown;
-    /**
-     * Resize while dragging: right and up are positive, left and down are negative.
-     */
-    private onPointerMove;
-    /**
-     * Stop dragging the size control.
-     */
-    private onPointerUp;
     /** Render a preset's tile */
     private renderTile;
-    render(): import("lit").TemplateResult<1>;
+    protected get defaultIcon(): string;
+    protected get defaultLabel(): string;
+    protected renderBody(): import("lit").TemplateResult<1> | typeof nothing;
 }

package/dist/ui/elements/{PcBrushMenu → PcPanelBrushes}/index.js

@@ -1,16 +1,18 @@
 import style_default from "./style.js";
 import { BRUSH_PRESET_FILE_FORMAT } from "../../../lib/presets/schema.js";
 import { NO_TEXT_SELECTION_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
-import { PcElement, defineElement } from "../../base/index.js";
+import { defineElement } from "../../base/index.js";
+import { PcPanel } from "../PcPanel/index.js";
+import "../PcBrushSize/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import { groupPresetsByAuthor } from "../../../lib/brushes/authors/index.js";
 import "../../../lib/presets/index.js";
 import { PRESET_FILE_ERRORS, PresetFileError, exportPresetFile, parsePresetFile, presetFileName } from "../../../lib/brushes/presetFile/index.js";
-import { svgCursor } from "../../../lib/rendering/cursors/index.js";
+import { DELETE_CURSOR } from "../../../lib/rendering/cursors/index.js";
 import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
 import { html, nothing, unsafeCSS } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-// src/ui/elements/PcBrushMenu/index.ts
+// src/ui/elements/PcPanelBrushes/index.ts
 /** Translation keys of the preset file error messages */
 var PRESET_FILE_ERROR_KEYS = {
 	[PRESET_FILE_ERRORS.incompatible]: "paintCanvas.presets.fileIncompatible",
@@ -18,8 +20,6 @@ var PRESET_FILE_ERROR_KEYS = {
 	[PRESET_FILE_ERRORS.export]: "paintCanvas.presets.exportFailed",
 	[PRESET_FILE_ERRORS.empty]: "paintCanvas.presets.nothingToExport"
 };
-/** Cursor over a preset that a click deletes (Alt/Option held) */
-var DELETE_CURSOR = svgCursor("M6 6 L18 18 M18 6 L6 18", [12, 12], "not-allowed");
 /** Size the previews of presets without a family are measured against, so a 50px preset fills its tile */
 var UNGROUPED_FULL_SIZE = 50;
 /** Largest shape preview in a preset tile, in CSS pixels */
@@ -56,22 +56,22 @@ var previewSizes = (presets) => {
 * tile showing its shape at its size relative to the rest of its family, five to a row. Picking a preset closes the
 * menu; holding Alt/Option shows an "X" over custom presets, and clicking one asks before deleting it.
 *
-* Dragging the size control up or right makes the brush bigger; down or left makes it smaller.
+* Dragging the size control (`pc-brush-size`) up or right makes the brush bigger; down or left makes it smaller.
 *
 * Fires `pc-new-preset` (detail: "brush" or "eraser") for "New preset", and `pc-toast` (detail: the message) after
 * importing, exporting or deleting presets, or when that fails.
 *
 * @example
-* html`<pc-brush-menu kind="eraser" .app=${app}></pc-brush-menu>`
+* html`<pc-panel-brushes kind="eraser" .app=${app}></pc-panel-brushes>`
 */
-var PcBrushMenu = class extends PcElement {
+var PcPanelBrushes = class extends PcPanel {
 	static properties = {
-		...PcElement.properties,
+		...PcPanel.properties,
 		app: { attribute: false },
 		kind: { type: String }
 	};
 	static styles = [
-		PcElement.styles,
+		...PcPanel.styles,
 		unsafeCSS(NO_TEXT_SELECTION_CSS),
 		unsafeCSS(style_default),
 		unsafeCSS(WINDOWS_CSS),
@@ -80,8 +80,6 @@ var PcBrushMenu = class extends PcElement {
 	confirm = (message) => window.confirm(message);
 	/** Saves exported presets (replaceable for tests) */
 	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
-	/** Last pointer position while dragging the size control */
-	dragPoint = null;
 	changes = new ChangeController(this, () => [this.app, this.settings]);
 	onKey = (event) => {
 		if (event.key === "Alt") this.toggleAttribute("deleting", event.type === "keydown");
@@ -93,7 +91,6 @@ var PcBrushMenu = class extends PcElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this.style.setProperty("--delete-cursor", DELETE_CURSOR);
 		window.addEventListener("keydown", this.onKey);
 		window.addEventListener("keyup", this.onKey);
 		window.addEventListener("blur", this.onBlur);
@@ -217,34 +214,6 @@ var PcBrushMenu = class extends PcElement {
 		this.settings?.select(id);
 		this.app?.closePanel();
 	}
-	/**
-	* Start dragging the size control.
-	*/
-	onPointerDown(event) {
-		this.dragPoint = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		event.currentTarget.setPointerCapture(event.pointerId);
-	}
-	/**
-	* Resize while dragging: right and up are positive, left and down are negative.
-	*/
-	onPointerMove(event) {
-		if (!this.dragPoint || !this.settings) return;
-		const delta = event.clientX - this.dragPoint.x + (this.dragPoint.y - event.clientY);
-		this.dragPoint = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		if (delta !== 0) this.settings.resize(delta);
-	}
-	/**
-	* Stop dragging the size control.
-	*/
-	onPointerUp() {
-		this.dragPoint = null;
-	}
 	/** Render a preset's tile */
 	renderTile(settings, preset, sizes) {
 		const size = sizes.get(preset.id);
@@ -271,9 +240,15 @@ var PcBrushMenu = class extends PcElement {
       </button>
     </li>`;
 	}
-	render() {
+	get defaultIcon() {
+		return this.kind === "eraser" ? "eraser" : "brush";
+	}
+	get defaultLabel() {
+		return this.t(this.kind === "eraser" ? "paintCanvas.tool.eraser" : "paintCanvas.tool.brush");
+	}
+	renderBody() {
 		const settings = this.settings;
-		if (!settings) return html``;
+		if (!settings) return nothing;
 		const title = this.t(this.kind === "eraser" ? "paintCanvas.tool.eraser" : "paintCanvas.tool.brush");
 		const presets = Object.values(settings.presets);
 		const sizes = previewSizes(presets);
@@ -292,19 +267,11 @@ var PcBrushMenu = class extends PcElement {
           style=${styleMap({ maskImage: typeof preset.image === "string" ? `url("${preset.image}")` : void 0 })}
         ></span>
         <span class="name">${preset.name ?? preset.id}</span>
-        <div
+        <pc-brush-size
           class="size"
-          role="slider"
-          aria-label=${this.t("paintCanvas.brushMenu.size", { tool: title })}
-          aria-valuenow=${settings.width}
-          title=${this.t("paintCanvas.brushMenu.dragToResize")}
-          @pointerdown=${this.onPointerDown}
-          @pointermove=${this.onPointerMove}
-          @pointerup=${this.onPointerUp}
-          @pointercancel=${this.onPointerUp}
-        >
-          ${settings.width === settings.height ? settings.width : `${settings.width} × ${settings.height}`}
-        </div>
+          .settings=${settings}
+          label=${this.t("paintCanvas.brushMenu.size", { tool: title })}
+        ></pc-brush-size>
       </div>
       <div
         class="presets"
@@ -359,5 +326,5 @@ var PcBrushMenu = class extends PcElement {
     `;
 	}
 };
-defineElement("pc-brush-menu", PcBrushMenu);
-export { DELETE_CURSOR, MAX_PREVIEW_SIZE, MIN_PREVIEW_SIZE, PcBrushMenu, previewSizes };
+defineElement("pc-panel-brushes", PcPanelBrushes);
+export { DELETE_CURSOR, MAX_PREVIEW_SIZE, MIN_PREVIEW_SIZE, PcPanelBrushes, previewSizes };

package/dist/ui/elements/PcPanelBrushes/style.js

@@ -0,0 +1,3 @@
+// src/ui/elements/PcPanelBrushes/style.css?inline
+var style_default = "/* Narrower than other panels by default (set --pc-panel-width to change it) */\n:host {\n  --pc-panel-default-width: 240px;\n}\n/* The current preset on one row: its shape, name and size */\n.current {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 44px;\n  padding: 4px 8px;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-surface);\n}\n.current-shape {\n  flex: none;\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  background: var(--pc-text);\n}\n.current-shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: contain;\n  mask-position: center;\n}\n.name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.size {\n  flex: none;\n  align-self: stretch;\n  margin: -4px -8px -4px 0;\n  border-left: 1px solid var(--pc-border);\n}\n/* The presets scroll, at most 400px tall, or less so the whole menu fits under the settings bar in a shorter window */\n.presets {\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: min(400px, calc(100vh - 180px));\n  overflow-y: auto;\n}\nh3 {\n  margin: 4px 0;\n  font-size: 14px;\n}\nul {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  align-content: start;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n}\n:host([deleting]) li button.custom {\n  cursor: var(--pc-delete-cursor);\n}\n/* Create, Import and Export side by side */\n.actions {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.actions button.pill {\n  padding: 4px 8px;\n}\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\nli button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  aspect-ratio: 1;\n  padding: 0;\n  border: none;\n  border-right: 1px solid var(--pc-border);\n  border-bottom: 1px solid var(--pc-border);\n  background: var(--pc-bar);\n  cursor: pointer;\n}\nli button:hover {\n  background: var(--pc-surface-hover);\n}\nli button[aria-pressed=\"true\"] {\n  background: var(--pc-surface-active);\n}\n.shape {\n  background: var(--pc-text);\n  border-radius: 50%;\n}\n.shape.image {\n  border-radius: 0;\n  mask-repeat: no-repeat;\n  mask-size: 100% 100%;\n}\n";
+export { style_default as default };

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

@@ -0,0 +1,171 @@
+import { nothing, type PropertyValues } from "lit";
+import { PcPanel } from "../PcPanel";
+import "../PcColourPair";
+import "../PcMenu";
+import "../PcDialog";
+import type { default as PaintCanvas } from "../../../lib/classes/PaintCanvas";
+import { type Hsl, type Rgb } from "../../../lib/utils/colour";
+import { type SaveMethod } from "../../../lib/rendering/screenshot";
+/** The colour models the sliders can show */
+export type ColourModel = "rgb" | "hsl";
+/**
+ * The CSS gradient a channel's slider track shows: the colours its values give, from the lowest to the highest, keeping
+ * the colour's other values. Red, green and blue go from none to all of that channel (e.g. red from `rgb(0, g, b)` to
+ * `rgb(255, g, b)`), saturation from grey to full colour, and lightness from black through the colour to white. Hue goes
+ * through every hue at full saturation, so it never shows as grey.
+ *
+ * @example
+ * channelGradient("r", { r: 0, g: 128, b: 255 }, { h: 210, s: 100, l: 50 }); // "linear-gradient(to right, #0080ff, #ff80ff)"
+ * channelGradient("s", { r: 77, g: 179, b: 77 }, { h: 120, s: 40, l: 50 }); // "linear-gradient(to right, #808080, #00ff00)"
+ */
+export declare const channelGradient: (key: string, rgb: Rgb, hsl: Hsl) => string;
+/** How long a touch is held on a saved colour to open its menu (milliseconds) */
+export declare const LONG_PRESS_MS = 500;
+/**
+ * The colour palette menu: the foreground and background colours (the selected one is configured), its hex value, RGB
+ * and HSL sliders, the saved colours, and buttons to import and export them as a JSON file.
+ *
+ * - Pressing the foreground or background colour selects it.
+ * - Pressing a saved colour sets the selected colour; [+] saves the selected colour.
+ * - A saved colour is deleted, after asking, by clicking it with Alt/Option held (the cursor shows an "X"), from its
+ *   menu (right-click, a long press on touch screens, or the context menu key), or with Delete or Backspace. Arrow keys,
+ *   Home and End move between saved colours.
+ * - Escape closes it (closes the canvas's open panel).
+ *
+ * Fires `pc-toast` after importing, or when importing or exporting fails.
+ *
+ * @example
+ * html`<pc-panel-colours .app=${app}></pc-panel-colours>`
+ */
+export declare class PcPanelColours extends PcPanel {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        model: {
+            type: StringConstructor;
+        };
+        hexDraft: {
+            state: boolean;
+        };
+        menu: {
+            state: boolean;
+        };
+        confirming: {
+            state: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    /** The colour model the sliders show */
+    model: ColourModel;
+    /** The hex value being typed, while it differs from the colour */
+    hexDraft?: string;
+    /** The saved colour whose menu is open, and where */
+    menu?: {
+        index: number;
+        x: number;
+        y: number;
+    };
+    /** The saved colour being deleted, while asking */
+    confirming?: number;
+    /** Saves exported files (replaceable for tests) */
+    saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
+    /** The HSL values shown, kept while they give the selected colour (so hue stays put for greys) */
+    private hsl;
+    /** The saved colour that is reached with Tab (the others with arrow keys) */
+    private focusIndex;
+    /** A touch being held on a saved colour, until it opens its menu */
+    private press?;
+    /** Whether a long press opened a menu, so the click that follows is ignored */
+    private longPressed;
+    private changes;
+    private readonly onKey;
+    private readonly onBlur;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The selected colour's value, e.g. `#000000` */
+    get colour(): string;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    /** Set the selected colour */
+    private setColour;
+    /** Select the pressed colour */
+    private onColourClick;
+    /** Follow the hex value as it's typed, setting the colour once it's a full 6-digit value */
+    private onHexInput;
+    /** Set the colour from a typed hex value (including 3 digits) when done, or show the colour again if it isn't one */
+    private onHexChange;
+    /** Switch colour model with the arrow keys, Home and End, as tabs do */
+    private onTabKeyDown;
+    /** Show a colour model's sliders */
+    private selectModel;
+    /** Change one channel of the colour model shown */
+    private onChannel;
+    /** Set the selected colour from a saved colour, or ask to delete it with Alt/Option held */
+    private onSwatchClick;
+    /** Open a saved colour's menu where it was right-clicked */
+    private onSwatchContextMenu;
+    /** Start waiting for a touch held on a saved colour to open its menu */
+    private onSwatchPointerDown;
+    /** Stop waiting for a long press when the touch moves away */
+    private onSwatchPointerMove;
+    /** Stop waiting for a long press */
+    private cancelPress;
+    /**
+     * Move between saved colours, ask to delete one, or open its menu, with the keyboard. Keys used here don't reach the
+     * keyboard shortcuts (e.g. Delete doesn't also delete the masked image data).
+     */
+    private onSwatchKeyDown;
+    /** How many saved colours fit in a row */
+    private columns;
+    /** Focus a saved colour */
+    private focusSwatch;
+    /** Save the selected colour */
+    private onAdd;
+    /** Delete the saved colour that was asked about, if confirmed */
+    private onConfirm;
+    /** Close the palette with Escape (unless a dialog or menu is open, which closes first) */
+    private onKeyDown;
+    /**
+     * Import the colours in a colour palette file, adding them after the saved ones (leaving out ones already saved).
+     */
+    importFile(file: File): Promise<void>;
+    /**
+     * Export the saved colours as a colour palette file.
+     */
+    exportFile(): Promise<void>;
+    /** Show a palette file error (one of `PALETTE_FILE_ERRORS`) in the chosen language */
+    private toastError;
+    /** The colour model tabs and the selected model's sliders */
+    private renderChannels;
+    /** The saved colours and the [+] button */
+    private renderSwatches;
+    /** The saved colour's menu, while open */
+    private renderMenu;
+    /** The dialog asking before deleting a saved colour, while asking */
+    private renderConfirmation;
+    protected get defaultIcon(): string;
+    protected get defaultLabel(): string;
+    protected renderBody(): import("lit").TemplateResult<1> | typeof nothing;
+}