Compare commits
No commits in common. "master" and "2.2.1" have entirely different histories.
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "Springy",
|
||||
"main": "springy.js",
|
||||
"version": "2.7.1",
|
||||
"version": "2.2.1",
|
||||
"homepage": "https://github.com/dhotson/springy",
|
||||
"authors": [
|
||||
"Dennis Hotson <dennis@99designs.com>"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "springy",
|
||||
"version": "2.7.1",
|
||||
"version": "2.2.1",
|
||||
"description": "A force directed graph layout algorithm in JavaScript.",
|
||||
"main": "springy.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
83
springy.js
83
springy.js
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Springy v2.7.1
|
||||
* Springy v2.0.1
|
||||
*
|
||||
* Copyright (c) 2010-2013 Dennis Hotson
|
||||
*
|
||||
|
|
@ -24,24 +24,22 @@
|
|||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* 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 = {};
|
||||
(function() {
|
||||
// Enable strict mode for EC5 compatible browsers
|
||||
"use strict";
|
||||
|
||||
// Establish the root object, `window` in the browser, or `global` on the server.
|
||||
var root = this;
|
||||
|
||||
// The top-level namespace. All public Springy classes and modules will
|
||||
// be attached to this. Exported for both CommonJS and the browser.
|
||||
var Springy;
|
||||
if (typeof exports !== 'undefined') {
|
||||
Springy = exports;
|
||||
} else {
|
||||
Springy = root.Springy = {};
|
||||
}
|
||||
|
||||
var Graph = Springy.Graph = function() {
|
||||
this.nodeSet = {};
|
||||
|
|
@ -327,13 +325,11 @@
|
|||
|
||||
// -----------
|
||||
var Layout = Springy.Layout = {};
|
||||
Layout.ForceDirected = function(graph, stiffness, repulsion, damping, minEnergyThreshold, maxSpeed) {
|
||||
Layout.ForceDirected = function(graph, stiffness, repulsion, damping) {
|
||||
this.graph = graph;
|
||||
this.stiffness = stiffness; // spring stiffness constant
|
||||
this.repulsion = repulsion; // repulsion constant
|
||||
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.edgeSprings = {}; // keep track of springs associated with edges
|
||||
|
|
@ -452,9 +448,6 @@
|
|||
// 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);
|
||||
if (point.v.magnitude() > this.maxSpeed) {
|
||||
point.v = point.v.normalise().multiply(this.maxSpeed);
|
||||
}
|
||||
point.a = new Vector(0,0);
|
||||
});
|
||||
};
|
||||
|
|
@ -480,14 +473,14 @@
|
|||
|
||||
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; // stolen from coffeescript, thanks jashkenas! ;-)
|
||||
|
||||
Springy.requestAnimationFrame = __bind(this.requestAnimationFrame ||
|
||||
this.webkitRequestAnimationFrame ||
|
||||
this.mozRequestAnimationFrame ||
|
||||
this.oRequestAnimationFrame ||
|
||||
this.msRequestAnimationFrame ||
|
||||
Springy.requestAnimationFrame = __bind(root.requestAnimationFrame ||
|
||||
root.webkitRequestAnimationFrame ||
|
||||
root.mozRequestAnimationFrame ||
|
||||
root.oRequestAnimationFrame ||
|
||||
root.msRequestAnimationFrame ||
|
||||
(function(callback, element) {
|
||||
this.setTimeout(callback, 10);
|
||||
}), this);
|
||||
root.setTimeout(callback, 10);
|
||||
}), root);
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -504,14 +497,18 @@
|
|||
if (onRenderStart !== undefined) { onRenderStart(); }
|
||||
|
||||
Springy.requestAnimationFrame(function step() {
|
||||
t.tick(0.03);
|
||||
t.applyCoulombsLaw();
|
||||
t.applyHookesLaw();
|
||||
t.attractToCentre();
|
||||
t.updateVelocity(0.03);
|
||||
t.updatePosition(0.03);
|
||||
|
||||
if (render !== undefined) {
|
||||
render();
|
||||
}
|
||||
|
||||
// stop simulation when energy of the system goes below a threshold
|
||||
if (t._stop || t.totalEnergy() < t.minEnergyThreshold) {
|
||||
if (t._stop || t.totalEnergy() < 0.01) {
|
||||
t._started = false;
|
||||
if (onRenderStop !== undefined) { onRenderStop(); }
|
||||
} else {
|
||||
|
|
@ -524,14 +521,6 @@
|
|||
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
|
||||
Layout.ForceDirected.prototype.nearest = function(pos) {
|
||||
var min = {node: null, point: null, distance: null};
|
||||
|
|
@ -645,16 +634,14 @@
|
|||
* 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) {
|
||||
var Renderer = Springy.Renderer = function(layout, clear, drawEdge, drawNode, onRenderStop, onRenderStart) {
|
||||
this.layout = layout;
|
||||
this.clear = clear;
|
||||
this.drawEdge = drawEdge;
|
||||
this.drawNode = drawNode;
|
||||
this.onRenderStop = onRenderStop;
|
||||
this.onRenderStart = onRenderStart;
|
||||
this.onRenderFrame = onRenderFrame;
|
||||
|
||||
this.layout.graph.addGraphListener(this);
|
||||
}
|
||||
|
|
@ -685,9 +672,7 @@
|
|||
t.layout.eachNode(function(node, point) {
|
||||
t.drawNode(node, point.p);
|
||||
});
|
||||
|
||||
if (t.onRenderFrame !== undefined) { t.onRenderFrame(); }
|
||||
}, this.onRenderStop, this.onRenderStart);
|
||||
}, this.onRenderStart, this.onRenderStop);
|
||||
};
|
||||
|
||||
Renderer.prototype.stop = function() {
|
||||
|
|
@ -730,6 +715,4 @@
|
|||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
return Springy;
|
||||
}));
|
||||
}).call(this);
|
||||
|
|
|
|||
128
springyui.js
128
springyui.js
|
|
@ -32,15 +32,12 @@ jQuery.fn.springy = function(params) {
|
|||
var stiffness = params.stiffness || 400.0;
|
||||
var repulsion = params.repulsion || 400.0;
|
||||
var damping = params.damping || 0.5;
|
||||
var minEnergyThreshold = params.minEnergyThreshold || 0.00001;
|
||||
var nodeSelected = params.nodeSelected || null;
|
||||
var nodeImages = {};
|
||||
var edgeLabelsUpright = true;
|
||||
|
||||
var canvas = this[0];
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
var layout = this.layout = new Springy.Layout.ForceDirected(graph, stiffness, repulsion, damping, minEnergyThreshold);
|
||||
var layout = this.layout = new Springy.Layout.ForceDirected(graph, stiffness, repulsion, damping);
|
||||
|
||||
// calculate bounding box of graph layout.. with ease-in
|
||||
var currentBB = layout.getBoundingBox();
|
||||
|
|
@ -124,61 +121,25 @@ jQuery.fn.springy = function(params) {
|
|||
dragged = null;
|
||||
});
|
||||
|
||||
var getTextWidth = function(node) {
|
||||
var text = (node.data.label !== undefined) ? node.data.label : node.id;
|
||||
if (node._width && node._width[text])
|
||||
return node._width[text];
|
||||
Springy.Node.prototype.getWidth = function() {
|
||||
var text = (this.data.label !== undefined) ? this.data.label : this.id;
|
||||
if (this._width && this._width[text])
|
||||
return this._width[text];
|
||||
|
||||
ctx.save();
|
||||
ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
|
||||
var width = ctx.measureText(text).width;
|
||||
ctx.font = (this.data.font !== undefined) ? this.data.font : nodeFont;
|
||||
var width = ctx.measureText(text).width + 10;
|
||||
ctx.restore();
|
||||
|
||||
node._width || (node._width = {});
|
||||
node._width[text] = width;
|
||||
this._width || (this._width = {});
|
||||
this._width[text] = width;
|
||||
|
||||
return width;
|
||||
};
|
||||
|
||||
var getTextHeight = function(node) {
|
||||
return 16;
|
||||
// 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 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;
|
||||
}
|
||||
return 20;
|
||||
};
|
||||
|
||||
var renderer = this.renderer = new Springy.Renderer(layout,
|
||||
function clear() {
|
||||
|
|
@ -212,14 +173,11 @@ jQuery.fn.springy = function(params) {
|
|||
// Figure out how far off center the line should be drawn
|
||||
var offset = normal.multiply(-((total - 1) * spacing)/2.0 + (n * spacing));
|
||||
|
||||
var paddingX = 6;
|
||||
var paddingY = 6;
|
||||
|
||||
var s1 = toScreen(p1).add(offset);
|
||||
var s2 = toScreen(p2).add(offset);
|
||||
|
||||
var boxWidth = edge.target.getWidth() + paddingX;
|
||||
var boxHeight = edge.target.getHeight() + paddingY;
|
||||
var boxWidth = edge.target.getWidth();
|
||||
var boxHeight = edge.target.getHeight();
|
||||
|
||||
var intersection = intersect_line_box(s1, s2, {x: x2-boxWidth/2.0, y: y2-boxHeight/2.0}, boxWidth, boxHeight);
|
||||
|
||||
|
|
@ -278,15 +236,9 @@ jQuery.fn.springy = function(params) {
|
|||
ctx.textBaseline = "top";
|
||||
ctx.font = (edge.data.font !== undefined) ? edge.data.font : edgeFont;
|
||||
ctx.fillStyle = stroke;
|
||||
var angle = Math.atan2(s2.y - s1.y, s2.x - s1.x);
|
||||
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));
|
||||
var textPos = s1.add(s2).divide(2).add(normal.multiply(-8));
|
||||
ctx.translate(textPos.x, textPos.y);
|
||||
ctx.rotate(angle);
|
||||
ctx.rotate(Math.atan2(s2.y - s1.y, s2.x - s1.x));
|
||||
ctx.fillText(text, 0,-2);
|
||||
ctx.restore();
|
||||
}
|
||||
|
|
@ -297,18 +249,11 @@ jQuery.fn.springy = function(params) {
|
|||
|
||||
ctx.save();
|
||||
|
||||
// Pulled out the padding aspect sso that the size functions could be used in multiple places
|
||||
// These should probably be settable by the user (and scoped higher) but this suffices for now
|
||||
var paddingX = 6;
|
||||
var paddingY = 6;
|
||||
|
||||
var contentWidth = node.getWidth();
|
||||
var contentHeight = node.getHeight();
|
||||
var boxWidth = contentWidth + paddingX;
|
||||
var boxHeight = contentHeight + paddingY;
|
||||
var boxWidth = node.getWidth();
|
||||
var boxHeight = node.getHeight();
|
||||
|
||||
// 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
|
||||
if (selected !== null && selected.node !== null && selected.node.id === node.id) {
|
||||
|
|
@ -318,36 +263,15 @@ jQuery.fn.springy = function(params) {
|
|||
} else {
|
||||
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);
|
||||
|
||||
ctx.textAlign = "left";
|
||||
ctx.textBaseline = "top";
|
||||
ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
|
||||
ctx.fillStyle = "#000000";
|
||||
var text = (node.data.label !== undefined) ? node.data.label : node.id;
|
||||
ctx.fillText(text, s.x - boxWidth/2 + 5, s.y - 8);
|
||||
|
||||
if (node.data.image == undefined) {
|
||||
ctx.textAlign = "left";
|
||||
ctx.textBaseline = "top";
|
||||
ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
|
||||
ctx.fillStyle = (node.data.color !== undefined) ? node.data.color : "#000000";
|
||||
var text = (node.data.label !== undefined) ? node.data.label : node.id;
|
||||
ctx.fillText(text, s.x - contentWidth/2, s.y - contentHeight/2);
|
||||
} 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();
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user