From 5aef9f467fe83dcf85b113b2e381afa08a9d3d41 Mon Sep 17 00:00:00 2001 From: bozdoz Date: Mon, 16 Jan 2017 16:13:52 -0400 Subject: [PATCH] Tested with Leaflet 1.0.2, still backwards compatibile! --- README.md | 80 +++++++++++++++++++++++++++++----- dist/leaflet-freehandshapes.js | 18 +++++--- gulpfile.js | 3 +- package.json | 4 +- src/index.js | 25 ++++++++--- 5 files changed, 104 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index e2d6551..f509e87 100644 --- a/README.md +++ b/README.md @@ -3,21 +3,81 @@ Leaflet.FreeHandShapes ![MIT License](http://img.shields.io/badge/license-MIT-lightgrey.svg)   -![Leaflet](http://img.shields.io/badge/leaflet-0.7.7-green.svg?style=flat) +![Leaflet](http://img.shields.io/badge/leaflet-1.0.2-green.svg) -Forked from [L.FreeDraw](https://github.com/Wildhoney/Leaflet.FreeDraw) +Initially forked from and inspired by [L.FreeDraw](https://github.com/Wildhoney/Leaflet.FreeDraw) + +## What Is This? + +This is a Leaflet plugin for adding/manipulating polygons from a Leaflet map. It is a freehand drawer that supports mobile, canvas, and multiple instances. Each instance adds polygons to a Leaflet FeatureGroup, optionally merging with other polygons using [TurfJS](http://turfjs.org/). Polygons can also be subtracted by other polygons using TurfJS. [See the demo](https://bozdoz.github.io/Leaflet.FreeHandShapes/) ![Screenshot](http://i.imgur.com/5Zis4Q4.png) +## Usage + +```javascript +// initialize +var drawer = new L.FreeHandShapes(); + +// enable drawing +drawer.setMode('add'); + +// stop drawing +drawer.setMode('view'); + +// enable substraction +drawer.setMode('subtract'); + +// enable click-to-delete +drawer.setMode('delete'); +``` + +## Options + +L.FreeHandShapes takes the following options: + +* `polygon` (object) : Same options as [L.Polygon](http://leafletjs.com/reference-1.0.2.html#polygon) +**Default:** +``` +{ + className: 'leaflet-free-hand-shapes', + smoothFactor: 1, + fillOpacity : 0.5, + noClip : true, +} +``` +* `polyline` (object) : Same options as [L.Polyline](http://leafletjs.com/reference-1.0.2.html#polyline) +**Default:** +``` +{ + color:'#5cb85c', + opacity:1, + smoothFactor: 0, + noClip : true, + clickable : false, + weight:2 +} +``` +* `simplify_tolerance` (float) : how much to simplify the polygon (argument given to [L.LineUtil.simplify](https://github.com/Leaflet/Leaflet/blob/master/src/geometry/LineUtil.js)). +**Default:** +`0.005` +* `merge_polygons` (boolean) +**Default:** +`true + +## Controls + +There is no default control available for this plugin, because it is made to be more flexible, allowing for multiple instances and two drawing methods (addition/subtraction). For an example on how to build your own, take a look at the example, where multiple instances are created for a sample land use development project and bound to some controls (built with [Bootstrap CSS](http://getbootstrap.com/)) : + +* [HTML](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/index.html) +* [JS](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/js/draw-controller.js) (See [Line 14](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/js/draw-controller.js#L14) for iteration/creation of instances, and [Line 246](https://github.com/bozdoz/Leaflet.FreeHandShapes/blob/master/example/js/draw-controller.js#L246) for handlers bound to the control buttons) + +## Pull Requests + +Please limit each PR to one clear improvement each (PR's offering several improvements are harder to read). Any number of bug fixes are welcome! + ## Goals -* ~~Support for Canvas~~ -* ~~Support for Mobile~~ -* ~~Support for multiple instances~~ -* ~~Subtract mode~~ -* A built-in control (L.Control) for UI (probably for each instance) -* Compatibility with IE10 -* Update to Leaflet 1.0.2! -* ~~better stability with turfjs...~~ +* A built-in control (L.Control) for UI (probably for each instance) \ No newline at end of file diff --git a/dist/leaflet-freehandshapes.js b/dist/leaflet-freehandshapes.js index 7227dcb..8fe917e 100644 --- a/dist/leaflet-freehandshapes.js +++ b/dist/leaflet-freehandshapes.js @@ -16969,6 +16969,7 @@ 10: [ function(_dereq_, module, exports) { var touch_extend = _dereq_("./leaflet-touch-extend"), _turf = _dereq_("./turf"), asyncForLoop = _dereq_("./async-for-loop"); L.FreeHandShapes = L.FeatureGroup.extend({ + version: "0.3.0", options: { polygon: { className: "leaflet-free-hand-shapes", @@ -17033,12 +17034,17 @@ if (this.hasLayer(layer)) { return this; } - if ("on" in layer) { - layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this); - } - L.LayerGroup.prototype.addLayer.call(this, layer); - if (this._popupContent && layer.bindPopup) { - layer.bindPopup(this._popupContent, this._popupOptions); + if (L.version.substr(0, 1) === "0") { + if ("on" in layer) { + layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this); + } + L.LayerGroup.prototype.addLayer.call(this, layer); + if (this._popupContent && layer.bindPopup) { + layer.bindPopup(this._popupContent, this._popupOptions); + } + } else { + layer.addEventParent(this); + L.LayerGroup.prototype.addLayer.call(this, layer); } return this; } diff --git a/gulpfile.js b/gulpfile.js index 0c0b7e9..590ccac 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -61,7 +61,8 @@ gulp.task('bs', ['browserify-example'], function() { }); gulp.task('watch', ['bs'], function() { - gulp.watch(['./src/*.js','./example/js/*.js', '!./example/js/main.js'], ['browserify-example']); + gulp.watch(['./src/*.js','./example/js/*.js', + '!./example/js/main.js', '!./example/js/turf-web-worker.min.js'], ['browserify-example']); }); function browserifyTemplate (file, output, options) { diff --git a/package.json b/package.json index 9264e69..820f753 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "leaflet.freehandshapes", - "version": "0.2.0", + "version": "0.3.0", "description": "Refactored Leaflet plugin for drawing freehand polygons, with support for mobile", "main": "dist/leaflet.freehandshapes.js", "authors": [ @@ -35,7 +35,7 @@ "gulp": "^3.9.1", "gulp-derequire": "^2.1.0", "gulp-uglify": "^2.0.0", - "leaflet": "^0.7.7", + "leaflet": "^1.0.2", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0" } diff --git a/src/index.js b/src/index.js index 3ff41ab..fa44d45 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,8 @@ var touch_extend = require('./leaflet-touch-extend'), asyncForLoop = require('./async-for-loop'); L.FreeHandShapes = L.FeatureGroup.extend({ - options: { + version : "0.3.0", + options : { polygon: { className: 'leaflet-free-hand-shapes', smoothFactor: 1, @@ -81,19 +82,29 @@ L.FreeHandShapes = L.FeatureGroup.extend({ addLayer : function (layer, noevent) { // conditionally fire layeradd event + // from parent L.FeatureGroup if (noevent) { + if (this.hasLayer(layer)) { return this; } - if ('on' in layer) { - layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this); - } + if (L.version.substr(0,1) === "0") { + // version 0 + if ('on' in layer) { + layer.on(L.FeatureGroup.EVENTS, this._propagateEvent, this); + } - L.LayerGroup.prototype.addLayer.call(this, layer); + L.LayerGroup.prototype.addLayer.call(this, layer); + + if (this._popupContent && layer.bindPopup) { + layer.bindPopup(this._popupContent, this._popupOptions); + } + } else { + // version 1 or higher + layer.addEventParent(this); - if (this._popupContent && layer.bindPopup) { - layer.bindPopup(this._popupContent, this._popupOptions); + L.LayerGroup.prototype.addLayer.call(this, layer); } return this; }