final refactor

Author: eye-wave

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-knobs",
 	"description": "Svelte component library for building customizable knob controls.",
-	"version": "1.0.0-beta.0",
+	"version": "1.0.0-beta.1",
 	"repository": {
 		"url": "https://github.com/eye-wave/svelte-knobs"
 	},
@@ -26,6 +26,10 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./params": {
+			"types": "./dist/params.d.ts",
+			"import": "./dist/params.js"
 		}
 	},
 	"sideEffects": [

src/lib/Draggable.svelte

@@ -1,4 +1,8 @@
 <script lang="ts" module>
+	import { Spring, type Tween } from 'svelte/motion';
+
+	type Motion<T> = Spring<T> | Tween<T>;
+
 	let shield: HTMLDivElement | null = null;
 
 	export type DraggableProps = {
@@ -7,11 +11,16 @@
 		 */
 		value?: number;
 
+		/**
+		 * Readonly smoothed value
+		 */
+		valueSmoothed?: number;
+
 		weight?: number;
 
 		/**
 		 * The increment or decrement value for keyboard interactions.
-		 * Defaults to `0.1` if not specified.
+		 * Defaults to `0.05` if not specified.
 		 */
 		step?: number;
 
@@ -22,6 +31,14 @@
 
 		snapThreshold?: number;
 
+		invertWheel?: boolean;
+
+		/**
+		 * "svelte/motion" class instance used to animate the knob.
+		 * Default motion in Spring with stiffness of 0.3
+		 */
+		motion?: Motion<number>;
+
 		/**
 		 * Initial value for the component.
 		 */
@@ -45,19 +62,24 @@
 
 	let {
 		value = $bindable(0.5),
+		valueSmoothed = $bindable(0.5),
 		children,
 		disabled: isDisabled = false,
 		defaultValue,
-		step = 0.1,
-		snapPoints,
+		invertWheel = false,
+		step = 0.05,
+		snapPoints: _snapPoints,
+		motion = new Spring(0.5, { stiffness: 0.3 }),
 		snapThreshold = 0.08,
 		weight = 200,
 		...divProps
 	}: Props = $props();
 
 	type SvelteEvent = { currentTarget: EventTarget & HTMLDivElement };
 
-	let isDragging = $state(false);
+	let snapPoints = $derived(_snapPoints?.toSorted((a, b) => a - b));
+
+	let isDragging = false;
 	let isShieldOn = $state(false);
 	let startX: number;
 	let startY: number;
@@ -82,8 +104,9 @@
 			const touch = event.touches?.[0];
 			if (!touch) return;
 			const clientY = touch.clientY;
+			const clientX = touch.clientX;
 			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-			handler({ clientY } as MouseEvent & SvelteEvent) && event.preventDefault();
+			handler({ clientY, clientX } as MouseEvent & SvelteEvent) && event.preventDefault();
 		};
 	}
 
@@ -131,7 +154,8 @@
 
 		if (isDisabled) return;
 		e.preventDefault();
-		const delta = e.deltaY > 0 ? -1.0 : 1.0;
+
+		const delta = (e.deltaY > 0 ? 1.0 : -1.0) * (invertWheel ? -1.0 : 1.0);
 
 		value = clamp(snap(value + delta * step, snapPoints));
 	}
@@ -158,7 +182,19 @@
 
 		if (isPointingLeft || isPointingRight) e.preventDefault();
 
-		value += +isPointingRight * step - +isPointingLeft * step;
+		if (!e.altKey && snapPoints) {
+			let next = snapPoints.findIndex((n) => n >= value);
+
+			next += +isPointingRight;
+			next -= +isPointingLeft;
+
+			next = clamp(next, 0, snapPoints.length - 1);
+
+			value = snapPoints[next];
+		} else {
+			value += +isPointingRight * step - +isPointingLeft * step;
+		}
+
 		value = clamp(value);
 	}
 
@@ -186,11 +222,20 @@
 			document.body.style.userSelect = '';
 		}
 	});
+
+	$effect(() => {
+		motion.set(value);
+	});
+
+	$effect(() => {
+		valueSmoothed = motion.current;
+	});
 </script>
 
 <svelte:window onmousemove={handleMouseMove} onmouseup={handleMouseUp} ontouchend={handleMouseUp} />
 
 <div
+	aria-disabled={isDisabled}
 	class={divProps.class}
 	style={divProps.style}
 	role="slider"
@@ -209,5 +254,10 @@
 <style>
 	div {
 		width: fit-content;
+		cursor: grab;
+	}
+
+	div[aria-disabled='true'] {
+		cursor: auto;
 	}
 </style>

src/lib/ImageKnob.svelte

@@ -1,8 +1,5 @@
 <script lang="ts" module>
 	import type { DraggableProps } from './Draggable.svelte';
-	import { Spring, type Tween } from 'svelte/motion';
-
-	type Motion<T> = Spring<T> | Tween<T>;
 
 	export type ImageKnobProps = DraggableProps & {
 		/**
@@ -27,28 +24,22 @@
 		 * Default height is 80;
 		 */
 		height?: number;
-
-		/**
-		 * "svelte/motion" class instance used to animate the knob.
-		 * Default motion in Spring with stiffness of 0.2
-		 */
-		motion?: Motion<number>;
 	};
 </script>
 
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import Draggable from './Draggable.svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { onMount } from 'svelte';
 
 	type Props = SvelteHTMLElements['div'] & ImageKnobProps;
 	let {
-		value = $bindable(0),
+		value = $bindable(0.5),
+		valueSmoothed = $bindable(0.5),
 		width = 80,
 		height = 80,
 		numberOfFrames,
 		src,
-		motion = new Spring(0.0, { stiffness: 0.5 }),
 		...defaultProps
 	}: Props = $props();
 
@@ -65,15 +56,12 @@
 		};
 	});
 
-	let transform = $derived(Math.floor(motion.current * (numberOfFrames ?? 0)));
-
-	$effect(() => {
-		motion.set(value);
-	});
+	let transform = $derived(Math.floor(valueSmoothed * (numberOfFrames ?? 0)));
 </script>
 
 <Draggable
 	bind:value
+	bind:valueSmoothed
 	style="width:{width}px;height:{height}px;{defaultProps.style}"
 	{...defaultProps}
 >

src/lib/SvgKnob.svelte

@@ -1,8 +1,5 @@
 <script lang="ts" module>
 	import type { DraggableProps } from './Draggable.svelte';
-	import { Spring, type Tween } from 'svelte/motion';
-
-	type Motion<T> = Spring<T> | Tween<T>;
 
 	export type SvgKnobProps = DraggableProps & {
 		/**
@@ -17,12 +14,6 @@
 
 		pointerLength?: number;
 
-		/**
-		 * "svelte/motion" class instance used to animate the knob.
-		 * Default motion in Spring with stiffness of 0.5
-		 */
-		motion?: Motion<number>;
-
 		/**
 		 * Background color of the knob.
 		 * Default color is #333
@@ -50,20 +41,22 @@
 </script>
 
 <script lang="ts">
+	import { describeArc, polarToCartesian, valueToAngle } from './helpers/arc.js';
 	import Draggable from './Draggable.svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { describeArc, polarToCartesian, valueToAngle } from './helpers/arc.js';
 
 	type Props = SvelteHTMLElements['svg'] & SvgKnobProps;
 	let {
-		value = $bindable(0),
+		value = $bindable(0.5),
+		valueSmoothed = $bindable(0.5),
 		size = 80,
-		motion = new Spring(0.0, { stiffness: 0.5 }),
+		motion,
 		bgColor = '#333',
 		disabledColor = '#777',
 		minAngle = -135,
 		maxAngle = 135,
 		snapPointLength = 0.44,
+		invertWheel,
 		circleRadius: cr = 0.32,
 		arcRadius: ar = 0.4,
 		pointerLength = 0,
@@ -76,19 +69,23 @@
 		...svgProps
 	}: Props = $props();
 
-	let draggableProps = $derived({ step, defaultValue, snapPoints, snapThreshold, weight });
+	let draggableProps = $derived({
+		defaultValue,
+		invertWheel,
+		motion,
+		snapPoints,
+		snapThreshold,
+		step,
+		weight
+	});
 
 	let c = $derived(size / 2);
 	let arcRadius = $derived(size * ar);
 	let circleRadius = $derived(size * cr);
 	let snapRadius = $derived(size * snapPointLength);
-
-	$effect(() => {
-		motion.set(value);
-	});
 </script>
 
-<Draggable bind:value {...draggableProps} disabled={isDisabled}>
+<Draggable bind:value bind:valueSmoothed {...draggableProps} disabled={isDisabled}>
 	<svg
 		width="{size}px"
 		height="{size}px"
@@ -108,7 +105,7 @@
 		/>
 		<path
 			class="knob_line"
-			d={describeArc(c, c, arcRadius, motion.current, minAngle, maxAngle)}
+			d={describeArc(c, c, arcRadius, valueSmoothed, minAngle, maxAngle)}
 			stroke={isDisabled ? disabledColor : 'currentColor'}
 			fill="none"
 		/>
@@ -118,7 +115,7 @@
 		{#each snapPoints ?? [] as p}
 			{@const [x1, y1] = polarToCartesian(c, c, arcRadius, valueToAngle(p, minAngle, maxAngle))}
 			{@const [x2, y2] = polarToCartesian(c, c, snapRadius, valueToAngle(p, minAngle, maxAngle))}
-			{@const stroke = value >= p ? 'currentColor' : bgColor}
+			{@const stroke = valueSmoothed >= p ? 'currentColor' : bgColor}
 
 			<line class="knob_line" {x1} {y1} {x2} {y2} {stroke} />
 		{/each}
@@ -130,13 +127,13 @@
 		c,
 		c,
 		circleRadius * 0.8,
-		valueToAngle(motion.current, minAngle, maxAngle)
+		valueToAngle(valueSmoothed, minAngle, maxAngle)
 	)}
 	{@const [x2, y2] = polarToCartesian(
 		c,
 		c,
 		circleRadius * 0.8 - pointerLength * size * 0.52,
-		valueToAngle(motion.current, minAngle, maxAngle)
+		valueToAngle(valueSmoothed, minAngle, maxAngle)
 	)}
 	<line
 		class="knob_line"

src/lib/params.ts

@@ -1,3 +1,5 @@
+export type { Param } from './params/base.js';
+
 export * from './params/lin.js';
 export * from './params/log.js';
 export * from './params/bool.js';

src/lib/params/bool.ts

@@ -7,13 +7,11 @@ export class BoolParam extends Param<boolean> {
 
 	public readonly snapPoints = [0.0, 1.0];
 	public readonly snapThreshold = 0.5;
-	public readonly step = 1.0;
 
 	public get knobProps() {
 		return {
 			snapPoints: this.snapPoints,
-			snapThreshold: this.snapThreshold,
-			step: this.step
+			snapThreshold: this.snapThreshold
 		};
 	}
 

src/lib/params/enum.ts

@@ -15,16 +15,10 @@ export class EnumParam<T extends readonly string[]> extends Param<T[number]> {
 		return 1.0 / (this.#variants.length - 1.0);
 	}
 
-	public get step() {
-		const error = Math.pow(10, -this.#variants.length);
-		return this.snapThreshold + error;
-	}
-
 	public get knobProps() {
 		return {
 			snapPoints: this.snapPoints,
-			snapThreshold: this.snapThreshold,
-			step: this.step
+			snapThreshold: this.snapThreshold
 		};
 	}
 

src/lib/shield.module.css

@@ -3,4 +3,5 @@
 	inset: 0;
 	width: 100vw;
 	height: 100vh;
+	cursor: grab;
 }