Refactor toolbars, add "delete last point" action (fix #229, #236 and probably some others)

dist/leaflet.draw.css

@@ -50,6 +50,7 @@
 	position: absolute;
 	left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
 	top: 0;
+	white-space: nowrap;
 }
 
 .leaflet-right .leaflet-draw-actions {
@@ -94,12 +95,10 @@
 
 .leaflet-draw-actions-bottom {
 	margin-top: 0;
-	white-space: nowrap;
 }
 
 .leaflet-draw-actions-top {
 	margin-top: 1px;
-	white-space: nowrap;
 }
 
 .leaflet-draw-actions-top a,

src/Leaflet.draw.js

@@ -11,6 +11,10 @@ L.drawLocal = {
 				title: 'Cancel drawing',
 				text: 'Cancel'
 			},
+			undo: {
+				title: 'Delete last point drawn',
+				text: 'Delete last point'
+			},
 			buttons: {
 				polyline: 'Draw a polyline',
 				polygon: 'Draw a polygon',
@@ -90,4 +94,4 @@ L.drawLocal = {
 			}
 		}
 	}
-};
+};

src/Toolbar.js

@@ -19,7 +19,49 @@ L.Toolbar = L.Class.extend({
 		this._activeMode.handler.disable();
 	},
 
+	addToolbar: function (map) {
+		var container = L.DomUtil.create('div', 'leaflet-draw-section'),
+			buttonIndex = 0,
+			buttonClassPrefix = this._toolbarClass || '';
+
+		this._toolbarContainer = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
+		this._map = map;
+
+		var modeHandlers = this.getModeHandlers(map), i;
+		for (i = 0; i < modeHandlers.length; i++) {
+			if (modeHandlers[i].enabled) {
+				this._initModeHandler(
+					modeHandlers[i].handler,
+					this._toolbarContainer,
+					buttonIndex++,
+					buttonClassPrefix,
+					modeHandlers[i].text
+				);
+			}
+		}
+
+		// Save button index of the last button, -1 as we would have ++ after the last button
+		this._lastButtonIndex = --buttonIndex;
+
+		// Create empty actions part of the toolbar
+		this._actionsContainer = L.DomUtil.create('ul', 'leaflet-draw-actions');
+
+		// Add draw and cancel containers to the control container
+		container.appendChild(this._toolbarContainer);
+		container.appendChild(this._actionsContainer);
+
+		if (this.onToolbarAdd) {
+			this.onToolbarAdd(map);
+		}
+
+		return container;
+	},
+
 	removeToolbar: function () {
+		if (this.onToolbarRemove) {
+			this.onToolbarRemove();
+		}
+
 		// Dispose each handler
 		for (var handlerId in this._modes) {
 			if (this._modes.hasOwnProperty(handlerId)) {
@@ -124,12 +166,28 @@ L.Toolbar = L.Class.extend({
 		this.fire('disable');
 	},
 
-	_createActions: function (buttons) {
-		var container = L.DomUtil.create('ul', 'leaflet-draw-actions'),
+	_createActions: function (handler) {
+		var container = this._actionsContainer,
+			buttons = this.getActions(handler),
 			l = buttons.length,
-			li, button;
+			li, di, dl, button;
+
+		// Dispose the actions toolbar (todo: dispose only not used buttons)
+		for (di = 0, dl = this._actionButtons.length; di < dl; di++) {
+			this._disposeButton(this._actionButtons[di].button, this._actionButtons[di].callback);
+		}
+		this._actionButtons = [];
+
+		// Remove all old buttons
+		while (container.firstChild) {
+			container.removeChild(container.firstChild);
+		}
 
 		for (var i = 0; i < l; i++) {
+			if ('enabled' in buttons[i] && !buttons[i].enabled) {
+				continue;
+			}
+
 			li = L.DomUtil.create('li', '', container);
 
 			button = this._createButton({
@@ -145,8 +203,6 @@ L.Toolbar = L.Class.extend({
 				callback: buttons[i].callback
 			});
 		}
-
-		return container;
 	},
 
 	_showActionsToolbar: function () {
@@ -156,6 +212,9 @@ L.Toolbar = L.Class.extend({
 			borderHeight = 1, // TODO: this should also be calculated
 			toolbarPosition = (buttonIndex * buttonHeight) + (buttonIndex * borderHeight) - 1;
 
+		// Recreate action buttons on every click
+		this._createActions(this._activeMode.handler);
+
 		// Correctly position the cancel button
 		this._actionsContainer.style.top = toolbarPosition + 'px';
 
@@ -180,4 +239,4 @@ L.Toolbar = L.Class.extend({
 		L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-top');
 		L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-bottom');
 	}
-});
+});

src/draw/DrawToolbar.js

@@ -18,85 +18,57 @@ L.DrawToolbar = L.Toolbar.extend({
 			}
 		}
 
+		this._toolbarClass = 'leaflet-draw-draw';
 		L.Toolbar.prototype.initialize.call(this, options);
 	},
 
-	addToolbar: function (map) {
-		var container = L.DomUtil.create('div', 'leaflet-draw-section'),
-			buttonIndex = 0,
-			buttonClassPrefix = 'leaflet-draw-draw';
-
-		this._toolbarContainer = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
-
-
-		if (this.options.polyline) {
-			this._initModeHandler(
-				new L.Draw.Polyline(map, this.options.polyline),
-				this._toolbarContainer,
-				buttonIndex++,
-				buttonClassPrefix,
-				L.drawLocal.draw.toolbar.buttons.polyline
-			);
-		}
-
-		if (this.options.polygon) {
-			this._initModeHandler(
-				new L.Draw.Polygon(map, this.options.polygon),
-				this._toolbarContainer,
-				buttonIndex++,
-				buttonClassPrefix,
-				L.drawLocal.draw.toolbar.buttons.polygon
-			);
-		}
-
-		if (this.options.rectangle) {
-			this._initModeHandler(
-				new L.Draw.Rectangle(map, this.options.rectangle),
-				this._toolbarContainer,
-				buttonIndex++,
-				buttonClassPrefix,
-				L.drawLocal.draw.toolbar.buttons.rectangle
-			);
-		}
-
-		if (this.options.circle) {
-			this._initModeHandler(
-				new L.Draw.Circle(map, this.options.circle),
-				this._toolbarContainer,
-				buttonIndex++,
-				buttonClassPrefix,
-				L.drawLocal.draw.toolbar.buttons.circle
-			);
-		}
-
-		if (this.options.marker) {
-			this._initModeHandler(
-				new L.Draw.Marker(map, this.options.marker),
-				this._toolbarContainer,
-				buttonIndex++,
-				buttonClassPrefix,
-				L.drawLocal.draw.toolbar.buttons.marker
-			);
-		}
-
-		// Save button index of the last button, -1 as we would have ++ after the last button
-		this._lastButtonIndex = --buttonIndex;
+	getModeHandlers: function (map) {
+		return [
+			{
+				enabled: this.options.polyline,
+				handler: new L.Draw.Polyline(map, this.options.polyline),
+				text: L.drawLocal.draw.toolbar.buttons.polyline
+			},
+			{
+				enabled: this.options.polygon,
+				handler: new L.Draw.Polygon(map, this.options.polygon),
+				text: L.drawLocal.draw.toolbar.buttons.polygon
+			},
+			{
+				enabled: this.options.rectangle,
+				handler: new L.Draw.Rectangle(map, this.options.rectangle),
+				text: L.drawLocal.draw.toolbar.buttons.rectangle
+			},
+			{
+				enabled: this.options.circle,
+				handler: new L.Draw.Circle(map, this.options.cicle),
+				text: L.drawLocal.draw.toolbar.buttons.cicle
+			},
+			{
+				enabled: this.options.marker,
+				handler: new L.Draw.Marker(map, this.options.marker),
+				text: L.drawLocal.draw.toolbar.buttons.marker
+			}
+		];
+	},
 
-		// Create the actions part of the toolbar
-		this._actionsContainer = this._createActions([
+	// Get the actions part of the toolbar
+	getActions: function (handler) {
+		return [
+			{
+				enabled: handler.deleteLastNode,
+				title: L.drawLocal.draw.toolbar.undo.title,
+				text: L.drawLocal.draw.toolbar.undo.text,
+				callback: handler.deleteLastNode,
+				context: handler
+			},
 			{
 				title: L.drawLocal.draw.toolbar.actions.title,
 				text: L.drawLocal.draw.toolbar.actions.text,
 				callback: this.disable,
 				context: this
 			}
-		]);
-
-		// Add draw and cancel containers to the control container
-		container.appendChild(this._toolbarContainer);
-		container.appendChild(this._actionsContainer);
-
-		return container;
+		];
 	},
 
 	setOptions: function (options) {
@@ -108,4 +80,4 @@ L.DrawToolbar = L.Toolbar.extend({
 			}
 		}
 	}
-});
+});

src/draw/handler/Draw.Polyline.js

@@ -111,6 +111,29 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 			.off('zoomend', this._onZoomEnd, this);
 	},
 
+	deleteLastNode: function () {
+		if (this._markers.length <= 1) {
+			return;
+		}
+
+		var lastMarker = this._markers.pop();
+		this._markerGroup.removeLayer(lastMarker);
+
+		var lastLatLon = this._poly.spliceLatLngs(this._poly.getLatLngs().length - 1, 1);
+
+		if (this._poly.getLatLngs().length < 2) {
+			this._map.removeLayer(this._poly);
+		}
+
+		this._updateFinishHandler();
+
+		this._vertexRemoved(lastLatLon[0]);
+
+		this._clearGuides();
+
+		this._updateTooltip();
+	},
+
 	_finishShape: function () {
 		var intersects = this._poly.newLatLngIntersects(this._poly.getLatLngs()[0], true);
 
@@ -370,6 +393,16 @@ L.Draw.Polyline = L.Draw.Feature.extend({
 		}
 	},
 
+	_vertexRemoved: function (latlng) {
+		if (this._markers.length === 1) {
+			this._measurementRunningTotal = 0;
+		}
+		else {
+			this._measurementRunningTotal -=
+				latlng.distanceTo(this._markers[this._markers.length - 1].getLatLng());
+		}
+	},
+
 	_cleanUpShape: function () {
 		if (this._markers.length > 1) {
 			this._markers[this._markers.length - 1].off('click', this._finishShape, this);