@xsynaptic/sonic-ui 0.6.1 → 0.9.0

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

@@ -0,0 +1,301 @@
+import { clamp } from "../lib/math.js";
+import { requireChild } from "../lib/render.js";
+import { bindDrag } from "../lib/pointer-drag.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.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 { readPxProperty } from "../lib/read-px-property.js";
+import { resetKeys } from "../lib/value-mapping.js";
+
+//#region src/elements/value-gestures.ts
+const detentZonePx = 8;
+var ValueGestures = class {
+	#claim = new ReadoutClaim(() => {
+		this.#host.holdChanged();
+	});
+	#control;
+	#entry;
+	#host;
+	#isRevealed = false;
+	#keyScrub;
+	#pointerDrag;
+	constructor(host, control) {
+		this.#host = host;
+		this.#control = control;
+	}
+	bind(signal, grab) {
+		const control = this.#control;
+		const host = this.#host;
+		const entry = this.#bindEntry(signal);
+		this.#pointerDrag = bindDrag(control, {
+			cancel: (drag) => {
+				if (drag.isKeptOnCancel !== true) host.input(drag.fromValue);
+			},
+			grab: (event) => {
+				if (isMenuPress(event) || host.isDisabled() || entry.isOpen) return;
+				host.toggleState("springing", false);
+				if (event.pointerType === "touch") event.preventDefault();
+				focusByPointer(control);
+				if (isResetPress(event)) {
+					this.#reset();
+					return;
+				}
+				const fromValue = host.value();
+				const axis = grab(event);
+				if (!axis) return;
+				const drag = {
+					...axis,
+					fromValue,
+					isOutside: false,
+					isRevealed: false,
+					pointerType: event.pointerType,
+					revealTimer: void 0,
+					state: this.#startDrag(axis, event)
+				};
+				drag.revealTimer = setTimeout(() => {
+					this.#reveal(drag);
+				}, revealDelay(control));
+				return drag;
+			},
+			lift: (drag, event) => {
+				const tap = drag.state.isEngaged ? void 0 : host.tapTarget();
+				if (tap !== void 0) {
+					entry.forgetPress();
+					this.#commit(tap);
+					return;
+				}
+				if (!entry.press(event) || host.springTarget() !== void 0) return;
+				const gesture = host.doublePress();
+				if (gesture === "reset") this.#reset();
+				else if (gesture === "entry") entry.open();
+			},
+			move: (drag, event) => {
+				this.#dragTo(drag, event);
+			},
+			release: (drag) => {
+				this.#releaseDrag(drag);
+			},
+			toggle: (isDragging) => {
+				host.toggleState("dragging", isDragging);
+			}
+		}, signal);
+		control.addEventListener("pointercancel", () => {
+			entry.forgetPress();
+		}, { signal });
+		this.#bindKeys(entry, signal);
+		signal.addEventListener("abort", () => {
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+		}, { once: true });
+	}
+	end() {
+		this.#entry?.close(false);
+		this.#pointerDrag?.end();
+		this.#endKeyScrub();
+	}
+	heldFrom() {
+		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
+	}
+	isEditing() {
+		return this.#entry?.isOpen === true;
+	}
+	isHeld() {
+		return this.#dragging() !== void 0 || this.#keyScrub !== void 0;
+	}
+	isRevealed() {
+		return this.#claim.isRevealed;
+	}
+	pointerType() {
+		return this.#dragging()?.pointerType;
+	}
+	#bindEntry(signal) {
+		const control = this.#control;
+		const host = this.#host;
+		const input = requireChild(control, "input", HTMLInputElement);
+		input.id = host.entryId;
+		const entry = new ValueEntry(input, {
+			commit: (text) => {
+				this.#commit(host.parse(text));
+			},
+			text: host.entryText,
+			toggle: (isOpen) => {
+				if (isOpen) host.forwardNaming(input, true);
+				host.toggleState("editing", isOpen);
+				host.render();
+			}
+		});
+		this.#entry = entry;
+		entry.bind(control, signal);
+		return entry;
+	}
+	#bindKeys(entry, signal) {
+		const control = this.#control;
+		const host = this.#host;
+		control.addEventListener("keydown", (event) => {
+			if (host.isDisabled() || event.defaultPrevented || event.target !== control) return;
+			host.toggleState("springing", false);
+			if (event.key === "Enter") {
+				if (host.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");
+			host.holdChanged();
+		}, { 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 || host.mapping().keyTarget(event.key, host.value()) !== void 0) this.#springBack();
+		}, { signal });
+		control.addEventListener("blur", () => {
+			this.#endKeyScrub();
+			this.#concealKeyReveal();
+			this.#springBack();
+		}, { signal });
+	}
+	#commit(next, direction = 0) {
+		const host = this.#host;
+		const landed = Number.isFinite(next) ? host.land(next, direction) : next;
+		if (host.input(landed)) host.dispatch("change");
+	}
+	#concealKeyReveal() {
+		if (this.#claim.conceal("keys")) this.#host.holdChanged();
+	}
+	#dragging() {
+		return this.#pointerDrag?.current();
+	}
+	#dragTo(drag, event) {
+		const host = this.#host;
+		const isOutside = drag.outside?.(event) === true;
+		const wasEngaged = drag.state.isEngaged;
+		const mapping = host.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);
+		const isCrossing = isOutside !== drag.isOutside;
+		if (isCrossing) {
+			drag.isOutside = isOutside;
+			host.toggleState("cancelling", isOutside);
+		}
+		host.input(isOutside ? drag.fromValue : value);
+		if (isCrossing) this.#renderDragReveal(drag);
+	}
+	#endKeyScrub() {
+		const host = this.#host;
+		const scrub = this.#keyScrub;
+		if (!scrub) return;
+		this.#keyScrub = void 0;
+		host.holdChanged();
+		if (host.value() !== scrub.fromValue) host.dispatch("change");
+	}
+	#keyTarget(key) {
+		const host = this.#host;
+		if (resetKeys.has(key)) return host.default();
+		return host.mapping().keyTarget(key, host.value(), host.keyStep());
+	}
+	#keyTo(event, next) {
+		const host = this.#host;
+		if (event.repeat && host.scrubsKeyRepeat()) {
+			this.#scrubKey(event.key, next);
+			return;
+		}
+		this.#endKeyScrub();
+		this.#commit(next, next > host.value() ? 1 : -1);
+	}
+	#releaseDrag(drag) {
+		const host = this.#host;
+		clearTimeout(drag.revealTimer);
+		this.#claim.conceal("drag");
+		host.toggleState("cancelling", false);
+		host.holdChanged();
+		this.#showRevealed(false);
+		if (host.value() !== drag.fromValue) host.dispatch("change");
+		this.#springBack();
+	}
+	#renderDragReveal(drag) {
+		const isRevealed = drag.isRevealed && !drag.isOutside;
+		if (isRevealed) this.#claim.reveal("drag");
+		else this.#claim.conceal("drag");
+		this.#host.holdChanged();
+		this.#showRevealed(isRevealed);
+	}
+	#reset() {
+		this.#commit(this.#host.default() ?? NaN);
+	}
+	#reveal(drag) {
+		if (drag.isRevealed || this.#dragging() !== drag) return;
+		drag.isRevealed = true;
+		this.#renderDragReveal(drag);
+	}
+	#scrubKey(key, next) {
+		const host = this.#host;
+		if (this.#keyScrub?.key !== key) {
+			this.#endKeyScrub();
+			this.#keyScrub = {
+				fromValue: host.value(),
+				key
+			};
+		}
+		host.input(next);
+	}
+	#showRevealed(isRevealed) {
+		if (isRevealed === this.#isRevealed) return;
+		this.#isRevealed = isRevealed;
+		this.#host.toggleState("revealed", isRevealed);
+		this.#host.dispatch("sonic-reveal");
+	}
+	#springBack() {
+		const host = this.#host;
+		const target = host.springTarget();
+		if (target === void 0) return;
+		if (host.mapping().snap(target) !== host.value()) host.toggleState("springing", true);
+		this.#commit(target);
+	}
+	#startDrag(axis, event) {
+		const host = this.#host;
+		const mapping = host.mapping();
+		const detent = host.detent();
+		const value = host.value();
+		const start = {
+			from: value,
+			position: axis.position(event),
+			proportion: axis.fromProportion ?? mapping.proportionOf(value),
+			thresholdPx: dragThresholdPx(event.pointerType),
+			travelPx: axis.travelPx
+		};
+		if (detent === void 0) return startDrag(mapping, start);
+		const zonePx = readPxProperty(getComputedStyle(this.#control), "--_sonic-detent-zone", detentZonePx);
+		return startDrag(mapping, {
+			...start,
+			detent: {
+				value: detent,
+				zone: zonePx / axis.travelPx
+			}
+		});
+	}
+	#withinLimit(mapping, state) {
+		const limit = this.#host.limit();
+		if (!limit || mapping.isWrapping) return state;
+		const [low, high] = limit;
+		return {
+			...state,
+			rawProportion: clamp(state.rawProportion, mapping.proportionOf(low), mapping.proportionOf(high))
+		};
+	}
+};
+
+//#endregion
+export { ValueGestures };

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

@@ -2,19 +2,44 @@ import { SonicValueElement } from "./value-element.js";
 import { bindSurface } from "../lib/canvas-surface.js";
 
 //#region src/elements/wave-element.ts
+function markerKey(marker) {
+	return marker ? [
+		marker.start,
+		marker.end,
+		marker.kind,
+		marker.label
+	].join("|") : "";
+}
 var SonicWaveElement = class extends SonicValueElement {
+	static observedAttributes = [...SonicValueElement.observedAttributes, "fill"];
+	get currentMarker() {
+		return this.#current ? { ...this.#current } : void 0;
+	}
+	get fill() {
+		return this.hasAttribute("fill");
+	}
+	set fill(isFilling) {
+		this.reflect("fill", isFilling);
+	}
 	get markers() {
 		return this.#markers.map((marker) => ({ ...marker }));
 	}
 	set markers(list) {
 		this.#markers = [...list ?? []].filter((marker) => Number.isFinite(marker.start)).map((marker) => ({ ...marker })).toSorted((first, second) => first.start - second.start);
-		if (this.isBound()) this.renderMarkers();
+		if (!this.isBound()) return;
+		this.renderMarkers();
+		this.render();
 	}
-	#heldAt;
+	#current;
+	#fillWatch;
 	#markers = [];
 	#surface;
+	attributeChangedCallback(name) {
+		super.attributeChangedCallback(name);
+		if (name === "fill") this.#watchFill();
+	}
 	connectedCallback() {
-		this.upgradeProperties("markers");
+		this.upgradeProperties("fill", "markers");
 		super.connectedCallback();
 	}
 	repaint() {
@@ -38,16 +63,20 @@ var SonicWaveElement = class extends SonicValueElement {
 		});
 		this.render();
 		this.checkStyles(control, this.sheet);
+		this.#watchFill();
+		signal.addEventListener("abort", () => {
+			this.#fillWatch?.disconnect();
+			this.#fillWatch = void 0;
+		}, { once: true });
 	}
 	focusTarget() {
 		return this.control;
 	}
 	heldWrite(next) {
-		this.#heldAt = next;
+		super.heldWrite(next);
 		this.render();
 	}
 	holdChanged() {
-		if (this.heldFrom() === void 0) this.#heldAt = void 0;
 		this.render();
 	}
 	markerList() {
@@ -61,19 +90,40 @@ var SonicWaveElement = class extends SonicValueElement {
 			return [Math.min(at, to), Math.max(at, to)];
 		});
 	}
-	playback() {
-		const from = this.heldFrom();
-		return from === void 0 ? this.value : this.#heldAt ?? from;
-	}
 	proportionsChanged() {
 		this.renderMarkers();
 	}
 	renderEmpty() {
 		this.toggleState("empty", this.isEmpty());
 	}
+	showCurrentMarker(seconds) {
+		const current = this.#markers.findLast((marker) => marker.start <= seconds);
+		if (markerKey(current) === markerKey(this.#current)) return;
+		this.#current = current;
+		this.dispatchEvent(new Event("sonic-marker", { bubbles: true }));
+	}
 	surface() {
 		return this.#surface;
 	}
+	#watchFill() {
+		const control = this.control;
+		const isFilling = this.fill && this.isBound();
+		if (isFilling === (this.#fillWatch !== void 0)) return;
+		this.#fillWatch?.disconnect();
+		this.#fillWatch = void 0;
+		if (!isFilling) {
+			control.style.removeProperty(this.sizeProperty);
+			return;
+		}
+		this.#fillWatch = new ResizeObserver((entries) => {
+			const box = entries.at(-1)?.borderBoxSize[0];
+			if (!box) return;
+			requestAnimationFrame(() => {
+				if (this.#fillWatch) control.style.setProperty(this.sizeProperty, `${String(box.blockSize)}px`);
+			});
+		});
+		this.#fillWatch.observe(control);
+	}
 };
 
 //#endregion

package/dist/default/elements/waveform.js

@@ -1,6 +1,6 @@
 import { clamp } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
-import { readRegions } from "../lib/time-regions.js";
+import { dueRegions, readRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { frameTimeline } from "../lib/frame-timeline.js";
 import { isKind, writeKind } from "../lib/marker-band.js";
@@ -10,9 +10,10 @@ import { waveformBuckets } from "../lib/waveform-buckets.js";
 
 //#region src/elements/waveform.ts
 const colours = {
+	ends: "--_sonic-waveform-ends",
 	grid: "--_sonic-waveform-grid",
-	hatch: "--_sonic-waveform-hatch",
 	marker: "--_sonic-waveform-marker",
+	placeholder: "--_sonic-waveform-placeholder",
 	wave: "--_sonic-waveform-wave",
 	waveEdge: "--_sonic-waveform-wave-edge"
 };
@@ -63,7 +64,7 @@ function paintHatch(context, scene, [from, to]) {
 		context.lineTo(x + height, 0);
 	}
 	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.hatch;
+	context.strokeStyle = scene.colours.ends;
 	context.stroke();
 	context.restore();
 }
@@ -83,7 +84,7 @@ function paintPlaceholders(context, scene) {
 		context.lineTo(closing, waveY(closing));
 	}
 	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.hatch;
+	context.strokeStyle = scene.colours.placeholder;
 	context.stroke();
 }
 function waveFill(context, scene) {
@@ -111,8 +112,10 @@ function paintWave(context, scene, peaks) {
 var SonicWaveform = class extends SonicWaveElement {
 	static observedAttributes = [
 		...SonicWaveElement.observedAttributes,
+		"pending-delay",
 		"playing",
 		"playback-rate",
+		"reduced-motion",
 		"zoom"
 	];
 	get peaks() {
@@ -127,9 +130,21 @@ var SonicWaveform = class extends SonicWaveElement {
 		return this.#pending.map(([start, end]) => [start, end]);
 	}
 	set pending(regions) {
+		const listedMs = this.#pendingListedMs;
+		const nowMs = performance.now();
 		this.#pending = regions ? readRegions(regions) : [];
+		this.#pendingListedMs = new Map(this.#pending.map((region) => {
+			const key = region.join(":");
+			return [key, listedMs.get(key) ?? nowMs];
+		}));
 		this.surface()?.invalidate();
 	}
+	get pendingDelay() {
+		return Math.max(0, this.numberAttribute("pending-delay", 0));
+	}
+	set pendingDelay(value) {
+		this.reflect("pending-delay", value);
+	}
 	get playbackRate() {
 		const playbackRate = this.numberAttribute("playback-rate", 1);
 		return playbackRate > 0 ? playbackRate : 1;
@@ -150,11 +165,18 @@ var SonicWaveform = class extends SonicWaveElement {
 		this.#readTime = read;
 		this.render();
 	}
+	get reducedMotion() {
+		return this.getAttribute("reduced-motion") === "scroll" ? "scroll" : "page";
+	}
+	set reducedMotion(motion) {
+		this.reflect("reduced-motion", motion);
+	}
 	get requestPeaks() {
 		return this.#requestPeaks;
 	}
 	set requestPeaks(request) {
 		this.#requestPeaks = request;
+		this.#asked = void 0;
 		this.surface()?.invalidate();
 	}
 	get zoom() {
@@ -169,6 +191,8 @@ var SonicWaveform = class extends SonicWaveElement {
 	colours = colours;
 	lengths = {};
 	sheet = "waveform.css";
+	sizeProperty = "--_sonic-waveform-size";
+	#asked;
 	#clock = createTrackingClock();
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
@@ -177,16 +201,19 @@ var SonicWaveform = class extends SonicWaveElement {
 	#paintedKey = "";
 	#peaks;
 	#pending = [];
+	#pendingListedMs = /* @__PURE__ */ new Map();
 	#playhead = requireChild(this.control, ".sonic-waveform-playhead", HTMLDivElement);
 	#readTime;
 	#requestPeaks;
 	#rider = createLabelRider(this.control, {
 		className: "sonic-waveform-label",
 		colourProperty: "--_sonic-waveform-marker",
-		insetProperty: "--_sonic-waveform-label-inset"
+		fadeProperty: "--_sonic-waveform-label-fade",
+		insetProperty: "--_sonic-waveform-label-inset",
+		parkProperty: "--_sonic-waveform-label-park"
 	});
 	connectedCallback() {
-		this.upgradeProperties("peaks", "pending", "playing", "playbackRate", "readTime", "requestPeaks", "zoom");
+		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "requestPeaks", "zoom");
 		super.connectedCallback();
 	}
 	connect(signal) {
@@ -197,13 +224,16 @@ var SonicWaveform = class extends SonicWaveElement {
 		}, { signal });
 	}
 	draw() {
-		this.surface()?.requestFrame();
+		const surface = this.surface();
+		surface?.requestFrame();
+		if (surface?.isVisible === false || !this.#drawn) this.showCurrentMarker(this.#sourceSeconds());
 	}
 	isEmpty() {
 		return !this.#peaks || this.#peaks.samples.length === 0;
 	}
 	paint(context, { frameMs, isDirty, isRebuilt, look, size }) {
 		const held = this.#held();
+		const pending = this.#duePending();
 		const timeline = frameTimeline({
 			clockSeconds: this.#clock.read(frameMs, {
 				isPlaying: this.playing,
@@ -212,9 +242,10 @@ var SonicWaveform = class extends SonicWaveElement {
 			}),
 			frameMs,
 			...held ? { held } : {},
-			isPaged: look.isReducedMotion,
+			isPaged: look.isReducedMotion && this.reducedMotion === "page",
 			isPlaying: this.playing,
-			pending: this.#pending,
+			isStill: look.isReducedMotion,
+			pending,
 			range: [this.min, Math.max(this.min, this.max)],
 			size,
 			zoom: this.zoom
@@ -226,6 +257,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		};
 		placeLine(this.#playhead, timeline.playheadAt);
 		placeLine(this.#ghost, timeline.ghostAt);
+		this.showCurrentMarker(seconds);
 		this.toggleState("pending", view.pending.length > 0);
 		this.#rider.place({
 			playheadSeconds: seconds,
@@ -239,7 +271,7 @@ var SonicWaveform = class extends SonicWaveElement {
 				...view,
 				colours: look.colours
 			}, isRebuilt);
-			if (timeline.wanted) this.#requestPeaks?.(...timeline.wanted);
+			if (timeline.wanted) this.#ask(timeline.wanted);
 		}
 		if (timeline.isMoving) this.surface()?.requestFrame();
 	}
@@ -253,6 +285,17 @@ var SonicWaveform = class extends SonicWaveElement {
 		}]));
 		this.surface()?.rebuild();
 	}
+	#ask(wanted) {
+		const asked = this.#requestPeaks?.(...wanted);
+		if (!(asked instanceof Promise)) return;
+		this.#asked = asked;
+		this.#repaintAfter(asked);
+	}
+	#duePending() {
+		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
+		if (due.length < this.#pending.length) this.surface()?.requestFrame();
+		return due;
+	}
 	#grab() {
 		const drawn = this.#drawn ?? {
 			seconds: this.value,
@@ -291,7 +334,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	#paintScene(context, scene, isRebuilt) {
 		const { dpr, height, pixelsPerSecond, startSeconds, width } = scene;
 		const x = (seconds) => (seconds - startSeconds) * pixelsPerSecond;
-		const { grid } = scene.colours;
+		const { ends, grid } = scene.colours;
 		const line = Math.max(1, Math.round(dpr));
 		const [opening, closing] = [x(this.min), x(Math.max(this.min, this.max))];
 		const [from, to] = [clamp(opening, 0, width), clamp(closing, 0, width)];
@@ -302,7 +345,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		if (to > from) context.fillRect(from, Math.round((height - line) / 2), to - from, line);
 		paintPlaceholders(context, scene);
 		if (this.#peaks) paintWave(context, scene, this.#peaks);
-		context.fillStyle = grid;
+		context.fillStyle = ends;
 		for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
 		this.#paintMarkers(context, scene, isRebuilt);
 	}
@@ -319,6 +362,12 @@ var SonicWaveform = class extends SonicWaveElement {
 		for (const probe of probes) probe.remove();
 		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
 	}
+	async #repaintAfter(asked) {
+		await Promise.allSettled([asked]);
+		if (this.#asked !== asked) return;
+		this.#asked = void 0;
+		this.surface()?.invalidate();
+	}
 	#sourceSeconds() {
 		return this.#readTime?.() ?? this.playback();
 	}