shrhau7i / ngcytoscape

Angular directive for cytoscape.js

ngCytoscape

A simple angular wrapper for the Cytocape.js library.

v0.0.5 Master

Demos

Visit the Demo Page for detailed set-up and usage.

Dependencies

AngularJs Cytoscape.js

##Installation

bower install ngCytoscape
npm install

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/cytoscape/dist/cytoscape.js"></script>
<script src="bower_components/ngCytoscape/dist/ngCytoscape.js">

Include ngCytoscape as a dependency in your application.

##Basic Example HTML

 <cytoscape graph-options="options" graph-elements="elements" graph-layout="layout" graph-style="style"></cytoscape>

Controller

(function(){
 angular
  .module('app')
  .controller('example');
  example.$inject = ['$scope', 'cytoData']
  function example($scope, cytoData){
   $scope.options = { //See http://js.cytoscape.org/#core/initialisation for core options
    textureOnViewport:true,
    pixelRatio: 'auto',
    motionBlur: false,
    hideEdgesOnViewport:true
   };

   $scope.layout = {name: 'grid'}   //See http://js.cytoscape.org/#collection/layout for available layouts and options

   $scope.elements = {
    n1:{
     group: 'nodes',
     data:{} //Data property mandatory for all elements
    },
    n2:{
     group: 'nodes',
     data:{}
	 },
    e1:{
     group:'edges',
     data:{
      target: 'n1',  //Source and Target mandatory for edges.
      source: 'n2'
     }
    }
   }
    $scope.style = [ // See http://js.cytoscape.org/#style for style formatting and options.
      {
            selector: 'node',
            style: {
                'shape': 'ellipse',
                'border-width': 0,
                'background-color': 'blue'
            }
        }
    ]
  }
})();

cytoscape instance

Inject cytoData in your controller as a dependency. Obtain the cytoscape graph core by making a call to cytoData.getGraph(). This will return a promise with the graph instance. If you have multiple graphs, they must contain an id property. Then you can pass the id to cytoData.getGraph('id') to obtain the corresponding graph instance.

//Single Graph Instance
(function(){
 angular
  .module('app')
  .controller('example');

  example.$inject = ['$scope', 'cytoData']

  function example($scope, cytoData){
      $scope.graph = {};
      cytoData.getGraph().then(function(graph){
        $scope.graph = graph;
      }
  }
})();

Now all core functionality is available on $scope.graph

$scope.graph.fit(); //Pan and zooms the graph to fit to a collection.

Adding a removing nodes / edges

Just extend the node / edge object onto your $scope.elements object. Removing a node WILL remove it's connected edges from the graph, but WILL NOT remove them from your $scope.elements object.

Data Object

The data property of nodes and edges are $watched. Any changes to data will automatically updated in cytoscape.

Events

See cytoscape library for more information.

• cy:edge:<event> Edge Events.
• cy:node:<event> Node Events.
• cy:core:<event> Core Events.
• cy:graph:<event> Graph Events.

$scope.$on('cy:node:click', function(ng,cy){
    var node = cy.cyTarget;
    console.log(node.data())
});