@xsynaptic/sonic-ui 0.6.0 → 0.8.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 };

package/dist/default/elements/switch.js

@@ -1,7 +1,7 @@
 import { clamp } from "../lib/math.js";
-import { requireChild, template } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { bindHold } from "../lib/hold.js";
+import { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
 import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
 

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

@@ -1,8 +1,8 @@
-import { clamp, toNumber } from "../lib/math.js";
-import { placeChildren, requireChild } from "../lib/render.js";
+import { clamp, toNumber, trimFloat } from "../lib/math.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
-import { copyNode } from "../lib/copy-node.js";
+import { requireChild } from "../lib/render.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { ValueEntry } from "./value-entry.js";
@@ -10,9 +10,7 @@ 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 { readRegions } from "../lib/time-regions.js";
 import { resetKeys, valueMapping } from "../lib/value-mapping.js";
 
 //#region src/elements/value-element.ts
@@ -37,18 +35,6 @@ const roleAttributes = [
 	"role",
 	"tabindex"
 ];
-function scaleValue(mark) {
-	const text = mark.dataset.sonicValue?.trim();
-	return text ? Number(text) : NaN;
-}
-function scaleMark(original) {
-	const mark = copyNode(original);
-	if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) return void 0;
-	if (!Number.isFinite(scaleValue(mark))) return void 0;
-	const isTick = mark.childElementCount === 0 && mark.textContent.trim() === "";
-	mark.classList.add(isTick ? "sonic-scale-tick" : "sonic-scale-label");
-	return mark;
-}
 let link;
 function linkValue(element) {
 	return link(element);
@@ -63,7 +49,9 @@ var SonicValueElement = class extends SonicFormElement {
 		"notched",
 		"origin",
 		"readout",
+		"spoken-step",
 		"step",
+		"tabindex",
 		"taper",
 		"value",
 		"positions"
@@ -89,13 +77,6 @@ var SonicValueElement = class extends SonicFormElement {
 			}
 		});
 	}
-	get buffered() {
-		return this.#buffered.map(([start, end]) => [start, end]);
-	}
-	set buffered(regions) {
-		this.#buffered = regions ? readRegions(regions).toSorted((first, second) => first[0] - second[0]) : [];
-		this.render();
-	}
 	get default() {
 		return this.optionalNumberAttribute("default");
 	}
@@ -176,6 +157,9 @@ var SonicValueElement = class extends SonicFormElement {
 	set parseValue(parse) {
 		this.#parseValue = parse;
 	}
+	get pointerType() {
+		return this.#dragging()?.pointerType;
+	}
 	get positions() {
 		return parseNumberList(this.getAttribute("positions"));
 	}
@@ -188,6 +172,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);
 	}
@@ -220,16 +210,16 @@ var SonicValueElement = class extends SonicFormElement {
 		return this.#textFor(this.#value);
 	}
 	#asked;
-	#buffered = [];
 	#claim = new ReadoutClaim(() => {
 		this.#renderHold();
 	});
 	#entry;
-	#escapeWatch;
 	#formatSpokenValue;
 	#formatValue;
+	#heldAt;
 	#instance = String(instanceCount += 1);
 	#isModulated = false;
+	#isRevealed = false;
 	#keyScrub;
 	#land;
 	#limit;
@@ -239,7 +229,6 @@ var SonicValueElement = class extends SonicFormElement {
 	#pointerDrag;
 	#positions;
 	#readout;
-	#scaleMarks;
 	#value = 0;
 	#watchers = /* @__PURE__ */ new Set();
 	attributeChangedCallback(name) {
@@ -258,7 +247,7 @@ var SonicValueElement = class extends SonicFormElement {
 		this.render();
 	}
 	connectedCallback() {
-		this.upgradeProperties("buffered", "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) {
@@ -284,6 +273,7 @@ var SonicValueElement = class extends SonicFormElement {
 					fromValue,
 					isOutside: false,
 					isRevealed: false,
+					pointerType: event.pointerType,
 					revealTimer: void 0,
 					state: this.#startDrag(control, axis, event)
 				};
@@ -322,19 +312,6 @@ var SonicValueElement = class extends SonicFormElement {
 			this.#concealKeyReveal();
 		}, { once: true });
 	}
-	bindScale(control, marks, signal) {
-		this.#scaleMarks = marks;
-		this.mirrorChildren({
-			control,
-			copy: scaleMark,
-			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
-			isPassed: (child) => child instanceof Element && child.matches(".sonic-led"),
-			place: (copies) => {
-				placeChildren(marks, copies);
-				this.#renderScale();
-			}
-		}, signal);
-	}
 	controlOrientation() {}
 	controlRole() {
 		return "slider";
@@ -342,13 +319,10 @@ var SonicValueElement = class extends SonicFormElement {
 	heldFrom() {
 		return this.#dragging()?.fromValue ?? this.#keyScrub?.fromValue;
 	}
-	heldWrite(_next) {}
-	holdChanged() {}
-	hoverReadout(value) {
-		this.#claim.hover(value);
-		this.#renderReadout();
-		this.#watchEscape(value !== void 0);
+	heldWrite(next) {
+		this.#heldAt = next;
 	}
+	holdChanged() {}
 	input(next) {
 		const previous = this.#value;
 		this.#write(this.#limit ? clamp(next, ...this.#limit) : next);
@@ -359,6 +333,9 @@ var SonicValueElement = class extends SonicFormElement {
 		}));
 		return true;
 	}
+	isEditing() {
+		return this.#entry?.isOpen === true;
+	}
 	isRevealed() {
 		return this.#claim.isRevealed;
 	}
@@ -384,17 +361,33 @@ var SonicValueElement = class extends SonicFormElement {
 	originValue() {
 		return this.origin ?? this.mapping().bounds[0];
 	}
+	playback() {
+		const from = this.heldFrom();
+		return from === void 0 ? this.#value : this.#heldAt ?? from;
+	}
+	previewValue() {}
 	proportionsChanged() {}
 	readModulationValue() {
 		return this.#modulationValue;
 	}
 	readoutValue() {
-		return this.#claim.shown(this.#value, this.readout).value ?? this.#value;
+		return this.#shown().value ?? this.#value;
 	}
 	render() {
 		if (this.isBound()) this.#renderControl();
 		for (const listener of this.#watchers) listener();
 	}
+	renderReadout() {
+		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: isOpen && text !== "",
+			text
+		});
+	}
 	restoreState(state) {
 		this.value = Number(state);
 	}
@@ -440,7 +433,6 @@ var SonicValueElement = class extends SonicFormElement {
 			},
 			text: () => this.#parseValue ? this.valueText : String(this.#value),
 			toggle: (isOpen) => {
-				this.#claim.edit(isOpen);
 				if (isOpen) this.forwardNaming(input, true);
 				this.toggleState("editing", isOpen);
 				this.render();
@@ -501,10 +493,13 @@ var SonicValueElement = class extends SonicFormElement {
 		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;
+			this.toggleState("cancelling", isOutside);
+		}
 		this.input(isOutside ? drag.fromValue : value);
-		if (isOutside === drag.isOutside) return;
-		drag.isOutside = isOutside;
-		this.#renderDragReveal(drag);
+		if (isCrossing) this.#renderDragReveal(drag);
 	}
 	#endHolds() {
 		this.#entry?.close(false);
@@ -536,7 +531,9 @@ var SonicValueElement = class extends SonicFormElement {
 	#releaseDrag(drag) {
 		clearTimeout(drag.revealTimer);
 		this.#claim.conceal("drag");
+		this.toggleState("cancelling", false);
 		this.#renderHold();
+		this.#showRevealed(false);
 		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
 		this.#springBack();
 	}
@@ -545,59 +542,43 @@ var SonicValueElement = class extends SonicFormElement {
 		if (this.#entry?.isOpen) {
 			for (const name of roleAttributes) control.removeAttribute(name);
 			this.forwardNaming(control, false);
-			this.#renderReadout();
+			this.renderReadout();
 			return;
 		}
 		const [low, high] = this.mapping().bounds;
 		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));
 		this.forwardNaming(control, true);
 		this.#renderDisabled(control);
-		this.#renderReadout();
+		this.renderReadout();
 	}
 	#renderControl() {
 		this.draw();
-		this.#renderScale();
 		this.toggleState("at-origin", !this.isWrapping() && this.#value === this.mapping().snap(this.originValue()));
 		this.#renderAria(this.focusTarget(), this.controlOrientation());
 	}
 	#renderDisabled(control) {
 		const isDisabled = this.isDisabled();
 		writeAttribute(control, "aria-disabled", isDisabled ? "true" : void 0);
-		writeAttribute(control, "tabindex", isDisabled ? void 0 : "0");
+		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");
+		const isRevealed = drag.isRevealed && !drag.isOutside;
+		if (isRevealed) this.#claim.reveal("drag");
 		else this.#claim.conceal("drag");
 		this.#renderHold();
+		this.#showRevealed(isRevealed);
 	}
 	#renderHold() {
-		this.#renderReadout();
+		if (this.heldFrom() === void 0) this.#heldAt = void 0;
+		this.renderReadout();
 		this.holdChanged();
 	}
-	#renderReadout() {
-		const readout = this.#readout;
-		if (!readout) return;
-		const { isOpen, value } = this.#claim.shown(this.#value, this.readout);
-		readout.bubble.show({
-			anchor: readout.anchor,
-			isOpen,
-			text: value === void 0 ? void 0 : this.#textFor(value)
-		});
-	}
-	#renderScale() {
-		const marks = this.#scaleMarks?.children ?? [];
-		const mapping = this.mapping();
-		for (const mark of marks) {
-			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
-			const at = String(mapping.proportionOf(scaleValue(mark)));
-			if (mark.style.getPropertyValue("--_sonic-scale-at") !== at) mark.style.setProperty("--_sonic-scale-at", at);
-		}
-	}
 	#reset() {
 		this.#commit(this.default ?? NaN);
 	}
@@ -616,6 +597,28 @@ var SonicValueElement = class extends SonicFormElement {
 		}
 		this.input(next);
 	}
+	#shown() {
+		if (this.isEditing()) return {
+			isOpen: true,
+			value: void 0
+		};
+		const isRevealed = this.#claim.isRevealed;
+		const preview = isRevealed ? void 0 : this.previewValue();
+		return {
+			isOpen: (isRevealed || preview !== void 0) && this.readout,
+			value: preview ?? this.#value
+		};
+	}
+	#showRevealed(isRevealed) {
+		if (isRevealed === this.#isRevealed) return;
+		this.#isRevealed = isRevealed;
+		this.toggleState("revealed", isRevealed);
+		this.dispatchEvent(new Event("sonic-reveal", { bubbles: true }));
+	}
+	#spokenNow() {
+		const step = this.spokenStep;
+		return step !== void 0 && step > 0 ? trimFloat(Math.round(this.#value / step) * step) : this.#value;
+	}
 	#springBack() {
 		const target = this.springTarget();
 		if (target === void 0) return;
@@ -645,19 +648,6 @@ var SonicValueElement = class extends SonicFormElement {
 	#textFor(value) {
 		return this.#formatValue?.(value) ?? String(value);
 	}
-	#watchEscape(isHovered) {
-		if (!isHovered) {
-			this.#escapeWatch?.abort();
-			this.#escapeWatch = void 0;
-			return;
-		}
-		if (this.#escapeWatch) return;
-		const watch = new AbortController();
-		this.#escapeWatch = watch;
-		this.ownerDocument.addEventListener("keydown", (event) => {
-			if (event.key === "Escape" && this.#claim.dismiss()) this.#renderHold();
-		}, { signal: watch.signal });
-	}
 	#withinLimit(mapping, state) {
 		const limit = this.#limit;
 		if (!limit || mapping.isWrapping) return state;