Allow binding to color prop

Author: drwpow

src/lib/ColorSelect.svelte

@@ -20,24 +20,31 @@
 
 	export let color: Okhsl | Okhsv | Oklab | Oklch | Rgb
 
-	export let transform = (rgb: number[]) => rgb
+	export let transform = (rgb: Rgb) => rgb
 
 	const dispatch = createEventDispatcher()
 	const width = picker_size + slider_width + gap_size + border_size * 2
 	const height = picker_size + border_size * 2
 
-	const toOKhsl = useMode(modeOkhsl)
+	const toOkhsl = useMode(modeOkhsl)
 	const toOkhsv = useMode(modeOkhsv)
 	const toOklab = useMode(modeOklab)
 	const toOklch = useMode(modeOklch)
 	const toRgb = useMode(modeRgb)
 
-	$: okhsl = toOKhsl(color)!
 	$: okhsv = toOkhsv(color)!
-	$: oklab = toOklab(color)!
-	$: oklch = toOklch(color)!
-	$: rgb = toRgb(color)
 	$: uihsv = scale_to_ui(okhsv)
+	$: transform_fn = (
+		color.mode === 'okhsl'
+			? toOkhsl
+			: color.mode === 'okhsv'
+			? toOkhsv
+			: color.mode === 'oklab'
+			? toOklab
+			: color.mode === 'oklch'
+			? toOklch
+			: toRgb
+	) as typeof toRgb // this just makes the typing less finicky
 	$: update_square(okhsv.h ?? 0)
 
 	// used to prevent re-drawing square for minor hue changes
@@ -90,7 +97,8 @@
 	}
 
 	async function update_rgb() {
-		dispatch('change', { rgb, okhsl, okhsv, oklab, oklch })
+		color = transform_fn(okhsv)
+		dispatch('change', { color })
 	}
 
 	function update_sv(x: number, y: number) {
@@ -105,7 +113,7 @@
 
 	function update_h(x: number, y: number) {
 		let h = clamp(y / picker_size)
-		okhsv.h = h
+		okhsv.h = h * 360
 
 		update_rgb()
 	}

src/lib/render.ts

@@ -1,3 +1,4 @@
+import type { Rgb } from 'culori'
 import { useMode, modeRgb, modeOkhsl, modeOkhsv } from 'culori/fn'
 import { picker_size, slider_width } from './constants'
 
@@ -119,7 +120,7 @@ function upscale(lowres_data: Float32Array, data: Uint8ClampedArray) {
 export function render_main_image(
 	hue: number,
 	image: ImageData,
-	transform: (rgb: number[]) => number[]
+	transform: (rgb: Rgb) => Rgb
 ) {
 	const data = image.data
 	const lowres_data = new Float32Array(

src/routes/+page.svelte

@@ -1,13 +1,9 @@
 <script lang="ts">
-	import type { Rgb } from 'culori'
+	import { formatCss, type Rgb } from 'culori/fn'
 	import ColorSelect from '$lib'
 
 	// https://medium.com/@valgaze/the-hidden-purple-memorial-in-your-web-browser-7d84813bb416
-	let r = 102
-	let g = 51
-	let b = 153
-
-	$: color = { mode: 'rgb', r: r / 255, g: g / 255, b: b / 255 } as Rgb
+	let color: Rgb = { mode: 'rgb', r: 0.4, g: 0.2, b: 0.6 } 
 </script>
 
 <svelte:head>
@@ -17,32 +13,32 @@
 <h1 class="text-zinc-100 mx-8 mt-16 font-extrabold text-3xl">Okhsv Color Select</h1>
 <p class="text-zinc-400 mx-8 mt-2">HSV style color select using OKLab perceptual color space.</p>
 
-<ColorSelect class="m-8 bg-zinc-600" {color} on:change={(e) => console.log(e.detail)} />
+<ColorSelect class="m-8 bg-zinc-600" bind:color />
 
 <p class="text-zinc-400 mx-8 mt-2">Use left / right arrow keys to adjust Saturation, up / down to adjust Brightness.</p>
 <p class="text-zinc-400 mx-8 mt-2">Hold shift for larger steps and alt / option key to adjust Hue.</p>
 
 <div class="m-12">
 	<div class="flex items-center mt-2">
 		<label class="w-24 text-red-700" for="red">Red</label>
-		<input id="red" type="range" min="0" max="255" step="1" bind:value={r} />
-		<span class="text-sm font-semibold text-zinc-300 w-12 ml-2 pl-2 py-0.5 pr-0 text-right">{Math.round(r)}</span>
+		<input id="red" type="range" min="0" max="1" step={1/255} bind:value={color.r} />
+		<span class="text-sm font-semibold text-zinc-300 w-12 ml-2 pl-2 py-0.5 pr-0 text-right">{Math.round(255 * color.r)}</span>
 	</div>
 
 	<div class="flex items-center mt-2">
 		<label class="w-24 text-green-600" for="green">Green</label>
-		<input id="green" type="range" min="0" max="255" step="1" bind:value={g} />
-		<span class="text-sm font-semibold text-zinc-300 w-12 ml-2 pl-2 py-0.5 pr-0 text-right">{Math.round(g)}</span>
+		<input id="green" type="range" min="0" max="1" step={1/255} bind:value={color.g} />
+		<span class="text-sm font-semibold text-zinc-300 w-12 ml-2 pl-2 py-0.5 pr-0 text-right">{Math.round(255 * color.g)}</span>
 	</div>
 
 	<div class="flex items-center mt-2">
 		<label class="w-24 text-blue-600" for="blue">Blue</label>
-		<input id="blue" type="range" min="0" max="255" step="1" bind:value={b} />
-		<span class="text-sm font-semibold text-zinc-300 w-12 ml-2 pl-2 py-0.5 pr-0 text-right">{Math.round(b)}</span>
+		<input id="blue" type="range" min="0" max="1" step={1/255} bind:value={color.b} />
+		<span class="text-sm font-semibold text-zinc-300 w-12 ml-2 pl-2 py-0.5 pr-0 text-right">{Math.round(255 * color.b)}</span>
 	</div>
 
 	<div class="bg-white inline-block ml-24 my-6 rounded-[10px]">
-		<div class="w-48 h-12 m-1 rounded-[6px]" style:background-color="rgb({r},{g},{b})" />
+		<div class="w-48 h-12 m-1 rounded-[6px]" style:background-color={formatCss(color)} />
 	</div>
 
 	<p class="text-white">See <a class="text-blue-300" href="https://bottosson.github.io/posts/colorpicker/">Okhsv and Okhsl by Björn Ottosson</a></p>