Rolling version up, snapping example (partial) and new dist

Leaflet · Jul 6, 2016 · fb8c2dd · fb8c2dd
1 parent d26e091
commit fb8c2dd
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "leaflet-draw",
   "description": "Vector drawing plugin for Leaflet",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": [
     "dist/leaflet.draw-src.js",
     "dist/leaflet.draw.css",
@@ -51,7 +51,6 @@
     "leaflet": "^0.7.0"
   },
   "devDependencies": {
-    "leaflet": "~0.7.0",
     "jshint": "~2.3.0",
     "uglify-js": "~2.4.3",
     "jake": "~0.7.4",

diff --git a/dist/leaflet.draw-src.js b/dist/leaflet.draw-src.js
@@ -184,6 +184,7 @@ L.Draw.Feature = L.Handler.extend({
 
 	// Cancel drawing when the escape key is pressed
 	_cancelDrawing: function (e) {
+		this._map.fire('draw:canceled', { layerType: this.type });
 		if (e.keyCode === 27) {
 			this.disable();
 		}
@@ -277,6 +278,10 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 				});
 			}
 
+			if (!L.Browser.touch) {
+				this._map.on('mouseup', this._onMouseUp, this); // Necessary for 0.7 compatibility
+			}
+
 			this._mouseMarker
 				.on('mousedown', this._onMouseDown, this)
 				.on('mouseout', this._onMouseOut, this)
@@ -402,7 +407,9 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 	},
 
 	_onZoomEnd: function () {
-		this._updateGuide();
+		if (this._markers !== null) {
+			this._updateGuide();
+		}
 	},
 
 	_onMouseMove: function (e) {
@@ -691,7 +698,8 @@ L.Draw.Polygon = L.Draw.Polyline.extend({
 			fillColor: null, //same as color by default
 			fillOpacity: 0.2,
 			clickable: true
-		}
+		},
+		metric: true // Whether to use the metric measurement system or imperial
 	},
 
 	initialize: function (map, options) {
@@ -1297,7 +1305,7 @@ L.Edit.PolyVerticesEdit = L.Handler.extend({
 		var poly = this._poly;
 
 		if (!(poly instanceof L.Polygon)) {
-			poly.options.editing.fill = false;
+			poly.options.fill = false;
 		}
 
 		poly.setStyle(poly.options.editing);

diff --git a/dist/leaflet.draw.js b/dist/leaflet.draw.js
diff --git a/examples/snapping.html b/examples/snapping.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet.draw drawing with snapping</title>
+
+    <link rel="stylesheet" href="libs/leaflet.css" />
+    <link rel="stylesheet" href="../dist/leaflet.draw.css" />
+
+    <script src="libs/leaflet-src.js"></script>
+
+    <script src="../src/Leaflet.draw.js"></script>
+
+    <script src="../src/edit/handler/Edit.Poly.js"></script>
+    <script src="../src/edit/handler/Edit.SimpleShape.js"></script>
+    <script src="../src/edit/handler/Edit.Circle.js"></script>
+    <script src="../src/edit/handler/Edit.Rectangle.js"></script>
+
+    <script src="../src/draw/handler/Draw.Feature.js"></script>
+    <script src="../src/draw/handler/Draw.Polyline.js"></script>
+    <script src="../src/draw/handler/Draw.Polygon.js"></script>
+    <script src="../src/draw/handler/Draw.SimpleShape.js"></script>
+    <script src="../src/draw/handler/Draw.Rectangle.js"></script>
+    <script src="../src/draw/handler/Draw.Circle.js"></script>
+    <script src="../src/draw/handler/Draw.Marker.js"></script>
+
+    <script src="../src/ext/TouchEvents.js"></script>
+    <script src="../src/ext/LatLngUtil.js"></script>
+    <script src="../src/ext/GeometryUtil.js"></script>
+    <script src="../src/ext/LineUtil.Intersect.js"></script>
+    <script src="../src/ext/Polyline.Intersect.js"></script>
+    <script src="../src/ext/Polygon.Intersect.js"></script>
+
+    <script src="../src/Control.Draw.js"></script>
+    <script src="../src/Tooltip.js"></script>
+    <script src="../src/Toolbar.js"></script>
+
+    <script src="../src/draw/DrawToolbar.js"></script>
+    <script src="../src/edit/EditToolbar.js"></script>
+    <script src="../src/edit/handler/EditToolbar.Edit.js"></script>
+    <script src="../src/edit/handler/EditToolbar.Delete.js"></script>
+
+    <script src="https://rawgit.com/makinacorpus/Leaflet.Snap/gh-pages/leaflet.snap.js"></script>
+    <script src="https://rawgit.com/makinacorpus/Leaflet.GeometryUtil/master/dist/leaflet.geometryutil.js"></script>
+</head>
+<body>
+	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+	<button id="changeColor">Rectangle -> Blue</button>
+	<script>
+		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			map = new L.Map('map', {layers: [osm], center: new L.LatLng(48.48988, 1.39638), zoom: 14 });
+
+        var drawnItems = new L.FeatureGroup();
+        map.addLayer(drawnItems);
+
+        // Set the title to show on the polygon button
+        L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!';
+
+        var drawControl = new L.Control.Draw({
+            position: 'topright',
+            draw: {
+                polyline: true,
+                polygon: true,
+                circle: false,
+                marker: true
+            },
+            edit: {
+                featureGroup: drawnItems,
+                remove: true
+            }
+        });
+        map.addControl(drawControl);
+
+        var guides =
+            L.polyline([
+                [48.505431207150885, 1.3999843597412107],
+                [48.50335551764662, 1.398911476135254],
+                [48.50173471468476, 1.3994693756103516],
+                [48.49974418399956, 1.3991689682006836],
+                [48.49684355649577, 1.3993835449218748],
+                [48.4956206932084, 1.398611068725586],
+                [48.49465375716902, 1.3980531692504883],
+                [48.49419872206354, 1.3975811004638672],
+                [48.492406981637345, 1.3971948623657227],
+                [48.49156797030711, 1.396486759185791],
+                [48.49067206152607, 1.3961219787597656],
+                [48.48988, 1.39638],
+                [48.489342389949364, 1.394963264465332],
+                [48.48864554279267, 1.3944590091705322],
+                [48.487628697617744, 1.3940191268920896],
+                [48.485666057669334, 1.3944482803344727],
+                [48.48541005555473, 1.3942551612854002],
+                [48.48461359626773, 1.3942766189575195],
+                [48.483489998505746, 1.3933539390563965],
+                [48.48164098598135, 1.3928818702697754],
+                [48.480232846617845, 1.3912296295166016],
+                [48.479450530080534, 1.3906073570251463],
+                [48.478511734309954, 1.3902640342712402],
+                [48.47714618217502, 1.389319896697998],
+                [48.47600819398379, 1.388998031616211]
+            ], {
+                    weight: 5,
+                    color: 'red',
+                    opacity: 1.0
+                }).addTo(map);
+
+        var marker = L.marker([48.488, 1.395]).addTo(map);
+        marker.snapediting = new L.Handler.MarkerSnap(map, marker);
+        marker.snapediting.addGuideLayer(guides);
+        marker.snapediting.enable();
+        var road = L.polyline([
+            [48.48922, 1.40033],
+            [48.48935, 1.39981],
+            [48.48948, 1.3976],
+            [48.48986, 1.39634]
+        ], {
+            color: 'green',
+            opacity: 1.0
+        }).addTo(map);
+
+        road.snapediting = new L.Handler.PolylineSnap(map, road);
+        road.snapediting.addGuideLayer(guides);
+        road.snapediting.enable();
+        marker.snapediting.addGuideLayer(road);
+
+        var guideLayers = [guides, road];
+        drawControl.setDrawingOptions({
+            polyline: { guideLayers: guideLayers },
+            polygon: { guideLayers: guideLayers, snapDistance: 5 },
+            marker: { guideLayers: guideLayers, snapVertices: false },
+            rectangle: false,
+            circle: false
+        });
+
+        map.on('draw:created', function (e) {
+            var type = e.layerType,
+                layer = e.layer;
+
+            if (type === 'marker') {
+                layer.bindPopup('A popup!');
+            }
+
+            drawnItems.addLayer(layer);
+        });
+
+        map.on('draw:edited', function (e) {
+            var layers = e.layers;
+            var countOfEditedLayers = 0;
+            layers.eachLayer(function(layer) {
+                countOfEditedLayers++;
+            });
+            console.log("Edited " + countOfEditedLayers + " layers");
+        });
+
+
+
+        L.DomUtil.get('changeColor').onclick = function () {
+            drawControl.setDrawingOptions({ rectangle: { shapeOptions: { color: '#004a80' } } });
+        };
+
+    </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "leaflet-draw",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Vector drawing plugin for Leaflet",
   "devDependencies": {
     "happen": "~0.1.3",

diff --git a/src/draw/handler/Draw.Polyline.js b/src/draw/handler/Draw.Polyline.js
@@ -85,7 +85,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 				});
 			}
 
-			if(!L.Browser.touch){
+			if (!L.Browser.touch) {
 				this._map.on('mouseup', this._onMouseUp, this); // Necessary for 0.7 compatibility
 			}
 

diff --git a/src/edit/handler/Edit.Poly.js b/src/edit/handler/Edit.Poly.js
@@ -98,7 +98,7 @@ L.Edit.PolyVerticesEdit = L.Handler.extend({
 		var poly = this._poly;
 
 		if (!(poly instanceof L.Polygon)) {
-			poly.options.editing.fill = false;
+			poly.options.fill = false;
 		}
 
 		poly.setStyle(poly.options.editing);
-Original file line number
+Diff line change
@@ Expand Up / @@ -85,7 +85,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({ @@
     				});
     			}
-    			if(!L.Browser.touch){
+    			if (!L.Browser.touch) {
     				this._map.on('mouseup', this._onMouseUp, this); // Necessary for 0.7 compatibility
     			}
@@ Expand Down @@