Cleaned up topology js and adding zoom capability with static topo data

Change-Id: Ie0b70075a77ddae98000d920b668d583860dae40
Signed-off-by: Lakshman Mukkamalla <lmukkama@cisco.com>

diff --git a/src/app/topology/topology.js b/src/app/topology/topology.js
index 53a0a36cde84f989d49ca939d1e2afd60da1f83e..a2b39f4209dca5b9d5c8aceb2e98dd6aa6e57ba7 100644 (file)
--- a/src/app/topology/topology.js
+++ b/src/app/topology/topology.js
@@ -14,10 +14,10 @@ angular.module('console.topology', [])
       };
 
       $scope.createTopology();
-      /*$scope.topologyData = {
-        directed: false, multigraph: false, graph: [], nodes: [{"id": "one"}, {"id": "two"}, {"id": "three"}],
-        links: [{"source": 0, "target": 1}, {"source": 0, "target": 2}]
-      }*/
+      $scope.topologyData = {
+        directed: false, multigraph: false, graph: [], nodes: [{"id": "openflow:1"}, {"id": "openflow:3"}, {"id": "openflow:2"}, {"id": "openflow:5"}, {"id": "openflow:4"}, {"id": "openflow:7"}, {"id": "openflow:6"}],
+        links: [{"source": 0, "target": 2}, {"source": 0, "target": 3}, {"source": 1, "target": 2}, {"source": 2, "target": 4}, {"source": 3, "target": 5}, {"source": 3, "target": 6}]
+      };
     }]
   });
 

diff --git a/src/common/general/topology.js b/src/common/general/topology.js
index b6aecad89abcbdba35bb38e9d3888b2ab8e7ed69..4352dcea87790469b0c3f3d863fc5698549c42c8 100644 (file)
--- a/src/common/general/topology.js
+++ b/src/common/general/topology.js
@@ -18,91 +18,75 @@ angular.module('common.topology', [])
         topologyData: '='
     },
     link: function($scope, iElm, iAttrs, controller) {
-      var svg = d3.select(iElm[0]).append('svg')
+
+        //Creates the parent svg element
+        var svg = d3.select(iElm[0]).append('svg')
         //.attr("pointer-events", "all")
         .attr('width', width)
-        .attr('height', height);
+        .attr('height', height)
+        .attr("viewBox", "0 0 " + width + " " + height)
+        .attr("preserveAspectRatio", "xMidYMid meet")
+        .attr("pointer-events", "all")
+        .call(d3.behavior.zoom().on("zoom", redraw));
+
+        //Creates a container g element for the svg, all the visualization elements are under vis
+        var vis = svg.append('svg:g');
 
-      $scope.$watch('topologyData', function (newVal, dluxVal) {
-        svg.selectAll('*').remove();
+        function redraw() {
+            vis.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
+        }
+
+        $scope.$watch('topologyData', function (newVal, dluxVal) {
+            vis.selectAll('*').remove();
 
         if(!newVal) {
             return;
         }
 
         var topo = d3.layout.force()
-          .charge(-300)
-          .distance(100)
-          .nodes(newVal.nodes)
-          .links(newVal.links)
-          .size([width, height])
-          .start();
-
-        var link = svg.selectAll(".link")
-          .data(newVal.links)
-          .enter().append("line")
-          .attr("class", "link");
-
-        /*ar node = svg.append("svg:g").selectAll("circle.node")
-          .data(newVal.nodes)
-          .enter().append("svg:circle")
-          .attr("class", "node")
-          .attr("r", 15)
-          .style("fill", function(d) { return fill(d.group); })
-          .attr("cx", function(d) { return d.x; })
-          .attr("cy", function(d) { return d.y; })
-          .call(topo.drag);*/
-        
-        var node = svg
-          .selectAll('.node')
-          .data(newVal.nodes)
-          .enter()
-          .append('g')
-          .attr("class", "node")
-          .call(topo.drag);
-        
-        node
-          .append("image")
-          .attr("xlink:href", "/assets/images/Device_switch_3062_unknown_64.png")
-          .attr("x", -25)
-      .attr("y", -25)
-      .attr("width", 50)
-      .attr("height", 50);
-
-           node.append("text")
-      .attr("dx", -55)
-      .attr("dy", "-10")
-      .text(function(d) { 
-console.log(d);
-        return d.id; });
-        //node.append("title")
+            .charge(-300)
+            .distance(150)
+            .nodes(newVal.nodes)
+            .links(newVal.links)
+            .size([width, height])
+            .start();
 
-        /*var text = svg.append("svg:g").selectAll("g")
-          .data(topo.nodes())
-          .enter().append("svg:g");
+        var link = vis.selectAll(".link")
+            .data(newVal.links)
+            .enter().append("line")
+            .attr("class", "link");
 
-        text.append("svg:text")
-          .text(function(d) { return d.id; })
-          .attr('x', -50)
-          .attr('y', 25);
-          //.attr("x", function(d) { return d.x; })
-          //.attr("y", function(d) { return d.y; })
+        var node = vis
+            .selectAll('.node')
+            .data(newVal.nodes)
+            .enter()
+            .append('g')
+            .attr("class", "node")
+            .call(topo.drag);
         
-        svg.style("opacity", 1e-6)
-          .transition()
-          .duration(1000)
-          .style("opacity", 2);*/
+        node.append("image")
+            .attr("xlink:href", "/assets/images/Device_switch_3062_unknown_64.png")
+            .attr("x", -25)
+            .attr("y", -25)
+            .attr("width", 50)
+            .attr("height", 50);
 
-         topo.on("tick", function() {
-    link.attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
+        node.append("text")
+            .attr("dx", -55)
+            .attr("dy", "-10")
+            .text(function(d) {
+                console.log(d);
+                return d.id; });
+        topo.on("tick", function() {
+            link.attr("x1", function(d) { return d.source.x; })
+            .attr("y1", function(d) { return d.source.y; })
+            .attr("x2", function(d) { return d.target.x; })
+            .attr("y2", function(d) { return d.target.y; });
 
-    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
-  });
+            node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+            });
         
-      });
+        });
     }
   };
 });