From 4d11f9c25c5c5f0a581ae6a58c17825d807581ef Mon Sep 17 00:00:00 2001 From: cmack 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 @@ @@ -12,7 +14,7 @@ onclick(text)} /> + on:click={() => dispatch('click', text)} /> {/each} 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}
- + 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() {