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

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
Simon Hunt · Gerrit Code Review
Commit 8751434889bd4f6809d1e80fb69b70c8c575d221 87514348 1 parent e83cce7d
Showing 3 changed files with 63 additions and 17 deletions
web/gui/src/main/webapp/onos2.js
web/gui/src/main/webapp/onosQuickHelp.js
web/gui/src/main/webapp/topo2.js
--- a/web/gui/src/main/webapp/onos2.js
View file @8751434
+++ b/web/gui/src/main/webapp/onos2.js
View file @8751434
@@ -63,7 +63,8 @@
                 globalKeys: {},
                 maskedKeys: {},
                 viewKeys: {},
-                viewFn: null
+                viewFn: null,
+                viewGestures: []
             },
             alerts = {
                 open: false,
@@ -452,6 +453,10 @@
             return true;
         }
+        function setGestureNotes(g) {
+            keyHandler.viewGestures = isA(g) || [];
+        }
+
         function setKeyBindings(keyArg) {
             var viewKeys,
                 masked = [];
@@ -614,6 +619,7 @@
                     uid: this.uid,
                     setRadio: this.setRadio,
                     setKeys: this.setKeys,
+                    setGestures: this.setGestures,
                     dataLoadError: this.dataLoadError,
                     alert: this.alert,
                     flash: this.flash,
@@ -719,6 +725,10 @@
                 setKeyBindings(keyArg);
             },
+            setGestures: function (g) {
+                setGestureNotes(g);
+            },
+
             getTheme: function () {
                 return current.theme;
             },
--- a/web/gui/src/main/webapp/onosQuickHelp.js
View file @8751434
+++ b/web/gui/src/main/webapp/onosQuickHelp.js
View file @8751434
@@ -43,7 +43,8 @@
         svg = qhdiv.select('svg'),
         pane,
         rect,
-        items;
+        items,
+        keyAgg;
     // General functions
     function isA(a) {
@@ -73,7 +74,7 @@
     var pad = 8,
         offy = 45,
         dy = 14,
-        offDesc = 40;
+        offDesc = 8;
     // D3 magic
     function updateKeyItems() {
@@ -91,7 +92,7 @@
             var el = d3.select(this),
                 y = offy + dy * i;
-            if (d.id === '_') {
+            if (d.id[0] === '_') {
                 el.append('line')
                     .attr({ x1: 0, y1: y, x2: 1, y2: y});
             } else {
@@ -102,6 +103,8 @@
                         x: 0,
                         y: y
                     });
+                // NOTE: used for sizing column width...
+                keyAgg.append('text').text(d.key).attr('class', 'key');
                 el.append('text')
                     .text(d.desc)
@@ -113,11 +116,14 @@
             }
         });
+        var kbox = keyAgg.node().getBBox();
+        items.selectAll('.desc').attr('x', kbox.width + offDesc);
+
         var box = items.node().getBBox(),
             paneW = box.width + pad * 2,
             paneH = box.height + offy;
-        items.select('line').attr('x2', box.width);
+        items.selectAll('line').attr('x2', box.width);
         items.attr('transform', translate(-paneW/2, -pad));
         rect.attr({
             width: paneW,
@@ -134,25 +140,47 @@
         var gmap = d3.map(bindings.globalKeys),
             vmap = d3.map(bindings.viewKeys),
             gkeys = gmap.keys(),
-            vkeys = vmap.keys();
+            vkeys = vmap.keys(),
+            vgest = bindings.viewGestures,
+            sep = 0;
         gkeys.sort();
         vkeys.sort();
         data = [];
         gkeys.forEach(function (k) {
-            addItem('global', k, gmap.get(k));
+            addItem('glob', k, gmap.get(k));
         });
-        addItem('separator');
+        addItem('sep');
         vkeys.forEach(function (k) {
             addItem('view', k, vmap.get(k));
         });
+        addItem('sep');
+        vgest.forEach(function (g) {
+            if (g.length === 2) {
+                addItem('gest', g[0], g[1]);
+            }
+        });
+
         function addItem(type, k, d) {
             var id = type + '-' + k,
                 a = isA(d),
                 desc = a && a[1];
-            if (desc) {
+
+            if (type === 'sep') {
+                data.push({
+                    id: '_' + sep++,
+                    type: type
+                });
+            } else if (type === 'gest') {
+                data.push({
+                    id: id,
+                    type: type,
+                    key: k,
+                    desc: d
+                });
+            } else if (desc) {
                 data.push(
                     {
                         id: id,
@@ -161,11 +189,6 @@
                         desc: desc
                     }
                 );
-            } else if (type === 'separator') {
-                data.push({
-                    id: '_',
-                    type: type
-                });
             }
         }
     }
@@ -189,6 +212,7 @@
             });
         items = pane.append('g');
+        keyAgg = pane.append('g').style('visibility', 'hidden');
         aggregateData(bindings);
         updateKeyItems();
--- a/web/gui/src/main/webapp/topo2.js
View file @8751434
+++ b/web/gui/src/main/webapp/topo2.js
View file @8751434
@@ -146,14 +146,23 @@
         H: [toggleHosts, 'Toggle host visibility'],
         L: [cycleLabels, 'Cycle Device labels'],
         P: togglePorts,
-        U: [unpin, 'Unpin node'],
+        U: [unpin, 'Unpin node (hover mouse over)'],
-        R: [resetZoomPan, 'Reset zoom/pan'],
+        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();