GUI -- TopoView - working on mouse gestures - drag, click on nodes; mouseover,mouseout (WIP).

Change-Id: I2ecd4f805267fe72685381eb297a3d4cbbbd360a

@@ -112,16 +112,14 @@
                                 // consider this the same as a 'click'
                                 // consider this the same as a 'click'
                                 // (selection of a node)
                                 // (selection of a node)
                                 if (clickEnabled()) {
                                 if (clickEnabled()) {
-                                    selectCb(d, this);
-                                    // TODO: set 'this' context instead of param
+                                    selectCb.call(this, d);
                                 }
                                 }
                             }
                             }
                             d.fixed &= ~6;
                             d.fixed &= ~6;
 
 
                             // hook at the end of a drag gesture
                             // hook at the end of a drag gesture
                             if (dragEnabled()) {
                             if (dragEnabled()) {
-                                atDragEnd(d, this);
-                                // TODO: set 'this' context instead of param
+                                atDragEnd.call(this, d);
                             }
                             }
                         }
                         }
                     });
                     });

@@ -61,8 +61,7 @@
 }
 }
 
 
 .light #ov-topo svg #topo-map {
 .light #ov-topo svg #topo-map {
-    stroke: #ddd;
-    /*stroke: #88b;*/
+    stroke: #eee;
 }
 }
 .dark #ov-topo svg #topo-map {
 .dark #ov-topo svg #topo-map {
     stroke: #444;
     stroke: #444;

@@ -54,7 +54,7 @@
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
             //X: [toggleNodeLock, 'Lock / unlock node positions'],
             //Z: [toggleOblique, 'Toggle oblique view (Experimental)'],
             //Z: [toggleOblique, 'Toggle oblique view (Experimental)'],
             L: [tfs.cycleDeviceLabels, 'Cycle device labels'],
             L: [tfs.cycleDeviceLabels, 'Cycle device labels'],
-            //U: [unpin, 'Unpin node (hover mouse over)'],
+            U: [tfs.unpin, 'Unpin node (hover mouse over)'],
             R: [resetZoom, 'Reset pan / zoom'],
             R: [resetZoom, 'Reset pan / zoom'],
 
 
             //V: [showRelatedIntentsAction, 'Show all related intents'],
             //V: [showRelatedIntentsAction, 'Show all related intents'],

@@ -75,7 +75,9 @@
         showHosts = true,       // whether hosts are displayed
         showHosts = true,       // whether hosts are displayed
         showOffline = true,     // whether offline devices are displayed
         showOffline = true,     // whether offline devices are displayed
         oblique = false,        // whether we are in the oblique view
         oblique = false,        // whether we are in the oblique view
-        width, height;
+        nodeLock = false,       // whether nodes can be dragged or not (locked)
+        width, height,          // the width and height of the force layout
+        hovered;                // the node over which the mouse is hovering
 
 
     // SVG elements;
     // SVG elements;
     var linkG, linkLabelG, nodeG;
     var linkG, linkLabelG, nodeG;
@@ -146,7 +148,7 @@
             wasOnline = d.online;
             wasOnline = d.online;
             angular.extend(d, data);
             angular.extend(d, data);
             if (positionNode(d, true)) {
             if (positionNode(d, true)) {
-                sendUpdateMeta(d, true);
+                sendUpdateMeta(d);
             }
             }
             updateNodes();
             updateNodes();
             if (wasOnline !== d.online) {
             if (wasOnline !== d.online) {
@@ -210,7 +212,7 @@
         if (d) {
         if (d) {
             angular.extend(d, data);
             angular.extend(d, data);
             if (positionNode(d, true)) {
             if (positionNode(d, true)) {
-                sendUpdateMeta(d, true);
+                sendUpdateMeta(d);
             }
             }
             updateNodes();
             updateNodes();
         } else {
         } else {
@@ -557,11 +559,13 @@
     }
     }
 
 
 
 
-    function sendUpdateMeta(d, store) {
+    function sendUpdateMeta(d, clearPos) {
         var metaUi = {},
         var metaUi = {},
             ll;
             ll;
 
 
-        if (store) {
+        // if we are not clearing the position data (unpinning),
+        // attach the x, y, longitude, latitude...
+        if (!clearPos) {
             ll = lngLatFromCoord([d.x, d.y]);
             ll = lngLatFromCoord([d.x, d.y]);
             metaUi = {
             metaUi = {
                 x: d.x,
                 x: d.x,
@@ -578,6 +582,9 @@
         });
         });
     }
     }
 
 
+    function requestTrafficForMode() {
+        $log.debug('TODO: requestTrafficForMode()...');
+    }
 
 
     // ==========================
     // ==========================
     // === Devices and hosts - helper functions
     // === Devices and hosts - helper functions
@@ -589,7 +596,7 @@
 
 
     function lngLatFromCoord(coord) {
     function lngLatFromCoord(coord) {
         var p = uplink.projection();
         var p = uplink.projection();
-        return p ? p.invert([coord.x, coord.y]) : [0, 0];
+        return p ? p.invert(coord) : [0, 0];
     }
     }
 
 
     function positionNode(node, forUpdate) {
     function positionNode(node, forUpdate) {
@@ -744,12 +751,24 @@
 
 
     function nodeMouseOver(m) {
     function nodeMouseOver(m) {
         // TODO
         // TODO
-        $log.debug("TODO nodeMouseOver()...", m);
+        if (!m.dragStarted) {
+            $log.debug("MouseOver()...", m);
+            if (hovered != m) {
+                hovered = m;
+                requestTrafficForMode();
+            }
+        }
     }
     }
 
 
     function nodeMouseOut(m) {
     function nodeMouseOut(m) {
         // TODO
         // TODO
-        $log.debug("TODO nodeMouseOut()...", m);
+        if (!m.dragStarted) {
+            if (hovered) {
+                hovered = null;
+                requestTrafficForMode();
+            }
+            $log.debug("MouseOut()...", m);
+        }
     }
     }
 
 
 
 
@@ -873,6 +892,16 @@
         });
         });
     }
     }
 
 
+    function unpin() {
+        if (hovered) {
+            sendUpdateMeta(hovered, true);
+            hovered.fixed = false;
+            hovered.el.classed('fixed', false);
+            fResume();
+        }
+    }
+
+
     // ==========================================
     // ==========================================
 
 
     var dCol = {
     var dCol = {
@@ -1297,11 +1326,33 @@
     // ==========================
     // ==========================
     // === MOUSE GESTURE HANDLERS
     // === MOUSE GESTURE HANDLERS
 
 
-    // FIXME:
-    function selectCb() { }
-    function atDragEnd() {}
-    function dragEnabled() {}
-    function clickEnabled() {}
+    function selectCb(d) {
+        // this is the selected node
+        $log.debug("\n\n\nSelect Object: ");
+        $log.debug("d is ", d);
+        $log.debug("this is ", this);
+        $log.debug('\n\n');
+    }
+
+    function atDragEnd(d) {
+        // once we've finished moving, pin the node in position
+        d.fixed = true;
+        d3.select(this).classed('fixed', true);
+        sendUpdateMeta(d);
+    }
+
+    // predicate that indicates when dragging is active
+    function dragEnabled() {
+        var ev = d3.event.sourceEvent;
+        // nodeLock means we aren't allowing nodes to be dragged...
+        // meta or alt key pressed means we are zooming/panning...
+        return !nodeLock && !(ev.metaKey || ev.altKey);
+    }
+
+    // predicate that indicates when clicking is active
+    function clickEnabled() {
+        return true;
+    }
 
 
 
 
     // ==========================
     // ==========================
@@ -1373,6 +1424,7 @@
                 toggleHosts: toggleHosts,
                 toggleHosts: toggleHosts,
                 toggleOffline: toggleOffline,
                 toggleOffline: toggleOffline,
                 cycleDeviceLabels: cycleDeviceLabels,
                 cycleDeviceLabels: cycleDeviceLabels,
+                unpin: unpin,
 
 
                 addDevice: addDevice,
                 addDevice: addDevice,
                 updateDevice: updateDevice,
                 updateDevice: updateDevice,

@@ -35,7 +35,7 @@ describe('factory: view/topo/topoForce.js', function() {
     it('should define api functions', function () {
     it('should define api functions', function () {
         expect(fs.areFunctions(tfs, [
         expect(fs.areFunctions(tfs, [
             'initForce', 'resize', 'updateDeviceColors',
             'initForce', 'resize', 'updateDeviceColors',
-            'toggleHosts', 'toggleOffline','cycleDeviceLabels',
+            'toggleHosts', 'toggleOffline','cycleDeviceLabels', 'unpin',
             'addDevice', 'updateDevice', 'removeDevice',
             'addDevice', 'updateDevice', 'removeDevice',
             'addHost', 'updateHost', 'removeHost',
             'addHost', 'updateHost', 'removeHost',
             'addLink', 'updateLink', 'removeLink'
             'addLink', 'updateLink', 'removeLink'