removed redundant functions and changed addMarker functionality

index.html

@@ -5509,6 +5509,9 @@
 
         <div id="markersBottom">
           <button id="markersOverviewRefresh" data-tip="Refresh the Overview screen" class="icon-cw"></button>
+          <select id="addedMarkerType">
+            <option value="" selected>empty marker</option>
+          </select>
           <button
             id="markersAddFromOverview"
             data-tip="Add a new marker. Hold Shift to add multiple"

modules/ui/markers-overview.js

@@ -25,6 +25,13 @@ function overviewMarkers() {
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
 
+  Markers.getConfig().forEach(markerConfig => {
+    const option = document.createElement("option");
+    option.setAttribute("value", markerConfig.type);
+    option.textContent = `${markerConfig.icon} ${markerConfig.type}`;
+    document.getElementById("addedMarkerType").appendChild(option);
+  });
+
   const listeners = [
     listen(body, "click", handleLineClick),
     listen(markersInverPin, "click", invertPin),

modules/ui/tools.js

@@ -828,55 +828,15 @@ function addMarkerOnClick() {
   // Find the currently selected marker to use as a base
   const isMarkerSelected = markers.length && elSelected?.node()?.parentElement?.id === "markers";
   const selectedMarker = isMarkerSelected ? markers.find(marker => marker.i === +elSelected.attr("id").slice(6)) : null;
-  const baseMarker = selectedMarker || {icon: "❓"};
+
+  const selectedType = document.getElementById("addedMarkerType").value;
+  const selectedConfig = Markers.getConfig().find(({type}) => type === selectedType);
+
+  const baseMarker = selectedMarker || selectedConfig || {icon: "❓"};
   const marker = Markers.add({...baseMarker, x, y, cell});
 
-  const markersElement = document.getElementById("markers");
-  const rescale = +markersElement.getAttribute("rescale");
-  markersElement.insertAdjacentHTML("beforeend", drawMarker(marker, rescale));
-
-  if (d3.event.shiftKey === false) {
-    document.getElementById("markerAdd").classList.remove("pressed");
-    document.getElementById("markersAddFromOverview").classList.remove("pressed");
-    unpressClickToAddButton();
-  }
-}
-
-function toggleAddRandomMarker(config) {
-  return function() {
-    const pressed = document.getElementById("addMarker")?.classList.contains("pressed");
-    if (pressed) {
-      unpressClickToAddButton();
-      return;
-    }
-
-    addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
-    addMarker.classList.add("pressed");
-    markersAddFromOverview.classList.add("pressed");
-
-    viewbox.style("cursor", "crosshair").on("click", addRandomMarkerOnClick(config));
-    tip("Click on map to add a marker. Hold Shift to add multiple", true);
-    if (!layerIsOn("toggleMarkers")) toggleMarkers();
-    }
-}
-
-function addRandomMarkerOnClick(config) {
-  return function() {
-    const point = d3.mouse(this);
-    const x = rn(point[0], 2);
-    const y = rn(point[1], 2);
-
-    // Find the current cell
-    const cell = findCell(point[0], point[1]);
-
-    // Get the base marker from parent function parameters
-    const baseMarker = {
-      icon: config.icon || "❓",
-      type: config.type || ""
-    };
-    const marker = Markers.add({...baseMarker, x, y, cell});
-    if (config.add) {
-      config.add("marker"+marker.i, cell);
+  if (selectedConfig && selectedConfig.add) {
+    selectedConfig.add("marker"+marker.i, cell);
   }
 
   const markersElement = document.getElementById("markers");
@@ -888,8 +848,6 @@ function addRandomMarkerOnClick(config) {
     document.getElementById("markersAddFromOverview").classList.remove("pressed");
     unpressClickToAddButton();
   }
-    configMarkersGeneration();
-  }
 }
 
 function configMarkersGeneration() {
@@ -903,7 +861,6 @@ function configMarkersGeneration() {
       <td data-tip="Marker icon">Icon</td>
       <td data-tip="Marker number multiplier">Multiplier</td>
       <td data-tip="Number of markers of that type on the current map">Number</td>
-      <td data-tip="Place a random marker of this type">Place</td>
     </tr></thead>`;
     const lines = config.map(({type, icon, multiplier}, index) => {
       const inputId = `markerIconInput${index}`;
@@ -915,9 +872,6 @@ function configMarkersGeneration() {
         </td>
         <td><input type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
         <td style="text-align:center">${markers.filter(marker => marker.type === type).length}</td>
-        <td style="position: relative">
-          <button class="icon-plus add-marker" data-type="${type}" data-tip="Place a random ${type} marker"></button>
-      </td>
       </tr>`;
     });
     const table = `<table class="table">${headers}<tbody>${lines.join("")}</tbody></table>`;
@@ -929,12 +883,6 @@ function configMarkersGeneration() {
         selectIcon(input.value, icon => (input.value = icon));
       });
     });
-
-    document.querySelectorAll('.add-marker').forEach((button) => {
-      button.addEventListener('click', (event) => {
-        toggleAddRandomMarker(Markers.getConfig().find(({type}) => type === event.target.getAttribute('data-type')))();
-      });
-    });
   }
 
   const applyChanges = () => {