Merge pull request mapbox#175 from mapbox/remove

add removal and change api `remove` to `destroy` - closes mapbox#153
bensleveritt · Jan 14, 2016 · c466ae1 · c466ae1
2 parents c83c601 + b677a37
commit c466ae1
Show file tree

Hide file tree

Showing 15 changed files with 376 additions and 229 deletions.
diff --git a/API.md b/API.md
@@ -168,7 +168,7 @@ This method deselects all features. It returns `this` to allow for method chaini
 
 ---
 
-####`.remove(String: drawId) -> Draw`
+####`.destroy(String: drawId) -> Draw`
 
 This method takes the `drawId` of feature and removes it from draw. It returns `this` to allow for method chaining.
 
@@ -178,7 +178,7 @@ Example:
 var feature = { type: 'Point', coordinates: [0, 0] };
 var id = draw.add(feature)
 Draw
-  .remove(id)
+  .destroy(id)
   .getAll();
 // => { type: 'FeatureCollection', features: [] }
 ```

diff --git a/debug/index.html b/debug/index.html
@@ -57,8 +57,8 @@
     console.log('Get All has ids', all.features.filter(function(feature){
       return feature.id === firstId || feature.id === secondId;
     }).length === 2);
-    Draw.remove(secondId);
-    console.log('Remove', Draw.get(secondId), '-> undefined');
+    Draw.destroy(secondId);
+    console.log('Destroy', Draw.get(secondId), '-> undefined');
 
     var currentId = 'this-is-a-test';
     var thridId = Draw.add({type: 'Point', coordinates: [0, 0], id:currentId});

diff --git a/dist/mapbox-gl-draw.js b/dist/mapbox-gl-draw.js
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     ]
   },
   "scripts": {
-    "test": "npm run lint && npm run build",
+    "test": "npm run lint && npm run prepublish",
     "test-unit": "browserify test/*.test.js | tap-closer | smokestack | tap-status",
     "lint": "eslint --no-eslintrc -c .eslintrc index.js src",
     "prepublish": "NODE_ENV=production browserify index.js | uglifyjs -c -m > dist/mapbox-gl-draw.js",

diff --git a/src/api.js b/src/api.js
@@ -171,7 +171,7 @@ export default class API extends mapboxgl.Control {
    * @param {String} id - the drawid of the geometry
    * @returns {Draw} this
    */
-  remove(id) {
+  destroy(id) {
     this._store.delete(id);
     return this;
   }

diff --git a/src/draw.js b/src/draw.js
@@ -70,11 +70,11 @@ export default class Draw extends API {
       this._createButtons();
     }
 
-    if (this._map.loaded()) {
+    if (map.style.loaded()) {
       this._setEventListeners();
       this._setStyles();
     } else {
-      this._map.on('load', () => {
+      map.on('load', () => {
         this._setEventListeners();
         this._setStyles();
       });
@@ -219,10 +219,12 @@ export default class Draw extends API {
       },
       type: 'geojson'
     });
-    drawTheme.forEach(style => {
+
+    for (let i = 0; i < drawTheme.length; i++) {
+      let style = drawTheme[i];
       Object.assign(style, this.options.styles[style.id] || {});
       this._map.addLayer(style);
-    });
+    }
 
     // selected features style
     this._map.addSource('draw-selected', {
@@ -232,12 +234,48 @@ export default class Draw extends API {
       },
       type: 'geojson'
     });
-    drawSelectedTheme.forEach(style => {
+
+    for (let i = 0; i < drawSelectedTheme.length; i++) {
+      let style = drawSelectedTheme[i];
       Object.assign(style, this.options.styles[style.id] || {});
       this._map.addLayer(style);
-    });
+    }
 
     this._store._render();
   }
 
+  _removeLayers() {
+    for (let i = 0; i < drawTheme.length; i++) {
+      let { id } = drawTheme[i];
+      this._map.removeLayer(id);
+    }
+
+    for (let i = 0; i < drawSelectedTheme.length; i++) {
+      let { id } = drawSelectedTheme[i];
+      this._map.removeLayer(id);
+    }
+
+    this._map.removeSource('draw');
+    this._map.removeSource('draw-selected');
+  }
+
+  _removeButtons() {
+    if (!this.options.drawing) {
+      return;
+    }
+    var controls = this.options.controls;
+
+    this.deleteBtn.parentNode.removeChild(this.deleteBtn);
+    if (controls.square) this.squareCtrl.parentNode.removeChild(this.squareCtrl);
+    if (controls.line) this.lineStringCtrl.parentNode.removeChild(this.lineStringCtrl);
+    if (controls.shape) this.polygonCtrl.parentNode.removeChild(this.polygonCtrl);
+    if (controls.marker) this.markerCtrl.parentNode.removeChild(this.markerCtrl);
+  }
+
+  remove() {
+    this._removeLayers();
+    this._removeButtons();
+    super.remove();
+  }
+
 }
diff --git a/test/api.test.js b/test/api.test.js
@@ -8,95 +8,100 @@ mapboxgl.accessToken = accessToken;
 
 var feature = features.point;
 
-test('API test', t => {
+var map = createMap();
+
+map.on('load', () => {
+
+  test('API test', t => {
+
+    var Draw = GLDraw();
+    map.addControl(Draw);
+
+    var id;
+
+    t.test('add', t => {
+      id = Draw.add(feature);
+      t.ok(id, 'valid string id returned on set');
+
+      // set permanent feature
+      id = Draw.add(feature, { permanent: true });
+      var point = map.project(new mapboxgl.LngLat(...feature.geometry.coordinates));
+      map.fire('click', { point });
+      t.equals(
+        Draw._store.getSelectedIds().indexOf(id),
+        -1,
+        'permanent feature is not inserted into selected store when clicked'
+      );
+
+      t.end();
+    });
+
+    t.test('get', t => {
+      var f = Draw.get(id);
+      t.deepEquals(
+        feature.geometry.coordinates,
+        f.geometry.coordinates,
+        'the geometry added is the same returned by Draw.get'
+      );
+      t.end();
+    });
+
+    t.test('getAll', t => {
+      t.deepEquals(
+        feature.geometry,
+        Draw.getAll().features[0].geometry,
+        'the geometry added is the same returned by Draw.getAll'
+      );
+      t.end();
+    });
+
+    t.test('update', t => {
+      feature.geometry.coordinates = [1, 1];
+      Draw.update(id, feature);
+      var f2 = Draw.get(id);
+      t.deepEquals(
+        feature.geometry,
+        f2.geometry,
+        'update updates the geometry and preservers the id'
+      );
+      t.end();
+    });
+
+    t.test('select', t => {
+      t.deepEquals(
+        Draw.getSelected(),
+        { features: [], type: 'FeatureCollection' },
+        'no features selected');
+      Draw.select(id);
+      t.deepEquals(
+        Draw.getSelected(),
+        { features: [
+          { geometry: { coordinates: [ 1, 1 ], type: 'Point' }, id, properties: {}, type: 'Feature' }
+        ], type: 'FeatureCollection' },
+        '1 feature selected');
+      Draw.deselect(id);
+      t.deepEquals(
+        Draw.getSelected(),
+        { features: [], type: 'FeatureCollection' },
+        'no features selected');
+      t.end();
+    });
+
+    t.test('clear', t => {
+      Draw.clear();
+      t.equals(Draw.getAll().features.length, 0, 'Draw.clear removes all geometries');
+      t.end();
+    });
+
+    t.test('destroy', t => {
+      id = Draw.add(feature);
+      Draw.destroy(id);
+      t.equals(Draw.getAll().features.length, 0, 'can remove a feature by its id');
+      t.end();
+    });
 
-  var map = createMap();
-  var Draw = GLDraw();
-  map.addControl(Draw);
-
-  var id;
-
-  t.test('add', t => {
-    id = Draw.add(feature);
-    t.ok(id, 'valid string id returned on set');
-
-    // set permanent feature
-    id = Draw.add(feature, { permanent: true });
-    var point = map.project(new mapboxgl.LngLat(...feature.geometry.coordinates));
-    map.fire('click', { point });
-    t.equals(
-      Draw._store.getSelectedIds().indexOf(id),
-      -1,
-      'permanent feature is not inserted into selected store when clicked'
-    );
-
-    t.end();
-  });
-
-  t.test('get', t => {
-    var f = Draw.get(id);
-    t.deepEquals(
-      feature.geometry.coordinates,
-      f.geometry.coordinates,
-      'the geometry added is the same returned by Draw.get'
-    );
-    t.end();
-  });
-
-  t.test('getAll', t => {
-    t.deepEquals(
-      feature.geometry,
-      Draw.getAll().features[0].geometry,
-      'the geometry added is the same returned by Draw.getAll'
-    );
-    t.end();
-  });
-
-  t.test('update', t => {
-    feature.geometry.coordinates = [1, 1];
-    Draw.update(id, feature);
-    var f2 = Draw.get(id);
-    t.deepEquals(
-      feature.geometry,
-      f2.geometry,
-      'update updates the geometry and preservers the id'
-    );
     t.end();
-  });
 
-  t.test('select', t => {
-    t.deepEquals(
-      Draw.getSelected(),
-      { features: [], type: 'FeatureCollection' },
-      'no features selected');
-    Draw.select(id);
-    t.deepEquals(
-      Draw.getSelected(),
-      { features: [
-        { geometry: { coordinates: [ 1, 1 ], type: 'Point' }, id, properties: {}, type: 'Feature' }
-      ], type: 'FeatureCollection' },
-      '1 feature selected');
-    Draw.deselect(id);
-    t.deepEquals(
-      Draw.getSelected(),
-      { features: [], type: 'FeatureCollection' },
-      'no features selected');
-    t.end();
   });
 
-  t.test('clear', t => {
-    Draw.clear();
-    t.equals(Draw.getAll().features.length, 0, 'Draw.clear removes all geometries');
-    t.end();
-  });
-
-  t.test('remove', t => {
-    id = Draw.add(feature);
-    Draw.remove(id);
-    t.equals(Draw.getAll().features.length, 0, 'can remove a feature by its id');
-    t.end();
-  });
-
-  t.end();
-
 });
diff --git a/test/controls.test.js b/test/controls.test.js
@@ -0,0 +1,71 @@
+/* eslint no-shadow:[0] */
+import test from 'tape';
+import mapboxgl from 'mapbox-gl';
+import GLDraw from '../';
+import { accessToken, createMap } from './utils';
+
+mapboxgl.accessToken = accessToken;
+
+
+const CLASS_NAME = 'mapboxgl-ctrl-draw-btn';
+
+var map = createMap();
+
+map.on('load', () => {
+
+  test('DOM element test', t => {
+
+    t.test('Initiate without controls', t => {
+      var Draw = GLDraw({ drawing: false });
+      map.addControl(Draw);
+      t.false(isInDOM('square') || isInDOM('shape') || isInDOM('line') || isInDOM('marker') || isInDOM('trash'),
+          'no buttons added when drawing is false');
+      Draw.remove();
+      t.end();
+    });
+
+    t.test('Initiate with controls', t => {
+      var Draw = GLDraw();
+      map.addControl(Draw);
+      t.ok(isInDOM('square') && isInDOM('shape') && isInDOM('line') && isInDOM('marker'),
+          'square, shape, line, marker buttons added when draw is added');
+      t.false(trashIsVisible(), 'trash button is invisible when draw is added');
+      Draw.remove();
+      t.end();
+    });
+
+    t.test('initialize with only square control', t => {
+      var Draw = GLDraw({
+        controls: {
+          square: true,
+          shape: false,
+          line: false,
+          marker: false
+        }
+      });
+      map.addControl(Draw);
+      t.ok(trashIsAdded(), 'trash button is added');
+      t.ok(isInDOM('square'), 'square button is added');
+      t.false(isInDOM('shape'), 'shape button is added');
+      t.false(isInDOM('line'), 'line button is added');
+      t.false(isInDOM('marker'), 'marker button is added');
+      Draw.remove();
+      t.end();
+    });
+
+    t.end();
+  });
+
+});
+
+function isInDOM(button) {
+  return window.document.getElementsByClassName(`${CLASS_NAME} ${button}`).length === 1;
+}
+
+function trashIsVisible() {
+  return window.document.getElementsByClassName(`${CLASS_NAME} trash`)[0].style.display !== 'none';
+}
+
+function trashIsAdded() {
+  return window.document.getElementsByClassName(`${CLASS_NAME} trash`).length === 1;
+}