git dif

package.json

@@ -79,6 +79,7 @@
     "@mapbox/geojson-normalize": "0.0.1",
     "@mapbox/geojsonhint": "3.0.0",
     "@mapbox/point-geometry": "0.1.0",
+    "@turf/turf": "^5.1.6",
     "hat": "0.0.3",
     "lodash.isequal": "^4.2.0",
     "xtend": "^4.0.1"

src/modes/direct_select.js

@@ -132,8 +132,8 @@ DirectSelect.onSetup = function(opts) {
     selectedCoordPaths: opts.coordPath ? [opts.coordPath] : []
   };
 
-  this.setSelectedCoordinates(this.pathsToCoordinates(featureId, state.selectedCoordPaths));
   this.setSelected(featureId);
+  this.setSelectedCoordinates(this.pathsToCoordinates(featureId, state.selectedCoordPaths));
   doubleClickZoom.disable(this);
 
   this.setActionableState({
@@ -165,7 +165,11 @@ DirectSelect.toDisplayFeatures = function(state, geojson, push) {
 };
 
 DirectSelect.onTrash = function(state) {
-  state.selectedCoordPaths.sort().reverse().forEach(id => state.feature.removeCoordinate(id));
+  // Uses number-aware sorting to make sure '9' < '10'. Comparison is reversed because we want them
+  // in reverse order so that we can remove by index safely.
+  state.selectedCoordPaths
+    .sort((a, b) => b.localeCompare(a, 'en', { numeric: true }))
+    .forEach(id => state.feature.removeCoordinate(id));
   this.fireUpdate();
   state.selectedCoordPaths = [];
   this.clearSelectedCoordinates();
@@ -208,15 +212,24 @@ DirectSelect.onDrag = function(state, e) {
   if (state.canDragMove !== true) return;
   state.dragMoving = true;
   e.originalEvent.stopPropagation();
+  let lngLat = e.lngLat;
 
-  const delta = {
-    lng: e.lngLat.lng - state.dragMoveLocation.lng,
-    lat: e.lngLat.lat - state.dragMoveLocation.lat
-  };
-  if (state.selectedCoordPaths.length > 0) this.dragVertex(state, e, delta);
-  else this.dragFeature(state, e, delta);
+  if (state.selectedCoordPaths.length === 1) {
+    lngLat = this._ctx.snapping.snapCoord(e.lngLat);
+    // following the dragVertex() path below seems to cause a lag where our point
+    // ends up one step behind the snapped location
+    state.feature.updateCoordinate(state.selectedCoordPaths[0], lngLat.lng, lngLat.lat);
+  } else {
 
-  state.dragMoveLocation = e.lngLat;
+    const delta = {
+      lng: lngLat.lng - state.dragMoveLocation.lng,
+      lat: lngLat.lat - state.dragMoveLocation.lat
+    };
+
+    if (state.selectedCoordPaths.length > 0) this.dragVertex(state, e, delta);
+    else this.dragFeature(state, e, delta);
+  }
+  state.dragMoveLocation = lngLat;
 };
 
 DirectSelect.onClick = function(state, e) {

src/modes/draw_line_string.js

@@ -70,25 +70,28 @@ DrawLineString.onSetup = function(opts) {
 
 DrawLineString.clickAnywhere = function(state, e) {
   if (state.currentVertexPosition > 0 && isEventAtCoordinates(e, state.line.coordinates[state.currentVertexPosition - 1]) ||
-      state.direction === 'backwards' && isEventAtCoordinates(e, state.line.coordinates[state.currentVertexPosition + 1])) {
+  state.direction === 'backwards' && isEventAtCoordinates(e, state.line.coordinates[state.currentVertexPosition + 1])) {
     return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.line.id] });
   }
   this.updateUIClasses({ mouse: Constants.cursors.ADD });
-  state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
+  const lngLat = this._ctx.snapping.snapCoord(e.lngLat);
+  state.line.updateCoordinate(state.currentVertexPosition, lngLat.lng, lngLat.lat);
   if (state.direction === 'forward') {
     state.currentVertexPosition++;
-    state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
+    state.line.updateCoordinate(state.currentVertexPosition, lngLat.lng, lngLat.lat);
   } else {
-    state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
+    state.line.addCoordinate(0, lngLat.lng, lngLat.lat);
   }
 };
 
 DrawLineString.clickOnVertex = function(state) {
   return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.line.id] });
 };
 
+
 DrawLineString.onMouseMove = function(state, e) {
-  state.line.updateCoordinate(state.currentVertexPosition, e.lngLat.lng, e.lngLat.lat);
+  const lngLat = this._ctx.snapping.snapCoord(e.lngLat);
+  state.line.updateCoordinate(state.currentVertexPosition, lngLat.lng, lngLat.lat);
   if (CommonSelectors.isVertex(e)) {
     this.updateUIClasses({ mouse: Constants.cursors.POINTER });
   }
@@ -149,4 +152,5 @@ DrawLineString.toDisplayFeatures = function(state, geojson, display) {
   display(geojson);
 };
 
+
 module.exports = DrawLineString;

src/modes/draw_point.js

@@ -33,7 +33,9 @@ DrawPoint.stopDrawingAndRemove = function(state) {
 
 DrawPoint.onTap = DrawPoint.onClick = function(state, e) {
   this.updateUIClasses({ mouse: Constants.cursors.MOVE });
-  state.point.updateCoordinate('', e.lngLat.lng, e.lngLat.lat);
+  const lngLat = this._ctx.snapping.snapCoord(e.lngLat);
+
+  state.point.updateCoordinate('', lngLat.lng, lngLat.lat);
   this.map.fire(Constants.events.CREATE, {
     features: [state.point.toGeoJSON()]
   });

src/modes/draw_polygon.js

@@ -37,17 +37,19 @@ DrawPolygon.clickAnywhere = function(state, e) {
     return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
   }
   this.updateUIClasses({ mouse: Constants.cursors.ADD });
-  state.polygon.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
+  const lngLat = this._ctx.snapping.snapCoord(e.lngLat);
+  state.polygon.updateCoordinate(`0.${state.currentVertexPosition}`, lngLat.lng, lngLat.lat);
   state.currentVertexPosition++;
-  state.polygon.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
+  state.polygon.updateCoordinate(`0.${state.currentVertexPosition}`, lngLat.lng, lngLat.lat);
 };
 
 DrawPolygon.clickOnVertex = function(state) {
   return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
 };
 
 DrawPolygon.onMouseMove = function(state, e) {
-  state.polygon.updateCoordinate(`0.${state.currentVertexPosition}`, e.lngLat.lng, e.lngLat.lat);
+  const lngLat = this._ctx.snapping.snapCoord(e.lngLat);
+  state.polygon.updateCoordinate(`0.${state.currentVertexPosition}`, lngLat.lng, lngLat.lat);
   if (CommonSelectors.isVertex(e)) {
     this.updateUIClasses({ mouse: Constants.cursors.POINTER });
   }

src/modes/simple_select.js

@@ -253,15 +253,20 @@ SimpleSelect.dragMove = function(state, e) {
   // Dragging when drag move is enabled
   state.dragMoving = true;
   e.originalEvent.stopPropagation();
-
-  const delta = {
-    lng: e.lngLat.lng - state.dragMoveLocation.lng,
-    lat: e.lngLat.lat - state.dragMoveLocation.lat
-  };
-
-  moveFeatures(this.getSelected(), delta);
-
-  state.dragMoveLocation = e.lngLat;
+  let lngLat = e.lngLat;
+  // TODO more efficient
+  if (this.getSelected().length === 1 && this.getSelected()[0].type === 'Point') {
+    lngLat = this._ctx.snapping.snapCoord(e.lngLat);
+    this.getSelected()[0].incomingCoords([lngLat.lng, lngLat.lat])
+  } else {
+    const delta = {
+      lng: lngLat.lng - state.dragMoveLocation.lng,
+      lat: lngLat.lat - state.dragMoveLocation.lat
+    };
+
+    moveFeatures(this.getSelected(), delta);
+  }
+  state.dragMoveLocation = lngLat;
 };
 
 SimpleSelect.onMouseUp = function(state, e) {

src/options.js

@@ -1,5 +1,5 @@
-const xtend = require('xtend');
-const Constants = require('./constants');
+const xtend = require("xtend");
+const Constants = require("./constants");
 
 const defaultOptions = {
   defaultMode: Constants.modes.SIMPLE_SELECT,
@@ -9,10 +9,16 @@ const defaultOptions = {
   touchBuffer: 25,
   boxSelect: true,
   displayControlsDefault: true,
-  styles: require('./lib/theme'),
-  modes: require('./modes'),
+  styles: require("./lib/theme"),
+  modes: require("./modes"),
   controls: {},
-  userProperties: false
+  userProperties: false,
+  snapLayers: [],
+  snapFeatureFilter: undefined,
+  snapDistance: 20,
+  snapping: {
+    layers: [],
+  },
 };
 
 const showControls = {
@@ -21,7 +27,7 @@ const showControls = {
   polygon: true,
   trash: true,
   combine_features: true,
-  uncombine_features: true
+  uncombine_features: true,
 };
 
 const hideControls = {
@@ -30,20 +36,21 @@ const hideControls = {
   polygon: false,
   trash: false,
   combine_features: false,
-  uncombine_features: false
+  uncombine_features: false,
 };
 
 function addSources(styles, sourceBucket) {
   return styles.map((style) => {
     if (style.source) return style;
     return xtend(style, {
       id: `${style.id}.${sourceBucket}`,
-      source: (sourceBucket === 'hot') ? Constants.sources.HOT : Constants.sources.COLD
+      source:
+        sourceBucket === "hot" ? Constants.sources.HOT : Constants.sources.COLD,
     });
   });
 }
 
-module.exports = function(options = {}) {
+module.exports = function (options = {}) {
   let withDefaults = xtend(options);
 
   if (!options.controls) {
@@ -59,7 +66,9 @@ module.exports = function(options = {}) {
   withDefaults = xtend(defaultOptions, withDefaults);
 
   // Layers with a shared source should be adjacent for performance reasons
-  withDefaults.styles = addSources(withDefaults.styles, 'cold').concat(addSources(withDefaults.styles, 'hot'));
+  withDefaults.styles = addSources(withDefaults.styles, "cold").concat(
+    addSources(withDefaults.styles, "hot")
+  );
 
   return withDefaults;
 };

src/render.js

@@ -1,8 +1,10 @@
-const Constants = require('./constants');
+const Constants = require("./constants");
 
 module.exports = function render() {
   const store = this;
-  const mapExists = store.ctx.map && store.ctx.map.getSource(Constants.sources.HOT) !== undefined;
+  const mapExists =
+    store.ctx.map &&
+    store.ctx.map.getSource(Constants.sources.HOT) !== undefined;
   if (!mapExists) return cleanup();
 
   const mode = store.ctx.events.currentModeName();
@@ -15,20 +17,32 @@ module.exports = function render() {
   if (store.isDirty) {
     newColdIds = store.getAllIds();
   } else {
-    newHotIds = store.getChangedIds().filter(id => store.get(id) !== undefined);
-    newColdIds = store.sources.hot.filter(geojson => geojson.properties.id && newHotIds.indexOf(geojson.properties.id) === -1 && store.get(geojson.properties.id) !== undefined).map(geojson => geojson.properties.id);
+    newHotIds = store
+      .getChangedIds()
+      .filter((id) => store.get(id) !== undefined);
+    newColdIds = store.sources.hot
+      .filter(
+        (geojson) =>
+          geojson.properties.id &&
+          newHotIds.indexOf(geojson.properties.id) === -1 &&
+          store.get(geojson.properties.id) !== undefined
+      )
+      .map((geojson) => geojson.properties.id);
   }
 
   store.sources.hot = [];
   const lastColdCount = store.sources.cold.length;
-  store.sources.cold = store.isDirty ? [] : store.sources.cold.filter((geojson) => {
-    const id = geojson.properties.id || geojson.properties.parent;
-    return newHotIds.indexOf(id) === -1;
-  });
-
-  const coldChanged = lastColdCount !== store.sources.cold.length || newColdIds.length > 0;
-  newHotIds.forEach(id => renderFeature(id, 'hot'));
-  newColdIds.forEach(id => renderFeature(id, 'cold'));
+  store.sources.cold = store.isDirty
+    ? []
+    : store.sources.cold.filter((geojson) => {
+        const id = geojson.properties.id || geojson.properties.parent;
+        return newHotIds.indexOf(id) === -1;
+      });
+
+  const coldChanged =
+    lastColdCount !== store.sources.cold.length || newColdIds.length > 0;
+  newHotIds.forEach((id) => renderFeature(id, "hot"));
+  newColdIds.forEach((id) => renderFeature(id, "cold"));
 
   function renderFeature(id, source) {
     const feature = store.get(id);
@@ -41,37 +55,44 @@ module.exports = function render() {
   if (coldChanged) {
     store.ctx.map.getSource(Constants.sources.COLD).setData({
       type: Constants.geojsonTypes.FEATURE_COLLECTION,
-      features: store.sources.cold
+      features: store.sources.cold,
     });
   }
 
   store.ctx.map.getSource(Constants.sources.HOT).setData({
     type: Constants.geojsonTypes.FEATURE_COLLECTION,
-    features: store.sources.hot
+    features: store.sources.hot,
   });
 
   if (store._emitSelectionChange) {
     store.ctx.map.fire(Constants.events.SELECTION_CHANGE, {
-      features: store.getSelected().map(feature => feature.toGeoJSON()),
-      points: store.getSelectedCoordinates().map(coordinate => ({
+      features: store
+        .getSelected()
+        .filter((feature) => {
+          feature != undefined;
+        })
+        .map((feature) => feature.toGeoJSON()),
+      points: store.getSelectedCoordinates().map((coordinate) => ({
         type: Constants.geojsonTypes.FEATURE,
         properties: {},
         geometry: {
           type: Constants.geojsonTypes.POINT,
-          coordinates: coordinate.coordinates
-        }
-      }))
+          coordinates: coordinate.coordinates,
+        },
+      })),
     });
     store._emitSelectionChange = false;
   }
 
   if (store._deletedFeaturesToEmit.length) {
-    const geojsonToEmit = store._deletedFeaturesToEmit.map(feature => feature.toGeoJSON());
+    const geojsonToEmit = store._deletedFeaturesToEmit.map((feature) =>
+      feature.toGeoJSON()
+    );
 
     store._deletedFeaturesToEmit = [];
 
     store.ctx.map.fire(Constants.events.DELETE, {
-      features: geojsonToEmit
+      features: geojsonToEmit,
     });
   }
 

src/setup.js

@@ -3,6 +3,7 @@ const Store = require('./store');
 const ui = require('./ui');
 const Constants = require('./constants');
 const xtend = require('xtend');
+const Snapping = require('./snapping');
 
 module.exports = function(ctx) {
 
@@ -23,6 +24,7 @@ module.exports = function(ctx) {
       ctx.map = null;
       ctx.container = null;
       ctx.store = null;
+      ctx.snapping.disableSnapping();
 
       if (controlContainer && controlContainer.parentNode) controlContainer.parentNode.removeChild(controlContainer);
       controlContainer = null;
@@ -33,6 +35,7 @@ module.exports = function(ctx) {
       ctx.map.off('load', setup.connect);
       clearInterval(mapLoadedInterval);
       setup.addLayers();
+      (new Snapping(ctx)).enableSnapping();
       ctx.store.storeMapConfig();
       ctx.events.addEventListeners();
     },