Skip to content

Commit

Permalink
Merge pull request mapbox#147 from mapbox/common-interface
Browse files Browse the repository at this point in the history
Common Interface for sub controls and one store - fixes mapbox#148, fixes mapbox#149, fixes mapbox#137, fixes mapbox#133, fixes mapbox#104, fixes mapbox#94, fixes mapbox#89, fixes mapbox#144
  • Loading branch information
kelvinabrokwa committed Dec 18, 2015
2 parents e5757e2 + ade3836 commit 0f7172c
Show file tree
Hide file tree
Showing 25 changed files with 678 additions and 974 deletions.
18 changes: 14 additions & 4 deletions API.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@ console.log(Draw.get(featureId));
```

---
####`.get(String: drawId, [Boolean]: includeDrawIdInProps) -> Object`
####`.get(String: drawId) -> Object`

This method takes the `drawId` of a feature and returns its GeoJSON object. If the optional second argument is set to `true`, the feature returned will include its `drawId` in its properties.
This method takes the `drawId` of a feature and returns its GeoJSON object.

Example:

Expand All @@ -83,9 +83,9 @@ console.log(Draw.get(id));
```

---
####`.getAll([Boolean]: includeDrawIdInProps) -> Object`
####`.getAll() -> Object`

This method returns all features added to Draw in a single GeoJSON FeatureCollection. If the optional argument is set to `true`, the feature returned will include its `drawId` in its properties.
This method returns all features added to Draw in a single GeoJSON FeatureCollection. The each feature's unique id will be found on the `id` attribute of the feature.


Example:
Expand Down Expand Up @@ -124,6 +124,12 @@ console.log(Draw.getAll());
```
---

####`.getEditing() -> Object`

This method acts just like getAll except that will only return features that are currently being editing by the draw.

---

####`.remove(String: drawId) -> Draw`

This method takes the `drawId` of feature and removes it from draw. It returns `this` to allow for method chaining.
Expand Down Expand Up @@ -190,3 +196,7 @@ Fired every time a feature is selected for edit. The payload is an object with t
#### draw.edit.end

Fired every time a feature is unselected for edit. The payload is an object with the `mapbox-gl-draw` feature id.

## Private functions

Draw uses underscore prefixed varibles to indicate that the following function is private. These functions are apt to change or be removed. If there is functionality in these functions that should be part of the public api, please open PR explaining the usecase.
36 changes: 34 additions & 2 deletions debug/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,42 @@
position: 'top-left'
}));

var Draw = mapboxgl.Draw();
var Draw = window.Draw = mapboxgl.Draw();

map.addControl(Draw);
map.on('load', function() {});
map.on('load', function() {
map.on('draw.set', function(playload) {
console.log('draw.set', playload);
});
map.on('draw.delete', function(playload) {
console.log('draw.delete', playload);
});
map.on('draw.edit.start', function(playload) {
console.log('draw.edit.start', playload);
});
map.on('draw.edit.end', function(playload) {
console.log('draw.edit.end', playload);
});

var firstId = Draw.set({ type: 'Point', coordinates: [10, 10] });
console.log('SET', Draw.get(firstId).geometry.coordinates, '->', 10, 10);
Draw.update(firstId, { type: 'Point', coordinates: [-74.0023, 40.7104] });
console.log('UPDATE', Draw.get(firstId).geometry.coordinates, '->', -74.0023, 40.7104);

var secondId = Draw.set({ type: 'Point', coordinates: [0, 0] }, {permanent: true});
var all = Draw.getAll();
console.log('Get All', all.features.length, '->', 2);
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.clear();
console.log(Draw.get(firstId), '-> undefined');
});

(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;right:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})();
</script>
</body>
</html>
25 changes: 13 additions & 12 deletions dist/mapbox-gl-draw.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@
"budo": "^4.0.0",
"eslint": "^0.21.2",
"geojson-validation": "^0.1.6",
"mapbox-gl": "^0.12.0",
"smokestack": "^3.3.0",
"tap-closer": "^1.0.0",
"tap-status": "^1.0.1",
"tape": "^4.0.0",
"uglify-js": "^2.4.23",
"mapbox-gl": "^0.12.0"
"uglify-js": "^2.4.23"
},
"peerDependencies": {
"mapbox-gl": "^0.12.0"
Expand Down
88 changes: 42 additions & 46 deletions src/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,10 @@ export default class API extends mapboxgl.Control {
*/
set(feature, options) {
feature = JSON.parse(JSON.stringify(feature));
var id;
if (feature.type === 'FeatureCollection') {
id = [];
for (var i = 0; i < feature.features.length; i++) {
id.push(this._setFeature(feature.features[i], options));
}
} else {
id = this._setFeature(feature, options);
return feature.features.map(subFeature => this.set(subFeature, options));
}
this._store._render();
return id;
}

/**
* a helper method of `set()` for individual features
* @private
*/
_setFeature(feature, options) {
if (!feature.geometry) {
feature = {
type: 'Feature',
Expand All @@ -53,35 +39,27 @@ export default class API extends mapboxgl.Control {
options.map = this._map;
options.data = feature;

var internalFeature;
switch (feature.geometry.type) {
case 'Point':
feature = new Point(options);
internalFeature = new Point(options);
break;
case 'LineString':
feature = new Line(options);
internalFeature = new Line(options);
break;
case 'Polygon':
feature = new Polygon(options);
internalFeature = new Polygon(options);
break;
default:
console.log('MapboxGL Draw: Unsupported geometry type "' + feature.geometry.type + '"');
return;
throw new Error('MapboxGL Draw: Unsupported geometry type "' + feature.geometry.type + '"');
}
this._store.set(feature, true);

this._store.set(internalFeature);
if (this.options.interactive) {
this._edit(feature.getDrawId());
this._edit(internalFeature.drawId);
}
return feature.drawId;
}

/**
* remove a geometry by its draw id
* @param {String} id - the drawid of the geometry
* @returns {Draw} this
*/
remove(id) {
this._store.unset(id);
return this;
return internalFeature.drawId;
}

/**
Expand All @@ -94,7 +72,7 @@ export default class API extends mapboxgl.Control {
feature = JSON.parse(JSON.stringify(feature));
var newFeatType = feature.type === 'Feature' ? feature.geometry.type : feature.type;
var feat = this._store.get(drawId);
if (feat.getGeoJSONType() !== newFeatType || feat.getType() === 'square') {
if (feat.geojson.geometry.type !== newFeatType || feat.getType() === 'square') {
throw 'Can not update feature to different type and can not update squares';
}
feat.setCoordinates(feature.coordinates || feature.geometry.coordinates);
Expand All @@ -106,33 +84,51 @@ export default class API extends mapboxgl.Control {
* get a geometry by its draw id
* @param {String} id - the draw id of the geometry
*/
get(id, includeDrawId) {
var geom = this._store.getGeoJSON(id);
if (!includeDrawId) delete geom.properties.drawId;
return geom;
get(id) {
var feature = this._store.get(id);
return feature && feature.toGeoJSON();
}

/**
* get all draw geometries
* @returns {Object} a GeoJSON feature collection
*/
getAll(includeDrawId) {
var geom = this._store.getAllGeoJSON();
if (!includeDrawId) {
geom.features = geom.features.map(feat => {
delete feat.properties.drawId;
return feat;
getAll() {
return this._store.getAllIds()
.map(id => this._store.get(id).toGeoJSON())
.reduce(function (FC, feature) {
FC.features.push(feature);
return FC;
}, {
type: 'FeatureCollection',
features: []
});
}
return geom;
}

/**
* get a feature collection of features being editted
* @return {Object} a feature collection of geometries that are in edit mode
*/
getEditing() {
return this._editStore.getAllGeoJSON();
return this._store.getEditIds()
.map(id => this._store.get(id).toGeoJSON())
.reduce(function(FC, feature) {
FC.features.push(feature);
return FC;
}, {
type: 'FeatureCollection',
features: []
});
}

/**
* remove a geometry by its draw id
* @param {String} id - the drawid of the geometry
* @returns {Draw} this
*/
remove(id) {
this._store.unset(id);
return this;
}

/**
Expand Down
Loading

0 comments on commit 0f7172c

Please sign in to comment.