Cursor handling transferred from Rapid V1 to V2

modules/behaviors/HoverBehavior.js

@@ -1,5 +1,6 @@
 import { AbstractBehavior } from './AbstractBehavior';
 // import { geoChooseEdge } from '../geo';
+import {cursors} from './index';
 
 
 /**

modules/behaviors/MapInteractionBehavior.js

@@ -189,7 +189,10 @@ export class MapInteractionBehavior extends AbstractBehavior {
 
     this.lastDown = down;
     this.gesture = null;
-    eventManager.setCursor('grabbing');
+    const mode = this.context.mode.id;
+    if (mode === 'draw-area' || mode === 'draw-line') {
+      eventManager.setCursor('crosshair');
+    } else eventManager.setCursor('grabbing');
   }
 
 
@@ -241,7 +244,10 @@ export class MapInteractionBehavior extends AbstractBehavior {
     this.gesture = null;
 
     const eventManager = this.context.systems.map.renderer.events;
-    eventManager.setCursor('inherit');
+    const mode = this.context.mode.id;
+    if (mode === 'draw-area' || mode === 'draw-line') {
+      eventManager.setCursor('crosshair');
+    } else eventManager.setCursor('grab');
   }
 
 
@@ -255,9 +261,6 @@ export class MapInteractionBehavior extends AbstractBehavior {
     // After pointercancel, there should be no more `pointermove` or `pointerup` events.
     this.lastDown = null;
     this.gesture = null;
-
-    const eventManager = this.context.systems.map.renderer.events;
-    eventManager.setCursor('inherit');
   }
 
 

modules/behaviors/index.js

@@ -27,6 +27,15 @@ export const behaviors = {
   available:  new Map()  // Map (id -> Behavior constructor)
 };
 
+export const cursors = {
+  connectLineCursor: 'url(/img/cursor-draw-connect-line.png) 9 9, crosshair',
+  connectVertexCursor: 'url(/img/cursor-draw-connect-vertex.png) 9 9, crosshair',
+  lineCursor:'url(/img/cursor-select-line.png), auto',
+  vertexCursor: 'url(/img/cursor-select-vertex.png), auto',
+  pointCursor:'url(/img/cursor-select-point.png), auto',
+  areaCursor:'url(/img/cursor-select-area.png), auto',
+};
+
 behaviors.available.set('drag', DragBehavior);
 behaviors.available.set('draw', DrawBehavior);
 behaviors.available.set('hover', HoverBehavior);

modules/modes/AddPointMode.js

@@ -7,8 +7,6 @@ import { geoChooseEdge } from '../geo';
 import { osmNode } from '../osm/node';
 
 const DEBUG = false;
-
-
 /**
  * `AddPointMode`
  * In this mode, we are waiting for the user to place a point somewhere
@@ -41,8 +39,9 @@ export class AddPointMode extends AbstractMode {
 
     this._active = true;
     const context = this.context;
+    const eventManager = context.systems.map.renderer.events;
     context.enableBehaviors(['hover', 'draw', 'map-interaction']);
-
+    eventManager.setCursor('crosshair');
     context.behaviors.draw
       .on('click', this._click)
       .on('cancel', this._cancel)
@@ -67,7 +66,6 @@ export class AddPointMode extends AbstractMode {
     }
 
     this._active = false;
-
     const context = this.context;
     context.behaviors.draw
       .off('click', this._click)
@@ -77,6 +75,8 @@ export class AddPointMode extends AbstractMode {
     context.systems.edits
       .off('undone', this._cancel)
       .off('redone', this._cancel);
+    const eventManager = context.systems.map.renderer.events;
+    eventManager.setCursor('grab');
   }
 
 
@@ -181,5 +181,4 @@ export class AddPointMode extends AbstractMode {
   _cancel() {
     this.context.enter('browse');
   }
-
 }

modules/modes/BrowseMode.js

@@ -1,9 +1,9 @@
 import { AbstractMode } from './AbstractMode';
 import { operationPaste } from '../operations/paste';
-
+import {cursors} from './index';
+import { style } from 'd3';
 const DEBUG = false;
 
-
 /**
  * `BrowseMode` is the default mode that the editor is in.
  *  Nothing selected but users can hover or click on things.
@@ -19,6 +19,8 @@ export class BrowseMode extends AbstractMode {
     super(context);
     this.context = context;
     this.id = 'browse';
+    // Make sure the event handlers have `this` bound correctly
+    this._hover = this._hover.bind(this);
   }
 
 
@@ -29,11 +31,12 @@ export class BrowseMode extends AbstractMode {
     if (DEBUG) {
       console.log('BrowseMode: entering');  // eslint-disable-line no-console
     }
-
+    const context = this.context;
     this.operations = [ operationPaste(this.context) ];
     this._active = true;
-    this.context.enableBehaviors(['hover', 'select', 'drag', 'paste', 'lasso', 'map-interaction']);
-
+    context.enableBehaviors(['hover', 'select', 'drag', 'paste', 'lasso', 'map-interaction']);
+    context.behaviors.hover
+      .on('hoverchange', this._hover);
     // Get focus on the body.
     // I think this was done to remove focus from whatever
     // field the user was using in the sidebar/inspector?
@@ -54,12 +57,45 @@ export class BrowseMode extends AbstractMode {
     if (DEBUG) {
       console.log('BrowseMode: exiting');  // eslint-disable-line no-console
     }
+    this.context.behaviors.hover.off('hoverchange', this._hover);
   }
 
 
   sidebar() {
     console.error('error: do not call BrowseMode.sidebar anymore');   // eslint-disable-line no-console
   }
 
+  /**
+   * _hover
+   * Changes the cursor styling based on what geometry is hovered
+   */
+  _hover(eventData) {
+    const context = this.context;
+    const graph = context.graph();
+    const { target } = eventData;
+    const datum = target?.data;
+    const entity = datum && graph.hasEntity(datum.id);
+    const geom = entity?.geometry(graph) ?? 'grab';
+    const eventManager = this.context.systems.map.renderer.events;
+    if (geom) {
+      switch (geom) {
+        case 'line':
+          eventManager.setCursor(cursors.lineCursor);
+          break;
+        case 'vertex':
+          eventManager.setCursor(cursors.vertexCursor);
+          break;
+        case 'point':
+          eventManager.setCursor(cursors.pointCursor);
+          break;
+        case 'area':
+          eventManager.setCursor(cursors.areaCursor);
+          break;
+        default:
+            eventManager.setCursor('grab');
+          break;
+      }
+    }
+  }
 }
 

modules/modes/DrawAreaMode.js

@@ -8,7 +8,7 @@ import { actionMoveNode } from '../actions/move_node';
 import { actionNoop } from '../actions/noop';
 import { geoChooseEdge } from '../geo';
 import { osmNode, osmWay } from '../osm';
-
+import {cursors} from './index';
 const DEBUG = false;
 
 
@@ -70,7 +70,9 @@ export class DrawAreaMode extends AbstractMode {
     this._selectedData.clear();
 
     context.enableBehaviors(['hover', 'draw', 'map-interaction', 'map-nudging']);
-
+    context.behaviors.hover.on('hoverchange', this._hover);
+    const eventManager = context.systems.map.renderer.events;
+    eventManager.setCursor('crosshair');
     context.behaviors.draw
       .on('move', this._move)
       .on('click', this._click)
@@ -142,6 +144,9 @@ export class DrawAreaMode extends AbstractMode {
       .off('redone', this._undoOrRedo);
 
     context.resumeChangeDispatch();
+    context.behaviors.hover.off('hoverchange', this._hover);
+    const eventManager = context.systems.map.renderer.events;
+    eventManager.setCursor('grab');
   }
 
 
@@ -273,7 +278,8 @@ export class DrawAreaMode extends AbstractMode {
         return;
       }
     }
-
+    const eventManager = context.systems.map.renderer.events;
+    eventManager.setCursor('crosshair');
     this._clickLoc(loc);
   }
 
@@ -515,4 +521,29 @@ export class DrawAreaMode extends AbstractMode {
     this._cancel();
   }
 
+  /**
+   * _hover
+   * Changes the cursor styling based on what geometry is hovered
+   */
+  _hover(eventData) {
+    const context = this.context;
+    const graph = context.graph();
+    const { target } = eventData;
+    const datum = target?.data;
+    const entity = datum && graph.hasEntity(datum.id);
+    const geom = entity?.geometry(graph) ?? 'grab';
+    const eventManager = this.context.systems.map.renderer.events;
+    if (geom) {
+      switch (geom) {
+        case 'line':
+          eventManager.setCursor(cursors.connectLineCursor);
+          break;
+        case 'vertex':
+          eventManager.setCursor(cursors.connectVertexCursor);
+          break;
+        default:
+            eventManager.setCursor('crosshair');
+      }
+    }
+  }
 }