feat: v0.1.0

- added a option to disable <Knob />
- made log range work with 0 and negative numbers

Author: eye-wave

README.md

@@ -70,7 +70,7 @@ Set specific snap points and adjust snapping sensitivity using `snapThreshold`.
 import { createFloatParam, createRange } from 'svelte-knobs';
 
 const snapParam = createFloatParam(createRange('lin', 0, 2000));
-const snapPoints = Array.from({ length: 5 }, (_, i) => i * 500);
+const snapPoints = [0, 500, 1000, 1500, 2000];
 
 let snapValue = 0;
 ```
@@ -101,6 +101,14 @@ let fruitValue: Variant<typeof fruitParam> = '🍉';
 <Knob param={fruitParam} bind:value={fruitValue} label="Fruit" />
 ```
 
+#### Disabled Knob
+
+Disable knob interactivity
+
+```svelte
+<Knob param={basicParam} value={58} disabled />
+```
+
 ## License
 
 MIT License

package.json

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

src/lib/Knob.svelte

@@ -14,9 +14,13 @@
 	export let decimalDigits = 0;
 	export let snapValues: number[] = [];
 	export let snapThreshold = 0.1;
+	export let disabled = false;
 
 	export let arcColor = '#ae98db';
 	export let bgColor = '#444';
+	export let disabledColor = '#777';
+
+	$: arcColor2 = disabled ? disabledColor : arcColor;
 
 	$: if (param.type === 'enum-param') snapValues = [];
 
@@ -62,6 +66,7 @@
 	}
 
 	function handleMouseMove(event: MouseEvent) {
+		if (disabled) return;
 		if (!isDragging) return;
 		const deltaY = startY - event.clientY;
 		const deltaValue = deltaY / 200;
@@ -129,12 +134,14 @@
 	}
 
 	function drawSnapMarkers() {
-		if (snapValues.length === 0 || param.type !== 'float-param') return '';
+		if (param.type !== 'enum-param' && snapValues.length === 0) return null;
 
 		let paths = [];
 
-		for (let snapValue of snapValues) {
-			const normalizedSnapValue = normalize(snapValue, param);
+		const values = param.type === 'enum-param' ? param.variants : snapValues;
+		for (let snapValue of values) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const normalizedSnapValue = normalize(snapValue as any, param as any);
 			const angle = normalizedSnapValue * 270 - 135;
 			const [x1, y1] = polarToCartesian(center, center, arcRadius, angle);
 			const [x2, y2] = polarToCartesian(center, center, size * 0.46, angle);
@@ -151,8 +158,9 @@
 
 <svelte:window on:mousemove={handleMouseMove} on:mouseup={handleMouseUp} />
 
-<div class="container">
+<div class="container" style={$$props.style}>
 	<svg
+		class={$$props.class}
 		role="slider"
 		tabindex="0"
 		aria-valuenow={normalizedValue}
@@ -165,7 +173,7 @@
 		on:mousedown={handleMouseDown}
 	>
 		<circle cx={center} cy={center} r={circleRadius} fill={bgColor}></circle>
-		{#if snapValues.length > 0}
+		{#if snapValues.length > 0 || param.type === 'enum-param'}
 			<!-- Snap markers -->
 			<path d={drawSnapMarkers()} stroke={bgColor} />
 		{/if}
@@ -178,7 +186,7 @@
 		<path
 			d={describeArc(center, center, arcRadius, -135, $rotationDegrees)}
 			fill="none"
-			stroke={arcColor}
+			stroke={arcColor2}
 		/>
 		<!-- Knob indicator -->
 		<line

src/lib/params/float-param.ts

@@ -18,8 +18,10 @@ export function normalize(value: number, param: FloatParam): number {
 			return (value - range.min) / (range.max - range.min);
 		case 'log': {
 			const base = range.base ?? 10;
-			const logFunc = base === 10 ? Math.log10 : base === 2 ? Math.log2 : Math.log;
-			return (logFunc(value) - logFunc(range.min)) / (logFunc(range.max) - logFunc(range.min));
+			const min = log(range.min, base);
+			const max = log(range.max, base);
+
+			return (log(value, base) - min) / (max - min);
 		}
 		default:
 			throw new Error('Unsupported range type');
@@ -33,12 +35,31 @@ export function unnormalize(value: number, param: FloatParam): number {
 			return value * (range.max - range.min) + range.min;
 		case 'log': {
 			const base = range.base ?? 10;
-			const logFunc = base === 10 ? Math.log10 : base === 2 ? Math.log2 : Math.log;
-			const expFunc =
-				base === 10 ? Math.pow.bind(null, 10) : base === 2 ? Math.pow.bind(null, 2) : Math.exp;
-			return expFunc(value * (logFunc(range.max) - logFunc(range.min)) + logFunc(range.min));
+			const min = log(range.min, base);
+			const max = log(range.max, base);
+
+			return exp(value * (max - min) + min, base);
 		}
 		default:
 			throw new Error('Unsupported range type');
 	}
 }
+
+function log(value: number, base = 10): number {
+	if (value === 0) return 0;
+
+	const x = value < 0 ? -value : value;
+	const sign = Math.sign(value);
+
+	if (base === 10) return sign * Math.log10(x);
+	if (base === 2) return sign * Math.log2(x);
+	if (base === Math.E) return sign * Math.log(x);
+
+	return sign * (Math.log(x) / Math.log(base));
+}
+
+function exp(value: number, base = 10): number {
+	const x = value < 0 ? -value : value;
+
+	return Math.pow(base, x) * Math.sign(value);
+}

src/lib/params/range.ts

@@ -4,7 +4,7 @@ type BaseRange = {
 };
 
 export type LinearRange = { type: 'lin' } & BaseRange;
-export type LogRange = { type: 'log'; base?: number } & BaseRange;
+export type LogRange = { type: 'log'; base: number } & BaseRange;
 
 export type Range = LinearRange | LogRange;
 export type RangeType = Range['type'];
@@ -16,7 +16,7 @@ export function createRange(type: RangeType, min: number, max: number, a?: numbe
 		case 'lin':
 			return { type: 'lin', min, max };
 		case 'log':
-			return { type: 'log', min, max, base: a };
+			return { type: 'log', min, max, base: a ?? 10 };
 		default:
 			throw TypeError(`RangeType: "${type}" does not exist.`);
 	}

src/routes/+page.svelte

@@ -10,7 +10,8 @@
 	} from '$lib/index.js';
 
 	const basicParam = createFloatParam(createRange('lin', 0, 100));
-	const logParam = createFloatParam(createRange('log', 20, 20_000));
+	const freqParam = createFloatParam(createRange('log', 20, 20_000));
+	const gainParam = createFloatParam(createRange('log', -30, 30, Math.E));
 	const smoothParam = createFloatParam(createRange('lin', 0, 100));
 	const snapParam = createFloatParam(createRange('lin', 0, 2000));
 	const enumParam = createEnumParam(['🍍', '🍉', '🍌', '🍎', '🥭', '🍇', '🥝', '🍋'] as const);
@@ -20,7 +21,8 @@
 	const snapPoints = Array.from({ length: 5 }, (_, i) => i * 500);
 
 	let basicValue = 0;
-	let logValue = 20;
+	let freqValue = 20;
+	let gainValue = 20;
 	let smoothValue = 0;
 	let snapValue = 0;
 	let enumValue: Variant<typeof enumParam> = '🍎';
@@ -40,7 +42,8 @@
 
 	<div class="example">
 		<h2>Logarithmic</h2>
-		<Knob param={logParam} bind:value={logValue} label="Frequency" unit="hz" />
+		<Knob param={freqParam} bind:value={freqValue} label="Frequency" unit="hz" />
+		<Knob param={gainParam} bind:value={gainValue} label="Gain" unit="dB" />
 
 		<p>A knob with logarithmic scaling (default base is 10).</p>
 	</div>
@@ -90,8 +93,9 @@
 		<Knob param={oscParam} bind:value={oscValue} label="Oscillator Type" />
 
 		<p>
-			An example of how <code>EnumParam</code> works. Due to the way TypeScript functions, we need
-			to use <code>readonly string[]</code> instead of <code>Enum</code>s.
+			An example of how <code>EnumParam</code> works: due to the way TypeScript functions, we need
+			to use <code>readonly string[]</code> instead of <code>Enum</code>s. Since enums are a small
+			subset of some strings, snap markers are added automatically for clarity.
 		</p>
 		<p>
 			Remember to add <code>as const</code> when creating an <code>EnumParam</code> to improve editor
@@ -100,6 +104,37 @@
 		<p>For instance:</p>
 		<code>const fruitParam = createEnumParam(['🍍', '🍉', '🍌', '🥝', '🍋'] as const);</code>
 	</div>
+
+	<div class="example">
+		<h2>Disabled</h2>
+
+		<Knob param={basicParam} value={58} disabled />
+
+		<p>
+			Just like <code>{'<button>'}</code> and other interactive HTML elements,
+			<code>{'<Knob />'}</code> can also be disabled.
+		</p>
+	</div>
+
+	<div class="example">
+		<h2>Colors</h2>
+
+		<Knob param={basicParam} value={24} label="Svelte theme" arcColor="#ff3e00" />
+		<Knob
+			param={basicParam}
+			value={48}
+			label="Light theme"
+			arcColor="#4292d3"
+			bgColor="#eef"
+			style="color:#000"
+		/>
+		<Knob param={basicParam} value={64} label="Disabled color" disabledColor="#aaa" disabled />
+
+		<p>
+			Of course, <code>{'<Knob />'}</code> colors can be customized to look however you want.
+			<b>Disclaimer</b>: Font and thumb colors are based on the current font color.
+		</p>
+	</div>
 </div>
 
 <div class="code">