Merge pull request #98 from iangilman/render

Changed onRender to onRenderFrame

README.mkdn

@@ -47,7 +47,7 @@ add nodes and edges to graph and springyui.js for the rendering example.
 Springy 1.1+ supports simplified API for adding nodes and edges, see
 [demo-simple.html](http://dhotson.github.com/springy/demo-simple.html):
 
-    var graph = new Graph();
+    var graph = new Springy.Graph();
     graph.addNodes('mark', 'higgs', 'other', 'etc');
     graph.addEdges(
         ['mark', 'higgs'],
@@ -67,7 +67,7 @@ Springy 1.2+ also accepts JSON, see
       ]
     };
 
-    var graph = new Graph();
+    var graph = new Springy.Graph();
     graph.loadJSON(graphJSON);
 
 
@@ -80,7 +80,7 @@ things before you get started.
 This is the basic graph API, you can create nodes and edges etc.
 
     // make a new graph
-    var graph = new Graph();
+    var graph = new Springy.Graph();
 
     // make some nodes
     var node1 = graph.newNode({label: '1'});
@@ -91,12 +91,12 @@ This is the basic graph API, you can create nodes and edges etc.
 
 So now to draw this graph, lets make a layout object:
 
-    var layout = new Layout.ForceDirected(graph, 400.0, 400.0, 0.5);
+    var layout = new Springy.Layout.ForceDirected(graph, 400.0, 400.0, 0.5);
 
 I've written a Renderer class, which will handle the rendering loop.
 You just need to provide some callbacks to do the actual drawing.
 
-    var renderer = new Renderer(layout,
+    var renderer = new Springy.Renderer(layout,
       function clear() {
         // code to clear screen
       },

bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "Springy",
+  "main": "springy.js",
+  "version": "2.7.1",
+  "homepage": "https://github.com/dhotson/springy",
+  "authors": [
+    "Dennis Hotson <dennis@99designs.com>"
+  ],
+  "description": "A force directed graph layout algorithm",
+  "keywords": [
+    "graph",
+    "layout",
+    "visualization",
+    "physics"
+  ],
+  "license": "MIT"
+}

demo-json.html

@@ -22,7 +22,7 @@ var graphJSON = {
 };
 
 jQuery(function(){
-  var graph = new Graph();
+  var graph = new Springy.Graph();
   graph.loadJSON(graphJSON);
 
   var springy = jQuery('#springydemo').springy({

demo-raphael.html

@@ -112,7 +112,7 @@ Raphael.fn.connection = function (obj1, obj2, style) {
 </script>
 
 <script>
-var graph = new Graph();
+var graph = new Springy.Graph();
 
 var dennis = graph.newNode({label: 'Dennis'});
 var michael = graph.newNode({label: 'Michael'});
@@ -166,16 +166,16 @@ function moveSet(set, x, y) {
 }
 
 function doit() {
-    var layout = new Layout.ForceDirected(graph, 640, 480.0, 0.5);
+    var layout = new Springy.Layout.ForceDirected(graph, 640, 480.0, 0.5);
 
     var r = Raphael("holder", 640, 480);
 
 	// 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)};
+	var targetBB = {bottomleft: new Springy.Vector(-2, -2), topright: new Springy.Vector(2, 2)};
 
 	// auto adjusting bounding box
-	Layout.requestAnimationFrame(function adjust() {
+	Springy.requestAnimationFrame(function adjust() {
 		targetBB = layout.getBoundingBox();
 		// current gets 20% closer to target every iteration
 		currentBB = {
@@ -185,7 +185,7 @@ function doit() {
 				.divide(10))
 		};
 
-		Layout.requestAnimationFrame(adjust);
+		Springy.requestAnimationFrame(adjust);
 	});
 
 	// convert to/from screen coordinates
@@ -193,11 +193,11 @@ function doit() {
 		var size = currentBB.topright.subtract(currentBB.bottomleft);
 		var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * r.width;
 		var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * r.height;
-		return new Vector(sx, sy);
+		return new Springy.Vector(sx, sy);
 	};
 
 
-    var renderer = new Renderer(layout,
+    var renderer = new Springy.Renderer(layout,
         function clear() {
             // code to clear screen
         },

demo-simple.html

@@ -4,7 +4,7 @@
 <script src="springy.js"></script>
 <script src="springyui.js"></script>
 <script>
-var graph = new Graph();
+var graph = new Springy.Graph();
 graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara')
 graph.addNodes('Amphitryon', 'Alcmene', 'Iphicles', 'Heracles');
 

demo.html

@@ -4,7 +4,7 @@
 <script src="springy.js"></script>
 <script src="springyui.js"></script>
 <script>
-var graph = new Graph();
+var graph = new Springy.Graph();
 
 var dennis = graph.newNode({
   label: 'Dennis',

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "springy",
+  "version": "2.7.1",
+  "description": "A force directed graph layout algorithm in JavaScript.",
+  "main": "springy.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/dhotson/springy.git"
+  },
+  "keywords": [
+    "graph",
+    "layout",
+    "visualization"
+  ],
+  "author": "Dennis Hotson <dennis.hotson@gmail.com>",
+  "license": "MIT",
+  "readmeFilename": "README.mkdn"
+}

springyui.js

@@ -26,24 +26,28 @@ Copyright (c) 2010 Dennis Hotson
 (function() {
 
 jQuery.fn.springy = function(params) {
-	var graph = this.graph = params.graph || new Graph();
-
+	var graph = this.graph = params.graph || new Springy.Graph();
+	var nodeFont = "16px Verdana, sans-serif";
+	var edgeFont = "8px Verdana, sans-serif";
 	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 Layout.ForceDirected(graph, stiffness, repulsion, damping);
+	var layout = this.layout = new Springy.Layout.ForceDirected(graph, stiffness, repulsion, damping, minEnergyThreshold);
 
 	// 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)};
+	var targetBB = {bottomleft: new Springy.Vector(-2, -2), topright: new Springy.Vector(2, 2)};
 
 	// auto adjusting bounding box
-	Layout.requestAnimationFrame(function adjust() {
+	Springy.requestAnimationFrame(function adjust() {
 		targetBB = layout.getBoundingBox();
 		// current gets 20% closer to target every iteration
 		currentBB = {
@@ -53,22 +57,22 @@ jQuery.fn.springy = function(params) {
 				.divide(10))
 		};
 
-		Layout.requestAnimationFrame(adjust);
+		Springy.requestAnimationFrame(adjust);
 	});
 
 	// convert to/from screen coordinates
-	toScreen = function(p) {
+	var toScreen = function(p) {
 		var size = currentBB.topright.subtract(currentBB.bottomleft);
 		var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * canvas.width;
 		var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * canvas.height;
-		return new Vector(sx, sy);
+		return new Springy.Vector(sx, sy);
 	};
 
-	fromScreen = function(s) {
+	var fromScreen = function(s) {
 		var size = currentBB.topright.subtract(currentBB.bottomleft);
 		var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x;
 		var py = (s.y / canvas.height) * size.y + currentBB.bottomleft.y;
-		return new Vector(px, py);
+		return new Springy.Vector(px, py);
 	};
 
 	// half-assed drag and drop
@@ -120,27 +124,63 @@ jQuery.fn.springy = function(params) {
 		dragged = null;
 	});
 
-	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];
+	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];
 
 		ctx.save();
-		ctx.font = "16px Verdana, sans-serif";
-		var width = ctx.measureText(text).width + 10;
+		ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
+		var width = ctx.measureText(text).width;
 		ctx.restore();
 
-		this._width || (this._width = {});
-		this._width[text] = width;
+		node._width || (node._width = {});
+		node._width[text] = width;
 
 		return width;
 	};
 
-	Node.prototype.getHeight = function() {
-		return 20;
+	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 renderer = this.renderer = new Renderer(layout,
+	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;
+	}
+
+	var renderer = this.renderer = new Springy.Renderer(layout,
 		function clear() {
 			ctx.clearRect(0,0,canvas.width,canvas.height);
 		},
@@ -150,7 +190,7 @@ jQuery.fn.springy = function(params) {
 			var x2 = toScreen(p2).x;
 			var y2 = toScreen(p2).y;
 
-			var direction = new Vector(x2-x1, y2-y1);
+			var direction = new Springy.Vector(x2-x1, y2-y1);
 			var normal = direction.normal().normalise();
 
 			var from = graph.getEdges(edge.source, edge.target);
@@ -166,16 +206,20 @@ jQuery.fn.springy = function(params) {
 				}
 			}
 
-			var spacing = 6.0;
+			//change default to  10.0 to allow text fit between edges
+			var spacing = 12.0;
 
 			// 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();
-			var boxHeight = edge.target.getHeight();
+			var boxWidth = edge.target.getWidth() + paddingX;
+			var boxHeight = edge.target.getHeight() + paddingY;
 
 			var intersection = intersect_line_box(s1, s2, {x: x2-boxWidth/2.0, y: y2-boxHeight/2.0}, boxWidth, boxHeight);
 
@@ -232,9 +276,18 @@ jQuery.fn.springy = function(params) {
 				ctx.save();
 				ctx.textAlign = "center";
 				ctx.textBaseline = "top";
-				ctx.font = "10px Helvetica, sans-serif";
-				ctx.fillStyle = "#5BA6EC";
-				ctx.fillText(text, (x1+x2)/2, (y1+y2)/2);
+				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));
+				ctx.translate(textPos.x, textPos.y);
+				ctx.rotate(angle);
+				ctx.fillText(text, 0,-2);
 				ctx.restore();
 			}
 
@@ -244,30 +297,57 @@ jQuery.fn.springy = function(params) {
 
 			ctx.save();
 
-			var boxWidth = node.getWidth();
-			var boxHeight = node.getHeight();
+			// 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;
 
 			// clear background
-			ctx.clearRect(s.x - boxWidth/2, s.y - 10, boxWidth, 20);
+			ctx.clearRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);
 
 			// fill background
-			if (selected !== null && nearest.node !== null && selected.node.id === node.id) {
+			if (selected !== null && selected.node !== null && selected.node.id === node.id) {
 				ctx.fillStyle = "#FFFFE0";
 			} else if (nearest !== null && nearest.node !== null && nearest.node.id === node.id) {
 				ctx.fillStyle = "#EEEEEE";
 			} else {
 				ctx.fillStyle = "#FFFFFF";
 			}
-			ctx.fillRect(s.x - boxWidth/2, s.y - 10, boxWidth, 20);
-
-			ctx.textAlign = "left";
-			ctx.textBaseline = "top";
-			ctx.font = "16px Verdana, sans-serif";
-			ctx.fillStyle = "#000000";
-			ctx.font = "16px Verdana, sans-serif";
-			var text = (node.data.label !== undefined) ? node.data.label : node.id;
-			ctx.fillText(text, s.x - boxWidth/2 + 5, s.y - 8);
+			ctx.fillRect(s.x - boxWidth/2, s.y - boxHeight/2, boxWidth, boxHeight);
 
+			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();
 		}
 	);
@@ -290,7 +370,7 @@ jQuery.fn.springy = function(params) {
 			return false;
 		}
 
-		return new Vector(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));
+		return new Springy.Vector(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));
 	}
 
 	function intersect_line_box(p1, p2, p3, w, h) {