feat: set default value on dblclick

Author: eye-wave

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-knobs",
 	"description": "Svelte component library for building customizable knob controls.",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"repository": {
 		"url": "https://github.com/eye-wave/svelte-knobs"
 	},

src/lib/Knob.svelte

@@ -12,6 +12,7 @@
 		onChange?: (value: number | string) => void;
 		param: FloatParam | EnumParam<readonly string[]>;
 		value: number | string;
+		defaultValue?: number | string;
 		stiffness?: number;
 		decimalDigits?: number;
 		snapValues?: Array<number>;
@@ -32,6 +33,7 @@
 		size = 80,
 		onChange,
 		value = $bindable(),
+		defaultValue,
 		param,
 		stiffness = 0.5,
 		decimalDigits = 0,
@@ -106,6 +108,17 @@
 		isDragging = false;
 	}
 
+	function handleDblClick() {
+		const val =
+			defaultValue ??
+			(param as FloatParam)?.range.min ??
+			(param as EnumParam<string[]>).variants?.[0];
+		if (val === undefined) return;
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		setValue(Math.max(0, Math.min(1, normalize(val as any, param as any))));
+	}
+
 	$effect(() => {
 		// this was easier in svelte 4 :/
 		window.addEventListener('touchmove', handleTouchMove, { passive: false });
@@ -226,6 +239,7 @@
 		stroke-width={lineWidth}
 		onmousedown={handleMouseDown}
 		ontouchstart={handleTouchStart}
+		ondblclick={handleDblClick}
 	>
 		<circle cx={center} cy={center} r={circleRadius} fill={bgColor}></circle>
 		{#if snapValues.length > 0 || param.type === 'enum-param'}

src/routes/examples/LogarithmicKnob.svelte

@@ -11,5 +11,5 @@
 </script>
 
 <Knob param={freqParam} bind:value={freqValue} label="Frequency" unit="hz" />
-<Knob param={gainParam} bind:value={gainValue} label="Gain" unit="dB" decimalDigits={1} />
+<Knob param={gainParam} bind:value={gainValue} label="Gain" unit="dB" decimalDigits={1} defaultValue={0} />
 <Knob param={qParam} bind:value={qValue} label="Q" unit="dB" decimalDigits={2} />