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

Updated to match namespaced code

Browse Source
This commit is contained in:
Dennis Hotson 2013-03-15 11:09:53 +00:00
parent f8e3ae7c62
commit 7d1bc9ec5c
7 changed files with 628 additions and 644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
demo-json.html
View File

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

2
demo-simple.html
View File

@ -4,7 +4,7 @@
<script src="springy.js"></script> <script src="springy.js"></script>
<script src="springyui.js"></script> <script src="springyui.js"></script>
<script> <script>
var graph = new Graph(); var graph = new Springy.Graph();
graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara') graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara')
graph.addNodes('Amphitryon', 'Alcmene', 'Iphicles', 'Heracles'); graph.addNodes('Amphitryon', 'Alcmene', 'Iphicles', 'Heracles');

2
demo.html
View File

@ -4,7 +4,7 @@
<script src="springy.js"></script> <script src="springy.js"></script>
<script src="springyui.js"></script> <script src="springyui.js"></script>
<script> <script>
var graph = new Graph(); var graph = new Springy.Graph();
var dennis = graph.newNode({ var dennis = graph.newNode({
label: 'Dennis', label: 'Dennis',

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>

14
index.html
View File

@ -124,7 +124,7 @@
<script> <script>
(function() { (function() {
// make a new graph // make a new graph
var graph = new Graph(); var graph = new Springy.Graph();
// make some nodes // make some nodes
var node1 = graph.newNode({label: 'Norway Spruce'}); var node1 = graph.newNode({label: 'Norway Spruce'});
@ -138,7 +138,7 @@
graph.newEdge(node2, node4); graph.newEdge(node2, node4);
graph.newEdge(node1, node4); graph.newEdge(node1, node4);
var layout = new Layout.ForceDirected( var layout = new Springy.Layout.ForceDirected(
graph, graph,
200.0, // Spring stiffness 200.0, // Spring stiffness
400.0, // Node repulsion 400.0, // Node repulsion
@ -148,7 +148,7 @@
var canvas = document.getElementById('demo'); var canvas = document.getElementById('demo');
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
var renderer = new Renderer(layout, var renderer = new Springy.Renderer(layout,
function clear() { function clear() {
ctx.clearRect(0, 0, 650, 300); ctx.clearRect(0, 0, 650, 300);
}, },
@ -199,7 +199,7 @@
<p>Here's how to create a graph and add nodes and edges:</p> <p>Here's how to create a graph and add nodes and edges:</p>
<pre> <pre>
<span class="Comment">// make a new graph</span> <span class="Comment">// make a new graph</span>
<span class="Identifier">var</span><span class="Special"> graph = </span><span class="Normal">new</span><span class="Special"> Graph</span>()<span class="Special">;</span> <span class="Identifier">var</span><span class="Special"> graph = </span><span class="Normal">new</span><span class="Special"> Springy.Graph</span>()<span class="Special">;</span>
<span class="Comment">// make some nodes</span> <span class="Comment">// make some nodes</span>
<span class="Identifier">var</span><span class="Special"> spruce = graph.newNode</span>(<span class="Function">{</span><span class="Special">label: </span><span class="String">'Norway Spruce'</span><span class="Function">}</span>)<span class="Special">;</span> <span class="Identifier">var</span><span class="Special"> spruce = graph.newNode</span>(<span class="Function">{</span><span class="Special">label: </span><span class="String">'Norway Spruce'</span><span class="Function">}</span>)<span class="Special">;</span>
@ -226,10 +226,10 @@
<h3>Do your own rendering</h3> <h3>Do your own rendering</h3>
<p>If you're keen to do your own custom drawing or interaction&mdash;there's a few extra things you'll need to know.</p> <p>If you're keen to do your own custom drawing or interaction&mdash;there's a few extra things you'll need to know.</p>
<p>The core Springy layout algorithm is in the Layout.ForceDirected class.</p> <p>The core Springy layout algorithm is in the Springy.Layout.ForceDirected class.</p>
<p>When creating a layout object, there are a few parameters you can tune to make the graph layout algorithm behave how you like:</p> <p>When creating a layout object, there are a few parameters you can tune to make the graph layout algorithm behave how you like:</p>
<pre> <pre>
<span class="Identifier">var</span> layout = <span class="Normal">new</span> Layout.ForceDirected( <span class="Identifier">var</span> layout = <span class="Normal">new</span> Springy.Layout.ForceDirected(
graph, graph,
<span class="Constant">400</span>.<span class="Constant">0</span>, <span class="Comment">// Spring stiffness</span> <span class="Constant">400</span>.<span class="Constant">0</span>, <span class="Comment">// Spring stiffness</span>
<span class="Constant">400</span>.<span class="Constant">0</span>, <span class="Comment">// Node repulsion</span> <span class="Constant">400</span>.<span class="Constant">0</span>, <span class="Comment">// Node repulsion</span>
@ -241,7 +241,7 @@
You just need to provide some callbacks to do the actual drawing: You just need to provide some callbacks to do the actual drawing:
</p> </p>
<pre> <pre>
<span class="Identifier">var</span> renderer = <span class="Normal">new</span> Renderer( <span class="Identifier">var</span> renderer = <span class="Normal">new</span> Springy.Renderer(
layout, layout,
<span class="Function">function</span> clear() <span class="Function">{</span> <span class="Function">function</span> clear() <span class="Function">{</span>
<span class="Comment">// code to clear screen</span> <span class="Comment">// code to clear screen</span>

1168
springy.js
View File

File diff suppressed because it is too large Load Diff

24
springyui.js
View File

@ -26,7 +26,7 @@ Copyright (c) 2010 Dennis Hotson
(function() { (function() {
jQuery.fn.springy = function(params) { jQuery.fn.springy = function(params) {
var graph = this.graph = params.graph || new Graph(); var graph = this.graph = params.graph || new Springy.Graph();
var stiffness = params.stiffness || 400.0; var stiffness = params.stiffness || 400.0;
var repulsion = params.repulsion || 400.0; var repulsion = params.repulsion || 400.0;
@ -36,14 +36,14 @@ jQuery.fn.springy = function(params) {
var canvas = this[0]; var canvas = this[0];
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
var layout = this.layout = new Layout.ForceDirected(graph, stiffness, repulsion, damping); var layout = this.layout = new Springy.Layout.ForceDirected(graph, stiffness, repulsion, damping);
// calculate bounding box of graph layout.. with ease-in // calculate bounding box of graph layout.. with ease-in
var currentBB = layout.getBoundingBox(); var currentBB = layout.getBoundingBox();
var targetBB = {bottomleft: new Vector(-2, -2), topright: new Vector(2, 2)}; var targetBB = {bottomleft: new Springy.Vector(-2, -2), topright: new Springy.Vector(2, 2)};
// auto adjusting bounding box // auto adjusting bounding box
Layout.requestAnimationFrame(function adjust() { Springy.requestAnimationFrame(function adjust() {
targetBB = layout.getBoundingBox(); targetBB = layout.getBoundingBox();
// current gets 20% closer to target every iteration // current gets 20% closer to target every iteration
currentBB = { currentBB = {
@ -53,7 +53,7 @@ jQuery.fn.springy = function(params) {
.divide(10)) .divide(10))
}; };
Layout.requestAnimationFrame(adjust); Springy.requestAnimationFrame(adjust);
}); });
// convert to/from screen coordinates // convert to/from screen coordinates
@ -61,14 +61,14 @@ jQuery.fn.springy = function(params) {
var size = currentBB.topright.subtract(currentBB.bottomleft); var size = currentBB.topright.subtract(currentBB.bottomleft);
var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * canvas.width; var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * canvas.width;
var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * canvas.height; var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * canvas.height;
return new Vector(sx, sy); return new Springy.Vector(sx, sy);
}; };
fromScreen = function(s) { fromScreen = function(s) {
var size = currentBB.topright.subtract(currentBB.bottomleft); var size = currentBB.topright.subtract(currentBB.bottomleft);
var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x; var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x;
var py = (s.y / canvas.height) * size.y + currentBB.bottomleft.y; var py = (s.y / canvas.height) * size.y + currentBB.bottomleft.y;
return new Vector(px, py); return new Springy.Vector(px, py);
}; };
// half-assed drag and drop // half-assed drag and drop
@ -120,7 +120,7 @@ jQuery.fn.springy = function(params) {
dragged = null; dragged = null;
}); });
Node.prototype.getWidth = function() { Springy.Node.prototype.getWidth = function() {
var text = (this.data.label !== undefined) ? this.data.label : this.id; var text = (this.data.label !== undefined) ? this.data.label : this.id;
if (this._width && this._width[text]) if (this._width && this._width[text])
return this._width[text]; return this._width[text];
@ -136,11 +136,11 @@ jQuery.fn.springy = function(params) {
return width; return width;
}; };
Node.prototype.getHeight = function() { Springy.Node.prototype.getHeight = function() {
return 20; return 20;
}; };
var renderer = this.renderer = new Renderer(layout, var renderer = this.renderer = new Springy.Renderer(layout,
function clear() { function clear() {
ctx.clearRect(0,0,canvas.width,canvas.height); ctx.clearRect(0,0,canvas.width,canvas.height);
}, },
@ -150,7 +150,7 @@ jQuery.fn.springy = function(params) {
var x2 = toScreen(p2).x; var x2 = toScreen(p2).x;
var y2 = toScreen(p2).y; var y2 = toScreen(p2).y;
var direction = new Vector(x2-x1, y2-y1); var direction = new Springy.Vector(x2-x1, y2-y1);
var normal = direction.normal().normalise(); var normal = direction.normal().normalise();
var from = graph.getEdges(edge.source, edge.target); var from = graph.getEdges(edge.source, edge.target);
@ -290,7 +290,7 @@ jQuery.fn.springy = function(params) {
return false; return false;
} }
return new Vector(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y)); return new Springy.Vector(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));
} }
function intersect_line_box(p1, p2, p3, w, h) { function intersect_line_box(p1, p2, p3, w, h) {