@lvl99dotcom/paintcanvas 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,208 @@
+import style_default from "./style.js";
+import { NO_TEXT_SELECTION_CSS, PILLS_CSS, WINDOWS_CSS } from "../../styles/index.js";
+import { PcElement, defineElement } from "../../base/index.js";
+import ChangeController from "../../ChangeController/index.js";
+import { maskModeFor } from "../../../lib/selection/geometry/index.js";
+import { LAYER_ALPHA_MASK_EVENT, LAYER_DRAG_EVENT, LAYER_MENU_OPEN_EVENT } from "../PcLayerItem/index.js";
+import { html, nothing, unsafeCSS } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { repeat } from "lit/directives/repeat.js";
+// src/ui/elements/PcLayersMenu/index.ts
+/**
+* Whether a point is inside a rectangle (edges included).
+*
+* @example
+* isInside(element.getBoundingClientRect(), event.clientX, event.clientY);
+*/
+var isInside = (rect, x, y) => x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+/**
+* Where a dragged layer would land among the other rows: before the first row whose middle is below the pointer, or
+* after the last. The ghost showing the place is left out, so the place doesn't jump when the ghost moves.
+*
+* @param rows - the other rows' top and height, in list order
+* @param ghost - the ghost's top and height, if shown
+*
+* @example
+* dropSlot([{ top: 0, height: 30 }, { top: 30, height: 30 }], 40); // 1
+*/
+var dropSlot = (rows, y, ghost) => {
+	const index = rows.findIndex((row) => {
+		const below = ghost && row.top >= ghost.top ? ghost.height : 0;
+		return y < row.top - below + row.height / 2;
+	});
+	return index < 0 ? rows.length : index;
+};
+/**
+* Layers menu: the user's layers from top to bottom and a "New Layer" button.
+*
+* Dragging a layer's reorder handle lifts its row out of the list to float with the pointer, and leaves a ghost with the
+* layer's name in the list where it would land: where it was, until it is moved somewhere else. Dropping it moves it
+* there, and dropping it on "New Layer" duplicates it (the cursor shows "+", and the button is
+* highlighted for touch). Escape cancels the drag. Moves and duplicates are announced to screen readers.
+*
+* @example
+* html`<pc-layers-menu .app=${app}></pc-layers-menu>`
+*/
+var PcLayersMenu = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		app: { attribute: false },
+		drag: { state: true },
+		announcement: { state: true }
+	};
+	static styles = [
+		PcElement.styles,
+		unsafeCSS(NO_TEXT_SELECTION_CSS),
+		unsafeCSS(style_default),
+		unsafeCSS(WINDOWS_CSS),
+		unsafeCSS(PILLS_CSS)
+	];
+	changes = new ChangeController(this, () => [this.app, this.app?.layers]);
+	constructor() {
+		super();
+		this.announcement = "";
+		this.addEventListener(LAYER_DRAG_EVENT, (event) => this.onLayerDrag(event.detail, event.composedPath()[0]));
+		this.addEventListener(LAYER_MENU_OPEN_EVENT, (event) => {
+			const opened = event.composedPath()[0];
+			for (const item of this.renderRoot.querySelectorAll("pc-layer-item")) if (item !== opened) item.menuOpen = false;
+		});
+		this.addEventListener(LAYER_ALPHA_MASK_EVENT, (event) => {
+			const { layer, shiftKey, altKey } = event.detail;
+			this.app?.selection.fromAlpha(layer, maskModeFor({
+				shiftKey,
+				altKey
+			}));
+		});
+	}
+	/**
+	* Follow a layer dragged by its reorder handle: show where it would land, then move or duplicate it when dropped.
+	*/
+	onLayerDrag({ layer, phase, x, y }, row) {
+		if (phase === "start") {
+			const rect = row.getBoundingClientRect();
+			this.drag = {
+				id: layer.id,
+				name: layer.name,
+				action: "none",
+				x,
+				y,
+				offsetX: x - rect.left,
+				offsetY: y - rect.top,
+				width: rect.width,
+				height: rect.height
+			};
+		}
+		const drag = this.drag;
+		if (!drag) return;
+		if (phase === "cancel") {
+			this.drag = void 0;
+			return;
+		}
+		this.drag = {
+			...drag,
+			x,
+			y,
+			...this.dropTarget(drag.id, x, y)
+		};
+		if (phase === "end") this.drop(this.drag);
+	}
+	/**
+	* What dropping the dragged layer at a point would do: nothing outside the menu, duplicate it on "New Layer" (if
+	* another layer can be made), otherwise move it to the place among the other rows nearest the pointer.
+	*/
+	dropTarget(id, x, y) {
+		if (!isInside(this.getBoundingClientRect(), x, y)) return {
+			action: "none",
+			slot: void 0
+		};
+		const root = this.renderRoot;
+		if (isInside(root.querySelector("button.new").getBoundingClientRect(), x, y)) return {
+			action: this.app?.layers.canCreate ? "duplicate" : "none",
+			slot: void 0
+		};
+		const rows = [...root.querySelectorAll("pc-layer-item")].filter((item) => item.layer?.id !== id).map((item) => item.getBoundingClientRect());
+		const ghost = root.querySelector(".ghost")?.getBoundingClientRect();
+		return {
+			action: "move",
+			slot: dropSlot(rows, y, ghost)
+		};
+	}
+	/**
+	* Move or duplicate the dropped layer, and tell screen readers what happened.
+	*/
+	drop(drag) {
+		this.drag = void 0;
+		const layers = this.app?.layers;
+		if (!layers) return;
+		if (drag.action === "duplicate") {
+			layers.duplicate(drag.id);
+			this.announcement = `${drag.name} duplicated`;
+		} else if (drag.action === "move" && drag.slot !== void 0) {
+			const from = layers.indexOf(drag.id);
+			layers.move(drag.id, drag.slot);
+			if (layers.indexOf(drag.id) !== from) this.announcement = `${drag.name} moved to position ${drag.slot + 1} of ${layers.layers.length}`;
+		}
+	}
+	/**
+	* The rows, with a ghost (the dragged layer's name) where it would land, counting only the other rows: where it was,
+	* unless it would move. The dragged row floats with the pointer, out of the list. Rows are keyed by layer, so each
+	* layer keeps its row (and a drag its handle) as the ghost moves.
+	*/
+	renderRows(layers) {
+		const drag = this.drag;
+		const slot = drag ? drag.action === "move" ? drag.slot : layers.indexOf(drag.id) : void 0;
+		const ghost = {
+			key: "ghost",
+			view: html`<div
+        class="ghost"
+        aria-hidden="true"
+        style=${styleMap({ height: `${drag?.height}px` })}
+      >
+        ${drag?.name}
+      </div>`
+		};
+		const entries = [];
+		let others = 0;
+		for (const layer of layers.layers) {
+			const dragged = layer.id === drag?.id;
+			if (!dragged && slot === others++) entries.push(ghost);
+			entries.push({
+				key: layer.id,
+				view: html`<pc-layer-item
+          .stack=${layers}
+          .background=${this.app?.background}
+          .layer=${layer}
+          ?dragging=${dragged}
+          .dropAction=${dragged ? drag?.action : void 0}
+          style=${styleMap(dragged && drag ? {
+					left: `${drag.x - drag.offsetX}px`,
+					top: `${drag.y - drag.offsetY}px`,
+					width: `${drag.width}px`
+				} : {})}
+        ></pc-layer-item>`
+			});
+		}
+		if (slot === others) entries.push(ghost);
+		return repeat(entries, (entry) => entry.key, (entry) => entry.view);
+	}
+	render() {
+		const layers = this.app?.layers;
+		if (!layers) return html``;
+		return html`
+      ${this.renderRows(layers)}
+      <button
+        type="button"
+        class="pill new ${this.drag?.action === "duplicate" ? "drop-target" : ""}"
+        ?disabled=${!layers.canCreate}
+        @click=${() => layers.create()}
+      >
+        ${this.t("layers.new")}
+      </button>
+      <p class="announcement" role="status" aria-live="polite">
+        ${this.announcement || nothing}
+      </p>
+    `;
+	}
+};
+defineElement("pc-layers-menu", PcLayersMenu);
+export { PcLayersMenu, dropSlot, isInside };

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

@@ -0,0 +1,3 @@
+// src/ui/elements/PcLayersMenu/style.css?inline
+var style_default = ":host {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  box-sizing: border-box;\n  /* The layout makes it fill its panel when narrow */\n  width: var(--pc-layers-menu-width, 290px);\n  padding: 8px;\n  /* Light grey, like the bars */\n  background: var(--pc-bar);\n  box-shadow: var(--pc-shadow);\n}\n/* \"New Layer\": a full-width purple pill */\nbutton.new {\n  width: 100%;\n  min-height: 40px;\n}\n/* Where a dragged layer would land: a full-width block with its name, as tall as the row (set by the menu) */\n.ghost {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  border: 2px dashed;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n/* Dropping a dragged layer here duplicates it (highlighted for touch, where there is no \"+\" cursor) */\nbutton.new.drop-target {\n  outline: var(--pc-focus-width) solid var(--pc-focus);\n  outline-offset: 2px;\n}\n/* For screen readers only */\n.announcement {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n";
+export { style_default as default };

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

@@ -0,0 +1,31 @@
+import { LitElement } from "lit";
+/**
+ * Creates the contents of its `<template>` only while the `<paint-canvas>` layout it's in meets a condition (see
+ * `matchesState`), e.g. to show a different element on narrow layouts or while using touch. The contents are added
+ * beside the template, in the page (not a shadow root), so the page's styles apply. Outside a layout, nothing shows.
+ *
+ * @example
+ * html`<pc-match when="narrow"><template><my-compact-thing></my-compact-thing></template></pc-match>`
+ * html`<pc-match when="!narrow input:pen"><template>…</template></pc-match>`
+ */
+export declare class PcMatch extends LitElement {
+    static properties: {
+        when: {
+            type: StringConstructor;
+        };
+    };
+    /** The condition (see `matchesState`) */
+    when: string;
+    private readonly layout;
+    /** The contents created from the template, while shown */
+    private created;
+    constructor();
+    protected createRenderRoot(): HTMLElement;
+    /** Whether the condition holds now */
+    get active(): boolean;
+    disconnectedCallback(): void;
+    /** Remove the created contents */
+    private clear;
+    protected updated(): void;
+    protected render(): null;
+}

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

@@ -0,0 +1,58 @@
+import { defineElement } from "../../base/index.js";
+import { LayoutStateController, matchesState } from "../../layout/index.js";
+import { LitElement } from "lit";
+// src/ui/elements/PcMatch/index.ts
+/**
+* Creates the contents of its `<template>` only while the `<paint-canvas>` layout it's in meets a condition (see
+* `matchesState`), e.g. to show a different element on narrow layouts or while using touch. The contents are added
+* beside the template, in the page (not a shadow root), so the page's styles apply. Outside a layout, nothing shows.
+*
+* @example
+* html`<pc-match when="narrow"><template><my-compact-thing></my-compact-thing></template></pc-match>`
+* html`<pc-match when="!narrow input:pen"><template>…</template></pc-match>`
+*/
+var PcMatch = class extends LitElement {
+	static properties = { when: { type: String } };
+	layout = new LayoutStateController(this);
+	/** The contents created from the template, while shown */
+	created = [];
+	constructor() {
+		super();
+		this.when = "";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	/** Whether the condition holds now */
+	get active() {
+		const state = this.layout.state;
+		return state !== void 0 && matchesState(this.when, state);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.clear();
+	}
+	/** Remove the created contents */
+	clear() {
+		for (const node of this.created) node.parentNode?.removeChild(node);
+		this.created = [];
+	}
+	updated() {
+		const shown = this.created.length > 0;
+		if (this.active === shown) return;
+		if (shown) {
+			this.clear();
+			return;
+		}
+		const template = this.querySelector(":scope > template");
+		if (!(template instanceof HTMLTemplateElement)) return;
+		const content = template.content.cloneNode(true);
+		this.created = [...content.childNodes];
+		this.append(content);
+	}
+	render() {
+		return null;
+	}
+};
+defineElement("pc-match", PcMatch);
+export { PcMatch };

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

@@ -0,0 +1,43 @@
+import { PcElement } from "../../base";
+/**
+ * Wraps content docked at a side of the `<paint-canvas>` layout (e.g. the layers menu or a chat window). Its `icon`,
+ * `label` and `badge` are what the layout shows for it when the side narrows to a rail of buttons; the badge is a dot
+ * meaning something new (e.g. unread messages). It names its region for screen readers. It's at most 290px wide
+ * (`--pc-panel-max-width`).
+ *
+ * @example
+ * html`<pc-panel slot="right" icon="layers" label="Layers"><my-layers></my-layers></pc-panel>`
+ */
+export declare class PcPanel extends PcElement {
+    static properties: {
+        icon: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        badge: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    /** Name of the icon for its rail button */
+    icon: string;
+    /** Names the panel (its rail button and region) */
+    label: string;
+    /** Whether there's something new in it */
+    badge: boolean;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,51 @@
+import { PcElement, defineElement } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+// src/ui/elements/PcPanel/index.ts
+/**
+* Wraps content docked at a side of the `<paint-canvas>` layout (e.g. the layers menu or a chat window). Its `icon`,
+* `label` and `badge` are what the layout shows for it when the side narrows to a rail of buttons; the badge is a dot
+* meaning something new (e.g. unread messages). It names its region for screen readers. It's at most 290px wide
+* (`--pc-panel-max-width`).
+*
+* @example
+* html`<pc-panel slot="right" icon="layers" label="Layers"><my-layers></my-layers></pc-panel>`
+*/
+var PcPanel = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		icon: { type: String },
+		label: { type: String },
+		badge: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: flex;
+        min-width: 0;
+        max-width: var(--pc-panel-max-width, 290px);
+        min-height: 0;
+        flex-direction: column;
+      }
+      section {
+        display: flex;
+        flex: 1;
+        min-height: 0;
+        flex-direction: column;
+      }
+    `];
+	constructor() {
+		super();
+		this.icon = "";
+		this.label = "";
+		this.badge = false;
+	}
+	render() {
+		return html`<section part="panel" aria-label=${this.label || nothing}>
+      <slot></slot>
+    </section>`;
+	}
+};
+defineElement("pc-panel", PcPanel);
+export { PcPanel };

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

@@ -0,0 +1,48 @@
+import { type PropertyValues } from "lit";
+import { PcElement } from "../../base";
+/**
+ * A floating box for a menu or settings (e.g. the brush presets), shown while `open`. The implementer places it (e.g.
+ * next to the button that opens it). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
+ * `pc-close`, and the implementer sets `open` to false in response. Focus moves into it when it opens.
+ *
+ * @example
+ * html`<pc-popover ?open=${shown} label="Brush presets" .anchor=${button} @pc-close=${hide}>…</pc-popover>`
+ */
+export declare class PcPopover extends PcElement {
+    static properties: {
+        open: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        anchor: {
+            attribute: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    open: boolean;
+    /** Names the popover for screen readers */
+    label: string;
+    /** The element that opens it (pressing it doesn't count as pressing outside) */
+    anchor?: Element;
+    private readonly onPointerDown;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    /** Escape closes */
+    private onKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,86 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html } from "lit";
+// src/ui/elements/PcPopover/index.ts
+/**
+* A floating box for a menu or settings (e.g. the brush presets), shown while `open`. The implementer places it (e.g.
+* next to the button that opens it). It isn't modal: Escape, or a press outside it and outside its `anchor`, fires
+* `pc-close`, and the implementer sets `open` to false in response. Focus moves into it when it opens.
+*
+* @example
+* html`<pc-popover ?open=${shown} label="Brush presets" .anchor=${button} @pc-close=${hide}>…</pc-popover>`
+*/
+var PcPopover = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		open: {
+			type: Boolean,
+			reflect: true
+		},
+		label: { type: String },
+		anchor: { attribute: false }
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        position: absolute;
+        z-index: 10;
+        display: none;
+      }
+      :host([open]) {
+        display: block;
+      }
+      [role="dialog"] {
+        max-height: inherit;
+        overflow: auto;
+        padding: var(--pc-space-2);
+        border-radius: var(--pc-radius);
+        background: var(--pc-surface-raised);
+        color: var(--pc-text);
+        box-shadow: var(--pc-shadow);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      [role="dialog"]:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+      }
+    `];
+	onPointerDown = (event) => {
+		if (!this.open) return;
+		const path = event.composedPath();
+		if (!path.includes(this) && !(this.anchor && path.includes(this.anchor))) emit(this, "pc-close");
+	};
+	constructor() {
+		super();
+		this.open = false;
+		this.label = "";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("pointerdown", this.onPointerDown, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("pointerdown", this.onPointerDown, true);
+	}
+	updated(changed) {
+		if (changed.has("open") && this.open) this.renderRoot.querySelector("[role=dialog]")?.focus();
+	}
+	/** Escape closes */
+	onKeyDown(event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		emit(this, "pc-close");
+	}
+	render() {
+		return html`<div
+      part="popover"
+      role="dialog"
+      aria-label=${this.label}
+      tabindex="-1"
+      @keydown=${this.onKeyDown}
+    >
+      <slot></slot>
+    </div>`;
+	}
+};
+defineElement("pc-popover", PcPopover);
+export { PcPopover };

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

@@ -0,0 +1,57 @@
+import { PcElement } from "../../base";
+/**
+ * A slider with its label and value, e.g. opacity or volume. Fires `input` while dragging and `change` once let go,
+ * each with the new `value`.
+ *
+ * @example
+ * html`<pc-slider label="Opacity" min="0" max="100" unit="%" .value=${50} @change=${setOpacity}></pc-slider>`
+ */
+export declare class PcSlider extends PcElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        value: {
+            type: NumberConstructor;
+        };
+        unit: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        translations: {
+            attribute: boolean;
+        };
+        icons: {
+            attribute: boolean;
+        };
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    /** Shown after the value, e.g. "%" */
+    unit: string;
+    disabled: boolean;
+    constructor();
+    /** Follow the slider, and tell listeners (`input` while dragging, `change` once let go) */
+    private onSlide;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,88 @@
+import { PcElement, defineElement, emit } from "../../base/index.js";
+import { css, html, nothing } from "lit";
+import { live } from "lit/directives/live.js";
+// src/ui/elements/PcSlider/index.ts
+/**
+* A slider with its label and value, e.g. opacity or volume. Fires `input` while dragging and `change` once let go,
+* each with the new `value`.
+*
+* @example
+* html`<pc-slider label="Opacity" min="0" max="100" unit="%" .value=${50} @change=${setOpacity}></pc-slider>`
+*/
+var PcSlider = class extends PcElement {
+	static properties = {
+		...PcElement.properties,
+		label: { type: String },
+		min: { type: Number },
+		max: { type: Number },
+		step: { type: Number },
+		value: { type: Number },
+		unit: { type: String },
+		disabled: {
+			type: Boolean,
+			reflect: true
+		}
+	};
+	static styles = [PcElement.styles, css`
+      :host {
+        display: block;
+      }
+      label {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        gap: var(--pc-space-1) var(--pc-space-2);
+        align-items: center;
+        color: var(--pc-text);
+        font-family: var(--pc-font);
+        font-size: var(--pc-font-size);
+      }
+      input {
+        grid-column: 1 / -1;
+        width: 100%;
+        margin: 0;
+        accent-color: var(--pc-accent);
+      }
+      input:focus-visible {
+        outline: var(--pc-focus-width) solid var(--pc-focus);
+        outline-offset: 2px;
+      }
+      output {
+        color: var(--pc-text-muted);
+        font-variant-numeric: tabular-nums;
+      }
+    `];
+	constructor() {
+		super();
+		this.label = "";
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.value = 0;
+		this.unit = "";
+		this.disabled = false;
+	}
+	/** Follow the slider, and tell listeners (`input` while dragging, `change` once let go) */
+	onSlide(event) {
+		this.value = Number(event.target.value);
+		emit(this, event.type, { value: this.value });
+	}
+	render() {
+		return html`<label part="label">
+      <span>${this.label}</span>
+      <output part="value">${this.value}${this.unit || nothing}</output>
+      <input
+        part="slider"
+        type="range"
+        min=${this.min}
+        max=${this.max}
+        step=${this.step}
+        .value=${live(String(this.value))}
+        ?disabled=${this.disabled}
+        @input=${this.onSlide}
+        @change=${this.onSlide}
+      />
+    </label>`;
+	}
+};
+defineElement("pc-slider", PcSlider);
+export { PcSlider };