fix draw tools. the leaflet upgrade broke it, so the leaflet.draw needed updating too

some of the hacks to do snap-to on points have been removed, at least for now - they needed major rework to fit in
additionally other customisations added are also removed - this is basically now stock leaflet.draw with edit-mode enabled

external/leaflet.draw.0.1.6.css

@@ -1,118 +0,0 @@
-/* Leaflet controls */
-
-.leaflet-container .leaflet-control-draw {
-	margin-left: 13px;
-	margin-top: 12px;
-}
-
-.leaflet-control-draw a {
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	display: block;
-	width: 22px;
-	height: 22px;
-}
-
-.leaflet-control-draw a:hover {
-	background-color: #fff;
-}
-
-.leaflet-touch .leaflet-control-draw a {
-	width: 27px;
-	height: 27px;
-}	
-
-.leaflet-control-draw-polyline {
-	background-image: url(@@INCLUDEIMAGE:images/draw-polyline.png@@);
-}
-
-.leaflet-control-draw-polygon {
-	background-image: url(@@INCLUDEIMAGE:images/draw-polygon.png@@);
-}
-
-.leaflet-control-draw-rectangle {
-	background-image: url(@@INCLUDEIMAGE:images/draw-rectangle.png@@);
-}
-
-.leaflet-control-draw-circle {
-	background-image: url(@@INCLUDEIMAGE:images/draw-circle.png@@);
-}
-
-.leaflet-control-draw-marker {
-	background-image: url(@@INCLUDEIMAGE:images/draw-marker-icon.png@@);
-}
-
-.leaflet-mouse-marker {
-	background-color: #fff;
-	cursor: crosshair;
-}
-
-.leaflet-draw-label {
-	background-color: #fff;
-	border: 1px solid #ccc;
-	color: #222;
-	font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
-	margin-left: 20px;
-	margin-top: -21px;
-	padding: 2px 4px;
-	position: absolute;
-	white-space: nowrap;
-	z-index: 6;
-}
-
-.leaflet-error-draw-label {
-	background-color: #F2DEDE;
-	border-color: #E6B6BD;
-	color: #B94A48;
-}
-
-.leaflet-draw-label-single {
-	margin-top: -12px
-}
-
-.leaflet-draw-label-subtext {
-	color: #999;
-}
-
-.leaflet-draw-guide-dash {
-	font-size: 1%;
-	opacity: 0.6;
-	position: absolute;
-	width: 5px;
-	height: 5px;
-}
-
-.leaflet-flash-anim {
-	-webkit-animation-duration: 0.66s;
-	   -moz-animation-duration: 0.66s;
-	     -o-animation-duration: 0.66s;
-	        animation-duration: 0.66s;
-	-webkit-animation-fill-mode: both;
-	   -moz-animation-fill-mode: both;
-	     -o-animation-fill-mode: both;
-	        animation-fill-mode: both;
-	-webkit-animation-name: leaflet-flash;
-	   -moz-animation-name: leaflet-flash;
-	     -o-animation-name: leaflet-flash;
-	        animation-name: leaflet-flash;
-}
-
-@-webkit-keyframes leaflet-flash {
-	0%, 50%, 100% { opacity: 1; }	
-	25%, 75% { opacity: 0.3; }
-}
-
-@-moz-keyframes leaflet-flash {
-	0%, 50%, 100% { opacity: 1; }	
-	25%, 75% { opacity: 0.3; }
-}
-
-@-o-keyframes leaflet-flash {
-	0%, 50%, 100% { opacity: 1; }	
-	25%, 75% { opacity: 0.3; }
-}
-
-@keyframes leaflet-flash {
-	0%, 50%, 100% { opacity: 1; }	
-	25%, 75% { opacity: 0; }
-}

external/leaflet.draw.css

@@ -0,0 +1,212 @@
+/* ================================================================== */
+/* Toolbars
+/* ================================================================== */
+
+.leaflet-draw-section {
+	position: relative;
+}
+
+.leaflet-draw-toolbar {
+	margin-top: 12px;
+}
+
+.leaflet-draw-toolbar-top {
+	margin-top: 0;
+}
+
+.leaflet-draw-toolbar-notop a:first-child {
+	border-top-right-radius: 0;
+}
+
+.leaflet-draw-toolbar-nobottom a:last-child {
+	border-bottom-right-radius: 0;
+}
+
+.leaflet-draw-toolbar a {
+	background-image: url(@@INCLUDEIMAGE:images/draw-spritesheet.png@@);
+	background-repeat: no-repeat;
+}
+
+.leaflet-draw a {
+	display: block;
+	text-align: center;
+	text-decoration: none;
+}
+
+/* ================================================================== */
+/* Toolbar actions menu
+/* ================================================================== */
+
+.leaflet-draw-actions {
+	display: none;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
+	top: 0;
+}
+
+.leaflet-draw-actions li {
+	float: left;
+}
+
+.leaflet-draw-actions li:first-child a {
+	border-left: none;
+}
+
+.leaflet-draw-actions li:last-child a {
+	-webkit-border-radius: 0 4px 4px 0;
+	        border-radius: 0 4px 4px 0;
+}
+
+.leaflet-draw-actions a {
+	background-color: #919187;
+	border-left: 1px solid #AAA;
+	color: #FFF;
+	font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	line-height: 28px;
+	text-decoration: none;
+	width: 50px;
+	height: 28px;
+}
+
+.leaflet-draw-actions-bottom {
+	margin-top: 0;
+}
+
+.leaflet-draw-actions-top {
+	margin-top: 1px;
+}
+
+.leaflet-draw-actions-top a,
+.leaflet-draw-actions-bottom a {
+	height: 27px;
+	line-height: 27px;
+}
+
+.leaflet-draw-actions a:hover {
+	background-color: #A0A098;
+}
+
+.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
+	height: 26px;
+	line-height: 26px;
+}
+
+/* ================================================================== */
+/* Draw toolbar
+/* ================================================================== */
+
+.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
+	background-position: -2px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
+	background-position: -31px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
+	background-position: -62px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-circle {
+	background-position: -92px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-marker {
+	background-position: -122px -2px;
+}
+
+/* ================================================================== */
+/* Edit toolbar
+/* ================================================================== */
+
+.leaflet-draw-toolbar .leaflet-draw-edit-edit {
+	background-position: -152px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-edit-remove {
+	background-position: -182px -2px;
+}
+
+/* ================================================================== */
+/* Drawing styles
+/* ================================================================== */
+
+.leaflet-mouse-marker {
+	background-color: #fff;
+	cursor: crosshair;
+}
+
+.leaflet-draw-tooltip {
+	background: rgb(54, 54, 54);
+	background: rgba(0, 0, 0, 0.5);
+	border: 1px solid transparent;
+	-webkit-border-radius: 4px;
+	        border-radius: 4px;
+	color: #fff;
+	font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	margin-left: 20px;
+	margin-top: -21px;
+	padding: 4px 8px;
+	position: absolute;
+	white-space: nowrap;
+	z-index: 6;
+}
+
+.leaflet-draw-tooltip:before {
+	border-right: 6px solid black;
+	border-right-color: rgba(0, 0, 0, 0.5);
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	content: "";
+	position: absolute;
+	top: 7px;
+	left: -7px;
+}
+
+.leaflet-error-draw-tooltip {
+	background-color: #F2DEDE;
+	border: 1px solid #E6B6BD;
+	color: #B94A48;
+}
+
+.leaflet-error-draw-tooltip:before {
+	border-right-color: #E6B6BD;
+}
+
+.leaflet-draw-tooltip-single {
+	margin-top: -12px
+}
+
+.leaflet-draw-tooltip-subtext {
+	color: #f8d5e4;
+}
+
+.leaflet-draw-guide-dash {
+	font-size: 1%;
+	opacity: 0.6;
+	position: absolute;
+	width: 5px;
+	height: 5px;
+}
+
+/* ================================================================== */
+/* Edit styles
+/* ================================================================== */
+
+.leaflet-edit-marker-selected {
+	background: rgba(254, 87, 161, 0.1);
+	border: 4px dashed rgba(254, 87, 161, 0.6);
+	-webkit-border-radius: 4px;
+	        border-radius: 4px;
+}
+
+.leaflet-edit-move {
+	cursor: move;
+}
+
+.leaflet-edit-resize {
+	cursor: pointer;
+}

plugins/draw-tools.user.js

@@ -19,155 +19,86 @@ if(typeof window.plugin !== 'function') window.plugin = function() {};
 
 // PLUGIN START ////////////////////////////////////////////////////////
 
-var DRAW_TOOLS_SHAPE_OPTIONS = {
-  color: '#BB56FF',
-  fill: false,
-  opacity: 1,
-  weight: 4,
-  clickable: false
-};
 
 // use own namespace for plugin
 window.plugin.drawTools = function() {};
 
 window.plugin.drawTools.loadExternals = function() {
   try { console.log('Loading leaflet.draw JS now'); } catch(e) {}
-  @@INCLUDERAW:external/leaflet.draw.0.1.6.js@@
+  @@INCLUDERAW:external/leaflet.draw.js@@
   try { console.log('done loading leaflet.draw JS'); } catch(e) {}
 
   window.plugin.drawTools.boot();
 
-  $('head').append('<style>@@INCLUDESTRING:external/leaflet.draw.0.1.6.css@@</style>');
+  $('head').append('<style>@@INCLUDESTRING:external/leaflet.draw.css@@</style>');
 }
 
 
-window.plugin.drawTools.addStyles = function() {
-  $('head').append('<style>.leaflet-control-draw a { color: #222; text-decoration: none; text-align: center; font-size: 17px; line-height: 22px; }</style>');
-}
-
-// renders buttons which are not originally part of Leaflet.draw, such
-// as the clear-drawings button.
-window.plugin.drawTools.addCustomButtons = function() {
-  $('.leaflet-control-draw .leaflet-bar-part-bottom').removeClass('leaflet-bar-part-bottom');
-
-  var undo = $('<a class="leaflet-bar-part" title="remove last drawn line/circle/marker" href="#">⎌</a>')
-    .click(function() {
-      var last = null;
-      window.plugin.drawTools.drawnItems.eachLayer(function(l) {
-        last = l;
-      });
-      if(last) window.plugin.drawTools.drawnItems.removeLayer(last);
-    }
-  );
-
-  var clear = $('<a class="leaflet-bar-part leaflet-bar-part-bottom" title="clear ALL drawings" href="#">✗</a>')
-    .click(function() {
-      window.plugin.drawTools.drawnItems.clearLayers();
-    }
-  );
-
-  $('.leaflet-control-draw').append(undo).append(clear);
-}
 
 // renders the draw control buttons in the top left corner
 window.plugin.drawTools.addDrawControl = function() {
   var drawControl = new L.Control.Draw({
-    rectangle: false,
+    draw: {
-    polygon: false,
+      rectangle: false,
+      polygon: {
+        title: 'Add a polygon\n\n'
+          + 'Click on the button, then click on the map to\n'
+          + 'define the start of the polygon. Continue clicking\n'
+          + 'to draw the line you want. Click the first or last\n'
+          + 'point of the line (a small white rectangle) to\n'
+          + 'finish. Double clicking also works.'
+      },
+
+      polyline: {
+        title: 'Add a (poly) line.\n\n'
+          + 'Click on the button, then click on the map to\n'
+          + 'define the start of the line. Continue clicking\n'
+          + 'to draw the line you want. Click the <b>last</b>\n'
+          + 'point of the line (a small white rectangle) to\n'
+          + 'finish. Double clicking also works.'
+      },
+
+      circle: {
+        title: 'Add a circle.\n\n'
+          + 'Click on the button, then click-AND-HOLD on the\n'
+          + 'map where the circle’s center should be. Move\n'
+          + 'the mouse to control the radius. Release the mouse\n'
+          + 'to finish.'
+      },
+
+      marker: {
+        title: 'Add a marker.\n\n'
+          + 'Click on the button, then click on the map where\n'
+          + 'you want the marker to appear.'
+      },
 
-    polyline: {
-      shapeOptions: DRAW_TOOLS_SHAPE_OPTIONS,
-      title: 'Add a (poly) line.\n\n'
-        + 'Click on the button, then click on the map to\n'
-        + 'define the start of the line. Continue click-\n'
-        + 'ing to draw the line you want. Click the last\n'
-        + 'point of the line (a small white rectangle) to\n'
-        + 'finish. Double clicking also works.'
     },
 
-    circle: {
+    edit: {
-      shapeOptions: DRAW_TOOLS_SHAPE_OPTIONS,
+      featureGroup: window.plugin.drawTools.drawnItems,
-      title: 'Add a circle.\n\n'
+
-        + 'Click on the button, then click-AND-HOLD on the\n'
+      edit: {
-        + 'map where the circle’s center should be. Move\n'
+        title: 'Edit drawn items'
-        + 'the mouse to control the radius. Release the mouse\n'
+      },
-        + 'to finish.'
+
+      remove: {
+        title: 'Delete drawn items'
+      },
+
     },
 
-    marker: {
-      title: 'Add a marker.\n\n'
-        + 'Click on the button, then click on the map where\n'
-        + 'you want the marker to appear. You can drag the\n'
-        + 'marker around after it has been placed.'
-    }
   });
+
   map.addControl(drawControl);
-  plugin.drawTools.addCustomButtons();
+//  plugin.drawTools.addCustomButtons();
 }
 
-// hacks into circle to render the radius of the circle while drawing
-// and to allow the center of the circle to snap to a nearby portal.
-window.plugin.drawTools.enhanceCircle = function() {
-  // replace _onMouseMove function to also display the radius of the
-  // circle
-  L.Circle.Draw.prototype._onMouseMove = function (e) {
-    var layerPoint = e.layerPoint,
-        latlng = e.latlng;
-
-    this._updateLabelPosition(layerPoint);
-    if (this._isDrawing) {
-      var dist = this._startLatLng.distanceTo(latlng);
-      dist = dist  > 1000
-              ? (dist  / 1000).toFixed(2) + ' km'
-              : Math.ceil(dist) + ' m';
-      this._updateLabelText({
-        text: 'Release mouse to finish drawing. ',
-        subtext: 'radius: ' +dist }
-      );
-      this._drawShape(latlng);
-    }
-  }
-
-  // replace _onMouseDown to implement snapping
-  L.Circle.Draw.prototype._onMouseDown = function (e) {
-    this._isDrawing = true;
-
-    var snapTo = window.plugin.drawTools.getSnapLatLng(e.containerPoint);
-    this._startLatLng = snapTo || e.latlng;
-
-    L.DomEvent
-      .on(document, 'mouseup', this._onMouseUp, this)
-      .preventDefault(e.originalEvent);
-  }
-}
-
-// hacks into PolyLine to implement snapping and to remove the polyline
-// markers when they are not required anymore for finishing the line.
-// Otherwise they get in the way and make it harder to create a closed
-// polyline.
-window.plugin.drawTools.enhancePolyLine = function() {
-  // hack in snapping
-  L.Polyline.Draw.prototype._onClickOld = L.Polyline.Draw.prototype._onClick;
-  L.Polyline.Draw.prototype._onClick = function(e) {
-    var cp = map.latLngToContainerPoint(e.target.getLatLng());
-    var snapTo = window.plugin.drawTools.getSnapLatLng(cp);
-    if(snapTo) e.target._latlng = snapTo;
-    return this._onClickOld(e);
-  }
-
-  // remove polyline markers because they get in the way
-  L.Polyline.Draw.prototype._updateMarkerHandlerOld = L.Polyline.Draw.prototype._updateMarkerHandler;
-  L.Polyline.Draw.prototype._updateMarkerHandler = function() {
-    this._updateMarkerHandlerOld();
-    if (this._markers.length > 1)
-      this._markerGroup.removeLayer(this._markers[this._markers.length - 2]);
-  }
-}
 
 // given a container point it tries to find the most suitable portal to
 // snap to. It takes the CircleMarker’s radius and weight into account.
 // Will return null if nothing to snap to or a LatLng instance.
 window.plugin.drawTools.getSnapLatLng = function(containerPoint) {
+// TODO: use this function again, if possible
   var candidates = [];
   $.each(window.portals, function(guid, portal) {
     var ll = portal.getLatLng();
@@ -183,30 +114,25 @@ window.plugin.drawTools.getSnapLatLng = function(containerPoint) {
   return candidates[0][1];
 }
 
+
 window.plugin.drawTools.boot = function() {
-  plugin.drawTools.enhanceCircle();
+  //create a leaflet FeatureGroup to hold drawn items
-  plugin.drawTools.enhancePolyLine();
-  plugin.drawTools.addStyles();
-  plugin.drawTools.addDrawControl();
 
-  window.plugin.drawTools.drawnItems = new L.LayerGroup();
+  window.plugin.drawTools.drawnItems = new L.FeatureGroup();
   var drawnItems = window.plugin.drawTools.drawnItems;
-  map.on('draw:poly-created', function (e) {
-    drawnItems.addLayer(e.poly);
-  });
-
-
-  map.on('draw:circle-created', function (e) {
-    drawnItems.addLayer(e.circ);
-  });
-
-  map.on('draw:marker-created', function (e) {
-    drawnItems.addLayer(e.marker);
-    e.marker.dragging.enable();
-  });
 
   window.layerChooser.addOverlay(drawnItems, 'Drawn Items');
   map.addLayer(drawnItems);
+
+  //add the draw control - this references the above FeatureGroup for editing purposes
+  plugin.drawTools.addDrawControl();
+
+  map.on('draw:created', function(e) {
+    var type=e.layerType;
+    var layer=e.layer;
+    window.plugin.drawTools.drawnItems.addLayer(layer);
+  });
+
 }