Updating @mapbox/mapbox-gl-draw to version to 1.4.3

index.js

@@ -1,4 +1,4 @@
-export const CircleMode = require('./lib/modes/CircleMode');
-export const DragCircleMode = require('./lib/modes/DragCircleMode');
-export const DirectMode = require('./lib/modes/DirectModeOverride');
-export const SimpleSelectMode = require('./lib/modes/SimpleSelectModeOverride');
+export const CircleMode = require("./lib/modes/CircleMode");
+export const DragCircleMode = require("./lib/modes/DragCircleMode");
+export const DirectMode = require("./lib/modes/DirectModeOverride");
+export const SimpleSelectMode = require("./lib/modes/SimpleSelectModeOverride");

lib/modes/CircleMode.js

@@ -1,51 +1,53 @@
-const MapboxDraw = require('@mapbox/mapbox-gl-draw');
-const Constants = require('@mapbox/mapbox-gl-draw/src/constants');
-const doubleClickZoom = require('@mapbox/mapbox-gl-draw/src/lib/double_click_zoom');
-const circle = require('@turf/circle').default;
+const MapboxDraw = require("@mapbox/mapbox-gl-draw");
+const circle = require("@turf/circle").default;
 
-const CircleMode = {...MapboxDraw.modes.draw_polygon};
+const Constants = MapboxDraw.constants;
+const { doubleClickZoom } = MapboxDraw.lib;
+const CircleMode = { ...MapboxDraw.modes.draw_polygon };
 const DEFAULT_RADIUS_IN_KM = 2;
 
-CircleMode.onSetup = function(opts) {
-  const polygon = this.newFeature({
-    type: Constants.geojsonTypes.FEATURE,
-    properties: {
-      isCircle: true,
-      center: []
-    },
-    geometry: {
-      type: Constants.geojsonTypes.POLYGON,
-      coordinates: [[]]
-    }
-  });
+CircleMode.onSetup = function (opts) {
+    const polygon = this.newFeature({
+        type: Constants.geojsonTypes.FEATURE,
+        properties: {
+            isCircle: true,
+            center: [],
+        },
+        geometry: {
+            type: Constants.geojsonTypes.POLYGON,
+            coordinates: [[]],
+        },
+    });
 
-  this.addFeature(polygon);
+    this.addFeature(polygon);
 
-  this.clearSelectedFeatures();
-  doubleClickZoom.disable(this);
-  this.updateUIClasses({ mouse: Constants.cursors.ADD });
-  this.activateUIButton(Constants.types.POLYGON);
-  this.setActionableState({
-    trash: true
-  });
+    this.clearSelectedFeatures();
+    doubleClickZoom.disable(this);
+    this.updateUIClasses({ mouse: Constants.cursors.ADD });
+    this.activateUIButton(Constants.types.POLYGON);
+    this.setActionableState({
+        trash: true,
+    });
 
-  return {
-    initialRadiusInKm: opts.initialRadiusInKm || DEFAULT_RADIUS_IN_KM,
-    polygon,
-    currentVertexPosition: 0
-  };
+    return {
+        initialRadiusInKm: opts.initialRadiusInKm || DEFAULT_RADIUS_IN_KM,
+        polygon,
+        currentVertexPosition: 0,
+    };
 };
 
-CircleMode.clickAnywhere = function(state, e) {
-  if (state.currentVertexPosition === 0) {
-    state.currentVertexPosition++;
-    const center = [e.lngLat.lng, e.lngLat.lat];
-    const circleFeature = circle(center, state.initialRadiusInKm);
-    state.polygon.incomingCoords(circleFeature.geometry.coordinates);
-    state.polygon.properties.center = center;
-    state.polygon.properties.radiusInKm = state.initialRadiusInKm;
-  }
-  return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
+CircleMode.clickAnywhere = function (state, e) {
+    if (state.currentVertexPosition === 0) {
+        state.currentVertexPosition++;
+        const center = [e.lngLat.lng, e.lngLat.lat];
+        const circleFeature = circle(center, state.initialRadiusInKm);
+        state.polygon.incomingCoords(circleFeature.geometry.coordinates);
+        state.polygon.properties.center = center;
+        state.polygon.properties.radiusInKm = state.initialRadiusInKm;
+    }
+    return this.changeMode(Constants.modes.SIMPLE_SELECT, {
+        featureIds: [state.polygon.id],
+    });
 };
 
-module.exports = CircleMode;
+module.exports = CircleMode;

lib/modes/DirectModeOverride.js

@@ -1,72 +1,84 @@
-const MapboxDraw = require('@mapbox/mapbox-gl-draw');
-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 constrainFeatureMovement = require('@mapbox/mapbox-gl-draw/src/lib/constrain_feature_movement');
-const distance = require('@turf/distance').default;
-const turfHelpers = require('@turf/helpers');
-const circle = require('@turf/circle').default;
-const createSupplementaryPointsForCircle = require('../utils/create_supplementary_points_circle');
+const MapboxDraw = require("@mapbox/mapbox-gl-draw");
+const distance = require("@turf/distance").default;
+const turfHelpers = require("@turf/helpers");
+const circle = require("@turf/circle").default;
+const createSupplementaryPointsForCircle = require("../utils/create_supplementary_points_circle");
 
+const Constants = MapboxDraw.constants;
+const { moveFeatures, createSupplementaryPoints, constrainFeatureMovement } =
+    MapboxDraw.lib;
 
 const DirectModeOverride = MapboxDraw.modes.direct_select;
 
-DirectModeOverride.dragFeature = function(state, e, delta) {
-  moveFeatures(this.getSelected(), delta);
-  this.getSelected()
-    .filter(feature => feature.properties.isCircle)
-    .map(circle => circle.properties.center)
-    .forEach(center => {
-      center[0] += delta.lng;
-      center[1] += delta.lat;
-    });
-  state.dragMoveLocation = e.lngLat;
+DirectModeOverride.dragFeature = function (state, e, delta) {
+    moveFeatures(this.getSelected(), delta);
+    this.getSelected()
+        .filter((feature) => feature.properties.isCircle)
+        .map((circle) => circle.properties.center)
+        .forEach((center) => {
+            center[0] += delta.lng;
+            center[1] += delta.lat;
+        });
+    state.dragMoveLocation = e.lngLat;
 };
 
-DirectModeOverride.dragVertex = function(state, e, delta) {
-  if (state.feature.properties.isCircle) {
-    const center = state.feature.properties.center;
-    const movedVertex = [e.lngLat.lng, e.lngLat.lat];
-    const radius = distance(turfHelpers.point(center), turfHelpers.point(movedVertex), {units: 'kilometers'});
-    const circleFeature = circle(center, radius);
-    state.feature.incomingCoords(circleFeature.geometry.coordinates);
-    state.feature.properties.radiusInKm = radius;
-  } else {
-    const selectedCoords = state.selectedCoordPaths.map(coord_path => state.feature.getCoordinate(coord_path));
-    const selectedCoordPoints = selectedCoords.map(coords => ({
-      type: Constants.geojsonTypes.FEATURE,
-      properties: {},
-      geometry: {
-        type: Constants.geojsonTypes.POINT,
-        coordinates: coords
-      }
-    }));
+DirectModeOverride.dragVertex = function (state, e, delta) {
+    if (state.feature.properties.isCircle) {
+        const center = state.feature.properties.center;
+        const movedVertex = [e.lngLat.lng, e.lngLat.lat];
+        const radius = distance(
+            turfHelpers.point(center),
+            turfHelpers.point(movedVertex),
+            { units: "kilometers" }
+        );
+        const circleFeature = circle(center, radius);
+        state.feature.incomingCoords(circleFeature.geometry.coordinates);
+        state.feature.properties.radiusInKm = radius;
+    } else {
+        const selectedCoords = state.selectedCoordPaths.map((coord_path) =>
+            state.feature.getCoordinate(coord_path)
+        );
+        const selectedCoordPoints = selectedCoords.map((coords) => ({
+            type: Constants.geojsonTypes.FEATURE,
+            properties: {},
+            geometry: {
+                type: Constants.geojsonTypes.POINT,
+                coordinates: coords,
+            },
+        }));
 
-    const constrainedDelta = constrainFeatureMovement(selectedCoordPoints, delta);
-    for (let i = 0; i < selectedCoords.length; i++) {
-      const coord = selectedCoords[i];
-      state.feature.updateCoordinate(state.selectedCoordPaths[i], coord[0] + constrainedDelta.lng, coord[1] + constrainedDelta.lat);
+        const constrainedDelta = constrainFeatureMovement(
+            selectedCoordPoints,
+            delta
+        );
+        for (let i = 0; i < selectedCoords.length; i++) {
+            const coord = selectedCoords[i];
+            state.feature.updateCoordinate(
+                state.selectedCoordPaths[i],
+                coord[0] + constrainedDelta.lng,
+                coord[1] + constrainedDelta.lat
+            );
+        }
     }
-  }
 };
 
 DirectModeOverride.toDisplayFeatures = function (state, geojson, push) {
-  if (state.featureId === geojson.properties.id) {
-    geojson.properties.active = Constants.activeStates.ACTIVE;
-    push(geojson);
-    const supplementaryPoints = geojson.properties.user_isCircle ? createSupplementaryPointsForCircle(geojson)
-      : createSupplementaryPoints(geojson, {
-        map: this.map,
-        midpoints: true,
-        selectedPaths: state.selectedCoordPaths
-      });
-    supplementaryPoints.forEach(push);
-  } else {
-    geojson.properties.active = Constants.activeStates.INACTIVE;
-    push(geojson);
-  }
-  this.fireActionable(state);
-
-}
+    if (state.featureId === geojson.properties.id) {
+        geojson.properties.active = Constants.activeStates.ACTIVE;
+        push(geojson);
+        const supplementaryPoints = geojson.properties.user_isCircle
+            ? createSupplementaryPointsForCircle(geojson)
+            : createSupplementaryPoints(geojson, {
+                  map: this.map,
+                  midpoints: true,
+                  selectedPaths: state.selectedCoordPaths,
+              });
+        supplementaryPoints.forEach(push);
+    } else {
+        geojson.properties.active = Constants.activeStates.INACTIVE;
+        push(geojson);
+    }
+    this.fireActionable(state);
+};
 
-module.exports = DirectModeOverride;
+module.exports = DirectModeOverride;

lib/modes/DragCircleMode.js

@@ -1,77 +1,82 @@
-const MapboxDraw = require('@mapbox/mapbox-gl-draw');
-const Constants = require('@mapbox/mapbox-gl-draw/src/constants');
-const doubleClickZoom = require('@mapbox/mapbox-gl-draw/src/lib/double_click_zoom');
-const dragPan = require('../utils/drag_pan');
-const circle = require('@turf/circle').default;
-const distance = require('@turf/distance').default;
-const turfHelpers = require('@turf/helpers');
+const MapboxDraw = require("@mapbox/mapbox-gl-draw");
+const circle = require("@turf/circle").default;
+const distance = require("@turf/distance").default;
+const turfHelpers = require("@turf/helpers");
+const dragPan = require("../utils/drag_pan");
 
-const DragCircleMode = {...MapboxDraw.modes.draw_polygon};
+const Constants = MapboxDraw.constants;
+const { doubleClickZoom } = MapboxDraw.lib;
+const DragCircleMode = { ...MapboxDraw.modes.draw_polygon };
 
-DragCircleMode.onSetup = function(opts) {
-  const polygon = this.newFeature({
-    type: Constants.geojsonTypes.FEATURE,
-    properties: {
-      isCircle: true,
-      center: []
-    },
-    geometry: {
-      type: Constants.geojsonTypes.POLYGON,
-      coordinates: [[]]
-    }
-  });
+DragCircleMode.onSetup = function (opts) {
+    const polygon = this.newFeature({
+        type: Constants.geojsonTypes.FEATURE,
+        properties: {
+            isCircle: true,
+            center: [],
+        },
+        geometry: {
+            type: Constants.geojsonTypes.POLYGON,
+            coordinates: [[]],
+        },
+    });
 
-  this.addFeature(polygon);
+    this.addFeature(polygon);
 
-  this.clearSelectedFeatures();
-  doubleClickZoom.disable(this);
-  dragPan.disable(this);
-  this.updateUIClasses({ mouse: Constants.cursors.ADD });
-  this.activateUIButton(Constants.types.POLYGON);
-  this.setActionableState({
-    trash: true
-  });
+    this.clearSelectedFeatures();
+    doubleClickZoom.disable(this);
+    dragPan.disable(this);
+    this.updateUIClasses({ mouse: Constants.cursors.ADD });
+    this.activateUIButton(Constants.types.POLYGON);
+    this.setActionableState({
+        trash: true,
+    });
 
-  return {
-    polygon,
-    currentVertexPosition: 0
-  };
+    return {
+        polygon,
+        currentVertexPosition: 0,
+    };
 };
 
 DragCircleMode.onMouseDown = DragCircleMode.onTouchStart = function (state, e) {
-  const currentCenter = state.polygon.properties.center;
-  if (currentCenter.length === 0) {
-    state.polygon.properties.center = [e.lngLat.lng, e.lngLat.lat];
-  }
+    const currentCenter = state.polygon.properties.center;
+    if (currentCenter.length === 0) {
+        state.polygon.properties.center = [e.lngLat.lng, e.lngLat.lat];
+    }
 };
 
 DragCircleMode.onDrag = DragCircleMode.onMouseMove = function (state, e) {
-  const center = state.polygon.properties.center;
-  if (center.length > 0) {
-    const distanceInKm = distance(
-      turfHelpers.point(center),
-      turfHelpers.point([e.lngLat.lng, e.lngLat.lat]),
-      { units : 'kilometers'});
-    const circleFeature = circle(center, distanceInKm);
-    state.polygon.incomingCoords(circleFeature.geometry.coordinates);
-    state.polygon.properties.radiusInKm = distanceInKm;
-  }
+    const center = state.polygon.properties.center;
+    if (center.length > 0) {
+        const distanceInKm = distance(
+            turfHelpers.point(center),
+            turfHelpers.point([e.lngLat.lng, e.lngLat.lat]),
+            { units: "kilometers" }
+        );
+        const circleFeature = circle(center, distanceInKm);
+        state.polygon.incomingCoords(circleFeature.geometry.coordinates);
+        state.polygon.properties.radiusInKm = distanceInKm;
+    }
 };
 
 DragCircleMode.onMouseUp = DragCircleMode.onTouchEnd = function (state, e) {
-  dragPan.enable(this);
-  return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
+    dragPan.enable(this);
+    return this.changeMode(Constants.modes.SIMPLE_SELECT, {
+        featureIds: [state.polygon.id],
+    });
 };
 
 DragCircleMode.onClick = DragCircleMode.onTap = function (state, e) {
-  // don't draw the circle if its a tap or click event
-  state.polygon.properties.center = [];
+    // don't draw the circle if its a tap or click event
+    state.polygon.properties.center = [];
 };
 
-DragCircleMode.toDisplayFeatures = function(state, geojson, display) {
-  const isActivePolygon = geojson.properties.id === state.polygon.id;
-  geojson.properties.active = (isActivePolygon) ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE;
-  return display(geojson);
+DragCircleMode.toDisplayFeatures = function (state, geojson, display) {
+    const isActivePolygon = geojson.properties.id === state.polygon.id;
+    geojson.properties.active = isActivePolygon
+        ? Constants.activeStates.ACTIVE
+        : Constants.activeStates.INACTIVE;
+    return display(geojson);
 };
 
-module.exports = DragCircleMode;
+module.exports = DragCircleMode;