@xsynaptic/sonic-ui 0.16.0 → 0.18.0

package/dist/default/elements/waveform.js

@@ -1,36 +1,19 @@
 import { clamp, roundTo } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
-import { capturePointer } from "../lib/pointer-drag.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";
 import { createLabelRider } from "../lib/marker-rider.js";
+import { createPeaksRequest } from "../lib/peaks-request.js";
 import { createTrackingClock } from "../lib/tracking-clock.js";
-import { waveformBuckets } from "../lib/waveform-buckets.js";
-import { pinchFactor, wheelFactor, zoomKeyFactor } from "../lib/zoom-gesture.js";
+import { paintWaveform, waveformColours } from "../lib/waveform-scene.js";
+import { bindZoom, bindZoomKeys } from "../lib/zoom-gesture.js";
 
 //#region src/elements/waveform.ts
-const colours = {
-	ends: "--_sonic-waveform-ends",
-	grid: "--_sonic-waveform-grid",
-	marker: "--_sonic-waveform-marker",
-	placeholder: "--_sonic-waveform-placeholder",
-	wave: "--_sonic-waveform-wave",
-	waveEdge: "--_sonic-waveform-wave-edge"
-};
 const defaultZoom = 70;
 const defaultZoomMin = 20;
 const defaultZoomMax = 280;
-const zoomKeys = /* @__PURE__ */ new Map([
-	["+", 1],
-	["-", -1],
-	["=", 1]
-]);
-const amplitudeMargin = .94;
-const hatchPitchPx = 8;
-const placeholderWavelengthPx = 48;
-const placeholderAmplitude = .2;
 const renderWaveform = template(`
 		<div class="sonic-waveform" role="slider" tabindex="0">
 			<canvas class="sonic-waveform-canvas" aria-hidden="true"></canvas>
@@ -59,66 +42,6 @@ function placeLine(line, at) {
 	const translate = `${String(at * 100)}cqi`;
 	if (line.style.getPropertyValue("translate") !== translate) line.style.setProperty("translate", translate);
 }
-function paintHatch(context, scene, [from, to]) {
-	if (to <= from) return;
-	const { dpr, height } = scene;
-	const pitch = Math.max(2, Math.round(hatchPitchPx * dpr));
-	const offset = scene.startSeconds * scene.pixelsPerSecond;
-	context.save();
-	context.beginPath();
-	context.rect(from, 0, to - from, height);
-	context.clip();
-	context.beginPath();
-	for (let x = Math.floor((from - height + offset) / pitch) * pitch - offset; x < to; x += pitch) {
-		context.moveTo(x, height);
-		context.lineTo(x + height, 0);
-	}
-	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.ends;
-	context.stroke();
-	context.restore();
-}
-function paintPlaceholders(context, scene) {
-	if (scene.pending.length === 0) return;
-	const { dpr, height, pixelsPerSecond, startSeconds } = scene;
-	const wavelength = placeholderWavelengthPx * dpr;
-	const center = height / 2;
-	const origin = startSeconds * pixelsPerSecond;
-	const waveY = (x) => center - Math.sin(((x + origin) / wavelength + scene.phase) * 2 * Math.PI) * center * placeholderAmplitude;
-	context.beginPath();
-	for (const [from, to] of scene.pending) {
-		const opening = (from - startSeconds) * pixelsPerSecond;
-		const closing = (to - startSeconds) * pixelsPerSecond;
-		context.moveTo(opening, waveY(opening));
-		for (let x = opening + dpr; x < closing; x += dpr) context.lineTo(x, waveY(x));
-		context.lineTo(closing, waveY(closing));
-	}
-	context.lineWidth = Math.max(1, Math.round(dpr));
-	context.strokeStyle = scene.colours.placeholder;
-	context.stroke();
-}
-function waveFill(context, scene) {
-	const { wave, waveEdge } = scene.colours;
-	const gradient = context.createLinearGradient(0, 0, 0, scene.height);
-	gradient.addColorStop(0, waveEdge);
-	gradient.addColorStop(.5, wave);
-	gradient.addColorStop(1, waveEdge);
-	return gradient;
-}
-function paintWave(context, scene, peaks) {
-	const buckets = waveformBuckets(peaks, scene);
-	const [first] = buckets;
-	if (!first) return;
-	const center = scene.height / 2;
-	const amplitudePx = center * amplitudeMargin;
-	context.fillStyle = waveFill(context, scene);
-	context.beginPath();
-	context.moveTo(first.x, center);
-	for (const bucket of buckets) context.lineTo(bucket.x, center - bucket.high * amplitudePx);
-	for (const bucket of buckets.toReversed()) context.lineTo(bucket.x, center - bucket.low * amplitudePx);
-	context.closePath();
-	context.fill();
-}
 var SonicWaveform = class extends SonicWaveElement {
 	static observedAttributes = [
 		...SonicWaveElement.observedAttributes,
@@ -137,8 +60,9 @@ var SonicWaveform = class extends SonicWaveElement {
 	set peaks(peaks) {
 		this.#peaks = peaks;
 		this.renderEmpty();
-		this.#repaint();
+		this.#peaksRequest.changed();
 	}
+	/** Spans being fetched; drawn as placeholders until cleared */
 	get pending() {
 		return this.#pending.map(([start, end]) => [start, end]);
 	}
@@ -152,8 +76,9 @@ var SonicWaveform = class extends SonicWaveElement {
 			const key = region.join(":");
 			return [key, listedMs.get(key) ?? nowMs];
 		}));
-		this.#repaint();
+		this.#peaksRequest.changed();
 	}
+	/** How long a span stays listed in `pending` before its placeholder draws */
 	get pendingDelay() {
 		return Math.max(0, this.numberAttribute("pending-delay", 0));
 	}
@@ -173,6 +98,7 @@ var SonicWaveform = class extends SonicWaveElement {
 	set playing(isPlaying) {
 		this.reflect("playing", isPlaying);
 	}
+	/** Read every frame for the playback time, so the waveform scrolls smoother than writes to `value` arrive */
 	get readTime() {
 		return this.#readTime;
 	}
@@ -186,13 +112,19 @@ var SonicWaveform = class extends SonicWaveElement {
 	set reducedMotion(motion) {
 		this.reflect("reduced-motion", motion);
 	}
+	get renderLabel() {
+		return this.#renderLabel;
+	}
+	set renderLabel(render) {
+		this.#renderLabel = render;
+		if (this.isBound()) this.renderMarkers();
+	}
 	get requestPeaks() {
 		return this.#requestPeaks;
 	}
 	set requestPeaks(request) {
 		this.#requestPeaks = request;
-		this.#askedKey = void 0;
-		this.surface()?.invalidate();
+		this.#peaksRequest.reset();
 	}
 	get zoom() {
 		const zoom = this.numberAttribute("zoom", defaultZoom);
@@ -223,56 +155,58 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	control = renderWaveform();
 	canvas = requireChild(this.control, ".sonic-waveform-canvas", HTMLCanvasElement);
-	colours = colours;
+	colours = waveformColours;
 	lengths = {};
 	sheet = "waveform.css";
 	sizeProperty = "--_sonic-waveform-size";
-	#asked = /* @__PURE__ */ new WeakSet();
-	#askedKey;
 	#clock = createTrackingClock();
-	#connection;
 	#drawn;
 	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
 	#grabbed;
-	#isAsking = false;
-	#isPinchSpent = false;
 	#kindColours = /* @__PURE__ */ new Map();
 	#paintedKey = "";
 	#peaks;
+	#peaksRequest = createPeaksRequest(() => {
+		this.surface()?.invalidate();
+	});
 	#pending = [];
 	#pendingListedMs = /* @__PURE__ */ new Map();
-	#pinch;
 	#playhead = requireChild(this.control, ".sonic-waveform-playhead", HTMLDivElement);
 	#readTime;
+	#renderLabel;
 	#requestPeaks;
 	#rider = createLabelRider(this.control, {
 		className: "sonic-waveform-label",
 		colourProperty: "--_sonic-waveform-marker",
-		fadeProperty: "--_sonic-waveform-label-fade",
+		fadeProperties: ["--_sonic-waveform-label-fade-start", "--_sonic-waveform-label-fade-end"],
 		insetProperty: "--_sonic-waveform-label-inset",
 		parkProperty: "--_sonic-waveform-label-park"
 	});
-	#touches = /* @__PURE__ */ new Map();
-	#wheel;
+	#zoomGesture;
 	attributeChangedCallback(name) {
 		super.attributeChangedCallback(name);
-		if (name === "zoomable") this.#bindWheel();
+		if (name === "zoomable") this.#zoomGesture?.sync();
 	}
 	connectedCallback() {
-		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
+		this.upgradeProperties("peaks", "pending", "pendingDelay", "playing", "playbackRate", "readTime", "reducedMotion", "renderLabel", "requestPeaks", "zoom", "zoomable", "zoomMax", "zoomMin");
 		super.connectedCallback();
 	}
 	connect(signal) {
 		super.connect(signal);
-		this.#connection = signal;
-		signal.addEventListener("abort", () => {
-			this.#connection = void 0;
-			this.#bindWheel();
-		}, { once: true });
-		this.#bindWheel();
-		this.#bindPinch(signal);
+		const zoomTarget = {
+			claim: () => {
+				this.abandonHold();
+			},
+			isDisabled: () => this.isDisabled(),
+			isZoomable: () => this.zoomable,
+			zoom: () => this.zoom,
+			zoomTo: (target) => {
+				this.#zoomTo(target);
+			}
+		};
+		this.#zoomGesture = bindZoom(this.control, zoomTarget, signal);
 		this.bindGestures(this.control, signal, () => this.#grab());
-		this.#bindZoomKeys(signal);
+		bindZoomKeys(this.control, zoomTarget, signal);
 		if (!("fonts" in document)) return;
 		document.fonts.addEventListener("loadingdone", () => {
 			this.renderMarkers();
@@ -288,7 +222,9 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	paint(context, { frameMs, isDirty, isRebuilt, look, size }) {
 		const held = this.#held();
+		const isPaged = look.isReducedMotion && this.reducedMotion === "page";
 		const pending = this.#duePending();
+		const range = [this.min, Math.max(this.min, this.max)];
 		const timeline = frameTimeline({
 			clockSeconds: this.#clock.read(frameMs, {
 				isPlaying: this.playing,
@@ -297,11 +233,11 @@ var SonicWaveform = class extends SonicWaveElement {
 			}),
 			frameMs,
 			...held ? { held } : {},
-			isPaged: look.isReducedMotion && this.reducedMotion === "page",
+			isPaged,
 			isPlaying: this.playing,
 			isStill: look.isReducedMotion,
 			pending,
-			range: [this.min, Math.max(this.min, this.max)],
+			range,
 			size,
 			zoom: this.zoom
 		});
@@ -315,6 +251,7 @@ var SonicWaveform = class extends SonicWaveElement {
 		this.showCurrentMarker(seconds);
 		this.toggleState("pending", view.pending.length > 0);
 		this.#rider.place({
+			isPaged,
 			playheadSeconds: seconds,
 			startSeconds: view.startSeconds,
 			widthPx: view.width / view.dpr,
@@ -322,113 +259,41 @@ var SonicWaveform = class extends SonicWaveElement {
 		});
 		if (isDirty || timeline.paintKey !== this.#paintedKey) {
 			this.#paintedKey = timeline.paintKey;
-			this.#paintScene(context, {
+			if (isRebuilt) this.#kindColours = this.#readKindColours();
+			paintWaveform(context, {
 				...view,
 				colours: look.colours
-			}, isRebuilt);
-			if (timeline.wanted) this.#ask(timeline.wanted);
+			}, {
+				kindColours: this.#kindColours,
+				markers: this.markerList(),
+				peaks: this.#peaks,
+				range
+			});
+			this.#peaksRequest.ask(this.#requestPeaks, timeline.wanted);
 		}
 		if (timeline.isMoving) this.surface()?.requestFrame();
 	}
 	renderMarkers() {
 		const bounds = this.mapping().bounds;
-		this.#rider.measure(this.markers.flatMap(({ dimmed, kind, label, start }) => label === void 0 || label === "" ? [] : [{
-			isDimmed: dimmed === true,
-			...kind === void 0 ? {} : { kind },
-			start: clamp(start, ...bounds),
-			text: label
+		const render = this.#renderLabel;
+		this.#rider.measure(this.markers.flatMap((marker) => marker.label === void 0 || marker.label === "" ? [] : [{
+			isDimmed: marker.dimmed === true,
+			...marker.kind === void 0 ? {} : { kind: marker.kind },
+			start: clamp(marker.start, ...bounds),
+			text: marker.label,
+			...render ? { write: (element) => {
+				render(marker, element);
+			} } : {}
 		}]));
 		this.surface()?.rebuild();
 	}
-	#ask(wanted) {
-		const key = wanted.join(":");
-		if (key === this.#askedKey) return;
-		let asked;
-		this.#askedKey = key;
-		this.#isAsking = true;
-		try {
-			asked = this.#requestPeaks?.(...wanted);
-		} finally {
-			this.#isAsking = false;
-		}
-		const promises = asked instanceof Promise ? [asked] : asked ?? [];
-		for (const promise of promises) {
-			if (this.#asked.has(promise)) continue;
-			this.#asked.add(promise);
-			this.#repaintAfter(promise);
-		}
-	}
-	#bindPinch(signal) {
-		const control = this.control;
-		this.#touches.clear();
-		this.#pinch = void 0;
-		this.#isPinchSpent = false;
-		control.addEventListener("pointerdown", (event) => {
-			if (event.pointerType !== "touch" || !this.zoomable || this.isDisabled()) return;
-			this.#touches.set(event.pointerId, event.clientX);
-			if (this.#pinch || this.#isPinchSpent) return;
-			const pointerIds = this.#touchPair();
-			if (!pointerIds) return;
-			this.abandonHold();
-			capturePointer(control, event.pointerId);
-			this.#pinch = {
-				pointerIds,
-				startSpanPx: this.#spanPx(pointerIds),
-				startZoom: this.zoom
-			};
-		}, { signal });
-		control.addEventListener("pointermove", (event) => {
-			if (!this.#touches.has(event.pointerId)) return;
-			this.#touches.set(event.pointerId, event.clientX);
-			const pinch = this.#pinch;
-			if (!pinch?.pointerIds.includes(event.pointerId)) return;
-			this.#zoomTo(pinch.startZoom * pinchFactor(pinch.startSpanPx, this.#spanPx(pinch.pointerIds)));
-		}, { signal });
-		for (const type of ["pointerup", "pointercancel"]) control.addEventListener(type, (event) => {
-			if (!this.#touches.delete(event.pointerId)) return;
-			if (this.#pinch?.pointerIds.includes(event.pointerId)) {
-				this.#pinch = void 0;
-				this.#isPinchSpent = true;
-			}
-			if (this.#touches.size === 0) this.#isPinchSpent = false;
-		}, { signal });
-	}
-	#bindWheel() {
-		this.#wheel?.abort();
-		this.#wheel = void 0;
-		if (!this.zoomable || !this.#connection) return;
-		this.#wheel = new AbortController();
-		this.control.addEventListener("wheel", (event) => {
-			if (!event.ctrlKey && !event.metaKey || this.isDisabled()) return;
-			event.preventDefault();
-			this.#zoomTo(this.zoom * wheelFactor(event.deltaY, event.deltaMode));
-		}, {
-			passive: false,
-			signal: this.#wheel.signal
-		});
-		let startZoom = this.zoom;
-		for (const type of ["gesturestart", "gesturechange"]) this.control.addEventListener(type, (event) => {
-			if (this.isDisabled() || this.#touches.size > 0) return;
-			event.preventDefault();
-			if (type === "gesturestart") startZoom = this.zoom;
-			else if ("scale" in event && typeof event.scale === "number") this.#zoomTo(startZoom * event.scale);
-		}, { signal: this.#wheel.signal });
-	}
-	#bindZoomKeys(signal) {
-		this.control.addEventListener("keydown", (event) => {
-			const direction = this.#zoomKey(event);
-			if (direction === void 0) return;
-			event.preventDefault();
-			this.#zoomTo(this.zoom * zoomKeyFactor ** direction);
-		}, { signal });
-	}
 	#duePending() {
 		const due = dueRegions(this.#pending, this.#pendingListedMs, [performance.now(), this.pendingDelay]);
 		if (due.length < this.#pending.length) this.surface()?.requestFrame();
 		return due;
 	}
 	#grab() {
-		if (this.#pinch || this.#isPinchSpent) return void 0;
+		if (this.#zoomGesture?.isPinching() === true) return void 0;
 		const drawn = this.#drawn ?? {
 			seconds: this.value,
 			startSeconds: this.value
@@ -445,42 +310,13 @@ var SonicWaveform = class extends SonicWaveElement {
 	}
 	#held() {
 		const grabbed = this.#grabbed;
-		const from = this.heldFrom();
+		const { from } = this.scrubState();
 		if (!grabbed || from === void 0) return void 0;
 		return {
 			grabbed,
 			seconds: this.value === from ? grabbed.seconds : this.value
 		};
 	}
-	#paintMarkers(context, scene, isRebuilt) {
-		if (isRebuilt) this.#kindColours = this.#readKindColours();
-		const line = Math.max(1, Math.round(scene.dpr));
-		for (const { dimmed, kind, start } of this.markers) {
-			const x = (start - scene.startSeconds) * scene.pixelsPerSecond;
-			context.fillStyle = (isKind(kind) ? this.#kindColours.get(kind) : void 0) ?? scene.colours.marker;
-			context.globalAlpha = dimmed === true ? .5 : 1;
-			context.fillRect(x - line / 2, 0, line, scene.height);
-		}
-		context.globalAlpha = 1;
-	}
-	#paintScene(context, scene, isRebuilt) {
-		const { dpr, height, pixelsPerSecond, startSeconds, width } = scene;
-		const x = (seconds) => (seconds - startSeconds) * pixelsPerSecond;
-		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)];
-		context.clearRect(0, 0, width, height);
-		paintHatch(context, scene, [0, from]);
-		paintHatch(context, scene, [to, width]);
-		context.fillStyle = grid;
-		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 = ends;
-		for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
-		this.#paintMarkers(context, scene, isRebuilt);
-	}
 	#readKindColours() {
 		const kinds = [...new Set(this.markers.map(({ kind }) => kind).filter((kind) => isKind(kind)))];
 		const probes = kinds.map((kind) => {
@@ -494,29 +330,8 @@ var SonicWaveform = class extends SonicWaveElement {
 		for (const probe of probes) probe.remove();
 		return new Map(kinds.map((kind, index) => [kind, read[index] ?? ""]));
 	}
-	#repaint() {
-		if (!this.#isAsking) this.#askedKey = void 0;
-		this.surface()?.invalidate();
-	}
-	async #repaintAfter(asked) {
-		await Promise.allSettled([asked]);
-		this.#repaint();
-	}
 	#sourceSeconds() {
-		return this.#readTime?.() ?? this.playback();
-	}
-	#spanPx([first, second]) {
-		return (this.#touches.get(second) ?? 0) - (this.#touches.get(first) ?? 0);
-	}
-	#touchPair() {
-		const [first, second, third] = this.#touches.keys();
-		if (first === void 0 || second === void 0 || third !== void 0) return void 0;
-		return [first, second];
-	}
-	#zoomKey(event) {
-		if (!this.zoomable || this.isDisabled() || event.target !== this.control) return void 0;
-		if (event.ctrlKey || event.metaKey || event.altKey) return void 0;
-		return zoomKeys.get(event.key);
+		return this.#readTime?.() ?? this.scrubState().played;
 	}
 	#zoomTo(target) {
 		const next = roundTo(clamp(target, this.zoomMin, this.zoomMax), 2);

package/dist/default/elements/wavestrip.js

@@ -1,6 +1,7 @@
 import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { readPxProperty } from "../lib/read-px-property.js";
+import { scrubRegions } from "../lib/scrub.js";
 import { sortedRegions } from "../lib/time-regions.js";
 import { SonicWaveElement } from "./wave-element.js";
 import { createMarkerBand } from "../lib/marker-band.js";
@@ -48,6 +49,7 @@ function fillRegion(context, path, [from, to, style]) {
 	context.restore();
 }
 var SonicWavestrip = class extends SonicWaveElement {
+	/** Loaded spans, in seconds */
 	get buffered() {
 		return this.#buffered.map(([start, end]) => [start, end]);
 	}
@@ -61,6 +63,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	set cancellable(isCancellable) {
 		this.reflect("cancellable", isCancellable);
 	}
+	/** One amplitude from 0 to 1 per slice of the whole track, any length; resampled to the bars and never normalised */
 	get peaks() {
 		return this.#peaks;
 	}
@@ -80,6 +83,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
 	#paintedKey = "";
 	#peaks;
+	/** Viewport x of a time, clamped to the strip */
 	clientXOf(value) {
 		const { startPx, travelPx } = this.#axis();
 		return startPx + this.mapping().proportionOf(value) * travelPx;
@@ -107,7 +111,7 @@ var SonicWavestrip = class extends SonicWaveElement {
 	draw() {
 		const surface = this.surface();
 		this.#placeReadout();
-		this.showCurrentMarker(this.playback());
+		this.showCurrentMarker(this.scrubState().played);
 		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
 	}
 	isEmpty() {
@@ -189,12 +193,13 @@ var SonicWavestrip = class extends SonicWaveElement {
 		this.control.style.setProperty("--_sonic-wavestrip-readout-at", String(at));
 	}
 	#stripRegions(width) {
-		const { proportionOf } = this.mapping();
-		const isScrubbing = this.heldFrom() !== void 0 && this.isRevealed();
+		const mapping = this.mapping();
+		const { proportionOf } = mapping;
+		const { played, scrub } = scrubRegions(this.scrubState(), this.value, mapping);
 		return stripRegions({
 			buffered: this.#buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
-			played: proportionOf(this.playback()),
-			...isScrubbing ? { scrub: proportionOf(this.value) } : {}
+			played,
+			...scrub === void 0 ? {} : { scrub }
 		}, width);
 	}
 };