Merge branch 'release/1.5.1'

Author: vtepliuk

README.md

@@ -184,6 +184,11 @@ Returns **{sw: {lat: [number](https://developer.mozilla.org/en-US/docs/Web/JavaS
 
 ## Changelog
 
+### v. 1.5.1
+
+-   Bug fixes with respect to cursor style when hovering over editable-and-clickable circles
+    [SPFAM-1293](https://projects.smithmicro.net/browse/SPFAM-1293)
+
 ### v. 1.5.0
 
 -   Added support for passing `minRadius` and `maxRadius` options to _MapboxCircle_ constructor

lib/main.js

@@ -197,25 +197,29 @@ class MapboxCircle {
         /** @const {boolean} */ this._radiusDragActive = false;
 
         [ // Bind all event handlers.
+            '_onZoomEnd',
             '_onCenterHandleMouseEnter',
-            '_onRadiusHandlesMouseEnter',
+            '_onCenterHandleResumeEvents',
             '_onCenterHandleSuspendEvents',
+            '_onCenterHandleMouseDown',
+            '_onCenterHandleMouseMove',
+            '_onCenterHandleMouseUpOrMapMouseOut',
+            '_onCenterChanged',
+            '_onCenterHandleMouseLeave',
+            '_onRadiusHandlesMouseEnter',
             '_onRadiusHandlesSuspendEvents',
-            '_onCenterHandleResumeEvents',
             '_onRadiusHandlesResumeEvents',
-            '_onCenterHandleMouseDown',
             '_onRadiusHandlesMouseDown',
-            '_onCenterHandleMouseMove',
             '_onRadiusHandlesMouseMove',
-            '_onCenterHandleMouseUpOrMapMouseOut',
             '_onRadiusHandlesMouseUpOrMapMouseOut',
-            '_onCenterChanged',
             '_onRadiusChanged',
             '_onRadiusHandlesMouseLeave',
-            '_onCenterHandleMouseLeave',
+            '_onCircleFillMouseMove',
+            '_onCircleFillSuspendEvents',
+            '_onCircleFillResumeEvents',
             '_onCircleFillContextMenu',
             '_onCircleFillClick',
-            '_onZoomEnd',
+            '_onCircleFillMouseLeave',
             '_onMapStyleDataLoading'
         ].forEach((eventHandler) => {
             this[eventHandler] = this[eventHandler].bind(this);
@@ -270,6 +274,20 @@ class MapboxCircle {
         this._map.getSource(this._circleSourceId).setData(this._asGeoJSON());
     }
 
+    /**
+     * Returns true if cursor point is on a center/radius edit handle.
+     * @param {{x: number, y: number}} point
+     * @return {boolean}
+     * @private
+     */
+    _pointOnHandle(point) {
+        return !MapboxCircle.__MONOSTATE.activeEditableCircles.every((circleWithHandles) => {
+            const handleLayersAtCursor = this.map.queryRenderedFeatures(
+                point, {layers: [circleWithHandles._circleCenterHandleId, circleWithHandles._circleRadiusHandlesId]});
+            return handleLayersAtCursor.length === 0;
+        });
+    }
+
     /**
      * Return GeoJSON for circle and handles.
      * @private
@@ -288,6 +306,7 @@ class MapboxCircle {
     _suspendHandleListeners(typeOfHandle) {
         MapboxCircle.__MONOSTATE.broadcast.emit('suspendCenterHandleListeners', this._instanceId, typeOfHandle);
         MapboxCircle.__MONOSTATE.broadcast.emit('suspendRadiusHandlesListeners', this._instanceId, typeOfHandle);
+        MapboxCircle.__MONOSTATE.broadcast.emit('suspendCircleFillListeners', this._instanceId, typeOfHandle);
     }
 
     /**
@@ -298,17 +317,19 @@ class MapboxCircle {
     _resumeHandleListeners(typeOfHandle) {
         MapboxCircle.__MONOSTATE.broadcast.emit('resumeCenterHandleListeners', this._instanceId, typeOfHandle);
         MapboxCircle.__MONOSTATE.broadcast.emit('resumeRadiusHandlesListeners', this._instanceId, typeOfHandle);
+        MapboxCircle.__MONOSTATE.broadcast.emit('resumeCircleFillListeners', this._instanceId, typeOfHandle);
     }
 
     /**
-     * Disable map panning, 'click' cursor and highlight handle with new fill color.
+     * Disable map panning, set cursor style and highlight handle with new fill color.
      * @param {string} layerId
+     * @param {string} cursor
      * @private
      */
-    _highlightHandles(layerId) {
+    _highlightHandles(layerId, cursor) {
         this.map.dragPan.disable();
         this.map.setPaintProperty(layerId, 'circle-color', this.options.fillColor);
-        this.map.getCanvas().style.cursor = 'pointer';
+        this.map.getCanvas().style.cursor = cursor;
     }
 
     /**
@@ -335,7 +356,7 @@ class MapboxCircle {
      * @private
      */
     _onCenterHandleMouseEnter() {
-        this._highlightHandles(this._circleCenterHandleId);
+        this._highlightHandles(this._circleCenterHandleId, 'move');
     }
 
     /**
@@ -372,7 +393,7 @@ class MapboxCircle {
         this._suspendHandleListeners('center');
         this.map.once('mouseup', this._onCenterHandleMouseUpOrMapMouseOut);
         this.map.once('mouseout', this._onCenterHandleMouseUpOrMapMouseOut); // Deactivate drag if mouse leaves canvas.
-        this._highlightHandles(this._circleCenterHandleId);
+        this._highlightHandles(this._circleCenterHandleId, 'move');
     }
 
     /**
@@ -404,6 +425,15 @@ class MapboxCircle {
         }
     }
 
+    /**
+     * Update _lastCenterLngLat on `centerchanged` event.
+     * @private
+     */
+    _onCenterChanged() {
+        this._lastCenterLngLat[0] = this.center[0];
+        this._lastCenterLngLat[1] = this.center[1];
+    }
+
     /**
      * Reset center handle and re-enable panning, unless actively dragging.
      * @private
@@ -418,21 +448,12 @@ class MapboxCircle {
         }
     }
 
-    /**
-     * Update _lastCenterLngLat on `centerchanged` event.
-     * @private
-     */
-    _onCenterChanged() {
-        this._lastCenterLngLat[0] = this.center[0];
-        this._lastCenterLngLat[1] = this.center[1];
-    }
-
     /**
      * Highlight radius handles and disable panning.
      * @private
      */
     _onRadiusHandlesMouseEnter() {
-        this._highlightHandles(this._circleRadiusHandlesId);
+        this._highlightHandles(this._circleRadiusHandlesId, 'ew-resize');
     }
 
     /**
@@ -469,7 +490,7 @@ class MapboxCircle {
         this._suspendHandleListeners('radius');
         this.map.once('mouseup', this._onRadiusHandlesMouseUpOrMapMouseOut);
         this.map.once('mouseout', this._onRadiusHandlesMouseUpOrMapMouseOut); // Deactivate drag if mouse leaves canvas.
-        this._highlightHandles(this._circleRadiusHandlesId);
+        this._highlightHandles(this._circleRadiusHandlesId, 'ew-resize');
     }
 
     /**
@@ -501,6 +522,14 @@ class MapboxCircle {
         }
     }
 
+    /**
+     * Update _lastRadius on `radiuschanged` event.
+     * @private
+     */
+    _onRadiusChanged() {
+        this._lastRadius = this.radius;
+    }
+
     /**
      * Reset radius handles and re-enable panning, unless actively dragging.
      * @private
@@ -516,11 +545,30 @@ class MapboxCircle {
     }
 
     /**
-     * Update _lastRadius on `radiuschanged` event.
+     * Set pointer cursor when moving over circle fill, and it's clickable.
+     * @param {MapMouseEvent} event
      * @private
      */
-    _onRadiusChanged() {
-        this._lastRadius = this.radius;
+    _onCircleFillMouseMove(event) {
+        if (this._eventEmitter.listeners('click').length > 0 && !this._pointOnHandle(event.point)) {
+            event.target.getCanvas().style.cursor = 'pointer';
+        }
+    }
+
+    /**
+     * Stop listening to circle fill events.
+     * @private
+     */
+    _onCircleFillSuspendEvents() {
+        this._unbindCircleFillListeners();
+    }
+
+    /**
+     * Start listening to circle fill events again.
+     * @private
+     */
+    _onCircleFillResumeEvents() {
+        this._bindCircleFillListeners();
     }
 
     /**
@@ -529,6 +577,10 @@ class MapboxCircle {
      * @private
      */
     _onCircleFillContextMenu(event) {
+        if (this._pointOnHandle(event.point)) {
+            /* No click events while on a center/radius edit handle. */ return;
+        }
+
         if (event.originalEvent.ctrlKey && MapboxCircle._checkIfBrowserIsSafari()) {
             // This hack comes from SPFAM-1090, aimed towards eliminating the extra 'click' event that's
             // emitted by Safari when performing a right-click by holding the ctrl button.
@@ -544,6 +596,10 @@ class MapboxCircle {
      * @private
      */
     _onCircleFillClick(event) {
+        if (this._pointOnHandle(event.point)) {
+            /* No click events while on a center/radius edit handle. */ return;
+        }
+
         if (!this.__safariContextMenuEventHackEnabled) {
             this._eventEmitter.emit('click', event);
         } else {
@@ -552,6 +608,17 @@ class MapboxCircle {
         }
     }
 
+    /**
+     * Remove pointer cursor when leaving circle fill.
+     * @param {MapMouseEvent} event
+     * @private
+     */
+    _onCircleFillMouseLeave(event) {
+        if (this._eventEmitter.listeners('click').length > 0 && !this._pointOnHandle(event.point)) {
+            event.target.getCanvas().style.cursor = '';
+        }
+    }
+
     /**
      * When map style is changed, remove circle assets from map and add it back on next MapboxGL 'styledata' event.
      * @param {MapDataEvent} event
@@ -628,6 +695,8 @@ class MapboxCircle {
         const layerId = this._circleFillId;
         map.on('click', layerId, this._onCircleFillClick);
         map.on('contextmenu', layerId, this._onCircleFillContextMenu);
+        map.on('mousemove', layerId, this._onCircleFillMouseMove);
+        map.on('mouseleave', layerId, this._onCircleFillMouseLeave);
     }
 
     /**
@@ -640,6 +709,8 @@ class MapboxCircle {
         const layerId = this._circleFillId;
         map.off('click', layerId, this._onCircleFillClick);
         map.off('contextmenu', layerId, this._onCircleFillContextMenu);
+        map.off('mousemove', layerId, this._onCircleFillMouseMove);
+        map.off('mouseleave', layerId, this._onCircleFillMouseLeave);
     }
 
     /**
@@ -652,6 +723,9 @@ class MapboxCircle {
 
         MapboxCircle.__MONOSTATE.broadcast.on('suspendRadiusHandlesListeners', this._onRadiusHandlesSuspendEvents);
         MapboxCircle.__MONOSTATE.broadcast.on('resumeRadiusHandlesListeners', this._onRadiusHandlesResumeEvents);
+
+        MapboxCircle.__MONOSTATE.broadcast.on('suspendCircleFillListeners', this._onCircleFillSuspendEvents);
+        MapboxCircle.__MONOSTATE.broadcast.on('resumeCircleFillListeners', this._onCircleFillResumeEvents);
     }
 
     /**
@@ -666,8 +740,13 @@ class MapboxCircle {
 
         MapboxCircle.__MONOSTATE.broadcast.removeListener(
             'suspendRadiusHandlesListeners', this._onRadiusHandlesSuspendEvents);
-        MapboxCircle.__MONOSTATE.broadcast.removeListener('resumeRadiusHandlesListeners',
-            this._onRadiusHandlesResumeEvents);
+        MapboxCircle.__MONOSTATE.broadcast.removeListener(
+            'resumeRadiusHandlesListeners', this._onRadiusHandlesResumeEvents);
+
+        MapboxCircle.__MONOSTATE.broadcast.removeListener(
+            'suspendCircleFillListeners', this._onCircleFillSuspendEvents);
+        MapboxCircle.__MONOSTATE.broadcast.removeListener(
+            'resumeCircleFillListeners', this._onCircleFillResumeEvents);
     }
 
     /**

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-circle",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "author": "Smith Micro Software, Inc.",
   "license": "ISC",
   "description": "A google.maps.Circle replacement for Mapbox GL JS API",