added zooming on canvas

Author: Hyperkid123

src/charts/topology-map.html

@@ -1,5 +1,5 @@
 <div class="pf-topology-map">
-  <canvas class="topology-graph"></canvas>
+  <canvas id="topology-map" class="topology-graph"></canvas>
   <div class="test">
     <h1>Hello world</h1>
   </div>

src/charts/topology-map/examples/topology-map-view.js

@@ -20,13 +20,16 @@
           {
             id: 1,
             title: 'testNode',
-            icon: 'fa'
+            icon: '\uF044',
+            usage: 50,
           },
           {
             id: 2,
             title: 'testNode2',
-            fill: '#FF0000'
-          },
+            fill: '#FF0000',
+            icon: '\uF047',
+            usage: 75,
+          },{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
         ];
         $scope.edges = [{
           source: 0,

src/charts/topology-map/topologyMap.component.js

@@ -16,21 +16,19 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
     var context;
     var nodes;
     var links;
-    var icons;
-    var maxNodeSize;
     var transform;
-    var simulation;
     var options;
     var radius = ctrl.radius || 17;
-    var graph;
 
+    ctrl.scale = 1;
     ctrl.canvas;
     ctrl.showLabels = false;
 
     this.$onInit = function () {
       setUpCanvas();
       setUpForce();
-      console.log(ctrl.force);
+      setUpZoom();
+      setUpClick();
     };
 
     function setUpCanvas () {
@@ -51,6 +49,37 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
       ctrl.context.font = '17px FontAwesome';
     }
 
+    function setUpClick () {
+      d3.select(ctrl.canvas).on('click', function () {
+        console.log('click: ', d3.select(this));
+      });
+    }
+
+    function setUpZoom () {
+      var zoom = d3.behavior.zoom()
+        .translate([0, 0])
+        .scale(1)
+        .scaleExtent([1, 8]);
+      var canvas = d3.select(ctrl.canvas);
+      canvas
+      .call(zoom.on("zoom", zoomed))
+      .call(zoom.event);
+
+      function zoomed () {
+        var t = zoom.translate();
+        var s = zoom.scale();
+        ctrl.scale = s;
+
+        ctrl.context.clearRect(0, 0, ctrl.canvasW, ctrl.canvasH);
+
+        ctrl.context.save();
+        ctrl.context.translate(t[0], t[1]);
+        ctrl.context.scale(s, s);
+        ctrl.force.on('tick')();
+        ctrl.context.restore();
+      }
+    }
+
     function setUpForce () {
       if (! ctrl.force) {
         ctrl.force = d3.layout.force()
@@ -64,38 +93,83 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
         .links(ctrl.edges)
         .on('tick', tick)
         .start();
-
       function tick () {
         ctrl.context.clearRect(0, 0, ctrl.canvasW, ctrl.canvasH);
-        ctrl.context.strokeStyle = "#ccc";
-        ctrl.context.beginPath();
-        ctrl.edges.forEach(function (d) {
-          ctrl.context.moveTo(d.source.x, d.source.y);
-          ctrl.context.lineTo(d.target.x, d.target.y);
-        });
-        ctrl.context.stroke();
-
-        // draw nodes
-        ctrl.nodes.forEach(function (d) {
-          drawNode(d);
-        });
+        drawEdges();
+        drawNodes();
+        if (ctrl.scale !== 1) {
+          drawMiniMap();
+        }
       }
     }
 
-    function drawNode (node) {
+    function drawEdges () {
+      ctrl.context.strokeStyle = "#ccc";
+      ctrl.context.beginPath();
+      ctrl.edges.forEach(function (d) {
+        ctrl.context.lineWidth = 1;
+        ctrl.context.moveTo(d.source.x, d.source.y);
+        ctrl.context.lineTo(d.target.x, d.target.y);
+      });
+      ctrl.context.stroke();
+    }
+
+    function normalizeNode (node) {
+      node.size = node.size || 17;
+      node.x = Math.max(node.size + 1, Math.min(ctrl.canvasW - node.size - 1, node.x));
+      node.y = Math.max(node.size + 1, Math.min(ctrl.canvasH - node.size - 1, node.y));
+    }
+
+    function drawNodes () {
       // draw circle
+      ctrl.nodes.forEach(function (node) {
+        normalizeNode(node);
+        ctrl.context.beginPath();
+        ctrl.context.fillStyle = node.fill || "steelblue";
+        ctrl.context.moveTo(node.x, node.y);
+        ctrl.context.arc(node.x, node.y, 17, 0, 2 * Math.PI);
+        ctrl.context.fill();
+
+        if (node.usage) {
+          ctrl.context.beginPath();
+          ctrl.context.lineWidth = 5;
+          ctrl.context.arc(node.x, node.y, node.size, 0, ((node.usage / 100) * 2) * Math.PI);
+          ctrl.context.strokeStyle = '#003300';
+          ctrl.context.stroke();
+        }
+
+        //draw icon
+        ctrl.context.beginPath();
+        ctrl.context.fillStyle = 'white';
+        ctrl.context.textAlign = 'center';
+        ctrl.context.textBaseline = 'middle';
+        ctrl.context.fillText(node.icon || '\uF049', node.x, node.y);
+        ctrl.context.fill();
+      });
+    }
+
+    function drawMiniMap () {
+      var mapX = 0.9 * ctrl.canvasW - 10;
+      var mapY = 10;
+      var mapW = 0.1 * ctrl.canvasW;
+      var mapH = 0.1 * ctrl.canvasH;
       ctrl.context.beginPath();
-      ctrl.context.fillStyle = "steelblue";
-      ctrl.context.moveTo(node.x, node.y);
-      ctrl.context.arc(node.x, node.y, 17, 0, 2 * Math.PI);
+      ctrl.context.strokeStyle = 'rgba(0, 0, 0, 0.3)';
+      ctrl.context.fillStyle = 'rgba(252, 252, 252, 0.3)';
+
+      ctrl.context.rect(mapX * ctrl.scale, mapY * ctrl.scale, mapW, mapH);
+      ctrl.context.stroke();
       ctrl.context.fill();
 
-      //draw icon
       ctrl.context.beginPath();
-      ctrl.context.fillStyle = 'white';
-      ctrl.context.textAlign = 'center';
-      ctrl.context.textBaseline = 'middle';
-      ctrl.context.fillText('\uF047', node.x, node.y);
+      ctrl.context.fillStyle = 'rgba(224, 224, 224, 0.3)';
+      ctrl.context.rect(
+        mapX / ctrl.scale,
+        mapY / ctrl.scale,
+        mapW / ctrl.scale,
+        mapH / ctrl.scale
+      );
+      ctrl.context.stroke();
       ctrl.context.fill();
     }
   },