@xsynaptic/sonic-ui 0.3.0 → 0.5.0

package/dist/default/elements/value-element.js

@@ -0,0 +1,691 @@
+import { clamp } from "../lib/math.js";
+import { placeChildren, requireChild } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicFormElement } from "./form-element.js";
+import { ReadoutClaim } from "./readout-claim.js";
+import { Readout } from "./readout.js";
+import { ValueEntry } from "./value-entry.js";
+import { copyNode } from "../lib/copy-node.js";
+import { dragThresholdPx, startDrag, stepDrag } from "../lib/drag-step.js";
+import { focusByPointer } from "../lib/focus-by-pointer.js";
+import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
+import { parseNumberList } from "../lib/number-list.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+import { readRegions } from "../lib/time-regions.js";
+import { resetKeys, valueMapping } from "../lib/value-mapping.js";
+
+//#region src/elements/value-element.ts
+const detentZonePx = 8;
+const fallbackTravelPx = 160;
+let instanceCount = 0;
+const proportionAttributes = /* @__PURE__ */ new Set([
+	"max",
+	"midpoint",
+	"min",
+	"notched",
+	"positions",
+	"taper"
+]);
+const roleAttributes = [
+	"aria-disabled",
+	"aria-orientation",
+	"aria-valuemax",
+	"aria-valuemin",
+	"aria-valuenow",
+	"aria-valuetext",
+	"role",
+	"tabindex"
+];
+function scaleValue(mark) {
+	const text = mark.dataset.sonicValue?.trim();
+	return text ? Number(text) : NaN;
+}
+function scaleMark(original) {
+	const mark = copyNode(original);
+	if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) return void 0;
+	if (!Number.isFinite(scaleValue(mark))) return void 0;
+	const isTick = mark.childElementCount === 0 && mark.textContent.trim() === "";
+	mark.classList.add(isTick ? "sonic-scale-tick" : "sonic-scale-label");
+	return mark;
+}
+let link;
+function linkValue(element) {
+	return link(element);
+}
+var SonicValueElement = class extends SonicFormElement {
+	static observedAttributes = [
+		...SonicFormElement.observedAttributes,
+		"detent",
+		"max",
+		"midpoint",
+		"min",
+		"notched",
+		"origin",
+		"readout",
+		"step",
+		"taper",
+		"value",
+		"positions"
+	];
+	static {
+		link = (element) => ({
+			input: (next, isMover = false) => (isMover || !element.#isHeld()) && element.input(next),
+			isDisabled: () => element.isDisabled(),
+			isHeld: () => element.#isHeld(),
+			land: (resolve) => {
+				element.#land = resolve;
+			},
+			limit: (bounds) => {
+				element.#limit = bounds;
+			},
+			mapping: () => element.mapping(),
+			value: () => element.#value,
+			watch: (listener) => {
+				element.#watchers.add(listener);
+				return () => {
+					element.#watchers.delete(listener);
+				};
+			}
+		});
+	}
+	get buffered() {
+		return this.#buffered.map(([start, end]) => [start, end]);
+	}
+	set buffered(regions) {
+		this.#buffered = regions ? readRegions(regions).toSorted((first, second) => first[0] - second[0]) : [];
+		this.render();
+	}
+	get default() {
+		return this.optionalNumberAttribute("default");
+	}
+	set default(value) {
+		this.reflect("default", value);
+	}
+	get detent() {
+		return this.optionalNumberAttribute("detent");
+	}
+	set detent(value) {
+		this.reflect("detent", value);
+	}
+	get dimmed() {
+		return this.hasAttribute("dimmed");
+	}
+	set dimmed(isDimmed) {
+		this.reflect("dimmed", isDimmed);
+	}
+	get doublePress() {
+		return this.getAttribute("double-press") === "reset" ? "reset" : "entry";
+	}
+	set doublePress(gesture) {
+		this.reflect("double-press", gesture);
+	}
+	get formatSpokenValue() {
+		return this.#formatSpokenValue;
+	}
+	set formatSpokenValue(format) {
+		this.#formatSpokenValue = format;
+		this.render();
+	}
+	get formatValue() {
+		return this.#formatValue;
+	}
+	set formatValue(format) {
+		this.#formatValue = format;
+		this.render();
+	}
+	get keyStep() {
+		return this.optionalNumberAttribute("key-step");
+	}
+	set keyStep(value) {
+		this.reflect("key-step", value);
+	}
+	get max() {
+		return this.numberAttribute("max", 100);
+	}
+	set max(value) {
+		this.reflect("max", value);
+	}
+	get midpoint() {
+		return this.optionalNumberAttribute("midpoint");
+	}
+	set midpoint(value) {
+		this.reflect("midpoint", value);
+	}
+	get min() {
+		return this.numberAttribute("min", 0);
+	}
+	set min(value) {
+		this.reflect("min", value);
+	}
+	get notched() {
+		return this.hasAttribute("notched");
+	}
+	set notched(isNotched) {
+		this.reflect("notched", isNotched);
+	}
+	get origin() {
+		return this.optionalNumberAttribute("origin");
+	}
+	set origin(value) {
+		this.reflect("origin", value);
+	}
+	get parseValue() {
+		return this.#parseValue;
+	}
+	set parseValue(parse) {
+		this.#parseValue = parse;
+	}
+	get positions() {
+		return parseNumberList(this.getAttribute("positions"));
+	}
+	set positions(positions) {
+		this.reflect("positions", positions?.join(" "));
+	}
+	get readout() {
+		return this.hasAttribute("readout");
+	}
+	set readout(isShown) {
+		this.reflect("readout", isShown);
+	}
+	get step() {
+		return this.numberAttribute("step", 1);
+	}
+	set step(value) {
+		this.reflect("step", value);
+	}
+	get taper() {
+		return this.getAttribute("taper") === "log" ? "log" : "linear";
+	}
+	set taper(curve) {
+		this.reflect("taper", curve);
+	}
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		if (this.#isHeld()) {
+			this.heldWrite(next);
+			return;
+		}
+		this.#write(next);
+	}
+	get valueText() {
+		return this.#textFor(this.#value);
+	}
+	#buffered = [];
+	#claim = new ReadoutClaim(() => {
+		this.#renderHold();
+	});
+	#drag;
+	#entry;
+	#escapeWatch;
+	#formatSpokenValue;
+	#formatValue;
+	#instance = String(instanceCount += 1);
+	#isDirty = false;
+	#isModulated = false;
+	#keyScrub;
+	#land;
+	#limit;
+	#modulationValue;
+	#parseValue;
+	#positions;
+	#readout;
+	#scaleMarks;
+	#value = 0;
+	#watchers = /* @__PURE__ */ new Set();
+	attributeChangedCallback(name) {
+		this.#positions = parseNumberList(this.getAttribute("positions"));
+		if (name === "value") {
+			if (this.#isHeld()) {
+				this.heldWrite(this.numberAttribute("value", this.min));
+				return;
+			}
+			this.#isDirty = false;
+		}
+		if (name === "disabled" && this.isDisabled()) {
+			this.#entry?.close(false);
+			this.#endDrag();
+			this.#endKeyScrub();
+		}
+		this.#value = this.mapping().snap(this.#isDirty ? this.#value : this.numberAttribute("value", this.min));
+		if (proportionAttributes.has(name)) this.proportionsChanged();
+		this.render();
+	}
+	connectedCallback() {
+		this.upgradeProperties("buffered", "default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "positions", "detent", "formatValue", "formatSpokenValue", "keyStep", "parseValue", "value");
+		super.connectedCallback();
+	}
+	bindGestures(control, signal, grab) {
+		const entry = this.#bindEntry(control, signal);
+		control.addEventListener("pointerdown", (event) => {
+			if (!this.#canPress(event, entry)) return;
+			this.#endDrag();
+			this.toggleState("springing", false);
+			if (event.pointerType === "touch") event.preventDefault();
+			focusByPointer(control);
+			if (isResetPress(event)) {
+				this.#reset();
+				return;
+			}
+			const fromValue = this.#value;
+			const axis = grab(event);
+			if (!axis) return;
+			const drag = {
+				...axis,
+				fromValue,
+				isOutside: false,
+				isRevealed: false,
+				pointerId: event.pointerId,
+				revealTimer: void 0,
+				state: this.#startDrag(control, axis, event)
+			};
+			drag.revealTimer = setTimeout(() => {
+				this.#reveal(drag);
+			}, 250);
+			this.#drag = drag;
+			control.setPointerCapture(event.pointerId);
+			this.toggleState("dragging", true);
+		}, { signal });
+		control.addEventListener("pointermove", (event) => {
+			const drag = this.#drag;
+			if (event.pointerId === drag?.pointerId) this.#dragTo(drag, event);
+		}, { signal });
+		const endDrag = (event) => {
+			if (event.pointerId === this.#drag?.pointerId) this.#endDrag();
+		};
+		control.addEventListener("pointercancel", (event) => {
+			const drag = this.#drag;
+			if (event.pointerId === drag?.pointerId && drag.isKeptOnCancel !== true) this.input(drag.fromValue);
+			endDrag(event);
+			entry.forgetPress();
+		}, { signal });
+		control.addEventListener("lostpointercapture", endDrag, { signal });
+		control.addEventListener("pointerup", (event) => {
+			const drag = this.#drag;
+			if (event.pointerId !== drag?.pointerId) return;
+			this.#endDrag();
+			const tap = drag.state.isEngaged ? void 0 : this.tapTarget();
+			if (tap !== void 0) {
+				entry.forgetPress();
+				this.#commit(tap);
+				return;
+			}
+			if (!entry.press(event) || this.springTarget() !== void 0) return;
+			if (this.doublePress === "reset") this.#reset();
+			else entry.open();
+		}, { signal });
+		this.#bindKeys(control, entry, signal);
+		signal.addEventListener("abort", () => {
+			this.#endDrag();
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+		}, { once: true });
+	}
+	bindScale(control, marks, signal) {
+		this.#scaleMarks = marks;
+		this.mirrorChildren({
+			control,
+			copy: scaleMark,
+			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
+			place: (copies) => {
+				placeChildren(marks, copies);
+				this.#renderScale();
+			}
+		}, signal);
+	}
+	controlOrientation() {}
+	controlRole() {
+		return "slider";
+	}
+	heldFrom() {
+		return this.#drag?.fromValue ?? this.#keyScrub?.fromValue;
+	}
+	heldWrite(_next) {}
+	holdChanged() {}
+	hoverReadout(value) {
+		this.#claim.hover(value);
+		this.#renderReadout();
+		this.#watchEscape(value !== void 0);
+	}
+	input(next) {
+		const previous = this.#value;
+		this.#write(this.#limit ? clamp(next, ...this.#limit) : next);
+		if (this.#value === previous) return false;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		return true;
+	}
+	isRevealed() {
+		return this.#claim.isRevealed;
+	}
+	isWrapping() {
+		return false;
+	}
+	mapping() {
+		const { detent, midpoint } = this;
+		return valueMapping({
+			...detent === void 0 ? {} : { detent },
+			...this.#positions ? { positions: this.#positions } : {},
+			max: this.max,
+			...midpoint === void 0 ? {} : { midpoint },
+			isNotched: this.notched,
+			isWrapping: this.isWrapping(),
+			min: this.min,
+			step: this.step,
+			taper: this.taper
+		});
+	}
+	originValue() {
+		return this.origin ?? this.mapping().bounds[0];
+	}
+	proportionsChanged() {}
+	readModulationValue() {
+		return this.#modulationValue;
+	}
+	readoutValue() {
+		return this.#claim.shown(this.#value, this.readout).value ?? this.#value;
+	}
+	render() {
+		this.draw();
+		this.#renderScale();
+		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
+		this.#renderAria(this.focusTarget(), this.controlOrientation());
+		for (const listener of this.#watchers) listener();
+	}
+	restoreState(state) {
+		this.value = Number(state);
+	}
+	scrubsKeyRepeat() {
+		return false;
+	}
+	springTarget() {}
+	tapTarget() {}
+	travelPx(control, property) {
+		return Math.max(1, readPxProperty(getComputedStyle(control), property, fallbackTravelPx));
+	}
+	writeModulationValue(control, prefix, next) {
+		if (next !== void 0 && !Number.isFinite(next)) return;
+		this.#modulationValue = next;
+		this.#writeModulationProportion(control, prefix);
+	}
+	writeProportions(control, prefix, modulation) {
+		const { style } = control;
+		const mapping = this.mapping();
+		const value = mapping.proportionOf(this.#value);
+		const reach = mapping.proportionOf(this.#value + modulation);
+		const { positionCount } = mapping;
+		style.setProperty(`--_sonic-${prefix}-value`, String(value));
+		style.setProperty(`--_sonic-${prefix}-origin`, String(mapping.proportionOf(this.originValue())));
+		style.setProperty(`--_sonic-${prefix}-modulation-from`, String(Math.min(value, reach)));
+		style.setProperty(`--_sonic-${prefix}-modulation-to`, String(Math.max(value, reach)));
+		if (positionCount === void 0) style.removeProperty(`--_sonic-${prefix}-position-count`);
+		else style.setProperty(`--_sonic-${prefix}-position-count`, String(positionCount));
+		this.#writeModulationProportion(control, prefix);
+	}
+	#bindEntry(control, signal) {
+		const input = requireChild(control, "input", HTMLInputElement);
+		const bubble = control.querySelector("[popover]");
+		input.id = `sonic-entry-${this.#instance}`;
+		if (bubble) this.#readout = {
+			anchor: control,
+			bubble: new Readout(bubble)
+		};
+		const entry = new ValueEntry(input, {
+			commit: (text) => {
+				this.#commit((this.#parseValue ?? Number.parseFloat)(text));
+			},
+			text: () => this.#parseValue ? this.valueText : String(this.#value),
+			toggle: (isOpen) => {
+				this.#claim.edit(isOpen);
+				if (isOpen) this.forwardNaming(input, true);
+				this.toggleState("editing", isOpen);
+				this.render();
+			}
+		});
+		this.#entry = entry;
+		entry.bind(control, signal);
+		return entry;
+	}
+	#bindKeys(control, entry, signal) {
+		control.addEventListener("keydown", (event) => {
+			if (this.isDisabled() || event.defaultPrevented || event.target !== control) return;
+			this.toggleState("springing", false);
+			if (event.key === "Enter") {
+				if (this.springTarget() !== void 0) return;
+				event.preventDefault();
+				entry.open();
+				return;
+			}
+			const next = this.#keyTarget(event.key);
+			if (next === void 0) return;
+			event.preventDefault();
+			this.#keyTo(event, next);
+			this.#claim.reveal("keys");
+			this.#renderHold();
+		}, { signal });
+		control.addEventListener("keyup", (event) => {
+			const isMeta = event.key === "Meta";
+			if (isMeta || event.key === this.#keyScrub?.key) this.#endKeyScrub();
+			if (isMeta && this.#drag) return;
+			if (isMeta || this.mapping().keyTarget(event.key, this.#value) !== void 0) this.#springBack();
+		}, { signal });
+		control.addEventListener("blur", () => {
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+			this.#springBack();
+		}, { signal });
+	}
+	#canPress(event, entry) {
+		if (event.button !== 0 || isMenuPress(event) || this.isDisabled() || entry.isOpen) return false;
+		return !this.#drag || this.#drag.pointerId === event.pointerId;
+	}
+	#commit(next, direction = 0) {
+		const landed = Number.isFinite(next) ? this.#land?.(next, direction) ?? next : next;
+		if (this.input(landed)) this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#concealKeyReveal() {
+		if (this.#claim.conceal("keys")) this.#renderHold();
+	}
+	#dragTo(drag, event) {
+		const isOutside = drag.outside?.(event) === true;
+		const wasEngaged = drag.state.isEngaged;
+		const mapping = this.mapping();
+		const { state, value } = stepDrag(mapping, drag.state, {
+			isFine: event.shiftKey,
+			isOutside,
+			position: drag.position(event)
+		});
+		drag.state = this.#withinLimit(mapping, state);
+		if (value === void 0) return;
+		if (!wasEngaged) this.#reveal(drag);
+		this.input(isOutside ? drag.fromValue : value);
+		if (isOutside === drag.isOutside) return;
+		drag.isOutside = isOutside;
+		this.#renderDragReveal(drag);
+	}
+	#endDrag() {
+		const drag = this.#drag;
+		if (!drag) return;
+		clearTimeout(drag.revealTimer);
+		this.#drag = void 0;
+		this.toggleState("dragging", false);
+		this.#claim.conceal("drag");
+		this.#renderHold();
+		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
+		this.#springBack();
+	}
+	#endKeyScrub() {
+		const scrub = this.#keyScrub;
+		if (!scrub) return;
+		this.#keyScrub = void 0;
+		this.#renderHold();
+		if (this.#value !== scrub.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#isHeld() {
+		return this.#drag !== void 0 || this.#keyScrub !== void 0;
+	}
+	#keyTarget(key) {
+		if (resetKeys.has(key)) return this.default;
+		return this.mapping().keyTarget(key, this.#value, this.keyStep);
+	}
+	#keyTo(event, next) {
+		if (event.repeat && this.scrubsKeyRepeat()) {
+			this.#scrubKey(event.key, next);
+			return;
+		}
+		this.#endKeyScrub();
+		this.#commit(next, next > this.#value ? 1 : -1);
+	}
+	#renderAria(control, orientation) {
+		this.writeFormValue(String(this.#value), String(this.#value));
+		if (this.#entry?.isOpen) {
+			for (const name of roleAttributes) control.removeAttribute(name);
+			this.forwardNaming(control, false);
+			this.#renderReadout();
+			return;
+		}
+		const [low, high] = this.mapping().bounds;
+		control.setAttribute("role", this.controlRole());
+		control.setAttribute("aria-valuemin", String(low));
+		control.setAttribute("aria-valuemax", String(high));
+		control.setAttribute("aria-valuenow", String(this.#value));
+		if (orientation) control.setAttribute("aria-orientation", orientation);
+		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue)?.(this.#value));
+		this.forwardNaming(control, true);
+		this.#renderDisabled(control);
+		this.#renderReadout();
+	}
+	#renderDisabled(control) {
+		if (this.isDisabled()) {
+			control.setAttribute("aria-disabled", "true");
+			control.removeAttribute("tabindex");
+			return;
+		}
+		control.removeAttribute("aria-disabled");
+		control.setAttribute("tabindex", "0");
+	}
+	#renderDragReveal(drag) {
+		if (drag.isRevealed && !drag.isOutside) this.#claim.reveal("drag");
+		else this.#claim.conceal("drag");
+		this.#renderHold();
+	}
+	#renderHold() {
+		this.#renderReadout();
+		this.holdChanged();
+	}
+	#renderReadout() {
+		const readout = this.#readout;
+		if (!readout) return;
+		const { isOpen, value } = this.#claim.shown(this.#value, this.readout);
+		readout.bubble.show({
+			anchor: readout.anchor,
+			isOpen,
+			text: value === void 0 ? void 0 : this.#textFor(value)
+		});
+	}
+	#renderScale() {
+		const marks = this.#scaleMarks?.children ?? [];
+		const mapping = this.mapping();
+		for (const mark of marks) {
+			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
+			const at = String(mapping.proportionOf(scaleValue(mark)));
+			if (mark.style.getPropertyValue("--_sonic-scale-at") !== at) mark.style.setProperty("--_sonic-scale-at", at);
+		}
+	}
+	#reset() {
+		this.#commit(this.default ?? NaN);
+	}
+	#reveal(drag) {
+		if (drag.isRevealed || this.#drag !== drag) return;
+		drag.isRevealed = true;
+		this.#renderDragReveal(drag);
+	}
+	#scrubKey(key, next) {
+		if (this.#keyScrub?.key !== key) {
+			this.#endKeyScrub();
+			this.#keyScrub = {
+				fromValue: this.#value,
+				key
+			};
+		}
+		this.input(next);
+	}
+	#springBack() {
+		const target = this.springTarget();
+		if (target === void 0) return;
+		if (this.mapping().snap(target) !== this.#value) this.toggleState("springing", true);
+		this.#commit(target);
+	}
+	#startDrag(control, axis, event) {
+		const mapping = this.mapping();
+		const detent = this.detent;
+		const start = {
+			from: this.#value,
+			position: axis.position(event),
+			proportion: axis.fromProportion ?? mapping.proportionOf(this.#value),
+			thresholdPx: dragThresholdPx(event.pointerType),
+			travelPx: axis.travelPx
+		};
+		if (detent === void 0) return startDrag(mapping, start);
+		const zonePx = readPxProperty(getComputedStyle(control), "--_sonic-detent-zone", detentZonePx);
+		return startDrag(mapping, {
+			...start,
+			detent: {
+				value: detent,
+				zone: zonePx / axis.travelPx
+			}
+		});
+	}
+	#textFor(value) {
+		return this.#formatValue?.(value) ?? String(value);
+	}
+	#watchEscape(isHovered) {
+		if (!isHovered) {
+			this.#escapeWatch?.abort();
+			this.#escapeWatch = void 0;
+			return;
+		}
+		if (this.#escapeWatch) return;
+		const watch = new AbortController();
+		this.#escapeWatch = watch;
+		this.ownerDocument.addEventListener("keydown", (event) => {
+			if (event.key === "Escape" && this.#claim.dismiss()) this.#renderHold();
+		}, { signal: watch.signal });
+	}
+	#withinLimit(mapping, state) {
+		const limit = this.#limit;
+		if (!limit || mapping.isWrapping) return state;
+		const [low, high] = limit;
+		return {
+			...state,
+			rawProportion: clamp(state.rawProportion, mapping.proportionOf(low), mapping.proportionOf(high))
+		};
+	}
+	#write(next) {
+		if (!Number.isFinite(next)) return;
+		this.#isDirty = true;
+		const clamped = this.mapping().snap(next);
+		if (clamped === this.#value) return;
+		this.#value = clamped;
+		this.render();
+	}
+	#writeModulationProportion(control, prefix) {
+		const modulationValue = this.isWrapping() ? void 0 : this.#modulationValue;
+		const isModulated = modulationValue !== void 0;
+		if (isModulated !== this.#isModulated) {
+			this.#isModulated = isModulated;
+			this.toggleState("modulated", isModulated);
+		}
+		if (modulationValue === void 0) {
+			control.style.removeProperty(`--_sonic-${prefix}-modulation-value`);
+			return;
+		}
+		control.style.setProperty(`--_sonic-${prefix}-modulation-value`, String(this.mapping().proportionOf(modulationValue)));
+	}
+};
+
+//#endregion
+export { SonicValueElement, linkValue };

package/dist/default/elements/{range-entry.js → value-entry.js}

@@ -1,11 +1,11 @@
-//#region src/elements/range-entry.ts
+//#region src/elements/value-entry.ts
 const doublePressMs = 500;
 const doublePressPx = 4;
 function isDoublePress(previous, next) {
 	if (!previous) return false;
 	return next.time - previous.time < doublePressMs && Math.hypot(next.x - previous.x, next.y - previous.y) < doublePressPx;
 }
-var RangeEntry = class {
+var ValueEntry = class {
 	get isOpen() {
 		return this.#isOpen;
 	}
@@ -71,4 +71,4 @@ var RangeEntry = class {
 };
 
 //#endregion
-export { RangeEntry };
+export { ValueEntry };