final refactor 2

Author: eye-wave

src/lib/Draggable.svelte

@@ -77,7 +77,16 @@
 
 	type SvelteEvent = { currentTarget: EventTarget & HTMLDivElement };
 
-	let snapPoints = $derived(_snapPoints?.toSorted((a, b) => a - b));
+	// Sort snap points and add 0 and 1 to beginning and end of the list
+	let snapPoints = $derived.by(() => {
+		if (_snapPoints === undefined) return;
+
+		const sorted = _snapPoints.filter((n) => n >= 0.0 && n <= 1.0).toSorted((a, b) => a - b);
+		if (sorted[0] !== 0.0) sorted.unshift(0.0);
+		if (sorted[sorted.length - 1] !== 1.0) sorted.push(1.0);
+
+		return sorted;
+	});
 
 	let isDragging = false;
 	let isShieldOn = $state(false);

src/lib/params/lin.ts

@@ -1,13 +1,11 @@
 import { Param } from './base.js';
 
 export class LinearParam extends Param<number> {
-	public min = 0.0;
-	public max = 1.0;
-
-	constructor(min?: number, max?: number) {
+	constructor(
+		public min = 0.0,
+		public max = 1.0
+	) {
 		super();
-		if (min) this.min = min;
-		if (max) this.max = max;
 	}
 
 	public normalize(value: number): number {

src/routes/+page.svelte

@@ -46,13 +46,32 @@
 		<CopyPaste>%import('./examples/ParamKnob.svelte')%</CopyPaste>
 	</div>
 
+	<div class="example">
+		<h2>Snap points</h2>
+
+		<LazyComponent component={() => import('./examples/SnapPoints.svelte')} />
+
+		<p>
+			You can specify snap points and how strong the snapping is for your knob. The knob will
+			automatically sort and insert 0 and 1 to your snap point list, so <code>[0.6,0.3]</code> will
+			become <code>[0.0,0.3,0.6,1.0]</code>.
+		</p>
+		<p>
+			When snapPoints are specified, arrow keys on the keyboard will make the knob jump between
+			them. Pressing alt key will disable the snapping.
+		</p>
+		<p>This concept will be importand later in the next example.</p>
+
+		<CopyPaste>%import('./examples/SnapPoints.svelte')%</CopyPaste>
+	</div>
+
 	<div class="example">
 		<h2>Enum-param knobs</h2>
 
 		<LazyComponent component={() => import('./examples/EnumParam.svelte')} />
 
 		<p>
-			Enums or, in typescript realm <code>readonly string[]</code> parameter are a special type of
+			Enums, or in typescript realm <code>readonly string[]</code> parameter are a special type of
 			parameter that don't denormalize into a number, instead into a string. <code>EnumParam</code> class
 			comes with helpful properties for knob ui with already calcualted snap points and snap threshold
 			to make value changes 'instant'.

src/routes/examples/SnapPoints.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { SvgKnob } from '$lib';
+
+	let value = $state(0.0);
+</script>
+
+<div>
+	<SvgKnob bind:value snapPoints={[0.5]} />
+	<span>{value.toFixed(2)}</span>
+</div>