diff --git a/packages/builder/src/components/userInterface/Colorpicker/actions/drag.js b/packages/builder/src/components/userInterface/Colorpicker/actions/drag.js index 54fa5e924b..4f1a0f8dcd 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/actions/drag.js +++ b/packages/builder/src/components/userInterface/Colorpicker/actions/drag.js @@ -2,13 +2,13 @@ export default function(node) { function handleMouseDown() { window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) + node.dispatchEvent(new CustomEvent("dragstart")) } function handleMouseMove(event) { - let mouseX = event.clientX node.dispatchEvent( new CustomEvent("drag", { - detail: mouseX, + detail: { mouseX: event.clientX, mouseY: event.clientY }, }) ) } 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..be1a2d718f 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte @@ -28,6 +28,8 @@ let errorMsg = null const dispatch = createEventDispatcher() + const dispatchValue = value => + debounce(() => dispatch("change", value), 300, true) beforeUpdate(() => { format = getColorFormat(value) @@ -47,7 +49,7 @@ function onColorChange(color) { value = color.detail - dispatch("change", color.detail) + dispatchValue(value) } function calculateDimensions() { diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte index 64fac9d9c9..ce2e5849f1 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte @@ -1,5 +1,6 @@