From e79fc8f3bd79145f82dd74cb06fdf41f180ecfdf Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 24 Aug 2019 21:23:52 -0700
Subject: [PATCH] fix: fix cursor when grabbing in draggable UI (#1432)

---
 src/routes/_components/Draggable.html | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/routes/_components/Draggable.html b/src/routes/_components/Draggable.html
index 59f6eff2..4b5c3f37 100644
--- a/src/routes/_components/Draggable.html
+++ b/src/routes/_components/Draggable.html
@@ -5,7 +5,7 @@
      on:click="onClick(event)"
      ref:area
 >
-  <div class="draggable-indicator {indicatorClassAfterRaf}"
+  <div class="draggable-indicator {computedIndicatorClassAfterRaf}"
        style={indicatorStyleAfterRaf}
        on:pointerDown="onPointerDown(event)"
        ref:indicator
@@ -19,10 +19,14 @@
   .draggable-area {
     position: relative;
     touch-action: none;
+    cursor: pointer;
   }
   .draggable-indicator {
     position: absolute;
-    cursor: pointer;
+    cursor: grab;
+  }
+  .draggable-indicator.grabbing {
+    cursor: grabbing;
   }
   .draggable-indicator-inner {
     pointer-events: none;
@@ -34,6 +38,7 @@
   import { throttleTimer } from '../_utils/throttleTimer'
   import { pointerUp, pointerDown, pointerLeave, pointerMove } from '../_utils/pointerEvents'
   import { requestPostAnimationFrame } from '../_utils/requestPostAnimationFrame'
+  import { classname } from '../_utils/classname'
 
   // ensure DOM writes only happen once after a rAF
   const updateIndicatorStyle = throttleTimer(requestAnimationFrame)
@@ -56,19 +61,21 @@
           this.fire('change', { x, y })
         }
       }, { init: false })
-      this.observe('indicatorStyle', indicatorStyle => {
-        console.log('Draggable indicatorStyle', indicatorStyle)
+      this.observe('indicatorStyle', () => {
         updateIndicatorStyle(() => {
+          const { indicatorStyle } = this.get()
           this.set({ indicatorStyleAfterRaf: indicatorStyle })
         })
       })
-      this.observe('indicatorClass', indicatorClass => {
+      this.observe('computedIndicatorClass', () => {
         updateIndicatorClass(() => {
-          this.set(({ indicatorClassAfterRaf: indicatorClass }))
+          const { computedIndicatorClass } = this.get()
+          this.set(({ computedIndicatorClassAfterRaf: computedIndicatorClass }))
         })
       })
-      this.observe('draggableClass', draggableClass => {
+      this.observe('draggableClass', () => {
         updateDraggableClass(() => {
+          const { draggableClass } = this.get()
           this.set({ draggableClassAfterRaf: draggableClass })
         })
       })
@@ -78,7 +85,7 @@
       draggableClass: '',
       draggableClassAfterRaf: '',
       indicatorClass: '',
-      indicatorClassAfterRaf: '',
+      computedIndicatorClassAfterRaf: '',
       x: 0,
       y: 0,
       indicatorWidth: 0,
@@ -88,7 +95,8 @@
     computed: {
       indicatorStyle: ({ x, y, indicatorWidth, indicatorHeight }) => (
         `left: calc(${x * 100}% - ${indicatorWidth / 2}px); top: calc(${y * 100}% - ${indicatorHeight / 2}px);`
-      )
+      ),
+      computedIndicatorClass: ({ dragging, indicatorClass }) => classname(dragging && 'grabbing', indicatorClass)
     },
     methods: {
       observe,