Merge pull request #95 from jmkelly/draw-edit-2

draw:edited event functionality

README.md

@@ -90,8 +90,14 @@ map.on('draw:created', function (e) {
 #### draw:edited
 
 Triggered when layers in the FeatureGroup, that the plugin was initialized with, have been edited and saved.
-
-*Note: the edited layers are not passed as an argument. Currently a TODO.*
+````js
+map.on('draw:edited', function (e) {
+	var layers = e.layers;
+	layers.eachLayer(function (layer) {
+		//do whatever you want, most likely save back to db
+	});
+});
+````
 
 #### draw:deleted
 

examples/basic.html

@@ -88,6 +88,15 @@
 			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' } } });
 		};

src/Toolbar.js

@@ -15,7 +15,7 @@ L.Toolbar = L.Class.extend({
 
 	disable: function () {
 		if (!this.enabled()) { return; }
-		
+
 		this._activeMode.handler.disable();
 	},
 
@@ -103,7 +103,7 @@ L.Toolbar = L.Class.extend({
 		if (this._activeMode && this._activeMode.handler.enabled()) {
 			this._activeMode.handler.disable();
 		}
-		
+
 		// Cache new active feature
 		this._activeMode = this._modes[e.handler];
 
@@ -156,15 +156,15 @@ L.Toolbar = L.Class.extend({
 			buttonHeight = 26, // TODO: this should be calculated
 			borderHeight = 1, // TODO: this should also be calculated
 			toolbarPosition = (buttonIndex * buttonHeight) + (buttonIndex * borderHeight) - 1;
-		
+
 		// Correctly position the cancel button
 		this._actionsContainer.style.top = toolbarPosition + 'px';
 
 		if (buttonIndex === 0) {
 			L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop');
 			L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-top');
 		}
-		
+
 		if (buttonIndex === lastButtonIndex) {
 			L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom');
 			L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-bottom');

src/draw/DrawToolbar.js

@@ -21,7 +21,7 @@ L.DrawToolbar = L.Toolbar.extend({
 	initialize: function (options) {
 		L.Toolbar.prototype.initialize.call(this, options);
 	},
-	
+
 	addToolbar: function (map) {
 		var container = L.DomUtil.create('div', 'leaflet-draw-section'),
 			buttonIndex = 0,
@@ -87,7 +87,7 @@ L.DrawToolbar = L.Toolbar.extend({
 				context: this
 			}
 		]);
-		
+
 		// Add draw and cancel containers to the control container
 		container.appendChild(this._toolbarContainer);
 		container.appendChild(this._actionsContainer);

src/draw/handler/Draw.Feature.js

@@ -22,7 +22,7 @@ L.Draw.Feature = L.Handler.extend({
 		L.Handler.prototype.enable.call(this);
 
 		this.fire('enabled', { handler: this.type });
-		
+
 		this._map.fire('draw:drawstart', { layerType: this.type });
 	},
 
@@ -35,7 +35,7 @@ L.Draw.Feature = L.Handler.extend({
 
 		this._map.fire('draw:drawstop', { layerType: this.type });
 	},
-	
+
 	addHooks: function () {
 		if (this._map) {
 			L.DomUtil.disableTextSelection();

src/draw/handler/Draw.Marker.js

@@ -14,10 +14,10 @@ L.Draw.Marker = L.Draw.Feature.extend({
 
 		L.Draw.Feature.prototype.initialize.call(this, map, options);
 	},
-	
+
 	addHooks: function () {
 		L.Draw.Feature.prototype.addHooks.call(this);
-		
+
 		if (this._map) {
 			this._tooltip.updateContent({ text: 'Click map to place marker.' });
 
@@ -44,7 +44,7 @@ L.Draw.Marker = L.Draw.Feature.extend({
 
 	removeHooks: function () {
 		L.Draw.Feature.prototype.removeHooks.call(this);
-		
+
 		if (this._map) {
 			if (this._marker) {
 				this._marker.off('click', this._onClick);
@@ -67,7 +67,7 @@ L.Draw.Marker = L.Draw.Feature.extend({
 
 		this._tooltip.updatePosition(latlng);
 		this._mouseMarker.setLatLng(latlng);
-		
+
 		if (!this._marker) {
 			this._marker = new L.Marker(latlng, {
 				icon: this.options.icon,

src/draw/handler/Draw.Polygon.js

@@ -20,7 +20,7 @@ L.Draw.Polygon = L.Draw.Polyline.extend({
 
 	initialize: function (map, options) {
 		L.Draw.Polyline.prototype.initialize.call(this, map, options);
-		
+
 		// Save the type so super can fire, need to do this as cannot do this.TYPE :(
 		this.type = L.Draw.Polygon.TYPE;
 	},

src/draw/handler/Draw.Polyline.js

@@ -39,7 +39,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 
 		L.Draw.Feature.prototype.initialize.call(this, map, options);
 	},
-	
+
 	addHooks: function () {
 		L.Draw.Feature.prototype.addHooks.call(this);
 		if (this._map) {
@@ -85,7 +85,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 		this._clearHideErrorTimeout();
 
 		this._cleanUpShape();
-		
+
 		// remove markers from map
 		this._map.removeLayer(this._markerGroup);
 		delete this._markerGroup;
@@ -123,11 +123,11 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 	_shapeIsValid: function () {
 		return true;
 	},
-	
+
 	_onZoomEnd: function () {
 		this._updateGuide();
 	},
-	
+
 	_onMouseMove: function (e) {
 		var newPos = e.layerPoint,
 			latlng = e.latlng;
@@ -138,7 +138,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 
 		// Update the label
 		this._tooltip.updatePosition(latlng);
-		
+
 		// Update the guide line
 		this._updateGuide(newPos);
 
@@ -171,7 +171,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 		this._updateMarkerHandler();
 
 		this._vertexAdded(latlng);
-		
+
 		this._clearGuides();
 	},
 
@@ -180,29 +180,29 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 		if (this._markers.length > 1) {
 			this._markers[this._markers.length - 1].on('click', this._finishShape, this);
 		}
-		
+
 		// Remove the old marker click handler (as only the last point should close the polyline)
 		if (this._markers.length > 2) {
 			this._markers[this._markers.length - 2].off('click', this._finishShape);
 		}
 	},
-	
+
 	_createMarker: function (latlng) {
 		var marker = new L.Marker(latlng, {
 			icon: this.options.icon,
 			zIndexOffset: this.options.zIndexOffset * 2
 		});
-		
+
 		this._markerGroup.addLayer(marker);
 
 		return marker;
 	},
-	
+
 	_updateGuide: function (newPos) {
 		newPos = newPos || this._map.latLngToLayerPoint(this._currentLatLng);
-		
+
 		var markerCount = this._markers.length;
-		
+
 		if (markerCount > 0) {
 			// Update the tooltip text, as long it's not showing and error
 			if (!this._errorShown) {
@@ -217,7 +217,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 			);
 		}
 	},
-	
+
 	_drawGuide: function (pointA, pointB) {
 		var length = Math.floor(Math.sqrt(Math.pow((pointB.x - pointA.x), 2) + Math.pow((pointB.y - pointA.y), 2))),
 			i,
@@ -229,7 +229,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 		if (!this._guidesContainer) {
 			this._guidesContainer = L.DomUtil.create('div', 'leaflet-draw-guides', this._overlayPane);
 		}
-	
+
 		//draw a dash every GuildeLineDistance
 		for (i = this.options.guidelineDistance; i < length; i += this.options.guidelineDistance) {
 			//work out fraction along line we are
@@ -281,7 +281,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 			distance = this._measurementRunningTotal + this._currentLatLng.distanceTo(this._markers[this._markers.length - 1].getLatLng());
 			// show metres when distance is < 1km, then show km
 			distanceStr = distance  > 1000 ? (distance  / 1000).toFixed(2) + ' km' : Math.ceil(distance) + ' m';
-			
+
 			if (this._markers.length === 1) {
 				labelText = {
 					text: 'Click to continue drawing line.',
@@ -318,7 +318,7 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 		this._errorShown = false;
 
 		this._clearHideErrorTimeout();
-		
+
 		// Revert tooltip
 		this._tooltip
 			.removeError()

src/draw/handler/Draw.Rectangle.js

@@ -22,7 +22,7 @@ L.Draw.Rectangle = L.Draw.SimpleShape.extend({
 
 		L.Draw.SimpleShape.prototype.initialize.call(this, map, options);
 	},
-	
+
 	_initialLabelText: 'Click and drag to draw rectangle.',
 
 	_drawShape: function (latlng) {

src/draw/handler/Draw.SimpleShape.js

@@ -61,7 +61,7 @@ L.Draw.SimpleShape = L.Draw.Feature.extend({
 		if (this._shape) {
 			this._fireCreatedEvent();
 		}
-		
+
 		this.disable();
 	}
 });

src/edit/EditToolbar.js

@@ -19,7 +19,7 @@ L.EditToolbar = L.Toolbar.extend({
 
 		this._selectedFeatureCount = 0;
 	},
-	
+
 	addToolbar: function (map) {
 		var container = L.DomUtil.create('div', 'leaflet-draw-section'),
 			buttonIndex = 0,
@@ -82,7 +82,7 @@ L.EditToolbar = L.Toolbar.extend({
 		if (!this.enabled()) { return; }
 
 		this._activeMode.handler.revertLayers();
-		
+
 		L.Toolbar.prototype.disable.call(this);
 	},
 

src/edit/handler/Edit.Poly.js

@@ -90,6 +90,7 @@ L.Edit.Poly = L.Handler.extend({
 	},
 
 	_fireEdit: function () {
+		this._poly.edited = true;
 		this._poly.fire('edit');
 	},
 

src/edit/handler/Edit.Rectangle.js

@@ -44,7 +44,7 @@ L.Edit.Rectangle = L.Edit.SimpleShape.extend({
 
 			marker.setLatLng(center);
 		}
-		
+
 		this._toggleCornerMarkers(1);
 
 		this._repositionCornerMarkers();

src/edit/handler/Edit.SimpleShape.js

@@ -102,6 +102,11 @@ L.Edit.SimpleShape = L.Handler.extend({
 		marker.setOpacity(0);
 	},
 
+	_fireEdit: function () {
+		this._shape.edited = true;
+		this._shape.fire('edit');
+	},
+
 	_onMarkerDrag: function (e) {
 		var marker = e.target,
 			latlng = marker.getLatLng();
@@ -120,6 +125,7 @@ L.Edit.SimpleShape = L.Handler.extend({
 		marker.setOpacity(1);
 
 		this._shape.fire('edit');
+		this._fireEdit();
 	},
 
 	_move: function () {

src/edit/handler/EditToolbar.Delete.js

@@ -35,7 +35,7 @@ L.EditToolbar.Delete = L.Handler.extend({
 
 	disable: function () {
 		if (!this._enabled) { return; }
-		
+
 		L.Handler.prototype.disable.call(this);
 
 		this._deletableLayers