@xsynaptic/sonic-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,77 @@
+import { SonicValueElement } from "./value-element.js";
+import { bindSurface } from "../lib/canvas-surface.js";
+
+//#region src/elements/wave-element.ts
+var SonicWaveElement = class extends SonicValueElement {
+	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);
+		this.renderMarkers();
+	}
+	#heldAt;
+	#markers = [];
+	#surface;
+	connectedCallback() {
+		this.upgradeProperties("markers");
+		super.connectedCallback();
+	}
+	repaint() {
+		this.#surface?.rebuild();
+	}
+	connect(signal) {
+		const control = this.control;
+		this.appendOnce(control);
+		this.renderEmpty();
+		this.#surface = bindSurface({
+			canvas: this.canvas,
+			colours: this.colours,
+			lengths: this.lengths,
+			paint: (context, frame) => {
+				this.paint(context, frame);
+			},
+			resize: () => {
+				this.renderMarkers();
+			},
+			signal
+		});
+		this.render();
+		this.checkStyles(control, this.sheet);
+	}
+	focusTarget() {
+		return this.control;
+	}
+	heldWrite(next) {
+		this.#heldAt = next;
+		this.render();
+	}
+	holdChanged() {
+		if (this.heldFrom() === void 0) this.#heldAt = void 0;
+		this.render();
+	}
+	markerProportions() {
+		const mapping = this.mapping();
+		return this.#markers.map(({ end, start }) => {
+			const at = mapping.proportionOf(start);
+			const to = end === void 0 ? at : mapping.proportionOf(end);
+			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());
+	}
+	surface() {
+		return this.#surface;
+	}
+};
+
+//#endregion
+export { SonicWaveElement };

package/dist/default/elements/waveform.js

@@ -0,0 +1,305 @@
+import { clamp } from "../lib/math.js";
+import { requireChild, template } from "../lib/render.js";
+import { readRegions } from "../lib/time-regions.js";
+import { SonicWaveElement } from "./wave-element.js";
+import { frameTimeline } from "../lib/frame-timeline.js";
+import { createLabelRider } from "../lib/marker-rider.js";
+import { createTrackingClock } from "../lib/tracking-clock.js";
+import { waveformBuckets } from "../lib/waveform-buckets.js";
+
+//#region src/elements/waveform.ts
+const colours = {
+	grid: "--_sonic-waveform-grid",
+	hatch: "--_sonic-waveform-hatch",
+	marker: "--_sonic-waveform-marker",
+	wave: "--_sonic-waveform-wave",
+	waveEdge: "--_sonic-waveform-wave-edge"
+};
+const defaultZoom = 70;
+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>
+			<div class="sonic-waveform-ghost" aria-hidden="true" hidden></div>
+			<div class="sonic-waveform-playhead" aria-hidden="true"></div>
+			<div class="sonic-waveform-label" aria-hidden="true" hidden></div>
+			<div class="sonic-waveform-label" aria-hidden="true" hidden></div>
+			<div class="sonic-waveform-readout" popover="manual">
+				<span></span>
+				<input
+					autocomplete="off"
+					class="sonic-waveform-entry"
+					enterkeyhint="done"
+					hidden
+					spellcheck="false"
+					type="text"
+				/>
+			</div>
+		</div>
+	`, HTMLDivElement);
+function placeLine(line, at) {
+	const isHidden = at === void 0 || at < 0 || at > 1;
+	if (line.hidden !== isHidden) line.hidden = isHidden;
+	if (isHidden) return;
+	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.hatch;
+	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 centre = height / 2;
+	const origin = startSeconds * pixelsPerSecond;
+	const waveY = (x) => centre - Math.sin(((x + origin) / wavelength + scene.phase) * 2 * Math.PI) * centre * 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.hatch;
+	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 centre = scene.height / 2;
+	const amplitudePx = centre * amplitudeMargin;
+	context.fillStyle = waveFill(context, scene);
+	context.beginPath();
+	context.moveTo(first.x, centre);
+	for (const bucket of buckets) context.lineTo(bucket.x, centre - bucket.high * amplitudePx);
+	for (const bucket of buckets.toReversed()) context.lineTo(bucket.x, centre - bucket.low * amplitudePx);
+	context.closePath();
+	context.fill();
+}
+var SonicWaveform = class extends SonicWaveElement {
+	static observedAttributes = [
+		...SonicWaveElement.observedAttributes,
+		"playing",
+		"playback-rate",
+		"zoom"
+	];
+	get peaks() {
+		return this.#peaks;
+	}
+	set peaks(peaks) {
+		this.#peaks = peaks;
+		this.renderEmpty();
+		this.surface()?.invalidate();
+	}
+	get pending() {
+		return this.#pending.map(([start, end]) => [start, end]);
+	}
+	set pending(regions) {
+		this.#pending = regions ? readRegions(regions) : [];
+		this.surface()?.invalidate();
+	}
+	get playbackRate() {
+		const playbackRate = this.numberAttribute("playback-rate", 1);
+		return playbackRate > 0 ? playbackRate : 1;
+	}
+	set playbackRate(value) {
+		this.reflect("playback-rate", value);
+	}
+	get playing() {
+		return this.hasAttribute("playing");
+	}
+	set playing(isPlaying) {
+		this.reflect("playing", isPlaying);
+	}
+	get readTime() {
+		return this.#readTime;
+	}
+	set readTime(read) {
+		this.#readTime = read;
+		this.render();
+	}
+	get requestPeaks() {
+		return this.#requestPeaks;
+	}
+	set requestPeaks(request) {
+		this.#requestPeaks = request;
+		this.surface()?.invalidate();
+	}
+	get zoom() {
+		const zoom = this.numberAttribute("zoom", defaultZoom);
+		return zoom > 0 ? zoom : defaultZoom;
+	}
+	set zoom(value) {
+		this.reflect("zoom", value);
+	}
+	control = renderWaveform();
+	canvas = requireChild(this.control, ".sonic-waveform-canvas", HTMLCanvasElement);
+	colours = colours;
+	lengths = {};
+	sheet = "waveform.css";
+	#clock = createTrackingClock();
+	#drawn;
+	#ghost = requireChild(this.control, ".sonic-waveform-ghost", HTMLDivElement);
+	#grabbed;
+	#paintedKey = "";
+	#peaks;
+	#pending = [];
+	#playhead = requireChild(this.control, ".sonic-waveform-playhead", HTMLDivElement);
+	#readTime;
+	#requestPeaks;
+	#rider = createLabelRider(this.control, {
+		className: "sonic-waveform-label",
+		insetProperty: "--_sonic-waveform-label-inset"
+	});
+	connectedCallback() {
+		this.upgradeProperties("peaks", "pending", "playing", "playbackRate", "readTime", "requestPeaks", "zoom");
+		super.connectedCallback();
+	}
+	connect(signal) {
+		super.connect(signal);
+		this.bindGestures(this.control, signal, () => this.#grab());
+		document.fonts.addEventListener("loadingdone", () => {
+			this.renderMarkers();
+		}, { signal });
+	}
+	draw() {
+		this.surface()?.requestFrame();
+	}
+	isEmpty() {
+		return !this.#peaks || this.#peaks.samples.length === 0;
+	}
+	paint(context, { frameMs, isDirty, look, size }) {
+		const held = this.#held();
+		const timeline = frameTimeline({
+			clockSeconds: this.#clock.read(frameMs, {
+				isPlaying: this.playing,
+				playbackRate: this.playbackRate,
+				seconds: this.#sourceSeconds()
+			}),
+			frameMs,
+			...held ? { held } : {},
+			isPaged: look.isReducedMotion,
+			isPlaying: this.playing,
+			pending: this.#pending,
+			range: [this.min, Math.max(this.min, this.max)],
+			size,
+			zoom: this.zoom
+		});
+		const { seconds, view } = timeline;
+		this.#drawn = {
+			seconds,
+			startSeconds: view.startSeconds
+		};
+		placeLine(this.#playhead, timeline.playheadAt);
+		placeLine(this.#ghost, timeline.ghostAt);
+		this.toggleState("pending", view.pending.length > 0);
+		this.#rider.place({
+			playheadSeconds: seconds,
+			startSeconds: view.startSeconds,
+			widthPx: view.width / view.dpr,
+			windowSeconds: view.width / view.pixelsPerSecond
+		});
+		if (isDirty || timeline.paintKey !== this.#paintedKey) {
+			this.#paintedKey = timeline.paintKey;
+			this.#paintScene(context, {
+				...view,
+				colours: look.colours
+			});
+			if (timeline.wanted) this.#requestPeaks?.(...timeline.wanted);
+		}
+		if (timeline.isMoving) this.surface()?.requestFrame();
+	}
+	renderMarkers() {
+		const bounds = this.mapping().bounds;
+		this.#rider.measure(this.markers.flatMap(({ dimmed, label, start }) => label === void 0 || label === "" ? [] : [{
+			isDimmed: dimmed === true,
+			start: clamp(start, ...bounds),
+			text: label
+		}]));
+		this.surface()?.invalidate();
+	}
+	#grab() {
+		const drawn = this.#drawn ?? {
+			seconds: this.value,
+			startSeconds: this.value
+		};
+		this.#grabbed = drawn;
+		const mapping = this.mapping();
+		const [low, high] = mapping.bounds;
+		return {
+			fromProportion: mapping.proportionOf(drawn.seconds),
+			isKeptOnCancel: true,
+			position: (event) => -event.clientX,
+			travelPx: Math.max(1, (high - low) * this.zoom)
+		};
+	}
+	#held() {
+		const grabbed = this.#grabbed;
+		const from = this.heldFrom();
+		if (!grabbed || from === void 0) return void 0;
+		return {
+			grabbed,
+			seconds: this.value === from ? grabbed.seconds : this.value
+		};
+	}
+	#paintScene(context, scene) {
+		const { dpr, height, pixelsPerSecond, startSeconds, width } = scene;
+		const x = (seconds) => (seconds - startSeconds) * pixelsPerSecond;
+		const { grid, marker } = 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 = grid;
+		for (const edge of [opening, closing]) context.fillRect(edge - line / 2, 0, line, height);
+		context.fillStyle = marker;
+		for (const marker of this.markers) {
+			context.globalAlpha = marker.dimmed === true ? .5 : 1;
+			context.fillRect(x(marker.start) - line / 2, 0, line, height);
+		}
+		context.globalAlpha = 1;
+	}
+	#sourceSeconds() {
+		return this.#readTime?.() ?? this.playback();
+	}
+};
+
+//#endregion
+export { SonicWaveform };

package/dist/default/elements/wavestrip.js

@@ -0,0 +1,182 @@
+import { clampProportion } from "../lib/math.js";
+import { requireChild, template } from "../lib/render.js";
+import { readPxProperty } from "../lib/read-px-property.js";
+import { SonicWaveElement } from "./wave-element.js";
+import { createMarkerBand, nearestMarker } from "../lib/marker-band.js";
+import { stripBars, stripRegions } from "../lib/strip-scene.js";
+
+//#region src/elements/wavestrip.ts
+const colours = {
+	buffered: "--_sonic-wavestrip-buffered",
+	played: "--_sonic-wavestrip-played",
+	scrub: "--_sonic-wavestrip-scrub",
+	wave: "--_sonic-wavestrip-wave"
+};
+const lengths = {
+	gapRatio: "--_sonic-wavestrip-bar-gap-ratio",
+	pitch: "--_sonic-wavestrip-bar-pitch",
+	radiusRatio: "--_sonic-wavestrip-bar-radius-ratio"
+};
+const cancelZonePx = 48;
+const renderWavestrip = template(`
+		<div class="sonic-wavestrip" role="slider" tabindex="0">
+			<canvas class="sonic-wavestrip-canvas" aria-hidden="true"></canvas>
+			<div class="sonic-wavestrip-markers" aria-hidden="true"></div>
+			<div class="sonic-wavestrip-readout" popover="manual">
+				<span></span>
+				<input
+					autocomplete="off"
+					class="sonic-wavestrip-entry"
+					enterkeyhint="done"
+					hidden
+					spellcheck="false"
+					type="text"
+				/>
+			</div>
+		</div>
+	`, HTMLDivElement);
+function fillRegion(context, path, [from, to, style]) {
+	context.save();
+	context.beginPath();
+	context.rect(from, 0, to - from, context.canvas.height);
+	context.clip();
+	context.fillStyle = style;
+	context.fill(path);
+	context.restore();
+}
+var SonicWavestrip = class extends SonicWaveElement {
+	get cancellable() {
+		return this.hasAttribute("cancellable");
+	}
+	set cancellable(isCancellable) {
+		this.reflect("cancellable", isCancellable);
+	}
+	get peaks() {
+		return this.#peaks;
+	}
+	set peaks(peaks) {
+		this.#peaks = peaks;
+		this.renderEmpty();
+		this.surface()?.invalidate();
+	}
+	control = renderWavestrip();
+	canvas = requireChild(this.control, ".sonic-wavestrip-canvas", HTMLCanvasElement);
+	colours = colours;
+	lengths = lengths;
+	sheet = "wavestrip.css";
+	#bars;
+	#markerBand = createMarkerBand(requireChild(this.control, ".sonic-wavestrip-markers", HTMLDivElement));
+	#paintedKey = "";
+	#peaks;
+	connectedCallback() {
+		this.upgradeProperties("cancellable", "peaks");
+		super.connectedCallback();
+	}
+	connect(signal) {
+		super.connect(signal);
+		this.#bindHover(this.control, signal);
+		this.bindGestures(this.control, signal, (event) => this.#grab(event));
+	}
+	draw() {
+		const surface = this.surface();
+		this.#placeReadout();
+		if (surface && this.#stripRegions(surface.size.width).key !== this.#paintedKey) surface.requestFrame();
+	}
+	isEmpty() {
+		return !this.#peaks || this.#peaks.length === 0;
+	}
+	paint(context, frame) {
+		const { look, size } = frame;
+		const strip = this.#stripRegions(size.width);
+		const bars = this.#barsFor(frame);
+		this.#paintedKey = strip.key;
+		context.clearRect(0, 0, size.width, size.height);
+		if (!bars) return;
+		context.fillStyle = look.colours.wave;
+		context.fill(bars);
+		for (const { from, kind, to } of strip.regions) fillRegion(context, bars, [
+			from,
+			to,
+			look.colours[kind]
+		]);
+	}
+	renderMarkers() {
+		this.#markerBand.render(this.markers, this.markerProportions());
+	}
+	scrubsKeyRepeat() {
+		return true;
+	}
+	#axis() {
+		const box = this.canvas.getBoundingClientRect();
+		return {
+			position: (event) => event.clientX,
+			startPx: box.left,
+			travelPx: Math.max(1, box.width)
+		};
+	}
+	#barsFor({ isDirty, look, size }) {
+		const peaks = this.#peaks;
+		if (!peaks || peaks.length === 0) return void 0;
+		if (!isDirty && this.#bars) return this.#bars;
+		const path = new Path2D();
+		for (const { height, radius, width, x, y } of stripBars(peaks, size, look.lengths)) path.roundRect(x, y, width, height, radius);
+		this.#bars = path;
+		return path;
+	}
+	#bindHover(strip, signal) {
+		strip.addEventListener("pointermove", (event) => {
+			if (event.pointerType === "touch" || event.buttons !== 0) return;
+			if (!this.readout || this.isDisabled()) return;
+			const axis = this.#axis();
+			const at = clampProportion((event.clientX - axis.startPx) / axis.travelPx);
+			this.hoverReadout(this.#markerAt(at, axis.travelPx) ?? this.mapping().valueAt(at));
+			this.#placeReadout();
+		}, { signal });
+		for (const type of ["pointerdown", "pointerleave"]) strip.addEventListener(type, () => {
+			this.hoverReadout(void 0);
+		}, { signal });
+	}
+	#grab(event) {
+		const { startPx, ...axis } = this.#axis();
+		const at = (event.clientX - startPx) / axis.travelPx;
+		const outside = this.#outside();
+		const grabbed = {
+			...axis,
+			fromProportion: clampProportion(at)
+		};
+		this.input(this.#markerAt(at, axis.travelPx) ?? this.mapping().valueAt(at));
+		return outside ? {
+			...grabbed,
+			outside
+		} : grabbed;
+	}
+	#markerAt(at, travelPx) {
+		const markers = this.markers;
+		if (markers.length === 0) return void 0;
+		const { proportionOf } = this.mapping();
+		const index = nearestMarker(at, markers.map(({ start }) => proportionOf(start)), this.#markerBand.reachPx() / travelPx);
+		return index === void 0 ? void 0 : markers[index]?.start;
+	}
+	#outside() {
+		if (!this.cancellable) return void 0;
+		const box = this.control.getBoundingClientRect();
+		const zone = readPxProperty(getComputedStyle(this.control), "--_sonic-cancel-zone", cancelZonePx);
+		return (event) => event.clientY < box.top - zone || event.clientY > box.bottom + zone;
+	}
+	#placeReadout() {
+		const at = this.mapping().proportionOf(this.readoutValue());
+		this.control.style.setProperty("--_sonic-wavestrip-readout-at", String(at));
+	}
+	#stripRegions(width) {
+		const { proportionOf } = this.mapping();
+		const isScrubbing = this.heldFrom() !== void 0 && this.isRevealed();
+		return stripRegions({
+			buffered: this.buffered.map(([start, end]) => [proportionOf(start), proportionOf(end)]),
+			played: proportionOf(this.playback()),
+			...isScrubbing ? { scrub: proportionOf(this.value) } : {}
+		}, width);
+	}
+};
+
+//#endregion
+export { SonicWavestrip };