diff --git a/src/gui/gui-layer-control.mjs b/src/gui/gui-layer-control.mjs index 8b2ba859..11bfbf19 100644 --- 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 = '
'; @@ -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 index d6fe8545..209facf5 100644 --- 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,7 +356,7 @@ export function MshpMap(gui) { }); } - function getDrawableContentLayers() { + function getContentLayers() { var layers = getVisibleMapLayers(); if (isTableView()) return findActiveLayer(layers); return layers.filter(function(o) { @@ -364,6 +364,13 @@ export function MshpMap(gui) { }); } + 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 index 3f858ba1..b768d637 100644 --- 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 }