diff --git a/documentation/demos/6000-elements/code.js b/documentation/demos/6000-elements/code.js
index 3d0cebeec..de60bf6e6 100644
--- a/documentation/demos/6000-elements/code.js
+++ b/documentation/demos/6000-elements/code.js
@@ -1,44 +1,29 @@
-var domReady = new Promise(function(resolve) {
- window.addEventListener('DOMContentLoaded', function() {
- resolve();
- });
-});
-
-var fetchData = fetch('data.json', {mode: 'no-cors'})
+fetch('data.json', {mode: 'no-cors'})
.then(function(res) {
return res.json()
- });
-
-var initCy = function(cy3json) {
- return cytoscape({
- container: document.getElementById('cy'),
- elements: cy3json.elements,
- layout: {
- name: 'preset'
- },
- style: [{
- selector: 'node',
- style: {
- 'label': 'data(label)',
- 'background-color': '#aaa'
- }
+ })
+ .then(function(data) {
+ var cy = window.cy = cytoscape({
+ container: document.getElementById('cy'),
+ elements: data.elements,
+ layout: {
+ name: 'preset'
},
- {
- selector: 'edge',
- style: {
- 'opacity': 0.2,
- 'line-color': '#ccc',
- 'width': 3
+ style: [{
+ selector: 'node',
+ style: {
+ 'label': 'data(label)',
+ 'background-color': '#aaa'
+ }
+ },
+ {
+ selector: 'edge',
+ style: {
+ 'opacity': 0.2,
+ 'line-color': '#ccc',
+ 'width': 3
+ }
}
- }
- ]
- });
-};
-
-Promise.all([fetchData, domReady])
- .then(function(val) {
- return initCy(val[0]);
- })
- .then(function(cy) {
- window.cy = cy; // put it in the window so you can play with the instance
+ ]
+ });
});
diff --git a/documentation/demos/6000-elements/index.html b/documentation/demos/6000-elements/index.html
index 9fcdc4c51..d26f13bab 100644
--- a/documentation/demos/6000-elements/index.html
+++ b/documentation/demos/6000-elements/index.html
@@ -1,21 +1,19 @@
-
Cytoscape.js (6,000 elements)
-
-
-
-
-
+
+
+
Cytoscape.js (6,000 elements)
+
+
-
diff --git a/documentation/demos/angularjs-example/code.js b/documentation/demos/angularjs-example/code.js
index 1b9a912fc..11a348f5b 100644
--- a/documentation/demos/angularjs-example/code.js
+++ b/documentation/demos/angularjs-example/code.js
@@ -5,12 +5,12 @@
var app = angular.module('app', []);
-// use a factory instead of a directive, because cy.js is not just for visualisation; you need access to the graph model and events etc
+// use a factory instead of a directive, because cy.js is not just for visualisation; you need access to the graph model and events etc
app.factory('peopleGraph', [ '$q', function( $q ){
var cy;
var peopleGraph = function(people){
var deferred = $q.defer();
-
+
// put people model in cy.js
var eles = [];
for( var i = 0; i < people.length; i++ ){
@@ -23,126 +23,122 @@ app.factory('peopleGraph', [ '$q', function( $q ){
}
});
}
-
- $(function(){ // on dom ready
-
- cy = cytoscape({
- container: $('#cy')[0],
-
- style: cytoscape.stylesheet()
- .selector('node')
- .css({
- 'content': 'data(name)',
- 'height': 80,
- 'width': 'mapData(weight, 1, 200, 1, 200)',
- 'text-valign': 'center',
- 'color': 'white',
- 'text-outline-width': 2,
- 'text-outline-color': '#888'
- })
- .selector('edge')
- .css({
- 'target-arrow-shape': 'triangle'
- })
- .selector(':selected')
- .css({
- 'background-color': 'black',
- 'line-color': 'black',
- 'target-arrow-color': 'black',
- 'source-arrow-color': 'black',
- 'text-outline-color': 'black'
- }),
-
- layout: {
- name: 'cose',
- padding: 10
- },
-
- elements: eles,
-
- ready: function(){
- deferred.resolve( this );
-
- cy.on('cxtdrag', 'node', function(e){
- var node = this;
- var dy = Math.abs( e.cyPosition.x - node.position().x );
- var weight = Math.round( dy*2 );
-
- node.data('weight', weight);
-
- fire('onWeightChange', [ node.id(), node.data('weight') ]);
- });
- }
- });
- }); // on dom ready
-
+ cy = cytoscape({
+ container: document.getElementById('cy'),
+
+ style: cytoscape.stylesheet()
+ .selector('node')
+ .css({
+ 'content': 'data(name)',
+ 'height': 80,
+ 'width': 'mapData(weight, 1, 200, 1, 200)',
+ 'text-valign': 'center',
+ 'color': 'white',
+ 'text-outline-width': 2,
+ 'text-outline-color': '#888'
+ })
+ .selector('edge')
+ .css({
+ 'target-arrow-shape': 'triangle'
+ })
+ .selector(':selected')
+ .css({
+ 'background-color': 'black',
+ 'line-color': 'black',
+ 'target-arrow-color': 'black',
+ 'source-arrow-color': 'black',
+ 'text-outline-color': 'black'
+ }),
+
+ layout: {
+ name: 'cose',
+ padding: 10
+ },
+
+ elements: eles,
+
+ ready: function(){
+ deferred.resolve( this );
+
+ cy.on('cxtdrag', 'node', function(e){
+ var node = this;
+ var dy = Math.abs( e.cyPosition.x - node.position().x );
+ var weight = Math.round( dy*2 );
+
+ node.data('weight', weight);
+
+ fire('onWeightChange', [ node.id(), node.data('weight') ]);
+ });
+ }
+ });
+
return deferred.promise;
};
-
+
peopleGraph.listeners = {};
-
+
function fire(e, args){
var listeners = peopleGraph.listeners[e];
-
+
for( var i = 0; listeners && i < listeners.length; i++ ){
var fn = listeners[i];
-
+
fn.apply( fn, args );
}
}
-
+
function listen(e, fn){
var listeners = peopleGraph.listeners[e] = peopleGraph.listeners[e] || [];
-
+
listeners.push(fn);
}
-
+
peopleGraph.setPersonWeight = function(id, weight){
cy.$('#' + id).data('weight', weight);
};
-
+
peopleGraph.onWeightChange = function(fn){
listen('onWeightChange', fn);
};
-
+
return peopleGraph;
-
-
+
+
} ]);
app.controller('PeopleCtrl', [ '$scope', 'peopleGraph', function( $scope, peopleGraph ){
var cy; // maybe you want a ref to cy
// (usually better to have the srv as intermediary)
-
+
$scope.people = [
{ id: 'l', name: 'Laurel', weight: 65 },
{ id: 'h', name: 'Hardy', weight: 110 }
];
-
+
var peopleById = {};
for( var i = 0; i < $scope.people.length; i++ ){
var p = $scope.people[i];
-
+
peopleById[ p.id ] = p;
}
-
+
// you would probably want some ui to prevent use of PeopleCtrl until cy is loaded
peopleGraph( $scope.people ).then(function( peopleCy ){
cy = peopleCy;
-
+
// use this variable to hide ui until cy loaded if you want
$scope.cyLoaded = true;
});
-
+
$scope.onWeightChange = function(person){
peopleGraph.setPersonWeight( person.id, person.weight );
};
-
+
peopleGraph.onWeightChange(function(id, weight){
peopleById[id].weight = weight;
-
+
$scope.$apply();
});
-
-} ]);
\ No newline at end of file
+
+} ]);
diff --git a/documentation/demos/angularjs-example/index.html b/documentation/demos/angularjs-example/index.html
index dbb4989f1..252d3902b 100644
--- a/documentation/demos/angularjs-example/index.html
+++ b/documentation/demos/angularjs-example/index.html
@@ -4,15 +4,13 @@
AngularJS example
-
-
-
+
+
+