@lvl99dotcom/paintcanvas 0.3.0 → 0.4.0

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

@@ -0,0 +1,222 @@
+import { SETTINGS_FILE_FORMAT } from "../../../lib/settings/schema.js";
+import { ICON_CONTROLS_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import "../PcShortcutSettings/index.js";
+import { SETTINGS_FILE_ERRORS, SettingsFileError, applySettings, collectSettings, exportSettingsFile, parseSettingsFile, settingsFileName } from "../../../lib/settings/index.js";
+import { JSON_FILE_TYPE, saveFile } from "../../../lib/rendering/screenshot/index.js";
+import { css, html, nothing, unsafeCSS } from "lit";
+// src/ui/elements/PcAppSettings/index.ts
+/** Translation keys of the settings file error messages */
+var SETTINGS_FILE_ERROR_KEYS = {
+	[SETTINGS_FILE_ERRORS.incompatible]: "paintCanvas.settings.fileIncompatible",
+	[SETTINGS_FILE_ERRORS.read]: "paintCanvas.settings.fileReadFailed"
+};
+/**
+* Buttons for the user's app settings: "Keyboard shortcuts", which opens a window to change them (see
+* `pc-shortcut-settings`), and "Import settings" and "Export settings", which read and write a settings JSON file (input
+* settings, keyboard shortcuts, colour palette and colours). The window is a modal `<dialog>` above the whole page; it
+* closes with its Close button, Escape, or a press on the backdrop, and the browser gives focus back to the button. Fires `pc-toast` after importing, or when importing or
+* exporting fails.
+*
+* @example
+* html`<pc-app-settings .app=${canvas}></pc-app-settings>`
+*/
+var PcAppSettings = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		shortcutsOpen: {
+			type: Boolean,
+			attribute: "shortcuts-open"
+		}
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(WINDOWS_CSS),
+		unsafeCSS(ICON_CONTROLS_CSS),
+		unsafeCSS(PILLS_CSS),
+		css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--pc-space-2);
+      }
+      /* A modal window in the browser's top layer, above everything on the page */
+      dialog {
+        box-sizing: border-box;
+        width: min(480px, calc(100vw - 2 * var(--pc-space-3)));
+        max-height: calc(100vh - 2 * var(--pc-space-3));
+        padding: 0;
+        border: 0;
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        color: var(--pc-text);
+        box-shadow: var(--pc-shadow);
+      }
+      dialog::backdrop {
+        background: var(--pc-backdrop);
+      }
+      .window {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-3);
+        box-shadow: none;
+      }
+      .header {
+        display: flex;
+        gap: var(--pc-space-2);
+        align-items: center;
+        justify-content: space-between;
+      }
+      h2 {
+        margin: 0;
+        font-size: 1.2em;
+      }
+    `
+	];
+	/** Saves exported files (replaceable for tests) */
+	saveFile = (blob, name) => saveFile(blob, name, void 0, JSON_FILE_TYPE);
+	constructor() {
+		super();
+		this.shortcutsOpen = false;
+	}
+	updated(changed) {
+		if (!changed.has("shortcutsOpen")) return;
+		const dialog = this.renderRoot.querySelector("dialog");
+		if (!dialog) return;
+		if (this.shortcutsOpen && !dialog.open) dialog.showModal();
+		else if (!this.shortcutsOpen && dialog.open) dialog.close();
+	}
+	/** Close the keyboard shortcuts window */
+	closeShortcuts() {
+		this.shortcutsOpen = false;
+	}
+	/**
+	* Import the settings in a settings file, using the parts it has.
+	*/
+	async importFile(file) {
+		const app = this.app;
+		if (!app) return;
+		let text;
+		try {
+			text = await file.text();
+		} catch {
+			this.toastError(SETTINGS_FILE_ERRORS.read);
+			return;
+		}
+		try {
+			applySettings(app, parseSettingsFile(text, [app.names.settingsFileFormat, SETTINGS_FILE_FORMAT]));
+			emit(this, "pc-toast", {
+				message: this.t("paintCanvas.settings.imported"),
+				kind: "success"
+			});
+		} catch (error) {
+			this.toastError(error instanceof SettingsFileError ? error.message : SETTINGS_FILE_ERRORS.read);
+		}
+	}
+	/**
+	* Export the settings as a settings file.
+	*/
+	async exportFile() {
+		const app = this.app;
+		if (!app) return;
+		try {
+			await this.saveFile(new Blob([exportSettingsFile(collectSettings(app), app.names.settingsFileFormat)], { type: "application/json" }), settingsFileName(void 0, app.names.filePrefix));
+		} catch {
+			emit(this, "pc-toast", {
+				message: this.t("paintCanvas.settings.exportFailed"),
+				kind: "error"
+			});
+		}
+	}
+	/** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
+	toastError(message) {
+		emit(this, "pc-toast", {
+			message: this.t(SETTINGS_FILE_ERROR_KEYS[message]),
+			kind: "error"
+		});
+	}
+	/** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+	renderShortcuts(app) {
+		return html`<dialog
+      aria-labelledby="shortcuts-title"
+      @close=${() => this.closeShortcuts()}
+      @click=${(e) => {
+			if (e.target === e.currentTarget) this.closeShortcuts();
+		}}
+    >
+      ${this.shortcutsOpen ? html`<div class="window">
+              <div class="header">
+                <h2 id="shortcuts-title">
+                  ${this.t("paintCanvas.shortcuts.title")}
+                </h2>
+                <button
+                  type="button"
+                  class="close dismiss"
+                  autofocus
+                  @click=${() => this.closeShortcuts()}
+                >
+                  ${this.t("paintCanvas.common.close")}
+                </button>
+              </div>
+              <pc-shortcut-settings
+                .settings=${app.shortcuts}
+              ></pc-shortcut-settings>
+            </div>` : nothing}
+    </dialog>`;
+	}
+	render() {
+		const app = this.app;
+		if (!app) return nothing;
+		return html`<div class="actions">
+        <button
+          type="button"
+          class="pill shortcuts"
+          aria-haspopup="dialog"
+          @click=${() => this.shortcutsOpen = true}
+        >
+          ${this.t("paintCanvas.shortcuts.title")}
+        </button>
+        <button
+          type="button"
+          class="pill import"
+          @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
+        >
+          ${this.t("paintCanvas.settings.import")}
+        </button>
+        <button
+          type="button"
+          class="pill export"
+          @click=${() => void this.exportFile()}
+        >
+          ${this.t("paintCanvas.settings.export")}
+        </button>
+        <!-- Chosen through "Import settings" -->
+        <label class="visually-hidden">
+          ${this.t("paintCanvas.settings.importFile")}
+          <input
+            type="file"
+            class="import-file"
+            tabindex="-1"
+            accept="application/json,.json"
+            @change=${(e) => {
+			const input = e.target;
+			const file = input.files?.[0];
+			input.value = "";
+			if (file) this.importFile(file);
+		}}
+          />
+        </label>
+      </div>
+      ${this.renderShortcuts(app)}`;
+	}
+};
+defineElement("pc-app-settings", PcAppSettings);
+export { PcAppSettings };

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

@@ -2,6 +2,7 @@ import style_default from "./style.js";
 import { ICON_CONTROLS_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
 import { iconLabel } from "../../icons/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
+import "../PcBrushTest/index.js";
 import { SmoothingType } from "../../../lib/brushes/types/index.js";
 import { PARAM_LIMITS, VARIATION_SOURCES, readRange, toggleSource, writeRange } from "../../../lib/brushes/configRanges/index.js";
 import { SHAPE_ERRORS, ShapeImageError, readClipboardShape, readShapeImage } from "../../../lib/brushes/shapeImage/index.js";

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

@@ -1,4 +1,5 @@
 import { PcElement, defineElement } from "../../base/index.js";
+import "../PcIcon/index.js";
 import { css, html, nothing } from "lit";
 // src/ui/elements/PcButton/index.ts
 /**

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

@@ -301,7 +301,7 @@ export declare class PcCanvas extends PcElement {
      */
     private beginSample;
     /**
-     * Set the current colour from the sample: the pixel under the pointer, or the average of every pixel in the area.
+     * Set the selected colour (foreground or background) from the sample: the pixel under the pointer, or the average of every pixel in the area.
      * Nothing changes if it's outside the canvas.
      */
     private finishSample;

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

@@ -1,9 +1,10 @@
+import { Tool } from "../../../lib/classes/PaintCanvas/tool.js";
 import { unionRect } from "../../../lib/brushes/StrokeEngine/index.js";
 import style_default from "./style.js";
 import { NO_TEXT_SELECTION_CSS } from "../../styles/index.js";
 import { PcElement, defineElement } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
-import { Tool } from "../../../lib/classes/PaintCanvas/index.js";
+import "../../../lib/classes/PaintCanvas/index.js";
 import { PASTEBOARD_COLOUR, drawScene } from "../../../lib/rendering/compositing/index.js";
 import { drawBrushCursor } from "../../../lib/rendering/cursor/index.js";
 import { drawLassoPreview, drawMaskOutline } from "../../../lib/rendering/maskOutline/index.js";
@@ -563,15 +564,16 @@ var PcCanvas = class extends PcElement {
 			layerId: layer.id
 		};
 		event.currentTarget.setPointerCapture(event.pointerId);
+		const erasing = app.activeTool === Tool.Eraser;
 		app.strokes.begin({
 			layer,
-			mode: app.activeTool === Tool.Eraser ? "erase" : "paint",
+			mode: erasing ? "erase" : "paint",
 			preset: settings.preset,
 			size: {
 				width: settings.width,
 				height: settings.height
 			},
-			colour: app.colour,
+			colour: app.colours[erasing ? "background" : "foreground"],
 			tip: app.tips.get(settings.preset),
 			isPen: event.pointerType === "pen",
 			mask: app.selection.mask
@@ -812,7 +814,7 @@ var PcCanvas = class extends PcElement {
 		this.drawOverlay();
 	}
 	/**
-	* Set the current colour from the sample: the pixel under the pointer, or the average of every pixel in the area.
+	* Set the selected colour (foreground or background) from the sample: the pixel under the pointer, or the average of every pixel in the area.
 	* Nothing changes if it's outside the canvas.
 	*/
 	finishSample() {
@@ -820,7 +822,7 @@ var PcCanvas = class extends PcElement {
 		const { start, point } = this.sampling;
 		const colour = app.sampleMode === "area" ? app.sampleAreaColour(start, point) : app.sampleColour(point);
 		this.endSample();
-		if (colour) app.setColour(colour);
+		if (colour) app.setColour(colour, app.selectedColour);
 	}
 	/** Stop sampling and close the sampling window */
 	endSample() {

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

@@ -0,0 +1,43 @@
+import { PcElement } from "../../base";
+import type { default as PaintCanvas } from "../../../lib/classes/PaintCanvas";
+/** Event fired when the foreground or background colour is pressed (detail: `{ slot }`) */
+export declare const COLOUR_CLICK_EVENT = "pc-colour-click";
+/**
+ * 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>`
+ */
+export declare class PcColourPair extends PcElement {
+    static properties: {
+        app: {
+            attribute: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    app?: PaintCanvas;
+    private changes;
+    /**
+     * Open the browser's colour picker for the selected colour (call it while handling a press, as browsers only open
+     * pickers for one).
+     */
+    openPicker(): void;
+    /** Tell listeners a colour was pressed */
+    private onClick;
+    /** Set the selected colour from the browser's colour picker */
+    private onPick;
+    render(): import("lit").TemplateResult<1>;
+}

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 MenuItem } 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;
+    /** The items of its own menu, when no `pc-menu` is slotted */
     items: readonly MenuItem[];
-    /** Names the menu for screen readers */
+    /** 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>;
 }