From 92e04bdbbcc491c34b03bd030742ebe7dc780d60 Mon Sep 17 00:00:00 2001 From: laptop Date: Thu, 6 Nov 2025 11:07:32 +0100 Subject: [PATCH 1/5] expand customization for the colour picker. e.g. setting the background colour, opacity, toggle alphaSelector --- demo_page/src/App.svelte | 118 ++-- src/HsvPicker.svelte | 1184 +++++++++++++++++++------------------- 2 files changed, 670 insertions(+), 632 deletions(-) diff --git a/demo_page/src/App.svelte b/demo_page/src/App.svelte index f8cbca0..81ae67c 100644 --- a/demo_page/src/App.svelte +++ b/demo_page/src/App.svelte @@ -1,60 +1,74 @@ + + - + - +
+
+

Svelte Color Picker

+

A color picker component for svelte.

+ Star +
+
+ +
+
- -
-
-

Svelte Color Picker

-

A color picker component for svelte.

- Star -
-
- -
-
diff --git a/src/HsvPicker.svelte b/src/HsvPicker.svelte index 9e5e1dc..f5c23ae 100644 --- a/src/HsvPicker.svelte +++ b/src/HsvPicker.svelte @@ -1,340 +1,339 @@ - - -
- +
-
-
-
-
-
+
+
+
+
+
-
-
+
+
-
+ {#if alphaSelector} +
-
- -
-
-
+ {/if} + + {#if colorInfoBox} +
+ {#if hexCodeInfo} +
+
+
+ +
+

{hexValue}

+
+ {/if} + + {#if rgbInfo} +
+
+

{r}

+

R

+
-
-

{hexValue}

+
+

{g}

+

G

+
+ +
+

{b}

+

B

+
+
+ {/if}
+ {/if} +
-
-
-

{r}

-

R

-
+ From 8dee75c9e42e8e60d07bb8916a8c761547d73c2c Mon Sep 17 00:00:00 2001 From: laptop Date: Thu, 6 Nov 2025 11:36:20 +0100 Subject: [PATCH 2/5] Enable user to adjust width and heigth --- demo_page/src/App.svelte | 2 +- src/HsvPicker.svelte | 91 ++++++++++++++++++++++------------------ 2 files changed, 52 insertions(+), 41 deletions(-) diff --git a/demo_page/src/App.svelte b/demo_page/src/App.svelte index 81ae67c..3e429f9 100644 --- a/demo_page/src/App.svelte +++ b/demo_page/src/App.svelte @@ -46,7 +46,7 @@ >
- +
diff --git a/src/HsvPicker.svelte b/src/HsvPicker.svelte index f5c23ae..488c2fa 100644 --- a/src/HsvPicker.svelte +++ b/src/HsvPicker.svelte @@ -8,6 +8,14 @@ export let colorInfoBox = true; export let hexCodeInfo = true; export let rgbInfo = true; + // sizing props (pixels) + export let width = 240; // overall picker width + export let height = 265; // overall picker height + // optional explicit colorsquare height; if null it will be computed proportionally to width + export let colorsquareHeight = null; + + // derived colorsquare height (default ratio in original was 160 / 240 = 2/3) + $: csHeight = colorsquareHeight || Math.round(width * (160 / 240)); onMount(() => { document.addEventListener("mouseup", mouseUp); @@ -111,8 +119,8 @@ let xPercentage, yPercentage, picker; switch (tracked.id) { case "colorsquare-event": - xPercentage = ((mouseX - trackedPos.x) / 240) * 100; - yPercentage = ((mouseY - trackedPos.y) / 160) * 100; + xPercentage = ((mouseX - trackedPos.x) / trackedPos.width) * 100; + yPercentage = ((mouseY - trackedPos.y) / trackedPos.height) * 100; xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null; yPercentage > 100 ? (yPercentage = 100) : yPercentage < 0 ? (yPercentage = 0) : null; picker = document.querySelector("#colorsquare-picker"); @@ -125,7 +133,7 @@ colorChange(); break; case "hue-event": - xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100; + xPercentage = ((mouseX - trackedPos.x) / trackedPos.width) * 100; xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null; xPercentage = xPercentage.toFixed(2); picker = document.querySelector("#hue-picker"); @@ -134,7 +142,7 @@ hueChange(); break; case "alpha-event": - xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100; + xPercentage = ((mouseX - trackedPos.x) / trackedPos.width) * 100; xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null; xPercentage = xPercentage.toFixed(2); picker = document.querySelector("#alpha-picker"); @@ -154,8 +162,8 @@ let xPercentage, yPercentage, picker; switch (tracked.id) { case "colorsquare-event": - xPercentage = ((mouseX - trackedPos.x) / 240) * 100; - yPercentage = ((mouseY - trackedPos.y) / 160) * 100; + xPercentage = ((mouseX - trackedPos.x) / trackedPos.width) * 100; + yPercentage = ((mouseY - trackedPos.y) / trackedPos.height) * 100; xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null; yPercentage > 100 ? (yPercentage = 100) : yPercentage < 0 ? (yPercentage = 0) : null; picker = document.querySelector("#colorsquare-picker"); @@ -168,7 +176,7 @@ colorChange(); break; case "hue-event": - xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100; + xPercentage = ((mouseX - trackedPos.x) / trackedPos.width) * 100; xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null; xPercentage = xPercentage.toFixed(2); picker = document.querySelector("#hue-picker"); @@ -177,7 +185,7 @@ hueChange(); break; case "alpha-event": - xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100; + xPercentage = ((mouseX - trackedPos.x) / trackedPos.width) * 100; xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null; xPercentage = xPercentage.toFixed(2); picker = document.querySelector("#alpha-picker"); @@ -191,8 +199,11 @@ function csDown(event) { tracked = event.currentTarget; - let xPercentage = ((event.offsetX + 1) / 240) * 100; - let yPercentage = ((event.offsetY + 1) / 160) * 100; + let trackedPos = tracked.getBoundingClientRect(); + let offsetX = event.offsetX !== undefined ? event.offsetX : event.clientX - trackedPos.x; + let offsetY = event.offsetY !== undefined ? event.offsetY : event.clientY - trackedPos.y; + let xPercentage = ((offsetX + 1) / trackedPos.width) * 100; + let yPercentage = ((offsetY + 1) / trackedPos.height) * 100; yPercentage = yPercentage.toFixed(2); xPercentage = xPercentage.toFixed(2); let picker = document.querySelector("#colorsquare-picker"); @@ -208,8 +219,8 @@ let rect = event.target.getBoundingClientRect(); let offsetX = event.targetTouches[0].clientX - rect.left; let offsetY = event.targetTouches[0].clientY - rect.top; - let xPercentage = ((offsetX + 1) / 240) * 100; - let yPercentage = ((offsetY + 1) / 160) * 100; + let xPercentage = ((offsetX + 1) / rect.width) * 100; + let yPercentage = ((offsetY + 1) / rect.height) * 100; yPercentage = yPercentage.toFixed(2); xPercentage = xPercentage.toFixed(2); let picker = document.querySelector("#colorsquare-picker"); @@ -226,7 +237,9 @@ function hueDown(event) { tracked = event.currentTarget; - let xPercentage = ((event.offsetX - 9) / 220) * 100; + let trackedPos = tracked.getBoundingClientRect(); + let offsetX = event.offsetX !== undefined ? event.offsetX : event.clientX - trackedPos.x; + let xPercentage = (offsetX / trackedPos.width) * 100; xPercentage = xPercentage.toFixed(2); let picker = document.querySelector("#hue-picker"); picker.style.left = xPercentage + "%"; @@ -238,7 +251,7 @@ tracked = event.currentTarget; let rect = event.target.getBoundingClientRect(); let offsetX = event.targetTouches[0].clientX - rect.left; - let xPercentage = ((offsetX - 9) / 220) * 100; + let xPercentage = (offsetX / rect.width) * 100; xPercentage = xPercentage.toFixed(2); let picker = document.querySelector("#hue-picker"); picker.style.left = xPercentage + "%"; @@ -266,7 +279,9 @@ function alphaDown(event) { tracked = event.currentTarget; - let xPercentage = ((event.offsetX - 9) / 220) * 100; + let trackedPos = tracked.getBoundingClientRect(); + let offsetX = event.offsetX !== undefined ? event.offsetX : event.clientX - trackedPos.x; + let xPercentage = (offsetX / trackedPos.width) * 100; xPercentage = xPercentage.toFixed(2); let picker = document.querySelector("#alpha-picker"); picker.style.left = xPercentage + "%"; @@ -278,7 +293,7 @@ tracked = event.currentTarget; let rect = event.target.getBoundingClientRect(); let offsetX = event.targetTouches[0].clientX - rect.left; - let xPercentage = ((offsetX - 9) / 220) * 100; + let xPercentage = (offsetX / rect.width) * 100; xPercentage = xPercentage.toFixed(2); let picker = document.querySelector("#alpha-picker"); picker.style.left = xPercentage + "%"; @@ -387,10 +402,10 @@ } -
+
-
-
+
+
@@ -446,8 +461,6 @@