Skip to content

Commit

Permalink
Refactored demo code (#1792)
Browse files Browse the repository at this point in the history 
Ref #1753
  • Loading branch information
@maxkfranz
Manfred authored and maxkfranz committed Apr 19, 2017
1 parent 048d166 commit 719d0ad
Show file tree
Hide file tree
Showing 74 changed files with 82,107 additions and 6,451 deletions.
63 changes: 24 additions & 39 deletions documentation/demos/6000-elements/code.js
View file
@@ -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
]
});
});
12 changes: 5 additions & 7 deletions documentation/demos/6000-elements/index.html
View file
@@ -1,21 +1,19 @@
<!DOCTYPE html>
<html>

<head>
<title>Cytoscape.js (6,000 elements)</title>

<link href="style.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.2/fetch.min.js"></script>
<script src="../../js/cytoscape.min.js"></script>
<script src="code.js"></script>
<!-- For loading external data files -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,fetch"></script>

<script src="../../js/cytoscape.min.js"></script>
</head>

<body>
<h1>Cytoscape.js (6,000 elements)</h1>
<div id="cy"></div>
<!-- Load appplication code at the end to ensure DOM is loaded -->
<script src="code.js"></script>
</body>

</html>
148 changes: 72 additions & 76 deletions documentation/demos/angularjs-example/code.js
View file
Expand Up @@ -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++ ){
Expand All @@ -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();
});
} ]);

} ]);
6 changes: 3 additions & 3 deletions documentation/demos/angularjs-example/index.html
View file
Expand Up @@ -4,15 +4,13 @@
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<title>AngularJS example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../../js/cytoscape.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="code.js"></script>
</head>
<body ng-app="app">
<div id="logo"></div>
<div id="cy"></div>

<table id="people-table" ng-controller="PeopleCtrl">
<tbody>
<tr>
Expand All @@ -25,5 +23,7 @@
</tr>
</tbody>
</table>
<!-- Load appplication code at the end to ensure DOM is loaded -->
<script src="code.js"></script>
</body>
</html>
16 changes: 6 additions & 10 deletions documentation/demos/animated-bfs/code.js
View file
@@ -1,5 +1,3 @@
$(function(){ // on dom ready

var cy = cytoscape({
container: document.getElementById('cy'),

Expand All @@ -26,16 +24,16 @@ var cy = cytoscape({
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.5s'
}),

elements: {
nodes: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{ data: { id: 'c' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } }
],
],

edges: [
{ data: { id: 'a"e', weight: 1, source: 'a', target: 'e' } },
{ data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
Expand All @@ -46,28 +44,26 @@ var cy = cytoscape({
{ data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
]
},

layout: {
name: 'breadthfirst',
directed: true,
roots: '#a',
padding: 10
}
});

var bfs = cy.elements().bfs('#a', function(){}, true);

var i = 0;
var highlightNextEle = function(){
if( i < bfs.path.length ){
bfs.path[i].addClass('highlighted');

i++;
setTimeout(highlightNextEle, 1000);
}
};

// kick off first highlight
highlightNextEle();

}); // on dom ready

0 comments on commit 719d0ad

Please sign in to comment.