Palette Drag, Debounce and Tidyup

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

@@ -1,8 +1,10 @@
 <script>
   import FlatButton from "./FlatButton.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
 
   export let format = "hex"
-  export let onclick = format => {}
 
   let colorFormats = ["hex", "rgb", "hsl"]
 </script>
@@ -12,7 +14,7 @@
     <FlatButton
       selected={format === text}
       {text}
-      on:click={() => onclick(text)} />
+      on:click={() => dispatch('click', text)} />
   {/each}
 </div>
 

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

@@ -120,7 +120,7 @@
   }
 
   function changeFormatAndConvert(f) {
-    format = f
+    format = f.detail
     value = convertHsvaToFormat([h, s, v, a], format)
   }
 
@@ -251,7 +251,7 @@
       {/if}
 
       <div class="format-input-panel">
-        <ButtonGroup {format} onclick={changeFormatAndConvert} />
+        <ButtonGroup {format} on:click={changeFormatAndConvert} />
         <Input
           {value}
           on:input={event => handleColorInput(event.target.value)}

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

@@ -47,7 +47,8 @@
 
   function onColorChange(color) {
     value = color.detail
-    dispatch("change", color.detail)
+    const fn = debounce(() => dispatch("change", color.detail), 300)
+    fn()
   }
 
   function calculateDimensions() {