@kidlib/web-audio 0.1.5 → 0.1.6

package/dist/components.d.ts

@@ -31,6 +31,7 @@ export declare class KnobElement extends HTMLElement {
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private injectGlobalStyles;
     private updateConfigFromAttributes;
+    private updateAccessibility;
     private updateDimensions;
     private updateColorFromAttribute;
     private render;
@@ -39,10 +40,12 @@ export declare class KnobElement extends HTMLElement {
     private dragHandlers?;
     private lastClickTime;
     private readonly DOUBLE_CLICK_THRESHOLD;
+    private handleKeyDown;
     private createDraggable;
     private updateBorder;
     private dispatchChangeEvent;
     setValue(value: number): void;
+    private updateValue;
     /**
      * Sets the knob value using a normalized 0-1 input, automatically handling
      * the knob's range and curve transformation.

package/dist/components.js

@@ -46,7 +46,7 @@ var e = class e extends HTMLElement {
 		super();
 	}
 	connectedCallback() {
-		this.injectGlobalStyles(), this.createUtilityFunctions(), this.render(), this.updateColorFromAttribute(), this.setValue(this.config.defaultValue ?? this.config.minValue), this.createDraggable();
+		this.injectGlobalStyles(), this.createUtilityFunctions(), this.render(), this.updateColorFromAttribute(), this.updateAccessibility(), this.setValue(this.config.defaultValue ?? this.config.minValue), this.createDraggable(), this.addEventListener("keydown", this.handleKeyDown);
 	}
 	disconnectedCallback() {
 		this.cleanup();
@@ -74,7 +74,7 @@ var e = class e extends HTMLElement {
 	injectGlobalStyles() {
 		if (e.stylesInjected) return;
 		let t = document.createElement("style");
-		t.id = "knob-element-styles", t.textContent = "\n      knob-element {\n        display: block;\n        box-sizing: border-box;\n        --knob-size: 120px;\n        --knob-stroke: rgb(234, 234, 234);\n\n        width: var(--knob-size, 120px); \n        height: var(--knob-size, 120px);\n\n        touch-action: none; /* Prevents browser touch gestures */\n        user-select: none; /* Prevents text selection during drag */\n        border-radius: 50%;\n        cursor: grab;\n      }\n      \n      knob-element[disabled] {\n        opacity: 0.5;\n        pointer-events: none; \n      }\n    \n      knob-element:active {\n        cursor: grabbing;\n      }\n    ", document.head.appendChild(t), e.stylesInjected = !0;
+		t.id = "knob-element-styles", t.textContent = "\n      knob-element {\n        display: block;\n        box-sizing: border-box;\n        --knob-size: 120px;\n        --knob-stroke: rgb(234, 234, 234);\n\n        width: var(--knob-size, 120px); \n        height: var(--knob-size, 120px);\n\n        touch-action: none; /* Prevents browser touch gestures */\n        user-select: none; /* Prevents text selection during drag */\n        border-radius: 50%;\n        cursor: grab;\n      }\n      \n      knob-element[disabled] {\n        opacity: 0.5;\n        pointer-events: none; \n      }\n    \n      knob-element:active {\n        cursor: grabbing;\n      }\n\n      knob-element:focus-visible {\n        outline: 1px solid rgb(255 255 255 / 45%);\n        outline-offset: 4px;\n      }\n    ", document.head.appendChild(t), e.stylesInjected = !0;
 	}
 	updateConfigFromAttributes() {
 		let e = (e, t) => {
@@ -105,7 +105,10 @@ var e = class e extends HTMLElement {
 			allowedValues: r ? [...r].sort((e, t) => e - t) : void 0,
 			snapThresholds: n("snap-thresholds"),
 			disabled: this.hasAttribute("disabled")
-		}, this.updateDimensions();
+		}, this.updateDimensions(), this.updateAccessibility();
+	}
+	updateAccessibility() {
+		this.setAttribute("role", "slider"), this.setAttribute("aria-valuemin", String(this.config.minValue)), this.setAttribute("aria-valuemax", String(this.config.maxValue)), this.setAttribute("aria-valuenow", String(this.currentValue)), this.setAttribute("aria-disabled", String(!!this.config.disabled)), this.tabIndex = this.config.disabled ? -1 : 0;
 	}
 	updateDimensions() {
 		let e = this.getAttribute("width"), t = this.getAttribute("height");
@@ -122,7 +125,7 @@ var e = class e extends HTMLElement {
 		this.innerHTML = "\n      <svg class=\"ac-knob\" width=\"100%\" height=\"100%\" viewBox=\"0 0 100 100\">\n          <path class=\"knob-path\" \n                fill=\"none\" \n                stroke=\"var(--knob-stroke)\" \n                stroke-width=\"5\" \n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M50,50 L50,2\"\n                />\n      </svg>\n  ", this.pathElement = this.querySelector(".knob-path");
 	}
 	cleanup() {
-		this.dragHandlers && (this.removeEventListener("mousedown", this.dragHandlers.start), this.removeEventListener("touchstart", this.dragHandlers.start), document.removeEventListener("mousemove", this.dragHandlers.move), document.removeEventListener("mouseup", this.dragHandlers.end), document.removeEventListener("touchmove", this.dragHandlers.move), document.removeEventListener("touchend", this.dragHandlers.end));
+		this.removeEventListener("keydown", this.handleKeyDown), this.dragHandlers && (this.removeEventListener("mousedown", this.dragHandlers.start), this.removeEventListener("touchstart", this.dragHandlers.start), document.removeEventListener("mousemove", this.dragHandlers.move), document.removeEventListener("mouseup", this.dragHandlers.end), document.removeEventListener("touchmove", this.dragHandlers.move), document.removeEventListener("touchend", this.dragHandlers.end));
 	}
 	createUtilityFunctions() {
 		let t = this.config.curve || 1;
@@ -148,39 +151,56 @@ var e = class e extends HTMLElement {
 	dragHandlers;
 	lastClickTime = 0;
 	DOUBLE_CLICK_THRESHOLD = 300;
+	handleKeyDown = (e) => {
+		if (this.config.disabled) return;
+		let t = e.key === "ArrowUp" || e.key === "ArrowRight" ? 1 : e.key === "ArrowDown" || e.key === "ArrowLeft" ? -1 : 0, n;
+		if (e.key === "Home") n = this.config.minValue;
+		else if (e.key === "End") n = this.config.maxValue;
+		else if (t && this.config.allowedValues?.length) {
+			let e = this.config.allowedValues;
+			n = t > 0 ? e.find((e) => e > this.currentValue) ?? e[e.length - 1] : [...e].reverse().find((e) => e < this.currentValue) ?? e[0];
+		} else if (t) {
+			let e = this.config.maxValue - this.config.minValue, r = this.hasAttribute("snap-increment") && this.config.snapIncrement > 0, i = r ? this.config.snapIncrement : e * .01, a = this.currentValue + t * i;
+			n = r ? this.applySnapping(a) : a;
+		} else return;
+		e.preventDefault(), e.stopPropagation(), this.updateValue(n, "user");
+	};
 	createDraggable() {
-		let t = "pointerLockElement" in document && "requestPointerLock" in HTMLElement.prototype, n = !1, r = 0, i = 0, a = 0, o = !1, s = (e) => {
-			r = e.clientY, o = document.pointerLockElement === this, !(!t || document.pointerLockElement) && this.requestPointerLock().then(() => {
-				o = document.pointerLockElement === this;
+		let t = "pointerLockElement" in document && "requestPointerLock" in HTMLElement.prototype, n = !1, r = 0, i = 0, a = 0, o = 0, s = !1, c = !1, l = (e) => {
+			r = e.clientY, i = r, s = document.pointerLockElement === this, !(!t || document.pointerLockElement) && this.requestPointerLock().then(() => {
+				s = document.pointerLockElement === this;
 			}, () => {
-				o = !1;
+				s = !1;
 			});
-		}, c = (e) => {
+		}, u = (e) => {
 			if (this.config.disabled) return;
-			let t = Date.now(), c = t - this.lastClickTime;
-			if (c < this.DOUBLE_CLICK_THRESHOLD && c > 0) {
-				this.resetToDefault();
+			let t = Date.now(), u = t - this.lastClickTime;
+			if (u < this.DOUBLE_CLICK_THRESHOLD && u > 0) {
+				this.updateValue(this.config.defaultValue, "user");
 				return;
 			}
-			this.lastClickTime = t, n = !0, i = this.currentRotation, a = 0, "touches" in e ? (r = e.touches[0].clientY, o = !1) : s(e);
-		}, l = (t) => {
+			this.lastClickTime = t, n = !0, a = this.currentRotation, o = 0, c = "shiftKey" in e && e.shiftKey, "touches" in e ? (r = e.touches[0].clientY, i = r, s = !1) : l(e);
+		}, d = (t) => {
 			if (!n) return;
-			let s;
-			if (o && document.pointerLockElement) a += t.movementY, s = -a * 2;
-			else {
-				let e = "touches" in t ? t.touches[0].clientY : t.clientY;
-				s = (r - e) * 2;
+			if (this.config.disabled) {
+				f();
+				return;
 			}
-			let c = i + s, l = e.clamp(c, this.config.minRotation, this.config.maxRotation), u = this.rotationToValue(l), d = this.applySnapping(u);
-			this.currentValue = d, this.currentRotation = d === u ? l : this.valueToRotation(d), this.updateBorder(), this.dispatchChangeEvent("user"), t.preventDefault();
-		}, u = () => {
-			n = !1, o && document.pointerLockElement && document.exitPointerLock(), o = !1;
+			let l = "touches" in t ? t.touches[0].clientY : t.clientY, u = "shiftKey" in t && t.shiftKey;
+			u !== c && (c = u, a = this.currentRotation, r = i, o = 0);
+			let d, p = c ? .2 : 2;
+			s && document.pointerLockElement ? (o += t.movementY, d = -o * p) : d = (r - l) * p, i = l;
+			let m = a + d, h = e.clamp(m, this.config.minRotation, this.config.maxRotation), g = this.rotationToValue(h), _ = this.applySnapping(g);
+			this.currentValue = _, this.setAttribute("aria-valuenow", String(this.currentValue)), this.currentRotation = _ === g ? h : this.valueToRotation(_), this.updateBorder(), this.dispatchChangeEvent("user"), t.preventDefault();
 		};
+		function f() {
+			n = !1, s && document.pointerLockElement && document.exitPointerLock(), s = !1;
+		}
 		this.dragHandlers = {
-			start: c,
-			move: l,
-			end: u
-		}, this.addEventListener("mousedown", c), this.addEventListener("touchstart", c, { passive: !1 }), document.addEventListener("mousemove", l), document.addEventListener("mouseup", u), document.addEventListener("touchmove", l, { passive: !1 }), document.addEventListener("touchend", u);
+			start: u,
+			move: d,
+			end: f
+		}, this.addEventListener("mousedown", u), this.addEventListener("touchstart", u, { passive: !1 }), document.addEventListener("mousemove", d), document.addEventListener("mouseup", f), document.addEventListener("touchmove", d, { passive: !1 }), document.addEventListener("touchend", f);
 	}
 	updateBorder() {
 		if (this.pathElement) {
@@ -202,8 +222,11 @@ var e = class e extends HTMLElement {
 		});
 		this.dispatchEvent(r);
 	}
-	setValue(t) {
-		!this.valueToRotation || !this.pathElement || (this.currentValue = e.clamp(t, this.config.minValue, this.config.maxValue), this.currentRotation = this.valueToRotation(this.currentValue), this.updateBorder(), this.dispatchChangeEvent());
+	setValue(e) {
+		this.updateValue(e, "programmatic");
+	}
+	updateValue(t, n) {
+		!this.valueToRotation || !this.pathElement || (this.currentValue = e.clamp(t, this.config.minValue, this.config.maxValue), this.currentRotation = this.valueToRotation(this.currentValue), this.updateBorder(), this.setAttribute("aria-valuenow", String(this.currentValue)), this.dispatchChangeEvent(n));
 	}
 	setValueNormalized(e) {
 		let { minRotation: t, maxRotation: n } = this.config, r = t + Math.max(0, Math.min(1, e)) * (n - t), i = this.rotationToValue(r);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kidlib/web-audio",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "High-level Web Audio primitives for musical instruments and tools.",
   "license": "MIT",
   "repository": {