Compare commits
1 Commits
master
...
jshint-fix
| Author | SHA1 | Date | |
|---|---|---|---|
|
7ee84bf6e0 |
30
README.mkdn
30
README.mkdn
|
|
@ -21,9 +21,7 @@ Try to imagine it as a bunch of springs connected to each other.
|
||||||
Demo
|
Demo
|
||||||
----
|
----
|
||||||
|
|
||||||
[basic](http://dhotson.github.com/springy/demo.html)
|
[demo](http://dhotson.github.com/springy/demo.html)
|
||||||
| [simplified API](http://dhotson.github.com/springy/demo-simple.html)
|
|
||||||
| [JSON API](http://dhotson.github.com/springy/demo-json.html)
|
|
||||||
|
|
||||||
|
|
||||||
Getting Started
|
Getting Started
|
||||||
|
|
@ -45,9 +43,9 @@ 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
|
||||||
[demo-simple.html](http://dhotson.github.com/springy/demo-simple.html):
|
[demo2.html](http://techtonik.github.com/springy/demo2.html):
|
||||||
|
|
||||||
var graph = new Springy.Graph();
|
var graph = new Graph();
|
||||||
graph.addNodes('mark', 'higgs', 'other', 'etc');
|
graph.addNodes('mark', 'higgs', 'other', 'etc');
|
||||||
graph.addEdges(
|
graph.addEdges(
|
||||||
['mark', 'higgs'],
|
['mark', 'higgs'],
|
||||||
|
|
@ -55,22 +53,6 @@ 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 Springy.Graph();
|
|
||||||
graph.loadJSON(graphJSON);
|
|
||||||
|
|
||||||
|
|
||||||
Advanced Drawing
|
Advanced Drawing
|
||||||
----
|
----
|
||||||
|
|
||||||
|
|
@ -80,7 +62,7 @@ things before you get started.
|
||||||
This is the basic graph API, you can create nodes and edges etc.
|
This is the basic graph API, you can create nodes and edges etc.
|
||||||
|
|
||||||
// make a new graph
|
// make a new graph
|
||||||
var graph = new Springy.Graph();
|
var graph = new Graph();
|
||||||
|
|
||||||
// make some nodes
|
// make some nodes
|
||||||
var node1 = graph.newNode({label: '1'});
|
var node1 = graph.newNode({label: '1'});
|
||||||
|
|
@ -91,12 +73,12 @@ This is the basic graph API, you can create nodes and edges etc.
|
||||||
|
|
||||||
So now to draw this graph, lets make a layout object:
|
So now to draw this graph, lets make a layout object:
|
||||||
|
|
||||||
var layout = new Springy.Layout.ForceDirected(graph, 400.0, 400.0, 0.5);
|
var layout = new Layout.ForceDirected(graph, 400.0, 400.0, 0.5);
|
||||||
|
|
||||||
I've written a Renderer class, which will handle the rendering loop.
|
I've written a Renderer class, which will handle the rendering loop.
|
||||||
You just need to provide some callbacks to do the actual drawing.
|
You just need to provide some callbacks to do the actual drawing.
|
||||||
|
|
||||||
var renderer = new Springy.Renderer(layout,
|
var renderer = new Renderer(layout,
|
||||||
function clear() {
|
function clear() {
|
||||||
// code to clear screen
|
// code to clear screen
|
||||||
},
|
},
|
||||||
|
|
|
||||||
17
bower.json
17
bower.json
|
|
@ -1,17 +0,0 @@
|
||||||
{
|
|
||||||
"name": "Springy",
|
|
||||||
"main": "springy.js",
|
|
||||||
"version": "2.7.1",
|
|
||||||
"homepage": "https://github.com/dhotson/springy",
|
|
||||||
"authors": [
|
|
||||||
"Dennis Hotson <dennis@99designs.com>"
|
|
||||||
],
|
|
||||||
"description": "A force directed graph layout algorithm",
|
|
||||||
"keywords": [
|
|
||||||
"graph",
|
|
||||||
"layout",
|
|
||||||
"visualization",
|
|
||||||
"physics"
|
|
||||||
],
|
|
||||||
"license": "MIT"
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +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 graphJSON = {
|
|
||||||
"nodes": [
|
|
||||||
"Amphitryon",
|
|
||||||
"Alcmene",
|
|
||||||
"Iphicles",
|
|
||||||
"Heracles"
|
|
||||||
],
|
|
||||||
"edges": [
|
|
||||||
["Amphitryon", "Alcmene"],
|
|
||||||
["Alcmene", "Amphitryon"],
|
|
||||||
["Amphitryon", "Iphicles"],
|
|
||||||
["Amphitryon", "Heracles"]
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
jQuery(function(){
|
|
||||||
var graph = new Springy.Graph();
|
|
||||||
graph.loadJSON(graphJSON);
|
|
||||||
|
|
||||||
var springy = jQuery('#springydemo').springy({
|
|
||||||
graph: graph
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<canvas id="springydemo" width="640" height="480" />
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -112,7 +112,7 @@ Raphael.fn.connection = function (obj1, obj2, style) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var graph = new Springy.Graph();
|
var graph = new Graph();
|
||||||
|
|
||||||
var dennis = graph.newNode({label: 'Dennis'});
|
var dennis = graph.newNode({label: 'Dennis'});
|
||||||
var michael = graph.newNode({label: 'Michael'});
|
var michael = graph.newNode({label: 'Michael'});
|
||||||
|
|
@ -166,16 +166,16 @@ function moveSet(set, x, y) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function doit() {
|
function doit() {
|
||||||
var layout = new Springy.Layout.ForceDirected(graph, 640, 480.0, 0.5);
|
var layout = new Layout.ForceDirected(graph, 640, 480.0, 0.5);
|
||||||
|
|
||||||
var r = Raphael("holder", 640, 480);
|
var r = Raphael("holder", 640, 480);
|
||||||
|
|
||||||
// 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 Springy.Vector(-2, -2), topright: new Springy.Vector(2, 2)};
|
var targetBB = {bottomleft: new Vector(-2, -2), topright: new Vector(2, 2)};
|
||||||
|
|
||||||
// auto adjusting bounding box
|
// auto adjusting bounding box
|
||||||
Springy.requestAnimationFrame(function adjust() {
|
Layout.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 = {
|
||||||
|
|
@ -185,7 +185,7 @@ function doit() {
|
||||||
.divide(10))
|
.divide(10))
|
||||||
};
|
};
|
||||||
|
|
||||||
Springy.requestAnimationFrame(adjust);
|
Layout.requestAnimationFrame(adjust);
|
||||||
});
|
});
|
||||||
|
|
||||||
// convert to/from screen coordinates
|
// convert to/from screen coordinates
|
||||||
|
|
@ -193,11 +193,11 @@ function doit() {
|
||||||
var size = currentBB.topright.subtract(currentBB.bottomleft);
|
var size = currentBB.topright.subtract(currentBB.bottomleft);
|
||||||
var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * r.width;
|
var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * r.width;
|
||||||
var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * r.height;
|
var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * r.height;
|
||||||
return new Springy.Vector(sx, sy);
|
return new Vector(sx, sy);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
var renderer = new Springy.Renderer(layout,
|
var renderer = new Renderer(layout,
|
||||||
function clear() {
|
function clear() {
|
||||||
// code to clear screen
|
// code to clear screen
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,33 +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 Springy.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>
|
|
||||||
|
|
@ -4,12 +4,9 @@
|
||||||
<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 Springy.Graph();
|
var graph = new Graph();
|
||||||
|
|
||||||
var dennis = graph.newNode({
|
var dennis = graph.newNode({label: 'Dennis'});
|
||||||
label: 'Dennis',
|
|
||||||
ondoubleclick: function() { console.log("Hello!"); }
|
|
||||||
});
|
|
||||||
var michael = graph.newNode({label: 'Michael'});
|
var michael = graph.newNode({label: 'Michael'});
|
||||||
var jessica = graph.newNode({label: 'Jessica'});
|
var jessica = graph.newNode({label: 'Jessica'});
|
||||||
var timothy = graph.newNode({label: 'Timothy'});
|
var timothy = graph.newNode({label: 'Timothy'});
|
||||||
|
|
@ -32,7 +29,7 @@ graph.newEdge(dennis, bianca, {color: '#CC333F'});
|
||||||
graph.newEdge(bianca, monty, {color: '#EB6841'});
|
graph.newEdge(bianca, monty, {color: '#EB6841'});
|
||||||
|
|
||||||
jQuery(function(){
|
jQuery(function(){
|
||||||
var springy = window.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));
|
||||||
|
|
|
||||||
32
demo2.html
Normal file
32
demo2.html
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<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>
|
||||||
21
package.json
21
package.json
|
|
@ -1,21 +0,0 @@
|
||||||
{
|
|
||||||
"name": "springy",
|
|
||||||
"version": "2.7.1",
|
|
||||||
"description": "A force directed graph layout algorithm in JavaScript.",
|
|
||||||
"main": "springy.js",
|
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git://github.com/dhotson/springy.git"
|
|
||||||
},
|
|
||||||
"keywords": [
|
|
||||||
"graph",
|
|
||||||
"layout",
|
|
||||||
"visualization"
|
|
||||||
],
|
|
||||||
"author": "Dennis Hotson <dennis.hotson@gmail.com>",
|
|
||||||
"license": "MIT",
|
|
||||||
"readmeFilename": "README.mkdn"
|
|
||||||
}
|
|
||||||
279
springy.js
279
springy.js
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* Springy v2.7.1
|
* Springy v1.1.1
|
||||||
*
|
*
|
||||||
* Copyright (c) 2010-2013 Dennis Hotson
|
* Copyright (c) 2010 Dennis Hotson
|
||||||
*
|
*
|
||||||
* Permission is hereby granted, free of charge, to any person
|
* Permission is hereby granted, free of charge, to any person
|
||||||
* obtaining a copy of this software and associated documentation
|
* obtaining a copy of this software and associated documentation
|
||||||
|
|
@ -24,26 +24,13 @@
|
||||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||||
* OTHER DEALINGS IN THE SOFTWARE.
|
* OTHER DEALINGS IN THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
(function (root, factory) {
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
|
||||||
// AMD. Register as an anonymous module.
|
|
||||||
define(function () {
|
|
||||||
return (root.returnExportsGlobal = factory());
|
|
||||||
});
|
|
||||||
} else if (typeof exports === 'object') {
|
|
||||||
// Node. Does not work with strict CommonJS, but
|
|
||||||
// only CommonJS-like enviroments that support module.exports,
|
|
||||||
// like Node.
|
|
||||||
module.exports = factory();
|
|
||||||
} else {
|
|
||||||
// Browser globals
|
|
||||||
root.Springy = factory();
|
|
||||||
}
|
|
||||||
}(this, function() {
|
|
||||||
|
|
||||||
var Springy = {};
|
/*jshint globalstrict:true, browser:true */
|
||||||
|
|
||||||
var Graph = Springy.Graph = function() {
|
// Enable strict mode for EC5 compatible browsers
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var Graph = function() {
|
||||||
this.nodeSet = {};
|
this.nodeSet = {};
|
||||||
this.nodes = [];
|
this.nodes = [];
|
||||||
this.edges = [];
|
this.edges = [];
|
||||||
|
|
@ -54,7 +41,7 @@
|
||||||
this.eventListeners = [];
|
this.eventListeners = [];
|
||||||
};
|
};
|
||||||
|
|
||||||
var Node = Springy.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 : {};
|
||||||
|
|
||||||
|
|
@ -64,7 +51,7 @@
|
||||||
// this.data.label
|
// this.data.label
|
||||||
};
|
};
|
||||||
|
|
||||||
var Edge = Springy.Edge = function(id, source, target, data) {
|
var Edge = function(id, source, target, data) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.source = source;
|
this.source = source;
|
||||||
this.target = target;
|
this.target = target;
|
||||||
|
|
@ -132,12 +119,12 @@
|
||||||
for (var i = 0; i < arguments.length; i++) {
|
for (var i = 0; i < arguments.length; i++) {
|
||||||
var e = arguments[i];
|
var e = arguments[i];
|
||||||
var node1 = this.nodeSet[e[0]];
|
var node1 = this.nodeSet[e[0]];
|
||||||
if (node1 == undefined) {
|
if (node1 === undefined) {
|
||||||
throw new TypeError("invalid node name: " + e[0]);
|
throw new TypeError('invalid node name: ' + e[0]);
|
||||||
}
|
}
|
||||||
var node2 = this.nodeSet[e[1]];
|
var node2 = this.nodeSet[e[1]];
|
||||||
if (node2 == undefined) {
|
if (node2 === undefined) {
|
||||||
throw new TypeError("invalid node name: " + e[1]);
|
throw new TypeError('invalid node name: ' + e[1]);
|
||||||
}
|
}
|
||||||
var attr = e[2];
|
var attr = e[2];
|
||||||
|
|
||||||
|
|
@ -157,47 +144,9 @@
|
||||||
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"]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
**/
|
|
||||||
// parse if a string is passed (EC5+ browsers)
|
|
||||||
if (typeof json == 'string' || json instanceof String) {
|
|
||||||
json = JSON.parse( json );
|
|
||||||
}
|
|
||||||
|
|
||||||
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 && node2.id in this.adjacency[node1.id]) {
|
||||||
&& node2.id in this.adjacency[node1.id]) {
|
|
||||||
return this.adjacency[node1.id][node2.id];
|
return this.adjacency[node1.id][node2.id];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -217,6 +166,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
this.detachNode(node);
|
this.detachNode(node);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// removes edges associated with a given node
|
// removes edges associated with a given node
|
||||||
|
|
@ -248,16 +198,6 @@
|
||||||
this.adjacency[x][y].splice(j, 1);
|
this.adjacency[x][y].splice(j, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clean up empty edge arrays
|
|
||||||
if (this.adjacency[x][y].length == 0) {
|
|
||||||
delete this.adjacency[x][y];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clean up empty objects
|
|
||||||
if (isEmpty(this.adjacency[x])) {
|
|
||||||
delete this.adjacency[x];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -285,11 +225,11 @@
|
||||||
var from = nodes[e.from];
|
var from = nodes[e.from];
|
||||||
var to = nodes[e.to];
|
var to = nodes[e.to];
|
||||||
|
|
||||||
var id = (e.directed)
|
var id = (e.directed) ?
|
||||||
? (id = e.type + "-" + from.id + "-" + to.id)
|
(id = e.type + '-' + from.id + '-' + to.id) :
|
||||||
: (from.id < to.id) // normalise id for non-directed edges
|
(from.id < to.id) ? // normalise id for non-directed edges
|
||||||
? e.type + "-" + from.id + "-" + to.id
|
(e.type + '-' + from.id + '-' + to.id) :
|
||||||
: e.type + "-" + to.id + "-" + from.id;
|
(e.type + '-' + to.id + '-' + from.id);
|
||||||
|
|
||||||
var edge = this.addEdge(new Edge(id, from, to, e.data));
|
var edge = this.addEdge(new Edge(id, from, to, e.data));
|
||||||
edge.data.type = e.type;
|
edge.data.type = e.type;
|
||||||
|
|
@ -326,14 +266,12 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
// -----------
|
// -----------
|
||||||
var Layout = Springy.Layout = {};
|
var Layout = {};
|
||||||
Layout.ForceDirected = function(graph, stiffness, repulsion, damping, minEnergyThreshold, maxSpeed) {
|
Layout.ForceDirected = function(graph, stiffness, repulsion, damping) {
|
||||||
this.graph = graph;
|
this.graph = graph;
|
||||||
this.stiffness = stiffness; // spring stiffness constant
|
this.stiffness = stiffness; // spring stiffness constant
|
||||||
this.repulsion = repulsion; // repulsion constant
|
this.repulsion = repulsion; // repulsion constant
|
||||||
this.damping = damping; // velocity damping factor
|
this.damping = damping; // velocity damping factor
|
||||||
this.minEnergyThreshold = minEnergyThreshold || 0.01; //threshold used to determine render stop
|
|
||||||
this.maxSpeed = maxSpeed || Infinity; // nodes aren't allowed to exceed this speed
|
|
||||||
|
|
||||||
this.nodePoints = {}; // keep track of points associated with nodes
|
this.nodePoints = {}; // keep track of points associated with nodes
|
||||||
this.edgeSprings = {}; // keep track of springs associated with edges
|
this.edgeSprings = {}; // keep track of springs associated with edges
|
||||||
|
|
@ -342,7 +280,8 @@
|
||||||
Layout.ForceDirected.prototype.point = function(node) {
|
Layout.ForceDirected.prototype.point = function(node) {
|
||||||
if (!(node.id in this.nodePoints)) {
|
if (!(node.id in this.nodePoints)) {
|
||||||
var mass = (node.data.mass !== undefined) ? node.data.mass : 1.0;
|
var mass = (node.data.mass !== undefined) ? node.data.mass : 1.0;
|
||||||
this.nodePoints[node.id] = new Layout.ForceDirected.Point(Vector.random(), mass);
|
this.nodePoints[node.id] =
|
||||||
|
new Layout.ForceDirected.Point(Vector.random(), mass);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.nodePoints[node.id];
|
return this.nodePoints[node.id];
|
||||||
|
|
@ -362,7 +301,9 @@
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
if (existingSpring !== false) {
|
if (existingSpring !== false) {
|
||||||
return new Layout.ForceDirected.Spring(existingSpring.point1, existingSpring.point2, 0.0, 0.0);
|
return new Layout.ForceDirected.Spring(
|
||||||
|
existingSpring.point1,
|
||||||
|
existingSpring.point2, 0.0, 0.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
var to = this.graph.getEdges(edge.target, edge.source);
|
var to = this.graph.getEdges(edge.target, edge.source);
|
||||||
|
|
@ -373,7 +314,9 @@
|
||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
if (existingSpring !== false) {
|
if (existingSpring !== false) {
|
||||||
return new Layout.ForceDirected.Spring(existingSpring.point2, existingSpring.point1, 0.0, 0.0);
|
return new Layout.ForceDirected.Spring(
|
||||||
|
existingSpring.point2,
|
||||||
|
existingSpring.point1, 0.0, 0.0);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.edgeSprings[edge.id] = new Layout.ForceDirected.Spring(
|
this.edgeSprings[edge.id] = new Layout.ForceDirected.Spring(
|
||||||
|
|
@ -416,12 +359,20 @@
|
||||||
if (point1 !== point2)
|
if (point1 !== point2)
|
||||||
{
|
{
|
||||||
var d = point1.p.subtract(point2.p);
|
var d = point1.p.subtract(point2.p);
|
||||||
var distance = d.magnitude() + 0.1; // avoid massive forces at small distances (and divide by zero)
|
// avoid massive forces at small distances (and divide by zero)
|
||||||
|
var distance = d.magnitude() + 0.1;
|
||||||
var direction = d.normalise();
|
var direction = d.normalise();
|
||||||
|
|
||||||
// apply force to each end point
|
// apply force to each end point
|
||||||
point1.applyForce(direction.multiply(this.repulsion).divide(distance * distance * 0.5));
|
point1.applyForce(
|
||||||
point2.applyForce(direction.multiply(this.repulsion).divide(distance * distance * -0.5));
|
direction
|
||||||
|
.multiply(this.repulsion)
|
||||||
|
.divide(distance * distance * 0.5));
|
||||||
|
|
||||||
|
point2.applyForce(
|
||||||
|
direction
|
||||||
|
.multiply(this.repulsion)
|
||||||
|
.divide(distance * distance * -0.5));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -429,13 +380,18 @@
|
||||||
|
|
||||||
Layout.ForceDirected.prototype.applyHookesLaw = function() {
|
Layout.ForceDirected.prototype.applyHookesLaw = function() {
|
||||||
this.eachSpring(function(spring) {
|
this.eachSpring(function(spring) {
|
||||||
var d = spring.point2.p.subtract(spring.point1.p); // the direction of the spring
|
var dir = spring.point2.p.subtract(spring.point1.p);
|
||||||
var displacement = spring.length - d.magnitude();
|
var displacement = spring.length - dir.magnitude();
|
||||||
var direction = d.normalise();
|
var direction = dir.normalise();
|
||||||
|
|
||||||
// apply force to each end point
|
// apply force to each end point
|
||||||
spring.point1.applyForce(direction.multiply(spring.k * displacement * -0.5));
|
spring.point1.applyForce(
|
||||||
spring.point2.applyForce(direction.multiply(spring.k * displacement * 0.5));
|
direction
|
||||||
|
.multiply(spring.k * displacement * -0.5));
|
||||||
|
|
||||||
|
spring.point2.applyForce(
|
||||||
|
direction
|
||||||
|
.multiply(spring.k * displacement * 0.5));
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -449,20 +405,13 @@
|
||||||
|
|
||||||
Layout.ForceDirected.prototype.updateVelocity = function(timestep) {
|
Layout.ForceDirected.prototype.updateVelocity = function(timestep) {
|
||||||
this.eachNode(function(node, point) {
|
this.eachNode(function(node, point) {
|
||||||
// Is this, along with updatePosition below, the only places that your
|
|
||||||
// integration code exist?
|
|
||||||
point.v = point.v.add(point.a.multiply(timestep)).multiply(this.damping);
|
point.v = point.v.add(point.a.multiply(timestep)).multiply(this.damping);
|
||||||
if (point.v.magnitude() > this.maxSpeed) {
|
|
||||||
point.v = point.v.normalise().multiply(this.maxSpeed);
|
|
||||||
}
|
|
||||||
point.a = new Vector(0, 0);
|
point.a = new Vector(0, 0);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
Layout.ForceDirected.prototype.updatePosition = function(timestep) {
|
Layout.ForceDirected.prototype.updatePosition = function(timestep) {
|
||||||
this.eachNode(function(node, point) {
|
this.eachNode(function(node, point) {
|
||||||
// Same question as above; along with updateVelocity, is this all of
|
|
||||||
// your integration code?
|
|
||||||
point.p = point.p.add(point.v.multiply(timestep));
|
point.p = point.p.add(point.v.multiply(timestep));
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
@ -478,60 +427,49 @@
|
||||||
return energy;
|
return energy;
|
||||||
};
|
};
|
||||||
|
|
||||||
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; // stolen from coffeescript, thanks jashkenas! ;-)
|
// stolen from coffeescript, thanks jashkenas! ;-)
|
||||||
|
var __bind = function(fn, me) { return function() {
|
||||||
|
return fn.apply(me, arguments);
|
||||||
|
}; };
|
||||||
|
|
||||||
Springy.requestAnimationFrame = __bind(this.requestAnimationFrame ||
|
Layout.requestAnimationFrame = __bind(window.requestAnimationFrame ||
|
||||||
this.webkitRequestAnimationFrame ||
|
window.webkitRequestAnimationFrame ||
|
||||||
this.mozRequestAnimationFrame ||
|
window.mozRequestAnimationFrame ||
|
||||||
this.oRequestAnimationFrame ||
|
window.oRequestAnimationFrame ||
|
||||||
this.msRequestAnimationFrame ||
|
window.msRequestAnimationFrame ||
|
||||||
(function(callback, element) {
|
(function(callback, element) {
|
||||||
this.setTimeout(callback, 10);
|
window.setTimeout(callback, 10);
|
||||||
}), this);
|
}), window);
|
||||||
|
|
||||||
|
|
||||||
/**
|
// start simulation
|
||||||
* Start simulation if it's not running already.
|
Layout.ForceDirected.prototype.start = function(render, done) {
|
||||||
* In case it's running then the call is ignored, and none of the callbacks passed is ever executed.
|
|
||||||
*/
|
|
||||||
Layout.ForceDirected.prototype.start = function(render, onRenderStop, onRenderStart) {
|
|
||||||
var t = this;
|
var t = this;
|
||||||
|
|
||||||
if (this._started) return;
|
if (this._started) return;
|
||||||
this._started = true;
|
this._started = true;
|
||||||
this._stop = false;
|
|
||||||
|
|
||||||
if (onRenderStart !== undefined) { onRenderStart(); }
|
Layout.requestAnimationFrame(function step() {
|
||||||
|
t.applyCoulombsLaw();
|
||||||
Springy.requestAnimationFrame(function step() {
|
t.applyHookesLaw();
|
||||||
t.tick(0.03);
|
t.attractToCentre();
|
||||||
|
t.updateVelocity(0.03);
|
||||||
|
t.updatePosition(0.03);
|
||||||
|
|
||||||
if (render !== undefined) {
|
if (render !== undefined) {
|
||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
|
|
||||||
// stop simulation when energy of the system goes below a threshold
|
// stop simulation when energy of the system goes below a threshold
|
||||||
if (t._stop || t.totalEnergy() < t.minEnergyThreshold) {
|
if (t.totalEnergy() < 0.01) {
|
||||||
t._started = false;
|
t._started = false;
|
||||||
if (onRenderStop !== undefined) { onRenderStop(); }
|
if (done !== undefined) { done(); }
|
||||||
} else {
|
} else {
|
||||||
Springy.requestAnimationFrame(step);
|
Layout.requestAnimationFrame(step);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
Layout.ForceDirected.prototype.stop = function() {
|
|
||||||
this._stop = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
Layout.ForceDirected.prototype.tick = function(timestep) {
|
|
||||||
this.applyCoulombsLaw();
|
|
||||||
this.applyHookesLaw();
|
|
||||||
this.attractToCentre();
|
|
||||||
this.updateVelocity(timestep);
|
|
||||||
this.updatePosition(timestep);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Find the nearest point to a particular position
|
// Find the nearest point to a particular position
|
||||||
Layout.ForceDirected.prototype.nearest = function(pos) {
|
Layout.ForceDirected.prototype.nearest = function(pos) {
|
||||||
var min = {node: null, point: null, distance: null};
|
var min = {node: null, point: null, distance: null};
|
||||||
|
|
@ -570,12 +508,15 @@
|
||||||
|
|
||||||
var padding = topright.subtract(bottomleft).multiply(0.07); // ~5% padding
|
var padding = topright.subtract(bottomleft).multiply(0.07); // ~5% padding
|
||||||
|
|
||||||
return {bottomleft: bottomleft.subtract(padding), topright: topright.add(padding)};
|
return {
|
||||||
|
bottomleft: bottomleft.subtract(padding),
|
||||||
|
topright: topright.add(padding)
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// Vector
|
// Vector
|
||||||
var Vector = Springy.Vector = function(x, y) {
|
var Vector = function(x, y) {
|
||||||
this.x = x;
|
this.x = x;
|
||||||
this.y = y;
|
this.y = y;
|
||||||
};
|
};
|
||||||
|
|
@ -597,7 +538,9 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
Vector.prototype.divide = function(n) {
|
Vector.prototype.divide = function(n) {
|
||||||
return new Vector((this.x / n) || 0, (this.y / n) || 0); // Avoid divide by zero errors..
|
return new Vector(
|
||||||
|
(this.x / n) || 0,
|
||||||
|
(this.y / n) || 0); // Avoid divide by zero errors..
|
||||||
};
|
};
|
||||||
|
|
||||||
Vector.prototype.magnitude = function() {
|
Vector.prototype.magnitude = function() {
|
||||||
|
|
@ -632,29 +575,12 @@
|
||||||
this.k = k; // spring constant (See Hooke's law) .. how stiff the spring is
|
this.k = k; // spring constant (See Hooke's law) .. how stiff the spring is
|
||||||
};
|
};
|
||||||
|
|
||||||
// Layout.ForceDirected.Spring.prototype.distanceToPoint = function(point)
|
// Renderer handles the layout rendering loop
|
||||||
// {
|
function Renderer(layout, clear, drawEdge, drawNode) {
|
||||||
// // hardcore vector arithmetic.. ohh yeah!
|
|
||||||
// // .. see http://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment/865080#865080
|
|
||||||
// var n = this.point2.p.subtract(this.point1.p).normalise().normal();
|
|
||||||
// var ac = point.p.subtract(this.point1.p);
|
|
||||||
// return Math.abs(ac.x * n.x + ac.y * n.y);
|
|
||||||
// };
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renderer handles the layout rendering loop
|
|
||||||
* @param onRenderStop optional callback function that gets executed whenever rendering stops.
|
|
||||||
* @param onRenderStart optional callback function that gets executed whenever rendering starts.
|
|
||||||
* @param onRenderFrame optional callback function that gets executed after each frame is rendered.
|
|
||||||
*/
|
|
||||||
var Renderer = Springy.Renderer = function(layout, clear, drawEdge, drawNode, onRenderStop, onRenderStart, onRenderFrame) {
|
|
||||||
this.layout = layout;
|
this.layout = layout;
|
||||||
this.clear = clear;
|
this.clear = clear;
|
||||||
this.drawEdge = drawEdge;
|
this.drawEdge = drawEdge;
|
||||||
this.drawNode = drawNode;
|
this.drawNode = drawNode;
|
||||||
this.onRenderStop = onRenderStop;
|
|
||||||
this.onRenderStart = onRenderStart;
|
|
||||||
this.onRenderFrame = onRenderFrame;
|
|
||||||
|
|
||||||
this.layout.graph.addGraphListener(this);
|
this.layout.graph.addGraphListener(this);
|
||||||
}
|
}
|
||||||
|
|
@ -663,17 +589,7 @@
|
||||||
this.start();
|
this.start();
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
Renderer.prototype.start = function() {
|
||||||
* Starts the simulation of the layout in use.
|
|
||||||
*
|
|
||||||
* Note that in case the algorithm is still or already running then the layout that's in use
|
|
||||||
* might silently ignore the call, and your optional <code>done</code> callback is never executed.
|
|
||||||
* At least the built-in ForceDirected layout behaves in this way.
|
|
||||||
*
|
|
||||||
* @param done An optional callback function that gets executed when the springy algorithm stops,
|
|
||||||
* either because it ended or because stop() was called.
|
|
||||||
*/
|
|
||||||
Renderer.prototype.start = function(done) {
|
|
||||||
var t = this;
|
var t = this;
|
||||||
this.layout.start(function render() {
|
this.layout.start(function render() {
|
||||||
t.clear();
|
t.clear();
|
||||||
|
|
@ -685,13 +601,7 @@
|
||||||
t.layout.eachNode(function(node, point) {
|
t.layout.eachNode(function(node, point) {
|
||||||
t.drawNode(node, point.p);
|
t.drawNode(node, point.p);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
if (t.onRenderFrame !== undefined) { t.onRenderFrame(); }
|
|
||||||
}, this.onRenderStop, this.onRenderStart);
|
|
||||||
};
|
|
||||||
|
|
||||||
Renderer.prototype.stop = function() {
|
|
||||||
this.layout.stop();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Array.forEach implementation for IE support..
|
// Array.forEach implementation for IE support..
|
||||||
|
|
@ -699,13 +609,13 @@
|
||||||
if (!Array.prototype.forEach) {
|
if (!Array.prototype.forEach) {
|
||||||
Array.prototype.forEach = function(callback, thisArg) {
|
Array.prototype.forEach = function(callback, thisArg) {
|
||||||
var T, k;
|
var T, k;
|
||||||
if ( this == null ) {
|
if (this === null) {
|
||||||
throw new TypeError( " this is null or not defined" );
|
throw new TypeError(' this is null or not defined');
|
||||||
}
|
}
|
||||||
var O = Object(this);
|
var O = Object(this);
|
||||||
var len = O.length >>> 0; // Hack to convert O.length to a UInt32
|
var len = O.length >>> 0; // Hack to convert O.length to a UInt32
|
||||||
if ( {}.toString.call(callback) != "[object Function]" ) {
|
if ({}.toString.call(callback) != '[object Function]') {
|
||||||
throw new TypeError( callback + " is not a function" );
|
throw new TypeError(callback + ' is not a function');
|
||||||
}
|
}
|
||||||
if (thisArg) {
|
if (thisArg) {
|
||||||
T = thisArg;
|
T = thisArg;
|
||||||
|
|
@ -722,14 +632,3 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
var isEmpty = function(obj) {
|
|
||||||
for (var k in obj) {
|
|
||||||
if (obj.hasOwnProperty(k)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
return Springy;
|
|
||||||
}));
|
|
||||||
|
|
|
||||||
191
springyui.js
191
springyui.js
|
|
@ -26,28 +26,24 @@ Copyright (c) 2010 Dennis Hotson
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
jQuery.fn.springy = function(params) {
|
jQuery.fn.springy = function(params) {
|
||||||
var graph = this.graph = params.graph || new Springy.Graph();
|
var graph = this.graph = params.graph || new Graph();
|
||||||
var nodeFont = "16px Verdana, sans-serif";
|
|
||||||
var edgeFont = "8px Verdana, sans-serif";
|
|
||||||
var stiffness = params.stiffness || 400.0;
|
var stiffness = params.stiffness || 400.0;
|
||||||
var repulsion = params.repulsion || 400.0;
|
var repulsion = params.repulsion || 400.0;
|
||||||
var damping = params.damping || 0.5;
|
var damping = params.damping || 0.5;
|
||||||
var minEnergyThreshold = params.minEnergyThreshold || 0.00001;
|
|
||||||
var nodeSelected = params.nodeSelected || null;
|
var nodeSelected = params.nodeSelected || null;
|
||||||
var nodeImages = {};
|
|
||||||
var edgeLabelsUpright = true;
|
|
||||||
|
|
||||||
var canvas = this[0];
|
var canvas = this[0];
|
||||||
var ctx = canvas.getContext("2d");
|
var ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
var layout = this.layout = new Springy.Layout.ForceDirected(graph, stiffness, repulsion, damping, minEnergyThreshold);
|
var layout = this.layout = new 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 Springy.Vector(-2, -2), topright: new Springy.Vector(2, 2)};
|
var targetBB = {bottomleft: new Vector(-2, -2), topright: new Vector(2, 2)};
|
||||||
|
|
||||||
// auto adjusting bounding box
|
// auto adjusting bounding box
|
||||||
Springy.requestAnimationFrame(function adjust() {
|
Layout.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 = {
|
||||||
|
|
@ -57,22 +53,22 @@ jQuery.fn.springy = function(params) {
|
||||||
.divide(10))
|
.divide(10))
|
||||||
};
|
};
|
||||||
|
|
||||||
Springy.requestAnimationFrame(adjust);
|
Layout.requestAnimationFrame(adjust);
|
||||||
});
|
});
|
||||||
|
|
||||||
// convert to/from screen coordinates
|
// convert to/from screen coordinates
|
||||||
var toScreen = function(p) {
|
toScreen = function(p) {
|
||||||
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 Springy.Vector(sx, sy);
|
return new Vector(sx, sy);
|
||||||
};
|
};
|
||||||
|
|
||||||
var 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 Springy.Vector(px, py);
|
return new Vector(px, py);
|
||||||
};
|
};
|
||||||
|
|
||||||
// half-assed drag and drop
|
// half-assed drag and drop
|
||||||
|
|
@ -81,6 +77,8 @@ jQuery.fn.springy = function(params) {
|
||||||
var dragged = null;
|
var dragged = null;
|
||||||
|
|
||||||
jQuery(canvas).mousedown(function(e) {
|
jQuery(canvas).mousedown(function(e) {
|
||||||
|
jQuery('.actions').hide();
|
||||||
|
|
||||||
var pos = jQuery(this).offset();
|
var pos = jQuery(this).offset();
|
||||||
var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
|
var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
|
||||||
selected = nearest = dragged = layout.nearest(p);
|
selected = nearest = dragged = layout.nearest(p);
|
||||||
|
|
@ -96,17 +94,6 @@ jQuery.fn.springy = function(params) {
|
||||||
renderer.start();
|
renderer.start();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Basic double click handler
|
|
||||||
jQuery(canvas).dblclick(function(e) {
|
|
||||||
var pos = jQuery(this).offset();
|
|
||||||
var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
|
|
||||||
selected = layout.nearest(p);
|
|
||||||
node = selected.node;
|
|
||||||
if (node && node.data && node.data.ondoubleclick) {
|
|
||||||
node.data.ondoubleclick();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
jQuery(canvas).mousemove(function(e) {
|
jQuery(canvas).mousemove(function(e) {
|
||||||
var pos = jQuery(this).offset();
|
var pos = jQuery(this).offset();
|
||||||
var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
|
var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
|
||||||
|
|
@ -124,63 +111,27 @@ jQuery.fn.springy = function(params) {
|
||||||
dragged = null;
|
dragged = null;
|
||||||
});
|
});
|
||||||
|
|
||||||
var getTextWidth = function(node) {
|
Node.prototype.getWidth = function() {
|
||||||
var text = (node.data.label !== undefined) ? node.data.label : node.id;
|
var text = (this.data.label !== undefined) ? this.data.label : this.id;
|
||||||
if (node._width && node._width[text])
|
if (this._width && this._width[text])
|
||||||
return node._width[text];
|
return this._width[text];
|
||||||
|
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
|
ctx.font = '16px Verdana, sans-serif';
|
||||||
var width = ctx.measureText(text).width;
|
var width = ctx.measureText(text).width + 10;
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
node._width || (node._width = {});
|
this._width || (this._width = {});
|
||||||
node._width[text] = width;
|
this._width[text] = width;
|
||||||
|
|
||||||
return width;
|
return width;
|
||||||
};
|
};
|
||||||
|
|
||||||
var getTextHeight = function(node) {
|
Node.prototype.getHeight = function() {
|
||||||
return 16;
|
return 20;
|
||||||
// In a more modular world, this would actually read the font size, but I think leaving it a constant is sufficient for now.
|
|
||||||
// If you change the font size, I'd adjust this too.
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var getImageWidth = function(node) {
|
var renderer = new Renderer(layout,
|
||||||
var width = (node.data.image.width !== undefined) ? node.data.image.width : nodeImages[node.data.image.src].object.width;
|
|
||||||
return width;
|
|
||||||
}
|
|
||||||
|
|
||||||
var getImageHeight = function(node) {
|
|
||||||
var height = (node.data.image.height !== undefined) ? node.data.image.height : nodeImages[node.data.image.src].object.height;
|
|
||||||
return height;
|
|
||||||
}
|
|
||||||
|
|
||||||
Springy.Node.prototype.getHeight = function() {
|
|
||||||
var height;
|
|
||||||
if (this.data.image == undefined) {
|
|
||||||
height = getTextHeight(this);
|
|
||||||
} else {
|
|
||||||
if (this.data.image.src in nodeImages && nodeImages[this.data.image.src].loaded) {
|
|
||||||
height = getImageHeight(this);
|
|
||||||
} else {height = 10;}
|
|
||||||
}
|
|
||||||
return height;
|
|
||||||
}
|
|
||||||
|
|
||||||
Springy.Node.prototype.getWidth = function() {
|
|
||||||
var width;
|
|
||||||
if (this.data.image == undefined) {
|
|
||||||
width = getTextWidth(this);
|
|
||||||
} else {
|
|
||||||
if (this.data.image.src in nodeImages && nodeImages[this.data.image.src].loaded) {
|
|
||||||
width = getImageWidth(this);
|
|
||||||
} else {width = 10;}
|
|
||||||
}
|
|
||||||
return width;
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
||||||
},
|
},
|
||||||
|
|
@ -190,7 +141,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 Springy.Vector(x2-x1, y2-y1);
|
var direction = new 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);
|
||||||
|
|
@ -206,20 +157,16 @@ jQuery.fn.springy = function(params) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//change default to 10.0 to allow text fit between edges
|
var spacing = 6.0;
|
||||||
var spacing = 12.0;
|
|
||||||
|
|
||||||
// Figure out how far off center the line should be drawn
|
// Figure out how far off center the line should be drawn
|
||||||
var offset = normal.multiply(-((total - 1) * spacing) / 2.0 + (n * spacing));
|
var offset = normal.multiply(-((total - 1) * spacing) / 2.0 + (n * spacing));
|
||||||
|
|
||||||
var paddingX = 6;
|
|
||||||
var paddingY = 6;
|
|
||||||
|
|
||||||
var s1 = toScreen(p1).add(offset);
|
var s1 = toScreen(p1).add(offset);
|
||||||
var s2 = toScreen(p2).add(offset);
|
var s2 = toScreen(p2).add(offset);
|
||||||
|
|
||||||
var boxWidth = edge.target.getWidth() + paddingX;
|
var boxWidth = edge.target.getWidth();
|
||||||
var boxHeight = edge.target.getHeight() + paddingY;
|
var boxHeight = edge.target.getHeight();
|
||||||
|
|
||||||
var intersection = intersect_line_box(s1, s2, {x: x2 - boxWidth / 2.0, y: y2 - boxHeight / 2.0}, boxWidth, boxHeight);
|
var intersection = intersect_line_box(s1, s2, {x: x2 - boxWidth / 2.0, y: y2 - boxHeight / 2.0}, boxWidth, boxHeight);
|
||||||
|
|
||||||
|
|
@ -272,22 +219,13 @@ jQuery.fn.springy = function(params) {
|
||||||
|
|
||||||
// label
|
// label
|
||||||
if (edge.data.label !== undefined) {
|
if (edge.data.label !== undefined) {
|
||||||
text = edge.data.label
|
text = edge.data.label;
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.textAlign = "center";
|
ctx.textAlign = 'center';
|
||||||
ctx.textBaseline = "top";
|
ctx.textBaseline = 'top';
|
||||||
ctx.font = (edge.data.font !== undefined) ? edge.data.font : edgeFont;
|
ctx.font = '10px Helvetica, sans-serif';
|
||||||
ctx.fillStyle = stroke;
|
ctx.fillStyle = '#5BA6EC';
|
||||||
var angle = Math.atan2(s2.y - s1.y, s2.x - s1.x);
|
ctx.fillText(text, (x1 + x2) / 2, (y1 + y2) / 2);
|
||||||
var displacement = -8;
|
|
||||||
if (edgeLabelsUpright && (angle > Math.PI/2 || angle < -Math.PI/2)) {
|
|
||||||
displacement = 8;
|
|
||||||
angle += Math.PI;
|
|
||||||
}
|
|
||||||
var textPos = s1.add(s2).divide(2).add(normal.multiply(displacement));
|
|
||||||
ctx.translate(textPos.x, textPos.y);
|
|
||||||
ctx.rotate(angle);
|
|
||||||
ctx.fillText(text, 0,-2);
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -297,57 +235,30 @@ jQuery.fn.springy = function(params) {
|
||||||
|
|
||||||
ctx.save();
|
ctx.save();
|
||||||
|
|
||||||
// Pulled out the padding aspect sso that the size functions could be used in multiple places
|
var boxWidth = node.getWidth();
|
||||||
// These should probably be settable by the user (and scoped higher) but this suffices for now
|
var boxHeight = node.getHeight();
|
||||||
var paddingX = 6;
|
|
||||||
var paddingY = 6;
|
|
||||||
|
|
||||||
var contentWidth = node.getWidth();
|
|
||||||
var contentHeight = node.getHeight();
|
|
||||||
var boxWidth = contentWidth + paddingX;
|
|
||||||
var boxHeight = contentHeight + paddingY;
|
|
||||||
|
|
||||||
// clear background
|
// clear background
|
||||||
ctx.clearRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);
|
ctx.clearRect(s.x - boxWidth / 2, s.y - 10, boxWidth, 20);
|
||||||
|
|
||||||
// fill background
|
// fill background
|
||||||
if (selected !== null && selected.node !== null && selected.node.id === node.id) {
|
if (selected !== null && nearest.node !== null && selected.node.id === node.id) {
|
||||||
ctx.fillStyle = "#FFFFE0";
|
ctx.fillStyle = '#FFFFE0';
|
||||||
} else if (nearest !== null && nearest.node !== null && nearest.node.id === node.id) {
|
} else if (nearest !== null && nearest.node !== null && nearest.node.id === node.id) {
|
||||||
ctx.fillStyle = "#EEEEEE";
|
ctx.fillStyle = '#EEEEEE';
|
||||||
} else {
|
} else {
|
||||||
ctx.fillStyle = "#FFFFFF";
|
ctx.fillStyle = '#FFFFFF';
|
||||||
}
|
}
|
||||||
ctx.fillRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);
|
ctx.fillRect(s.x - boxWidth / 2, s.y - 10, boxWidth, 20);
|
||||||
|
|
||||||
if (node.data.image == undefined) {
|
ctx.textAlign = 'left';
|
||||||
ctx.textAlign = "left";
|
ctx.textBaseline = 'top';
|
||||||
ctx.textBaseline = "top";
|
ctx.font = '16px Verdana, sans-serif';
|
||||||
ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
|
ctx.fillStyle = '#000000';
|
||||||
ctx.fillStyle = (node.data.color !== undefined) ? node.data.color : "#000000";
|
ctx.font = '16px Verdana, sans-serif';
|
||||||
var text = (node.data.label !== undefined) ? node.data.label : node.id;
|
var text = (node.data.label !== undefined) ? node.data.label : node.id;
|
||||||
ctx.fillText(text, s.x - contentWidth/2, s.y - contentHeight/2);
|
ctx.fillText(text, s.x - boxWidth / 2 + 5, s.y - 8);
|
||||||
} else {
|
|
||||||
// Currently we just ignore any labels if the image object is set. One might want to extend this logic to allow for both, or other composite nodes.
|
|
||||||
var src = node.data.image.src; // There should probably be a sanity check here too, but un-src-ed images aren't exaclty a disaster.
|
|
||||||
if (src in nodeImages) {
|
|
||||||
if (nodeImages[src].loaded) {
|
|
||||||
// Our image is loaded, so it's safe to draw
|
|
||||||
ctx.drawImage(nodeImages[src].object, s.x - contentWidth/2, s.y - contentHeight/2, contentWidth, contentHeight);
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
// First time seeing an image with this src address, so add it to our set of image objects
|
|
||||||
// Note: we index images by their src to avoid making too many duplicates
|
|
||||||
nodeImages[src] = {};
|
|
||||||
var img = new Image();
|
|
||||||
nodeImages[src].object = img;
|
|
||||||
img.addEventListener("load", function () {
|
|
||||||
// HTMLImageElement objects are very finicky about being used before they are loaded, so we set a flag when it is done
|
|
||||||
nodeImages[src].loaded = true;
|
|
||||||
});
|
|
||||||
img.src = src;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
@ -370,7 +281,7 @@ jQuery.fn.springy = function(params) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return new Springy.Vector(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));
|
return new 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) {
|
||||||
|
|
@ -389,6 +300,6 @@ jQuery.fn.springy = function(params) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
}
|
};
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user