GUI -- TopoView - implemented show/hide background map ('B' keystroke)

- reworked SvgUtilService.makeVisible() to be dual-purpose .visible(el, [b]) method.

Change-Id: I8e68994627d1022066cdc9dcbed006675431d91a

@@ -235,12 +235,16 @@
                 return s.replace(/px$/,'');
                 return s.replace(/px$/,'');
             }
             }
 
 
+            function safeId(s) {
+                return s.replace(/[^a-z0-9]/gi, '-');
+            }
+
             function makeVisible(el, b) {
             function makeVisible(el, b) {
                 el.style('visibility', (b ? 'visible' : 'hidden'));
                 el.style('visibility', (b ? 'visible' : 'hidden'));
             }
             }
 
 
-            function safeId(s) {
-                return s.replace(/[^a-z0-9]/gi, '-');
+            function isVisible(el) {
+                return el.style('visibility') === 'visible';
             }
             }
 
 
             return {
             return {
@@ -249,8 +253,14 @@
                 cat7: cat7,
                 cat7: cat7,
                 translate: translate,
                 translate: translate,
                 stripPx: stripPx,
                 stripPx: stripPx,
-                makeVisible: makeVisible,
-                safeId: safeId
+                safeId: safeId,
+                visible: function (el, x) {
+                            if (x === undefined) {
+                                return isVisible(el);
+                            } else {
+                                makeVisible(el, x);
+                            }
+                         }
             };
             };
         }]);
         }]);
 }());
 }());

@@ -48,7 +48,7 @@
 
 
             H: [tfs.toggleHosts, 'Toggle host visibility'],
             H: [tfs.toggleHosts, 'Toggle host visibility'],
             M: [tfs.toggleOffline, 'Toggle offline visibility'],
             M: [tfs.toggleOffline, 'Toggle offline visibility'],
-            //B: [toggleBg, 'Toggle background image'],
+            B: [toggleMap, 'Toggle background map'],
             //P: togglePorts,
             //P: togglePorts,
 
 
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
@@ -94,6 +94,10 @@
         tfs.updateDeviceColors();
         tfs.updateDeviceColors();
     }
     }
 
 
+    function toggleMap() {
+        sus.visible(mapG, !sus.visible(mapG));
+    }
+
     function resetZoom() {
     function resetZoom() {
         zoomer.reset();
         zoomer.reset();
     }
     }
@@ -184,7 +188,7 @@
     }
     }
 
 
     function showNoDevs(b) {
     function showNoDevs(b) {
-        sus.makeVisible(noDevsLayer, b);
+        sus.visible(noDevsLayer, b);
     }
     }
 
 
     function showCallibrationPoints() {
     function showCallibrationPoints() {

@@ -365,21 +365,21 @@
     }
     }
 
 
     function updateHostVisibility() {
     function updateHostVisibility() {
-        sus.makeVisible(nodeG.selectAll('.host'), showHosts);
-        sus.makeVisible(linkG.selectAll('.hostLink'), showHosts);
+        sus.visible(nodeG.selectAll('.host'), showHosts);
+        sus.visible(linkG.selectAll('.hostLink'), showHosts);
     }
     }
 
 
     function updateOfflineVisibility(dev) {
     function updateOfflineVisibility(dev) {
         function updDev(d, show) {
         function updDev(d, show) {
-            sus.makeVisible(d.el, show);
+            sus.visible(d.el, show);
 
 
             tms.findAttachedLinks(d.id).forEach(function (link) {
             tms.findAttachedLinks(d.id).forEach(function (link) {
                 b = show && ((link.type() !== 'hostLink') || showHosts);
                 b = show && ((link.type() !== 'hostLink') || showHosts);
-                sus.makeVisible(link.el, b);
+                sus.visible(link.el, b);
             });
             });
             tms.findAttachedHosts(d.id).forEach(function (host) {
             tms.findAttachedHosts(d.id).forEach(function (host) {
                 b = show && showHosts;
                 b = show && showHosts;
-                sus.makeVisible(host.el, b);
+                sus.visible(host.el, b);
             });
             });
         }
         }
 
 
@@ -721,7 +721,7 @@
             textDy = r + 10;
             textDy = r + 10;
 
 
         d.el = node;
         d.el = node;
-        sus.makeVisible(node, showHosts);
+        sus.visible(node, showHosts);
 
 
         is.addHostIcon(node, r, gid);
         is.addHostIcon(node, r, gid);
 
 
@@ -849,7 +849,7 @@
         d.el = link;
         d.el = link;
         restyleLinkElement(d);
         restyleLinkElement(d);
         if (d.type() === 'hostLink') {
         if (d.type() === 'hostLink') {
-            sus.makeVisible(link, showHosts);
+            sus.visible(link, showHosts);
         }
         }
     }
     }
 
 

@@ -41,7 +41,7 @@ describe('factory: fw/svg/svgUtil.js', function() {
     it('should define api functions', function () {
     it('should define api functions', function () {
         expect(fs.areFunctions(sus, [
         expect(fs.areFunctions(sus, [
             'createDragBehavior', 'loadGlow', 'cat7', 'translate', 'stripPx',
             'createDragBehavior', 'loadGlow', 'cat7', 'translate', 'stripPx',
-            'makeVisible', 'safeId'
+            'safeId', 'visible'
         ])).toBeTruthy();
         ])).toBeTruthy();
     });
     });
 
 
@@ -114,15 +114,17 @@ describe('factory: fw/svg/svgUtil.js', function() {
         expect(sus.stripPx('4px')).toEqual('4');
         expect(sus.stripPx('4px')).toEqual('4');
     });
     });
 
 
-    // === makeVisible()
+    // === visible()
 
 
     it('should hide and show an element', function () {
     it('should hide and show an element', function () {
         var r = svg.append('rect');
         var r = svg.append('rect');
 
 
-        sus.makeVisible(r, false);
+        sus.visible(r, false);
         expect(r.style('visibility')).toEqual('hidden');
         expect(r.style('visibility')).toEqual('hidden');
+        expect(sus.visible(r)).toBe(false);
 
 
-        sus.makeVisible(r, true);
+        sus.visible(r, true);
         expect(r.style('visibility')).toEqual('visible');
         expect(r.style('visibility')).toEqual('visible');
+        expect(sus.visible(r)).toBe(true);
     });
     });
 });
 });