function knob({ value, min, max, step, sensitivity, size, title = "", color = "steelblue", automated = false } = {}) { const { sin, cos, PI } = Math; min = +min || 0; max = +max || 100; step = +step || 1; sensitivity = +sensitivity || 10; size = +size || 100; const alpha = (30 * PI) / 180; const beta = (330 * PI) / 180; const r = 0.6; const p1 = [cos(alpha) * r, sin(alpha) * r]; const p2 = [cos(beta) * r, sin(beta) * r]; const interpolateValue = interpolate(min, max); const interpolateAngle = interpolate(alpha, beta); const clampValue = clamp(min, max); const roundValue = round(step); const stepPrecision = precision(step); const parseValue = (v) => parseFloat(roundValue(clampValue(v)).toFixed(stepPrecision)); value = parseValue(isNaN(value) ? (min + max) / 2 : value); let t, phi, start, delta, _value = value; function mousedown(evt) { evt.preventDefault(); start = [evt.clientX, evt.clientY]; ui.style.cursor = "grabbing"; } function mousemove(evt) { if (!evt.buttons) start = null; if (!start) return; delta = start[1] - evt.clientY; start[1] -= delta; const offset = (delta * sensitivity) / width; _value = parseValue(interpolateValue(t + offset)); update(); } function mouseup(evt) { start = null; ui.style.cursor = "grab"; } function touchstart(evt) { evt.preventDefault(); } function doubleclick(evt) { _value = value; update(); } function update(raiseEvent = true) { t = interpolateValue.invert(_value); phi = interpolateAngle(t); pointer.transform.baseVal .getItem(0) .setRotate((phi * 180) / PI + 180, 0, 0); arc.setAttribute("d", `M ${cos(phi) * r} ${sin(phi) * r} A ${r} ${r} 0 ${+(phi >= PI + alpha)} 0 ${p1}`); val.textContent = _value; if (raiseEvent) ui.dispatchEvent(new CustomEvent("input", { bubbles: true })); } const ui = svg` `; const pointer = ui.querySelector(".pointer"); const arc = ui.querySelector(".arc .top"); const val = ui.querySelector(".value"); update(); if (!automated) { ui.style.cursor = "grab"; ui.addEventListener("pointerdown", mousedown); ui.addEventListener("dblclick", doubleclick); ui.addEventListener("touchstart", touchstart); document.addEventListener("pointermove", mousemove); document.addEventListener("pointerup", mouseup); invalidation.then(() => { ui.removeEventListener("pointerdown", mousedown); ui.removeEventListener("dblclick", doubleclick); ui.removeEventListener("touchstart", touchstart); document.removeEventListener("pointermove", mousemove); document.removeEventListener("pointerup", mouseup); }); } function setValue(v) { _value = parseValue(v); update(false); } ui.setValue = setValue; Object.defineProperty(ui, "value", { get: () => _value, set: setValue }); return ui; }