From 2483cf90d39fcea31136c6d3bde82be83b4c4274 Mon Sep 17 00:00:00 2001
From: vtepliuk <victoria.tepliuk@gmail.com>
Date: Sat, 28 Oct 2017 21:37:40 +0200
Subject: [PATCH] First stab at fixing #59; not found to be very reliable due
 to mapbox/mapbox-gl-js#4954

---
 lib/main.js | 59 +++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/lib/main.js b/lib/main.js
index d71d47a..4f9b3ec 100644
--- 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']
+            };
+        }
     }
 
     /**