markers overview

modules/ui/layers.js

@@ -1558,13 +1558,14 @@ const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => {
 };
 
 function drawMarker(marker, rescale = 1) {
-  const {i, icon, x, y, dx = 50, dy = 50, px = 12, size = 30} = marker;
+  const {i, icon, x, y, dx = 50, dy = 50, px = 12, size = 30, pin, fill, stroke} = marker;
   const id = `marker${i}`;
   const zoomSize = rescale ? Math.max(rn(size / 5 + 24 / scale, 2), 1) : 1;
   const viewX = rn(x - zoomSize / 2, 1);
   const viewY = rn(y - zoomSize, 1);
+  const pinHTML = getPin(pin, fill, stroke);
 
-  return `<svg id="${id}" viewbox="0 0 30 30" width="${zoomSize}" height="${zoomSize}" x="${viewX}" y="${viewY}"><g>${getPin()}</g><text x="${dx}%" y="${dy}%" font-size="${px}px" >${icon}</text></svg>`;
+  return `<svg id="${id}" viewbox="0 0 30 30" width="${zoomSize}" height="${zoomSize}" x="${viewX}" y="${viewY}"><g>${pinHTML}</g><text x="${dx}%" y="${dy}%" font-size="${px}px" >${icon}</text></svg>`;
 }
 
 function toggleLabels(event) {

modules/ui/markers-editor.js

@@ -1,11 +1,10 @@
 "use strict";
-function editMarker() {
+function editMarker(markerI) {
   if (customization) return;
   closeDialogs(".stable");
 
-  const element = d3.event.target.closest("svg");
-  const marker = pack.markers.find(({i}) => Number(element.id.slice(6)) === i);
-  if (!marker) return;
+  const [element, marker] = getElement(markerI, d3.event);
+  if (!marker || !element) return;
 
   elSelected = d3.select(element).raise().call(d3.drag().on("start", dragMarker)).classed("draggable", true);
 
@@ -53,6 +52,18 @@ function editMarker() {
     listen(markerRemove, "click", confirmMarkerDeletion)
   ];
 
+  function getElement(markerI, event) {
+    if (event) {
+      const element = event.target?.closest("svg");
+      const marker = pack.markers.find(({i}) => Number(element.id.slice(6)) === i);
+      return [element, marker];
+    }
+
+    const element = document.getElementById(`marker${markerI}`);
+    const marker = pack.markers.find(({i}) => i === markerI);
+    return [element, marker];
+  }
+
   function getSameTypeMarkers() {
     const currentType = marker.type;
     if (!currentType) return [marker];
@@ -76,8 +87,10 @@ function editMarker() {
 
       const size = marker.size || 30;
       const zoomSize = Math.max(rn(size / 5 + 24 / scale, 2), 1);
+
       marker.x = rn(x + dx + zoomSize / 2, 1);
       marker.y = rn(y + dy + zoomSize, 1);
+      marker.cell = findCell(marker.x, marker.y);
     });
   }
 
@@ -230,6 +243,7 @@ function editMarker() {
     pack.markers = pack.markers.filter(m => m.i !== marker.i);
     element.remove();
     $("#markerEditor").dialog("close");
+    if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
   }
 
   function closeMarkerEditor() {

modules/ui/markers-overview.js

@@ -22,16 +22,26 @@ function overviewMarkers() {
   });
 
   const listeners = [
+    listen(body, "click", handleLineClick),
     listen(markersOverviewRefresh, "click", addLines),
-    listen(markersAddFromOverview, "click", () => {}),
+    listen(markersAddFromOverview, "click", toggleAddMarker),
     listen(markersGenerationConfig, "click", configMarkersGeneration),
     listen(markersRemoveAll, "click", triggerRemoveAll)
   ];
 
+  function handleLineClick(ev) {
+    const el = ev.target;
+    const i = +el.parentNode.dataset.i;
+
+    if (el.classList.contains("icon-pencil")) return openEditor(i);
+    if (el.classList.contains("locks")) return toggleLockStatus(el, i);
+    if (el.classList.contains("icon-trash-empty")) return triggerRemove(i);
+  }
+
   function addLines() {
     const lines = pack.markers
       .map(({i, type, icon, lock}) => {
-        return `<div class="states" data-id=${i} data-type="${type}">
+        return `<div class="states" data-i=${i} data-type="${type}">
         <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
         <span data-tip="Edit marker" class="icon-pencil"></span>
         <span class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
@@ -46,6 +56,15 @@ function overviewMarkers() {
     applySorting(markersHeader);
   }
 
+  function openEditor(i) {
+    const marker = pack.markers.find(marker => marker.i === i);
+    if (!marker) return;
+
+    const {x, y} = marker;
+    zoomTo(x, y, 8, 2000);
+    editMarker(i);
+  }
+
   function highlightMarkerOn(event) {
     if (!layerIsOn("toggleLabels")) toggleLabels();
     // burgLabels.select("[data-id='" + burg + "']").classed("drag", true);
@@ -55,33 +74,17 @@ function overviewMarkers() {
     // burgLabels.selectAll("text.drag").classed("drag", false);
   }
 
-  function zoomInto() {
-    const burg = +this.parentNode.dataset.id;
-    const label = document.querySelector("#burgLabels [data-id='" + burg + "']");
-    const x = +label.getAttribute("x"),
-      y = +label.getAttribute("y");
-    zoomTo(x, y, 8, 2000);
-  }
-
-  function toggleLockStatus() {
-    const burg = +this.parentNode.dataset.id;
-    toggleBurgLock(burg);
-    if (this.classList.contains("icon-lock")) {
-      this.classList.remove("icon-lock");
-      this.classList.add("icon-lock-open");
-      this.classList.add("inactive");
+  function toggleLockStatus(el, i) {
+    const marker = pack.markers.find(marker => marker.i === i);
+    if (marker.lock) {
+      delete marker.lock;
+      el.className = "locks pointer icon-lock-open inactive";
     } else {
-      this.classList.remove("icon-lock-open");
-      this.classList.add("icon-lock");
-      this.classList.remove("inactive");
+      marker.lock = true;
+      el.className = "locks pointer icon-lock";
     }
   }
 
-  function openEditor() {
-    const burg = +this.parentNode.dataset.id;
-    editBurg(burg);
-  }
-
   function triggerRemove(i) {
     confirmationDialog({
       title: "Remove marker",
@@ -91,10 +94,16 @@ function overviewMarkers() {
     });
   }
 
+  function toggleAddMarker() {
+    markersAddFromOverview.classList.toggle("pressed");
+    addMarker.click();
+  }
+
   function removeMarker(i) {
     notes = notes.filter(note => note.id !== `marker${i}`);
     pack.markers = pack.markers.filter(marker => marker.i !== i);
     document.getElementById(`marker${i}`)?.remove();
+    addLines();
   }
 
   function triggerRemoveAll() {

modules/ui/tools.js

@@ -688,6 +688,7 @@ function toggleAddMarker() {
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
   addMarker.classList.add("pressed");
+  markersAddFromOverview.classList.add("pressed");
 
   viewbox.style("cursor", "crosshair").on("click", addMarkerOnClick);
   tip("Click on map to add a marker. Hold Shift to add multiple", true);
@@ -713,6 +714,7 @@ function addMarkerOnClick() {
 
   if (d3.event.shiftKey === false) {
     document.getElementById("markerAdd").classList.remove("pressed");
+    document.getElementById("markersAddFromOverview").classList.remove("pressed");
     unpressClickToAddButton();
   }
 }