DBC22-6491 DMS signs

src/frontend/app/components/Map/feature.js

@@ -12,6 +12,8 @@ export default class RideFeature extends Feature {
     super(...args);
     const props = args[0] || {};
 
+    this.set('cursor', props.cursor || 'pointer');
+
     if (props.style) {
       this.normal = Styles.pin[props.style].normal;
       this.active = Styles.pin[props.style].active;
@@ -24,7 +26,7 @@ export default class RideFeature extends Feature {
     this.action = props.action;
     this.on('propertychange', this.propertyChanged)
     this.set('visible', props.isVisible);
-    this.set('isPreview', false)
+    this.set('isPreview', false);
   }
 
   // used to update available styles based on the underlying event changing

src/frontend/app/components/Map/helpers.js

@@ -38,22 +38,37 @@ proj4.defs([
 
 export const MapContext = createContext();
 
-// handles toggling the hover state over OpenLayers features
+// handles toggling the hover state over OpenLayers features and displaying
+// their preferred cursor
 export function pointerMove(e) {
+  const mapEl = e.map.getTargetElement();
+  const currentCursor = mapEl.style.cursor;
+
   const feature = e.map.getFeaturesAtPixel(e.pixel, {
     layerFilter: (layer) => layer.listenForHover,
   })[0];
-  if (feature?.noHover || feature?.get('isPreview')) { return; }
+  if (feature?.noHover || feature?.get('isPreview')) {
+    return;
+  }
   if (!feature?.styleState) {
     if (e.map.hoveredFeature) {
       e.map.hoveredFeature.set('hovered', false);
       e.map.hoveredFeature = null;
     }
+    if (currentCursor !== 'default') {
+      mapEl.style.cursor = 'default';
+    }
     return;
   }
+
   if (e.map.hoveredFeature && e.map.hoveredFeature !== feature) {
     e.map.hoveredFeature.set('hovered', false);
   }
+
+  if (currentCursor === 'default') {
+    mapEl.style.cursor = feature.get('cursor');
+  }
+
   e.map.hoveredFeature = feature;
   if (!feature.get('hovered')) {
     feature.set('hovered', true);
@@ -68,10 +83,14 @@ export function click(evt, dispatch) {
   const feature = evt.map.getFeaturesAtPixel(evt.pixel,{
     layerFilter: (layer) => layer.listenForClicks,
   })[0];
-
+  console.log(feature);
   if (feature?.noSelect || feature?.get('noSelect')) { return; }
 
-  if (feature?.styleState) { // new selection
+    console.log(feature.get('type'));
+  if (feature.get('type') === 'sign') {
+    console.log(feature.get('raw'));
+  }
+  else if (feature?.styleState) { // new selection
     selectFeature(evt.map, feature);
     const raw = feature.pointFeature.get('raw');
     dispatch({ type: 'reset form', value: raw, showPreview: true, showForm: false });
@@ -252,7 +271,6 @@ export class Drag extends PointerInteraction {
     super({
       handleDownEvent: handleDownEvent,
       handleDragEvent: handleDragEvent,
-      handleMoveEvent: handleMoveEvent,
       handleUpEvent: handleUpEvent,
     });
     options = options || {};
@@ -267,12 +285,6 @@ export class Drag extends PointerInteraction {
      */
     this.coordinate_ = null;
 
-    /**
-     * @type {string|undefined}
-     * @private
-     */
-    this.cursor_ = 'pointer';
-
     /**
      * @type {Feature}
      * @private
@@ -306,59 +318,44 @@ function handleDownEvent(evt) {
     layerFilter: (layer) => layer.canDragFeatures,
   })[0];
 
-  if (feature) {
-    if (feature.noSelect || feature.get('isPreview') || feature.get('noSelect')) { return false; }
+  const canDrag = feature?.get('canDrag');
+  if (canDrag) {
     map.route?.clear();
     this.coordinate_ = evt.coordinate;
     feature.set('dragStartCoordinate', [...feature.getGeometry().getCoordinates()]);
     feature.getGeometry().setCoordinates(evt.coordinate);
     this.feature_ = feature;
   }
 
-  return !!feature;
+  return canDrag;
 }
 
 /**
  * @param {import('ol/MapBrowserEvent.js').default} evt Map browser event.
  */
 function handleDragEvent(evt) {
+  const mapEl = evt.map.getTargetElement();
+  if (mapEl.style.cursor !== 'grabbing') {
+    this.previousCursor_ = mapEl.style.cursor;
+    mapEl.style.cursor = 'grabbing';
+  }
   this.feature_.getGeometry().setCoordinates(evt.coordinate);
   this.coordinate_ = evt.coordinate;
 }
 
-/**
- * @param {import('ol/MapBrowserEvent.js').default} evt Event.
- */
-function handleMoveEvent(evt) {
-  if (this.cursor_) {
-    const map = evt.map;
-    const feature = map.getFeaturesAtPixel(evt.pixel, {
-      layerFilter: (layer) => layer.canDragFeatures,
-    })[0];
-    const element = evt.map.getTargetElement();
-    if (feature) {
-      if (feature.noHover || feature.get('isPreview')) { return; }
-      if (element.style.cursor != this.cursor_) {
-        this.previousCursor_ = element.style.cursor;
-        element.style.cursor = this.cursor_;
-      }
-    } else if (this.previousCursor_ !== undefined) {
-      element.style.cursor = this.previousCursor_;
-      this.previousCursor_ = undefined;
-    }
-  }
-}
-
 /**
  * @return {boolean} `false` to stop the drag sequence.
  */
 function handleUpEvent(e) {
+  e.map.getTargetElement().style.cursor = this.previousCursor_;
+  this.previousCursor_ = undefined;
   if (e.originalEvent?.button === 0) { // ignore right or middle click
     this.endHandler(e, this.feature_, this.dispatch);
     this.coordinate_ = null;
     if (this.feature_.upHandler) { this.feature_.upHandler(e) }
     this.feature_ = null;
   }
+
   return false;
 }
 

src/frontend/app/components/Map/index.jsx

@@ -4,7 +4,7 @@ import AsyncSelect from 'react-select/async';
 
 
 import { DebuggingContext, MapContext } from '../../contexts';
-import { createMap, ll2g } from './helpers';
+import { createMap, ll2g, pointerMove } from './helpers';
 import { get } from '../../shared/helpers';
 
 import { GEOCODER_CLIENT_ID, GEOCODER_HOST } from '../../env';
@@ -89,6 +89,7 @@ export default function Map({ children, dispatch, event, clickHandler }) {
     const map = createMap();
     map.setTarget(elementRef.current);
     map.on('click', click);
+    map.on('pointermove', pointerMove);
     map.on('propertychange', (e) => {
       if (e.key !== 'base') { return; }
       if (e.target.get('base') === 'vector') {

src/frontend/app/components/Map/BoundariesLayer.jsx → src/frontend/app/components/Map/layers/Boundaries.jsx

@@ -5,10 +5,10 @@
 import { useSelector } from 'react-redux';
 import {
   selectAllServiceAreaBoundaries, selectServiceAreaBoundariesStatus,
-} from '../../slices/serviceAreaBoundaries';
+} from '../../../slices/serviceAreaBoundaries';
 import {
   selectAllDistrictBoundaries, selectDistrictBoundariesStatus,
-} from '../../slices/districtBoundaries';
+} from '../../../slices/districtBoundaries';
 
 // Openlayers
 import { Polygon } from 'ol/geom';
@@ -19,7 +19,7 @@
 import VectorSource from 'ol/source/Vector';
 
 // Internal imports
-import { MapContext } from '../../contexts.js';
+import { MapContext } from '../../../contexts';
 
 function layerStyle(feature, visibleLayers) {
   return feature.get('visible') ? feature.get('style') : null ;
@@ -179,7 +179,7 @@
     if (map && serviceAreaStatus === 'idle' && Object.keys(serviceAreaBoundaries).length > 0) {
       const layer = map.get('boundaries');
       if (layer) {
         const source = layer.getSource();
         for (const id in serviceAreaBoundaries) {
           addBoundary(map, serviceAreaBoundaries[id], 'serviceAreas', areaStyle);
         }