starting work on events

Author: mcwhittemore

API.md

@@ -184,43 +184,32 @@ The three draw modes work identically. They do not take an options argument.
 
 Draw fires off a number of events on draw and select actions. All of these events are name spaced `draw` inside of the mapboxgl event emitter.
 
-### draw.change_mode
+### draw.modechange
 
-This event is fired just after the current mode is stopped and just before the next mode is started.If the `new` object provided is changed, the changed values will be used to start the next mode.
+This event is fired just after the current mode is stopped and just before the next mode is started. A render will not happen until after all event handlers have been triggered. This means you can force a mode redirect by calling `changeMode` inside of a `draw.modechange` handler.
 
 This is not fired when the first mode is started.
 
 Here is an example payload.
 
 ```js
 {
-  old: {
-    mode: `default`,
-    options: []
-  },
-  new: {
-    mode: `direct_select`
-    options: '123123123'
-  }
+  mode: `direct_select`
+  opts: '123123123'
 }
 ```
 
-### draw.delete
+### draw.deleted
 
 This is fired every time a feature is deleted inside of `mapbox-gl-draw`. The payload is the GeoJSON feature just before it was deleted.
 
-### draw.active
+### draw.mode.default.selected.start
 
-This is fired every time a feature is set to active or inactive. If a feature was active and is then set to active again, this is not fired. Same goes for inactive. This is only fired for features. Not for vertices.
+This is fired every time a feature is selected in the default mode. The payload is an array of feature ids being selected. This is **NOT** fired when the mode starts as this information is in the `draw.modechange` event.
 
-Here is an example payload.
+### draw.mode.default.selected.end
 
-```js
-{
-  active: false,
-  featureId: '123123123'
-}
-```
+This is fired every time a feature is unselected in the default mode. The payload is an array of feature ids being unselected. This is **NOT** fired when the mode stops, as this can be assumed via the `draw.modechange` event.
 
 ## Styling Draw
 
@@ -286,5 +275,6 @@ property | values | function
 id | string | only available when `meta` is `feature`
 parent | string | only avaible when `meta` is not `feature`
 coord_path | string | a `.` seporated path to one [lon, lat] entity in the parents coordinates
-lon | number | the longitude value of a handle. Only available when `meta` is ` midpoint`.
+lon | number | the longitude value of a handle. Only available when `meta` is `midpoint`.
+lat | number | the latitude value of a handle. Only available when `meta` is `midpoint`.
 bbox | array | the bounding box of the hidden features. Only available when `meta` is `too-small`.

src/events.js

@@ -106,6 +106,12 @@ module.exports = function(ctx) {
       currentModeName = modename;
       var mode = modebuilder(ctx, opts);
       currentMode = ModeHandler(mode, ctx);
+
+      ctx.map.fire('draw.modechange', {
+        mode: modename,
+        opts: opts
+      });
+
       ctx.store.render();
     },
     fire: function(name, event) {

src/lib/to_midpoint.js

@@ -13,7 +13,7 @@ module.exports = function(parent, startVertex, endVertex, map) {
       parent: parent,
       lng: mid.lng,
       lat: mid.lat,
-      path: endVertex.properties.path
+      coord_path: endVertex.properties.coord_path
     },
     geometry: {
       type: 'Point',

src/lib/to_vertex.js

@@ -5,7 +5,7 @@ module.exports = function(parent, coord, path, selected) {
       properties: {
         meta: 'vertex',
         parent: parent,
-        path: path,
+        coord_path: path,
         active: `${selected}`
       },
       geometry: {

src/modes/default.js

@@ -1,8 +1,11 @@
 var {noFeature, isShiftDown, isFeature} = require('../lib/common_selectors');
 
-module.exports = function(ctx) {
+module.exports = function(ctx, startingSelectedFeatureIds) {
 
   var selectedFeaturesById = {};
+  (startingSelectedFeatureIds || []).forEach(id => {
+    selectedFeaturesById[id] = ctx.store.get(id);
+  });
 
   var startPos = null;
   var dragging = false;

src/modes/direct_select.js

@@ -17,25 +17,25 @@ module.exports = function(ctx, featureId) {
     dragging = true;
     startPos = e.lngLat;
     var about = e.featureTarget.properties;
-    var selectedIndex = selectedCoordPaths.indexOf(about.path);
+    var selectedIndex = selectedCoordPaths.indexOf(about.coord_path);
     if (!isShiftDown(e) && selectedIndex === -1) {
-      selectedCoordPaths = [about.path];
+      selectedCoordPaths = [about.coord_path];
     }
     else if (isShiftDown(e) && selectedIndex === -1) {
-      selectedCoordPaths.push(about.path);
+      selectedCoordPaths.push(about.coord_path);
     }
   };
 
   var onMidpoint = function(e) {
     dragging = true;
     startPos = e.lngLat;
     var about = e.featureTarget.properties;
-    feature.addCoordinate(about.path, about.lng, about.lat);
-    selectedCoordPaths = [about.path];
+    feature.addCoordinate(about.coord_path, about.lng, about.lat);
+    selectedCoordPaths = [about.coord_path];
   };
 
   var setupCoordPos = function() {
-    coordPos = selectedCoordPaths.map(path => feature.getCoordinate(path));
+    coordPos = selectedCoordPaths.map(coord_path => feature.getCoordinate(coord_path));
     numCoords = coordPos.length;
   };
 
@@ -55,11 +55,11 @@ module.exports = function(ctx, featureId) {
         var latChange = e.lngLat.lat - startPos.lat;
 
         for (var i = 0; i < numCoords; i++) {
-          var path = selectedCoordPaths[i];
+          var coord_path = selectedCoordPaths[i];
           var pos = coordPos[i];
           var lng = pos[0] + lngChange;
           var lat = pos[1] + latChange;
-          feature.updateCoordinate(path, lng, lat);
+          feature.updateCoordinate(coord_path, lng, lat);
         }
       });
       this.on('mouseup', () => true, function() {
@@ -100,9 +100,9 @@ module.exports = function(ctx, featureId) {
             let ring = geojson.geometry.coordinates[i];
             for (let j = 0; j < ring.length - 1; j++) {
               let coord = ring[j];
-              let path = `${i}.${j}`;
+              let coord_path = `${i}.${j}`;
 
-              vertices.push(toVertex(feature.id, coord, path, selectedCoordPaths.indexOf(path) > -1));
+              vertices.push(toVertex(feature.id, coord, coord_path, selectedCoordPaths.indexOf(coord_path) > -1));
 
               if (j > 0) {
                 midpoints.push(toMidpoint(feature.id, vertices[j - 1], vertices[j], ctx.map));
@@ -112,8 +112,8 @@ module.exports = function(ctx, featureId) {
           }
           else {
             let coord = geojson.geometry.coordinates[i];
-            let path = `${i}`;
-            vertices.push(toVertex(feature.id, coord, path, selectedCoordPaths.indexOf(path) > -1));
+            let coord_path = `${i}`;
+            vertices.push(toVertex(feature.id, coord, coord_path, selectedCoordPaths.indexOf(coord_path) > -1));
             if (i > 0) {
               midpoints.push(toMidpoint(feature.id, vertices[i - 1], vertices[i], ctx.map));
             }

src/modes/draw_line_string.js

@@ -58,6 +58,9 @@ module.exports = function(ctx) {
     stop: function() {
       ctx.ui.setButtonInactive(types.LINE);
       ctx.ui.clearClass();
+      if (!feature.isValid()) {
+        ctx.store.delete(feature.id);
+      }
     },
     render: function(geojson) {
       geojson.properties.active = geojson.properties.id === feature.id ? 'true' : 'false';

src/modes/draw_polygon.js

@@ -54,6 +54,9 @@ module.exports = function(ctx) {
     stop: function() {
       ctx.ui.setButtonInactive(types.POLYGON);
       ctx.ui.clearClass();
+      if (!feature.isValid()) {
+        ctx.store.delete(feature.id);
+      }
     },
     render: function(geojson) {
       geojson.properties.active = geojson.properties.id === feature.id ? 'true' : 'false';