editor: Add reverse backwards drawing mode and improve the reset handler

htdocs/mapscript.js

@@ -297,7 +297,7 @@ L.GotoControl = L.MyControl.extend({
 	options: {
 		position: 'topleft',
 		callback: prompt_location,
-		title: 'Jump to coordinates.',
+		title: 'Jump to coordinates',
 		html: '⌖'
 	}
 });

htdocs/streeteditor.js

@@ -1,6 +1,7 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 editor_mode = urlParams.has('editor');
+
 if (editor_mode) {
 	var draw_layer;
 	var polyline;
@@ -13,14 +14,22 @@ if (editor_mode) {
 		return latlng;
 	}
 
-	function start_editing(e) {
+	function start_editing(dir = 1) {
 		// TODO: Check whether we already are in edit mode
 		// TODO: Detect whether we are cloner to the tail or the head, and issue Fwd or Bwd accordingly
-		if (polyline)
+		if (polyline) {
+			if (dir)
 				polyline.editor.continueForward();
 			else
+				polyline.editor.continueBackward();
+		} else {
 			polyline = mymap.editTools.startPolyline();
 		}
+	}
+
+	function start_reverse_editing() {
+		start_editing(0);
+	}
 
 	function strToPoints(str) {
 		var temp = JSON.parse("[" + str + "]"); // TODO: add .5 everwhere
@@ -48,10 +57,17 @@ if (editor_mode) {
 			"* Double click a waypoint to delete it.\n" +
 			"* Click save in the top right to get the new string.\n\n" +
 			"Enter existing waypoints in the following format: [x,y],[x,y]:", window.location.hash.slice(1));
+			if (!str)
+				return;
 		} else {
 			str = window.location.hash.slice(1);
 		}
 
+		if (polyline) {
+				polyline.remove(mymap);
+				polyline = undefined;
+		}
+
 		if (str) {
 			coords = strToPoints(str);
 			for (var i = 0; i < coords.length; i++) {
@@ -65,7 +81,6 @@ if (editor_mode) {
 
 	function editor_onHashChange() {
 		if (("#" + get_location_string()) != window.location.hash) {
-			polyline.remove(mymap);
 			onLoad(0);
 		}
 	}
@@ -78,7 +93,6 @@ if (editor_mode) {
 	document.getElementById('mapid').classList.add("no-aa");
 	mymap.setMaxZoom(14);
 	mymap.off('click', onMapClick);
-	onLoad();
 
 	function get_location_string() {
 		var latlngs = polyline.getLatLngs();
@@ -95,7 +109,11 @@ if (editor_mode) {
 	}
 
 	function show_location_string(e) {
-		prompt("Copy this string back into the Wiki and wait for a few hours:", get_location_string());
+		prompt("Copy this string back into the Wiki and wait for the server to refresh the maps:", get_location_string());
+	}
+
+	function reset_path(e) {
+		onLoad(1);
 	}
 
 	L.EditControl = L.Control.extend({
@@ -120,15 +138,33 @@ if (editor_mode) {
 		}
 	});
 
+	L.ResetPathControl = L.EditControl.extend({
+		options: {
+			position: 'topleft',
+			callback: reset_path,
+			title: 'Enter path coordinates',
+			html: '📂'
+		}
+	});
+
 	L.StartEditControl = L.EditControl.extend({
 		options: {
 			position: 'topleft',
 			callback: start_editing,
-			title: 'Start editing',
+			title: 'Start editing (forward)',
 			html: '\\/\\'
 		}
 	});
 
+	L.StartReverseEditControl = L.EditControl.extend({
+		options: {
+			position: 'topleft',
+			callback: start_reverse_editing,
+			title: 'Start editing (backward)',
+			html: '↺'
+		}
+	});
+
 	L.NewLineControl = L.EditControl.extend({
 		options: {
 			position: 'topleft',
@@ -139,5 +175,9 @@ if (editor_mode) {
 	});
 
 	mymap.addControl(new L.NewLineControl());
+	mymap.addControl(new L.ResetPathControl());
 	mymap.addControl(new L.StartEditControl());
+	mymap.addControl(new L.StartReverseEditControl());
+
+	onLoad();
 }