Merge branch 'master' of https://github.com/ilomon10/mapbox-gl-draw-s…

…hape-builder into webpack-integrated

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Imanuel Pundoko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,44 @@
+## Mapbox GL Draw Shape Builder
+This is a custom mode for (Mapbox GL Draw) [https://github.com/mapbox/mapbox-gl-draw] that adds the functionality to build new shape from selected shape.
+
+[![npm version](https://badge.fury.io/js/mapbox-gl-draw-shape-builder.svg)](https://badge.fury.io/js/mapbox-gl-draw-shape-builder)
+
+### Install
+```bash
+npm install mapbox-gl-draw-shape-builder@next
+```
+
+### Usage
+```js
+import ShapeBuilder from 'mapbox-gl-draw-shape-builder';
+mapboxgl.accessToken = '';
+var map = new mapboxgl.Map({
+	container: 'map',
+	style: 'https://tilemaps.icgc.cat/tileserver/styles/water.json',
+	center: [2.278507, 41.594896],
+	zoom: 16
+});
+var modes = MapboxDraw.modes;
+modes.shape_builder = ShapeBuilder.default;
+var draw = new MapboxDraw({
+	modes: modes
+});
+map.addControl(draw);
+draw.changeMode('shape_builder');
+map.on('draw.create', function (feature) {
+	console.log(feature);
+});
+```
+
+### Build
+`npm build-web` with browsify
+`npm build-all` with babel
+
+### License
+MIT
+
+### Credits
+Developed by @tagconn
+
+Project template:
+https://github.com/geostarters/mapbox-gl-draw-assisted-rectangle-mode

dist/constants.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var geojsonTypes = {
+  FEATURES: 'Features',
+  LINE_STRING: 'LineString'
+};
+
+exports.default = {
+  geojsonTypes: geojsonTypes
+};

dist/drag_pan.js

@@ -0,0 +1,20 @@
+'use strict';
+
+module.exports = {
+  enable: function enable(ctx) {
+    setTimeout(function () {
+      // First check we've got a map and some context.
+      if (!ctx.map || !ctx.map.dragPan || !ctx._ctx || !ctx._ctx.store || !ctx._ctx.store.getInitialConfigValue) return;
+      // Now check initial state wasn't false (we leave it disabled if so)
+      if (!ctx._ctx.store.getInitialConfigValue('dragPan')) return;
+      ctx.map.dragPan.enable();
+    }, 0);
+  },
+  disable: function disable(ctx) {
+    setTimeout(function () {
+      if (!ctx.map || !ctx.map.dragPan) return;
+      // Always disable here, as it's necessary in some cases.
+      ctx.map.dragPan.disable();
+    }, 0);
+  }
+};

dist/index.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _constants = require('./constants');
+
+var _constants2 = _interopRequireDefault(_constants);
+
+var _drag_pan = require('./drag_pan');
+
+var _drag_pan2 = _interopRequireDefault(_drag_pan);
+
+var _polygonCoordFixer = require('./polygonCoordFixer');
+
+var _polygonCoordFixer2 = _interopRequireDefault(_polygonCoordFixer);
+
+var _turf = require('@turf/turf');
+
+var turf = _interopRequireWildcard(_turf);
+
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+var ShapeBuilder = {
+
+  onSetup: function onSetup(opts) {
+    console.log('setup baru');
+    // this.setSelected(opts)
+    // const line = this.newFeature({
+    //   type: Constants.geojsonTypes.FEATURE,
+    //   properties: {},
+    //   geometry: {
+    //     type: Constants.geojsonTypes.LINE_STRING,
+    //     coordinates: [[]]
+    //   }
+    // })
+    // this.addFeature(line);
+    // dragPan.disable(this);
+    // this.setActionableState();
+    return {
+      // line,
+      drawMoving: false
+    };
+  },
+
+  onTap: function onTap(state, e) {
+    this.onClick(state, e);
+  },
+
+  onClick: function onClick(state, e) {
+    console.log(this.getSelected());
+    if (this.getSelected().length !== 2) {
+      this.changeMode('simple_select');return;
+    };
+    var coord = [(0, _lodash2.default)(e).get('lngLat.lng'), (0, _lodash2.default)(e).get('lngLat.lat')];
+    var compFeature = _lodash2.default.map(this.getSelected(), function (v) {
+      return _extends({}, turf.polygon((0, _polygonCoordFixer2.default)(v).coordinates, _extends({}, v.properties, { id: v.id })));
+    });
+    var contain = _lodash2.default.chain(compFeature).filter(function (v) {
+      var point = turf.point(coord);
+      return turf.booleanPointInPolygon(point, v);
+    }).chunk(2).get('[0]').value();
+
+    var feature = void 0;
+    switch (contain.length) {
+      case 1:
+        var poly1 = contain[0];
+        var poly2 = _lodash2.default.chain(compFeature).filter(function (v) {
+          return (0, _lodash2.default)(v).get('properties.id') !== (0, _lodash2.default)(poly1).get('properties.id');
+        }).get('[0]').value();
+        feature = turf.difference(poly1, poly2);
+        var newPoly1 = turf.difference(poly1, turf.transformScale(_extends({}, feature), 1.00000001));
+        this.deleteFeature(poly1.properties.id);
+        var drawPoly1 = this.newFeature(newPoly1);
+        this.addFeature(drawPoly1);
+        break;
+      case 2:
+        feature = turf.intersect.apply(turf, _toConsumableArray(contain));
+        break;
+    }
+    var drawFeature = this.newFeature(_extends({}, feature, { properties: _extends({}, feature.properties, { id: undefined
+      })
+    }));
+    this.addFeature(drawFeature);
+
+    this.changeMode('simple_select');
+  },
+
+  toDisplayFeatures: function toDisplayFeatures(state, geojson, display) {
+    return display(geojson);
+  },
+
+  onKeyUp: function onKeyUp(state, e) {
+    console.log('keyup', e);
+    if (e.keyCode === 27 || e.code === 'Escape') this.changeMode('simple_select');
+  },
+
+  onStop: function onStop() {
+    this.clearSelectedFeatures();
+    console.log('stop');
+  }
+};
+
+exports.default = ShapeBuilder;