Updated to match namespaced code
This commit is contained in:
Dennis Hotson
parent
f8e3ae7c62
commit
7d1bc9ec5c
|
|
@ -3,26 +3,28 @@
|
|||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
|
||||
<script src="springy.js"></script>
|
||||
<script src="springyui.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
var graph = new Graph();
|
||||
graph.loadJSON(
|
||||
{
|
||||
var graphJSON = {
|
||||
"nodes": [
|
||||
'Amphitryon',
|
||||
'Alcmene',
|
||||
'Iphicles',
|
||||
'Heracles'
|
||||
"Amphitryon",
|
||||
"Alcmene",
|
||||
"Iphicles",
|
||||
"Heracles"
|
||||
],
|
||||
"edges": [
|
||||
['Amphitryon', 'Alcmene'],
|
||||
['Alcmene', 'Amphitryon'],
|
||||
['Amphitryon', 'Iphicles'],
|
||||
['Amphitryon', 'Heracles']
|
||||
["Amphitryon", "Alcmene"],
|
||||
["Alcmene", "Amphitryon"],
|
||||
["Amphitryon", "Iphicles"],
|
||||
["Amphitryon", "Heracles"]
|
||||
]
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
jQuery(function(){
|
||||
var graph = new Springy.Graph();
|
||||
graph.loadJSON(graphJSON);
|
||||
|
||||
var springy = jQuery('#springydemo').springy({
|
||||
graph: graph
|
||||
});
|
||||
|
|
@ -30,5 +32,7 @@ jQuery(function(){
|
|||
</script>
|
||||
|
||||
<canvas id="springydemo" width="640" height="480" />
|
||||
|
||||
|
||||
</body>
|
||||
</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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
32
demo2.html
32
demo2.html
|
|
@ -1,32 +0,0 @@
|
|||
<html>
|
||||
<body>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
|
||||
<script src="springy.js"></script>
|
||||
<script src="springyui.js"></script>
|
||||
<script>
|
||||
var graph = new Graph();
|
||||
graph.addNodes('Dennis', 'Michael', 'Jessica', 'Timothy', 'Barbara', 'Franklin')
|
||||
graph.addNodes('Monty', 'James');
|
||||
|
||||
graph.addEdges(
|
||||
['Dennis', 'Michael', {color: '#00A0B0', label: 'Foo bar'}],
|
||||
['Michael', 'Dennis', {color: '#6A4A3C'}],
|
||||
['Michael', 'Jessica', {color: '#CC333F'}],
|
||||
['Jessica', 'Barbara', {color: '#EB6841'}],
|
||||
['Michael', 'Timothy', {color: '#EDC951'}],
|
||||
['Franklin', 'Monty', {color: '#7DBE3C'}],
|
||||
['Dennis', 'Monty', {color: '#000000'}],
|
||||
['Monty', 'James'],
|
||||
['Barbara', 'Timothy', {color: '#6A4A3C'}]
|
||||
);
|
||||
|
||||
jQuery(function(){
|
||||
var springy = jQuery('#springydemo').springy({
|
||||
graph: graph
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas id="springydemo" width="640" height="480" />
|
||||
</body>
|
||||
</html>
|
||||
14
index.html
14
index.html
|
|
@ -124,7 +124,7 @@
|
|||
<script>
|
||||
(function() {
|
||||
// make a new graph
|
||||
var graph = new Graph();
|
||||
var graph = new Springy.Graph();
|
||||
|
||||
// make some nodes
|
||||
var node1 = graph.newNode({label: 'Norway Spruce'});
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
graph.newEdge(node2, node4);
|
||||
graph.newEdge(node1, node4);
|
||||
|
||||
var layout = new Layout.ForceDirected(
|
||||
var layout = new Springy.Layout.ForceDirected(
|
||||
graph,
|
||||
200.0, // Spring stiffness
|
||||
400.0, // Node repulsion
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
var canvas = document.getElementById('demo');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
var renderer = new Renderer(layout,
|
||||
var renderer = new Springy.Renderer(layout,
|
||||
function clear() {
|
||||
ctx.clearRect(0, 0, 650, 300);
|
||||
},
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
<p>Here's how to create a graph and add nodes and edges:</p>
|
||||
<pre>
|
||||
<span class="Comment">// make a new graph</span>
|
||||
<span class="Identifier">var</span><span class="Special"> graph = </span><span class="Normal">new</span><span class="Special"> Graph</span>()<span class="Special">;</span>
|
||||
<span class="Identifier">var</span><span class="Special"> graph = </span><span class="Normal">new</span><span class="Special"> Springy.Graph</span>()<span class="Special">;</span>
|
||||
|
||||
<span class="Comment">// make some nodes</span>
|
||||
<span class="Identifier">var</span><span class="Special"> spruce = graph.newNode</span>(<span class="Function">{</span><span class="Special">label: </span><span class="String">'Norway Spruce'</span><span class="Function">}</span>)<span class="Special">;</span>
|
||||
|
|
@ -226,10 +226,10 @@
|
|||
<h3>Do your own rendering</h3>
|
||||
<p>If you're keen to do your own custom drawing or interaction—there's a few extra things you'll need to know.</p>
|
||||
|
||||
<p>The core Springy layout algorithm is in the Layout.ForceDirected class.</p>
|
||||
<p>The core Springy layout algorithm is in the Springy.Layout.ForceDirected class.</p>
|
||||
<p>When creating a layout object, there are a few parameters you can tune to make the graph layout algorithm behave how you like:</p>
|
||||
<pre>
|
||||
<span class="Identifier">var</span> layout = <span class="Normal">new</span> Layout.ForceDirected(
|
||||
<span class="Identifier">var</span> layout = <span class="Normal">new</span> Springy.Layout.ForceDirected(
|
||||
graph,
|
||||
<span class="Constant">400</span>.<span class="Constant">0</span>, <span class="Comment">// Spring stiffness</span>
|
||||
<span class="Constant">400</span>.<span class="Constant">0</span>, <span class="Comment">// Node repulsion</span>
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
You just need to provide some callbacks to do the actual drawing:
|
||||
</p>
|
||||
<pre>
|
||||
<span class="Identifier">var</span> renderer = <span class="Normal">new</span> Renderer(
|
||||
<span class="Identifier">var</span> renderer = <span class="Normal">new</span> Springy.Renderer(
|
||||
layout,
|
||||
<span class="Function">function</span> clear() <span class="Function">{</span>
|
||||
<span class="Comment">// code to clear screen</span>
|
||||
|
|
|
|||
50
springy.js
50
springy.js
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* Springy v1.2.0
|
||||
* Springy v2.0.0
|
||||
*
|
||||
* Copyright (c) 2010 Dennis Hotson
|
||||
*
|
||||
|
|
@ -25,10 +25,23 @@
|
|||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
// Enable strict mode for EC5 compatible browsers
|
||||
"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.nodes = [];
|
||||
this.edges = [];
|
||||
|
|
@ -39,7 +52,7 @@ var Graph = function() {
|
|||
this.eventListeners = [];
|
||||
};
|
||||
|
||||
var Node = function(id, data) {
|
||||
var Node = Springy.Node = function(id, data) {
|
||||
this.id = id;
|
||||
this.data = (data !== undefined) ? data : {};
|
||||
|
||||
|
|
@ -49,9 +62,8 @@ var Node = function(id, data) {
|
|||
// this.data.label
|
||||
};
|
||||
|
||||
var Edge = function(id, source, target, data) {
|
||||
var Edge = Springy.Edge = function(id, source, target, data) {
|
||||
this.id = id;
|
||||
/** @type {Node} */
|
||||
this.source = source;
|
||||
this.target = target;
|
||||
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) {
|
||||
this.graph = graph;
|
||||
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! ;-)
|
||||
|
||||
Layout.requestAnimationFrame = __bind(window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame ||
|
||||
function(callback, element) {
|
||||
window.setTimeout(callback, 10);
|
||||
}, window);
|
||||
Springy.requestAnimationFrame = __bind(root.requestAnimationFrame ||
|
||||
root.webkitRequestAnimationFrame ||
|
||||
root.mozRequestAnimationFrame ||
|
||||
root.oRequestAnimationFrame ||
|
||||
root.msRequestAnimationFrame ||
|
||||
(function(callback, element) {
|
||||
root.setTimeout(callback, 10);
|
||||
}), root);
|
||||
|
||||
|
||||
// start simulation
|
||||
|
|
@ -470,7 +482,7 @@ Layout.ForceDirected.prototype.start = function(render, done) {
|
|||
this._started = true;
|
||||
this._stop = false;
|
||||
|
||||
Layout.requestAnimationFrame(function step() {
|
||||
Springy.requestAnimationFrame(function step() {
|
||||
t.applyCoulombsLaw();
|
||||
t.applyHookesLaw();
|
||||
t.attractToCentre();
|
||||
|
|
@ -486,7 +498,7 @@ Layout.ForceDirected.prototype.start = function(render, done) {
|
|||
t._started = false;
|
||||
if (done !== undefined) { done(); }
|
||||
} else {
|
||||
Layout.requestAnimationFrame(step);
|
||||
Springy.requestAnimationFrame(step);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -538,7 +550,7 @@ Layout.ForceDirected.prototype.getBoundingBox = function() {
|
|||
|
||||
|
||||
// Vector
|
||||
var Vector = function(x, y) {
|
||||
var Vector = Springy.Vector = function(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
};
|
||||
|
|
@ -605,7 +617,7 @@ Layout.ForceDirected.Spring = function(point1, point2, length, k) {
|
|||
// };
|
||||
|
||||
// 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.clear = clear;
|
||||
this.drawEdge = drawEdge;
|
||||
|
|
@ -664,4 +676,4 @@ if ( !Array.prototype.forEach ) {
|
|||
}
|
||||
};
|
||||
}
|
||||
|
||||
}).call(this);
|
||||
|
|
|
|||
24
springyui.js
24
springyui.js
|
|
@ -26,7 +26,7 @@ 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 stiffness = params.stiffness || 400.0;
|
||||
var repulsion = params.repulsion || 400.0;
|
||||
|
|
@ -36,14 +36,14 @@ jQuery.fn.springy = function(params) {
|
|||
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);
|
||||
|
||||
// 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,7 +53,7 @@ jQuery.fn.springy = function(params) {
|
|||
.divide(10))
|
||||
};
|
||||
|
||||
Layout.requestAnimationFrame(adjust);
|
||||
Springy.requestAnimationFrame(adjust);
|
||||
});
|
||||
|
||||
// convert to/from screen coordinates
|
||||
|
|
@ -61,14 +61,14 @@ jQuery.fn.springy = function(params) {
|
|||
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 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,7 +120,7 @@ jQuery.fn.springy = function(params) {
|
|||
dragged = null;
|
||||
});
|
||||
|
||||
Node.prototype.getWidth = function() {
|
||||
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];
|
||||
|
|
@ -136,11 +136,11 @@ jQuery.fn.springy = function(params) {
|
|||
return width;
|
||||
};
|
||||
|
||||
Node.prototype.getHeight = function() {
|
||||
Springy.Node.prototype.getHeight = function() {
|
||||
return 20;
|
||||
};
|
||||
|
||||
var renderer = this.renderer = new Renderer(layout,
|
||||
var renderer = this.renderer = new Springy.Renderer(layout,
|
||||
function clear() {
|
||||
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
},
|
||||
|
|
@ -150,7 +150,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);
|
||||
|
|
@ -290,7 +290,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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user