Merge branch 'namespace'

* namespace:
  Replace references to `window` with `root`
  Updated README with namespace
  Bump the major version number
  Added a top level Springy namespace
This commit is contained in:
Dennis Hotson 2013-03-15 11:11:11 +00:00
commit 80108b0f31
7 changed files with 641 additions and 629 deletions

View File

@ -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 Springy 1.1+ supports simplified API for adding nodes and edges, see
[demo-simple.html](http://dhotson.github.com/springy/demo-simple.html): [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.addNodes('mark', 'higgs', 'other', 'etc');
graph.addEdges( graph.addEdges(
['mark', 'higgs'], ['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); 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. This is the basic graph API, you can create nodes and edges etc.
// make a new graph // make a new graph
var graph = new Graph(); var graph = new Springy.Graph();
// make some nodes // make some nodes
var node1 = graph.newNode({label: '1'}); 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: 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. I've written a Renderer class, which will handle the rendering loop.
You just need to provide some callbacks to do the actual drawing. 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() { function clear() {
// code to clear screen // code to clear screen
}, },

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
/** /**
* Springy v1.2.0 * Springy v2.0.0
* *
* Copyright (c) 2010 Dennis Hotson * Copyright (c) 2010 Dennis Hotson
* *
@ -25,10 +25,23 @@
* OTHER DEALINGS IN THE SOFTWARE. * OTHER DEALINGS IN THE SOFTWARE.
*/ */
(function() {
// Enable strict mode for EC5 compatible browsers // Enable strict mode for EC5 compatible browsers
"use strict"; "use strict";
var Graph = function() { // 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 = {}; this.nodeSet = {};
this.nodes = []; this.nodes = [];
this.edges = []; this.edges = [];
@ -39,7 +52,7 @@ var Graph = function() {
this.eventListeners = []; this.eventListeners = [];
}; };
var Node = function(id, data) { var Node = Springy.Node = function(id, data) {
this.id = id; this.id = id;
this.data = (data !== undefined) ? data : {}; this.data = (data !== undefined) ? data : {};
@ -49,9 +62,8 @@ var Node = function(id, data) {
// this.data.label // this.data.label
}; };
var Edge = function(id, source, target, data) { var Edge = Springy.Edge = function(id, source, target, data) {
this.id = id; this.id = id;
/** @type {Node} */
this.source = source; this.source = source;
this.target = target; this.target = target;
this.data = (data !== undefined) ? data : {}; this.data = (data !== undefined) ? data : {};
@ -303,7 +315,7 @@ Graph.prototype.notify = function() {
}; };
// ----------- // -----------
var Layout = {}; var Layout = Springy.Layout = {};
Layout.ForceDirected = function(graph, stiffness, repulsion, damping) { Layout.ForceDirected = function(graph, stiffness, repulsion, damping) {
this.graph = graph; this.graph = graph;
this.stiffness = stiffness; // spring stiffness constant this.stiffness = stiffness; // spring stiffness constant
@ -452,14 +464,14 @@ Layout.ForceDirected.prototype.totalEnergy = function(timestep) {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; // stolen from coffeescript, thanks jashkenas! ;-) var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; // stolen from coffeescript, thanks jashkenas! ;-)
Layout.requestAnimationFrame = __bind(window.requestAnimationFrame || Springy.requestAnimationFrame = __bind(root.requestAnimationFrame ||
window.webkitRequestAnimationFrame || root.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || root.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || root.oRequestAnimationFrame ||
window.msRequestAnimationFrame || root.msRequestAnimationFrame ||
function(callback, element) { (function(callback, element) {
window.setTimeout(callback, 10); root.setTimeout(callback, 10);
}, window); }), root);
// start simulation // start simulation
@ -470,7 +482,7 @@ Layout.ForceDirected.prototype.start = function(render, done) {
this._started = true; this._started = true;
this._stop = false; this._stop = false;
Layout.requestAnimationFrame(function step() { Springy.requestAnimationFrame(function step() {
t.applyCoulombsLaw(); t.applyCoulombsLaw();
t.applyHookesLaw(); t.applyHookesLaw();
t.attractToCentre(); t.attractToCentre();
@ -486,7 +498,7 @@ Layout.ForceDirected.prototype.start = function(render, done) {
t._started = false; t._started = false;
if (done !== undefined) { done(); } if (done !== undefined) { done(); }
} else { } else {
Layout.requestAnimationFrame(step); Springy.requestAnimationFrame(step);
} }
}); });
}; };
@ -538,7 +550,7 @@ Layout.ForceDirected.prototype.getBoundingBox = function() {
// Vector // Vector
var Vector = function(x, y) { var Vector = Springy.Vector = function(x, y) {
this.x = x; this.x = x;
this.y = y; this.y = y;
}; };
@ -605,7 +617,7 @@ Layout.ForceDirected.Spring = function(point1, point2, length, k) {
// }; // };
// Renderer handles the layout rendering loop // Renderer handles the layout rendering loop
function Renderer(layout, clear, drawEdge, drawNode) { var Renderer = Springy.Renderer = function(layout, clear, drawEdge, drawNode) {
this.layout = layout; this.layout = layout;
this.clear = clear; this.clear = clear;
this.drawEdge = drawEdge; this.drawEdge = drawEdge;
@ -664,4 +676,4 @@ if ( !Array.prototype.forEach ) {
} }
}; };
} }
}).call(this);

View File

@ -26,7 +26,7 @@ Copyright (c) 2010 Dennis Hotson
(function() { (function() {
jQuery.fn.springy = function(params) { jQuery.fn.springy = function(params) {
var graph = this.graph = params.graph || new Graph(); var graph = this.graph = params.graph || new Springy.Graph();
var stiffness = params.stiffness || 400.0; var stiffness = params.stiffness || 400.0;
var repulsion = params.repulsion || 400.0; var repulsion = params.repulsion || 400.0;
@ -36,14 +36,14 @@ jQuery.fn.springy = function(params) {
var canvas = this[0]; var canvas = this[0];
var ctx = canvas.getContext("2d"); 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);
// calculate bounding box of graph layout.. with ease-in // calculate bounding box of graph layout.. with ease-in
var currentBB = layout.getBoundingBox(); 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 // auto adjusting bounding box
Layout.requestAnimationFrame(function adjust() { Springy.requestAnimationFrame(function adjust() {
targetBB = layout.getBoundingBox(); targetBB = layout.getBoundingBox();
// current gets 20% closer to target every iteration // current gets 20% closer to target every iteration
currentBB = { currentBB = {
@ -53,7 +53,7 @@ jQuery.fn.springy = function(params) {
.divide(10)) .divide(10))
}; };
Layout.requestAnimationFrame(adjust); Springy.requestAnimationFrame(adjust);
}); });
// convert to/from screen coordinates // convert to/from screen coordinates
@ -61,14 +61,14 @@ jQuery.fn.springy = function(params) {
var size = currentBB.topright.subtract(currentBB.bottomleft); var size = currentBB.topright.subtract(currentBB.bottomleft);
var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * canvas.width; var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * canvas.width;
var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * canvas.height; 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) { fromScreen = function(s) {
var size = currentBB.topright.subtract(currentBB.bottomleft); var size = currentBB.topright.subtract(currentBB.bottomleft);
var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x; var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x;
var py = (s.y / canvas.height) * size.y + currentBB.bottomleft.y; 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 // half-assed drag and drop
@ -120,7 +120,7 @@ jQuery.fn.springy = function(params) {
dragged = null; dragged = null;
}); });
Node.prototype.getWidth = function() { Springy.Node.prototype.getWidth = function() {
var text = (this.data.label !== undefined) ? this.data.label : this.id; var text = (this.data.label !== undefined) ? this.data.label : this.id;
if (this._width && this._width[text]) if (this._width && this._width[text])
return this._width[text]; return this._width[text];
@ -136,11 +136,11 @@ jQuery.fn.springy = function(params) {
return width; return width;
}; };
Node.prototype.getHeight = function() { Springy.Node.prototype.getHeight = function() {
return 20; return 20;
}; };
var renderer = this.renderer = new Renderer(layout, var renderer = this.renderer = new Springy.Renderer(layout,
function clear() { function clear() {
ctx.clearRect(0,0,canvas.width,canvas.height); ctx.clearRect(0,0,canvas.width,canvas.height);
}, },
@ -150,7 +150,7 @@ jQuery.fn.springy = function(params) {
var x2 = toScreen(p2).x; var x2 = toScreen(p2).x;
var y2 = toScreen(p2).y; 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 normal = direction.normal().normalise();
var from = graph.getEdges(edge.source, edge.target); var from = graph.getEdges(edge.source, edge.target);
@ -290,7 +290,7 @@ jQuery.fn.springy = function(params) {
return false; 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) { function intersect_line_box(p1, p2, p3, w, h) {