From 4d11f9c25c5c5f0a581ae6a58c17825d807581ef Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Fri, 10 Jul 2020 11:40:53 +0100
Subject: [PATCH] Palette Drag, Debounce and Tidyup

---
 .../userInterface/Colorpicker/components/ButtonGroup.svelte | 6 ++++--
 .../userInterface/Colorpicker/components/Colorpicker.svelte | 4 ++--
 .../Colorpicker/components/Colorpreview.svelte              | 3 ++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte
index a187b4689b..9862ff6071 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/ButtonGroup.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
index 1a1196dd14..a9d4d7d8fb 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpicker.svelte
+++ b/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)}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
index 474b287934..8f43865cd0 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
+++ b/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() {