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

Add helper method .addNodes() that accepts list of strings.

Browse Source
This commit is contained in:
anatoly techtonik 2012-07-06 17:40:32 +03:00
parent bc1e1a13a3
commit 90b23f131e
3 changed files with 74 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.mkdn
View File

@ -24,7 +24,7 @@ Demo
[demo](http://dhotson.github.com/springy/demo.html) [demo](http://dhotson.github.com/springy/demo.html)
Basic Usage Getting Started
---- ----
springy.js by itself is quite plain and doesn't include any code to do rendering springy.js by itself is quite plain and doesn't include any code to do rendering
@ -36,10 +36,19 @@ However, I've written a little helper jQuery plugin called springyui.js
to help get you started. It's got a semi-decent default renderer and some to help get you started. It's got a semi-decent default renderer and some
half assed drag and drop. half assed drag and drop.
See demo.html and springyui.js for an example of usage. Basic Usage
----
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.
Advanced Usage Starting from Springy 1.1 it is possible to add nodes with simple array
of node names [demo2.html](http://techtonik.github.com/springy/demo2.html):
var graph = new Graph();
graph.addNodes(['mark', 'higgs', 'other', 'etc']);
Advanced Drawing
---- ----
If you're keen to do your own custom drawing, you'll need to know a few If you're keen to do your own custom drawing, you'll need to know a few

42
demo2.html Normal file
View File

@ -0,0 +1,42 @@
<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', 'Bianca']);
var dennis = graph.newNode({label: 'Dennis'});
var michael = graph.newNode({label: 'Michael'});
var jessica = graph.newNode({label: 'Jessica'});
var timothy = graph.newNode({label: 'Timothy'});
var barbara = graph.newNode({label: 'Barbara'});
var franklin = graph.newNode({label: 'Franklin'});
var monty = graph.newNode({label: 'Monty'});
var james = graph.newNode({label: 'James'});
var bianca = graph.newNode({label: 'Bianca'});
graph.newEdge(dennis, michael, {color: '#00A0B0', label: 'Foo bar'});
graph.newEdge(michael, dennis, {color: '#6A4A3C'});
graph.newEdge(michael, jessica, {color: '#CC333F'});
graph.newEdge(jessica, barbara, {color: '#EB6841'});
graph.newEdge(michael, timothy, {color: '#EDC951'});
graph.newEdge(franklin, monty, {color: '#7DBE3C'});
graph.newEdge(dennis, monty, {color: '#000000'});
graph.newEdge(monty, james, {color: '#00A0B0'});
graph.newEdge(barbara, timothy, {color: '#6A4A3C'});
graph.newEdge(dennis, bianca, {color: '#CC333F'});
graph.newEdge(bianca, monty, {color: '#EB6841'});
jQuery(function(){
var springy = jQuery('#springydemo').springy({
graph: graph
});
});
</script>
<canvas id="springydemo" width="640" height="480" />
</body>
</html>

21
springy.js
View File

@ -1,5 +1,5 @@
/** /**
* Springy v1.0.1 * Springy v1.1.0
* *
* Copyright (c) 2010 Dennis Hotson * Copyright (c) 2010 Dennis Hotson
* *
@ -39,13 +39,23 @@ var Graph = function() {
var Node = function(id, data) { var Node = function(id, data) {
this.id = id; this.id = id;
this.data = (data !== undefined) ? data : {}; this.data = (data !== undefined) ? data : {};
// Data fields used by layout algorithm in this file:
// this.data.mass
// Data used by default renderer in springyui.js
// this.data.label
}; };
var Edge = function(id, source, target, data) { var Edge = function(id, source, target, data) {
this.id = id; this.id = id;
/** @type {Node} */
this.source = source; this.source = source;
this.target = target; this.target = target;
this.data = (data !== undefined) ? data : {}; this.data = (data !== undefined) ? data : {};
// Edge data field used by layout alorithm
// this.data.length
// this.data.type
}; };
Graph.prototype.addNode = function(node) { Graph.prototype.addNode = function(node) {
@ -59,6 +69,15 @@ Graph.prototype.addNode = function(node) {
return node; return node;
}; };
Graph.prototype.addNodes = function(list) {
if (typeof(list[0]) == "string") {
list.forEach(function(name) {
var node = new Node(name, data = {label:name});
this.addNode(node);
}, this);
}
};
Graph.prototype.addEdge = function(edge) { Graph.prototype.addEdge = function(edge) {
var exists = false; var exists = false;
this.edges.forEach(function(e) { this.edges.forEach(function(e) {