GUI -- Cleaning up pan/zoom functions.

Change-Id: I5f1a69d018bac7c9be9f225bbbd197e0c97102b4

@@ -150,7 +150,7 @@
         L: [cycleLabels, 'Cycle device labels'],
         P: togglePorts,
         U: [unpin, 'Unpin node (hover mouse over)'],
-        R: [resetZoomPan, 'Reset zoom / pan'],
+        R: [resetPanZoom, 'Reset pan / zoom'],
         V: [showTrafficAction, 'Show related traffic'],
         A: [showAllTrafficAction, 'Show all traffic'],
         F: [showDeviceLinkFlowsAction, 'Show device link flows'],
@@ -218,7 +218,7 @@
 
     // D3 selections
     var svg,
-        zoomPanContainer,
+        panZoomContainer,
         bgImg,
         topoG,
         nodeG,
@@ -2298,7 +2298,8 @@
             meta = srcEv.metaKey,
             shift = srcEv.shiftKey;
 
-        if ((panZoom() && !meta) || (!panZoom() && meta)) {
+        // if the meta key is pressed, we are panning/zooming, so ignore
+        if (meta) {
             return;
         }
 
@@ -2516,21 +2517,25 @@
     }
 
 
-    function zoomPan(scale, translate) {
-        zoomPanContainer.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
+    // === Pan and Zoom behaviors...
+
+    function panZoom(translate, scale) {
+        panZoomContainer.attr('transform',
+            'translate(' + translate + ')scale(' + scale + ')');
         // keep the map lines constant width while zooming
-        bgImg.style("stroke-width", 2.0 / scale + "px");
+        bgImg.style('stroke-width', 2.0 / scale + 'px');
     }
 
-    function resetZoomPan() {
-        zoomPan(1, [0,0]);
-        zoom.scale(1).translate([0,0]);
+    function resetPanZoom() {
+        panZoom([0,0], 1);
+        zoom.translate([0,0]).scale(1);
     }
 
-    function setupZoomPan() {
+    function setupPanZoom() {
         function zoomed() {
-            if (!panZoom() ^ !d3.event.sourceEvent.metaKey) {
-                zoomPan(d3.event.scale, d3.event.translate);
+            // pan zoom active when meta key is pressed...
+            if (d3.event.sourceEvent.metaKey) {
+                panZoom(d3.event.translate, d3.event.scale);
             }
         }
 
@@ -2578,34 +2583,6 @@
 
     }
 
-    // ==============================
-    // Toggle Buttons in masthead
-
-    // TODO: toggle button (and other widgets in the masthead) should be provided
-    //  by the framework; not generated by the view.
-
-    //var showInstances;
-
-/*
-    function addButtonBar(view) {
-        var bb = d3.select('#mast')
-            .append('span').classed('right', true).attr('id', 'bb');
-
-        function mkTogBtn(text, cb) {
-            return bb.append('span')
-                .classed('btn', true)
-                .text(text)
-                .on('click', cb);
-        }
-
-        //showInstances = mkTogBtn('Show Instances', toggleInst);
-    }
-*/
-
-    function panZoom() {
-        return false;
-    }
-
     function loadGlyphs(svg) {
         var defs = svg.append('defs');
         gly.defBird(defs);
@@ -2653,11 +2630,11 @@
         loadGlyphs(svg);
         d3u.appendGlow(svg);
 
-        zoomPanContainer = svg.append('g').attr('id', 'zoomPanContainer');
-        setupZoomPan();
+        panZoomContainer = svg.append('g').attr('id', 'panZoomContainer');
+        setupPanZoom();
 
         // group for the topology
-        topoG = zoomPanContainer.append('g')
+        topoG = panZoomContainer.append('g')
             .attr('id', 'topo-G')
             .attr('transform', fcfg.translate());
 
@@ -2867,7 +2844,7 @@
             .scale(s)
             .translate(t);
 
-        bgImg = zoomPanContainer.insert("g", '#topo-G');
+        bgImg = panZoomContainer.insert("g", '#topo-G');
         bgImg.attr('id', 'map').selectAll('path')
             .data(topoData.features)
             .enter()