bower.json

@@ -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>"

package.json

@@ -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": {

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 ||
+	Springy.requestAnimationFrame = __bind(root.requestAnimationFrame ||
-		this.webkitRequestAnimationFrame ||
+		root.webkitRequestAnimationFrame ||
-		this.mozRequestAnimationFrame ||
+		root.mozRequestAnimationFrame ||
-		this.oRequestAnimationFrame ||
+		root.oRequestAnimationFrame ||
-		this.msRequestAnimationFrame ||
+		root.msRequestAnimationFrame ||
 		(function(callback, element) {
-			this.setTimeout(callback, 10);
+			root.setTimeout(callback, 10);
-		}), this);
+		}), 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);
 			});
-			
+		}, this.onRenderStart, this.onRenderStop);
-			if (t.onRenderFrame !== undefined) { t.onRenderFrame(); }
-		}, this.onRenderStop, this.onRenderStart);
 	};
 
 	Renderer.prototype.stop = function() {
@@ -730,6 +715,4 @@
 		}
 		return true;
 	};
-
+}).call(this);
-  return Springy;
-}));

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) {
+	Springy.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.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
+		ctx.font = (this.data.font !== undefined) ? this.data.font : nodeFont;
-		var width = ctx.measureText(text).width;
+		var width = ctx.measureText(text).width + 10;
 		ctx.restore();
 
-		node._width || (node._width = {});
+		this._width || (this._width = {});
-		node._width[text] = 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;
+		return 20;
-		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() {
@@ -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 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);
 
@@ -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 textPos = s1.add(s2).divide(2).add(normal.multiply(-8));
-				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.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
+			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
-			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();
 		}
 	);