initial basic graph setup

Author: Hyperkid123

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

@@ -11,7 +11,7 @@
    <example module="patternfly.charts">
     <file name="index.html">
       <div ng-controller="TopologyMapCtrl" class="container-topology">
-        <pf-topology-map nodes="nodes" edges="edges" force="2"></pf-topology-map>
+        <pf-topology-map nodes="nodes" edges="edges"></pf-topology-map>
       </div>
     </file>
     <file name="script.js">
@@ -20,9 +20,18 @@
           {
             id: 1,
             title: 'testNode',
+            icon: 'fa'
+          },
+          {
+            id: 2,
+            title: 'testNode2',
+            fill: '#FF0000'
           },
         ];
-        $scope.edges = [];
+        $scope.edges = [{
+          source: 0,
+          target: 1,
+        }];
       });
     </file>
    </example>

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

@@ -1,8 +1,9 @@
 angular.module('patternfly.charts').component('pfTopologyMap', {
   bindings: {
-    force: '<?',
     nodes: '<',
-    edges: '<'
+    edges: '<',
+    force: '<?',
+    radius: '<?',
   },
   templateUrl: 'charts/topology-map.html',
   controller: function  ($element) {
@@ -19,12 +20,18 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
     var maxNodeSize;
     var transform;
     var simulation;
+    var options;
+    var radius = ctrl.radius || 17;
+    var graph;
 
-    ctrl.canvas = $element[0] ;
+    ctrl.canvas;
+    ctrl.showLabels = false;
 
     this.$onInit = function () {
       var coords;
-      ctrl.canvas = ctrl.canvas.querySelector('canvas.topology-graph');
+
+      options = {force: ctrl.force, radius: ctrl.radius};
+      ctrl.canvas = $element[0].querySelector('canvas.topology-graph');
       // Store the CSS computed width and the height of the canvas
       ctrl.canvasW = ctrl.canvas.clientWidth;
       ctrl.canvasH = ctrl.canvas.clientHeight;
@@ -36,10 +43,44 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
       ctrl.canvasX = coords.left;
       ctrl.canvasY = coords.top;
       // Store the canvas' context
-      ctrl.context = this.canvas.getContext('2d');
-      // Set up the initial transform
-      ctrl.transform = d3.zoomIdentity;
-      console.log('controller: ', ctrl);
+      ctrl.context = ctrl.canvas.getContext('2d');
+      ctrl.context.font = '17px FontAwesome';
+      if (! ctrl.force) {
+        ctrl.force = d3.layout.force()
+          .charge(-800)
+          .gravity(0.2)
+          .linkDistance(80)
+          .size([ctrl.canvasW, ctrl.canvasH]);
+      }
+      ctrl.force.nodes(ctrl.nodes)
+        .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) {
+          ctrl.context.beginPath();
+          ctrl.context.fillStyle = "steelblue";
+          ctrl.context.moveTo(d.x, d.y);
+          ctrl.context.arc(d.x, d.y, 17, 0, 2 * Math.PI);
+          ctrl.context.fill();
+          ctrl.context.beginPath();
+          ctrl.context.fillStyle = 'black';
+          ctrl.context.textAlign = 'center';
+          ctrl.context.fillText('\uF047', d.x, d.y - (17 / 2));
+          ctrl.context.fill();
+        });
+      }
+      console.log(ctrl.force);
     };
   },
 });