GUI -- Cleaning up pan/zoom functions.
Change-Id: I5f1a69d018bac7c9be9f225bbbd197e0c97102b4
diff --git a/web/gui/src/main/webapp/topo.js b/web/gui/src/main/webapp/topo.js
index 4018757..5e6ddb5 100644
--- a/web/gui/src/main/webapp/topo.js
+++ b/web/gui/src/main/webapp/topo.js
@@ -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()