Merge branch 'release/1.6.1'

Author: mblomdahl

README.md

@@ -186,6 +186,10 @@ Returns **{sw: {lat: [number](https://developer.mozilla.org/en-US/docs/Web/JavaS
 
 ## Changelog
 
+### v. 1.6.1
+
+-   Improved move animation ([#55](https://github.com/mblomdahl/mapbox-gl-circle/issues/55)) 
+
 ### v. 1.6.0
 
 -   Add optional `before` argument to _MapboxCircle.addTo_

lib/main.js

@@ -68,11 +68,19 @@ class MapboxCircle {
     }
 
     /**
-     * @return {string} Unique circle handles source ID.
+     * @return {string} Unique circle center handle source ID.
      * @private
      */
-    get _circleHandlesSourceId() {
-        return 'circle-handles-source-' + this._instanceId;
+    get _circleCenterHandleSourceId() {
+        return 'circle-center-handle-source-' + this._instanceId;
+    }
+
+    /**
+     * @return {string} Unique radius handles source ID.
+     * @private
+     */
+    get _circleRadiusHandlesSourceId() {
+        return 'circle-radius-handles-source-' + this._instanceId;
     }
 
     /**
@@ -92,11 +100,19 @@ class MapboxCircle {
     }
 
     /**
-     * @return {string} Unique ID for edit handles stroke.
+     * @return {string} Unique ID for center handle stroke.
      * @private
      */
-    get _circleHandlesStrokeId() {
-        return 'circle-handles-stroke-' + this._instanceId;
+    get _circleCenterHandleStrokeId() {
+        return 'circle-center-handle-stroke-' + this._instanceId;
+    }
+
+    /**
+     * @return {string} Unique ID for radius handles stroke.
+     * @private
+     */
+    get _circleRadiusHandlesStrokeId() {
+        return 'circle-radius-handles-stroke-' + this._instanceId;
     }
 
     /**
@@ -306,17 +322,25 @@ class MapboxCircle {
     }
 
     /**
-     * Return GeoJSON for edit handles and stroke.
+     * Return GeoJSON for center handle and stroke.
      * @private
      * @return {FeatureCollection}
      */
-    _getHandlesGeoJSON() {
-        const features = [...this._handles, turfHelpers.point(this.center, {'type': 'center'})];
-        if (!(this._centerDragActive && this.radius < 10000)) {
-            features.push(this._circle);
+    _getCenterHandleGeoJSON() {
+        if (this._centerDragActive && this.radius < 10000) {
+            return turfHelpers.featureCollection([turfHelpers.point(this.center)]);
+        } else {
+            return turfHelpers.featureCollection([turfHelpers.point(this.center), this._circle]);
         }
+    }
 
-        return turfHelpers.featureCollection(features);
+    /**
+     * Return GeoJSON for radius handles and stroke.
+     * @private
+     * @return {FeatureCollection}
+     */
+    _getRadiusHandlesGeoJSON() {
+        return turfHelpers.featureCollection([...this._handles, this._circle]);
     }
 
     /**
@@ -329,7 +353,12 @@ class MapboxCircle {
         }
 
         if (this.options.editable) {
-            this._map.getSource(this._circleHandlesSourceId).setData(this._getHandlesGeoJSON());
+            if (!this._radiusDragActive) {
+                this._map.getSource(this._circleCenterHandleSourceId).setData(this._getCenterHandleGeoJSON());
+            }
+            if (!this._centerDragActive) {
+                this._map.getSource(this._circleRadiusHandlesSourceId).setData(this._getRadiusHandlesGeoJSON());
+            }
         }
     }
 
@@ -440,7 +469,7 @@ class MapboxCircle {
     _onCenterHandleMouseDown() {
         this._centerDragActive = true;
         this.map.on('mousemove', this._onCenterHandleMouseMove);
-        this.map.addLayer(this._getCircleHandlesStrokeLayer(), this._circleCenterHandleId);
+        this.map.addLayer(this._getCenterHandleStrokeLayer(), this._circleCenterHandleId);
         this._suspendHandleListeners('center');
         this.map.once('mouseup', this._onCenterHandleMouseUpOrMapMouseOut);
         this.map.once('mouseout', this._onCenterHandleMouseUpOrMapMouseOut); // Deactivate drag if mouse leaves canvas.
@@ -471,7 +500,7 @@ class MapboxCircle {
             case 'mouseout': this.map.off('mouseup', this._onCenterHandleMouseUpOrMapMouseOut); break;
         }
         this._resumeHandleListeners('center');
-        this.map.removeLayer(this._circleHandlesStrokeId);
+        this.map.removeLayer(this._circleCenterHandleStrokeId);
         this._resetHandles(this._circleCenterHandleId);
         if (newCenter[0] !== this._lastCenterLngLat[0] || newCenter[1] !== this._lastCenterLngLat[1]) {
             this.center = newCenter;
@@ -566,7 +595,7 @@ class MapboxCircle {
     _onRadiusHandlesMouseDown(event) {
         this._radiusDragActive = true;
         this.map.on('mousemove', this._onRadiusHandlesMouseMove);
-        this.map.addLayer(this._getCircleHandlesStrokeLayer(), this._circleRadiusHandlesId);
+        this.map.addLayer(this._getRadiusHandlesStrokeLayer(), this._circleRadiusHandlesId);
         this._suspendHandleListeners('radius');
         this.map.once('mouseup', this._onRadiusHandlesMouseUpOrMapMouseOut);
         this.map.once('mouseout', this._onRadiusHandlesMouseUpOrMapMouseOut); // Deactivate drag if mouse leaves canvas.
@@ -592,7 +621,7 @@ class MapboxCircle {
         const newRadius = this.radius;
         this._radiusDragActive = false;
         this.map.off('mousemove', this._onRadiusHandlesMouseMove);
-        this.map.removeLayer(this._circleHandlesStrokeId);
+        this.map.removeLayer(this._circleRadiusHandlesStrokeId);
         switch (event.type) {
             case 'mouseup': this.map.off('mouseout', this._onRadiusHandlesMouseUpOrMapMouseOut); break;
             case 'mouseout': this.map.off('mouseup', this._onRadiusHandlesMouseUpOrMapMouseOut); break;
@@ -869,13 +898,25 @@ class MapboxCircle {
     }
 
     /**
-     * @return {Object} GeoJSON map source for edit handles.
+     * @return {Object} GeoJSON map source for center handle.
      * @private
      */
-    _getHandlesMapSource() {
+    _getCenterHandleMapSource() {
         return {
             type: 'geojson',
-            data: this._getHandlesGeoJSON(),
+            data: this._getCenterHandleGeoJSON(),
+            buffer: 1
+        };
+    }
+
+    /**
+     * @return {Object} GeoJSON map source for radius handles.
+     * @private
+     */
+    _getRadiusHandlesMapSource() {
+        return {
+            type: 'geojson',
+            data: this._getRadiusHandlesGeoJSON(),
             buffer: 1
         };
     }
@@ -916,44 +957,62 @@ class MapboxCircle {
     }
 
     /**
-     * @return {Object} Style layer for the edit handles' stroke.
+     * @return {Object} Style layer for the center handle's stroke.
      * @private
      */
-    _getCircleHandlesStrokeLayer() {
+    _getCenterHandleStrokeLayer() {
         if (this._centerDragActive && this.radius < 10000) {
             // Inspired by node_modules/mapbox-gl/src/ui/control/scale_control.js:getDistance
             const y = this.map._container.clientHeight / 2;
             const x = this.map._container.clientWidth;
             const horizontalPixelsPerMeter = x / turfDistance(
                 this.map.unproject([0, y]).toArray(), this.map.unproject([x, y]).toArray(), 'meters');
             return {
-                id: this._circleHandlesStrokeId,
+                id: this._circleCenterHandleStrokeId,
                 type: 'circle',
-                source: this._circleHandlesSourceId,
+                source: this._circleCenterHandleSourceId,
                 paint: {
                     'circle-radius': horizontalPixelsPerMeter * this.radius,
                     'circle-opacity': 0,
                     'circle-stroke-color': this.options.strokeColor,
-                    'circle-stroke-opacity': this.options.strokeOpacity,
+                    'circle-stroke-opacity': this.options.strokeOpacity * .5,
                     'circle-stroke-width': this.options.strokeWeight
                 },
-                filter: ['all', ['==', '$type', 'Point'], ['==', 'type', 'center']]
+                filter: ['==', '$type', 'Point']
             };
         } else {
             return {
-                id: this._circleHandlesStrokeId,
+                id: this._circleCenterHandleStrokeId,
                 type: 'line',
-                source: this._circleHandlesSourceId,
+                source: this._circleCenterHandleSourceId,
                 paint: {
                     'line-color': this.options.strokeColor,
                     'line-width': this.options.strokeWeight,
-                    'line-opacity': this.options.strokeOpacity
+                    'line-opacity': this.options.strokeOpacity * 0.5
                 },
                 filter: ['==', '$type', 'Polygon']
             };
         }
     }
 
+    /**
+     * @return {Object} Style layer for the radius handles' stroke.
+     * @private
+     */
+    _getRadiusHandlesStrokeLayer() {
+        return {
+            id: this._circleRadiusHandlesStrokeId,
+            type: 'line',
+            source: this._circleRadiusHandlesSourceId,
+            paint: {
+                'line-color': this.options.strokeColor,
+                'line-width': this.options.strokeWeight,
+                'line-opacity': this.options.strokeOpacity * 0.5
+            },
+            filter: ['==', '$type', 'Polygon']
+        };
+    }
+
     /**
      * @return {Object} Default paint style for edit handles.
      * @private
@@ -969,30 +1028,30 @@ class MapboxCircle {
     }
 
     /**
-     * @return {Object} Style layer for the circle's center edit handle.
+     * @return {Object} Style layer for the circle's center handle.
      * @private
      */
     _getCircleCenterHandleLayer() {
         return {
             id: this._circleCenterHandleId,
             type: 'circle',
-            source: this._circleHandlesSourceId,
+            source: this._circleCenterHandleSourceId,
             paint: this._getEditHandleDefaultPaintOptions(),
-            filter: ['all', ['==', '$type', 'Point'], ['==', 'type', 'center']]
+            filter: ['==', '$type', 'Point']
         };
     }
 
     /**
-     * @return {Object} Style layer for the circle's radius edit handles.
+     * @return {Object} Style layer for the circle's radius handles.
      * @private
      */
     _getCircleRadiusHandlesLayer() {
         return {
             id: this._circleRadiusHandlesId,
             type: 'circle',
-            source: this._circleHandlesSourceId,
+            source: this._circleRadiusHandlesSourceId,
             paint: this._getEditHandleDefaultPaintOptions(),
-            filter: ['all', ['==', '$type', 'Point'], ['!=', 'type', 'center']]
+            filter: ['==', '$type', 'Point']
         };
     }
 
@@ -1057,7 +1116,8 @@ class MapboxCircle {
             map.on('zoomend', this._onZoomEnd);
 
             if (this.options.editable) {
-                map.addSource(this._circleHandlesSourceId, this._getHandlesMapSource());
+                map.addSource(this._circleCenterHandleSourceId, this._getCenterHandleMapSource());
+                map.addSource(this._circleRadiusHandlesSourceId, this._getRadiusHandlesMapSource());
 
                 map.addLayer(this._getCircleCenterHandleLayer());
                 this._bindCenterHandleListeners(map);
@@ -1112,7 +1172,8 @@ class MapboxCircle {
             this._unbindCenterHandleListeners();
             this.map.removeLayer(this._circleCenterHandleId);
 
-            this.map.removeSource(this._circleHandlesSourceId);
+            this.map.removeSource(this._circleRadiusHandlesSourceId);
+            this.map.removeSource(this._circleCenterHandleSourceId);
         }
 
         this.map.off('zoomend', this._onZoomEnd);

package-lock.json

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