Merge branch 'cursor_handling' into main

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

@@ -43,8 +43,10 @@ export class AddPointMode extends AbstractMode {
     this._active = true;
     const context = this.context;
 
-    context.enableBehaviors(['hover', 'draw', 'map-interaction']);
+    const eventManager = context.systems.map.renderer.events;
+    eventManager.setCursor('crosshair');
 
+    context.enableBehaviors(['hover', 'draw', 'map-interaction']);
     context.behaviors.draw
       .on('click', this._click)
       .on('cancel', this._cancel)
@@ -67,6 +69,9 @@ export class AddPointMode extends AbstractMode {
 
     const context = this.context;
 
+    const eventManager = context.systems.map.renderer.events;
+    eventManager.setCursor('grab');
+
     context.behaviors.draw
       .off('click', this._click)
       .off('cancel', this._cancel)
@@ -130,16 +135,10 @@ export class AddPointMode extends AbstractMode {
     const l10n = context.systems.l10n;
 
     const node = osmNode({ loc: loc, tags: this.defaultTags });
-//    this.nodeID = node.id;
+
     editor.perform(actionAddEntity(node));
-    editor.commit({
-      annotation: l10n.t('operations.add.annotation.point'),
-      selectedIDs: [node.id]
-    });
-    context.enter('select-osm', {
-      selection: { osm: [node.id] },
-      newFeature: true
-    });
+    editor.commit({ annotation: l10n.t('operations.add.annotation.point'), selectedIDs: [node.id] });
+    context.enter('select-osm', { selection: { osm: [node.id] }, newFeature: true });
   }
 
 
@@ -154,14 +153,8 @@ export class AddPointMode extends AbstractMode {
 
     const node = osmNode({ tags: this.defaultTags });
     editor.perform(actionAddMidpoint({ loc: loc, edge: edge }, node));
-    editor.commit({
-      annotation: l10n.t('operations.add.annotation.vertex'),
-      selectedIDs: [node.id]
-    });
-    context.enter('select-osm', {
-      selection: { osm: [node.id] },
-      newFeature: true
-    });
+    editor.commit({ annotation: l10n.t('operations.add.annotation.vertex'), selectedIDs: [node.id] });
+    context.enter('select-osm', { selection: { osm: [node.id] }, newFeature: true });
   }
 
 
@@ -185,14 +178,8 @@ export class AddPointMode extends AbstractMode {
     }
 
     editor.perform(actionChangeTags(node.id, tags));
-    editor.commit({
-      annotation: l10n.t('operations.add.annotation.point'),
-      selectedIDs: [node.id]
-    });
-    context.enter('select-osm', {
-      selection: { osm: [node.id] },
-      newFeature: false
-    });
+    editor.commit({ annotation: l10n.t('operations.add.annotation.point'), selectedIDs: [node.id] });
+    context.enter('select-osm', { selection: { osm: [node.id] }, newFeature: false });
   }
 
 
@@ -203,5 +190,4 @@ export class AddPointMode extends AbstractMode {
   _cancel() {
     this.context.enter('browse');
   }
-
 }

modules/modes/BrowseMode.js

@@ -1,5 +1,6 @@
 import { AbstractMode } from './AbstractMode';
 import { operationPaste } from '../operations/paste';
+import { cursors } from './index';
 
 const DEBUG = false;
 
@@ -19,6 +20,9 @@ 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);
   }
 
 
@@ -31,9 +35,14 @@ export class BrowseMode extends AbstractMode {
       console.log('BrowseMode: entering');  // eslint-disable-line no-console
     }
 
+    const context = this.context;
     this._active = true;
-    this.operations = [ operationPaste(this.context) ];
-    this.context.enableBehaviors(['hover', 'select', 'drag', 'paste', 'lasso', 'map-interaction']);
+
+    this.operations = [ operationPaste(context) ];
+    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
@@ -58,12 +67,44 @@ 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 editor = context.systems.editor;
+    const graph = editor.staging.graph;
+    const eventManager = context.systems.map.renderer.events;
+
+    const target = eventData.target;
+    const datum = target?.data;
+    const entity = datum && graph.hasEntity(datum.id);
+    const geom = entity?.geometry(graph) ?? 'unknown';
+
+    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;
+    }
   }
-
 }