Active Cursor Grab and Debounce Update

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)
+    dispatchValue(value)
-    fn()
   }
 
   function calculateDimensions() {

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 -
+  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
-    8}px); cursor: ${cursor};`
 </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>

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>

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) => {
+export const debounce = (fn, milliseconds, callImmediately) => {
-  return () => {
+  const debouncedFn = () => {
     setTimeout(fn, milliseconds)
   }
+  if (callImmediately) {
+    debouncedFn()
+  }
+  return debouncedFn
 }