Completed Palette and Slider with integration

packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte

@@ -1,13 +1,49 @@
 <script>
+  import {onMount} from "svelte"
+  import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba } from "./utils.js"
   import Slider from "./Slider.svelte";
   import Palette from "./Palette.svelte";
 
-  export let value = "#00000000";
+  export let value = "#00bfffff";
+  export let format = "hexa";
 
   let h = 0;
   let s = 0;
   let v = 0;
   let a = 1;
+
+  onMount(() => {
+    let hsva = getFormatAndConvert(value)
+    setHSVA(hsva)
+  })
+
+  function getFormatAndConvert() {
+  if (value.startsWith('#')) {
+    format = "hexa"
+		return getAndConvertHexa(value)
+	} else if (value.startsWith('rgba')) {
+    format = "rgba"
+		return getAndConvertRgba(value)
+	}
+  }
+
+  function setHSVA([hue, sat, val, alpha]) {
+    h = hue;
+    s = sat / 100;
+    v - val / 100;
+    a = alpha;
+  }
+
+  function setSaturationAndValue({detail}) {
+    s = detail.s
+    v = detail.v
+  }
+
+  // $: {
+  //   let hsva = [h, s, v, a]
+  //   value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
+  //   console.log("VAL", value)
+  // }
 </script>
 
 <style>
@@ -24,9 +60,9 @@
 
 <div class="colorpicker-container">
 
-  <Palette {h} {a} />
+  <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
 
-  <Slider type="hue" on:change={hue => (h = hue.detail)} />
+  <Slider type="hue" value={h} on:change={hue => (h = hue.detail)} />
 
-  <Slider type="alpha" on:change={alpha => (a = alpha.detail)} />
+  <Slider type="alpha" value={a} on:change={alpha => (a = alpha.detail)} />
 </div>

packages/builder/src/components/userInterface/Colorpicker/Palette.svelte

@@ -1,30 +1,39 @@
 <script>
-  import { onMount } from "svelte";
-  export let h,
-    a = 0;
+  import { onMount, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher()
+
+  export let h = 0;
+  export let s = 0;
+  export let v = 0;
+  export let a = 1;
 
   let palette;
-  let dimensions;
 
-  onMount(() => {
-    if (palette) {
-      dimensions = palette.getBoundingClientRect();
-    }
-  });
+  let paletteHeight, paletteWidth = 0;
+
 
   function handleClick(event) {
-    const { left, top, width, height } = dimensions;
-    let pickerX = (event.clientX - left) / width;
-    let pickerY = (event.clientY - top) / height;
-    //Saturation - adds white: pickerX * 100
-    //value - adds black: 100 - pickerY * 100
-    console.log("X", pickerX, "Y", pickerY);
+    const { left, top } = palette.getBoundingClientRect();
+    let clickX = (event.clientX - left)
+    let clickY = (event.clientY - top)
+    if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
+      let s = (clickX / paletteWidth) * 100
+      let v = 100 - ((clickY / paletteHeight) * 100)
+      dispatch("change", {s, v})
     }
 
+  }
+
+  $: pickerX = (s * paletteWidth) / 100;
+  $: pickerY =  paletteHeight * ((100 - v) / 100)
+
   $: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
     linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
   `;
   $: style = `background: ${paletteGradient};`;
+
+  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
 </script>
 
 <style>
@@ -32,18 +41,19 @@
     position: relative;
     width: 100%;
     height: 175px;
+    cursor: crosshair;
   }
 
   .picker {
     position: absolute;
-    width: 16px;
-    height: 16px;
+    width: 10px;
+    height: 10px;
     background: transparent;
     border: 2px solid white;
     border-radius: 50%;
   }
 </style>
 
-<div bind:this={palette} on:click={handleClick} class="palette" {style}>
-  <div class="picker" />
+<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
+  <div class="picker" style={pickerStyle} />
 </div>

packages/builder/src/components/userInterface/Colorpicker/Slider.svelte

@@ -2,35 +2,30 @@
   import { onMount, createEventDispatcher } from "svelte";
   import dragable from "./drag.js";
 
+  export let value = 1
   export let type = "hue";
 
   const dispatch = createEventDispatcher();
 
   let slider;
-  let dimensions = {};
-  let thumbPosition = 0;
-
-  onMount(() => {
-    if (slider) {
-      dimensions = slider.getBoundingClientRect();
-    }
-  });
+  let sliderWidth = 0;
 
   function handleClick(mouseX) {
-    const { left, width } = dimensions;
+    const { left } = slider.getBoundingClientRect();
     let clickPosition = mouseX - left;
-    debugger;
-    if (clickPosition >= 0 && clickPosition <= width) {
-      thumbPosition = clickPosition;
-      let percentageClick = thumbPosition / width;
+    
+    if (clickPosition >= 0 && clickPosition <= sliderWidth) {
+      let percentageClick = clickPosition / sliderWidth;
       let value =
         type === "hue"
-          ? Math.round(360 * percentageClick).toString()
-          : percentageClick.toFixed(2);
+          ? 360 * percentageClick.toString()
+          : percentageClick.toString();
       dispatch("change", value);
     }
   }
 
+  $: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value)
+
   $: style = `transform: translateX(${thumbPosition - 6}px);`;
 </script>
 
@@ -75,6 +70,7 @@
 
 <div
   bind:this={slider}
+  bind:clientWidth={sliderWidth}
   on:click={event => handleClick(event.clientX)}
   class="color-format-slider"
   class:hue={type === 'hue'}

packages/builder/src/components/userInterface/Colorpicker/drag.js

@@ -6,7 +6,6 @@ export default function(node) {
 
 	function handleMouseMove(event) {
 		let mouseX = event.clientX;
-		console.log(mouseX);
 		node.dispatchEvent(
 			new CustomEvent('drag', {
 				detail: mouseX

packages/builder/src/components/userInterface/Colorpicker/utils.js

@@ -12,19 +12,19 @@ export const isValidRgba = (rgba) => {
 	return isValidLengthRange && isValidColorRange && isValidAlphaRange;
 };
 
-export const determineColorType = (color) => {
-	let hsva = [];
-	if (color.startsWith('#')) {
-		let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
-		hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex);
-	} else if (color.startsWith('rgb')) {
-		let rgba = getRgbaValues(color);
-		hsva = rgbaToHSVA(rgba);
-	}
-};
 
-export const getHSLA = (hsv, a) => {
-	const [ h, s, l ] = hsvToHSL(hsv);
+export const getAndConvertHexa = (color) => { 
+	let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
+	return hexaToHSVA([ rHex, gHex, bHex ], aHex);
+}
+
+export const getAndConvertRgba = color => {
+	let rgba = getRgbaValues(color);
+	return rgbaToHSVA(rgba);
+}
+
+export const getHSLA = ([hue, sat, val, a]) => {
+	const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
 	return `hsla(${h}, ${s}, ${l}, ${a})`;
 };
 
@@ -36,20 +36,21 @@ export const hexaToHSVA = (hex, alpha = 'FF') => {
 export const rgbaToHSVA = (rgba) => {
 	if (isValidRgba(rgba)) {
 		const [ r, g, b, a = '1' ] = rgba;
-		let hsv = rgbToHSV([ r, g, b ]);
+		let hsv = _rgbToHSV([ r, g, b ]);
 		return [ ...hsv, a ];
 	}
 };
 
-export const hsvaToHexa = () => {
-	const [ r, g, b, a ] = hsvaToRgba();
+export const hsvaToHexa = (hsva) => {
+	const [ r, g, b, a ] = hsvaToRgba(hsva);
 	const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
-	return hexa;
+	return `#${hexa.join()}`
 };
 
-export const hsvaToRgba = (h, s, v, a) => {
+export const hsvaToRgba = ([h, s, v, a]) => {
 	let rgb = _hsvToRgb([ h, s, v ]);
-	return [ ...rgb, a ];
+	let rgba = [ ...rgb, a ];
+	return `rgba(${rgba.join(",")})`
 };
 
 //Credit : https://github.com/Qix-/color-convert