commit f17f0ab2ab0c70fb9c2a8c4db72a5fcc02ec6972
author Steven Burrows <sburrows@villa-technologies.com> Tue Apr 11 11:03:58 2017 -0700
committer Steven Burrows <sburrows@villa-technologies.com> Tue Apr 11 11:59:48 2017 -0700
tree a36e8fc42625b7a9ffa5417ad9e6c2bb8dfdbbef
parent 708d1ef3d4788bb0550a27f52a485d73ac77ee60

ONOS-5831 - retro fit icon and link scale from topo2

Change-Id: Iaa94929d324ba51e5a3056eb3a59d29be6d3d775

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

diff --git a/web/gui/src/main/webapp/app/view/topo/topoD3.js b/web/gui/src/main/webapp/app/view/topo/topoD3.js
index 80413aa..e45f491 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -26,7 +26,7 @@
     var $log, fs, sus, is, ts, ps, ttbs;
 
     // api to topoForce
-    var api;
+    var zoomer, api;
     /*
      node()                 // get ref to D3 selection of nodes
      link()                 // get ref to D3 selection of links
@@ -51,6 +51,7 @@
         halfDevIcon = devIconDim / 2,
         devBadgeOff = { dx: -halfDevIcon, dy: -halfDevIcon },
         hostBadgeOff = { dx: -hostRadius, dy: -hostRadius },
+        portLabelDim = 30,
         status = {
             i: 'badgeInfo',
             w: 'badgeWarn',
@@ -283,6 +284,9 @@
         glyph.attr(iconBox(devIconDim, 0));
 
         node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
+
+        d.el.selectAll('*')
+            .style('transform', 'scale(' + api.deviceScale() + ')');
     }
 
     function hostEnter(d) {
@@ -299,6 +303,9 @@
             .text(hostLabel)
             .attr('dy', textDy)
             .attr('text-anchor', 'middle');
+
+        d.el.selectAll('g').style('transform', 'scale(' + api.deviceScale() + ')');
+        d.el.selectAll('text').style('transform', 'scale(' + api.deviceScale() + ')');
     }
 
     function hostExit(d) {
@@ -346,6 +353,7 @@
 
         var link = d3.select(this);
         d.el = link;
+        d.el.style('stroke-width', api.linkWidthScale() + 'px');
         api.restyleLinkElement(d);
         if (d.type() === 'hostLink') {
             sus.visible(link, api.showHosts());
@@ -469,13 +477,18 @@
             .classed('portLabel', true)
             .attr('id', function (d) { return d.id; });
 
+        var labelScale = portLabelDim / (portLabelDim * zoomer.scale());
+
         entering.each(function (d) {
             var el = d3.select(this),
                 rect = el.append('rect'),
                 text = el.append('text').text(d.num);
 
-            rect.attr(rectAroundText(el));
-            text.attr('dy', linkLabelOffset);
+            rect.attr(rectAroundText(el))
+                .style('transform', 'scale(' + labelScale + ')');
+            text.attr('dy', linkLabelOffset)
+                .style('transform', 'scale(' + labelScale + ')');
+
             el.attr('transform', sus.translate(d.x, d.y));
         });
     }
@@ -591,8 +604,9 @@
             ps = _ps_;
             ttbs = _ttbs_;
 
-            function initD3(_api_) {
+            function initD3(_api_, _zoomer_) {
                 api = _api_;
+                zoomer = _zoomer_;
             }
 
             function destroyD3() { }