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

Consistent brace style

Browse Source
This commit is contained in:
Dennis Hotson 2011-08-15 14:09:45 +10:00
parent 8f869d427a
commit a918da30a4
2 changed files with 111 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
springy.js
View File

@ -23,8 +23,7 @@ Copyright (c) 2010 Dennis Hotson
OTHER DEALINGS IN THE SOFTWARE. OTHER DEALINGS IN THE SOFTWARE.
*/ */
var Graph = function() var Graph = function() {
{
this.nodeSet = {}; this.nodeSet = {};
this.nodes = []; this.nodes = [];
this.edges = []; this.edges = [];
@ -35,24 +34,20 @@ var Graph = function()
this.eventListeners = []; this.eventListeners = [];
}; };
var Node = function(id, data) var Node = function(id, data) {
{
this.id = id; this.id = id;
this.data = typeof(data) !== 'undefined' ? data : {}; this.data = typeof(data) !== 'undefined' ? data : {};
}; };
var 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;
this.data = typeof(data) !== 'undefined' ? data : {}; this.data = typeof(data) !== 'undefined' ? data : {};
}; };
Graph.prototype.addNode = function(node) Graph.prototype.addNode = function(node) {
{ if (typeof(this.nodeSet[node.id]) === 'undefined') {
if (typeof(this.nodeSet[node.id]) === 'undefined')
{
this.nodes.push(node); this.nodes.push(node);
} }
@ -62,34 +57,29 @@ Graph.prototype.addNode = function(node)
return node; return node;
}; };
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) {
if (edge.id === e.id) { exists = true; } if (edge.id === e.id) { exists = true; }
}); });
if (!exists) if (!exists) {
{
this.edges.push(edge); this.edges.push(edge);
} }
if (typeof(this.adjacency[edge.source.id]) === 'undefined') if (typeof(this.adjacency[edge.source.id]) === 'undefined') {
{
this.adjacency[edge.source.id] = {}; this.adjacency[edge.source.id] = {};
} }
if (typeof(this.adjacency[edge.source.id][edge.target.id]) === 'undefined') if (typeof(this.adjacency[edge.source.id][edge.target.id]) === 'undefined') {
{
this.adjacency[edge.source.id][edge.target.id] = []; this.adjacency[edge.source.id][edge.target.id] = [];
} }
exists = false; exists = false;
this.adjacency[edge.source.id][edge.target.id].forEach(function(e){ this.adjacency[edge.source.id][edge.target.id].forEach(function(e) {
if (edge.id === e.id) { exists = true; } if (edge.id === e.id) { exists = true; }
}); });
if (!exists) if (!exists) {
{
this.adjacency[edge.source.id][edge.target.id].push(edge); this.adjacency[edge.source.id][edge.target.id].push(edge);
} }
@ -97,26 +87,22 @@ Graph.prototype.addEdge = function(edge)
return edge; return edge;
}; };
Graph.prototype.newNode = function(data) Graph.prototype.newNode = function(data) {
{
var node = new Node(this.nextNodeId++, data); var node = new Node(this.nextNodeId++, data);
this.addNode(node); this.addNode(node);
return node; return node;
}; };
Graph.prototype.newEdge = function(source, target, data) Graph.prototype.newEdge = function(source, target, data) {
{
var edge = new Edge(this.nextEdgeId++, source, target, data); var edge = new Edge(this.nextEdgeId++, source, target, data);
this.addEdge(edge); this.addEdge(edge);
return edge; return edge;
}; };
// 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 (typeof(this.adjacency[node1.id]) !== 'undefined' if (typeof(this.adjacency[node1.id]) !== 'undefined'
&& typeof(this.adjacency[node1.id][node2.id]) !== 'undefined') && typeof(this.adjacency[node1.id][node2.id]) !== 'undefined') {
{
return this.adjacency[node1.id][node2.id]; return this.adjacency[node1.id][node2.id];
} }
@ -124,25 +110,20 @@ Graph.prototype.getEdges = function(node1, node2)
}; };
// remove a node and it's associated edges from the graph // remove a node and it's associated edges from the graph
Graph.prototype.removeNode = function(node) Graph.prototype.removeNode = function(node) {
{ if (typeof(this.nodeSet[node.id]) !== 'undefined') {
if (typeof(this.nodeSet[node.id]) !== 'undefined')
{
delete this.nodeSet[node.id]; delete this.nodeSet[node.id];
} }
for (var i = this.nodes.length - 1; i >= 0; i--) for (var i = this.nodes.length - 1; i >= 0; i--) {
{ if (this.nodes[i].id === node.id) {
if (this.nodes[i].id === node.id)
{
this.nodes.splice(i, 1); this.nodes.splice(i, 1);
} }
} }
var tmpEdges = this.edges.slice(); var tmpEdges = this.edges.slice();
tmpEdges.forEach(function(e) { tmpEdges.forEach(function(e) {
if (e.source.id === node.id || e.target.id === node.id) if (e.source.id === node.id || e.target.id === node.id) {
{
this.removeEdge(e); this.removeEdge(e);
} }
}, this); }, this);
@ -152,26 +133,19 @@ Graph.prototype.removeNode = function(node)
// remove a node and it's associated edges from the graph // remove a node and it's associated edges from the graph
Graph.prototype.removeEdge = function(edge) Graph.prototype.removeEdge = function(edge) {
{ for (var i = this.edges.length - 1; i >= 0; i--) {
for (var i = this.edges.length - 1; i >= 0; i--) if (this.edges[i].id === edge.id) {
{
if (this.edges[i].id === edge.id)
{
this.edges.splice(i, 1); this.edges.splice(i, 1);
} }
} }
for (var x in this.adjacency) for (var x in this.adjacency) {
{ for (var y in this.adjacency[x]) {
for (var y in this.adjacency[x])
{
var edges = this.adjacency[x][y]; var edges = this.adjacency[x][y];
for (var j=edges.length - 1; j>=0; j--) for (var j=edges.length - 1; j>=0; j--) {
{ if (this.adjacency[x][y][j].id === edge.id) {
if (this.adjacency[x][y][j].id === edge.id)
{
this.adjacency[x][y].splice(j, 1); this.adjacency[x][y].splice(j, 1);
} }
} }
@ -192,8 +166,7 @@ var o = {
] ]
} }
*/ */
Graph.prototype.merge = function(data) Graph.prototype.merge = function(data) {
{
var nodes = []; var nodes = [];
data.nodes.forEach(function(n) { data.nodes.forEach(function(n) {
nodes.push(this.addNode(new Node(n.id, n.data))); nodes.push(this.addNode(new Node(n.id, n.data)));
@ -214,36 +187,30 @@ Graph.prototype.merge = function(data)
}, this); }, this);
}; };
Graph.prototype.filterNodes = function(fn) Graph.prototype.filterNodes = function(fn) {
{
var tmpNodes = this.nodes.slice(); var tmpNodes = this.nodes.slice();
tmpNodes.forEach(function(n) { tmpNodes.forEach(function(n) {
if (!fn(n)) if (!fn(n)) {
{
this.removeNode(n); this.removeNode(n);
} }
}, this); }, this);
}; };
Graph.prototype.filterEdges = function(fn) Graph.prototype.filterEdges = function(fn) {
{
var tmpEdges = this.edges.slice(); var tmpEdges = this.edges.slice();
tmpEdges.forEach(function(e) { tmpEdges.forEach(function(e) {
if (!fn(e)) if (!fn(e)) {
{
this.removeEdge(e); this.removeEdge(e);
} }
}, this); }, this);
}; };
Graph.prototype.addGraphListener = function(obj) Graph.prototype.addGraphListener = function(obj) {
{
this.eventListeners.push(obj); this.eventListeners.push(obj);
}; };
Graph.prototype.notify = function() Graph.prototype.notify = function() {
{
this.eventListeners.forEach(function(obj){ this.eventListeners.forEach(function(obj){
obj.graphChanged(); obj.graphChanged();
}); });
@ -251,8 +218,7 @@ Graph.prototype.notify = function()
// ----------- // -----------
var Layout = {}; var Layout = {};
Layout.ForceDirected = function(graph, stiffness, repulsion, damping) 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
@ -260,14 +226,10 @@ Layout.ForceDirected = function(graph, stiffness, repulsion, damping)
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
this.intervalId = null;
}; };
Layout.ForceDirected.prototype.point = function(node) Layout.ForceDirected.prototype.point = function(node) {
{ if (typeof(this.nodePoints[node.id]) === 'undefined') {
if (typeof(this.nodePoints[node.id]) === 'undefined')
{
var mass = typeof(node.data.mass) !== 'undefined' ? node.data.mass : 1.0; var mass = typeof(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);
} }
@ -275,16 +237,14 @@ Layout.ForceDirected.prototype.point = function(node)
return this.nodePoints[node.id]; return this.nodePoints[node.id];
}; };
Layout.ForceDirected.prototype.spring = function(edge) Layout.ForceDirected.prototype.spring = function(edge) {
{ if (typeof(this.edgeSprings[edge.id]) === 'undefined') {
if (typeof(this.edgeSprings[edge.id]) === 'undefined')
{
var length = typeof(edge.data.length) !== 'undefined' ? edge.data.length : 1.0; var length = typeof(edge.data.length) !== 'undefined' ? edge.data.length : 1.0;
var existingSpring = false; var existingSpring = false;
var from = this.graph.getEdges(edge.source, edge.target); var from = this.graph.getEdges(edge.source, edge.target);
from.forEach(function(e){ from.forEach(function(e) {
if (existingSpring === false && typeof(this.edgeSprings[e.id]) !== 'undefined') { if (existingSpring === false && typeof(this.edgeSprings[e.id]) !== 'undefined') {
existingSpring = this.edgeSprings[e.id]; existingSpring = this.edgeSprings[e.id];
} }
@ -314,8 +274,7 @@ Layout.ForceDirected.prototype.spring = function(edge)
}; };
// callback should accept two arguments: Node, Point // callback should accept two arguments: Node, Point
Layout.ForceDirected.prototype.eachNode = function(callback) Layout.ForceDirected.prototype.eachNode = function(callback) {
{
var t = this; var t = this;
this.graph.nodes.forEach(function(n){ this.graph.nodes.forEach(function(n){
callback.call(t, n, t.point(n)); callback.call(t, n, t.point(n));
@ -323,8 +282,7 @@ Layout.ForceDirected.prototype.eachNode = function(callback)
}; };
// callback should accept two arguments: Edge, Spring // callback should accept two arguments: Edge, Spring
Layout.ForceDirected.prototype.eachEdge = function(callback) Layout.ForceDirected.prototype.eachEdge = function(callback) {
{
var t = this; var t = this;
this.graph.edges.forEach(function(e){ this.graph.edges.forEach(function(e){
callback.call(t, e, t.spring(e)); callback.call(t, e, t.spring(e));
@ -332,8 +290,7 @@ Layout.ForceDirected.prototype.eachEdge = function(callback)
}; };
// callback should accept one argument: Spring // callback should accept one argument: Spring
Layout.ForceDirected.prototype.eachSpring = function(callback) Layout.ForceDirected.prototype.eachSpring = function(callback) {
{
var t = this; var t = this;
this.graph.edges.forEach(function(e){ this.graph.edges.forEach(function(e){
callback.call(t, t.spring(e)); callback.call(t, t.spring(e));
@ -342,8 +299,7 @@ Layout.ForceDirected.prototype.eachSpring = function(callback)
// Physics stuff // Physics stuff
Layout.ForceDirected.prototype.applyCoulombsLaw = function() Layout.ForceDirected.prototype.applyCoulombsLaw = function() {
{
this.eachNode(function(n1, point1) { this.eachNode(function(n1, point1) {
this.eachNode(function(n2, point2) { this.eachNode(function(n2, point2) {
if (point1 !== point2) if (point1 !== point2)
@ -360,8 +316,7 @@ Layout.ForceDirected.prototype.applyCoulombsLaw = function()
}); });
}; };
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 d = spring.point2.p.subtract(spring.point1.p); // the direction of the spring
var displacement = spring.length - d.magnitude(); var displacement = spring.length - d.magnitude();
@ -373,8 +328,7 @@ Layout.ForceDirected.prototype.applyHookesLaw = function()
}); });
}; };
Layout.ForceDirected.prototype.attractToCentre = function() Layout.ForceDirected.prototype.attractToCentre = function() {
{
this.eachNode(function(node, point) { this.eachNode(function(node, point) {
var direction = point.p.multiply(-1.0); var direction = point.p.multiply(-1.0);
point.applyForce(direction.multiply(this.repulsion / 50.0)); point.applyForce(direction.multiply(this.repulsion / 50.0));
@ -382,23 +336,20 @@ Layout.ForceDirected.prototype.attractToCentre = function()
}; };
Layout.ForceDirected.prototype.updateVelocity = function(timestep) Layout.ForceDirected.prototype.updateVelocity = function(timestep) {
{
this.eachNode(function(node, point) { this.eachNode(function(node, point) {
point.v = point.v.add(point.f.multiply(timestep)).multiply(this.damping); point.v = point.v.add(point.f.multiply(timestep)).multiply(this.damping);
point.f = new Vector(0,0); point.f = 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) {
point.p = point.p.add(point.v.multiply(timestep)); point.p = point.p.add(point.v.multiply(timestep));
}); });
}; };
Layout.ForceDirected.prototype.totalEnergy = function(timestep) Layout.ForceDirected.prototype.totalEnergy = function(timestep) {
{
var energy = 0.0; var energy = 0.0;
this.eachNode(function(node, point) { this.eachNode(function(node, point) {
var speed = point.v.magnitude(); var speed = point.v.magnitude();
@ -408,63 +359,54 @@ Layout.ForceDirected.prototype.totalEnergy = function(timestep)
return energy; return energy;
}; };
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Layout.requestAnimationFrame = __bind(window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, interval);
}, window);
// start simulation // start simulation
Layout.ForceDirected.prototype.start = function(interval, render, done) Layout.ForceDirected.prototype.start = function(interval, render, done) {
{
var t = this; var t = this;
if (this._started) return; if (this._started) return;
this._started = true; this._started = true;
if (this.intervalId !== null) { Layout.requestAnimationFrame(function step() {
return; // already running
}
var requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, interval);
};
requestAnimFrame(function step() {
t.applyCoulombsLaw(); t.applyCoulombsLaw();
t.applyHookesLaw(); t.applyHookesLaw();
t.attractToCentre(); t.attractToCentre();
t.updateVelocity(0.03); t.updateVelocity(0.03);
t.updatePosition(0.03); t.updatePosition(0.03);
if (typeof(render) !== 'undefined') { render(); } if (typeof(render) !== 'undefined')
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.totalEnergy() < 0.01) if (t.totalEnergy() < 0.01) {
{
t._started = false; t._started = false;
if (typeof(done) !== 'undefined') { done(); } if (typeof(done) !== 'undefined') { done(); }
} } else {
else Layout.requestAnimationFrame(step);
{
requestAnimFrame(step);
} }
}); });
}; };
// 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};
var t = this; var t = this;
this.graph.nodes.forEach(function(n){ this.graph.nodes.forEach(function(n){
var point = t.point(n); var point = t.point(n);
var distance = point.p.subtract(pos).magnitude(); var distance = point.p.subtract(pos).magnitude();
if (min.distance === null || distance < min.distance) if (min.distance === null || distance < min.distance) {
{
min = {node: n, point: point, distance: distance}; min = {node: n, point: point, distance: distance};
} }
}); });
@ -473,8 +415,7 @@ Layout.ForceDirected.prototype.nearest = function(pos)
}; };
// returns [bottomleft, topright] // returns [bottomleft, topright]
Layout.ForceDirected.prototype.getBoundingBox = function() Layout.ForceDirected.prototype.getBoundingBox = function() {
{
var bottomleft = new Vector(-2,-2); var bottomleft = new Vector(-2,-2);
var topright = new Vector(2,2); var topright = new Vector(2,2);
@ -493,76 +434,64 @@ Layout.ForceDirected.prototype.getBoundingBox = function()
} }
}); });
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
Vector = function(x, y) Vector = function(x, y) {
{
this.x = x; this.x = x;
this.y = y; this.y = y;
}; };
Vector.random = function() Vector.random = function() {
{
return new Vector(10.0 * (Math.random() - 0.5), 10.0 * (Math.random() - 0.5)); return new Vector(10.0 * (Math.random() - 0.5), 10.0 * (Math.random() - 0.5));
}; };
Vector.prototype.add = function(v2) Vector.prototype.add = function(v2) {
{
return new Vector(this.x + v2.x, this.y + v2.y); return new Vector(this.x + v2.x, this.y + v2.y);
}; };
Vector.prototype.subtract = function(v2) Vector.prototype.subtract = function(v2) {
{
return new Vector(this.x - v2.x, this.y - v2.y); return new Vector(this.x - v2.x, this.y - v2.y);
}; };
Vector.prototype.multiply = function(n) Vector.prototype.multiply = function(n) {
{
return new Vector(this.x * n, this.y * n); return new Vector(this.x * n, this.y * n);
}; };
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);
}; };
Vector.prototype.magnitude = function() Vector.prototype.magnitude = function() {
{
return Math.sqrt(this.x*this.x + this.y*this.y); return Math.sqrt(this.x*this.x + this.y*this.y);
}; };
Vector.prototype.normal = function() Vector.prototype.normal = function() {
{
return new Vector(-this.y, this.x); return new Vector(-this.y, this.x);
}; };
Vector.prototype.normalise = function() Vector.prototype.normalise = function() {
{
return this.divide(this.magnitude()); return this.divide(this.magnitude());
}; };
// Point // Point
Layout.ForceDirected.Point = function(position, mass) Layout.ForceDirected.Point = function(position, mass) {
{
this.p = position; // position this.p = position; // position
this.m = mass; // mass this.m = mass; // mass
this.v = new Vector(0, 0); // velocity this.v = new Vector(0, 0); // velocity
this.f = new Vector(0, 0); // force this.f = new Vector(0, 0); // force
}; };
Layout.ForceDirected.Point.prototype.applyForce = function(force) Layout.ForceDirected.Point.prototype.applyForce = function(force) {
{
this.f = this.f.add(force.divide(this.m)); this.f = this.f.add(force.divide(this.m));
}; };
// Spring // Spring
Layout.ForceDirected.Spring = function(point1, point2, length, k) Layout.ForceDirected.Spring = function(point1, point2, length, k) {
{
this.point1 = point1; this.point1 = point1;
this.point2 = point2; this.point2 = point2;
this.length = length; // spring length at rest this.length = length; // spring length at rest
@ -579,8 +508,7 @@ Layout.ForceDirected.Spring = function(point1, point2, length, k)
// }; // };
// Renderer handles the layout rendering loop // Renderer handles the layout rendering loop
function Renderer(interval, layout, clear, drawEdge, drawNode) function Renderer(interval, layout, clear, drawEdge, drawNode) {
{
this.interval = interval; this.interval = interval;
this.layout = layout; this.layout = layout;
this.clear = clear; this.clear = clear;
@ -590,13 +518,11 @@ function Renderer(interval, layout, clear, drawEdge, drawNode)
this.layout.graph.addGraphListener(this); this.layout.graph.addGraphListener(this);
} }
Renderer.prototype.graphChanged = function(e) Renderer.prototype.graphChanged = function(e) {
{
this.start(); this.start();
}; };
Renderer.prototype.start = function() Renderer.prototype.start = function() {
{
var t = this; var t = this;
this.layout.start(50, function render() { this.layout.start(50, function render() {
t.clear(); t.clear();

78
springyui.js
View File

@ -26,10 +26,7 @@ Copyright (c) 2010 Dennis Hotson
(function() { (function() {
jQuery.fn.springy = function(params) { jQuery.fn.springy = function(params) {
var graph = params.graph; var graph = params.graph || new Graph();
if(!graph){
return;
}
var stiffness = params.stiffness || 400.0; var stiffness = params.stiffness || 400.0;
var repulsion = params.repulsion || 400.0; var repulsion = params.repulsion || 400.0;
@ -39,22 +36,12 @@ jQuery.fn.springy = function(params) {
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
var layout = new Layout.ForceDirected(graph, stiffness, repulsion, damping); var layout = new Layout.ForceDirected(graph, stiffness, repulsion, damping);
var requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 10);
};
// 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 Vector(-2, -2), topright: new Vector(2, 2)};
// auto adjusting bounding box // auto adjusting bounding box
requestAnimFrame(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 = {
@ -64,7 +51,7 @@ jQuery.fn.springy = function(params) {
.divide(10)) .divide(10))
}; };
requestAnimFrame(adjust); Layout.requestAnimationFrame(adjust);
}); });
// convert to/from screen coordinates // convert to/from screen coordinates
@ -87,28 +74,26 @@ jQuery.fn.springy = function(params) {
var nearest = null; var nearest = null;
var dragged = null; var dragged = null;
jQuery(canvas).mousedown(function(e){ jQuery(canvas).mousedown(function(e) {
jQuery('.actions').hide(); 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);
if (selected.node !== null) if (selected.node !== null) {
{
dragged.point.m = 10000.0; dragged.point.m = 10000.0;
} }
renderer.start(); renderer.start();
}); });
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});
nearest = layout.nearest(p); nearest = layout.nearest(p);
if (dragged !== null && dragged.node !== null) if (dragged !== null && dragged.node !== null) {
{
dragged.point.p.x = p.x; dragged.point.p.x = p.x;
dragged.point.p.y = p.y; dragged.point.p.y = p.y;
} }
@ -116,7 +101,7 @@ jQuery.fn.springy = function(params) {
renderer.start(); renderer.start();
}); });
jQuery(window).bind('mouseup',function(e){ jQuery(window).bind('mouseup',function(e) {
dragged = null; dragged = null;
}); });
@ -141,12 +126,10 @@ jQuery.fn.springy = function(params) {
}; };
var renderer = new Renderer(1, layout, var renderer = new Renderer(1, layout,
function clear() function clear() {
{
ctx.clearRect(0,0,canvas.width,canvas.height); ctx.clearRect(0,0,canvas.width,canvas.height);
}, },
function drawEdge(edge, p1, p2) function drawEdge(edge, p1, p2) {
{
var x1 = toScreen(p1).x; var x1 = toScreen(p1).x;
var y1 = toScreen(p1).y; var y1 = toScreen(p1).y;
var x2 = toScreen(p2).x; var x2 = toScreen(p2).x;
@ -160,18 +143,17 @@ jQuery.fn.springy = function(params) {
var total = from.length + to.length; var total = from.length + to.length;
// Figure out edge's position in relation to other edges between the same nodes
var n = 0; var n = 0;
for (var i=0; i<from.length; i++) for (var i=0; i<from.length; i++) {
{ if (from[i].id === edge.id) {
if (from[i].id === edge.id)
{
n = i; n = i;
} }
} }
var spacing = 6.0; var spacing = 6.0;
// Figure out how far off centre 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 s1 = toScreen(p1).add(offset); var s1 = toScreen(p1).add(offset);
@ -186,7 +168,6 @@ jQuery.fn.springy = function(params) {
intersection = s2; intersection = s2;
} }
var stroke = typeof(edge.data.color) !== 'undefined' ? edge.data.color : '#000000'; var stroke = typeof(edge.data.color) !== 'undefined' ? edge.data.color : '#000000';
var arrowWidth; var arrowWidth;
@ -202,12 +183,9 @@ jQuery.fn.springy = function(params) {
// line // line
var lineEnd; var lineEnd;
if (directional) if (directional) {
{
lineEnd = intersection.subtract(direction.normalise().multiply(arrowLength * 0.5)); lineEnd = intersection.subtract(direction.normalise().multiply(arrowLength * 0.5));
} } else {
else
{
lineEnd = s2; lineEnd = s2;
} }
@ -219,8 +197,7 @@ jQuery.fn.springy = function(params) {
// arrow // arrow
if (directional) if (directional) {
{
ctx.save(); ctx.save();
ctx.fillStyle = stroke; ctx.fillStyle = stroke;
ctx.translate(intersection.x, intersection.y); ctx.translate(intersection.x, intersection.y);
@ -235,8 +212,7 @@ jQuery.fn.springy = function(params) {
ctx.restore(); ctx.restore();
} }
}, },
function drawNode(node, p) function drawNode(node, p) {
{
var s = toScreen(p); var s = toScreen(p);
ctx.save(); ctx.save();
@ -248,16 +224,11 @@ jQuery.fn.springy = function(params) {
ctx.clearRect(s.x - boxWidth/2, s.y - 10, boxWidth, 20); ctx.clearRect(s.x - boxWidth/2, s.y - 10, boxWidth, 20);
// fill background // fill background
if (selected !== null && nearest.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";
} }
@ -277,10 +248,8 @@ jQuery.fn.springy = function(params) {
renderer.start(); renderer.start();
// helpers for figuring out where to draw arrows // helpers for figuring out where to draw arrows
function intersect_line_line(p1, p2, p3, p4) function intersect_line_line(p1, p2, p3, p4) {
{
var denom = ((p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y)); var denom = ((p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y));
// lines are parallel // lines are parallel
@ -298,8 +267,7 @@ jQuery.fn.springy = function(params) {
return new 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) {
{
var tl = {x: p3.x, y: p3.y}; var tl = {x: p3.x, y: p3.y};
var tr = {x: p3.x + w, y: p3.y}; var tr = {x: p3.x + w, y: p3.y};
var bl = {x: p3.x, y: p3.y + h}; var bl = {x: p3.x, y: p3.y + h};