WIP: Palette drag to set

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 },
       })
     )
   }

packages/builder/src/components/userInterface/Colorpicker/components/Palette.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte"
+  import { drag } from "../actions"
   import CheckedBackground from "./CheckedBackground.svelte"
 
   const dispatch = createEventDispatcher()
@@ -10,22 +11,18 @@
   export let a = 1
 
   let palette
+  let cursor = "grab"
 
   let paletteHeight,
     paletteWidth = 0
 
-  function handleClick(event) {
+  function handePaletteChange({ mouseX, mouseY }) {
     const { left, top } = palette.getBoundingClientRect()
-    let clickX = event.clientX - left
+    let x = mouseX - left
-    let clickY = event.clientY - top
+    let y = mouseY - top
-    if (
+    if (x > 0 && y > 0 && x < paletteWidth && y < paletteHeight) {
-      clickX > 0 &&
+      let s = (x / paletteWidth) * 100
-      clickY > 0 &&
+      let v = 100 - (y / paletteHeight) * 100
-      clickX < paletteWidth &&
-      clickY < paletteHeight
-    ) {
-      let s = (clickX / paletteWidth) * 100
-      let v = 100 - (clickY / paletteHeight) * 100
       dispatch("change", { s, v })
     }
   }
@@ -38,7 +35,8 @@
   `
   $: style = `background: ${paletteGradient};`
 
-  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
+  $: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY -
+    8}px); cursor: ${cursor};`
 </script>
 
 <CheckedBackground width="100%">
@@ -46,10 +44,19 @@
     bind:this={palette}
     bind:clientHeight={paletteHeight}
     bind:clientWidth={paletteWidth}
-    on:click={handleClick}
+    on:click={event => handePaletteChange({
+        mouseX: event.clientX,
+        mouseY: event.clientY,
+      })}
     class="palette"
     {style}>
-    <div class="picker" style={pickerStyle} />
+    <div
+      use:drag
+      on:dragstart={() => (cursor = 'grabbing')}
+      on:drag={event => handePaletteChange(event.detail)}
+      on:dragend={() => (cursor = 'grab')}
+      class="picker"
+      style={pickerStyle} />
   </div>
 </CheckedBackground>
 

packages/builder/src/components/userInterface/Colorpicker/components/Slider.svelte

@@ -11,11 +11,17 @@
   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) {
+  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)
@@ -42,10 +48,19 @@
     }
   }
 
+  function handleDragStart() {
+    cursor = "grabbing"
+  }
+
+  function handleDragEnd() {
+    cursor = "grab"
+    dispatch("dragend")
+  }
+
   $: thumbPosition =
     type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
 
-  $: style = `transform: translateX(${thumbPosition - 6}px);`
+  $: style = `transform: translateX(${thumbPosition - 6}px); cursor: ${cursor};`
 </script>
 
 <div
@@ -53,14 +68,15 @@
   bind:this={slider}
   use:keyevents={{ 37: handleLeftKey, 39: handleRightKey }}
   bind:clientWidth={sliderWidth}
-  on:click={event => onSliderChange(event.clientX)}
+  on:click={event => onSliderChange({ mouseX: event.clientX })}
   class="color-format-slider"
   class:hue={type === 'hue'}
   class:alpha={type === 'alpha'}>
   <div
     use:drag
     on:drag={e => onSliderChange(e.detail, true)}
-    on:dragend
+    on:dragstart={handleDragStart}
+    on:dragend={handleDragEnd}
     class="slider-thumb"
     {style} />
 </div>