From 8e6f4301ceaa72cda212c6a4a537b09bbd6ae4ee Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Fri, 10 Jul 2020 14:14:21 +0100
Subject: [PATCH] Active Cursor Grab and Debounce Update

---
 .../Colorpicker/components/Colorpreview.svelte  |  5 +++--
 .../Colorpicker/components/Palette.svelte       | 11 ++++++-----
 .../Colorpicker/components/Slider.svelte        | 17 +++++------------
 .../userInterface/Colorpicker/helpers.js        |  8 ++++++--
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Colorpreview.svelte
index 8f43865cd0..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,8 +49,7 @@
 
   function onColorChange(color) {
     value = color.detail
-    const fn = debounce(() => dispatch("change", color.detail), 300)
-    fn()
+    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 43fcb17094..ce2e5849f1 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte
@@ -11,7 +11,6 @@
   export let a = 1
 
   let palette
-  let cursor = "grab"
 
   let paletteHeight,
     paletteWidth = 0
@@ -35,8 +34,7 @@
   `
   $: style = `background: ${paletteGradient};`
 
-  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY -
-    8}px); cursor: ${cursor};`
+  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
 </script>
 
 <CheckedBackground width="100%">
@@ -52,9 +50,7 @@
     {style}>
     <div
       use:drag
-      on:dragstart={() => (cursor = 'grabbing')}
       on:drag={event => handePaletteChange(event.detail)}
-      on:dragend={() => (cursor = 'grab')}
       class="picker"
       style={pickerStyle} />
   </div>
@@ -71,10 +67,15 @@
 
   .picker {
     position: absolute;
+    cursor: grab;
     width: 10px;
     height: 10px;
     background: transparent;
     border: 2px solid white;
     border-radius: 50%;
   }
+
+  .picker:active {
+    cursor: grabbing;
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
index 1a56a4115a..36b683c780 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte
@@ -11,17 +11,12 @@
   let sliderWidth = 0
   let upperLimit = type === "hue" ? 360 : 1
   let incrementFactor = type === "hue" ? 1 : 0.01
-  let cursor = "grab"
 
   const isWithinLimit = value => value >= 0 && value <= upperLimit
 
   function onSliderChange({ mouseX }, isDrag = false) {
     const { left, width } = slider.getBoundingClientRect()
 
-    if (isDrag && cursor !== "grabbing") {
-      cursor = "grabbing"
-    }
-
     let clickPosition = mouseX - left
 
     let percentageClick = (clickPosition / sliderWidth).toFixed(2)
@@ -48,19 +43,14 @@
     }
   }
 
-  function handleDragStart() {
-    cursor = "grabbing"
-  }
-
   function handleDragEnd() {
-    cursor = "grab"
     dispatch("dragend")
   }
 
   $: thumbPosition =
     type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
 
-  $: style = `transform: translateX(${thumbPosition - 6}px); cursor: ${cursor};`
+  $: style = `transform: translateX(${thumbPosition - 6}px);`
 </script>
 
 <div
@@ -75,7 +65,6 @@
   <div
     use:drag
     on:drag={e => onSliderChange(e.detail, true)}
-    on:dragstart={handleDragStart}
     on:dragend={handleDragEnd}
     class="slider-thumb"
     {style} />
@@ -122,4 +111,8 @@
     background-color: #ffffff;
     cursor: grab;
   }
+
+  .slider-thumb:active {
+    cursor: grabbing;
+  }
 </style>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
index bd4d666bc1..be5bc1fd94 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/helpers.js
+++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js
@@ -13,8 +13,12 @@ export const convertCamel = str => {
   return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
 }
 
-export const debounce = (fn, milliseconds) => {
-  return () => {
+export const debounce = (fn, milliseconds, callImmediately) => {
+  const debouncedFn = () => {
     setTimeout(fn, milliseconds)
   }
+  if (callImmediately) {
+    debouncedFn()
+  }
+  return debouncedFn
 }