diff --git a/src/HsvPicker.svelte b/src/HsvPicker.svelte index 9e5e1dc..fe66c2a 100644 --- a/src/HsvPicker.svelte +++ b/src/HsvPicker.svelte @@ -1,652 +1,662 @@ + } - + function hueDownTouch(event) { + tracked = event.currentTarget; + let rect = event.target.getBoundingClientRect(); + let offsetX = event.targetTouches[0].clientX - rect.left; + let xPercentage = ((offsetX - 9) / 220) * 100; + xPercentage = xPercentage.toFixed(2); + let picker = document.querySelector("#hue-picker"); + picker.style.left = xPercentage + "%"; + h = xPercentage / 100; + hueChange(); + } -
+ function hueChange() { + let rgb = hsvToRgb(h, 1, 1); + let colorsquare = document.querySelector(".colorsquare"); + colorsquare.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`; + colorChange(); + } + + function colorChange() { + let rgb = hsvToRgb(h, s, v); + r = rgb[0]; + g = rgb[1]; + b = rgb[2]; + hexValue = RGBAToHex(); + let pickedColor = document.querySelector(".color-picked"); + pickedColor.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`; + colorChangeCallback(); + } + + function alphaDown(event) { + tracked = event.currentTarget; + let xPercentage = ((event.offsetX - 9) / 220) * 100; + xPercentage = xPercentage.toFixed(2); + let picker = document.querySelector("#alpha-picker"); + picker.style.left = xPercentage + "%"; + a = xPercentage / 100; + colorChange(); + } + + function alphaDownTouch(event) { + tracked = event.currentTarget; + let rect = event.target.getBoundingClientRect(); + let offsetX = event.targetTouches[0].clientX - rect.left; + let xPercentage = ((offsetX - 9) / 220) * 100; + xPercentage = xPercentage.toFixed(2); + let picker = document.querySelector("#alpha-picker"); + picker.style.left = xPercentage + "%"; + a = xPercentage / 100; + colorChange(); + } + + //Math algorithms + function hsvToRgb(h, s, v) { + var r, g, b; + + var i = Math.floor(h * 6); + var f = h * 6 - i; + var p = v * (1 - s); + var q = v * (1 - f * s); + var t = v * (1 - (1 - f) * s); + + switch (i % 6) { + case 0: + (r = v), (g = t), (b = p); + break; + case 1: + (r = q), (g = v), (b = p); + break; + case 2: + (r = p), (g = v), (b = t); + break; + case 3: + (r = p), (g = q), (b = v); + break; + case 4: + (r = t), (g = p), (b = v); + break; + case 5: + (r = v), (g = p), (b = q); + break; + } + + return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; + } + + function RGBAToHex() { + let rHex = r.toString(16); + let gHex = g.toString(16); + let bHex = b.toString(16); + + if (rHex.length == 1) rHex = "0" + rHex; + if (gHex.length == 1) gHex = "0" + gHex; + if (bHex.length == 1) bHex = "0" + bHex; -
-
-
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
+ return ("#" + rHex + gHex + bHex).toUpperCase(); + } + + function rgbToHSV(r, g, b, update) { + let rperc, gperc, bperc, max, min, diff, pr, hnew, snew, vnew; + rperc = r / 255; + gperc = g / 255; + bperc = b / 255; + max = Math.max(rperc, gperc, bperc); + min = Math.min(rperc, gperc, bperc); + diff = max - min; + + vnew = max; + vnew == 0 ? (snew = 0) : (snew = diff / max); + + for (let i = 0; i < 3; i++) { + if ([rperc, gperc, bperc][i] === max) { + pr = i; + break; + } + } + if (diff == 0) { + hnew = 0; + if (update) { + h = hnew; + s = snew; + v = vnew; + hueChange(); + return; + } else { + return { h: hnew, s: snew, v: vnew }; + } + } else { + switch (pr) { + case 0: + hnew = (60 * (((gperc - bperc) / diff) % 6)) / 360; + break; + case 1: + hnew = (60 * ((bperc - rperc) / diff + 2)) / 360; + break; + case 2: + hnew = (60 * ((rperc - gperc) / diff + 4)) / 360; + break; + } + if (hnew < 0) hnew += 6; + } + + if (update) { + h = hnew; + s = snew; + v = vnew; + hueChange(); + } else { + return { h: hnew, s: snew, v: vnew }; + } + } + + +
+
+
+
+
+
+
+
-
-

{hexValue}

+
+
+
-
-
-

{r}

-

R

-
- -
-

{g}

-

G

-
- -
-

{b}

-

B

-
+
+
+
+
-
+
+
+
+
+ +
+

{hexValue}

+
+ +
+
+

{r}

+

R

+
+ +
+

{g}

+

G

+
+ +
+

{b}

+

B

+
+
+
+ +