@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/default/elements/xy.js

@@ -0,0 +1,487 @@
+import { clampProportion, toNumber } from "../lib/math.js";
+import { requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { SonicFormElement } from "./form-element.js";
+import { ReadoutClaim } from "./readout-claim.js";
+import { Readout } from "./readout.js";
+import { dragThresholdPx } from "../lib/drag-step.js";
+import { focusByPointer } from "../lib/focus-by-pointer.js";
+import { isMenuPress, isResetPress } from "../lib/modifier-press.js";
+import { bindDrag } from "../lib/pointer-drag.js";
+import { resetKeys, valueMapping } from "../lib/value-mapping.js";
+import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
+
+//#region src/elements/xy.ts
+const axes = ["x", "y"];
+const keyMoves = /* @__PURE__ */ new Map([
+	["ArrowDown", ["y", "ArrowDown"]],
+	["ArrowLeft", ["x", "ArrowLeft"]],
+	["ArrowRight", ["x", "ArrowRight"]],
+	["ArrowUp", ["y", "ArrowUp"]],
+	["End", ["x", "PageUp"]],
+	["Home", ["x", "PageDown"]],
+	["PageDown", ["y", "PageDown"]],
+	["PageUp", ["y", "PageUp"]]
+]);
+const orientations = {
+	x: "horizontal",
+	y: "vertical"
+};
+const renderXy = template(`
+		<div class="sonic-xy">
+			<div class="sonic-xy-field" aria-hidden="true"></div>
+			<div class="sonic-xy-puck">
+				<div class="sonic-xy-axis" data-sonic-axis="x" role="slider" tabindex="0"></div>
+				<div
+					class="sonic-xy-axis"
+					data-sonic-axis="y"
+					role="slider"
+					tabindex="-1"
+					aria-hidden="true"
+				></div>
+			</div>
+			<div class="sonic-xy-readout" aria-hidden="true" popover="manual"><span></span></div>
+		</div>
+	`, HTMLDivElement);
+var SonicXy = class extends SonicFormElement {
+	static observedAttributes = [
+		...SonicFormElement.observedAttributes,
+		"name",
+		"readout",
+		"x",
+		"x-label",
+		"x-max",
+		"x-midpoint",
+		"x-min",
+		"x-origin",
+		"x-step",
+		"x-taper",
+		"y",
+		"y-label",
+		"y-max",
+		"y-midpoint",
+		"y-min",
+		"y-origin",
+		"y-step",
+		"y-taper"
+	];
+	get formatValue() {
+		return this.#formatValue;
+	}
+	set formatValue(format) {
+		this.#formatValue = format;
+		this.render();
+	}
+	get readout() {
+		return this.hasAttribute("readout");
+	}
+	set readout(isEnabled) {
+		this.reflect("readout", isEnabled);
+	}
+	get x() {
+		return this.#values.x.value;
+	}
+	set x(next) {
+		this.#write("x", next);
+	}
+	get xDefault() {
+		return this.optionalNumberAttribute("x-default");
+	}
+	set xDefault(value) {
+		this.reflect("x-default", value);
+	}
+	get xLabel() {
+		return this.getAttribute("x-label") ?? void 0;
+	}
+	set xLabel(label) {
+		this.reflect("x-label", label);
+	}
+	get xMax() {
+		return this.numberAttribute("x-max", 100);
+	}
+	set xMax(value) {
+		this.reflect("x-max", value);
+	}
+	get xMidpoint() {
+		return this.optionalNumberAttribute("x-midpoint");
+	}
+	set xMidpoint(value) {
+		this.reflect("x-midpoint", value);
+	}
+	get xMin() {
+		return this.numberAttribute("x-min", 0);
+	}
+	set xMin(value) {
+		this.reflect("x-min", value);
+	}
+	get xOrigin() {
+		return this.optionalNumberAttribute("x-origin");
+	}
+	set xOrigin(value) {
+		this.reflect("x-origin", value);
+	}
+	get xStep() {
+		return this.numberAttribute("x-step", 1);
+	}
+	set xStep(value) {
+		this.reflect("x-step", value);
+	}
+	get xTaper() {
+		return this.#taper("x");
+	}
+	set xTaper(curve) {
+		this.reflect("x-taper", curve);
+	}
+	get y() {
+		return this.#values.y.value;
+	}
+	set y(next) {
+		this.#write("y", next);
+	}
+	get yDefault() {
+		return this.optionalNumberAttribute("y-default");
+	}
+	set yDefault(value) {
+		this.reflect("y-default", value);
+	}
+	get yLabel() {
+		return this.getAttribute("y-label") ?? void 0;
+	}
+	set yLabel(label) {
+		this.reflect("y-label", label);
+	}
+	get yMax() {
+		return this.numberAttribute("y-max", 100);
+	}
+	set yMax(value) {
+		this.reflect("y-max", value);
+	}
+	get yMidpoint() {
+		return this.optionalNumberAttribute("y-midpoint");
+	}
+	set yMidpoint(value) {
+		this.reflect("y-midpoint", value);
+	}
+	get yMin() {
+		return this.numberAttribute("y-min", 0);
+	}
+	set yMin(value) {
+		this.reflect("y-min", value);
+	}
+	get yOrigin() {
+		return this.optionalNumberAttribute("y-origin");
+	}
+	set yOrigin(value) {
+		this.reflect("y-origin", value);
+	}
+	get yStep() {
+		return this.numberAttribute("y-step", 1);
+	}
+	set yStep(value) {
+		this.reflect("y-step", value);
+	}
+	get yTaper() {
+		return this.#taper("y");
+	}
+	set yTaper(curve) {
+		this.reflect("y-taper", curve);
+	}
+	#claim = new ReadoutClaim(() => {
+		this.#renderReadout();
+	});
+	#currentAxis = "x";
+	#xy = renderXy();
+	#field = requireChild(this.#xy, ".sonic-xy-field", HTMLDivElement);
+	#formatValue;
+	#mapped;
+	#parts = {
+		x: requireChild(this.#xy, "[data-sonic-axis=\"x\"]", HTMLDivElement),
+		y: requireChild(this.#xy, "[data-sonic-axis=\"y\"]", HTMLDivElement)
+	};
+	#pointerDrag;
+	#puck = requireChild(this.#xy, ".sonic-xy-puck", HTMLDivElement);
+	#readout = new Readout(requireChild(this.#xy, ".sonic-xy-readout", HTMLDivElement));
+	#values = {
+		x: {
+			asked: void 0,
+			value: 0
+		},
+		y: {
+			asked: void 0,
+			value: 0
+		}
+	};
+	attributeChangedCallback(name) {
+		this.#mapped = void 0;
+		if (name === "x" || name === "y") {
+			if (this.#pointerDrag?.current()) return;
+			this.#values[name].asked = void 0;
+		}
+		if (name === "disabled" && this.isDisabled()) this.#pointerDrag?.end();
+		this.#refresh();
+	}
+	connectedCallback() {
+		this.upgradeProperties("readout", "xDefault", "xLabel", "xMax", "xMidpoint", "xMin", "xOrigin", "xStep", "xTaper", "yDefault", "yLabel", "yMax", "yMidpoint", "yMin", "yOrigin", "yStep", "yTaper", "formatValue", "x", "y");
+		super.connectedCallback();
+	}
+	formResetCallback() {
+		for (const axis of axes) this.#values[axis].asked = void 0;
+		this.#refresh();
+	}
+	connect(signal) {
+		const xy = this.#xy;
+		this.keepControl(xy, signal);
+		this.render();
+		this.checkStyles(xy, "xy.css");
+		this.#bindPointer(xy, signal);
+		this.#bindKeys(xy, signal);
+	}
+	focusTarget() {
+		return this.#parts[this.#currentAxis];
+	}
+	render() {
+		if (!this.isBound()) return;
+		const { style } = this.#xy;
+		const mappings = this.#mappings();
+		for (const axis of axes) {
+			const mapping = mappings[axis];
+			const origin = this.optionalNumberAttribute(`${axis}-origin`) ?? mapping.bounds[0];
+			style.setProperty(`--_sonic-xy-${axis}`, String(mapping.proportionOf(this.#values[axis].value)));
+			style.setProperty(`--_sonic-xy-${axis}-origin`, String(mapping.proportionOf(origin)));
+		}
+		this.#renderAria();
+		this.#renderForm();
+		this.#renderReadout();
+	}
+	restoreState(state) {
+		const [x = NaN, y = NaN] = state.split(",").map(Number);
+		this.x = x;
+		this.y = y;
+	}
+	#axisText(axis) {
+		const { value } = this.#values[axis];
+		return `${this.getAttribute(`${axis}-label`) ?? axis.toUpperCase()} ${this.#formatValue?.(value, axis) ?? String(value)}`;
+	}
+	#bindKeys(xy, signal) {
+		xy.addEventListener("keydown", (event) => {
+			if (this.isDisabled() || event.defaultPrevented) return;
+			const move = keyMoves.get(event.key);
+			if (!move && !(resetKeys.has(event.key) && this.#hasDefault())) return;
+			event.preventDefault();
+			if (move) this.#keyTo(...move);
+			else this.#reset();
+			this.#claim.reveal("keys");
+			this.#renderReadout();
+		}, { signal });
+		xy.addEventListener("focusout", (event) => {
+			if (event.relatedTarget instanceof Node && xy.contains(event.relatedTarget)) return;
+			if (this.#claim.conceal("keys")) this.#renderReadout();
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			this.#claim.conceal("keys");
+		}, { once: true });
+	}
+	#bindPointer(xy, signal) {
+		xy.addEventListener("mousedown", (event) => {
+			event.preventDefault();
+		}, { signal });
+		this.#pointerDrag = bindDrag(xy, {
+			cancel: (drag) => {
+				this.#input(drag.from);
+			},
+			grab: (event) => {
+				if (this.isDisabled() || isMenuPress(event)) return;
+				focusByPointer(this.focusTarget());
+				if (!isResetPress(event)) return this.#grab(event);
+				this.#reset();
+			},
+			move: (drag, event) => {
+				const step = stepFieldDrag(this.#mappings(), drag.state, pointerMove(event));
+				drag.state = step.state;
+				if (step.state.isEngaged) this.#claim.reveal("drag");
+				if (!this.#input(step)) this.#renderReadout();
+			},
+			release: (drag) => {
+				this.#claim.press(false);
+				if (this.x === drag.from.x && this.y === drag.from.y) return;
+				this.dispatchEvent(new Event("change", { bubbles: true }));
+			},
+			toggle: (isDragging) => {
+				this.toggleState("dragging", isDragging);
+			}
+		}, signal);
+	}
+	#commit(next) {
+		if (this.#input(next)) this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#grab(event) {
+		const from = {
+			x: this.x,
+			y: this.y
+		};
+		const field = this.#field.getBoundingClientRect();
+		const puck = this.#puck.getBoundingClientRect();
+		const mappings = this.#mappings();
+		const travel = {
+			x: Math.max(1, field.width - puck.width),
+			y: Math.max(1, field.height - puck.height)
+		};
+		const position = pointerPosition(event);
+		const pressed = {
+			x: (position.x - field.left - puck.width / 2) / travel.x,
+			y: (position.y + field.bottom - puck.height / 2) / travel.y
+		};
+		const isOnPuck = event.target instanceof Node && this.#puck.contains(event.target);
+		if (!isOnPuck) this.#input({
+			x: mappings.x.valueAt(pressed.x),
+			y: mappings.y.valueAt(pressed.y)
+		});
+		this.#claim.press(true);
+		const start = (axis) => ({
+			from: this.#values[axis].value,
+			mapping: mappings[axis],
+			proportion: isOnPuck ? mappings[axis].proportionOf(this.#values[axis].value) : clampProportion(pressed[axis]),
+			travelPx: travel[axis]
+		});
+		return {
+			from,
+			state: startFieldDrag({
+				position,
+				thresholdPx: dragThresholdPx(event.pointerType),
+				x: start("x"),
+				y: start("y")
+			})
+		};
+	}
+	#hasDefault() {
+		return this.xDefault !== void 0 || this.yDefault !== void 0;
+	}
+	#input(next) {
+		let hasMoved = false;
+		for (const axis of axes) if (this.#set(axis, next[axis] ?? NaN)) hasMoved = true;
+		if (!hasMoved) return false;
+		this.render();
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		return true;
+	}
+	#keyTo(axis, key) {
+		const next = this.#mappings()[axis].keyTarget(key, this.#values[axis].value);
+		const hasMoved = this.#set(axis, next ?? NaN);
+		this.#currentAxis = axis;
+		this.render();
+		this.#parts[axis].focus();
+		if (!hasMoved) return;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#mapping(axis) {
+		const midpoint = this.optionalNumberAttribute(`${axis}-midpoint`);
+		return valueMapping({
+			max: this.numberAttribute(`${axis}-max`, 100),
+			...midpoint === void 0 ? {} : { midpoint },
+			isNotched: false,
+			isWrapping: false,
+			min: this.numberAttribute(`${axis}-min`, 0),
+			step: this.numberAttribute(`${axis}-step`, 1),
+			taper: this.#taper(axis)
+		});
+	}
+	#mappings() {
+		if (this.#mapped) return this.#mapped;
+		this.#mapped = {
+			x: this.#mapping("x"),
+			y: this.#mapping("y")
+		};
+		return this.#mapped;
+	}
+	#refresh() {
+		const mappings = this.#mappings();
+		for (const axis of axes) {
+			const axisValue = this.#values[axis];
+			const mapping = mappings[axis];
+			axisValue.value = mapping.snap(axisValue.asked ?? this.numberAttribute(axis, mapping.bounds[0]));
+		}
+		this.render();
+	}
+	#renderAria() {
+		const mappings = this.#mappings();
+		const isDisabled = this.isDisabled();
+		for (const axis of axes) {
+			const part = this.#parts[axis];
+			const [low, high] = mappings[axis].bounds;
+			const isCurrent = axis === this.#currentAxis;
+			const stop = isCurrent ? "0" : "-1";
+			writeAttribute(part, "aria-orientation", orientations[axis]);
+			writeAttribute(part, "aria-valuemin", String(low));
+			writeAttribute(part, "aria-valuemax", String(high));
+			writeAttribute(part, "aria-valuenow", String(this.#values[axis].value));
+			writeAttribute(part, "aria-valuetext", this.#valueText(axis));
+			this.forwardNaming(part, true);
+			writeAttribute(part, "aria-hidden", isCurrent ? void 0 : "true");
+			writeAttribute(part, "aria-disabled", isDisabled ? "true" : void 0);
+			writeAttribute(part, "tabindex", isDisabled ? void 0 : stop);
+		}
+	}
+	#renderForm() {
+		const { name, x, y } = this;
+		const state = `${String(x)},${String(y)}`;
+		if (name === "") {
+			this.writeFormValue(null, state);
+			return;
+		}
+		const fields = new FormData();
+		fields.set(`${name}.x`, String(x));
+		fields.set(`${name}.y`, String(y));
+		this.writeFormValue(fields, state);
+	}
+	#renderReadout() {
+		this.#readout.show({
+			anchor: this.#puck,
+			isOpen: this.#claim.isRevealed && this.readout,
+			text: this.#valueText("x")
+		});
+	}
+	#reset() {
+		this.#commit({
+			x: this.xDefault,
+			y: this.yDefault
+		});
+	}
+	#set(axis, next) {
+		if (!Number.isFinite(next)) return false;
+		const axisValue = this.#values[axis];
+		const snapped = this.#mappings()[axis].snap(next);
+		axisValue.asked = snapped;
+		if (snapped === axisValue.value) return false;
+		axisValue.value = snapped;
+		return true;
+	}
+	#taper(axis) {
+		return this.getAttribute(`${axis}-taper`) === "log" ? "log" : "linear";
+	}
+	#valueText(axis) {
+		return `${this.#axisText(axis)}, ${this.#axisText(axis === "x" ? "y" : "x")}`;
+	}
+	#write(axis, next) {
+		if (this.#pointerDrag?.current()) return;
+		const axisValue = this.#values[axis];
+		if (next === void 0 || next === null) {
+			axisValue.asked = void 0;
+			this.#refresh();
+			return;
+		}
+		const asked = toNumber(next);
+		const hasMoved = this.#set(axis, asked);
+		if (Number.isFinite(asked)) axisValue.asked = asked;
+		if (hasMoved) this.render();
+	}
+};
+
+//#endregion
+export { SonicXy };

package/dist/default/index.js

@@ -1,9 +1,17 @@
+import { SonicButton } from "./elements/button.js";
 import { SonicDial } from "./elements/dial.js";
-import { SonicKey } from "./elements/key.js";
+import { envelopeCurve } from "./lib/envelope-curve.js";
+import { SonicEnvelope } from "./elements/envelope.js";
 import { SonicMeter } from "./elements/meter.js";
 import { SonicNumber } from "./elements/number.js";
 import { SonicSegmented } from "./elements/segmented.js";
 import { SonicSlider } from "./elements/slider.js";
+import { SonicSplit } from "./elements/split.js";
+import { SonicSwitch } from "./elements/switch.js";
+import { SonicWaveform } from "./elements/waveform.js";
+import { SonicWavestrip } from "./elements/wavestrip.js";
+import { SonicXy } from "./elements/xy.js";
+import { crossfadeGains } from "./lib/crossfade.js";
 import { formatPercent, parsePercent } from "./lib/percent.js";
 
-export { SonicDial, SonicKey, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, formatPercent, parsePercent };
+export { SonicButton, SonicDial, SonicEnvelope, SonicMeter, SonicNumber, SonicSegmented, SonicSlider, SonicSplit, SonicSwitch, SonicWaveform, SonicWavestrip, SonicXy, crossfadeGains, envelopeCurve, formatPercent, parsePercent };

package/dist/default/lib/adsr-shape.js

@@ -0,0 +1,113 @@
+import { roundTo } from "./math.js";
+import { envelopeCurve } from "./envelope-curve.js";
+
+//#region src/lib/adsr-shape.ts
+const adsrStages = [
+	"delay",
+	"attack",
+	"hold",
+	"decay",
+	"sustain",
+	"release"
+];
+const timeStages = [
+	"delay",
+	"attack",
+	"hold",
+	"decay",
+	"release"
+];
+const curveSamples = 24;
+function along(from, to, at) {
+	return {
+		x: from.x + (to.x - from.x) * at.position,
+		y: from.y + (to.y - from.y) * envelopeCurve(at.position, at.curve)
+	};
+}
+function curved(from, to, curve) {
+	if (envelopeCurve(.5, curve) === .5) return [];
+	return Array.from({ length: 23 }, (_, index) => along(from, to, {
+		curve,
+		position: (index + 1) / curveSamples
+	}));
+}
+function leg(from, to, curve) {
+	if (curve === void 0) return {
+		curveHandle: void 0,
+		points: [to]
+	};
+	return {
+		curveHandle: along(from, to, {
+			curve,
+			position: .5
+		}),
+		points: [...curved(from, to, curve), to]
+	};
+}
+function isHandled(proportions, stage) {
+	return (stage === "decay" ? proportions.sustain ?? proportions.decay : proportions[stage]) !== void 0;
+}
+function adsrShape(proportions, curves = {}) {
+	const sustain = proportions.sustain ?? 1;
+	const levels = {
+		attack: 1,
+		decay: sustain,
+		delay: 0,
+		hold: 1,
+		release: 0
+	};
+	const share = 1 / (timeStages.filter((stage) => proportions[stage] !== void 0).length + 1);
+	const shape = {
+		curveHandles: [],
+		handles: [],
+		points: [{
+			x: 0,
+			y: 0
+		}],
+		share
+	};
+	let from = {
+		x: 0,
+		y: 0
+	};
+	for (const stage of timeStages) {
+		if (stage === "release") {
+			from = {
+				x: from.x + share,
+				y: sustain
+			};
+			shape.points.push(from);
+		}
+		const to = {
+			x: from.x + (proportions[stage] ?? 0) * share,
+			y: levels[stage]
+		};
+		const { curveHandle, points } = leg(from, to, curves[stage]);
+		shape.points.push(...points);
+		if (curveHandle) shape.curveHandles.push({
+			...curveHandle,
+			stage
+		});
+		if (isHandled(proportions, stage)) shape.handles.push({
+			...to,
+			stage
+		});
+		from = to;
+	}
+	return shape;
+}
+function adsrPath({ points }) {
+	const stroke = points.map(({ x, y }, index) => `${index === 0 ? "M" : "L"}${String(roundTo(x, 4))} ${String(roundTo(1 - y, 4))}`).join("");
+	const floor = {
+		from: roundTo(points[0]?.x ?? 0, 4),
+		to: roundTo(points.at(-1)?.x ?? 0, 4)
+	};
+	return {
+		fill: `${stroke}Z`,
+		floor,
+		stroke
+	};
+}
+
+//#endregion
+export { adsrPath, adsrShape, adsrStages, timeStages };

package/dist/default/lib/ballistics.js

@@ -0,0 +1,55 @@
+//#region src/lib/ballistics.ts
+const burstTimeConstants = -Math.log(1 - 10 ** (-2 / 20));
+function ppmRate({ burstMs, fallDecibels, fallSeconds }) {
+	return {
+		fallDecibelsPerSecond: fallDecibels / fallSeconds,
+		riseTimeConstantMs: burstMs / burstTimeConstants
+	};
+}
+const ballisticsRates = {
+	peak: {
+		fallDecibelsPerSecond: 20,
+		riseTimeConstantMs: 0
+	},
+	"ppm-1": ppmRate({
+		burstMs: 5,
+		fallDecibels: 20,
+		fallSeconds: 1.7
+	}),
+	"ppm-2": ppmRate({
+		burstMs: 10,
+		fallDecibels: 24,
+		fallSeconds: 2.8
+	})
+};
+const needleDamping = .8;
+const needleRadiansPerSecond = 13.5;
+const needleStepMs = 4;
+const needleSettleMs = 1e3;
+function fall(current, { fallDecibelsPerSecond, floor }, elapsedMs) {
+	return Math.max(floor, current - fallDecibelsPerSecond * elapsedMs / 1e3);
+}
+function rise(current, { target, timeConstantMs }, elapsedMs) {
+	if (timeConstantMs <= 0) return target;
+	return target + (current - target) * Math.exp(-elapsedMs / timeConstantMs);
+}
+function stepNeedle(needle, target, elapsedMs) {
+	const dueMs = Math.min(needle.carryMs + elapsedMs, needleSettleMs);
+	const steps = Math.floor(dueMs / needleStepMs);
+	const seconds = needleStepMs / 1e3;
+	let { position, velocity } = needle;
+	for (let step = 0; step < steps; step += 1) {
+		const pull = needleRadiansPerSecond ** 2 * (target - position);
+		const drag = 2 * needleDamping * needleRadiansPerSecond * velocity;
+		velocity += (pull - drag) * seconds;
+		position += velocity * seconds;
+	}
+	return {
+		carryMs: dueMs - steps * needleStepMs,
+		position,
+		velocity
+	};
+}
+
+//#endregion
+export { ballisticsRates, fall, rise, stepNeedle };