1. Added CircleMode by extending draw_polygon mode to render ci

rcle.
    2. Added DirectModeOverride and SimpleSelectModeOverride to ena
ble circle resize / dragging.
    3. Added create_supplementary_points_circle to generate four ha
ndler points to resize the circle.

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+coverage/

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Anvesh Arrabochu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+# mapbox-gl-draw-circle

__tests__/modes/CircleMode.test.js

@@ -0,0 +1,138 @@
+jest.mock('@mapbox/mapbox-gl-draw/src/lib/double_click_zoom', () => ({
+  enable: jest.fn(),
+  disable: jest.fn()
+}));
+
+jest.mock('@turf/circle', () => ({
+  default: jest.fn()
+}));
+
+let CircleMode = require('../../lib/modes/CircleMode');
+const mockFeature = {
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": []
+  }
+};
+const doubleClickZoom = require('@mapbox/mapbox-gl-draw/src/lib/double_click_zoom');
+const Constants = require('@mapbox/mapbox-gl-draw/src/constants');
+const circle = require('@turf/circle');
+
+describe('CircleMode tests', () => {
+  beforeEach(() => {
+    CircleMode = {
+      ...CircleMode,
+      addFeature: jest.fn(),
+      newFeature: jest.fn(),
+      clearSelectedFeatures: jest.fn(),
+      updateUIClasses: jest.fn(),
+      activateUIButton: jest.fn(),
+      setActionableState: jest.fn(),
+      changeMode: jest.fn()
+    }
+  });
+
+  afterEach(() => {
+    CircleMode.changeMode.mockClear();
+  });
+
+  it('should setup state with a polygon and initialRadius', () => {
+    CircleMode.newFeature.mockReturnValue(mockFeature);
+    expect(CircleMode.onSetup({})).toEqual({
+      initialRadiusInKm: 2,
+      polygon: mockFeature,
+      currentVertexPosition: 0
+    });
+    expect(CircleMode.newFeature).toHaveBeenCalled();
+  });
+
+  it('should setup state with initialRadius as given in options', () => {
+    CircleMode.newFeature.mockReturnValue(mockFeature);
+    expect(CircleMode.onSetup({ initialRadiusInKm: 1 })).toEqual({
+      initialRadiusInKm: 1,
+      polygon: mockFeature,
+      currentVertexPosition: 0
+    });
+    expect(CircleMode.newFeature).toHaveBeenCalled();
+  });
+
+  it('should add feature onSetup', () => {
+    CircleMode.newFeature.mockReturnValue(mockFeature);
+    CircleMode.onSetup({});
+    expect(CircleMode.addFeature).toHaveBeenCalledWith(mockFeature);
+  });
+
+  it('should clear selected features on setup', () => {
+    CircleMode.onSetup({});
+    expect(CircleMode.clearSelectedFeatures).toHaveBeenCalled();
+  });
+
+  it('should disable double click zoom on setup', () => {
+    CircleMode.onSetup({});
+    expect(doubleClickZoom.disable).toHaveBeenCalled();
+  });
+
+  it('should set the cursor to "add" button', () => {
+    CircleMode.onSetup({});
+    expect(CircleMode.updateUIClasses).toHaveBeenCalledWith({
+      mouse: Constants.cursors.ADD
+    });
+  });
+
+  it('should activate the polygon button on ui', () => {
+    CircleMode.onSetup({});
+    expect(CircleMode.activateUIButton).toHaveBeenCalledWith(Constants.types.POLYGON);
+  });
+
+  it('should set actionable state by enabling trash', () => {
+    CircleMode.onSetup({});
+    expect(CircleMode.setActionableState).toHaveBeenCalledWith({
+      trash: true
+    });
+  });
+
+  it('should generate a circle feature and change mode to simple select when clickAnywhere is invoked', () => {
+    circle.default.mockReturnValue({
+      geometry: {
+        coordinates: []
+      }
+    });
+    const mockState = {
+      currentVertexPosition: 0,
+      initialRadiusInKm: 1,
+      polygon: {
+        id: 'random_id',
+        incomingCoords: jest.fn(),
+        properties: {}
+      }
+    };
+    const mockEvent = {
+      lngLat: { lat: 0, lng: 0 }
+    };
+
+    CircleMode.clickAnywhere(mockState, mockEvent);
+    expect(mockState.currentVertexPosition).toBe(1);
+    expect(circle.default).toHaveBeenCalledWith([0, 0], 1);
+    expect(CircleMode.changeMode).toHaveBeenCalledWith(
+      Constants.modes.SIMPLE_SELECT, { featureIds: [mockState.polygon.id] }
+    );
+  });
+
+  it('should change mode to simple_select without adding a polygon to state if currentVertexPosition is not 0', () => {
+    const mockState = {
+      currentVertexPosition: 1,
+      polygon: {}
+    };
+    const mockEvent = {
+      lngLat: { lat: 0, lng: 0 }
+    };
+
+    CircleMode.clickAnywhere(mockState, mockEvent);
+    expect(mockState.currentVertexPosition).toBe(1);
+    expect(CircleMode.changeMode).toHaveBeenCalledWith(
+      Constants.modes.SIMPLE_SELECT, { featureIds: [mockState.polygon.id] }
+    )
+  });
+});

__tests__/modes/DirectModeOverride.test.js

@@ -0,0 +1,136 @@
+
+jest.mock('@mapbox/mapbox-gl-draw/src/lib/create_supplementary_points');
+jest.mock('@mapbox/mapbox-gl-draw/src/lib/move_features');
+jest.mock('@mapbox/mapbox-gl-draw/src/lib/constrain_feature_movement');
+jest.mock('@turf/distance', () => ({ default: jest.fn() }));
+jest.mock('@turf/helpers');
+jest.mock('@turf/circle', () => ({ default: jest.fn() }));
+jest.mock('../../lib/utils/create_supplementary_points_circle');
+
+const createSupplementaryPoints = require('@mapbox/mapbox-gl-draw/src/lib/create_supplementary_points');
+const moveFeatures = require('@mapbox/mapbox-gl-draw/src/lib/move_features');
+const Constants = require('@mapbox/mapbox-gl-draw/src/constants');
+const distance = require('@turf/distance').default;
+const circle = require('@turf/circle').default;
+const createSupplementaryPointsForCircle = require('../../lib/utils/create_supplementary_points_circle');
+
+let DirectMode = require('../../lib/modes/DirectModeOverride');
+
+describe('DirectMode tests', () => {
+  let mockState = {};
+  let mockEvent = {};
+  let mockDelta = {};
+  let mockFeatures;
+
+  beforeEach(() => {
+    DirectMode = {
+      ...DirectMode,
+      getSelected: jest.fn(),
+      fireActionable: jest.fn()
+    };
+
+    mockEvent = {
+      lngLat: { lat: 0, lng: 0 }
+    };
+
+    mockDelta = {
+      lat: 1,
+      lng: 1
+    };
+    mockFeatures = [
+      {
+        properties: {
+          isCircle: true,
+          center: [0, 0]
+        },
+        geometry: {
+          coordinates: []
+        }
+      }
+    ];
+    mockState = {
+      featureId: 1,
+      feature: {
+        ...mockFeatures[0],
+        incomingCoords: jest.fn()
+      }
+    }
+    DirectMode.getSelected.mockReturnValue(mockFeatures);
+  });
+
+  afterEach(() => {
+    createSupplementaryPoints.mockClear();
+    createSupplementaryPointsForCircle.mockClear();
+  });
+
+  it('should move selected features when dragFeature is invoked', () => {
+    DirectMode.dragFeature(mockState, mockEvent, mockDelta);
+    expect(moveFeatures).toHaveBeenCalledWith(mockFeatures, mockDelta);
+  });
+
+  it('should update the center of the selected feature if its a circle', () => {
+    DirectMode.dragFeature(mockState, mockEvent, mockDelta);
+    expect(mockFeatures[0].properties.center).toEqual([1, 1]);
+  });
+
+  it('should set dragMoveLocation to the event lngLat', () => {
+    DirectMode.dragFeature(mockState, mockEvent, mockDelta);
+    expect(mockState.dragMoveLocation).toEqual(mockEvent.lngLat);
+  });
+
+  it('should update the radius when dragVertex is invoked and the feature is a circle', () => {
+    distance.mockReturnValue(1);
+    circle.mockReturnValue(mockFeatures[0]);
+    DirectMode.dragVertex(mockState, mockEvent, mockDelta);
+    expect(mockState.feature.incomingCoords).toHaveBeenCalledWith(mockFeatures[0].geometry.coordinates);
+    expect(mockState.feature.properties.radiusInKm).toEqual(1);
+  });
+
+  it(`should display points generated using 
+        createSupplementaryPointsForCircle when the feature is a circle`, () => {
+      const mockDisplayFn = jest.fn();
+      const mockGeoJSON = {
+        properties: {
+          id: 1,
+          user_isCircle: true
+        }
+      };
+      createSupplementaryPointsForCircle.mockReturnValue([]);
+      DirectMode.toDisplayFeatures(mockState, mockGeoJSON, mockDisplayFn);
+      expect(mockDisplayFn).toHaveBeenCalledWith(mockGeoJSON);
+      expect(createSupplementaryPointsForCircle).toHaveBeenCalledWith(mockGeoJSON);
+      expect(DirectMode.fireActionable).toHaveBeenCalled();
+    });
+
+    it(`should display points generated using createSupplementaryPoints
+        when the feature is not a circle`, () => {
+        createSupplementaryPoints.mockReturnValue([]);
+        const mockDisplayFn = jest.fn();
+        const mockGeoJSON = {
+          properties: {
+            id: 1,
+            user_isCircle: false
+          }
+        };
+        DirectMode.toDisplayFeatures(mockState, mockGeoJSON, mockDisplayFn);
+        expect(mockDisplayFn).toHaveBeenCalledWith(mockGeoJSON);
+        expect(createSupplementaryPoints).toHaveBeenCalledWith(mockGeoJSON, {
+          map: undefined, midpoints: true, selectedPaths: undefined
+        });
+        expect(DirectMode.fireActionable).toHaveBeenCalled();
+      });
+
+    it('should not create supplementary vertices if the feature is not selected', () => {
+        const mockDisplayFn = jest.fn();
+        const mockGeoJSON = {
+          properties: {
+            id: 2,
+            user_isCircle: false
+          }
+        };
+        DirectMode.toDisplayFeatures(mockState, mockGeoJSON, mockDisplayFn);
+        expect(mockDisplayFn).toHaveBeenCalledWith(mockGeoJSON);
+        expect(DirectMode.fireActionable).toHaveBeenCalled();
+        expect(createSupplementaryPoints).not.toHaveBeenCalled();
+    });
+});