From 126f662c72322615bc35d6477cd4575e0e87061e Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Tue, 5 Oct 2021 22:26:59 +0300
Subject: [PATCH] markers overview - pin markers

---
 index.html                     |  2 +-
 modules/ui/layers.js           |  5 ++++-
 modules/ui/markers-overview.js | 16 ++++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5728d055..836f729f 100644
--- a/index.html
+++ b/index.html
@@ -3564,7 +3564,7 @@
     <div id="loadMapData" style="display: none" class="dialog">
       <div>
         <strong>Load map from</strong>
-        <button onclick="mapToLoad.click()" data-tip="Load .map file from local disk">local disk</button>
+        <button onclick="mapToLoad.click()" data-tip="Load .map file from your local disk">machine</button>
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 5988d537..6da46224 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -1535,7 +1535,10 @@ function toggleMarkers(event) {
 
 function drawMarkers() {
   const rescale = +markers.attr("rescale");
-  const html = pack.markers.map(marker => drawMarker(marker, rescale));
+  const pinned = +markers.attr("pinned");
+
+  const markersData = pinned ? pack.markers.filter(({pinned}) => pinned) : pack.markers;
+  const html = markersData.map(marker => drawMarker(marker, rescale));
   markers.html(html.join(""));
 }
 
diff --git a/modules/ui/markers-overview.js b/modules/ui/markers-overview.js
index 08afcc03..0c9c174d 100644
--- a/modules/ui/markers-overview.js
+++ b/modules/ui/markers-overview.js
@@ -38,6 +38,7 @@ function overviewMarkers() {
 
     if (el.classList.contains("icon-pencil")) return openEditor(i);
     if (el.classList.contains("icon-dot-circled")) return focusOnMarker(i);
+    if (el.classList.contains("icon-pin")) return pinMarker(el, i);
     if (el.classList.contains("locks")) return toggleLockStatus(el, i);
     if (el.classList.contains("icon-trash-empty")) return triggerRemove(i);
     // TODO: hidden attribute
@@ -50,6 +51,7 @@ function overviewMarkers() {
         <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
         <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
         <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
+        <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin inactive pointer"></span>
         <span style="padding-right:.1em" class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
         <span data-tip="Remove marker" class="icon-trash-empty"></span>
       </div>`;
@@ -75,6 +77,20 @@ function overviewMarkers() {
     highlightElement(document.getElementById(`marker${i}`), 2);
   }
 
+  function pinMarker(el, i) {
+    const marker = pack.markers.find(marker => marker.i === i);
+    if (marker.pinned) {
+      delete marker.pinned;
+      const anyPinned = pack.markers.some(marker => marker.pinned);
+      if (!anyPinned) markerGroup.removeAttribute("pinned");
+    } else {
+      marker.pinned = true;
+      markerGroup.setAttribute("pinned", 1);
+    }
+    el.classList.toggle("inactive");
+    drawMarkers();
+  }
+
   function toggleLockStatus(el, i) {
     const marker = pack.markers.find(marker => marker.i === i);
     if (marker.lock) {