@lvl99dotcom/paintcanvas 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,136 @@
+import style_default from "./style.js";
+import { PcElement, defineElement } from "../../base/index.js";
+import StrokeEngine from "../../../lib/brushes/StrokeEngine/index.js";
+import Layer, { createOffscreenCanvas } from "../../../lib/classes/Layer/index.js";
+import { html, unsafeCSS } from "lit";
+// src/ui/elements/PcBrushTest/index.ts
+/** Width of the testing area in pixels (double its displayed width, for a sharper picture) */
+var TEST_AREA_WIDTH = 800;
+/** Height of the testing area in pixels (double its displayed height) */
+var TEST_AREA_HEIGHT = 320;
+/** The colour test strokes are drawn in, whatever the current colour */
+var TEST_COLOUR = "#000000";
+/**
+* A small area to try brush settings before saving them: strokes are drawn in black, at the settings' own size, on a
+* white background at double resolution (800 × 320 pixels shown in the window's width). "Clear" (a red pill) empties it.
+*
+* @example
+* html`<pc-brush-test .config=${config} .tips=${app.tips}></pc-brush-test>`
+*/
+var PcBrushTest = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		config: { attribute: false },
+		tips: { attribute: false }
+	};
+	static styles = [PcElement.styles, unsafeCSS(style_default)];
+	/** Creates the layer and stroke canvases (replaceable for tests) */
+	createCanvas = createOffscreenCanvas;
+	layer;
+	engine;
+	/** The pointer drawing, if any */
+	pointerId;
+	onEngineChange = () => this.paint();
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.engine?.removeEventListener("change", this.onEngineChange);
+	}
+	/** The visible canvas */
+	get canvas() {
+		return this.renderRoot.querySelector("canvas");
+	}
+	/** The layer strokes are drawn on, and the engine drawing them (created on first use) */
+	get drawing() {
+		this.layer ??= new Layer({ name: "Test" }, 800, 320, this.createCanvas);
+		if (!this.engine) {
+			this.engine = new StrokeEngine(800, 320, this.createCanvas);
+			this.engine.addEventListener("change", this.onEngineChange);
+		}
+		return {
+			layer: this.layer,
+			engine: this.engine
+		};
+	}
+	/** A pointer's position in the area's pixels, with pen pressure and tilt */
+	point(event) {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const scale = rect.width ? 800 / rect.width : 1;
+		return {
+			x: (event.clientX - rect.left) * scale,
+			y: (event.clientY - rect.top) * scale,
+			...event.pointerType === "pen" ? {
+				pressure: event.pressure,
+				tiltX: event.tiltX,
+				tiltY: event.tiltY
+			} : {}
+		};
+	}
+	/**
+	* Start a test stroke.
+	*/
+	onPointerDown(event) {
+		const config = this.config;
+		if (!config || !this.tips || event.button !== 0) return;
+		const { layer, engine } = this.drawing;
+		this.pointerId = event.pointerId;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		engine.begin({
+			layer,
+			mode: "paint",
+			preset: config,
+			size: {
+				width: config.width ?? 1,
+				height: config.height ?? 1
+			},
+			colour: TEST_COLOUR,
+			tip: this.tips.get(config),
+			isPen: event.pointerType === "pen"
+		}, this.point(event), event.timeStamp);
+	}
+	/** Continue the test stroke */
+	onPointerMove(event) {
+		if (event.pointerId !== this.pointerId) return;
+		this.engine?.move(this.point(event), event.timeStamp);
+	}
+	/** Finish the test stroke */
+	onPointerUp(event) {
+		if (event.pointerId !== this.pointerId) return;
+		this.pointerId = void 0;
+		this.engine?.end(this.point(event), event.timeStamp);
+		this.paint();
+	}
+	/**
+	* Empty the testing area.
+	*/
+	clear() {
+		this.engine?.cancel();
+		this.layer?.context.clearRect(0, 0, 800, 320);
+		this.paint();
+	}
+	/** Show the layer (with any stroke in progress) on the visible canvas */
+	paint() {
+		const ctx = this.canvas?.getContext("2d");
+		if (!ctx) return;
+		ctx.clearRect(0, 0, 800, 320);
+		const image = this.engine?.preview?.image ?? this.layer?.canvas;
+		if (image) ctx.drawImage(image, 0, 0);
+	}
+	render() {
+		return html`
+      <canvas
+        width=${800}
+        height=${320}
+        aria-label=${this.t("paintCanvas.brushConfig.testArea")}
+        @pointerdown=${this.onPointerDown}
+        @pointermove=${this.onPointerMove}
+        @pointerup=${this.onPointerUp}
+        @pointercancel=${this.onPointerUp}
+      ></canvas>
+      <button type="button" class="clear" @click=${() => this.clear()}>
+        ${this.t("paintCanvas.common.clear")}
+      </button>
+    `;
+	}
+};
+defineElement("pc-brush-test", PcBrushTest);
+export { PcBrushTest, TEST_AREA_HEIGHT, TEST_AREA_WIDTH, TEST_COLOUR };

package/dist/ui/elements/PcBrushTest/style.js

@@ -0,0 +1,3 @@
+// src/ui/elements/PcBrushTest/style.css?inline
+var style_default = ":host {\n  display: block;\n}\ncanvas {\n  display: block;\n  width: 100%;\n  background: #fff;\n  border: 1px solid var(--pc-border);\n  touch-action: none;\n}\n/* \"Clear\": a red pill */\nbutton.clear {\n  margin-top: 6px;\n  padding: 4px 16px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--pc-red);\n  color: #ffffff;\n  font: inherit;\n  font-weight: bold;\n  cursor: pointer;\n}\nbutton.clear:hover {\n  filter: brightness(1.1);\n}\nbutton.clear:focus-visible {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n";
+export { style_default as default };

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

@@ -0,0 +1,57 @@
+import { PcElement } from "../../base";
+import "../PcIcon";
+/** How a button looks */
+export type ButtonVariant = "accent" | "cancel" | "dismiss" | "pill" | "icon";
+/**
+ * A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
+ * (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
+ * Clicks reach listeners on the element; a disabled button sends none.
+ *
+ * @example
+ * html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+ * html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
+ */
+export declare class PcButton extends PcElement {
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pressed: {
+            type: BooleanConstructor;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    variant: ButtonVariant;
+    /** Name of an icon to show before the text (or alone, for an icon button) */
+    icon?: string;
+    /** The button's name for screen readers, when its content doesn't say it (e.g. an icon button) */
+    label?: string;
+    disabled: boolean;
+    /** For a button that toggles something: whether it's on (undefined for an ordinary button) */
+    pressed?: boolean;
+    constructor();
+    /** Move keyboard focus to the button */
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,124 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcButton/index.ts
+/**
+* A button: affirmative (`accent`, the default), cancelling (`cancel`), a quiet text button (`dismiss`), a small pill
+* (`pill`), or a boxed icon button (`icon`, which needs a `label` for screen readers). Its text goes in its content.
+* Clicks reach listeners on the element; a disabled button sends none.
+*
+* @example
+* html`<pc-button variant="cancel" @click=${close}>Cancel</pc-button>`
+* html`<pc-button variant="icon" icon="undo" label="Undo"></pc-button>`
+*/
+var PcButton = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		variant: {
+			type: String,
+			reflect: true
+		},
+		icon: { type: String },
+		label: { type: String },
+		disabled: {
+			type: Boolean,
+			reflect: true
+		},
+		pressed: { type: Boolean }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+      }
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      button {
+        display: inline-flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        gap: var(--pc-space-1);
+        min-height: var(--pc-control-size);
+        padding: var(--pc-space-1) var(--pc-space-3);
+        border: 0;
+        /* A joined button group gives each button its corners */
+        border-radius: var(--pc-group-radius, var(--pc-radius-pill));
+        background: var(--pc-accent);
+        color: var(--pc-accent-text);
+        font: inherit;
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+        font-weight: bold;
+        cursor: pointer;
+      }
+      button:hover:not(:disabled) {
+        filter: brightness(1.15);
+      }
+      button:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+      button:disabled {
+        background: var(--pc-disabled);
+        opacity: 0.6;
+        cursor: default;
+      }
+      :host([variant="cancel"]) button {
+        background: var(--pc-cancel);
+        color: var(--pc-cancel-text);
+      }
+      :host([variant="dismiss"]) button {
+        background: transparent;
+        color: var(--pc-dismiss-text);
+      }
+      :host([variant="dismiss"]) button:hover {
+        filter: none;
+        text-decoration: underline;
+      }
+      :host([variant="pill"]) button {
+        min-height: 30px;
+      }
+      :host([variant="icon"]) button {
+        min-height: 0;
+        padding: 2px;
+        border: 1px solid var(--pc-border);
+        border-radius: var(--pc-group-radius, var(--pc-radius-small));
+        background: var(--pc-surface);
+        color: var(--pc-text);
+      }
+      :host([variant="icon"]) button:hover:not(:disabled) {
+        filter: none;
+        background: var(--pc-surface-hover);
+      }
+      :host([variant="icon"]) button[aria-pressed="true"] {
+        background: var(--pc-accent);
+      }
+      :host([variant="icon"]) button:disabled {
+        opacity: 0.4;
+      }
+    `];
+	constructor() {
+		super();
+		this.variant = "accent";
+		this.disabled = false;
+	}
+	/** Move keyboard focus to the button */
+	focus(options) {
+		this.renderRoot.querySelector("button")?.focus(options);
+	}
+	render() {
+		return html`<button
+      part="button"
+      type="button"
+      ?disabled=${this.disabled}
+      aria-label=${this.label || nothing}
+      aria-pressed=${this.pressed === void 0 ? nothing : String(this.pressed)}
+      title=${this.variant === "icon" && this.label || nothing}
+    >
+      ${this.icon ? html`<pc-icon name=${this.icon}></pc-icon>` : nothing}<slot
+      ></slot>
+    </button>`;
+	}
+};
+defineElement("pc-button", PcButton);
+export { PcButton };

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

@@ -0,0 +1,44 @@
+import { PcElement } from "../../base";
+/**
+ * Groups buttons in a row (`horizontal`, the default) or a column (`vertical`), with a `label` that names the group for
+ * screen readers. When `joined`, the buttons touch and make one pill: the first has the rounded start, the last the
+ * rounded end, and those between are square. It tells its children their corners with `--pc-group-radius`, which
+ * `<pc-button>` follows (other content can too).
+ *
+ * @example
+ * html`<pc-button-group orientation="vertical" label="Tools">…</pc-button-group>`
+ * html`<pc-button-group joined label="View"><pc-button>Day</pc-button><pc-button>Week</pc-button></pc-button-group>`
+ */
+export declare class PcButtonGroup extends PcElement {
+    static properties: {
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        joined: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    orientation: "horizontal" | "vertical";
+    /** Names the group for screen readers */
+    label: string;
+    /** Whether the buttons touch, making one pill */
+    joined: boolean;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,93 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import { css, html } from "lit";
+// src/ui/elements/PcButtonGroup/index.ts
+/**
+* Groups buttons in a row (`horizontal`, the default) or a column (`vertical`), with a `label` that names the group for
+* screen readers. When `joined`, the buttons touch and make one pill: the first has the rounded start, the last the
+* rounded end, and those between are square. It tells its children their corners with `--pc-group-radius`, which
+* `<pc-button>` follows (other content can too).
+*
+* @example
+* html`<pc-button-group orientation="vertical" label="Tools">…</pc-button-group>`
+* html`<pc-button-group joined label="View"><pc-button>Day</pc-button><pc-button>Week</pc-button></pc-button-group>`
+*/
+var PcButtonGroup = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		orientation: {
+			type: String,
+			reflect: true
+		},
+		label: { type: String },
+		joined: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: inline-flex;
+      }
+      [role="group"] {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--pc-space-1);
+        align-items: center;
+      }
+      :host([orientation="vertical"]) [role="group"] {
+        flex-direction: column;
+        flex-wrap: nowrap;
+        align-items: stretch;
+      }
+      /* Joined: one pill, with the buttons' borders overlapping */
+      :host([joined]) [role="group"] {
+        flex-wrap: nowrap;
+        gap: 0;
+        align-items: stretch;
+      }
+      :host([joined]) ::slotted(*) {
+        --pc-group-radius: 0;
+      }
+      :host([joined]) ::slotted(:not(:first-child)) {
+        margin-left: -1px;
+      }
+      :host([joined]) ::slotted(:first-child) {
+        --pc-group-radius: var(--pc-radius-pill) 0 0 var(--pc-radius-pill);
+      }
+      :host([joined]) ::slotted(:last-child) {
+        --pc-group-radius: 0 var(--pc-radius-pill) var(--pc-radius-pill) 0;
+      }
+      :host([joined][orientation="vertical"]) ::slotted(:not(:first-child)) {
+        margin-top: -1px;
+        margin-left: 0;
+      }
+      :host([joined][orientation="vertical"]) ::slotted(:first-child) {
+        --pc-group-radius: var(--pc-radius-pill) var(--pc-radius-pill) 0 0;
+      }
+      :host([joined][orientation="vertical"]) ::slotted(:last-child) {
+        --pc-group-radius: 0 0 var(--pc-radius-pill) var(--pc-radius-pill);
+      }
+      :host([joined]) ::slotted(:only-child) {
+        --pc-group-radius: var(--pc-radius-pill);
+      }
+    `];
+	constructor() {
+		super();
+		this.orientation = "horizontal";
+		this.label = "";
+		this.joined = false;
+	}
+	render() {
+		return html`<div
+      part="group"
+      role="group"
+      aria-label=${this.label}
+      aria-orientation=${this.orientation}
+    >
+      <slot></slot>
+    </div>`;
+	}
+};
+defineElement("pc-button-group", PcButtonGroup);
+export { PcButtonGroup };