Merge remote-tracking branch 'techtonik/master'
* 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
Dennis Hotson
commit
1e6b1ad035
22
README.mkdn
22
README.mkdn
|
|
@ -21,7 +21,9 @@ Try to imagine it as a bunch of springs connected to each other.
|
||||||
Demo
|
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
|
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.
|
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
|
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();
|
var graph = new Graph();
|
||||||
graph.addNodes('mark', 'higgs', 'other', 'etc');
|
graph.addNodes('mark', 'higgs', 'other', 'etc');
|
||||||
|
|
@ -53,6 +55,22 @@ Springy 1.1+ supports simplified API for adding nodes and edges, see
|
||||||
['mark', 'other']
|
['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
|
Advanced Drawing
|
||||||
----
|
----
|
||||||
|
|
||||||
|
|
|
||||||
34
demo-json.html
Normal file
34
demo-json.html
Normal 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
33
demo-simple.html
Normal 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
12
demo.html
|
|
@ -29,12 +29,12 @@ graph.newEdge(dennis, bianca, {color: '#CC333F'});
|
||||||
graph.newEdge(bianca, monty, {color: '#EB6841'});
|
graph.newEdge(bianca, monty, {color: '#EB6841'});
|
||||||
|
|
||||||
jQuery(function(){
|
jQuery(function(){
|
||||||
var springy = jQuery('#springydemo').springy({
|
var springy = jQuery('#springydemo').springy({
|
||||||
graph: graph,
|
graph: graph,
|
||||||
nodeSelected: function(node){
|
nodeSelected: function(node){
|
||||||
console.log('Node selected: ' + JSON.stringify(node.data));
|
console.log('Node selected: ' + JSON.stringify(node.data));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
32
demo2.html
32
demo2.html
|
|
@ -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
37
springy.js
|
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* Springy v1.1.1
|
* Springy v1.2.0
|
||||||
*
|
*
|
||||||
* Copyright (c) 2010 Dennis Hotson
|
* Copyright (c) 2010 Dennis Hotson
|
||||||
*
|
*
|
||||||
|
|
@ -44,7 +44,7 @@ var Node = function(id, data) {
|
||||||
this.data = (data !== undefined) ? data : {};
|
this.data = (data !== undefined) ? data : {};
|
||||||
|
|
||||||
// Data fields used by layout algorithm in this file:
|
// Data fields used by layout algorithm in this file:
|
||||||
// this.data.mass
|
// this.data.mass
|
||||||
// Data used by default renderer in springyui.js
|
// Data used by default renderer in springyui.js
|
||||||
// this.data.label
|
// this.data.label
|
||||||
};
|
};
|
||||||
|
|
@ -143,6 +143,39 @@ Graph.prototype.newEdge = function(source, target, data) {
|
||||||
return edge;
|
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
|
// find the edges from node1 to node2
|
||||||
Graph.prototype.getEdges = function(node1, node2) {
|
Graph.prototype.getEdges = function(node1, node2) {
|
||||||
if (node1.id in this.adjacency
|
if (node1.id in this.adjacency
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user