Allow hiding of the selected layer

mbloch · Mar 2, 2024 · 72b7356 · 72b7356
1 parent f4c94d6
commit 72b7356
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 17 deletions.
diff --git a/src/gui/gui-layer-control.mjs b/src/gui/gui-layer-control.mjs
@@ -198,6 +198,7 @@ export function LayerControl(gui) {
 
     if (opts.pinnable) classes += ' pinnable';
     if (map.isActiveLayer(lyr)) classes += ' active';
+    if (lyr.hidden) classes += ' invisible';
     if (lyr.pinned) classes += ' pinned';
 
     html = '<!-- ' + lyr.menu_id + '--><div class="' + classes + '">';
@@ -276,10 +277,24 @@ export function LayerControl(gui) {
       // init pin button
       GUI.onClick(entry.findChild('img.black-eye'), function(e) {
         var target = findLayerById(id);
-        var pinned = target.layer.pinned;
+        var lyr = target.layer;
+        var active = map.isActiveLayer(lyr);
+        var hidden = false; // active && lyr.hidden || false;
+        var pinned = false;
+        var unpinned = false;
         e.stopPropagation();
-        map.setLayerPinning(target, !pinned);
-        entry.classed('pinned', !pinned);
+        if (active) {
+          hidden = !lyr.hidden;
+          pinned = !hidden && lyr.unpinned;
+          unpinned = lyr.pinned && hidden;
+        } else {
+          pinned = !lyr.pinned;
+        }
+        lyr.hidden = hidden;
+        lyr.unpinned = unpinned;
+        map.setLayerPinning(target, pinned);
+        entry.classed('pinned', pinned);
+        entry.classed('invisible', hidden);
         updatePinAllButton();
         map.redraw();
       });
@@ -305,12 +320,16 @@ export function LayerControl(gui) {
     GUI.onClick(entry, function() {
       var target = findLayerById(id);
       // don't select if user is typing or dragging
-      if (!GUI.textIsSelected() && !dragging) {
-        gui.clearMode();
-        if (!map.isActiveLayer(target.layer)) {
-          model.selectLayer(target.layer, target.dataset);
-        }
+      if (GUI.textIsSelected() || dragging) return;
+      // undo any temporary hiding when layer is selected
+      target.layer.hidden = false;
+      if (!map.isActiveLayer(target.layer)) {
+        model.selectLayer(target.layer, target.dataset);
       }
+      // close menu after a delay
+      setTimeout(function() {
+        gui.clearMode();
+      }, 230);
     });
   }
 

diff --git a/src/gui/gui-map.mjs b/src/gui/gui-map.mjs
@@ -132,12 +132,12 @@ export function MshpMap(gui) {
     clearAllDisplayArcs();
 
     // Reproject all visible map layers
-    getDrawableContentLayers().forEach(function(lyr) {
+    getContentLayers().forEach(function(lyr) {
       projectDisplayLayer(lyr, newCRS);
     });
 
     // kludge to make sure all layers have styles
-    updateLayerStyles(getDrawableContentLayers());
+    updateLayerStyles(getContentLayers());
 
     // Update map extent (also triggers redraw)
     projectMapExtent(_ext, oldCRS, this.getDisplayCRS(), calcFullBounds());
@@ -265,9 +265,9 @@ export function MshpMap(gui) {
     _ext.setFullBounds(calcFullBounds(), getStrictBounds());
   }
 
-  function getVisibleContentBounds() {
+  function getContentLayerBounds() {
     var b = new Bounds();
-    var layers = getDrawableContentLayers();
+    var layers = getContentLayers();
     layers.forEach(function(lyr) {
       b.mergeBounds(lyr.bounds);
     });
@@ -280,7 +280,7 @@ export function MshpMap(gui) {
   }
 
   function calcFullBounds() {
-    var b = getVisibleContentBounds();
+    var b = getContentLayerBounds();
 
     // add margin
     // use larger margin for small sizes
@@ -356,14 +356,21 @@ export function MshpMap(gui) {
     });
   }
 
-  function getDrawableContentLayers() {
+  function getContentLayers() {
     var layers = getVisibleMapLayers();
     if (isTableView()) return findActiveLayer(layers);
     return layers.filter(function(o) {
       return !!o.geographic;
     });
   }
 
+  function getDrawableContentLayers() {
+    return getContentLayers().filter(function(lyr) {
+      if (isActiveLayer(lyr.layer) && lyr.layer.hidden) return false;
+      return true;
+    });
+  }
+
   function getDrawableFurnitureLayers(layers) {
     if (!isPreviewView()) return [];
     return getVisibleMapLayers().filter(function(o) {

diff --git a/www/page.css b/www/page.css
@@ -856,7 +856,8 @@ img.eye-btn {
 	opacity: 0;
 }
 
-.pinnable:not(.pinned):not(.active) img.black-eye {
+.pinnable:not(.pinned):not(.active) img.black-eye,
+.pinnable.active.invisible img.black-eye {
 	opacity: 0.2;
 }
 
@@ -869,9 +870,9 @@ img.eye-btn {
 }*/
 
 img.close-btn:hover,
-.pinnable.active:not(.pinned) img.black-eye,
+.pinnable.active:not(.pinned):not(.invisible) img.black-eye,
 .pinnable.pinned:not(.active) img.green-eye,
-.pinnable.pinned.active img.black-eye {
+.pinnable.active.pinned:not(.invisible) img.black-eye {
 	opacity: 1
 }