Merge branch 'release/1.5.2'

README.md

@@ -184,6 +184,11 @@ Returns **{sw: {lat: [number](https://developer.mozilla.org/en-US/docs/Web/JavaS
 
 ## Changelog
 
+### v. 1.5.2
+
+-   Fix bug where the circle would always show a horizontal resize cursor on radius handles,
+    irrespective of position (top/bottom/right/left)
+
 ### v. 1.5.1
 
 -   Bug fixes with respect to cursor style when hovering over editable-and-clickable circles

lib/main.js

@@ -9,6 +9,7 @@ const turfBboxPoly = require('@turf/bbox-polygon');
 const turfTruncate = require('@turf/truncate');
 const turfDestination = require('@turf/destination');
 const turfDistance = require('@turf/distance');
+const turfBearing = require('@turf/bearing');
 const turfHelpers = require('@turf/helpers');
 
 if (window && typeof window.MapboxCircle === 'function') {
@@ -448,12 +449,36 @@ class MapboxCircle {
         }
     }
 
+    /**
+     * Return vertical or horizontal resize arrow depending on if mouse is at left-right or top-bottom edit handles.
+     * @param {MapMouseEvent} event
+     * @return {string} 'ew-resize' or 'ns-resize'
+     * @private
+     */
+    _getRadiusHandleCursorStyle(event) {
+        const bearing = turfBearing(event.lngLat.toArray(), this._currentCenterLngLat, true);
+
+        if (bearing > 270+45 || bearing <= 45) { // South.
+            return 'ns-resize';
+        }
+        if (bearing > 45 && bearing <= 90+45) { // West.
+            return 'ew-resize';
+        }
+        if (bearing > 90+45 && bearing <= 180+45) { // North.
+            return 'ns-resize';
+        }
+        if (bearing > 270-45 && bearing <= 270+45) { // East.
+            return 'ew-resize';
+        }
+    }
+
     /**
      * Highlight radius handles and disable panning.
+     * @param {MapMouseEvent} event
      * @private
      */
-    _onRadiusHandlesMouseEnter() {
-        this._highlightHandles(this._circleRadiusHandlesId, 'ew-resize');
+    _onRadiusHandlesMouseEnter(event) {
+        this._highlightHandles(this._circleRadiusHandlesId, this._getRadiusHandleCursorStyle(event));
     }
 
     /**
@@ -482,15 +507,16 @@ class MapboxCircle {
 
     /**
      * Highlight radius handles, disable panning and add mouse-move listener (emulating drag until mouse-up event).
+     * @param {MapMouseEvent} event
      * @private
      */
-    _onRadiusHandlesMouseDown() {
+    _onRadiusHandlesMouseDown(event) {
         this._radiusDragActive = true;
         this.map.on('mousemove', this._onRadiusHandlesMouseMove);
         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, 'ew-resize');
+        this._highlightHandles(this._circleRadiusHandlesId, this._getRadiusHandleCursorStyle(event));
     }
 
     /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-circle",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "author": "Smith Micro Software, Inc.",
   "license": "ISC",
   "description": "A google.maps.Circle replacement for Mapbox GL JS API",
@@ -86,6 +86,7 @@
     "@turf/bbox-polygon": "^4.5.2",
     "@turf/circle": "^4.5.2",
     "@turf/destination": "^4.5.2",
+    "@turf/bearing": "^4.5.2",
     "@turf/distance": "^4.5.2",
     "@turf/helpers": "^4.5.2",
     "@turf/truncate": "^4.5.2",