@lvl99dotcom/paintcanvas 0.5.0 → 0.6.0

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

@@ -1,14 +1,15 @@
-import { nothing, type PropertyValues } from "lit";
+import { nothing } from "lit";
 import { PcElement } from "../../base";
 import "../PcShortcutSettings";
+import "../PcDialogWindow";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import { type SaveMethod } from "../../../lib/rendering/screenshot";
 /**
  * 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, colours, theme and language). 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.
+ * settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language). The window is a shaded
+ * `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+ * 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>`
@@ -40,7 +41,6 @@ export declare class PcAppSettings extends PcElement {
     /** Saves exported files (replaceable for tests) */
     saveFile: (blob: Blob, name: string) => Promise<SaveMethod | undefined>;
     constructor();
-    protected updated(changed: PropertyValues<this>): void;
     /** Close the keyboard shortcuts window */
     closeShortcuts(): void;
     /**
@@ -53,7 +53,7 @@ export declare class PcAppSettings extends PcElement {
     exportFile(): Promise<void>;
     /** Show a settings file error (one of `SETTINGS_FILE_ERRORS`) in the chosen language */
     private toastError;
-    /** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+    /** The keyboard shortcuts window, with its contents only while open */
     private renderShortcuts;
     render(): import("lit").TemplateResult<1> | typeof nothing;
 }

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

@@ -2,6 +2,7 @@ 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 "../PcDialogWindow/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";
@@ -14,9 +15,9 @@ var SETTINGS_FILE_ERROR_KEYS = {
 /**
 * 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, colours, theme and language). 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.
+* settings, keyboard shortcuts, colour palette, colours, profile graphs, theme and language). The window is a shaded
+* `<pc-dialog-window>` over the whole page; it closes with its ⨉ button, Escape or a press outside it, and focus goes
+* 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>`
@@ -48,32 +49,8 @@ var PcAppSettings = class extends PcElement {
         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;
+      pc-dialog-window {
+        --pc-dialog-width: 480px;
       }
       h2 {
         margin: 0;
@@ -87,13 +64,6 @@ var PcAppSettings = class extends PcElement {
 		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;
@@ -143,34 +113,20 @@ var PcAppSettings = class extends PcElement {
 			kind: "error"
 		});
 	}
-	/** The keyboard shortcuts window: a modal dialog, with its contents only while open */
+	/** The keyboard shortcuts window, 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();
-		}}
+		return html`<pc-dialog-window
+      class="shortcuts-window"
+      shaded
+      ?open=${this.shortcutsOpen}
+      @pc-dismiss=${() => 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>`;
+      <h2 slot="header-middle">${this.t("paintCanvas.shortcuts.title")}</h2>
+      ${this.shortcutsOpen ? html`<pc-shortcut-settings
+              slot="body"
+              .settings=${app.shortcuts}
+            ></pc-shortcut-settings>` : nothing}
+    </pc-dialog-window>`;
 	}
 	render() {
 		const app = this.app;
@@ -178,7 +134,7 @@ var PcAppSettings = class extends PcElement {
 		return html`<div class="actions">
         <button
           type="button"
-          class="pill shortcuts"
+          class="pill-s shortcuts"
           aria-haspopup="dialog"
           @click=${() => this.shortcutsOpen = true}
         >
@@ -186,14 +142,14 @@ var PcAppSettings = class extends PcElement {
         </button>
         <button
           type="button"
-          class="pill import"
+          class="pill-s import"
           @click=${() => this.renderRoot.querySelector(".import-file")?.click()}
         >
           ${this.t("paintCanvas.settings.import")}
         </button>
         <button
           type="button"
-          class="pill export"
+          class="pill-s export"
           @click=${() => void this.exportFile()}
         >
           ${this.t("paintCanvas.settings.export")}

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

@@ -1,13 +1,15 @@
 import { nothing } from "lit";
+import { type ConfirmFn, type PromptFn } from "../../ask";
 import { PcElement } from "../../base";
 import "../PcBrushTest";
+import "../PcDialogWindow";
+import "../PcSliderRange";
+import "../PcProfileEditor";
 import type PaintCanvas from "../../../lib/classes/PaintCanvas";
 import { SmoothingType, type BrushConfig } from "../../../lib/brushes/types";
+import { type VaryingParam } from "../../../lib/brushes/configRanges";
 import { type ShapeImage } from "../../../lib/brushes/shapeImage";
-/** Asks the user to confirm; replaceable for tests */
-export type ConfirmFn = (message: string) => boolean;
-/** Asks the user for text; replaceable for tests */
-export type PromptFn = (message: string, value: string) => string | null;
+export type { ConfirmFn, PromptFn } from "../../ask";
 /** The smoothing choices, in the order shown: value, translation key of the name, and icon name */
 export declare const SMOOTHING_CHOICES: readonly [{
     readonly value: SmoothingType.Linear;
@@ -26,12 +28,13 @@ export declare const SMOOTHING_CHOICES: readonly [{
  * The brush (or eraser) configuration window: a testing area, the shape (pressing it picks a built-in shape from the
  * device's own list, which says "Custom" for an uploaded or pasted one; or upload or paste one), smoothing, width, height,
  * opacity, rotation, offsets, sample rate, spacing and snapping to the pixel grid. Width, height, opacity, rotation and the offsets can vary with
- * pressure, tilt and randomness; when any is on, the setting has a min and max.
+ * pressure, tilt and randomness; when any is on, the setting has a min and max, set with a `<pc-slider-range>`.
  *
  * Changes stay in the window until "Save" (fires `pc-save` with the settings, to apply to the current tool) or "Add to
  * presets" (saves them as one of the user's presets, asking before replacing one with the same name, and selects it).
- * "Delete preset…" shows when editing one of the user's presets. Fires `pc-close` when closed, and `pc-toast` with a
- * message after adding or deleting a preset, or when a shape can't be used. Styling is structural only.
+ * "Delete preset…" shows when editing one of the user's presets. It's a shaded `<pc-dialog-window>`, closed with its ⨉
+ * button or Escape (not a press outside it, which would lose the changes). Fires `pc-close` when closed, and `pc-toast`
+ * with a message after adding or deleting a preset, or when a shape can't be used.
  *
  * @example
  * html`<pc-brush-config .app=${app} kind="brush" .config=${app.brush.preset} @pc-save=${apply}></pc-brush-config>`
@@ -56,6 +59,9 @@ export declare class PcBrushConfig extends PcElement {
         busy: {
             state: boolean;
         };
+        editingProfile: {
+            state: boolean;
+        };
         translations: {
             attribute: boolean;
         };
@@ -79,7 +85,11 @@ export declare class PcBrushConfig extends PcElement {
     draft?: BrushConfig;
     /** Whether a preset is being saved or deleted */
     busy: boolean;
+    /** The setting whose profile graph is being edited, if any */
+    editingProfile?: VaryingParam;
+    /** Asks the user to confirm, in a dialog (replaceable for tests) */
     confirm: ConfirmFn;
+    /** Asks the user for text, in a dialog (replaceable for tests) */
     prompt: PromptFn;
     /** Turns files into brush shapes (replaceable for tests) */
     readShape: (file: File) => Promise<ShapeImage>;
@@ -87,10 +97,7 @@ export declare class PcBrushConfig extends PcElement {
      * Reads a brush shape from the clipboard, or else from image data copied on the canvas (replaceable for tests)
      */
     readClipboard: () => Promise<ShapeImage>;
-    private readonly onKeyDown;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     protected willUpdate(changed: Map<PropertyKey, unknown>): void;
     /** Fire an event that crosses shadow DOM boundaries */
     private emit;
@@ -121,10 +128,10 @@ export declare class PcBrushConfig extends PcElement {
      * Delete the preset being edited, after confirming.
      */
     deletePreset(): Promise<void>;
-    /** Render a number input */
-    private number;
-    /** Render a range slider */
-    private slider;
+    /**
+     * Render a slider for one value (a single `<pc-slider-range>`), the same as the ranges of settings that vary.
+     */
+    private single;
     /** Render a setting that can vary: its value (or min and max), and its pressure, tilt and randomise icon toggles */
     private renderParam;
     /**
@@ -134,4 +141,8 @@ export declare class PcBrushConfig extends PcElement {
     /** Render the shape and smoothing row */
     private renderShape;
     render(): import("lit").TemplateResult<1> | typeof nothing;
+    /** The profile graph editor for the setting being edited, while open */
+    private renderProfileEditor;
+    /** Profile graphs, when there's no canvas to keep them */
+    private readonly profiles;
 }