@xsynaptic/sonic-ui 0.6.1 → 0.9.0

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

@@ -1,20 +1,15 @@
-import { clamp, toNumber } from "../lib/math.js";
+import { clamp, toNumber, trimFloat } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
-import { requireChild } from "../lib/render.js";
-import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
-import { ValueEntry } from "./value-entry.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 { bindDrag } from "../lib/pointer-drag.js";
 import { readPxProperty } from "../lib/read-px-property.js";
-import { resetKeys, valueMapping } from "../lib/value-mapping.js";
+import { parseNumberList } from "../lib/number-list.js";
+import { valueMapping } from "../lib/value-mapping.js";
+import { ValueGestures } from "./value-gestures.js";
+import { moveTo, resnap, setAsked } from "../lib/asked-value.js";
+import { bindHoverPreview } from "../lib/hover-preview.js";
 
 //#region src/elements/value-element.ts
-const detentZonePx = 8;
 const fallbackTravelPx = 160;
 let instanceCount = 0;
 const proportionAttributes = /* @__PURE__ */ new Set([
@@ -49,6 +44,7 @@ var SonicValueElement = class extends SonicFormElement {
 		"notched",
 		"origin",
 		"readout",
+		"spoken-step",
 		"step",
 		"tabindex",
 		"taper",
@@ -67,7 +63,7 @@ var SonicValueElement = class extends SonicFormElement {
 				element.#limit = bounds;
 			},
 			mapping: () => element.mapping(),
-			value: () => element.#value,
+			value: () => element.#cell.value,
 			watch: (listener) => {
 				element.#watchers.add(listener);
 				return () => {
@@ -95,7 +91,8 @@ var SonicValueElement = class extends SonicFormElement {
 		this.reflect("dimmed", isDimmed);
 	}
 	get doublePress() {
-		return this.getAttribute("double-press") === "reset" ? "reset" : "entry";
+		const gesture = this.getAttribute("double-press");
+		return gesture === "none" || gesture === "reset" ? gesture : "entry";
 	}
 	set doublePress(gesture) {
 		this.reflect("double-press", gesture);
@@ -156,6 +153,9 @@ var SonicValueElement = class extends SonicFormElement {
 	set parseValue(parse) {
 		this.#parseValue = parse;
 	}
+	get pointerType() {
+		return this.#gestures?.pointerType();
+	}
 	get positions() {
 		return parseNumberList(this.getAttribute("positions"));
 	}
@@ -168,6 +168,12 @@ var SonicValueElement = class extends SonicFormElement {
 	set readout(isShown) {
 		this.reflect("readout", isShown);
 	}
+	get spokenStep() {
+		return this.optionalNumberAttribute("spoken-step");
+	}
+	set spokenStep(value) {
+		this.reflect("spoken-step", value);
+	}
 	get step() {
 		return this.numberAttribute("step", 1);
 	}
@@ -181,7 +187,7 @@ var SonicValueElement = class extends SonicFormElement {
 		this.reflect("taper", curve);
 	}
 	get value() {
-		return this.#value;
+		return this.#cell.value;
 	}
 	set value(next) {
 		if (next === void 0 || next === null) {
@@ -193,31 +199,27 @@ var SonicValueElement = class extends SonicFormElement {
 			this.heldWrite(value);
 			return;
 		}
-		this.#write(value);
-		if (Number.isFinite(value)) this.#asked = value;
+		if (setAsked(this.#cell, this.mapping(), value)) this.render();
 	}
 	get valueText() {
-		return this.#textFor(this.#value);
+		return this.#textFor(this.#cell.value);
 	}
-	#asked;
-	#claim = new ReadoutClaim(() => {
-		this.#renderHold();
-	});
-	#entry;
+	#cell = {
+		asked: void 0,
+		value: 0
+	};
 	#formatSpokenValue;
 	#formatValue;
+	#gestures;
+	#heldAt;
+	#hover;
 	#instance = String(instanceCount += 1);
-	#isModulated = false;
-	#keyScrub;
 	#land;
 	#limit;
 	#mapping;
-	#modulationValue;
 	#parseValue;
-	#pointerDrag;
 	#positions;
 	#readout;
-	#value = 0;
 	#watchers = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
 		this.#mapping = void 0;
@@ -227,102 +229,96 @@ var SonicValueElement = class extends SonicFormElement {
 				this.heldWrite(this.numberAttribute("value", this.min));
 				return;
 			}
-			this.#asked = void 0;
+			this.#cell.asked = void 0;
 		}
-		if (name === "disabled" && this.isDisabled()) this.#endHolds();
-		this.#value = this.mapping().snap(this.#asked ?? this.numberAttribute("value", this.min));
+		if (name === "disabled" && this.isDisabled()) this.#gestures?.end();
+		resnap(this.#cell, this.mapping(), this.numberAttribute("value", this.min));
 		if (proportionAttributes.has(name) && this.isBound()) this.proportionsChanged();
 		this.render();
 	}
 	connectedCallback() {
-		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "positions", "detent", "formatValue", "formatSpokenValue", "keyStep", "parseValue", "value");
+		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "spokenStep", "step", "taper", "positions", "detent", "formatValue", "formatSpokenValue", "keyStep", "parseValue", "value");
 		super.connectedCallback();
 	}
 	bindGestures(control, signal, grab) {
-		const entry = this.#bindEntry(control, signal);
-		this.#pointerDrag = bindDrag(control, {
-			cancel: (drag) => {
-				if (drag.isKeptOnCancel !== true) this.input(drag.fromValue);
+		const bubble = control.querySelector("[popover]");
+		if (bubble) this.#readout = {
+			anchor: control,
+			bubble: new Readout(bubble)
+		};
+		this.#gestures = new ValueGestures({
+			default: () => this.default,
+			detent: () => this.detent,
+			dispatch: (type) => {
+				this.dispatchEvent(new Event(type, { bubbles: true }));
 			},
-			grab: (event) => {
-				if (isMenuPress(event) || this.isDisabled() || entry.isOpen) return;
-				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,
-					revealTimer: void 0,
-					state: this.#startDrag(control, axis, event)
-				};
-				drag.revealTimer = setTimeout(() => {
-					this.#reveal(drag);
-				}, 250);
-				return drag;
+			doublePress: () => this.doublePress,
+			entryId: `sonic-entry-${this.#instance}`,
+			entryText: () => this.#parseValue ? this.valueText : String(this.#cell.value),
+			forwardNaming: (target, isNamed) => {
+				this.forwardNaming(target, isNamed);
 			},
-			lift: (drag, event) => {
-				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();
+			holdChanged: () => {
+				this.#renderHold();
 			},
-			move: (drag, event) => {
-				this.#dragTo(drag, event);
+			input: (next) => this.input(next),
+			isDisabled: () => this.isDisabled(),
+			keyStep: () => this.keyStep,
+			land: (target, direction) => this.#land?.(target, direction) ?? target,
+			limit: () => this.#limit,
+			mapping: () => this.mapping(),
+			parse: (text) => (this.#parseValue ?? Number.parseFloat)(text),
+			render: () => {
+				this.render();
 			},
-			release: (drag) => {
-				this.#releaseDrag(drag);
+			scrubsKeyRepeat: () => this.scrubsKeyRepeat(),
+			springTarget: () => this.springTarget(),
+			tapTarget: () => this.tapTarget(),
+			toggleState: (state, isOn) => {
+				this.toggleState(state, isOn);
 			},
-			toggle: (isDragging) => {
-				this.toggleState("dragging", isDragging);
-			}
+			value: () => this.#cell.value
+		}, control);
+		this.#gestures.bind(signal, grab);
+	}
+	bindHover(control, signal, { canShow, place, valueAt }) {
+		this.#hover = bindHoverPreview(control, {
+			canShow,
+			dismiss: () => {
+				this.render();
+			},
+			isTaken: () => this.#isEditing() || this.isRevealed(),
+			show: () => {
+				this.renderReadout();
+				place();
+			},
+			valueAt
 		}, signal);
-		control.addEventListener("pointercancel", () => {
-			entry.forgetPress();
-		}, { signal });
-		this.#bindKeys(control, entry, signal);
-		signal.addEventListener("abort", () => {
-			this.#endKeyScrub();
-			this.#concealKeyReveal();
-		}, { once: true });
 	}
 	controlOrientation() {}
 	controlRole() {
 		return "slider";
 	}
 	heldFrom() {
-		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
+		return this.#gestures?.heldFrom();
+	}
+	heldWrite(next) {
+		this.#heldAt = next;
 	}
-	heldWrite(_next) {}
 	holdChanged() {}
 	input(next) {
-		const previous = this.#value;
-		this.#write(this.#limit ? clamp(next, ...this.#limit) : next);
-		if (this.#value === previous) return false;
+		const previous = this.#cell.value;
+		const target = this.#limit ? clamp(next, ...this.#limit) : next;
+		if (moveTo(this.#cell, this.mapping(), target)) this.render();
+		if (this.#cell.value === previous) return false;
 		this.dispatchEvent(new Event("input", {
 			bubbles: true,
 			composed: true
 		}));
 		return true;
 	}
-	isEditing() {
-		return this.#entry?.isOpen === true;
-	}
 	isRevealed() {
-		return this.#claim.isRevealed;
+		return this.#gestures?.isRevealed() === true;
 	}
 	isWrapping() {
 		return false;
@@ -346,13 +342,13 @@ var SonicValueElement = class extends SonicFormElement {
 	originValue() {
 		return this.origin ?? this.mapping().bounds[0];
 	}
-	previewValue() {}
-	proportionsChanged() {}
-	readModulationValue() {
-		return this.#modulationValue;
+	playback() {
+		const from = this.heldFrom();
+		return from === void 0 ? this.#cell.value : this.#heldAt ?? from;
 	}
+	proportionsChanged() {}
 	readoutValue() {
-		return this.#shown().value ?? this.#value;
+		return this.#shown().value ?? this.#cell.value;
 	}
 	render() {
 		if (this.isBound()) this.#renderControl();
@@ -362,10 +358,11 @@ var SonicValueElement = class extends SonicFormElement {
 		const readout = this.#readout;
 		if (!readout) return;
 		const { isOpen, value } = this.#shown();
+		const text = value === void 0 ? void 0 : this.#textFor(value);
 		readout.bubble.show({
 			anchor: readout.anchor,
-			isOpen,
-			text: value === void 0 ? void 0 : this.#textFor(value)
+			isOpen: isOpen && text !== "",
+			text
 		});
 	}
 	restoreState(state) {
@@ -379,142 +376,15 @@ var SonicValueElement = class extends SonicFormElement {
 	travelPx(control, property) {
 		return Math.max(1, readPxProperty(getComputedStyle(control), property, fallbackTravelPx));
 	}
-	writeModulationValue(control, prefix, next) {
-		const value = next === void 0 || next === null ? void 0 : toNumber(next);
-		if (value !== void 0 && !Number.isFinite(value)) return;
-		this.#modulationValue = value;
-		if (this.isBound()) 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) => {
-				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.#dragging()) 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 });
-	}
-	#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();
-	}
-	#dragging() {
-		return this.#pointerDrag?.current();
-	}
-	#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);
-	}
-	#endHolds() {
-		this.#entry?.close(false);
-		this.#pointerDrag?.end();
-		this.#endKeyScrub();
-	}
-	#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 }));
+	#isEditing() {
+		return this.#gestures?.isEditing() === true;
 	}
 	#isHeld() {
-		return this.#dragging() !== 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);
-	}
-	#releaseDrag(drag) {
-		clearTimeout(drag.revealTimer);
-		this.#claim.conceal("drag");
-		this.#renderHold();
-		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
-		this.#springBack();
+		return this.#gestures?.isHeld() === true;
 	}
 	#renderAria(control, orientation) {
-		this.writeFormValue(String(this.#value), String(this.#value));
-		if (this.#entry?.isOpen) {
+		this.writeFormValue(String(this.#cell.value), String(this.#cell.value));
+		if (this.#isEditing()) {
 			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
 			this.renderReadout();
@@ -524,16 +394,17 @@ var SonicValueElement = class extends SonicFormElement {
 		writeAttribute(control, "role", this.controlRole());
 		writeAttribute(control, "aria-valuemin", String(low));
 		writeAttribute(control, "aria-valuemax", String(high));
-		writeAttribute(control, "aria-valuenow", String(this.#value));
+		writeAttribute(control, "aria-valuenow", String(this.#spokenNow()));
 		if (orientation) writeAttribute(control, "aria-orientation", orientation);
-		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue)?.(this.#value));
+		writeAttribute(control, "aria-valuetext", (this.#formatSpokenValue ?? this.#formatValue)?.(this.#cell.value));
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
 		this.renderReadout();
 	}
 	#renderControl() {
+		if (this.#isEditing() || this.isRevealed()) this.#hover?.clear();
 		this.draw();
-		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
+		this.toggleState("at-origin", !this.isWrapping() && this.#cell.value === this.mapping().snap(this.originValue()));
 		this.#renderAria(this.focusTarget(), this.controlOrientation());
 	}
 	#renderDisabled(control) {
@@ -542,104 +413,30 @@ var SonicValueElement = class extends SonicFormElement {
 		const stop = this.getAttribute("tabindex") === "-1" ? "-1" : "0";
 		writeAttribute(control, "tabindex", isDisabled ? void 0 : stop);
 	}
-	#renderDragReveal(drag) {
-		if (drag.isRevealed && !drag.isOutside) this.#claim.reveal("drag");
-		else this.#claim.conceal("drag");
-		this.#renderHold();
-	}
 	#renderHold() {
+		if (this.heldFrom() === void 0) this.#heldAt = void 0;
 		this.renderReadout();
 		this.holdChanged();
 	}
-	#reset() {
-		this.#commit(this.default ?? NaN);
-	}
-	#reveal(drag) {
-		if (drag.isRevealed || this.#dragging() !== 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);
-	}
 	#shown() {
-		if (this.isEditing()) return {
+		if (this.#isEditing()) return {
 			isOpen: true,
 			value: void 0
 		};
-		const isRevealed = this.#claim.isRevealed;
-		const preview = isRevealed ? void 0 : this.previewValue();
+		const isRevealed = this.isRevealed();
+		const preview = isRevealed ? void 0 : this.#hover?.value();
 		return {
 			isOpen: (isRevealed || preview !== void 0) && this.readout,
-			value: preview ?? this.#value
+			value: preview ?? this.#cell.value
 		};
 	}
-	#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
-			}
-		});
+	#spokenNow() {
+		const step = this.spokenStep;
+		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#cell.value / step) * step) : this.#cell.value;
 	}
 	#textFor(value) {
 		return this.#formatValue?.(value) ?? String(value);
 	}
-	#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;
-		const clamped = this.mapping().snap(next);
-		this.#asked = clamped;
-		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