Merge branch 'master' of https://github.com/dhotson/springy

springy.js

@@ -418,7 +418,17 @@ Layout.ForceDirected.prototype.start = function(interval, render, done)
 		return; // already running
 	}
 
-	this.intervalId = setInterval(function() {
+	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.applyHookesLaw();
 		t.attractToCentre();
@@ -428,13 +438,15 @@ Layout.ForceDirected.prototype.start = function(interval, render, done)
 		if (typeof(render) !== 'undefined') { render(); }
 
 		// stop simulation when energy of the system goes below a threshold
-		if (t.totalEnergy() < 0.1)
+		if (t.totalEnergy() < 0.01)
 		{
-			clearInterval(t.intervalId);
-			t.intervalId = null;
 			if (typeof(done) !== 'undefined') { done(); }
 		}
-	}, interval);
+		else
+		{
+			requestAnimFrame(step);
+		}
+	});
 };
 
 // Find the nearest point to a particular position

springyui.js

@@ -39,12 +39,22 @@ jQuery.fn.springy = function(params) {
 	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);
+		};
+
 	// 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
-	setInterval(function(){
+	requestAnimFrame(function adjust(){
 		targetBB = layout.getBoundingBox();
 		// current gets 20% closer to target every iteration
 		currentBB = {
@@ -53,7 +63,9 @@ jQuery.fn.springy = function(params) {
 			topright: currentBB.topright.add( targetBB.topright.subtract(currentBB.topright)
 				.divide(10))
 		};
-	}, 50);
+
+		requestAnimFrame(adjust);
+	});
 
 	// convert to/from screen coordinates
 	toScreen = function(p) {
@@ -109,11 +121,18 @@ jQuery.fn.springy = function(params) {
 	});
 
 	Node.prototype.getWidth = function() {
-		ctx.save();
 		var text = typeof(this.data.label) !== 'undefined' ? this.data.label : this.id;
+		if (this._width && this._width[text])
+			return this._width[text];
+
+		ctx.save();
 		ctx.font = "16px Verdana, sans-serif";
 		var width = ctx.measureText(text).width + 10;
 		ctx.restore();
+
+		this._width || (this._width = {});
+		this._width[text] = width;
+
 		return width;
 	};