commit c8c8f46fd430b12601068f9e1991bec954be1ce2
author Thomas Vachuska <tom@opennetworking.org> Mon Mar 01 11:22:56 2021 -0800
committer Charles Chan <charles@opennetworking.org> Mon Mar 01 21:37:31 2021 -0800
tree 6910768c9bcca1d4afcb77344ac8e7274fc823bf
parent 2375917830bd05883b0bc0b853f49eab37e4d3b1

[AETHER-1213] GUI1 enhanced to allow scaling host icons and host text.

Scale is proportional to the current zoom level, but can be toggled in
four increments via SHIFT-[ (text) and SHIFT-] (icon) keyboard shortcuts.

The icon size limit was increased to be min 20 and max 70.

Change-Id: I49e983d34a2465fb12d48395c34c1f22911f4f51

web/gui/src/main/webapp/app/view/topo/topoForce.js

diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index b7cc07c..e648d6d 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -71,7 +71,7 @@
         linkNums = [], // array of link number labels
         devIconDim = 36, // node target dimension
         devIconDimMin = 20, // node minimum dimension when zoomed out
-        devIconDimMax = 40, // node maximum dimension when zoomed in
+        devIconDimMax = 70, // node maximum dimension when zoomed in
         portLabelDim = 30;
 
     // SVG elements;
@@ -107,6 +107,7 @@
         },
     };
 
+    var hostScaleFactor = {icon: 1.0, text: 1.0};
 
     // ==========================
     // === EVENT HANDLERS
@@ -626,8 +627,8 @@
         $timeout(updateLinks, 2000);
     }
 
-    function deviceScale() {
-        var scale = uplink.zoomer().scale(),
+    function deviceScale(scaleFactor) {
+        var scale = uplink.zoomer().scale() * scaleFactor,
             dim = devIconDim,
             multiplier = 1;
 
@@ -640,37 +641,54 @@
         return multiplier;
     }
 
-    function linkWidthScale(scale) {
+    function linkWidthScale() {
         var scale = uplink.zoomer().scale();
         return linkScale(widthRatio) / scale;
     }
 
-    function portLabelScale(scale) {
+    function portLabelScale() {
         var scale = uplink.zoomer().scale();
         return portLabelDim / (portLabelDim * scale);
     }
 
-    function setNodeScale(scale) {
+    function adjustNodeScale() {
         // Scale the network nodes
         _.each(network.nodes, function (node) {
             if (node.class === 'host') {
-                node.el.selectAll('g').style('transform', 'scale(' + deviceScale(scale) + ')');
-                node.el.selectAll('text').style('transform', 'scale(' + deviceScale(scale) + ')');
+                node.el.selectAll('g').style('transform', 'scale(' + deviceScale(hostScaleFactor.icon) + ')');
+                node.el.selectAll('text').style('transform', 'scale(' + deviceScale(hostScaleFactor.text) + ')');
                 return;
             }
-            node.el.selectAll('*')
-                .style('transform', 'scale(' + deviceScale(scale) + ')');
+            node.el.selectAll('*').style('transform', 'scale(' + deviceScale(1.0) + ')');
         });
 
         // Scale the network links
         _.each(network.links, function (link) {
-            link.el.style('stroke-width', linkWidthScale(scale) + 'px');
+            link.el.style('stroke-width', linkWidthScale() + 'px');
         });
 
         d3.select('#topo-portLabels')
             .selectAll('.portLabel')
             .selectAll('*')
-            .style('transform', 'scale(' + portLabelScale(scale) + ')');
+            .style('transform', 'scale(' + portLabelScale() + ')');
+    }
+
+
+    function toggleScale(scale) {
+        if (scale < 0.5) {
+            return 1.0
+        }
+        return scale - 0.2;
+    }
+
+    function toggleHostTextSize() {
+        hostScaleFactor.text = toggleScale(hostScaleFactor.text);
+        adjustNodeScale();
+    }
+
+    function toggleHostIconSize() {
+         hostScaleFactor.icon = toggleScale(hostScaleFactor.icon);
+         adjustNodeScale();
     }
 
     function resetAllLocations() {
@@ -1288,7 +1306,10 @@
                 unpin: unpin,
                 showMastership: showMastership,
                 showBadLinks: showBadLinks,
-                setNodeScale: setNodeScale,
+                adjustNodeScale: adjustNodeScale,
+
+                toggleHostTextSize: toggleHostTextSize,
+                toggleHostIconSize: toggleHostIconSize,
 
                 resetAllLocations: resetAllLocations,
                 addDevice: addDevice,