First stab at fixing #59; not found to be very reliable due to mapbox…

…/mapbox-gl-js#4954
smithmicro · Oct 28, 2017 · 2483cf9 · 2483cf9
1 parent aae816e
commit 2483cf9
Showing 1 changed file with 46 additions and 13 deletions.
diff --git a/lib/main.js b/lib/main.js
@@ -293,7 +293,7 @@ class MapboxCircle {
         const steps = this.options.refineStroke ? Math.max((Math.sqrt(Math.trunc(radius * 0.25)) * zoom ^ 2), 64) : 64;
         const unit = 'meters';
 
-        if (!(this._centerDragActive && radius < 10000)) {
+        if (!((this._centerDragActive || this._radiusDragActive) && radius < 10000)) {
             this._circle = turfCircle(center, radius, steps, unit, this.options.properties);
         }
         if (this.options.editable) {
@@ -340,7 +340,21 @@ class MapboxCircle {
      * @return {FeatureCollection}
      */
     _getRadiusHandlesGeoJSON() {
-        return turfHelpers.featureCollection([...this._handles, this._circle]);
+        const features = this._handles.map((handle) => { handle.properties['type'] = 'radius'; return handle; });
+        if (this._radiusDragActive) {
+            if (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');
+                features.push(turfHelpers.point(this.center, {'type': 'center', 'radius': this.radius * horizontalPixelsPerMeter}));
+            } else {
+                features.push(this._circle);
+            }
+        }
+
+        return turfHelpers.featureCollection(features);
     }
 
     /**
@@ -1000,17 +1014,36 @@ class MapboxCircle {
      * @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']
-        };
+        if (this._radiusDragActive && this.radius < 10000) {
+            return {
+                id: this._circleRadiusHandlesStrokeId,
+                type: 'circle',
+                source: this._circleRadiusHandlesSourceId,
+                paint: {
+                    'circle-radius': {
+                        'type': 'identity',
+                        'property': 'radius'
+                    },
+                    'circle-opacity': 0,
+                    'circle-stroke-color': this.options.strokeColor,
+                    'circle-stroke-opacity': this.options.strokeOpacity * .5,
+                    'circle-stroke-width': this.options.strokeWeight
+                },
+                filter: ['all', ['==', '$type', 'Point'], ['!=', 'type', 'radius']]
+            };
+        } else {
+            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']
+            };
+        }
     }
 
     /**