@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

@@ -0,0 +1,103 @@
+import { PcElement } from "../../base";
+import { type ConfirmFn, type PromptFn } from "../../ask";
+import "../PcDialogWindow";
+import "../PcProfileGraph";
+import "../PcContextMenu";
+import "../PcButton";
+import ProfileGraphs from "../../../lib/classes/ProfileGraphs";
+import { type ProfilePoint } from "../../../lib/profiles";
+/** What the editor's `pc-save` gives: the points to use and the graph they came from (undefined for an unsaved one) */
+export interface ProfileSaveDetail {
+    points: ProfilePoint[];
+    profileId?: string;
+}
+/**
+ * A window for editing a brush setting's profile graph (see `<pc-profile-graph>`): a drop-down of the presets and the
+ * user's own graphs (it says "Custom" once the graph is edited, or for one that isn't saved), a ⋮ menu (New graph,
+ * Duplicate…, Rename… and Delete…, the last two for the user's own graphs), the graph, and Save, Reset and Dismiss.
+ *
+ * - Choosing a graph in the drop-down loads its points.
+ * - New graph starts from a straight line, and Duplicate… saves a copy of the current graph under a name ("Custom" to
+ *   start with); Rename… and Delete… ask first.
+ * - Save uses the graph (firing `pc-save` with its points and ID); an edited or unsaved graph is first saved with a name
+ *   it asks for, asking before replacing another of the user's graphs with that name.
+ * - Reset goes back to the graph it opened with; Dismiss, ⨉ and Escape close it (`pc-close`) without changing anything.
+ *
+ * Graphs are saved in `profiles` (the canvas's `ProfileGraphs`).
+ *
+ * @example
+ * html`<pc-profile-editor .profiles=${app.profiles} .points=${points} profile-id="overweight" label="Width"
+ *   @pc-save=${(e) => use(e.detail)} @pc-close=${close}></pc-profile-editor>`
+ */
+export declare class PcProfileEditor extends PcElement {
+    static properties: {
+        profiles: {
+            attribute: boolean;
+        };
+        points: {
+            attribute: boolean;
+        };
+        profileId: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        draft: {
+            state: boolean;
+        };
+        sourceId: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** Where graphs are saved (the canvas's `ProfileGraphs`) */
+    profiles: ProfileGraphs;
+    /** The points it opens with */
+    points?: ProfilePoint[];
+    /** The ID of the graph it opens with, if it's one of the presets or saved graphs */
+    profileId?: string;
+    /** The setting's name, e.g. "Width" */
+    label: string;
+    /** The points being edited */
+    draft: ProfilePoint[];
+    /** The graph the points came from, until they're edited */
+    sourceId?: string;
+    /** 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;
+    constructor();
+    protected willUpdate(changed: Map<PropertyKey, unknown>): void;
+    /** Go back to the graph it opened with */
+    reset(): void;
+    /** Load a graph's points */
+    load(id: string): void;
+    /** Whether the graph being edited is one of the user's own, unchanged */
+    private get ownSource();
+    /**
+     * Ask for a name and save the points as one of the user's graphs, asking before replacing another with that name.
+     * Returns the saved graph's ID, or undefined if it wasn't saved.
+     */
+    private saveAs;
+    /**
+     * Use the graph: save it first when it's edited or unsaved (asking for a name), then fire `pc-save`.
+     */
+    save(): Promise<void>;
+    /** Do one of the ⋮ menu's actions */
+    act(action: string): Promise<void>;
+    /** A graph's name: the presets' in the chosen language */
+    private graphName;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,259 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { askConfirm, askText } from "../../ask/index.js";
+import "../PcDialogWindow/index.js";
+import "../PcProfileGraph/index.js";
+import "../PcContextMenu/index.js";
+import "../PcButton/index.js";
+import ProfileGraphs from "../../../lib/classes/ProfileGraphs/index.js";
+import { linearPoints, samePoints } from "../../../lib/profiles/index.js";
+import { css, html } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcProfileEditor/index.ts
+/** The value of the drop-down's "Custom" option */
+var CUSTOM = "";
+/**
+* A window for editing a brush setting's profile graph (see `<pc-profile-graph>`): a drop-down of the presets and the
+* user's own graphs (it says "Custom" once the graph is edited, or for one that isn't saved), a ⋮ menu (New graph,
+* Duplicate…, Rename… and Delete…, the last two for the user's own graphs), the graph, and Save, Reset and Dismiss.
+*
+* - Choosing a graph in the drop-down loads its points.
+* - New graph starts from a straight line, and Duplicate… saves a copy of the current graph under a name ("Custom" to
+*   start with); Rename… and Delete… ask first.
+* - Save uses the graph (firing `pc-save` with its points and ID); an edited or unsaved graph is first saved with a name
+*   it asks for, asking before replacing another of the user's graphs with that name.
+* - Reset goes back to the graph it opened with; Dismiss, ⨉ and Escape close it (`pc-close`) without changing anything.
+*
+* Graphs are saved in `profiles` (the canvas's `ProfileGraphs`).
+*
+* @example
+* html`<pc-profile-editor .profiles=${app.profiles} .points=${points} profile-id="overweight" label="Width"
+*   @pc-save=${(e) => use(e.detail)} @pc-close=${close}></pc-profile-editor>`
+*/
+var PcProfileEditor = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		profiles: { attribute: false },
+		points: { attribute: false },
+		profileId: {
+			type: String,
+			attribute: "profile-id"
+		},
+		label: { type: String },
+		draft: { state: true },
+		sourceId: { state: true }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: contents;
+      }
+      pc-dialog-window {
+        --pc-dialog-width: 340px;
+      }
+      .choose {
+        display: flex;
+        align-items: center;
+        gap: var(--pc-space-2);
+        width: 100%;
+      }
+      select {
+        flex: 1;
+        min-width: 0;
+        min-height: var(--pc-control-size);
+        padding: 0 var(--pc-space-2);
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-radius-small);
+        background: var(--pc-surface);
+        color: var(--pc-text);
+        font: inherit;
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+        gap: var(--pc-space-2);
+      }
+    `];
+	/** Asks the user to confirm, in a dialog (replaceable for tests) */
+	confirm = (options) => askConfirm(this.renderRoot, options);
+	/** Asks the user for text, in a dialog (replaceable for tests) */
+	prompt = (options) => askText(this.renderRoot, options);
+	constructor() {
+		super();
+		this.profiles = new ProfileGraphs();
+		this.label = "";
+		this.draft = linearPoints();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("points") || changed.has("profileId")) this.reset();
+	}
+	/** Go back to the graph it opened with */
+	reset() {
+		this.draft = structuredClone(this.points ?? linearPoints());
+		const source = this.profiles.get(this.profileId);
+		this.sourceId = source && samePoints(source.points, this.draft) ? source.id : void 0;
+	}
+	/** Load a graph's points */
+	load(id) {
+		const graph = this.profiles.get(id);
+		if (!graph) return;
+		this.draft = structuredClone(graph.points);
+		this.sourceId = graph.id;
+	}
+	/** Whether the graph being edited is one of the user's own, unchanged */
+	get ownSource() {
+		return this.sourceId !== void 0 && !this.profiles.isPreset(this.sourceId);
+	}
+	/**
+	* Ask for a name and save the points as one of the user's graphs, asking before replacing another with that name.
+	* Returns the saved graph's ID, or undefined if it wasn't saved.
+	*/
+	async saveAs(value) {
+		const name = (await this.prompt({
+			heading: this.t("paintCanvas.profileEditor.saveHeading"),
+			label: this.t("paintCanvas.profileEditor.name"),
+			value,
+			confirm: this.t("paintCanvas.common.save"),
+			cancel: this.t("paintCanvas.common.cancel")
+		}))?.trim();
+		if (!name) return void 0;
+		const existing = this.profiles.findByName(name);
+		if (existing && !await this.confirm({
+			heading: this.t("paintCanvas.profileEditor.replaceHeading"),
+			message: this.t("paintCanvas.profileEditor.replaceConfirm", { name }),
+			confirm: this.t("paintCanvas.presets.replace"),
+			cancel: this.t("paintCanvas.common.cancel"),
+			cancelling: true
+		})) return void 0;
+		const saved = this.profiles.save({
+			id: existing?.id,
+			name,
+			points: this.draft
+		});
+		if (saved) this.sourceId = saved.id;
+		return saved?.id;
+	}
+	/**
+	* Use the graph: save it first when it's edited or unsaved (asking for a name), then fire `pc-save`.
+	*/
+	async save() {
+		const id = this.sourceId ?? await this.saveAs(this.t("paintCanvas.profileEditor.custom"));
+		if (!id) return;
+		emit(this, "pc-save", {
+			points: structuredClone(this.draft),
+			profileId: id
+		});
+	}
+	/** Do one of the ⋮ menu's actions */
+	async act(action) {
+		const graph = this.profiles.get(this.sourceId);
+		if (action === "new") {
+			this.draft = linearPoints();
+			this.sourceId = void 0;
+		} else if (action === "duplicate") await this.saveAs(this.t("paintCanvas.profileEditor.custom"));
+		else if (action === "rename" && graph && this.ownSource) {
+			const name = await this.prompt({
+				heading: this.t("paintCanvas.profileEditor.renameHeading"),
+				label: this.t("paintCanvas.profileEditor.name"),
+				value: graph.name,
+				confirm: this.t("paintCanvas.common.save"),
+				cancel: this.t("paintCanvas.common.cancel")
+			});
+			if (name && this.profiles.rename(graph.id, name)) this.requestUpdate();
+		} else if (action === "delete" && graph && this.ownSource) {
+			if (await this.confirm({
+				heading: this.t("paintCanvas.profileEditor.deleteHeading"),
+				message: this.t("paintCanvas.profileEditor.deleteConfirm", { name: graph.name }),
+				confirm: this.t("paintCanvas.common.delete"),
+				cancel: this.t("paintCanvas.common.cancel"),
+				cancelling: true
+			}) && this.profiles.remove(graph.id)) this.sourceId = void 0;
+		}
+	}
+	/** A graph's name: the presets' in the chosen language */
+	graphName(id, name) {
+		return this.profiles.isPreset(id) ? this.t(`paintCanvas.profiles.${id}`) : name;
+	}
+	render() {
+		const own = this.ownSource;
+		const items = [
+			{
+				value: "new",
+				label: this.t("paintCanvas.profileEditor.new")
+			},
+			{
+				value: "duplicate",
+				label: this.t("paintCanvas.profileEditor.duplicate")
+			},
+			{
+				value: "rename",
+				label: this.t("paintCanvas.profileEditor.rename"),
+				disabled: !own
+			},
+			{
+				value: "delete",
+				label: this.t("paintCanvas.profileEditor.delete"),
+				disabled: !own,
+				danger: true
+			}
+		];
+		const title = this.t("paintCanvas.profileEditor.title", { param: this.label });
+		return html`<pc-dialog-window
+      open
+      shaded
+      label=${title}
+      @pc-dismiss=${(event) => {
+			event.preventDefault();
+			emit(this, "pc-close");
+		}}
+    >
+      <div slot="header-middle" class="choose">
+        <select
+          aria-label=${title}
+          .value=${live(this.sourceId ?? CUSTOM)}
+          @change=${(event) => this.load(event.target.value)}
+        >
+          ${this.sourceId === void 0 ? html`<option value=${CUSTOM}>
+                  ${this.t("paintCanvas.profileEditor.custom")}
+                </option>` : ""}
+          ${this.profiles.all.map((graph) => html`<option
+                value=${graph.id}
+                .selected=${graph.id === this.sourceId}
+              >
+                ${this.graphName(graph.id, graph.name)}
+              </option>`)}
+        </select>
+        <pc-context-menu
+          label=${this.t("paintCanvas.profileEditor.actions")}
+          .items=${items}
+          @pc-select=${(event) => void this.act(event.detail.value)}
+        ></pc-context-menu>
+      </div>
+      <pc-profile-graph
+        slot="body"
+        label=${title}
+        .points=${this.draft}
+        @pc-change=${(event) => {
+			this.draft = event.detail.points;
+			this.sourceId = void 0;
+		}}
+      ></pc-profile-graph>
+      <div slot="footer-middle" class="actions">
+        <pc-button class="save" @click=${() => void this.save()}>
+          ${this.t("paintCanvas.common.save")}
+        </pc-button>
+        <pc-button class="reset" variant="cancel" @click=${() => this.reset()}>
+          ${this.t("paintCanvas.profileEditor.reset")}
+        </pc-button>
+        <pc-button
+          class="dismiss"
+          variant="dismiss"
+          @click=${() => emit(this, "pc-close")}
+        >
+          ${this.t("paintCanvas.common.dismiss")}
+        </pc-button>
+      </div>
+    </pc-dialog-window>`;
+	}
+};
+defineElement("pc-profile-editor", PcProfileEditor);
+export { PcProfileEditor };

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

@@ -0,0 +1,84 @@
+import { PcElement } from "../../base";
+import { Interpolation, type ProfilePoint } from "../../../lib/profiles";
+/**
+ * The SVG path of a curve through points, drawn as short straight pieces (y is flipped: up is less negative).
+ *
+ * @example
+ * curvePath(linearPoints()); // "M0,10 L0.1,9.9 …"
+ */
+export declare const curvePath: (points: readonly ProfilePoint[]) => string;
+/**
+ * Move a point within the grid, keeping it between its neighbours (and the first and last points at the edges), to
+ * multiples of 0.1. Returns new points.
+ *
+ * @example
+ * movePoint(points, 1, 4.04, -3); // points[1] at { x: 4, y: -3 }
+ */
+export declare const movePoint: (points: readonly ProfilePoint[], index: number, x: number, y: number) => ProfilePoint[];
+/**
+ * A profile graph to edit (see `@lvl99dotcom/paintcanvas/lib/profiles`): a 10 × 10 grid with the curve through its
+ * points, from the setting's min at the bottom left to its max at the top right.
+ *
+ * - Pressing the line adds a point there (smooth), selected.
+ * - Pressing a point selects it; dragging moves it (between its neighbours; the first and last stay at the edges).
+ * - With a point selected, the arrow keys move it a grid unit, and the buttons below make it a sharp corner (linear)
+ *   or smooth (bezier cubic), or remove it (−; not the first or last).
+ *
+ * Points are focusable buttons (Tab moves between them; focusing one selects it). Fires `pc-change` (detail:
+ * `{ points }`) whenever the points change, after changing `points` itself.
+ *
+ * @example
+ * html`<pc-profile-graph .points=${points} @pc-change=${(e) => (points = e.detail.points)}></pc-profile-graph>`
+ */
+export declare class PcProfileGraph extends PcElement {
+    static properties: {
+        points: {
+            attribute: boolean;
+        };
+        selected: {
+            type: NumberConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The points, from left to right */
+    points: ProfilePoint[];
+    /** The selected point's index, if any */
+    selected?: number;
+    /** The graph's name for screen readers */
+    label: string;
+    /** The point being dragged */
+    private dragging?;
+    constructor();
+    /** Change the points and tell listeners */
+    private setPoints;
+    /** A pointer's position in grid units */
+    private gridAt;
+    /**
+     * Add a point (smooth) where a press on the line is, and select it. Does nothing away from the line or when full.
+     */
+    private onGraphDown;
+    /** Select a point and start dragging it */
+    private startDrag;
+    private onMove;
+    private onUp;
+    /** Move the selected point a grid unit with the arrow keys */
+    private onPointKeyDown;
+    /** Make the selected point a sharp corner or smooth */
+    setInterpolation(i: Interpolation): void;
+    /** Remove the selected point (not the first or last) */
+    removeSelected(): void;
+    render(): import("lit").TemplateResult<1>;
+}