GUI -- Modified Toolbar service to have multiple rows of buttons. Added more but…

…tons in topoToolbar - WIP.

Change-Id: Ibc749b4ecdcb07ecf63d50817f8af3d455b4cde0

@@ -171,7 +171,31 @@
             "-3.5,3.9-7.4,8.9-11.7,15.1c0,0-3.1,3.4-5.2,0.9C52.9,51.5,61," +
             "-3.5,3.9-7.4,8.9-11.7,15.1c0,0-3.1,3.4-5.2,0.9C52.9,51.5,61," +
             "39.3,61,39.3s2.2-3.1,5.6-7c-2.9-3-5.9-6.3-6.6-7.3c0,0-3.7-5-1.3" +
             "39.3,61,39.3s2.2-3.1,5.6-7c-2.9-3-5.9-6.3-6.6-7.3c0,0-3.7-5-1.3" +
             "-6.6c3.2-2.1,6.3,0.8,6.3,0.8s3.1,3.3,7,7.2c4.7-4.7,10.1-9.2," +
             "-6.6c3.2-2.1,6.3,0.8,6.3,0.8s3.1,3.3,7,7.2c4.7-4.7,10.1-9.2," +
-            "14.7-10c0,0,3.3-1,5.2,1.7C92.5,18.8,92.4,19.6,91.9,20.4z"
+            "14.7-10c0,0,3.3-1,5.2,1.7C92.5,18.8,92.4,19.6,91.9,20.4z",
+
+            resetZoom: "M86.4,81.6L60.3,54.2c1.9-3.1,3-6.8,3.1-10.7c0.3-12" +
+            "-9.2-22.1-21.2-22.4c-12-0.3-22.1,9.2-22.4,21.2c-0.3,12,9.2," +
+            "22.1,21.2,22.4c4.3,0.1,9.6-0.9,12.8-3.9l25.5,26.8c1.6,1.7,4.3," +
+            "2.4,5.7,1.1l1.8-1.7C88.2,85.8,88,83.3,86.4,81.6z M27.8," +
+            "42.5C28,34.8,34.4,28.8,42,29c7.7,0.2,13.7,6.6,13.5,14.2c" +
+            "-0.2,7.7-6.6,13.7-14.2,13.5C33.6,56.5,27.6,50.2,27.8,42.5z " +
+            "M10.4,27.2c-1.7,0-3-1.3-3-3V7.1h16.2c1.7,0,3,1.3,3,3s-1.3,3-3," +
+            "3H13.4v11.2C13.4,25.9,12.1,27.2,10.4,27.2z M23.7,102.3H7.5" +
+            "V85.2c0-1.7,1.3-3,3-3s3,1.3,3,3v11.2h10.2c1.7,0,3,1.3,3,3S25.3," +
+            "102.3,23.7,102.3z M102.6,103.4H86.4c-1.7,0-3-1.3-3-3c0-1.7,1.3" +
+            "-3,3-3h10.2V86.2c0-1.7,1.3-3,3-3c1.7,0,3,1.3,3,3V103.4z M99.6," +
+            "27.2c-1.7,0-3-1.3-3-3V13.1H86.4c-1.7,0-3-1.3-3-3s1.3-3,3" +
+            "-3h16.2v17.2C102.6,25.9,101.3,27.2,99.6,27.2z",
+
+            nextIntent: "M88.1,55.7L34.6,13.1c0,0-1.6-0.5-2.1-0.2c-1.9,1.2" +
+            "-6.5,13.8-3.1,17.2c7,6.9,30.6,24.5,32.4,25.9c-1.8,1.4-25.4,19" +
+            "-32.4,25.9c-3.4,3.4,1.2,16,3.1,17.2c0.6,0.4,2.1-0.2,2.1-0.2" +
+            "s53.1-42.4,53.5-42.7C88.5,56,88.1,55.7,88.1,55.7z",
+
+            prevIntent: "M22.5,55.6L76,12.9c0,0,1.6-0.5,2.2-0.2c1.9,1.2," +
+            "6.5,13.8,3.1,17.2c-7,6.9-30.6,24.5-32.4,25.9c1.8,1.4,25.4,19," +
+            "32.4,25.9c3.4,3.4-1.2,16-3.1,17.2c-0.6,0.4-2.2-0.2-2.2-0.2" +
+            "S22.9,56.3,22.5,56C22.2,55.8,22.5,55.6,22.5,55.6z"
         },
         },
 
 
         badgeViewBox = '0 0 10 10',
         badgeViewBox = '0 0 10 10',

@@ -37,6 +37,15 @@
 }
 }
 
 
 
 
+.toolbar {
+    line-height: 125%;
+}
+.tbar-row {
+    display: inline-block;
+}
+
+
+
 .separator {
 .separator {
     border: 1px solid;
     border: 1px solid;
     margin: 0 4px 0 4px;
     margin: 0 4px 0 4px;

@@ -75,6 +75,10 @@
         return null;
         return null;
     }
     }
 
 
+    function noPxWidth(elem) {
+        return Number(elem.style('width').replace(/px$/, ''));
+    }
+
 
 
     // ==================================
     // ==================================
 
 
@@ -87,8 +91,9 @@
             tbid = 'toolbar-' + id,
             tbid = 'toolbar-' + id,
             panel = ps.createPanel(tbid, settings),
             panel = ps.createPanel(tbid, settings),
             arrowDiv = createArrow(panel),
             arrowDiv = createArrow(panel),
-            tbWidth = arrowSize + 2;    // empty toolbar width
-
+            currentRow = panel.append('div').classed('tbar-row', true),
+            tbWidth = arrowSize + 2,    // empty toolbar width
+            maxWidth = panel.width();
 
 
         arrowDiv.on('click', toggle);
         arrowDiv.on('click', toggle);
 
 
@@ -103,6 +108,7 @@
         panel.classed('toolbar', true)
         panel.classed('toolbar', true)
             .style('top', settings.top);
             .style('top', settings.top);
 
 
+        // Helper functions
 
 
         function dupId(id, caller) {
         function dupId(id, caller) {
             if (items[id]) {
             if (items[id]) {
@@ -112,17 +118,25 @@
             return false;
             return false;
         }
         }
 
 
+        function adjustWidth(btnWidth) {
+            if (noPxWidth(currentRow) >= maxWidth) {
+                tbWidth += btnWidth;
+                maxWidth = tbWidth;
+            }
+            panel.width(tbWidth);
+        }
+
         // API functions
         // API functions
 
 
         function addButton(id, gid, cb, tooltip) {
         function addButton(id, gid, cb, tooltip) {
             if (dupId(id, 'addButton')) return null;
             if (dupId(id, 'addButton')) return null;
 
 
             var bid = tbid + '-' + id,
             var bid = tbid + '-' + id,
-                btn = bns.button(panel, bid, gid, cb, tooltip);
+                btn = bns.button(currentRow, bid, gid, cb, tooltip);
 
 
             items[id] = btn;
             items[id] = btn;
-            tbWidth += btn.width();
-            panel.width(tbWidth);
+            $log.debug('adding button');
+            adjustWidth(btn.width());
             return btn;
             return btn;
         }
         }
 
 
@@ -130,11 +144,10 @@
             if (dupId(id, 'addToggle')) return null;
             if (dupId(id, 'addToggle')) return null;
 
 
             var tid = tbid + '-' + id,
             var tid = tbid + '-' + id,
-                tog = bns.toggle(panel, tid, gid, initState, cb, tooltip);
+                tog = bns.toggle(currentRow, tid, gid, initState, cb, tooltip);
 
 
             items[id] = tog;
             items[id] = tog;
-            tbWidth += tog.width();
-            panel.width(tbWidth);
+            adjustWidth(tog.width());
             return tog;
             return tog;
         }
         }
 
 
@@ -142,23 +155,33 @@
             if (dupId(id, 'addRadioSet')) return null;
             if (dupId(id, 'addRadioSet')) return null;
 
 
             var rid = tbid + '-' + id,
             var rid = tbid + '-' + id,
-                rad = bns.radioSet(panel, rid, rset);
+                rad = bns.radioSet(currentRow, rid, rset);
 
 
             items[id] = rad;
             items[id] = rad;
-            tbWidth += rad.width();
-            panel.width(tbWidth);
+            adjustWidth(rad.width());
             return rad;
             return rad;
         }
         }
 
 
         function addSeparator() {
         function addSeparator() {
-            panel.append('div')
+            currentRow.append('div')
                 .classed('separator', true);
                 .classed('separator', true);
             tbWidth += sepWidth;
             tbWidth += sepWidth;
         }
         }
 
 
+        function addRow() {
+            if (currentRow.select('div').empty()) { return null; }
+            else {
+                panel.append('br');
+                currentRow = panel.append('div').classed('tbar-row', true);
+            }
+        }
+
         function show(cb) {
         function show(cb) {
             rotateArrowLeft(arrowDiv);
             rotateArrowLeft(arrowDiv);
             panel.show(cb);
             panel.show(cb);
+            $log.debug('tbar width', tbWidth);
+            $log.debug('maxwidth', maxWidth);
+            $log.debug('panel width', panel.width());
         }
         }
 
 
         function hide(cb) {
         function hide(cb) {
@@ -179,6 +202,7 @@
             addToggle: addToggle,
             addToggle: addToggle,
             addRadioSet: addRadioSet,
             addRadioSet: addRadioSet,
             addSeparator: addSeparator,
             addSeparator: addSeparator,
+            addRow: addRow,
 
 
             show: show,
             show: show,
             hide: hide,
             hide: hide,

@@ -40,7 +40,21 @@
         H: { id: 'hosts-tog', gid: 'endstation', isel: false },
         H: { id: 'hosts-tog', gid: 'endstation', isel: false },
         M: { id: 'offline-tog', gid: 'switch', isel: true },
         M: { id: 'offline-tog', gid: 'switch', isel: true },
         P: { id: 'ports-tog', gid: 'ports', isel: true },
         P: { id: 'ports-tog', gid: 'ports', isel: true },
-        B: { id: 'bkgrnd-tog', gid: 'map', isel: true }
+        B: { id: 'bkgrnd-tog', gid: 'map', isel: true },
+
+        //X: { id: 'nodelock-tog', gid: 'lock', isel: false },
+        Z: { id: 'oblique-tog', gid: 'oblique', isel: false },
+        L: { id: 'cycleLabels-btn', gid: 'cycleLabels' },
+        R: { id: 'resetZoom-btn', gid: 'resetZoom' },
+
+        V: { id: 'allIntents-btn', gid: 'allIntents' },
+        leftArrow: { id: 'prevIntent-btn', gid: 'prevIntent' },
+        rightArrow: { id: 'nextIntent-btn', gid: 'nextIntent' },
+        W: { id: 'intentTraffic-btn', gid: 'intentTraffic' },
+        A: { id: 'allTraffic-btn', gid: 'allTraffic' },
+        F: { id: 'flows-btn', gid: 'flows' },
+
+        E: { id: 'eqMaster-btn', gid: 'eqMaster' }
     };
     };
 
 
     function init(_api_) {
     function init(_api_) {
@@ -56,6 +70,10 @@
         });
         });
     }
     }
 
 
+    function addButton(key) {
+        var v = keyData.get(key);
+        v.btn = toolbar.addButton(v.id, v.gid, v.cb, v.tt);
+    }
     function addToggle(key) {
     function addToggle(key) {
         var v = keyData.get(key);
         var v = keyData.get(key);
         v.tog = toolbar.addToggle(v.id, v.gid, v.isel, v.cb, v.tt);
         v.tog = toolbar.addToggle(v.id, v.gid, v.isel, v.cb, v.tt);
@@ -72,11 +90,30 @@
         addToggle('P');
         addToggle('P');
         addToggle('B');
         addToggle('B');
     }
     }
+    function addSecondRow() {
+        addToggle('Z');
+        addButton('L');
+        addButton('R');
+    }
+    function addThirdRow() {
+        addButton('V');
+        addButton('leftArrow');
+        addButton('rightArrow');
+        addButton('W');
+        addButton('A');
+        addButton('F');
+        toolbar.addSeparator();
+        addButton('E');
+    }
 
 
     function createToolbar() {
     function createToolbar() {
         initKeyData();
         initKeyData();
         toolbar = tbs.createToolbar(name);
         toolbar = tbs.createToolbar(name);
         addFirstRow();
         addFirstRow();
+        toolbar.addRow();
+        addSecondRow();
+        toolbar.addRow();
+        addThirdRow();
         toolbar.show();
         toolbar.show();
     }
     }
 
 

@@ -141,8 +141,8 @@ describe('factory: fw/widget/toolbar.js', function () {
 
 
     it('should create a separator div', function () {
     it('should create a separator div', function () {
         spyOn($log, 'warn');
         spyOn($log, 'warn');
-        var toolbar = tbs.createToolbar('foo');
-        var tbar = d3.select('#toolbar-foo');
+        var toolbar = tbs.createToolbar('foo'),
+            tbar = d3.select('#toolbar-foo');
 
 
         toolbar.addSeparator();
         toolbar.addSeparator();
         expect($log.warn).not.toHaveBeenCalled();
         expect($log.warn).not.toHaveBeenCalled();
@@ -150,4 +150,31 @@ describe('factory: fw/widget/toolbar.js', function () {
         expect(tbar.select('.separator').size()).toBe(1);
         expect(tbar.select('.separator').size()).toBe(1);
     });
     });
 
 
+    it('should add another row of buttons', function () {
+        var toolbar = tbs.createToolbar('foo'),
+            tbar = d3.select('#toolbar-foo'),
+            rows;
+        toolbar.addButton('btn0', 'gid');
+        toolbar.addRow();
+        toolbar.addButton('btn1', 'gid');
+
+        rows = tbar.selectAll('.tbar-row');
+        expect(rows.size()).toBe(2);
+        rows.each(function (d, i) {
+            expect(d3.select(this)
+                .select('div')
+                .attr('id','toolbar-foo-btn' + i)
+                .empty())
+                .toBe(false);
+        });
+    });
+
+    it('should not add a row if current row is empty', function () {
+        var toolbar = tbs.createToolbar('foo');
+        expect(toolbar.addRow()).toBeNull();
+        toolbar.addButton('btn0', 'gid');
+        expect(toolbar.addRow()).not.toBeNull();
+        expect(toolbar.addRow()).toBeNull();
+    });
+
 });
 });