grab/grabbing icons, hover state (#247)

Author: BryonLewis

client/src/components/geoJS/layers/measureToolLayer.ts

@@ -21,9 +21,11 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
   rulerOn: boolean;
   dragging: boolean;
   yValue: number;
+  hovering: boolean;
 
   moveHandler: (e: GeoEvent) => void;
   mousedownHandler: (e: GeoEvent) => void;
+  hoverHandler: (e: GeoEvent) => void;
   mouseupHandler: () => void;
 
   constructor(
@@ -58,6 +60,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     this.dragging = false;
     this.yValue = 0;
     this.color = 'white';
+    this.hovering = false;
 
     this.textStyle = this.createTextStyle();
     this.rulerOn = measuring || false;
@@ -68,27 +71,41 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     this.moveHandler = (e: GeoEvent) => {
       if (e && this.dragging) {
         this.updateRuler(e.mouse.geo.y);
+      } 
+    };
+    this.hoverHandler = (e: GeoEvent) => {
+      if (e) {
+       const gcs = this.geoViewerRef.displayToGcs(e.map);
+        const p = this.pointAnnotation.data()[0];
+        const dx = Math.abs(gcs.x - p.x);
+        const dy = Math.abs(gcs.y - p.y);
+        if (Math.sqrt(dx*dx + dy*dy) < 20 || dy < 10) {
+          this.event('update:cursor', { cursor: 'grab' });
+          this.hovering = true;
+          return;
+        } else {
+          this.event('update:cursor', { cursor: 'default' });
+        }
       }
+      this.hovering = false;
     };
     this.mousedownHandler = (e: GeoEvent) => {
-      const gcs = this.geoViewerRef.displayToGcs(e.map);
-      const p = this.pointAnnotation.data()[0];
-      const dx = Math.abs(gcs.x - p.x);
-      const dy = Math.abs(gcs.y - p.y);
-      if (Math.sqrt(dx*dx + dy*dy) < 20 || dy < 10) {
+      if (this.hovering && e.buttons.left) {
         this.geoViewerRef.interactor().addAction({
           action: 'dragpoint',
           name: 'drag point with mouse',
           owner: 'MeasureToolLayer',
           input: 'left',
         });
         this.dragging = true;
+        this.event('update:cursor', { cursor: 'grabbing' });
       }
     };
     this.mouseupHandler = () => {
       this.dragging = false;
       this.geoViewerRef.interactor().removeAction(undefined, undefined, 'MeasureToolLayer');
       this.updateRuler(this.yValue);
+      this.event('update:cursor', { cursor: 'grab' });
     };
   }
 
@@ -107,6 +124,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     this.geoViewerRef.geoOn(geo.event.mousedown, this.mousedownHandler);
     this.geoViewerRef.geoOn(geo.event.actionmove, this.moveHandler);
     this.geoViewerRef.geoOn(geo.event.mouseup, this.mouseupHandler);
+    this.geoViewerRef.geoOn(geo.event.mousemove, this.hoverHandler);
     this.frequencyRulerLayer.draw();
     this.updateRuler(this.yValue);
   }
@@ -164,6 +182,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     this.geoViewerRef.geoOff(geo.event.mousedown, this.mousedownHandler);
     this.geoViewerRef.geoOff(geo.event.mouseup, this.mouseupHandler);
     this.geoViewerRef.geoOff(geo.event.actionmove, this.moveHandler);
+    this.geoViewerRef.geoOff(geo.event.mousemove, this.hoverHandler);
   }
 
   clearRulerLayer() {