@xsynaptic/sonic-ui 0.8.0 → 0.10.0

package/README.md

@@ -23,8 +23,6 @@ import '@xsynaptic/sonic-ui/define';
 <sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
 ```
 
-A `-size` token takes any CSS length and scales its control as one piece; a `-length` token also takes a percentage of the parent.
-
 A display takes its signal as data: `spectrum.analyser = node`, or `spectrum.push(frame)`.
 
 Under a hydrating framework, register the definitions once hydration is done (in React, from an effect); a control owns one child of its host and uses only the children it documents.

package/dist/default/elements/dial.js

@@ -1,4 +1,5 @@
 import { requireChild, template } from "../lib/render.js";
+import { createModulation } from "./modulation.js";
 import { SonicValueElement } from "./value-element.js";
 import { bindScale } from "./scale.js";
 
@@ -43,12 +44,15 @@ var SonicDial = class extends SonicValueElement {
 		this.reflect("modulation", amount);
 	}
 	get modulationValue() {
-		return this.readModulationValue();
+		return this.#modulation.value();
 	}
 	set modulationValue(value) {
-		this.writeModulationValue(this.#dial, "dial", value);
+		this.#modulation.write(value, this.isBound() ? this.mapping() : void 0);
 	}
 	#dial = renderDial();
+	#modulation = createModulation(this.#dial, "dial", (isModulated) => {
+		this.toggleState("modulated", isModulated);
+	});
 	connectedCallback() {
 		this.upgradeProperties("endless", "modulationValue", "modulation");
 		super.connectedCallback();
@@ -67,7 +71,12 @@ var SonicDial = class extends SonicValueElement {
 		}));
 	}
 	draw() {
-		this.writeProportions(this.#dial, "dial", this.endless ? 0 : this.modulation);
+		this.#modulation.draw({
+			mapping: this.mapping(),
+			modulation: this.endless ? 0 : this.modulation,
+			origin: this.originValue(),
+			value: this.value
+		});
 	}
 	focusTarget() {
 		return this.#dial;

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

@@ -1,10 +1,12 @@
 import { SonicElement } from "./sonic-element.js";
 import { bindSurface } from "../lib/canvas-surface.js";
+import { bindFill } from "../lib/fill-watch.js";
 
 //#region src/elements/display-element.ts
 var SonicDisplayElement = class extends SonicElement {
 	static observedAttributes = [
 		...SonicElement.observedAttributes,
+		"fill",
 		"max",
 		"min"
 	];
@@ -15,6 +17,12 @@ var SonicDisplayElement = class extends SonicElement {
 		this.#analyser = node ?? void 0;
 		this.#surface?.requestFrame();
 	}
+	get fill() {
+		return this.hasAttribute("fill");
+	}
+	set fill(isFilling) {
+		this.reflect("fill", isFilling);
+	}
 	get max() {
 		return this.numberAttribute("max", 0);
 	}
@@ -30,11 +38,13 @@ var SonicDisplayElement = class extends SonicElement {
 	#analyser;
 	#buffer = /* @__PURE__ */ new Float32Array(0);
 	#surface;
-	attributeChangedCallback() {
+	#syncFill;
+	attributeChangedCallback(name) {
+		if (name === "fill") this.#syncFill?.(this.fill);
 		this.#surface?.invalidate();
 	}
 	connectedCallback() {
-		this.upgradeProperties("analyser", "max", "min");
+		this.upgradeProperties("analyser", "fill", "max", "min");
 		super.connectedCallback();
 	}
 	push(frame) {
@@ -57,6 +67,8 @@ var SonicDisplayElement = class extends SonicElement {
 			signal
 		});
 		this.checkStyles(control, this.sheet);
+		this.#syncFill = bindFill(control, this.sizeProperty, signal);
+		this.#syncFill(this.fill);
 	}
 	surface() {
 		return this.#surface;

package/dist/default/elements/envelope.js

@@ -2,8 +2,8 @@ import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicElement } from "./sonic-element.js";
 import { requireChild, template } from "../lib/render.js";
 import { bindDrag } from "../lib/pointer-drag.js";
-import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
+import { ReadoutClaim, revealDelay } from "./readout-claim.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
 import { SonicValueElement, linkValue } from "./value-element.js";
 import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
@@ -269,7 +269,7 @@ var SonicEnvelope = class extends SonicElement {
 		const pressed = this.#pressed(event);
 		if (!pressed || pressed.drives.length === 0) return void 0;
 		const { drives, isFlipped, part } = pressed;
-		this.#claim.press(true);
+		this.#claim.press(true, revealDelay(this.#envelope));
 		this.#held = part;
 		this.#drawBracket();
 		const box = this.#graph.getBoundingClientRect();

package/dist/default/elements/modulation.js

@@ -0,0 +1,45 @@
+import { toNumber } from "../lib/math.js";
+
+//#region src/elements/modulation.ts
+function createModulation(control, prefix, toggle) {
+	const { style } = control;
+	let isModulated = false;
+	let modulationValue;
+	const writeProportion = (mapping) => {
+		const shown = mapping.isWrapping ? void 0 : modulationValue;
+		const isShown = shown !== void 0;
+		if (isShown !== isModulated) {
+			isModulated = isShown;
+			toggle(isShown);
+		}
+		if (shown === void 0) {
+			style.removeProperty(`--_sonic-${prefix}-modulation-value`);
+			return;
+		}
+		style.setProperty(`--_sonic-${prefix}-modulation-value`, String(mapping.proportionOf(shown)));
+	};
+	return {
+		draw: ({ mapping, modulation, origin, value }) => {
+			const at = mapping.proportionOf(value);
+			const reach = mapping.proportionOf(value + modulation);
+			const { positionCount } = mapping;
+			style.setProperty(`--_sonic-${prefix}-value`, String(at));
+			style.setProperty(`--_sonic-${prefix}-origin`, String(mapping.proportionOf(origin)));
+			style.setProperty(`--_sonic-${prefix}-modulation-from`, String(Math.min(at, reach)));
+			style.setProperty(`--_sonic-${prefix}-modulation-to`, String(Math.max(at, reach)));
+			if (positionCount === void 0) style.removeProperty(`--_sonic-${prefix}-position-count`);
+			else style.setProperty(`--_sonic-${prefix}-position-count`, String(positionCount));
+			writeProportion(mapping);
+		},
+		value: () => modulationValue,
+		write: (next, mapping) => {
+			const value = next === void 0 || next === null ? void 0 : toNumber(next);
+			if (value !== void 0 && !Number.isFinite(value)) return;
+			modulationValue = value;
+			if (mapping) writeProportion(mapping);
+		}
+	};
+}
+
+//#endregion
+export { createModulation };

package/dist/default/elements/readout-claim.js

@@ -1,6 +1,11 @@
+import { readMsProperty } from "../lib/read-ms-property.js";
+
 //#region src/elements/readout-claim.ts
 const keyRevealMs = 1e3;
 const revealMs = 250;
+function revealDelay(control) {
+	return Math.max(0, readMsProperty(getComputedStyle(control), "--_sonic-reveal-delay", revealMs));
+}
 var ReadoutClaim = class {
 	get isRevealed() {
 		return this.#isDragging || this.#keyTimer !== void 0;
@@ -24,7 +29,7 @@ var ReadoutClaim = class {
 		this.#keyTimer = void 0;
 		return wasTimed;
 	}
-	press(isDown) {
+	press(isDown, delayMs = revealMs) {
 		this.conceal("drag");
 		if (!isDown) {
 			this.#onLapse();
@@ -33,7 +38,7 @@ var ReadoutClaim = class {
 		this.#holdTimer = setTimeout(() => {
 			this.reveal("drag");
 			this.#onLapse();
-		}, 250);
+		}, delayMs);
 	}
 	reveal(by) {
 		if (by === "drag") {
@@ -49,4 +54,4 @@ var ReadoutClaim = class {
 };
 
 //#endregion
-export { ReadoutClaim };
+export { ReadoutClaim, revealDelay };

package/dist/default/elements/slider.js

@@ -1,8 +1,8 @@
 import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
+import { createModulation } from "./modulation.js";
 import { SonicValueElement } from "./value-element.js";
 import { bindScale } from "./scale.js";
-import { bindHoverPreview } from "../lib/hover-preview.js";
 import { sortedRegions } from "../lib/time-regions.js";
 
 //#region src/elements/slider.ts
@@ -59,10 +59,10 @@ var SonicSlider = class extends SonicValueElement {
 		this.reflect("modulation", amount);
 	}
 	get modulationValue() {
-		return this.readModulationValue();
+		return this.#modulation.value();
 	}
 	set modulationValue(value) {
-		this.writeModulationValue(this.#slider, "slider", value);
+		this.#modulation.write(value, this.isBound() ? this.mapping() : void 0);
 	}
 	get orientation() {
 		return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
@@ -83,8 +83,10 @@ var SonicSlider = class extends SonicValueElement {
 		this.reflect("spring", isSpring);
 	}
 	#buffered = [];
-	#hover;
 	#slider = renderSlider();
+	#modulation = createModulation(this.#slider, "slider", (isModulated) => {
+		this.toggleState("modulated", isModulated);
+	});
 	connectedCallback() {
 		this.upgradeProperties("buffered", "groovePress", "modulationValue", "modulation", "orientation", "scrub", "spring");
 		super.connectedCallback();
@@ -99,14 +101,9 @@ var SonicSlider = class extends SonicValueElement {
 		slider.addEventListener("transitionend", (event) => {
 			if (event.propertyName === "--_sonic-slider-value") this.toggleState("springing", false);
 		}, { signal });
-		this.#hover = bindHoverPreview(slider, {
-			canShow: () => this.scrub && this.readout && this.orientation === "horizontal",
-			dismiss: () => {
-				this.render();
-			},
-			isTaken: () => this.isEditing() || this.isRevealed(),
-			show: () => {
-				this.renderReadout();
+		this.bindHover(slider, signal, {
+			canShow: () => this.scrub && this.orientation === "horizontal",
+			place: () => {
 				this.#placeReadout(slider);
 			},
 			valueAt: (event) => {
@@ -115,7 +112,7 @@ var SonicSlider = class extends SonicValueElement {
 				const mapping = this.mapping();
 				return mapping.snap(mapping.valueAt(at));
 			}
-		}, signal);
+		});
 		this.render();
 		this.checkStyles(slider, "slider.css");
 		this.bindGestures(slider, signal, (event) => {
@@ -130,8 +127,12 @@ var SonicSlider = class extends SonicValueElement {
 		return this.orientation;
 	}
 	draw() {
-		if (this.isEditing() || this.isRevealed()) this.#hover?.clear();
-		this.writeProportions(this.#slider, "slider", this.modulation);
+		this.#modulation.draw({
+			mapping: this.mapping(),
+			modulation: this.modulation,
+			origin: this.originValue(),
+			value: this.value
+		});
 		this.#renderBuffered(this.#slider);
 		this.#renderScrub(this.#slider);
 		this.#placeReadout(this.#slider);
@@ -146,9 +147,6 @@ var SonicSlider = class extends SonicValueElement {
 	holdChanged() {
 		if (this.scrub) this.render();
 	}
-	previewValue() {
-		return this.#hover?.value();
-	}
 	scrubsKeyRepeat() {
 		return this.scrub;
 	}

package/dist/default/elements/spectrum.js

@@ -119,6 +119,7 @@ var SonicSpectrum = class extends SonicDisplayElement {
 	colours = colours;
 	numbers = numbers;
 	sheet = "spectrum.css";
+	sizeProperty = "--_sonic-spectrum-size";
 	#columns;
 	#isSettled = true;
 	#lastFrameMs;