open.source/springy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'techtonik/master'

Browse Source 
* techtonik/master:
  Revert mixed argument patch for addNode(), because addNodes() in loadJSON already supports single string argument.
  Add JSON load capabilities to Springy.
  API change: addNode() now accepts string or Node
  Make demo2.html output different from demo.html
This commit is contained in:
anatoly techtonik 2013-03-12 12:46:41 +00:00 committed by Dennis Hotson
commit 1e6b1ad035
6 changed files with 128 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.mkdn
View File

@ -21,7 +21,9 @@ Try to imagine it as a bunch of springs connected to each other.
Demo
----
[demo](http://dhotson.github.com/springy/demo.html)
[demo - basic](http://dhotson.github.com/springy/demo.html)
: [demo - simplified API](http://dhotson.github.com/springy/demo-simple.html)
: [demo - JSON API](http://dhotson.github.com/springy/demo-json.html)
Getting Started
@ -43,7 +45,7 @@ See [demo.html](http://dhotson.github.com/springy/demo.html) for the way to
add nodes and edges to graph and springyui.js for the rendering example.
Springy 1.1+ supports simplified API for adding nodes and edges, see
[demo2.html](http://techtonik.github.com/springy/demo2.html):
[demo-simple.html](http://dhotson.github.com/springy/demo-simple.html):
var graph = new Graph();
graph.addNodes('mark', 'higgs', 'other', 'etc');
@ -53,6 +55,22 @@ Springy 1.1+ supports simplified API for adding nodes and edges, see
['mark', 'other']
);
Springy 1.2+ also accepts JSON, see
[demo-json.html](http://dhotson.github.com/springy/demo-json.html):
graphJSON = {
"nodes": ['mark', 'higgs', 'other', 'etc'],
"edges": [
['mark', 'higgs'],
['mark', 'etc'],
['mark', 'other']
]
};
var graph = new Graph();
graph.loadJSON(graphJSON);
Advanced Drawing
----

34
demo-json.html Normal file
View File

@ -0,0 +1,34 @@
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="springy.js"></script>
<script src="springyui.js"></script>
<script>
var graph = new Graph();
graph.loadJSON(
{
"nodes": [
'Amphitryon',
'Alcmene',
'Iphicles',
'Heracles'
],
"edges": [
['Amphitryon', 'Alcmene'],
['Alcmene', 'Amphitryon'],
['Amphitryon', 'Iphicles'],
['Amphitryon', 'Heracles']
]
}
);
jQuery(function(){
var springy = jQuery('#springydemo').springy({
graph: graph
});
});
</script>
<canvas id="springydemo" width="640" height="480" />
</body>
</html>

33
demo-simple.html Normal file
View File

@ -0,0 +1,33 @@
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="springy.js"></script>
<script src="springyui.js"></script>
<script>
var graph = new Graph();
graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara')
graph.addNodes('Amphitryon', 'Alcmene', 'Iphicles', 'Heracles');
graph.addEdges(
['Dennis', 'Michael', {color: '#00A0B0', label: 'Foo bar'}],
['Michael', 'Dennis', {color: '#6A4A3C'}],
['Michael', 'Jessica', {color: '#CC333F'}],
['Jessica', 'Barbara', {color: '#EB6841'}],
['Michael', 'Timothy', {color: '#EDC951'}],
['Amphitryon', 'Alcmene', {color: '#7DBE3C'}],
['Alcmene', 'Amphitryon', {color: '#BE7D3C'}],
['Amphitryon', 'Iphicles'],
['Amphitryon', 'Heracles'],
['Barbara', 'Timothy', {color: '#6A4A3C'}]
);
jQuery(function(){
var springy = jQuery('#springydemo').springy({
graph: graph
});
});
</script>
<canvas id="springydemo" width="640" height="480" />
</body>
</html>

12
demo.html
View File

@ -29,12 +29,12 @@ graph.newEdge(dennis, bianca, {color: '#CC333F'});
graph.newEdge(bianca, monty, {color: '#EB6841'});
jQuery(function(){
var springy = jQuery('#springydemo').springy({
graph: graph,
nodeSelected: function(node){
console.log('Node selected: ' + JSON.stringify(node.data));
}
});
var springy = jQuery('#springydemo').springy({
graph: graph,
nodeSelected: function(node){
console.log('Node selected: ' + JSON.stringify(node.data));
}
});
});
</script>

32
demo2.html
View File

@ -1,32 +0,0 @@
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="springy.js"></script>
<script src="springyui.js"></script>
<script>
var graph = new Graph();
graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara', 'Franklin')
graph.addNodes('Monty', 'James');
graph.addEdges(
['Dennis', 'Michael', {color: '#00A0B0', label: 'Foo bar'}],
['Michael', 'Dennis', {color: '#6A4A3C'}],
['Michael', 'Jessica', {color: '#CC333F'}],
['Jessica', 'Barbara', {color: '#EB6841'}],
['Michael', 'Timothy', {color: '#EDC951'}],
['Franklin', 'Monty', {color: '#7DBE3C'}],
['Dennis', 'Monty', {color: '#000000'}],
['Monty', 'James'],
['Barbara', 'Timothy', {color: '#6A4A3C'}]
);
jQuery(function(){
var springy = jQuery('#springydemo').springy({
graph: graph
});
});
</script>
<canvas id="springydemo" width="640" height="480" />
</body>
</html>

37
springy.js
View File

@ -1,5 +1,5 @@
/**
* Springy v1.1.1
* Springy v1.2.0
*
* Copyright (c) 2010 Dennis Hotson
*
@ -44,7 +44,7 @@ var Node = function(id, data) {
this.data = (data !== undefined) ? data : {};
// Data fields used by layout algorithm in this file:
// this.data.mass
// this.data.mass
// Data used by default renderer in springyui.js
// this.data.label
};
@ -143,6 +143,39 @@ Graph.prototype.newEdge = function(source, target, data) {
return edge;
};
// add nodes and edges from JSON object
Graph.prototype.loadJSON = function(json) {
/**
Springy's simple JSON format for graphs.
historically, Springy uses separate lists
of nodes and edges:
{
"nodes": [
"center",
"left",
"right",
"up",
"satellite"
],
"edges": [
["center", "left"],
["center", "right"],
["center", "up"]
]
}
**/
if ('nodes' in json || 'edges' in json) {
this.addNodes.apply(this, json['nodes']);
this.addEdges.apply(this, json['edges']);
}
}
// find the edges from node1 to node2
Graph.prototype.getEdges = function(node1, node2) {
if (node1.id in this.adjacency