GUI -- [ONOS-267] -- Mouse gestures added to quick help.
- added ability for view to define 'gestures' to be added to quick help.
- improved the layout of quick help by computing the widest 'key' and using that to space descriptions column.
Change-Id: I5a5a38d3218857ba9bca33c8fc79be38f17f7316
diff --git a/web/gui/src/main/webapp/topo2.js b/web/gui/src/main/webapp/topo2.js
index 87632dc..17baa61 100644
--- a/web/gui/src/main/webapp/topo2.js
+++ b/web/gui/src/main/webapp/topo2.js
@@ -146,14 +146,23 @@
H: [toggleHosts, 'Toggle host visibility'],
L: [cycleLabels, 'Cycle Device labels'],
P: togglePorts,
- U: [unpin, 'Unpin node'],
- R: [resetZoomPan, 'Reset zoom/pan'],
+ U: [unpin, 'Unpin node (hover mouse over)'],
+ R: [resetZoomPan, 'Reset zoom / pan'],
V: [showTrafficAction, 'Show related traffic'],
A: [showAllTrafficAction, 'Show all traffic'],
F: [showDeviceLinkFlowsAction, 'Show device link flows'],
esc: handleEscape
};
+ // mouse gestures
+ var gestures = [
+ ['click', 'Select the item and show details'],
+ ['shift-click', 'Toggle selection state'],
+ ['drag', 'Reposition (and pin) device / host'],
+ ['cmd-scroll', 'Zoom in / out'],
+ ['cmd-drag', 'Pan']
+ ];
+
// state variables
var network = {
view: null, // view token reference
@@ -2385,6 +2394,7 @@
//var showInstances;
+/*
function addButtonBar(view) {
var bb = d3.select('#mast')
.append('span').classed('right', true).attr('id', 'bb');
@@ -2398,6 +2408,7 @@
//showInstances = mkTogBtn('Show Instances', toggleInst);
}
+*/
function panZoom() {
return false;
@@ -2555,10 +2566,11 @@
// set our radio buttons and key bindings
layerBtnSet = view.setRadio(layerButtons);
view.setKeys(keyDispatch);
+ view.setGestures(gestures);
// patch in our "button bar" for now
// TODO: implement a more official frameworky way of doing this..
- addButtonBar(view);
+ //addButtonBar(view);
// Load map data asynchronously; complete startup after that..
loadGeoJsonData();