markers overview - focus on marker

modules/ui/editors.js

@@ -719,30 +719,33 @@ function uploadFile(el, callback) {
   fileReader.onload = loaded => callback(loaded.target.result);
 }
 
-function highlightElement(element) {
-  if (debug.select(".highlighted").size()) return; // allow only 1 highlight element simultaniosly
-  const box = element.getBBox();
+function getBBox(element) {
+  const x = +element.getAttribute("x");
+  const y = +element.getAttribute("y");
+  const width = +element.getAttribute("width");
+  const height = +element.getAttribute("height");
+  return {x, y, width, height};
+}
+
+function highlightElement(element, zoom) {
+  if (debug.select(".highlighted").size()) return; // allow only 1 highlight element simultaneously
+  const box = element.tagName === "svg" ? getBBox(element) : element.getBBox();
   const transform = element.getAttribute("transform") || null;
   const enter = d3.transition().duration(1000).ease(d3.easeBounceOut);
   const exit = d3.transition().duration(500).ease(d3.easeLinear);
 
-  const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.width).attr("height", box.height).attr("transform", transform);
+  const highlight = debug.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.width).attr("height", box.height);
+  highlight.classed("highlighted", 1).attr("transform", transform);
+  highlight.transition(enter).style("outline-offset", "0px").transition(exit).style("outline-color", "transparent").delay(1000).remove();
 
-  highlight
-    .classed("highlighted", 1)
-    .transition(enter)
-    .style("outline-offset", "0px")
-    .transition(exit)
-    .style("outline-color", "transparent")
-    .delay(1000)
-    .remove();
-
-  const tr = parseTransform(transform);
-  let x = box.x + box.width / 2;
-  if (tr[0]) x += tr[0];
-  let y = box.y + box.height / 2;
-  if (tr[1]) y += tr[1];
-  zoomTo(x, y, scale > 2 ? scale : 3, 1600);
+  if (zoom) {
+    const tr = parseTransform(transform);
+    let x = box.x + box.width / 2;
+    if (tr[0]) x += tr[0];
+    let y = box.y + box.height / 2;
+    if (tr[1]) y += tr[1];
+    zoomTo(x, y, scale > 2 ? scale : zoom, 1600);
+  }
 }
 
 function selectIcon(initial, callback) {

modules/ui/markers-overview.js

@@ -4,6 +4,7 @@ function overviewMarkers() {
   closeDialogs("#markersOverview, .stable");
   if (!layerIsOn("toggleMarkers")) toggleMarkers();
 
+  const markerGroup = document.getElementById("markers");
   const body = document.getElementById("markersBody");
   const markersFooterNumber = document.getElementById("markersFooterNumber");
   const markersOverviewRefresh = document.getElementById("markersOverviewRefresh");
@@ -36,6 +37,7 @@ function overviewMarkers() {
     const i = +el.parentNode.dataset.i;
 
     if (el.classList.contains("icon-pencil")) return openEditor(i);
+    if (el.classList.contains("icon-dot-circled")) return focusOnMarker(i);
     if (el.classList.contains("locks")) return toggleLockStatus(el, i);
     if (el.classList.contains("icon-trash-empty")) return triggerRemove(i);
     // TODO: hidden attribute
@@ -46,8 +48,9 @@ function overviewMarkers() {
       .map(({i, type, icon, lock}) => {
         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>
+        <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" 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>`;
       })
@@ -68,14 +71,8 @@ function overviewMarkers() {
     editMarker(i);
   }
 
-  // TODO: highlight markers on hover
-  function highlightMarkerOn(event) {
-    if (!layerIsOn("toggleLabels")) toggleLabels();
-    // burgLabels.select("[data-id='" + burg + "']").classed("drag", true);
-  }
-
-  function highlightMarkerOff() {
-    // burgLabels.selectAll("text.drag").classed("drag", false);
+  function focusOnMarker(i) {
+    highlightElement(document.getElementById(`marker${i}`), 2);
   }
 
   function toggleLockStatus(el, i) {

modules/ui/notes-editor.js

@@ -108,7 +108,7 @@ function editNotes(id, name) {
       return;
     }
 
-    highlightElement(element); // if element is found
+    highlightElement(element, 3); // if element is found
   }
 
   function downloadLegends() {

modules/ui/rivers-overview.js

@@ -91,7 +91,7 @@ function overviewRivers() {
   function zoomToRiver() {
     const r = +this.parentNode.dataset.id;
     const river = rivers.select("#river" + r).node();
-    highlightElement(river);
+    highlightElement(river, 3);
   }
 
   function toggleBasinsHightlight() {