Merge branch 'master' of https://github.com/dhotson/springy
This commit is contained in:
Cody
commit
4b66715613
|
|
@ -4,7 +4,6 @@
|
|||
<script src="springy.js"></script>
|
||||
<script src="springyui.js"></script>
|
||||
<script>
|
||||
|
||||
var graph = new Graph();
|
||||
|
||||
var dennis = graph.newNode({label: 'Dennis'});
|
||||
|
|
@ -29,10 +28,11 @@ graph.newEdge(barbara, timothy, {color: '#6A4A3C'});
|
|||
graph.newEdge(dennis, bianca, {color: '#CC333F'});
|
||||
graph.newEdge(bianca, monty, {color: '#EB6841'});
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
jQuery('#springydemo').springy({ 'graph': graph });
|
||||
jQuery(function(){
|
||||
var springy = jQuery('#springydemo').springy({
|
||||
graph: graph
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<canvas id="springydemo" width="640" height="480" />
|
||||
|
|
|
|||
251
springy.js
251
springy.js
|
|
@ -23,8 +23,7 @@ Copyright (c) 2010 Dennis Hotson
|
|||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
var Graph = function()
|
||||
{
|
||||
var Graph = function() {
|
||||
this.nodeSet = {};
|
||||
this.nodes = [];
|
||||
this.edges = [];
|
||||
|
|
@ -35,24 +34,20 @@ var Graph = function()
|
|||
this.eventListeners = [];
|
||||
};
|
||||
|
||||
Node = function(id, data)
|
||||
{
|
||||
var Node = function(id, data) {
|
||||
this.id = id;
|
||||
this.data = typeof(data) !== 'undefined' ? data : {};
|
||||
};
|
||||
|
||||
Edge = function(id, source, target, data)
|
||||
{
|
||||
var Edge = function(id, source, target, data) {
|
||||
this.id = id;
|
||||
this.source = source;
|
||||
this.target = target;
|
||||
this.data = typeof(data) !== 'undefined' ? data : {};
|
||||
};
|
||||
|
||||
Graph.prototype.addNode = function(node)
|
||||
{
|
||||
if (typeof(this.nodeSet[node.id]) === 'undefined')
|
||||
{
|
||||
Graph.prototype.addNode = function(node) {
|
||||
if (typeof(this.nodeSet[node.id]) === 'undefined') {
|
||||
this.nodes.push(node);
|
||||
}
|
||||
|
||||
|
|
@ -62,34 +57,29 @@ Graph.prototype.addNode = function(node)
|
|||
return node;
|
||||
};
|
||||
|
||||
Graph.prototype.addEdge = function(edge)
|
||||
{
|
||||
Graph.prototype.addEdge = function(edge) {
|
||||
var exists = false;
|
||||
this.edges.forEach(function(e){
|
||||
this.edges.forEach(function(e) {
|
||||
if (edge.id === e.id) { exists = true; }
|
||||
});
|
||||
|
||||
if (!exists)
|
||||
{
|
||||
if (!exists) {
|
||||
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] = {};
|
||||
}
|
||||
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] = [];
|
||||
}
|
||||
|
||||
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 (!exists)
|
||||
{
|
||||
if (!exists) {
|
||||
this.adjacency[edge.source.id][edge.target.id].push(edge);
|
||||
}
|
||||
|
||||
|
|
@ -97,26 +87,22 @@ Graph.prototype.addEdge = function(edge)
|
|||
return edge;
|
||||
};
|
||||
|
||||
Graph.prototype.newNode = function(data)
|
||||
{
|
||||
Graph.prototype.newNode = function(data) {
|
||||
var node = new Node(this.nextNodeId++, data);
|
||||
this.addNode(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);
|
||||
this.addEdge(edge);
|
||||
return edge;
|
||||
};
|
||||
|
||||
// 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'
|
||||
&& typeof(this.adjacency[node1.id][node2.id]) !== 'undefined')
|
||||
{
|
||||
&& typeof(this.adjacency[node1.id][node2.id]) !== 'undefined') {
|
||||
return this.adjacency[node1.id][node2.id];
|
||||
}
|
||||
|
||||
|
|
@ -124,17 +110,13 @@ Graph.prototype.getEdges = function(node1, node2)
|
|||
};
|
||||
|
||||
// remove a node and it's associated edges from the graph
|
||||
Graph.prototype.removeNode = function(node)
|
||||
{
|
||||
if (typeof(this.nodeSet[node.id]) !== 'undefined')
|
||||
{
|
||||
Graph.prototype.removeNode = function(node) {
|
||||
if (typeof(this.nodeSet[node.id]) !== 'undefined') {
|
||||
delete this.nodeSet[node.id];
|
||||
}
|
||||
|
||||
for (var i = this.nodes.length - 1; i >= 0; i--)
|
||||
{
|
||||
if (this.nodes[i].id === node.id)
|
||||
{
|
||||
for (var i = this.nodes.length - 1; i >= 0; i--) {
|
||||
if (this.nodes[i].id === node.id) {
|
||||
this.nodes.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -148,8 +130,7 @@ Graph.prototype.detachNode = function(node)
|
|||
{
|
||||
var tmpEdges = this.edges.slice();
|
||||
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);
|
||||
|
|
@ -158,26 +139,19 @@ Graph.prototype.detachNode = function(node)
|
|||
};
|
||||
|
||||
// remove a node and it's associated edges from the graph
|
||||
Graph.prototype.removeEdge = function(edge)
|
||||
{
|
||||
for (var i = this.edges.length - 1; i >= 0; i--)
|
||||
{
|
||||
if (this.edges[i].id === edge.id)
|
||||
{
|
||||
Graph.prototype.removeEdge = function(edge) {
|
||||
for (var i = this.edges.length - 1; i >= 0; i--) {
|
||||
if (this.edges[i].id === edge.id) {
|
||||
this.edges.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
for (var x in this.adjacency)
|
||||
{
|
||||
for (var y in this.adjacency[x])
|
||||
{
|
||||
for (var x in this.adjacency) {
|
||||
for (var y in this.adjacency[x]) {
|
||||
var edges = this.adjacency[x][y];
|
||||
|
||||
for (var j=edges.length - 1; j>=0; j--)
|
||||
{
|
||||
if (this.adjacency[x][y][j].id === edge.id)
|
||||
{
|
||||
for (var j=edges.length - 1; j>=0; j--) {
|
||||
if (this.adjacency[x][y][j].id === edge.id) {
|
||||
this.adjacency[x][y].splice(j, 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -198,8 +172,7 @@ var o = {
|
|||
]
|
||||
}
|
||||
*/
|
||||
Graph.prototype.merge = function(data)
|
||||
{
|
||||
Graph.prototype.merge = function(data) {
|
||||
var nodes = [];
|
||||
data.nodes.forEach(function(n) {
|
||||
nodes.push(this.addNode(new Node(n.id, n.data)));
|
||||
|
|
@ -220,36 +193,30 @@ Graph.prototype.merge = function(data)
|
|||
}, this);
|
||||
};
|
||||
|
||||
Graph.prototype.filterNodes = function(fn)
|
||||
{
|
||||
Graph.prototype.filterNodes = function(fn) {
|
||||
var tmpNodes = this.nodes.slice();
|
||||
tmpNodes.forEach(function(n) {
|
||||
if (!fn(n))
|
||||
{
|
||||
if (!fn(n)) {
|
||||
this.removeNode(n);
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
Graph.prototype.filterEdges = function(fn)
|
||||
{
|
||||
Graph.prototype.filterEdges = function(fn) {
|
||||
var tmpEdges = this.edges.slice();
|
||||
tmpEdges.forEach(function(e) {
|
||||
if (!fn(e))
|
||||
{
|
||||
if (!fn(e)) {
|
||||
this.removeEdge(e);
|
||||
}
|
||||
}, this);
|
||||
};
|
||||
|
||||
|
||||
Graph.prototype.addGraphListener = function(obj)
|
||||
{
|
||||
Graph.prototype.addGraphListener = function(obj) {
|
||||
this.eventListeners.push(obj);
|
||||
};
|
||||
|
||||
Graph.prototype.notify = function()
|
||||
{
|
||||
Graph.prototype.notify = function() {
|
||||
this.eventListeners.forEach(function(obj){
|
||||
obj.graphChanged();
|
||||
});
|
||||
|
|
@ -257,8 +224,7 @@ Graph.prototype.notify = function()
|
|||
|
||||
// -----------
|
||||
var Layout = {};
|
||||
Layout.ForceDirected = function(graph, stiffness, repulsion, damping)
|
||||
{
|
||||
Layout.ForceDirected = function(graph, stiffness, repulsion, damping) {
|
||||
this.graph = graph;
|
||||
this.stiffness = stiffness; // spring stiffness constant
|
||||
this.repulsion = repulsion; // repulsion constant
|
||||
|
|
@ -266,14 +232,10 @@ Layout.ForceDirected = function(graph, stiffness, repulsion, damping)
|
|||
|
||||
this.nodePoints = {}; // keep track of points associated with nodes
|
||||
this.edgeSprings = {}; // keep track of springs associated with edges
|
||||
|
||||
this.intervalId = null;
|
||||
};
|
||||
|
||||
Layout.ForceDirected.prototype.point = function(node)
|
||||
{
|
||||
if (typeof(this.nodePoints[node.id]) === 'undefined')
|
||||
{
|
||||
Layout.ForceDirected.prototype.point = function(node) {
|
||||
if (typeof(this.nodePoints[node.id]) === 'undefined') {
|
||||
var mass = typeof(node.data.mass) !== 'undefined' ? node.data.mass : 1.0;
|
||||
this.nodePoints[node.id] = new Layout.ForceDirected.Point(Vector.random(), mass);
|
||||
}
|
||||
|
|
@ -281,16 +243,14 @@ Layout.ForceDirected.prototype.point = function(node)
|
|||
return this.nodePoints[node.id];
|
||||
};
|
||||
|
||||
Layout.ForceDirected.prototype.spring = function(edge)
|
||||
{
|
||||
if (typeof(this.edgeSprings[edge.id]) === 'undefined')
|
||||
{
|
||||
Layout.ForceDirected.prototype.spring = function(edge) {
|
||||
if (typeof(this.edgeSprings[edge.id]) === 'undefined') {
|
||||
var length = typeof(edge.data.length) !== 'undefined' ? edge.data.length : 1.0;
|
||||
|
||||
var existingSpring = false;
|
||||
|
||||
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') {
|
||||
existingSpring = this.edgeSprings[e.id];
|
||||
}
|
||||
|
|
@ -320,8 +280,7 @@ Layout.ForceDirected.prototype.spring = function(edge)
|
|||
};
|
||||
|
||||
// callback should accept two arguments: Node, Point
|
||||
Layout.ForceDirected.prototype.eachNode = function(callback)
|
||||
{
|
||||
Layout.ForceDirected.prototype.eachNode = function(callback) {
|
||||
var t = this;
|
||||
this.graph.nodes.forEach(function(n){
|
||||
callback.call(t, n, t.point(n));
|
||||
|
|
@ -329,8 +288,7 @@ Layout.ForceDirected.prototype.eachNode = function(callback)
|
|||
};
|
||||
|
||||
// callback should accept two arguments: Edge, Spring
|
||||
Layout.ForceDirected.prototype.eachEdge = function(callback)
|
||||
{
|
||||
Layout.ForceDirected.prototype.eachEdge = function(callback) {
|
||||
var t = this;
|
||||
this.graph.edges.forEach(function(e){
|
||||
callback.call(t, e, t.spring(e));
|
||||
|
|
@ -338,8 +296,7 @@ Layout.ForceDirected.prototype.eachEdge = function(callback)
|
|||
};
|
||||
|
||||
// callback should accept one argument: Spring
|
||||
Layout.ForceDirected.prototype.eachSpring = function(callback)
|
||||
{
|
||||
Layout.ForceDirected.prototype.eachSpring = function(callback) {
|
||||
var t = this;
|
||||
this.graph.edges.forEach(function(e){
|
||||
callback.call(t, t.spring(e));
|
||||
|
|
@ -348,8 +305,7 @@ Layout.ForceDirected.prototype.eachSpring = function(callback)
|
|||
|
||||
|
||||
// Physics stuff
|
||||
Layout.ForceDirected.prototype.applyCoulombsLaw = function()
|
||||
{
|
||||
Layout.ForceDirected.prototype.applyCoulombsLaw = function() {
|
||||
this.eachNode(function(n1, point1) {
|
||||
this.eachNode(function(n2, point2) {
|
||||
if (point1 !== point2)
|
||||
|
|
@ -366,8 +322,7 @@ Layout.ForceDirected.prototype.applyCoulombsLaw = function()
|
|||
});
|
||||
};
|
||||
|
||||
Layout.ForceDirected.prototype.applyHookesLaw = function()
|
||||
{
|
||||
Layout.ForceDirected.prototype.applyHookesLaw = function() {
|
||||
this.eachSpring(function(spring){
|
||||
var d = spring.point2.p.subtract(spring.point1.p); // the direction of the spring
|
||||
var displacement = spring.length - d.magnitude();
|
||||
|
|
@ -379,8 +334,7 @@ Layout.ForceDirected.prototype.applyHookesLaw = function()
|
|||
});
|
||||
};
|
||||
|
||||
Layout.ForceDirected.prototype.attractToCentre = function()
|
||||
{
|
||||
Layout.ForceDirected.prototype.attractToCentre = function() {
|
||||
this.eachNode(function(node, point) {
|
||||
var direction = point.p.multiply(-1.0);
|
||||
point.applyForce(direction.multiply(this.repulsion / 50.0));
|
||||
|
|
@ -388,23 +342,20 @@ Layout.ForceDirected.prototype.attractToCentre = function()
|
|||
};
|
||||
|
||||
|
||||
Layout.ForceDirected.prototype.updateVelocity = function(timestep)
|
||||
{
|
||||
Layout.ForceDirected.prototype.updateVelocity = function(timestep) {
|
||||
this.eachNode(function(node, point) {
|
||||
point.v = point.v.add(point.f.multiply(timestep)).multiply(this.damping);
|
||||
point.f = new Vector(0,0);
|
||||
});
|
||||
};
|
||||
|
||||
Layout.ForceDirected.prototype.updatePosition = function(timestep)
|
||||
{
|
||||
Layout.ForceDirected.prototype.updatePosition = function(timestep) {
|
||||
this.eachNode(function(node, point) {
|
||||
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;
|
||||
this.eachNode(function(node, point) {
|
||||
var speed = point.v.magnitude();
|
||||
|
|
@ -414,58 +365,54 @@ Layout.ForceDirected.prototype.totalEnergy = function(timestep)
|
|||
return energy;
|
||||
};
|
||||
|
||||
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; // stolen from coffeescript, thanks jashkenas! ;-)
|
||||
|
||||
Layout.requestAnimationFrame = __bind(window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback, element) {
|
||||
window.setTimeout(callback, 10);
|
||||
}, window);
|
||||
|
||||
|
||||
// start simulation
|
||||
Layout.ForceDirected.prototype.start = function(interval, render, done)
|
||||
{
|
||||
Layout.ForceDirected.prototype.start = function(interval, render, done) {
|
||||
var t = this;
|
||||
|
||||
if (this.intervalId !== null) {
|
||||
return; // already running
|
||||
}
|
||||
if (this._started) return;
|
||||
this._started = true;
|
||||
|
||||
var requestAnimFrame =
|
||||
window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback, element) {
|
||||
window.setTimeout(callback, interval);
|
||||
};
|
||||
|
||||
requestAnimFrame(function step() {
|
||||
Layout.requestAnimationFrame(function step() {
|
||||
t.applyCoulombsLaw();
|
||||
t.applyHookesLaw();
|
||||
t.attractToCentre();
|
||||
t.updateVelocity(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
|
||||
if (t.totalEnergy() < 0.01)
|
||||
{
|
||||
if (t.totalEnergy() < 0.01) {
|
||||
t._started = false;
|
||||
if (typeof(done) !== 'undefined') { done(); }
|
||||
}
|
||||
else
|
||||
{
|
||||
requestAnimFrame(step);
|
||||
} else {
|
||||
Layout.requestAnimationFrame(step);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 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 t = this;
|
||||
this.graph.nodes.forEach(function(n){
|
||||
var point = t.point(n);
|
||||
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};
|
||||
}
|
||||
});
|
||||
|
|
@ -474,8 +421,7 @@ Layout.ForceDirected.prototype.nearest = function(pos)
|
|||
};
|
||||
|
||||
// returns [bottomleft, topright]
|
||||
Layout.ForceDirected.prototype.getBoundingBox = function()
|
||||
{
|
||||
Layout.ForceDirected.prototype.getBoundingBox = function() {
|
||||
var bottomleft = new Vector(-2,-2);
|
||||
var topright = new Vector(2,2);
|
||||
|
||||
|
|
@ -494,76 +440,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)};
|
||||
};
|
||||
|
||||
|
||||
// Vector
|
||||
Vector = function(x, y)
|
||||
{
|
||||
Vector = function(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
};
|
||||
|
||||
Vector.random = function()
|
||||
{
|
||||
Vector.random = function() {
|
||||
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);
|
||||
};
|
||||
|
||||
Vector.prototype.subtract = function(v2)
|
||||
{
|
||||
Vector.prototype.subtract = function(v2) {
|
||||
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);
|
||||
};
|
||||
|
||||
Vector.prototype.divide = function(n)
|
||||
{
|
||||
return new Vector((this.x / n) || 0, (this.y / n) || 0);
|
||||
Vector.prototype.divide = function(n) {
|
||||
return new Vector((this.x / n) || 0, (this.y / n) || 0); // Avoid divide by zero errors..
|
||||
};
|
||||
|
||||
Vector.prototype.magnitude = function()
|
||||
{
|
||||
Vector.prototype.magnitude = function() {
|
||||
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);
|
||||
};
|
||||
|
||||
Vector.prototype.normalise = function()
|
||||
{
|
||||
Vector.prototype.normalise = function() {
|
||||
return this.divide(this.magnitude());
|
||||
};
|
||||
|
||||
// Point
|
||||
Layout.ForceDirected.Point = function(position, mass)
|
||||
{
|
||||
Layout.ForceDirected.Point = function(position, mass) {
|
||||
this.p = position; // position
|
||||
this.m = mass; // mass
|
||||
this.v = new Vector(0, 0); // velocity
|
||||
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));
|
||||
};
|
||||
|
||||
// Spring
|
||||
Layout.ForceDirected.Spring = function(point1, point2, length, k)
|
||||
{
|
||||
Layout.ForceDirected.Spring = function(point1, point2, length, k) {
|
||||
this.point1 = point1;
|
||||
this.point2 = point2;
|
||||
this.length = length; // spring length at rest
|
||||
|
|
@ -580,8 +514,7 @@ Layout.ForceDirected.Spring = function(point1, point2, length, k)
|
|||
// };
|
||||
|
||||
// Renderer handles the layout rendering loop
|
||||
function Renderer(interval, layout, clear, drawEdge, drawNode)
|
||||
{
|
||||
function Renderer(interval, layout, clear, drawEdge, drawNode) {
|
||||
this.interval = interval;
|
||||
this.layout = layout;
|
||||
this.clear = clear;
|
||||
|
|
@ -591,13 +524,11 @@ function Renderer(interval, layout, clear, drawEdge, drawNode)
|
|||
this.layout.graph.addGraphListener(this);
|
||||
}
|
||||
|
||||
Renderer.prototype.graphChanged = function(e)
|
||||
{
|
||||
Renderer.prototype.graphChanged = function(e) {
|
||||
this.start();
|
||||
};
|
||||
|
||||
Renderer.prototype.start = function()
|
||||
{
|
||||
Renderer.prototype.start = function() {
|
||||
var t = this;
|
||||
this.layout.start(50, function render() {
|
||||
t.clear();
|
||||
|
|
|
|||
90
springyui.js
90
springyui.js
|
|
@ -26,35 +26,22 @@ Copyright (c) 2010 Dennis Hotson
|
|||
(function() {
|
||||
|
||||
jQuery.fn.springy = function(params) {
|
||||
var graph = params.graph;
|
||||
if(!graph){
|
||||
return;
|
||||
}
|
||||
|
||||
var stiffness = params.stiffness || 400.0;
|
||||
var repulsion = params.repulsion || 400.0;
|
||||
var damping = params.damping || 0.5;
|
||||
var graph = this.graph = params.graph || new Graph();
|
||||
|
||||
var stiffness = params.stiffness || 400.0;
|
||||
var repulsion = params.repulsion || 400.0;
|
||||
var damping = params.damping || 0.5;
|
||||
|
||||
var canvas = this[0];
|
||||
var ctx = canvas.getContext("2d");
|
||||
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);
|
||||
};
|
||||
var layout = this.layout = new Layout.ForceDirected(graph, stiffness, repulsion, damping);
|
||||
|
||||
// calculate bounding box of graph layout.. with ease-in
|
||||
var currentBB = layout.getBoundingBox();
|
||||
var targetBB = {bottomleft: new Vector(-2, -2), topright: new Vector(2, 2)};
|
||||
|
||||
// auto adjusting bounding box
|
||||
requestAnimFrame(function adjust(){
|
||||
Layout.requestAnimationFrame(function adjust() {
|
||||
targetBB = layout.getBoundingBox();
|
||||
// current gets 20% closer to target every iteration
|
||||
currentBB = {
|
||||
|
|
@ -64,7 +51,7 @@ jQuery.fn.springy = function(params) {
|
|||
.divide(10))
|
||||
};
|
||||
|
||||
requestAnimFrame(adjust);
|
||||
Layout.requestAnimationFrame(adjust);
|
||||
});
|
||||
|
||||
// convert to/from screen coordinates
|
||||
|
|
@ -87,28 +74,26 @@ jQuery.fn.springy = function(params) {
|
|||
var nearest = null;
|
||||
var dragged = null;
|
||||
|
||||
jQuery(canvas).mousedown(function(e){
|
||||
jQuery(canvas).mousedown(function(e) {
|
||||
jQuery('.actions').hide();
|
||||
|
||||
var pos = jQuery(this).offset();
|
||||
var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
|
||||
selected = nearest = dragged = layout.nearest(p);
|
||||
|
||||
if (selected.node !== null)
|
||||
{
|
||||
if (selected.node !== null) {
|
||||
dragged.point.m = 10000.0;
|
||||
}
|
||||
|
||||
renderer.start();
|
||||
});
|
||||
|
||||
jQuery(canvas).mousemove(function(e){
|
||||
jQuery(canvas).mousemove(function(e) {
|
||||
var pos = jQuery(this).offset();
|
||||
var p = fromScreen({x: e.pageX - pos.left, y: e.pageY - pos.top});
|
||||
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.y = p.y;
|
||||
}
|
||||
|
|
@ -116,7 +101,7 @@ jQuery.fn.springy = function(params) {
|
|||
renderer.start();
|
||||
});
|
||||
|
||||
jQuery(window).bind('mouseup',function(e){
|
||||
jQuery(window).bind('mouseup',function(e) {
|
||||
dragged = null;
|
||||
});
|
||||
|
||||
|
|
@ -141,12 +126,10 @@ jQuery.fn.springy = function(params) {
|
|||
};
|
||||
|
||||
var renderer = new Renderer(1, layout,
|
||||
function clear()
|
||||
{
|
||||
function clear() {
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
},
|
||||
function drawEdge(edge, p1, p2)
|
||||
{
|
||||
function drawEdge(edge, p1, p2) {
|
||||
var x1 = toScreen(p1).x;
|
||||
var y1 = toScreen(p1).y;
|
||||
var x2 = toScreen(p2).x;
|
||||
|
|
@ -160,18 +143,17 @@ jQuery.fn.springy = function(params) {
|
|||
|
||||
var total = from.length + to.length;
|
||||
|
||||
// Figure out edge's position in relation to other edges between the same nodes
|
||||
var n = 0;
|
||||
for (var i=0; i<from.length; i++)
|
||||
{
|
||||
if (from[i].id === edge.id)
|
||||
{
|
||||
for (var i=0; i<from.length; i++) {
|
||||
if (from[i].id === edge.id) {
|
||||
n = i;
|
||||
}
|
||||
}
|
||||
|
||||
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 s1 = toScreen(p1).add(offset);
|
||||
|
|
@ -186,7 +168,6 @@ jQuery.fn.springy = function(params) {
|
|||
intersection = s2;
|
||||
}
|
||||
|
||||
|
||||
var stroke = typeof(edge.data.color) !== 'undefined' ? edge.data.color : '#000000';
|
||||
|
||||
var arrowWidth;
|
||||
|
|
@ -202,12 +183,9 @@ jQuery.fn.springy = function(params) {
|
|||
|
||||
// line
|
||||
var lineEnd;
|
||||
if (directional)
|
||||
{
|
||||
if (directional) {
|
||||
lineEnd = intersection.subtract(direction.normalise().multiply(arrowLength * 0.5));
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
lineEnd = s2;
|
||||
}
|
||||
|
||||
|
|
@ -219,8 +197,7 @@ jQuery.fn.springy = function(params) {
|
|||
|
||||
// arrow
|
||||
|
||||
if (directional)
|
||||
{
|
||||
if (directional) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = stroke;
|
||||
ctx.translate(intersection.x, intersection.y);
|
||||
|
|
@ -235,8 +212,7 @@ jQuery.fn.springy = function(params) {
|
|||
ctx.restore();
|
||||
}
|
||||
},
|
||||
function drawNode(node, p)
|
||||
{
|
||||
function drawNode(node, p) {
|
||||
var s = toScreen(p);
|
||||
|
||||
ctx.save();
|
||||
|
|
@ -248,16 +224,11 @@ jQuery.fn.springy = function(params) {
|
|||
ctx.clearRect(s.x - boxWidth/2, s.y - 10, boxWidth, 20);
|
||||
|
||||
// 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";
|
||||
}
|
||||
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";
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
ctx.fillStyle = "#FFFFFF";
|
||||
}
|
||||
|
||||
|
|
@ -277,10 +248,8 @@ jQuery.fn.springy = function(params) {
|
|||
|
||||
renderer.start();
|
||||
|
||||
|
||||
// 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));
|
||||
|
||||
// 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));
|
||||
}
|
||||
|
||||
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 tr = {x: p3.x + w, y: p3.y};
|
||||
var bl = {x: p3.x, y: p3.y + h};
|
||||
|
|
@ -313,6 +281,8 @@ jQuery.fn.springy = function(params) {
|
|||
|
||||
return false;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user