@xsynaptic/sonic-ui 0.6.1 → 0.9.0

package/dist/default/elements/spectrum.js

@@ -0,0 +1,230 @@
+import { requireChild, template } from "../lib/render.js";
+import { SonicDisplayElement } from "./display-element.js";
+import { columnEdges, columnLevels, gridColumns, gridRows, levelRows, loudestBin, zoneRows } from "../lib/spectrum-columns.js";
+import { areSettled, createLevels, receiveLevels, stepLevels } from "../lib/spectrum-levels.js";
+
+//#region src/elements/spectrum.ts
+const colours = {
+	clip: "--_sonic-spectrum-clip",
+	grid: "--_sonic-spectrum-grid",
+	hot: "--_sonic-spectrum-hot",
+	lit: "--_sonic-spectrum-lit"
+};
+const numbers = {
+	clipFrom: "--_sonic-spectrum-clip-from",
+	hotFrom: "--_sonic-spectrum-hot-from"
+};
+const defaultFrequencies = [20, 2e4];
+const defaultSampleRate = 48e3;
+const renderSpectrum = template(`
+		<div aria-hidden="true" class="sonic-spectrum">
+			<canvas class="sonic-spectrum-canvas"></canvas>
+		</div>
+	`, HTMLDivElement);
+function paintGrid(context, { dpr, height, look, range, rowOf, width }, [frequencyMin, frequencyMax]) {
+	const line = Math.max(1, Math.round(dpr));
+	const columns = gridColumns({
+		frequencyMax,
+		frequencyMin
+	}, width);
+	const rows = gridRows(range, rowOf);
+	context.beginPath();
+	for (const column of columns) context.rect(column, 0, line, height);
+	for (const row of rows) context.rect(0, row, width, line);
+	context.fillStyle = look.colours.grid;
+	context.fill();
+}
+function zoneFill(context, { height, look, rowOf }) {
+	const gradient = context.createLinearGradient(0, 0, 0, height);
+	const { clip, hot } = zoneRows(look.numbers, rowOf);
+	gradient.addColorStop(clip / height, look.colours.clip);
+	gradient.addColorStop(clip / height, look.colours.hot);
+	gradient.addColorStop(hot / height, look.colours.hot);
+	gradient.addColorStop(hot / height, look.colours.lit);
+	return gradient;
+}
+function paintBars(context, scene, bars) {
+	const { height, rowOf } = scene;
+	let previous = height;
+	context.beginPath();
+	context.moveTo(0, height);
+	for (const [column, level] of bars.entries()) {
+		const row = rowOf(level);
+		bars[column] = row;
+		if (row === previous) continue;
+		context.lineTo(column, previous);
+		context.lineTo(column, row);
+		previous = row;
+	}
+	context.lineTo(bars.length, previous);
+	context.lineTo(bars.length, height);
+	context.closePath();
+	context.fillStyle = zoneFill(context, scene);
+	context.fill();
+}
+function paintHolds(context, { look, rowOf }, { bars, holds }) {
+	context.beginPath();
+	for (const [column, level] of holds.entries()) {
+		const row = rowOf(level);
+		if (row < (bars[column] ?? 0)) context.rect(column, row, 1, 1);
+	}
+	context.fillStyle = look.colours.lit;
+	context.fill();
+}
+var SonicSpectrum = class extends SonicDisplayElement {
+	static observedAttributes = [
+		...SonicDisplayElement.observedAttributes,
+		"frequency-max",
+		"frequency-min",
+		"grid",
+		"peak-hold",
+		"sample-rate"
+	];
+	get frequencyMax() {
+		return this.numberAttribute("frequency-max", defaultFrequencies[1]);
+	}
+	set frequencyMax(hertz) {
+		this.reflect("frequency-max", hertz);
+	}
+	get frequencyMin() {
+		return this.numberAttribute("frequency-min", defaultFrequencies[0]);
+	}
+	set frequencyMin(hertz) {
+		this.reflect("frequency-min", hertz);
+	}
+	get grid() {
+		return this.getAttribute("grid") === "none" ? "none" : "on";
+	}
+	set grid(grid) {
+		this.reflect("grid", grid);
+	}
+	get peak() {
+		return this.#peak && { ...this.#peak };
+	}
+	get peakHold() {
+		return this.hasAttribute("peak-hold");
+	}
+	set peakHold(isHeld) {
+		this.reflect("peak-hold", isHeld);
+	}
+	get sampleRate() {
+		const sampleRate = this.numberAttribute("sample-rate", defaultSampleRate);
+		return sampleRate > 0 ? sampleRate : defaultSampleRate;
+	}
+	set sampleRate(hertz) {
+		this.reflect("sample-rate", hertz);
+	}
+	control = renderSpectrum();
+	canvas = requireChild(this.control, ".sonic-spectrum-canvas", HTMLCanvasElement);
+	colours = colours;
+	numbers = numbers;
+	sheet = "spectrum.css";
+	#columns;
+	#isSettled = true;
+	#lastFrameMs;
+	#levels = createLevels(0);
+	#peak;
+	#receivedRate;
+	connectedCallback() {
+		this.upgradeProperties("frequencyMax", "frequencyMin", "grid", "peakHold", "sampleRate");
+		super.connectedCallback();
+	}
+	resetPeak() {
+		this.#peak = void 0;
+	}
+	paint(context, { frameMs, isDirty, look, size }) {
+		if (this.isDisabled()) {
+			if (isDirty) this.#draw(context, look, size);
+			return;
+		}
+		const wasSettled = this.#isSettled;
+		this.#step(frameMs, look.isReducedMotion);
+		if (isDirty || !wasSettled || !this.#isSettled) this.#draw(context, look, size);
+		if (!this.#isSettled) this.surface()?.requestFrame();
+	}
+	pull(analyser, buffer) {
+		analyser.getFloatFrequencyData(buffer);
+	}
+	receive(frame) {
+		if (frame.length !== this.#levels.bars.length) this.#levels = createLevels(frame.length);
+		this.#receivedRate = this.analyser?.context.sampleRate ?? this.sampleRate;
+		receiveLevels(this.#levels, frame, this.min);
+		const loudest = loudestBin(frame, this.#axis());
+		if (loudest && loudest.decibels > (this.#peak?.decibels ?? -Infinity)) this.#peak = loudest;
+	}
+	#axis() {
+		const [frequencyMin, frequencyMax] = this.#frequencies();
+		return {
+			binCount: this.#levels.bars.length,
+			frequencyMax,
+			frequencyMin,
+			sampleRate: this.#receivedRate ?? this.sampleRate
+		};
+	}
+	#columnsFor(width) {
+		const axis = this.#axis();
+		const key = [
+			width,
+			axis.binCount,
+			axis.sampleRate,
+			axis.frequencyMin,
+			axis.frequencyMax
+		].join(" ");
+		if (this.#columns?.key !== key) this.#columns = {
+			bars: new Float64Array(width),
+			edges: columnEdges(axis, width),
+			holds: new Float64Array(width),
+			key
+		};
+		return this.#columns;
+	}
+	#draw(context, look, size) {
+		const scene = {
+			...size,
+			look,
+			range: {
+				max: this.max,
+				min: this.min
+			},
+			rowOf: levelRows({
+				max: this.max,
+				min: this.min
+			}, size.height)
+		};
+		context.clearRect(0, 0, size.width, size.height);
+		if (this.grid === "on") paintGrid(context, scene, this.#frequencies());
+		if (this.isDisabled()) return;
+		const { bars, edges, holds } = this.#columnsFor(size.width);
+		const spread = {
+			edges,
+			floor: scene.range.min
+		};
+		columnLevels(bars, this.#levels.bars, spread);
+		paintBars(context, scene, bars);
+		if (!this.peakHold) return;
+		columnLevels(holds, this.#levels.holds, spread);
+		paintHolds(context, scene, {
+			bars,
+			holds
+		});
+	}
+	#frequencies() {
+		const { frequencyMax, frequencyMin } = this;
+		return frequencyMin > 0 && frequencyMax > frequencyMin ? [frequencyMin, frequencyMax] : defaultFrequencies;
+	}
+	#step(frameMs, isReducedMotion) {
+		const floor = this.min;
+		stepLevels(this.#levels, {
+			elapsedMs: Math.max(0, frameMs - (this.#lastFrameMs ?? frameMs)),
+			floor,
+			isHeld: this.peakHold,
+			isHoldStepped: isReducedMotion,
+			nowMs: frameMs
+		});
+		this.#isSettled = areSettled(this.#levels, floor);
+		this.#lastFrameMs = this.#isSettled ? void 0 : frameMs;
+	}
+};
+
+//#endregion
+export { SonicSpectrum };