Custom modes final round (#671)

* Get custom mode framework together

* simple select mode using new schemagit add .!

* direct select has been moved

* refactor mode builders

* New docs on how to write a mode

* convert draw point to new mode spec

* convert draw line string to new spec

* update docs

* move draw polygon to new mode spec

* change setActionableState to default unprovided actions to false

* drop static mode and manage modes via options

* some linting

* more docs work

* mas docs [skip ci]

* fix #673

API.md

@@ -33,9 +33,13 @@ All of the following options are optional.
 - `controls`, Object: Hide or show individual controls. Each property's name is a control, and value is a boolean indicating whether the control is on or off. Available control names are `point`, `line_string`, `polygon`, `trash`, `combine_features` and `uncombine_features`. By default, all controls are on. To change that default, use `displayControlsDefault`.
 - `displayControlsDefault`, boolean (default: `true`): The default value for `controls`. For example, if you would like all controls to be *off* by default, and specify a whitelist with `controls`, use `displayControlsDefault: false`.
 - `styles`, Array\<Object\>: An array of map style objects. By default, Draw provides a map style for you. To learn about overriding styles, see the [Styling Draw](#styling-draw) section below.
+- `modes`, Object: over ride the default modes with your own. `MapboxDraw.modes` can be used to see the default values. More information on custom modes [can be found here](https://github.com/mapbox/mapbox-gl-draw/blob/master/src/modes/README.md).
+- `defaultMode`, String (default: `'simple_select'`): the mode (from `modes`) that user will first land in.
 
 ## Modes
 
+By defult MapboxDraw ships with a few modes. These modes aim to cover the basic needed functionaly for MapboxDraw to create the core GeoJSON feature types. Along with these, MapboxDraw also supports [custom modes. Click here for more details](https://github.com/mapbox/mapbox-gl-draw/blob/master/src/modes/README.md).
+
 The mode name strings are available as an enum at `Draw.modes`.
 
 ### `simple_select`
@@ -76,15 +80,6 @@ Lets you draw a Polygon feature.
 
 Lets you draw a Point feature.
 
-### `static`
-
-`Draw.modes.STATIC === 'static'`
-
-Disables editing for all drawn features.
-
-Note that this mode can only be entered or exited programmatically with `Draw.
-`.
-
 ## API Methods
 
 `new MapboxDraw()` returns an instance of Draw with the following API:
@@ -545,7 +540,7 @@ property | values | function
 --- | --- | ---
 meta | feature, midpoint, vertex | `midpoint` and `vertex` are used on points added to the map to communicate polygon and line handles. `feature` is used for all features.
 active | true, false | A feature is active when it is 'selected' in the current mode. `true` and `false` are strings.
-mode |  simple_select, direct_select, draw_point, draw_line_string, draw_polygon, static | Indicates which mode Draw is currently in.
+mode |  simple_select, direct_select, draw_point, draw_line_string, draw_polygon | Indicates which mode Draw is currently in.
 
 Draw also provides a few more properties on features, but they should not be used for styling. For details on them, see "Using Draw with Mapbox GL JS's `queryRenderFeatures`" below.
 

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.0.0
+
+- Adds [Custom Mode support](https://github.com/mapbox/mapbox-gl-draw/blob/master/src/modes/README.md)
+- Drops `static` mode, which can now be found [in its own repo](https://github.com/mapbox/mapbox-gl-draw-static-mode)
+- Fixes bug where `MapboxDraw` would prevent `MapboxGeocoder` delete actions (#673)
+
 ## 0.19.1
 
 - Fixes bug with safari where the map would move when drawing (#665).

README.md

@@ -50,6 +50,10 @@ var map = new mapboxgl.Map({
 var Draw = new MapboxDraw();
 
 map.addControl(Draw)
+
+map.on('load', function() {
+  // ALL YOUR APPLICATION CODE
+});
 ```
 
 https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

debug/index.html

@@ -7,6 +7,7 @@
   <title>Mapbox GL Draw | Mapbox</title>
   <link href='/mapbox-gl.css' rel='stylesheet' />
   <link href='/dist/mapbox-gl-draw.css' rel='stylesheet' />
+  <link href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' rel='stylesheer' />
   <style>
     body { margin:0; padding:0; }
     html, body, #map { height: 100%; }
@@ -45,6 +46,7 @@
   <button id='flipStyleBtn'>change style</button>
 </div>
 <script src='/mapbox-gl.js'></script>
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
 <script src='/mapbox-gl-draw.js'></script>
 <script type='text/javascript'>
 // making run more like github.com/mapbox/mapbox-gl-js
@@ -71,6 +73,10 @@
     style: 'mapbox://styles/mapbox/streets-v8'
   });
 
+  map.addControl(new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken
+  }));
+
   map.addControl(new mapboxgl.NavigationControl(), 'top-left');
 
   var Draw = window.Draw = new MapboxDraw();

index.js

@@ -26,3 +26,5 @@ const setupDraw = function(options, api) {
 module.exports = function(options) {
   setupDraw(options, this);
 };
+
+module.exports.modes = require('./src/modes');

package.json

@@ -12,6 +12,9 @@
     ]
   },
   "scripts": {
+    "docs": "npm run docs-modes-life-cycle && npm run docs-modes-get-and-set",
+    "docs-modes-get-and-set": "documentation readme --readme-file ./src/modes/README.md -s \"Setters and Getters\" src/modes/mode_interface_accessors.js --shallow",
+    "docs-modes-life-cycle": "documentation readme --readme-file ./src/modes/README.md -s \"Life Cycle Functions\" src/modes/mode_interface.js --shallow",
     "test": "npm run lint && npm run tape",
     "lint": "eslint --no-eslintrc -c .eslintrc index.js src test",
     "tape": "tape -r ./test/mock-browser.js -r babel-register test/*.test.js",
@@ -38,6 +41,7 @@
     "instrument": false
   },
   "devDependencies": {
+    "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
     "@turf/centroid": "^4.0.0",
     "babel-core": "^6.9.1",
     "babel-eslint": "^7.1.0",

src/events.js

@@ -4,23 +4,20 @@ const featuresAt = require('./lib/features_at');
 const isClick = require('./lib/is_click');
 const isTap = require('./lib/is_tap');
 const Constants = require('./constants');
-
-const modes = {
-  [Constants.modes.SIMPLE_SELECT]: require('./modes/simple_select'),
-  [Constants.modes.DIRECT_SELECT]: require('./modes/direct_select'),
-  [Constants.modes.DRAW_POINT]: require('./modes/draw_point'),
-  [Constants.modes.DRAW_LINE_STRING]: require('./modes/draw_line_string'),
-  [Constants.modes.DRAW_POLYGON]: require('./modes/draw_polygon'),
-  [Constants.modes.STATIC]: require('./modes/static')
-};
+const objectToMode = require('./modes/object_to_mode');
 
 module.exports = function(ctx) {
 
+  const modes = Object.keys(ctx.options.modes).reduce((m, k) => {
+    m[k] = objectToMode(ctx.options.modes[k]);
+    return m;
+  }, {});
+
   let mouseDownInfo = {};
   let touchStartInfo = {};
   const events = {};
-  let currentModeName = Constants.modes.SIMPLE_SELECT;
-  let currentMode = setupModeHandler(modes.simple_select(ctx), ctx);
+  let currentModeName = null;
+  let currentMode = null;
 
   events.drag = function(event, isDrag) {
     if (isDrag({
@@ -130,6 +127,7 @@ module.exports = function(ctx) {
   const isKeyModeValid = (code) => !(code === 8 || code === 46 || (code >= 48 && code <= 57));
 
   events.keydown = function(event) {
+    if (event.srcElement.classList[0] !== 'mapboxgl-canvas') return; // we only handle events on the map
 
     if ((event.keyCode === 8 || event.keyCode === 46) && ctx.options.controls.trash) {
       event.preventDefault();
@@ -203,6 +201,10 @@ module.exports = function(ctx) {
   }
 
   const api = {
+    start: function() {
+      currentModeName = ctx.options.defaultMode;
+      currentMode = setupModeHandler(modes[currentModeName](ctx), ctx);
+    },
     changeMode,
     actionable,
     currentModeName: function() {