Merge branch 'develop' of github.com:codeofsumit/leaflet.pm into develop

geoman-io · Oct 5, 2017 · 1e8ab13 · 1e8ab13
2 parents a70435e + 3ec153d
commit 1e8ab13
Show file tree

Hide file tree

Showing 6 changed files with 4,571 additions and 56 deletions.
diff --git a/README.md b/README.md
@@ -69,6 +69,22 @@ map.pm.addControls(options);
 ```
 If no options are passed, all buttons will be shown.
 
+If you are wondering how e.g. the `drawPolygon` button will enable drawing mode with specific options, here it is:
+Simply enable drawing mode programatically, pass it your options and disable it again. The options will persist, even when the mode is enabled/disabled via the toolbar.
+
+Example:
+``` js
+// make markers not snappable during marker draw
+map.pm.enableDraw('Marker', { snappable: false });
+map.pm.disableDraw('Marker');
+
+// let polygons finish their shape on double click
+map.pm.enableDraw('Poly', { finishOn: 'dblclick' });
+map.pm.disableDraw('Poly');
+
+```
+All available options are specified in the Drawing Mode Section below
+
 
 ##### Drawing Mode
 Use Drawing Mode on a map like this
@@ -97,9 +113,13 @@ var options = {
     cursorMarker: false,
 
     // finish drawing on double click
-    // this works, but if you enable it, there is a problem that's not fixed yet:
-    // https://github.com/codeofsumit/leaflet.pm/issues/147
+    // DEPRECATED: use finishOn: 'dblclick' instead
     finishOnDoubleClick: false,
+
+    // specify type of layer event to finish the drawn shape
+    // example events: 'mouseout', 'dblclick', 'contextmenu'
+    // List: http://leafletjs.com/reference-1.2.0.html#interactive-layer-click
+    finishOn: 'contextmenu',
 
     // custom marker style (only for Marker draw)
     markerStyle: {

diff --git a/demo/demo.js b/demo/demo.js
@@ -5,15 +5,15 @@ const accessToken = 'pk.eyJ1IjoibWFwc29mc3VtaXQiLCJhIjoiY2l1ZDF3dHE5MDAxZDMwbjA0
 // set mapbox tile layer
 const mapboxTiles1 = L.tileLayer(`https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=${accessToken}`, {
     attribution:
-        '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        '&copy; <a href="https://www.mapbox.com/feedback/">Mapbox</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 });
 const mapboxTiles2 = L.tileLayer(`https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=${accessToken}`, {
     attribution:
-        '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        '&copy; <a href="https://www.mapbox.com/feedback/">Mapbox</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 });
 const mapboxTiles3 = L.tileLayer(`https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=${accessToken}`, {
     attribution:
-        '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        '&copy; <a href="https://www.mapbox.com/feedback/">Mapbox</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 });
 
 const map2 = L.map('example2')
@@ -131,8 +131,8 @@ map3.pm.addControls({
     drawMarker: true,
     drawPolygon: true,
     editPolygon: true,
-    drawPolyline: true,
-    deleteLayer: true
+    deleteLayer: true,
+    drawPolyline: true
 });
 
 const markerStyle = {
@@ -156,6 +156,7 @@ map3.pm.enableDraw('Poly', {
     },
     markerStyle: markerStyle,
     cursorMarker: false,
+    // finishOn: 'contextmenu',
     finishOnDoubleClick: true
 });
 
@@ -253,6 +254,16 @@ map4.pm.addControls({
     position: 'topright'
 });
 
+map4.pm.enableDraw('Poly', {
+    finishOn: 'mouseout'
+});
+map4.pm.disableDraw('Poly');
+
+map4.pm.enableDraw('Marker', {
+    snappable: false
+});
+map4.pm.disableDraw('Marker');
+
 // map4.pm.setPathOptions({
 //     color: 'orange',
 //     fillColor: 'green',

diff --git a/index.html b/index.html
@@ -1,50 +1,52 @@
 <!DOCTYPE>
 <html>
-    <head>
-        <title>Leaflet Polygon Management Demo</title>
-        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
-        <link rel="stylesheet" href="demo/demo.css" />
-        <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
-        <script src="dist/leaflet.pm.min.js"></script>
-    </head>
-    <body>
-
-        <div class="wrapper">
-            <aside>
-                <h1>Leaflet.PM</h1>
-                <h3>Polygon Management</h3>
-
-                <ul>
-                    <li id="test-polygon">
-                        Polygon
-                    </li>
-                    <li id="test-layergroup">
-                        LayerGroup
-                    </li>
-                    <li id="test-geojson">
-                        geoJson
-                    </li>
-                </ul>
-
-                <h3>How to:</h3>
-                <p>
-                    The buttons on top toggle edit-mode for each Leaflet class
-                    and will highlight when the edit-event is triggered.
-                </p>
-                <p>
-                    Use <strong>right click</strong> to remove a coordinate handler.
-                </p>
-                <p>
-
-                </p>
-            </aside>
-            <div class="content">
-                <div id="map"></div>
-            </div>
 
+<head>
+    <title>Leaflet Polygon Management Demo</title>
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
+    <link rel="stylesheet" href="demo/demo.css" />
+    <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
+    <script src="dist/leaflet.pm.min.js"></script>
+</head>
+
+<body>
+
+    <div class="wrapper">
+        <aside>
+            <h1>Leaflet.PM</h1>
+            <h3>Polygon Management</h3>
+
+            <ul>
+                <li id="test-polygon">
+                    Polygon
+                </li>
+                <li id="test-layergroup">
+                    LayerGroup
+                </li>
+                <li id="test-geojson">
+                    geoJson
+                </li>
+            </ul>
+
+            <h3>How to:</h3>
+            <p>
+                The buttons on top toggle edit-mode for each Leaflet class and will highlight when the edit-event is triggered.
+            </p>
+            <p>
+                Use <strong>right click</strong> to remove a coordinate handler.
+            </p>
+            <p>
+
+            </p>
+        </aside>
+        <div class="content">
+            <div id="map"></div>
         </div>
 
-        <script src="demo/demo.js"></script>
+    </div>
+
+    <script src="demo/demo.js"></script>
+
+</body>
 
-    </body>
-</html>
+</html>
diff --git a/src/js/Draw/L.PM.Draw.Line.js b/src/js/Draw/L.PM.Draw.Line.js
@@ -11,6 +11,12 @@ Draw.Line = Draw.extend({
         // instances of L.PM.Draw. So a dev could set drawing style one time as some kind of config
         L.Util.setOptions(this, options);
 
+        // fallback option for finishOnDoubleClick
+        // TODO: remove in a later release
+        if (this.options.finishOnDoubleClick && !this.options.finishOn) {
+            this.options.finishOn = 'dblclick';
+        }
+
         // enable draw mode
         this._enabled = true;
 
@@ -47,9 +53,19 @@ Draw.Line = Draw.extend({
         // create a polygon-point on click
         this._map.on('click', this._createVertex, this);
 
-        // finish on double click
-        if (this.options.finishOnDoubleClick) {
-            this._map.on('dblclick', this._finishShape, this);
+        // finish on layer event
+        // #http://leafletjs.com/reference-1.2.0.html#interactive-layer-click
+        if (this.options.finishOn) {
+            this._map.on(this.options.finishOn, this._finishShape, this);
+        }
+
+        // prevent zoom on double click if finishOn is === dblclick
+        if (this.options.finishOn === 'dblclick') {
+            this.tempMapDoubleClickZoomState = this._map.doubleClickZoom._enabled;
+
+            if (this.tempMapDoubleClickZoomState) {
+                this._map.doubleClickZoom.disable();
+            }
         }
 
         // sync hint marker with mouse cursor
@@ -84,7 +100,11 @@ Draw.Line = Draw.extend({
         // unbind listeners
         this._map.off('click', this._createVertex, this);
         this._map.off('mousemove', this._syncHintMarker, this);
-        this._map.off('dblclick', this._finishShape, this);
+        this._map.off(this.options.finishOn, this._finishShape, this);
+
+        if (this.tempMapDoubleClickZoomState) {
+            this._map.doubleClickZoom.enable();
+        }
 
         // remove layer
         this._map.removeLayer(this._layerGroup);
@@ -144,7 +164,7 @@ Draw.Line = Draw.extend({
         // check if the first and this vertex have the same latlng
         if (latlng.equals(this._layer.getLatLngs()[0])) {
             // yes? finish the polygon
-            this._finishShape();
+            this._finishShape(e);
 
             // "why?", you ask? Because this happens when we snap the last vertex to the first one
             // and then click without hitting the last marker. Click happens on the map

diff --git a/src/js/Draw/L.PM.Draw.js b/src/js/Draw/L.PM.Draw.js
@@ -7,6 +7,7 @@ const Draw = L.Class.extend({
         snapDistance: 20,
         cursorMarker: true,
         finishOnDoubleClick: false,
+        finishOn: null,
         templineStyle: {
             color: 'red',
         },