@lvl99dotcom/paintcanvas 0.4.0 → 0.6.0

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

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

@@ -1,7 +1,8 @@
+import { PILLS_CSS } from "../../styles/index.js";
 import { PcElement, defineElement, emit } from "../../base/index.js";
 import ChangeController from "../../ChangeController/index.js";
 import { SHORTCUT_DEFINITIONS, comboFromEvent, comboText, heldModifiers } from "../../../lib/utils/shortcuts/index.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, unsafeCSS } from "lit";
 // src/ui/elements/PcShortcutSettings/index.ts
 /** Keys used to move through and leave the settings, which are never recorded */
 var PASSED_KEYS = /* @__PURE__ */ new Set(["Tab", "Escape"]);
@@ -38,7 +39,10 @@ var PcShortcutSettings = class extends PcElement {
 		recording: { state: true },
 		status: { state: true }
 	};
-	static styles = [PcElement.styles, css`
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(PILLS_CSS),
+		css`
       :host {
         display: flex;
         flex-direction: column;
@@ -131,17 +135,9 @@ var PcShortcutSettings = class extends PcElement {
       }
       button.reset {
         align-self: flex-start;
-        min-height: var(--pc-control-size);
-        padding: var(--pc-space-1) var(--pc-space-3);
-        border: 0;
-        border-radius: var(--pc-radius-pill);
-        background: var(--pc-accent);
-        color: var(--pc-accent-text);
-        font: inherit;
-        font-weight: bold;
-        cursor: pointer;
       }
-    `];
+    `
+	];
 	changes = new ChangeController(this, () => [this.settings]);
 	constructor() {
 		super();
@@ -259,7 +255,7 @@ var PcShortcutSettings = class extends PcElement {
       <p class="status" role="status">${this.status}</p>
       <button
         type="button"
-        class="reset"
+        class="pill reset"
         @click=${() => {
 			settings.reset();
 			this.status = this.t("paintCanvas.shortcuts.wasReset");

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

@@ -0,0 +1,147 @@
+import { PcElement } from "../../base";
+import "../PcNumberSlider";
+/** One of a range's two ends: its lowest or highest value */
+export type RangeEnd = "low" | "high";
+/** What `pc-input` and `pc-change` give: the range's lowest and highest values */
+export interface RangeDetail {
+    /** A single slider's value (the same as `high`) */
+    value: number;
+    low: number;
+    high: number;
+}
+/**
+ * Where a value sits between `min` and `max`, from 0 to 1 (0 when they're the same).
+ *
+ * @example
+ * rangeFraction(25, 0, 100); // 0.25
+ */
+export declare const rangeFraction: (value: number, min: number, max: number) => number;
+/**
+ * A slider for a range: one track with two handles, the left for the lowest value (`low`) and the right for the highest
+ * (`high`), and a `<pc-number-slider>` for each on either side (dragged, or tapped to type). The two can't cross: the
+ * lowest is never above the highest. Values are kept within `min` and `max` and rounded to `step`.
+ *
+ * Pressing the track moves the nearest handle there and drags it. With keyboard focus on a handle, the arrow keys move
+ * it by `step`, Page Up and Page Down by `pageStep`, and Home and End as far as it can go. Touch, mouse and pen all work.
+ *
+ * With `single`, it's a slider for one value (`value`, from `min`): one handle, and one number slider before the track,
+ * or after it with `number-position="end"`. Use it for single values too, so they look and work the same as ranges.
+ *
+ * Fires `pc-input` (detail: `{ low, high }`) while a handle is dragged, and `pc-change` once it's let go, or when a value
+ * is changed with the keyboard or a number slider, after changing `low` and `high` themselves (and `value`, the same as
+ * `high`).
+ *
+ * @example
+ * html`<pc-slider-range label="Width" min="1" max="256" .low=${10} .high=${40}
+ *   @pc-change=${(e) => setWidth(e.detail.low, e.detail.high)}></pc-slider-range>`
+ */
+export declare class PcSliderRange extends PcElement {
+    static properties: {
+        low: {
+            type: NumberConstructor;
+        };
+        high: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        pageStep: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        unit: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        single: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        numberPosition: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        dragging: {
+            state: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** The range's lowest value */
+    low: number;
+    /** The range's highest value */
+    high: number;
+    /** Lowest value either end can have (0 by default) */
+    min: number;
+    /** Highest value either end can have (100 by default) */
+    max: number;
+    /** What values are rounded to, and how much an arrow key moves a handle (1 by default) */
+    step: number;
+    /** How much Page Up and Page Down move a handle (10 steps by default) */
+    pageStep?: number;
+    /** Shown after each value, e.g. "%" */
+    unit: string;
+    /** The range's name for screen readers, e.g. "Width" (each end is named from it) */
+    label: string;
+    disabled: boolean;
+    /** Whether it's a slider for one value (`value`), with one handle and one number slider */
+    single: boolean;
+    /** Where a single slider's number slider goes: before the track (`start`, the default) or after it (`end`) */
+    numberPosition: "start" | "end";
+    /** A single slider's value: the same as `high` */
+    get value(): number;
+    set value(value: number);
+    /** What `pc-input` and `pc-change` give */
+    private get detail();
+    /** How far an end can go: not past the other end (a single slider's value can go down to `min`) */
+    private limitsOf;
+    /** An end's name for screen readers: a single slider's is its label */
+    private endLabel;
+    /** The end being dragged, if any */
+    dragging?: RangeEnd;
+    constructor();
+    /**
+     * Set one end, kept within `min` and `max`, rounded to `step`, and not past the other end, then tell listeners (with
+     * `pc-input` while dragging, or `pc-change`) if it changed.
+     *
+     * @example
+     * range.setEnd("high", 40); // high is 40, unless low is above it (then it's low)
+     */
+    setEnd(end: RangeEnd, value: number, type?: string): void;
+    /** The value at a pointer's position along the track */
+    private valueAt;
+    /** The end nearest a value: the high end when it's above both, or past the middle of two that meet */
+    private nearestEnd;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Move a handle with the arrow keys, Page Up and Page Down, Home and End */
+    private onHandleKeyDown;
+    /** One end's handle */
+    private renderHandle;
+    /** One end's number slider: it can't go past the other end */
+    private renderNumber;
+    render(): import("lit").TemplateResult<1>;
+}