GUI -- TopoView - Added Toggle Port Highlighting enable/disable with 'P' key.

 - add/remove mousemove handler.
 - removed commented out test code.

Change-Id: Ice47db36491d466d2d73f6cef1dfc90ff9d8b088

@@ -49,7 +49,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: [toggleMap, 'Toggle background map'],
             B: [toggleMap, 'Toggle background map'],
-            //P: togglePorts,
+            P: [tfs.togglePorts, 'Toggle Port Highlighting'],
 
 
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
             Z: [tos.toggleOblique, 'Toggle oblique view (Experimental)'],
             Z: [tos.toggleOblique, 'Toggle oblique view (Experimental)'],
@@ -69,7 +69,7 @@
             esc: handleEscape,
             esc: handleEscape,
 
 
             _helpFormat: [
             _helpFormat: [
-                ['O', 'I', 'D', '-', 'H', 'M', 'B', 'P' ],
+                ['O', 'I', 'D', '-', 'H', 'M', 'P', 'B' ],
                 ['X', 'Z', 'L', 'U', 'R' ],
                 ['X', 'Z', 'L', 'U', 'R' ],
                 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
                 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
             ]
             ]

@@ -735,10 +735,9 @@
         };
         };
     }
     }
 
 
-    function mkLinkApi(svg, forceG, uplink) {
+    function mkLinkApi(svg, uplink) {
         return {
         return {
             svg: svg,
             svg: svg,
-            forceG: forceG,
             zoomer: uplink.zoomer(),
             zoomer: uplink.zoomer(),
             network: network,
             network: network,
             portLabelG: function () { return portLabelG; },
             portLabelG: function () { return portLabelG; },
@@ -793,7 +792,7 @@
                 tts.initTraffic(mkTrafficApi(uplink));
                 tts.initTraffic(mkTrafficApi(uplink));
                 tos.initOblique(mkObliqueApi(uplink, fltr));
                 tos.initOblique(mkObliqueApi(uplink, fltr));
                 fltr.initFilter(mkFilterApi(uplink), d3.select('#mast-right'));
                 fltr.initFilter(mkFilterApi(uplink), d3.select('#mast-right'));
-                tls.initLink(mkLinkApi(svg, forceG, uplink), td3);
+                tls.initLink(mkLinkApi(svg, uplink), td3);
 
 
                 settings = angular.extend({}, defaultSettings, opts);
                 settings = angular.extend({}, defaultSettings, opts);
 
 
@@ -847,6 +846,7 @@
 
 
                 updateDeviceColors: td3.updateDeviceColors,
                 updateDeviceColors: td3.updateDeviceColors,
                 toggleHosts: toggleHosts,
                 toggleHosts: toggleHosts,
+                togglePorts: tls.togglePorts,
                 toggleOffline: toggleOffline,
                 toggleOffline: toggleOffline,
                 cycleDeviceLabels: cycleDeviceLabels,
                 cycleDeviceLabels: cycleDeviceLabels,
                 unpin: unpin,
                 unpin: unpin,

@@ -23,7 +23,7 @@
     'use strict';
     'use strict';
 
 
     // injected refs
     // injected refs
-    var $log, fs, sus, ts;
+    var $log, fs, sus, ts, flash;
 
 
     var api,
     var api,
         td3,
         td3,
@@ -31,53 +31,33 @@
         enhancedLink = null;    // the link which the mouse is hovering over
         enhancedLink = null;    // the link which the mouse is hovering over
 
 
     // SVG elements;
     // SVG elements;
-    var svg, mouseG;
+    var svg;
+
+    // internal state
+    var showPorts = true;       // enable port highlighting by default
 
 
 
 
     // ======== ALGORITHM TO FIND LINK CLOSEST TO MOUSE ========
     // ======== ALGORITHM TO FIND LINK CLOSEST TO MOUSE ========
 
 
-    function setupMouse(forceG, zoomer) {
-        $log.debug('set up mouse handlers for mouse move');
-        mouseG = forceG.append('g').attr('id', 'topo-mouse');
-        //mouseG.append('circle')
-        //    .attr({
-        //        r: 5,
-        //        opacity: 0
-        //    })
-        //    .style('fill', 'red');
-
-        svg.on('mouseenter', function () {
-            //$log.log('M--ENTER');
-            //mouseG.selectAll('circle').attr('opacity', 1);
-        })
-            .on('mouseleave', function () {
-                //$log.log('M--LEAVE');
-                //mouseG.selectAll('circle').attr('opacity', 0);
-            })
-            .on('mousemove', function () {
-                var m = d3.mouse(this),
-                    sc = zoomer.scale(),
-                    tr = zoomer.translate(),
-                    mx = (m[0] - tr[0]) / sc,
-                    my = (m[1] - tr[1]) / sc;
-
-                //$log.log('M--MOVE', m);
-
-                //mouseG.selectAll('circle')
-                //    .attr({
-                //        cx: mx,
-                //        cy: my
-                //    });
-                updatePerps({x: mx, y: my}, zoomer);
-            });
+    function mouseMoveHandler() {
+        var m = d3.mouse(this),
+            sc = api.zoomer.scale(),
+            tr = api.zoomer.translate(),
+            mx = (m[0] - tr[0]) / sc,
+            my = (m[1] - tr[1]) / sc;
+        computeNearestLink({x: mx, y: my});
     }
     }
 
 
-    function updatePerps(mouse, zoomer) {
-        var proximity = 30 / zoomer.scale(),
-            perpData, perps, nearest, minDist;
+    function computeNearestLink(mouse) {
+        var proximity = 30 / api.zoomer.scale(),
+            nearest, minDist;
 
 
         function sq(x) { return x * x; }
         function sq(x) { return x * x; }
 
 
+        function mdist(p, m) {
+            return Math.sqrt(sq(p.x - m.x) + sq(p.y - m.y));
+        }
+
         function pdrop(line, mouse) {
         function pdrop(line, mouse) {
             var x1 = line.x1,
             var x1 = line.x1,
                 y1 = line.y1,
                 y1 = line.y1,
@@ -92,10 +72,6 @@
             return {x:x4, y:y4};
             return {x:x4, y:y4};
         }
         }
 
 
-        function mdist(p, m) {
-            return Math.sqrt(sq(p.x - m.x) + sq(p.y - m.y));
-        }
-
         function lineSeg(d) {
         function lineSeg(d) {
             return {
             return {
                 x1: d.source.x,
                 x1: d.source.x,
@@ -115,7 +91,6 @@
         }
         }
 
 
         if (network.links.length) {
         if (network.links.length) {
-            perpData = [];
             nearest = null;
             nearest = null;
             minDist = proximity * 2;
             minDist = proximity * 2;
 
 
@@ -135,41 +110,9 @@
                         minDist = dist;
                         minDist = dist;
                         nearest = d;
                         nearest = d;
                     }
                     }
-                    /*
-                     perpData.push({
-                     key: d.key,
-                     x1: mouse.x,
-                     y1: mouse.y,
-                     x2: point.x,
-                     y2: point.y
-                     });
-                     */
                 }
                 }
             });
             });
 
 
-            /*
-             perps = mouseG.selectAll('line')
-             .data(perpData, function (d) { return d.key; })
-             .attr({
-             x1: function (d) { return d.x1; },
-             y1: function (d) { return d.y1; },
-             x2: function (d) { return d.x2; },
-             y2: function (d) { return d.y2; }
-             });
-
-             perps.enter().append('line')
-             .attr({
-             x1: function (d) { return d.x1; },
-             y1: function (d) { return d.y1; },
-             x2: function (d) { return d.x2; },
-             y2: function (d) { return d.y2; }
-             })
-             .style('stroke-width', 2)
-             .style('stroke', 'limegreen');
-
-             perps.exit().remove();
-             */
-
             enhanceNearestLink(nearest);
             enhanceNearestLink(nearest);
         }
         }
     }
     }
@@ -245,36 +188,52 @@
         return {x: k * dx + ln.x, y: k * dy + ln.y};
         return {x: k * dx + ln.x, y: k * dy + ln.y};
     }
     }
 
 
+    function togglePorts() {
+        showPorts = !showPorts;
+
+        var what = showPorts ? 'Enable' : 'Disable',
+            handler = showPorts ? mouseMoveHandler : null;
+
+        if (!showPorts) {
+            enhanceNearestLink(null);
+        }
+        svg.on('mousemove', handler);
+        flash.flash(what + ' port highlighting');
+    }
+
     // ==========================
     // ==========================
     // Module definition
     // Module definition
 
 
     angular.module('ovTopo')
     angular.module('ovTopo')
         .factory('TopoLinkService',
         .factory('TopoLinkService',
-        ['$log', 'FnService', 'SvgUtilService', 'ThemeService',
-
-            function (_$log_, _fs_, _sus_, _ts_) {
-                $log = _$log_;
-                fs = _fs_;
-                sus = _sus_;
-                ts = _ts_;
-
-                function initLink(_api_, _td3_) {
-                    api = _api_;
-                    td3 = _td3_;
-                    svg = api.svg;
-                    network = api.network;
-                    setupMouse(api.forceG, api.zoomer);
+        ['$log', 'FnService', 'SvgUtilService', 'ThemeService', 'FlashService',
+
+        function (_$log_, _fs_, _sus_, _ts_, _flash_) {
+            $log = _$log_;
+            fs = _fs_;
+            sus = _sus_;
+            ts = _ts_;
+            flash = _flash_;
+
+            function initLink(_api_, _td3_) {
+                api = _api_;
+                td3 = _td3_;
+                svg = api.svg;
+                network = api.network;
+                if (showPorts) {
+                    svg.on('mousemove', mouseMoveHandler);
                 }
                 }
+            }
 
 
-                function destroyLink() {
-                    svg.on('mouseenter', null)
-                        .on('mouseleave', null)
-                        .on('mousemove', null);
-                }
+            function destroyLink() {
+                // unconditionally remove any mousemove event handler
+                svg.on('mousemove', null);
+            }
 
 
-                return {
-                    initLink: initLink,
-                    destroyLink: destroyLink
-                };
-            }]);
+            return {
+                initLink: initLink,
+                destroyLink: destroyLink,
+                togglePorts: togglePorts
+            };
+        }]);
 }());
 }());