@lvl99dotcom/paintcanvas 0.5.0 → 0.6.0

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>;
+}

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

@@ -0,0 +1,317 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { ICON_CONTROLS_CSS } from "../../styles/index.js";
+import { iconLabel } from "../../icons/index.js";
+import { Interpolation, linearPoints, profileY } from "../../../lib/profiles/index.js";
+import { css, html, nothing, svg, unsafeCSS } from "lit";
+// src/ui/elements/PcProfileGraph/index.ts
+/** Space around the grid, in grid units, so points on its edges can be pressed */
+var MARGIN = .6;
+/** How close (in grid units) a press must be to the line to add a point there */
+var LINE_REACH = .6;
+/** Points are placed on multiples of this many grid units when dragged */
+var SNAP = .1;
+/** How many pieces the curve is drawn with */
+var CURVE_STEPS = 100;
+/** A value rounded to `SNAP` and kept within a range */
+var snap = (value, min, max) => Math.min(max, Math.max(min, Math.round(value / SNAP) * SNAP));
+/**
+* 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 …"
+*/
+var curvePath = (points) => Array.from({ length: 101 }, (_, step) => {
+	const x = step / CURVE_STEPS * 10;
+	const y = Math.min(10, Math.max(0, -profileY(points, x)));
+	return `${step ? "L" : "M"}${+x.toFixed(3)},${+y.toFixed(3)}`;
+}).join(" ");
+/**
+* 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 }
+*/
+var movePoint = (points, index, x, y) => {
+	const last = points.length - 1;
+	const before = points[index - 1];
+	const after = points[index + 1];
+	const nextX = index === 0 ? 0 : index === last ? 10 : snap(x, before.x, after.x);
+	return points.map((point, i) => i === index ? {
+		...point,
+		x: nextX,
+		y: snap(y, -10, 0)
+	} : point);
+};
+/**
+* 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>`
+*/
+var PcProfileGraph = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		points: { attribute: false },
+		selected: { type: Number },
+		label: { type: String }
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(ICON_CONTROLS_CSS),
+		css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--pc-space-2);
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+      }
+      svg {
+        width: 100%;
+        max-width: 300px;
+        aspect-ratio: 1;
+        touch-action: none;
+        cursor: crosshair;
+        user-select: none;
+      }
+      .grid {
+        stroke: var(--pc-border);
+        stroke-width: 0.03;
+      }
+      .frame {
+        fill: var(--pc-surface);
+        stroke: var(--pc-text);
+        stroke-width: 0.08;
+      }
+      .diagonal {
+        stroke: var(--pc-text-muted);
+        stroke-width: 0.03;
+      }
+      .area {
+        fill: var(--pc-surface-active);
+      }
+      .curve {
+        fill: none;
+        stroke: var(--pc-text);
+        stroke-width: 0.12;
+      }
+      .point {
+        fill: var(--pc-text);
+        stroke: var(--pc-surface);
+        stroke-width: 0.08;
+        cursor: grab;
+        outline: none;
+      }
+      .point.selected {
+        fill: var(--pc-accent);
+        stroke: var(--pc-text);
+      }
+      .point:focus-visible {
+        stroke: var(--pc-focus);
+        stroke-width: 0.15;
+      }
+      .buttons {
+        display: flex;
+        gap: var(--pc-space-2);
+      }
+      button.icon-button {
+        min-width: 32px;
+        min-height: 32px;
+        justify-content: center;
+        align-items: center;
+        color: var(--pc-text);
+        font: inherit;
+        font-size: 20px;
+        line-height: 1;
+      }
+    `
+	];
+	/** The point being dragged */
+	dragging;
+	constructor() {
+		super();
+		this.points = linearPoints();
+		this.label = "";
+	}
+	/** Change the points and tell listeners */
+	setPoints(points) {
+		this.points = points;
+		emit(this, "pc-change", { points });
+	}
+	/** A pointer's position in grid units */
+	gridAt(event) {
+		const { left, top, width, height } = this.renderRoot.querySelector("svg").getBoundingClientRect();
+		const size = 10 + MARGIN * 2;
+		return {
+			x: (event.clientX - left) / (width || 1) * size - MARGIN,
+			y: -((event.clientY - top) / (height || 1) * size - MARGIN)
+		};
+	}
+	/**
+	* Add a point (smooth) where a press on the line is, and select it. Does nothing away from the line or when full.
+	*/
+	onGraphDown(event) {
+		if (event.button > 0 || this.points.length >= 32) return;
+		const { x, y } = this.gridAt(event);
+		if (x <= 0 || x >= 10) return;
+		if (Math.abs(profileY(this.points, x) - y) > LINE_REACH) return;
+		const index = this.points.findIndex((point) => point.x > x);
+		const added = {
+			x: snap(x, 0, 10),
+			y: snap(profileY(this.points, x), -10, 0),
+			i: Interpolation.BezierCubic
+		};
+		this.setPoints([
+			...this.points.slice(0, index),
+			added,
+			...this.points.slice(index)
+		]);
+		this.startDrag(event, index);
+	}
+	/** Select a point and start dragging it */
+	startDrag(event, index) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.selected = index;
+		this.dragging = index;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	}
+	onMove(event) {
+		if (this.dragging === void 0) return;
+		const { x, y } = this.gridAt(event);
+		this.setPoints(movePoint(this.points, this.dragging, x, y));
+	}
+	onUp() {
+		this.dragging = void 0;
+	}
+	/** Move the selected point a grid unit with the arrow keys */
+	onPointKeyDown(event, index) {
+		const move = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, 1],
+			ArrowDown: [0, -1]
+		}[event.key];
+		if (!move) return;
+		event.preventDefault();
+		const point = this.points[index];
+		this.setPoints(movePoint(this.points, index, point.x + move[0], point.y + move[1]));
+	}
+	/** Make the selected point a sharp corner or smooth */
+	setInterpolation(i) {
+		const index = this.selected;
+		if (index === void 0) return;
+		this.setPoints(this.points.map((point, at) => at === index ? {
+			...point,
+			i
+		} : point));
+	}
+	/** Remove the selected point (not the first or last) */
+	removeSelected() {
+		const index = this.selected;
+		if (!index || index >= this.points.length - 1) return;
+		this.selected = void 0;
+		this.setPoints(this.points.filter((_, at) => at !== index));
+	}
+	render() {
+		const { points } = this;
+		const selected = this.selected === void 0 ? void 0 : points[this.selected];
+		const inner = this.selected !== void 0 && this.selected > 0 && this.selected < points.length - 1;
+		const curve = curvePath(points);
+		const lines = Array.from({ length: 9 }, (_, i) => i + 1);
+		const size = 10 + MARGIN * 2;
+		return html`<svg
+        part="graph"
+        viewBox="${-.6} ${-.6} ${size} ${size}"
+        role="group"
+        aria-label=${this.label || nothing}
+        @pointerdown=${this.onGraphDown}
+        @pointermove=${this.onMove}
+        @pointerup=${this.onUp}
+        @pointercancel=${this.onUp}
+      >
+        <rect
+          class="frame"
+          x="0"
+          y="0"
+          width=${10}
+          height=${10}
+        ></rect>
+        <path
+          class="area"
+          d="${curve} L${10},${10} L0,${10} Z"
+        ></path>
+        ${lines.map((n) => svg`<line class="grid" x1=${n} y1="0" x2=${n} y2=${10}></line><line class="grid" x1="0" y1=${n} x2=${10} y2=${n}></line>`)}
+        <line
+          class="diagonal"
+          x1="0"
+          y1=${10}
+          x2=${10}
+          y2="0"
+        ></line>
+        <path class="curve" d=${curve}></path>
+        ${points.map((point, index) => svg`<circle
+              class="point ${index === this.selected ? "selected" : ""}"
+              cx=${point.x}
+              cy=${-point.y}
+              r="0.35"
+              tabindex="0"
+              role="button"
+              aria-pressed=${index === this.selected ? "true" : "false"}
+              aria-label=${this.t("paintCanvas.profileGraph.point", {
+			number: index + 1,
+			x: point.x,
+			y: point.y
+		})}
+              @focus=${() => this.selected = index}
+              @pointerdown=${(event) => this.startDrag(event, index)}
+              @keydown=${(event) => this.onPointKeyDown(event, index)}
+            ></circle>`)}
+      </svg>
+      <div class="buttons" part="buttons">
+        <button
+          type="button"
+          class="icon-button remove"
+          title=${this.t("paintCanvas.profileGraph.remove")}
+          aria-label=${this.t("paintCanvas.profileGraph.remove")}
+          ?disabled=${!inner}
+          @click=${() => this.removeSelected()}
+        >
+          −
+        </button>
+        <button
+          type="button"
+          class="icon-button linear"
+          title=${this.t("paintCanvas.profileGraph.linear")}
+          aria-pressed=${selected?.i === Interpolation.Linear ? "true" : "false"}
+          ?disabled=${!selected}
+          @click=${() => this.setInterpolation(Interpolation.Linear)}
+        >
+          ${iconLabel(this.iconUrl("smoothingLinear"), this.t("paintCanvas.profileGraph.linear"))}
+        </button>
+        <button
+          type="button"
+          class="icon-button bezier"
+          title=${this.t("paintCanvas.profileGraph.bezier")}
+          aria-pressed=${selected?.i === Interpolation.BezierCubic ? "true" : "false"}
+          ?disabled=${!selected}
+          @click=${() => this.setInterpolation(Interpolation.BezierCubic)}
+        >
+          ${iconLabel(this.iconUrl("smoothingBezierCubic"), this.t("paintCanvas.profileGraph.bezier"))}
+        </button>
+      </div>`;
+	}
+};
+defineElement("pc-profile-graph", PcProfileGraph);
+export { PcProfileGraph, curvePath, movePoint };