schema_designer 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/Rakefile +34 -0
- data/app/assets/javascripts/schema_designer/_potential_schema.js.coffee +31 -0
- data/app/assets/javascripts/schema_designer/application.js +16 -0
- data/app/assets/javascripts/schema_designer/backbone.js +1581 -0
- data/app/assets/javascripts/schema_designer/jquery.autocomplete.js +645 -0
- data/app/assets/javascripts/schema_designer/schema.js +181 -0
- data/app/assets/javascripts/schema_designer/springy.js +697 -0
- data/app/assets/javascripts/schema_designer/underscore.js +1276 -0
- data/app/assets/stylesheets/schema_designer/application.css +13 -0
- data/app/assets/stylesheets/schema_designer/schema.css +35 -0
- data/app/controllers/schema_designer/application_controller.rb +6 -0
- data/app/controllers/schema_designer/schema_controller.rb +137 -0
- data/app/views/layouts/schema_designer/application.html.erb +14 -0
- data/app/views/schema_designer/schema/index.html.erb +19 -0
- data/config/routes.rb +10 -0
- data/lib/schema_designer.rb +4 -0
- data/lib/schema_designer/engine.rb +5 -0
- data/lib/schema_designer/version.rb +3 -0
- data/test/controllers/schema_designer/schema_controller_test.rb +11 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +13 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +23 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +29 -0
- data/test/dummy/config/environments/production.rb +80 -0
- data/test/dummy/config/environments/test.rb +36 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +12 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +4 -0
- data/test/dummy/public/404.html +58 -0
- data/test/dummy/public/422.html +58 -0
- data/test/dummy/public/500.html +57 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/helpers/schema_designer/schema_helper_test.rb +6 -0
- data/test/integration/navigation_test.rb +10 -0
- data/test/schema_designer_test.rb +7 -0
- data/test/test_helper.rb +15 -0
- metadata +163 -0
@@ -0,0 +1,181 @@
|
|
1
|
+
function stringToColour(str, alpha) {
|
2
|
+
for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));
|
3
|
+
for (var i = 0, colour = "rgba("; i < 3; colour += ((hash >> i++ * 8) & 0xFF) + ', ');
|
4
|
+
return colour + alpha + ')';
|
5
|
+
}
|
6
|
+
$(function() {
|
7
|
+
|
8
|
+
function makeAutcompletable($el, tabDisabled) {
|
9
|
+
$el.autocomplete({
|
10
|
+
lookup: ['primary_key', 'string', 'text', 'integer', 'float', 'decimal', 'datetime', 'timestamp', 'time', 'date', 'binary', 'boolean', 'references'],
|
11
|
+
delimiter: /:/,
|
12
|
+
autoSelectFirst: true,
|
13
|
+
tabDisabled: tabDisabled
|
14
|
+
});
|
15
|
+
}
|
16
|
+
makeAutcompletable($('#bar input[type=text]'), true);
|
17
|
+
|
18
|
+
var Tables = [];
|
19
|
+
$('#bar form').submit(function() {
|
20
|
+
var text = $('#bar form input[type=text]').val(),
|
21
|
+
vals = text.split(/\s+/),
|
22
|
+
table_name = vals.shift();
|
23
|
+
if (table_name[table_name.length - 1] !== 's') {
|
24
|
+
table_name += 's';
|
25
|
+
}
|
26
|
+
table = {
|
27
|
+
id: 1000 + Math.random() * 1000,
|
28
|
+
name: table_name,
|
29
|
+
hasId: true,
|
30
|
+
hasTimestamps: true,
|
31
|
+
columns: vals.map(function(val) {
|
32
|
+
_ref = val.split(':');
|
33
|
+
return {name: _ref[0], type: (_ref[1] || "string"), id: (1000 + Math.random() * 1000)};
|
34
|
+
})
|
35
|
+
};
|
36
|
+
|
37
|
+
addTable(table);
|
38
|
+
this.reset();
|
39
|
+
return false;
|
40
|
+
});
|
41
|
+
|
42
|
+
$('#output').click(function() {
|
43
|
+
var name = prompt("Write a descriptive name").split(/\s+/).map(function(word) {
|
44
|
+
return word[0].toUpperCase() + word.slice(1).toLowerCase();
|
45
|
+
}).join('');
|
46
|
+
$.post('/_schema', {tables: JSON.stringify(Tables), name: name}, function() {
|
47
|
+
INITIAL_DATA = Tables;
|
48
|
+
alert("Saved.")
|
49
|
+
});
|
50
|
+
return false;
|
51
|
+
});
|
52
|
+
|
53
|
+
function updateColumns($table, name) {
|
54
|
+
for (var i = 0; i < Tables.length; i++) {
|
55
|
+
if (Tables[i].name === name) {
|
56
|
+
cols = $table.find('tr:gt(1):not(:last-child)').map(function(i, row) {
|
57
|
+
inputs = $(row).find("input");
|
58
|
+
var name = inputs.first().val(), type = inputs.last().val();
|
59
|
+
return {name: name, type: type, id: $(row).data('id')};
|
60
|
+
});
|
61
|
+
Tables[i].columns = cols.toArray();
|
62
|
+
}
|
63
|
+
}
|
64
|
+
recalculateEdges();
|
65
|
+
}
|
66
|
+
|
67
|
+
function addRow(c, $table, table) {
|
68
|
+
var style = '';
|
69
|
+
if (c.type === 'references') {
|
70
|
+
style = " style='background: "+stringToColour(c.name + 's', 0.5)+"'"
|
71
|
+
}
|
72
|
+
var $source = $("<tr"+style+" data-id='"+c.id+"'><td><input type=text placeholder='Column name' value='" + c.name + "' name=name /></td><td><input type=text value='"+c.type+"' name=type placeholder='Type' /></td><td><button>x</button></tr>");
|
73
|
+
$source.find('input[type=text]').change(function() {
|
74
|
+
updateColumns($(this).parents('table'), table.name);
|
75
|
+
});
|
76
|
+
$source.find('button').click(function() {
|
77
|
+
$table = $(this).parents('table');
|
78
|
+
$(this).parents('tr').remove();
|
79
|
+
updateColumns($table, table.name);
|
80
|
+
})
|
81
|
+
makeAutcompletable($source.find('input[name=type]'), false);
|
82
|
+
$table.find('tr:last-child').before($source);
|
83
|
+
}
|
84
|
+
|
85
|
+
|
86
|
+
function addTable(table) {
|
87
|
+
Tables.push(table);
|
88
|
+
store[table.name] = graph.newNode({label: table.name});
|
89
|
+
recalculateEdges();
|
90
|
+
source = "<table id='table-" + table.name + "'><tr><th style='background: "+stringToColour(table.name, 0.8)+"' colspan=3>" + table.name + "</th></tr>" +
|
91
|
+
"<tr><td><label><input type=checkbox name=hasId " + (table.hasId ? 'checked' : '') + " />Primary key</label></td>" +
|
92
|
+
"<td><label><input type=checkbox name=hasTimestamps "+ (table.hasTimestamps ? 'checked' : '') + " />Timestamps</label></td><td> </td></tr>" +
|
93
|
+
"<tr><td colspan=3><a href='#'>Add row</a></td></tr></table>";
|
94
|
+
var $source = $(source);
|
95
|
+
table.columns.forEach(function(column) {addRow(column, $source, table)})
|
96
|
+
$source.find('input[type=checkbox]').change(function() {
|
97
|
+
for (var i = 0; i < Tables.length; i++) {
|
98
|
+
if (Tables[i].name === table.name) {
|
99
|
+
Tables[i][this.name] = this.checked;
|
100
|
+
}
|
101
|
+
}
|
102
|
+
});
|
103
|
+
$source.find('a').click(function() {
|
104
|
+
addRow({name: '', type: '', id: 1000 + Math.random() * 1000}, $source, table);
|
105
|
+
});
|
106
|
+
$('#chart').append($source);
|
107
|
+
}
|
108
|
+
|
109
|
+
//var INITIAL_DATA ||= [];
|
110
|
+
|
111
|
+
|
112
|
+
|
113
|
+
|
114
|
+
// Graph handling
|
115
|
+
// --------------
|
116
|
+
|
117
|
+
var graph = new Springy.Graph(),
|
118
|
+
layout = new Springy.Layout.ForceDirected(graph, 400, 400.0, 0.5),
|
119
|
+
renderer,
|
120
|
+
store = {},
|
121
|
+
currentBB = layout.getBoundingBox(),
|
122
|
+
targetBB = {bottomleft: new Springy.Vector(-2, -2), topright: new Springy.Vector(2, 2)};
|
123
|
+
|
124
|
+
function recalculateEdges() {
|
125
|
+
Tables.forEach(function(t) {
|
126
|
+
t.columns.forEach(function(c) {
|
127
|
+
if (c.type === "references" && store[c.name + 's']) {
|
128
|
+
if (graph.getEdges(store[t.name], store[c.name + 's']).length == 0) {
|
129
|
+
graph.newEdge(store[t.name], store[c.name + 's'], {colour: stringToColour(c.name + 's', 1)});
|
130
|
+
}
|
131
|
+
}
|
132
|
+
});
|
133
|
+
});
|
134
|
+
}
|
135
|
+
Springy.requestAnimationFrame(function adjust() {
|
136
|
+
targetBB = layout.getBoundingBox();
|
137
|
+
// current gets 20% closer to target every iteration
|
138
|
+
currentBB = {
|
139
|
+
bottomleft: currentBB.bottomleft.add( targetBB.bottomleft.subtract(currentBB.bottomleft)
|
140
|
+
.divide(10)),
|
141
|
+
topright: currentBB.topright.add( targetBB.topright.subtract(currentBB.topright)
|
142
|
+
.divide(10))
|
143
|
+
};
|
144
|
+
|
145
|
+
Springy.requestAnimationFrame(adjust);
|
146
|
+
});
|
147
|
+
var toScreen = function(p) {
|
148
|
+
var size = currentBB.topright.subtract(currentBB.bottomleft);
|
149
|
+
var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * ($(window).width() - 200);
|
150
|
+
var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * ($(window).height() - 200);
|
151
|
+
return new Springy.Vector(sx, sy);
|
152
|
+
};
|
153
|
+
renderer = new Springy.Renderer(layout,
|
154
|
+
function clear() {
|
155
|
+
// code to clear screen
|
156
|
+
},
|
157
|
+
function drawEdge(edge, p1, p2) {
|
158
|
+
var path;
|
159
|
+
if (!edge.path) {
|
160
|
+
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
161
|
+
path.setAttribute('stroke-width', "2");
|
162
|
+
path.setAttribute('fill', 'none');
|
163
|
+
path.setAttribute('stroke', edge.data.colour);
|
164
|
+
edge.path = path;
|
165
|
+
$("svg").append(path);
|
166
|
+
}
|
167
|
+
p1 = toScreen(p1), p2 = toScreen(p2);
|
168
|
+
var r = Math.round;
|
169
|
+
|
170
|
+
edge.path.setAttribute('d', "M"+r(p1.x) + " " + r(p1.y) + " L " + r(p2.x) + " " + r(p2.y));
|
171
|
+
},
|
172
|
+
function drawNode(node, p) {
|
173
|
+
p = toScreen(p);
|
174
|
+
//console.log(node.data.label, p.x, p.y, $("#table-" + node.data.label));
|
175
|
+
$("#table-" + node.data.label).css({top: p.y, left: p.x});
|
176
|
+
});
|
177
|
+
renderer.start()
|
178
|
+
|
179
|
+
|
180
|
+
INITIAL_DATA.forEach(addTable);
|
181
|
+
});
|
@@ -0,0 +1,697 @@
|
|
1
|
+
/**
|
2
|
+
* Springy v2.0.1
|
3
|
+
*
|
4
|
+
* Copyright (c) 2010 Dennis Hotson
|
5
|
+
*
|
6
|
+
* Permission is hereby granted, free of charge, to any person
|
7
|
+
* obtaining a copy of this software and associated documentation
|
8
|
+
* files (the "Software"), to deal in the Software without
|
9
|
+
* restriction, including without limitation the rights to use,
|
10
|
+
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
11
|
+
* copies of the Software, and to permit persons to whom the
|
12
|
+
* Software is furnished to do so, subject to the following
|
13
|
+
* conditions:
|
14
|
+
*
|
15
|
+
* The above copyright notice and this permission notice shall be
|
16
|
+
* included in all copies or substantial portions of the Software.
|
17
|
+
*
|
18
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
19
|
+
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
20
|
+
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
21
|
+
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
22
|
+
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
23
|
+
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
24
|
+
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
25
|
+
* OTHER DEALINGS IN THE SOFTWARE.
|
26
|
+
*/
|
27
|
+
|
28
|
+
(function() {
|
29
|
+
// Enable strict mode for EC5 compatible browsers
|
30
|
+
"use strict";
|
31
|
+
|
32
|
+
// Establish the root object, `window` in the browser, or `global` on the server.
|
33
|
+
var root = this;
|
34
|
+
|
35
|
+
// The top-level namespace. All public Springy classes and modules will
|
36
|
+
// be attached to this. Exported for both CommonJS and the browser.
|
37
|
+
var Springy;
|
38
|
+
if (typeof exports !== 'undefined') {
|
39
|
+
Springy = exports;
|
40
|
+
} else {
|
41
|
+
Springy = root.Springy = {};
|
42
|
+
}
|
43
|
+
|
44
|
+
var Graph = Springy.Graph = function() {
|
45
|
+
this.nodeSet = {};
|
46
|
+
this.nodes = [];
|
47
|
+
this.edges = [];
|
48
|
+
this.adjacency = {};
|
49
|
+
|
50
|
+
this.nextNodeId = 0;
|
51
|
+
this.nextEdgeId = 0;
|
52
|
+
this.eventListeners = [];
|
53
|
+
};
|
54
|
+
|
55
|
+
var Node = Springy.Node = function(id, data) {
|
56
|
+
this.id = id;
|
57
|
+
this.data = (data !== undefined) ? data : {};
|
58
|
+
|
59
|
+
// Data fields used by layout algorithm in this file:
|
60
|
+
// this.data.mass
|
61
|
+
// Data used by default renderer in springyui.js
|
62
|
+
// this.data.label
|
63
|
+
};
|
64
|
+
|
65
|
+
var Edge = Springy.Edge = function(id, source, target, data) {
|
66
|
+
this.id = id;
|
67
|
+
this.source = source;
|
68
|
+
this.target = target;
|
69
|
+
this.data = (data !== undefined) ? data : {};
|
70
|
+
|
71
|
+
// Edge data field used by layout alorithm
|
72
|
+
// this.data.length
|
73
|
+
// this.data.type
|
74
|
+
};
|
75
|
+
|
76
|
+
Graph.prototype.addNode = function(node) {
|
77
|
+
if (!(node.id in this.nodeSet)) {
|
78
|
+
this.nodes.push(node);
|
79
|
+
}
|
80
|
+
|
81
|
+
this.nodeSet[node.id] = node;
|
82
|
+
|
83
|
+
this.notify();
|
84
|
+
return node;
|
85
|
+
};
|
86
|
+
|
87
|
+
Graph.prototype.addNodes = function() {
|
88
|
+
// accepts variable number of arguments, where each argument
|
89
|
+
// is a string that becomes both node identifier and label
|
90
|
+
for (var i = 0; i < arguments.length; i++) {
|
91
|
+
var name = arguments[i];
|
92
|
+
var node = new Node(name, {label:name});
|
93
|
+
this.addNode(node);
|
94
|
+
}
|
95
|
+
};
|
96
|
+
|
97
|
+
Graph.prototype.addEdge = function(edge) {
|
98
|
+
var exists = false;
|
99
|
+
this.edges.forEach(function(e) {
|
100
|
+
if (edge.id === e.id) { exists = true; }
|
101
|
+
});
|
102
|
+
|
103
|
+
if (!exists) {
|
104
|
+
this.edges.push(edge);
|
105
|
+
}
|
106
|
+
|
107
|
+
if (!(edge.source.id in this.adjacency)) {
|
108
|
+
this.adjacency[edge.source.id] = {};
|
109
|
+
}
|
110
|
+
if (!(edge.target.id in this.adjacency[edge.source.id])) {
|
111
|
+
this.adjacency[edge.source.id][edge.target.id] = [];
|
112
|
+
}
|
113
|
+
|
114
|
+
exists = false;
|
115
|
+
this.adjacency[edge.source.id][edge.target.id].forEach(function(e) {
|
116
|
+
if (edge.id === e.id) { exists = true; }
|
117
|
+
});
|
118
|
+
|
119
|
+
if (!exists) {
|
120
|
+
this.adjacency[edge.source.id][edge.target.id].push(edge);
|
121
|
+
}
|
122
|
+
|
123
|
+
this.notify();
|
124
|
+
return edge;
|
125
|
+
};
|
126
|
+
|
127
|
+
Graph.prototype.addEdges = function() {
|
128
|
+
// accepts variable number of arguments, where each argument
|
129
|
+
// is a triple [nodeid1, nodeid2, attributes]
|
130
|
+
for (var i = 0; i < arguments.length; i++) {
|
131
|
+
var e = arguments[i];
|
132
|
+
var node1 = this.nodeSet[e[0]];
|
133
|
+
if (node1 == undefined) {
|
134
|
+
throw new TypeError("invalid node name: " + e[0]);
|
135
|
+
}
|
136
|
+
var node2 = this.nodeSet[e[1]];
|
137
|
+
if (node2 == undefined) {
|
138
|
+
throw new TypeError("invalid node name: " + e[1]);
|
139
|
+
}
|
140
|
+
var attr = e[2];
|
141
|
+
|
142
|
+
this.newEdge(node1, node2, attr);
|
143
|
+
}
|
144
|
+
};
|
145
|
+
|
146
|
+
Graph.prototype.newNode = function(data) {
|
147
|
+
var node = new Node(this.nextNodeId++, data);
|
148
|
+
this.addNode(node);
|
149
|
+
return node;
|
150
|
+
};
|
151
|
+
|
152
|
+
Graph.prototype.newEdge = function(source, target, data) {
|
153
|
+
var edge = new Edge(this.nextEdgeId++, source, target, data);
|
154
|
+
this.addEdge(edge);
|
155
|
+
return edge;
|
156
|
+
};
|
157
|
+
|
158
|
+
|
159
|
+
// add nodes and edges from JSON object
|
160
|
+
Graph.prototype.loadJSON = function(json) {
|
161
|
+
/**
|
162
|
+
Springy's simple JSON format for graphs.
|
163
|
+
|
164
|
+
historically, Springy uses separate lists
|
165
|
+
of nodes and edges:
|
166
|
+
|
167
|
+
{
|
168
|
+
"nodes": [
|
169
|
+
"center",
|
170
|
+
"left",
|
171
|
+
"right",
|
172
|
+
"up",
|
173
|
+
"satellite"
|
174
|
+
],
|
175
|
+
"edges": [
|
176
|
+
["center", "left"],
|
177
|
+
["center", "right"],
|
178
|
+
["center", "up"]
|
179
|
+
]
|
180
|
+
}
|
181
|
+
|
182
|
+
**/
|
183
|
+
// parse if a string is passed (EC5+ browsers)
|
184
|
+
if (typeof json == 'string' || json instanceof String) {
|
185
|
+
json = JSON.parse( json );
|
186
|
+
}
|
187
|
+
|
188
|
+
if ('nodes' in json || 'edges' in json) {
|
189
|
+
this.addNodes.apply(this, json['nodes']);
|
190
|
+
this.addEdges.apply(this, json['edges']);
|
191
|
+
}
|
192
|
+
}
|
193
|
+
|
194
|
+
|
195
|
+
// find the edges from node1 to node2
|
196
|
+
Graph.prototype.getEdges = function(node1, node2) {
|
197
|
+
if (node1.id in this.adjacency
|
198
|
+
&& node2.id in this.adjacency[node1.id]) {
|
199
|
+
return this.adjacency[node1.id][node2.id];
|
200
|
+
}
|
201
|
+
|
202
|
+
return [];
|
203
|
+
};
|
204
|
+
|
205
|
+
// remove a node and it's associated edges from the graph
|
206
|
+
Graph.prototype.removeNode = function(node) {
|
207
|
+
if (node.id in this.nodeSet) {
|
208
|
+
delete this.nodeSet[node.id];
|
209
|
+
}
|
210
|
+
|
211
|
+
for (var i = this.nodes.length - 1; i >= 0; i--) {
|
212
|
+
if (this.nodes[i].id === node.id) {
|
213
|
+
this.nodes.splice(i, 1);
|
214
|
+
}
|
215
|
+
}
|
216
|
+
|
217
|
+
this.detachNode(node);
|
218
|
+
};
|
219
|
+
|
220
|
+
// removes edges associated with a given node
|
221
|
+
Graph.prototype.detachNode = function(node) {
|
222
|
+
var tmpEdges = this.edges.slice();
|
223
|
+
tmpEdges.forEach(function(e) {
|
224
|
+
if (e.source.id === node.id || e.target.id === node.id) {
|
225
|
+
this.removeEdge(e);
|
226
|
+
}
|
227
|
+
}, this);
|
228
|
+
|
229
|
+
this.notify();
|
230
|
+
};
|
231
|
+
|
232
|
+
// remove a node and it's associated edges from the graph
|
233
|
+
Graph.prototype.removeEdge = function(edge) {
|
234
|
+
for (var i = this.edges.length - 1; i >= 0; i--) {
|
235
|
+
if (this.edges[i].id === edge.id) {
|
236
|
+
this.edges.splice(i, 1);
|
237
|
+
}
|
238
|
+
}
|
239
|
+
|
240
|
+
for (var x in this.adjacency) {
|
241
|
+
for (var y in this.adjacency[x]) {
|
242
|
+
var edges = this.adjacency[x][y];
|
243
|
+
|
244
|
+
for (var j=edges.length - 1; j>=0; j--) {
|
245
|
+
if (this.adjacency[x][y][j].id === edge.id) {
|
246
|
+
this.adjacency[x][y].splice(j, 1);
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
// Clean up empty edge arrays
|
251
|
+
if (this.adjacency[x][y].length == 0) {
|
252
|
+
delete this.adjacency[x][y];
|
253
|
+
}
|
254
|
+
}
|
255
|
+
|
256
|
+
// Clean up empty objects
|
257
|
+
if (isEmpty(this.adjacency[x])) {
|
258
|
+
delete this.adjacency[x];
|
259
|
+
}
|
260
|
+
}
|
261
|
+
|
262
|
+
this.notify();
|
263
|
+
};
|
264
|
+
|
265
|
+
/* Merge a list of nodes and edges into the current graph. eg.
|
266
|
+
var o = {
|
267
|
+
nodes: [
|
268
|
+
{id: 123, data: {type: 'user', userid: 123, displayname: 'aaa'}},
|
269
|
+
{id: 234, data: {type: 'user', userid: 234, displayname: 'bbb'}}
|
270
|
+
],
|
271
|
+
edges: [
|
272
|
+
{from: 0, to: 1, type: 'submitted_design', directed: true, data: {weight: }}
|
273
|
+
]
|
274
|
+
}
|
275
|
+
*/
|
276
|
+
Graph.prototype.merge = function(data) {
|
277
|
+
var nodes = [];
|
278
|
+
data.nodes.forEach(function(n) {
|
279
|
+
nodes.push(this.addNode(new Node(n.id, n.data)));
|
280
|
+
}, this);
|
281
|
+
|
282
|
+
data.edges.forEach(function(e) {
|
283
|
+
var from = nodes[e.from];
|
284
|
+
var to = nodes[e.to];
|
285
|
+
|
286
|
+
var id = (e.directed)
|
287
|
+
? (id = e.type + "-" + from.id + "-" + to.id)
|
288
|
+
: (from.id < to.id) // normalise id for non-directed edges
|
289
|
+
? e.type + "-" + from.id + "-" + to.id
|
290
|
+
: e.type + "-" + to.id + "-" + from.id;
|
291
|
+
|
292
|
+
var edge = this.addEdge(new Edge(id, from, to, e.data));
|
293
|
+
edge.data.type = e.type;
|
294
|
+
}, this);
|
295
|
+
};
|
296
|
+
|
297
|
+
Graph.prototype.filterNodes = function(fn) {
|
298
|
+
var tmpNodes = this.nodes.slice();
|
299
|
+
tmpNodes.forEach(function(n) {
|
300
|
+
if (!fn(n)) {
|
301
|
+
this.removeNode(n);
|
302
|
+
}
|
303
|
+
}, this);
|
304
|
+
};
|
305
|
+
|
306
|
+
Graph.prototype.filterEdges = function(fn) {
|
307
|
+
var tmpEdges = this.edges.slice();
|
308
|
+
tmpEdges.forEach(function(e) {
|
309
|
+
if (!fn(e)) {
|
310
|
+
this.removeEdge(e);
|
311
|
+
}
|
312
|
+
}, this);
|
313
|
+
};
|
314
|
+
|
315
|
+
|
316
|
+
Graph.prototype.addGraphListener = function(obj) {
|
317
|
+
this.eventListeners.push(obj);
|
318
|
+
};
|
319
|
+
|
320
|
+
Graph.prototype.notify = function() {
|
321
|
+
this.eventListeners.forEach(function(obj){
|
322
|
+
obj.graphChanged();
|
323
|
+
});
|
324
|
+
};
|
325
|
+
|
326
|
+
// -----------
|
327
|
+
var Layout = Springy.Layout = {};
|
328
|
+
Layout.ForceDirected = function(graph, stiffness, repulsion, damping) {
|
329
|
+
this.graph = graph;
|
330
|
+
this.stiffness = stiffness; // spring stiffness constant
|
331
|
+
this.repulsion = repulsion; // repulsion constant
|
332
|
+
this.damping = damping; // velocity damping factor
|
333
|
+
|
334
|
+
this.nodePoints = {}; // keep track of points associated with nodes
|
335
|
+
this.edgeSprings = {}; // keep track of springs associated with edges
|
336
|
+
};
|
337
|
+
|
338
|
+
Layout.ForceDirected.prototype.point = function(node) {
|
339
|
+
if (!(node.id in this.nodePoints)) {
|
340
|
+
var mass = (node.data.mass !== undefined) ? node.data.mass : 1.0;
|
341
|
+
this.nodePoints[node.id] = new Layout.ForceDirected.Point(Vector.random(), mass);
|
342
|
+
}
|
343
|
+
|
344
|
+
return this.nodePoints[node.id];
|
345
|
+
};
|
346
|
+
|
347
|
+
Layout.ForceDirected.prototype.spring = function(edge) {
|
348
|
+
if (!(edge.id in this.edgeSprings)) {
|
349
|
+
var length = (edge.data.length !== undefined) ? edge.data.length : 1.0;
|
350
|
+
|
351
|
+
var existingSpring = false;
|
352
|
+
|
353
|
+
var from = this.graph.getEdges(edge.source, edge.target);
|
354
|
+
from.forEach(function(e) {
|
355
|
+
if (existingSpring === false && e.id in this.edgeSprings) {
|
356
|
+
existingSpring = this.edgeSprings[e.id];
|
357
|
+
}
|
358
|
+
}, this);
|
359
|
+
|
360
|
+
if (existingSpring !== false) {
|
361
|
+
return new Layout.ForceDirected.Spring(existingSpring.point1, existingSpring.point2, 0.0, 0.0);
|
362
|
+
}
|
363
|
+
|
364
|
+
var to = this.graph.getEdges(edge.target, edge.source);
|
365
|
+
from.forEach(function(e){
|
366
|
+
if (existingSpring === false && e.id in this.edgeSprings) {
|
367
|
+
existingSpring = this.edgeSprings[e.id];
|
368
|
+
}
|
369
|
+
}, this);
|
370
|
+
|
371
|
+
if (existingSpring !== false) {
|
372
|
+
return new Layout.ForceDirected.Spring(existingSpring.point2, existingSpring.point1, 0.0, 0.0);
|
373
|
+
}
|
374
|
+
|
375
|
+
this.edgeSprings[edge.id] = new Layout.ForceDirected.Spring(
|
376
|
+
this.point(edge.source), this.point(edge.target), length, this.stiffness
|
377
|
+
);
|
378
|
+
}
|
379
|
+
|
380
|
+
return this.edgeSprings[edge.id];
|
381
|
+
};
|
382
|
+
|
383
|
+
// callback should accept two arguments: Node, Point
|
384
|
+
Layout.ForceDirected.prototype.eachNode = function(callback) {
|
385
|
+
var t = this;
|
386
|
+
this.graph.nodes.forEach(function(n){
|
387
|
+
callback.call(t, n, t.point(n));
|
388
|
+
});
|
389
|
+
};
|
390
|
+
|
391
|
+
// callback should accept two arguments: Edge, Spring
|
392
|
+
Layout.ForceDirected.prototype.eachEdge = function(callback) {
|
393
|
+
var t = this;
|
394
|
+
this.graph.edges.forEach(function(e){
|
395
|
+
callback.call(t, e, t.spring(e));
|
396
|
+
});
|
397
|
+
};
|
398
|
+
|
399
|
+
// callback should accept one argument: Spring
|
400
|
+
Layout.ForceDirected.prototype.eachSpring = function(callback) {
|
401
|
+
var t = this;
|
402
|
+
this.graph.edges.forEach(function(e){
|
403
|
+
callback.call(t, t.spring(e));
|
404
|
+
});
|
405
|
+
};
|
406
|
+
|
407
|
+
|
408
|
+
// Physics stuff
|
409
|
+
Layout.ForceDirected.prototype.applyCoulombsLaw = function() {
|
410
|
+
this.eachNode(function(n1, point1) {
|
411
|
+
this.eachNode(function(n2, point2) {
|
412
|
+
if (point1 !== point2)
|
413
|
+
{
|
414
|
+
var d = point1.p.subtract(point2.p);
|
415
|
+
var distance = d.magnitude() + 0.1; // avoid massive forces at small distances (and divide by zero)
|
416
|
+
var direction = d.normalise();
|
417
|
+
|
418
|
+
// apply force to each end point
|
419
|
+
point1.applyForce(direction.multiply(this.repulsion).divide(distance * distance * 0.5));
|
420
|
+
point2.applyForce(direction.multiply(this.repulsion).divide(distance * distance * -0.5));
|
421
|
+
}
|
422
|
+
});
|
423
|
+
});
|
424
|
+
};
|
425
|
+
|
426
|
+
Layout.ForceDirected.prototype.applyHookesLaw = function() {
|
427
|
+
this.eachSpring(function(spring){
|
428
|
+
var d = spring.point2.p.subtract(spring.point1.p); // the direction of the spring
|
429
|
+
var displacement = spring.length - d.magnitude();
|
430
|
+
var direction = d.normalise();
|
431
|
+
|
432
|
+
// apply force to each end point
|
433
|
+
spring.point1.applyForce(direction.multiply(spring.k * displacement * -0.5));
|
434
|
+
spring.point2.applyForce(direction.multiply(spring.k * displacement * 0.5));
|
435
|
+
});
|
436
|
+
};
|
437
|
+
|
438
|
+
Layout.ForceDirected.prototype.attractToCentre = function() {
|
439
|
+
this.eachNode(function(node, point) {
|
440
|
+
var direction = point.p.multiply(-1.0);
|
441
|
+
point.applyForce(direction.multiply(this.repulsion / 50.0));
|
442
|
+
});
|
443
|
+
};
|
444
|
+
|
445
|
+
|
446
|
+
Layout.ForceDirected.prototype.updateVelocity = function(timestep) {
|
447
|
+
this.eachNode(function(node, point) {
|
448
|
+
// Is this, along with updatePosition below, the only places that your
|
449
|
+
// integration code exist?
|
450
|
+
point.v = point.v.add(point.a.multiply(timestep)).multiply(this.damping);
|
451
|
+
point.a = new Vector(0,0);
|
452
|
+
});
|
453
|
+
};
|
454
|
+
|
455
|
+
Layout.ForceDirected.prototype.updatePosition = function(timestep) {
|
456
|
+
this.eachNode(function(node, point) {
|
457
|
+
// Same question as above; along with updateVelocity, is this all of
|
458
|
+
// your integration code?
|
459
|
+
point.p = point.p.add(point.v.multiply(timestep));
|
460
|
+
});
|
461
|
+
};
|
462
|
+
|
463
|
+
// Calculate the total kinetic energy of the system
|
464
|
+
Layout.ForceDirected.prototype.totalEnergy = function(timestep) {
|
465
|
+
var energy = 0.0;
|
466
|
+
this.eachNode(function(node, point) {
|
467
|
+
var speed = point.v.magnitude();
|
468
|
+
energy += 0.5 * point.m * speed * speed;
|
469
|
+
});
|
470
|
+
|
471
|
+
return energy;
|
472
|
+
};
|
473
|
+
|
474
|
+
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; // stolen from coffeescript, thanks jashkenas! ;-)
|
475
|
+
|
476
|
+
Springy.requestAnimationFrame = __bind(root.requestAnimationFrame ||
|
477
|
+
root.webkitRequestAnimationFrame ||
|
478
|
+
root.mozRequestAnimationFrame ||
|
479
|
+
root.oRequestAnimationFrame ||
|
480
|
+
root.msRequestAnimationFrame ||
|
481
|
+
(function(callback, element) {
|
482
|
+
root.setTimeout(callback, 10);
|
483
|
+
}), root);
|
484
|
+
|
485
|
+
|
486
|
+
// start simulation
|
487
|
+
Layout.ForceDirected.prototype.start = function(render, done) {
|
488
|
+
var t = this;
|
489
|
+
|
490
|
+
if (this._started) return;
|
491
|
+
this._started = true;
|
492
|
+
this._stop = false;
|
493
|
+
|
494
|
+
Springy.requestAnimationFrame(function step() {
|
495
|
+
t.applyCoulombsLaw();
|
496
|
+
t.applyHookesLaw();
|
497
|
+
t.attractToCentre();
|
498
|
+
t.updateVelocity(0.03);
|
499
|
+
t.updatePosition(0.03);
|
500
|
+
|
501
|
+
if (render !== undefined) {
|
502
|
+
render();
|
503
|
+
}
|
504
|
+
|
505
|
+
// stop simulation when energy of the system goes below a threshold
|
506
|
+
if (t._stop || t.totalEnergy() < 0.01) {
|
507
|
+
t._started = false;
|
508
|
+
if (done !== undefined) { done(); }
|
509
|
+
} else {
|
510
|
+
Springy.requestAnimationFrame(step);
|
511
|
+
}
|
512
|
+
});
|
513
|
+
};
|
514
|
+
|
515
|
+
Layout.ForceDirected.prototype.stop = function() {
|
516
|
+
this._stop = true;
|
517
|
+
}
|
518
|
+
|
519
|
+
// Find the nearest point to a particular position
|
520
|
+
Layout.ForceDirected.prototype.nearest = function(pos) {
|
521
|
+
var min = {node: null, point: null, distance: null};
|
522
|
+
var t = this;
|
523
|
+
this.graph.nodes.forEach(function(n){
|
524
|
+
var point = t.point(n);
|
525
|
+
var distance = point.p.subtract(pos).magnitude();
|
526
|
+
|
527
|
+
if (min.distance === null || distance < min.distance) {
|
528
|
+
min = {node: n, point: point, distance: distance};
|
529
|
+
}
|
530
|
+
});
|
531
|
+
|
532
|
+
return min;
|
533
|
+
};
|
534
|
+
|
535
|
+
// returns [bottomleft, topright]
|
536
|
+
Layout.ForceDirected.prototype.getBoundingBox = function() {
|
537
|
+
var bottomleft = new Vector(-2,-2);
|
538
|
+
var topright = new Vector(2,2);
|
539
|
+
|
540
|
+
this.eachNode(function(n, point) {
|
541
|
+
if (point.p.x < bottomleft.x) {
|
542
|
+
bottomleft.x = point.p.x;
|
543
|
+
}
|
544
|
+
if (point.p.y < bottomleft.y) {
|
545
|
+
bottomleft.y = point.p.y;
|
546
|
+
}
|
547
|
+
if (point.p.x > topright.x) {
|
548
|
+
topright.x = point.p.x;
|
549
|
+
}
|
550
|
+
if (point.p.y > topright.y) {
|
551
|
+
topright.y = point.p.y;
|
552
|
+
}
|
553
|
+
});
|
554
|
+
|
555
|
+
var padding = topright.subtract(bottomleft).multiply(0.07); // ~5% padding
|
556
|
+
|
557
|
+
return {bottomleft: bottomleft.subtract(padding), topright: topright.add(padding)};
|
558
|
+
};
|
559
|
+
|
560
|
+
|
561
|
+
// Vector
|
562
|
+
var Vector = Springy.Vector = function(x, y) {
|
563
|
+
this.x = x;
|
564
|
+
this.y = y;
|
565
|
+
};
|
566
|
+
|
567
|
+
Vector.random = function() {
|
568
|
+
return new Vector(10.0 * (Math.random() - 0.5), 10.0 * (Math.random() - 0.5));
|
569
|
+
};
|
570
|
+
|
571
|
+
Vector.prototype.add = function(v2) {
|
572
|
+
return new Vector(this.x + v2.x, this.y + v2.y);
|
573
|
+
};
|
574
|
+
|
575
|
+
Vector.prototype.subtract = function(v2) {
|
576
|
+
return new Vector(this.x - v2.x, this.y - v2.y);
|
577
|
+
};
|
578
|
+
|
579
|
+
Vector.prototype.multiply = function(n) {
|
580
|
+
return new Vector(this.x * n, this.y * n);
|
581
|
+
};
|
582
|
+
|
583
|
+
Vector.prototype.divide = function(n) {
|
584
|
+
return new Vector((this.x / n) || 0, (this.y / n) || 0); // Avoid divide by zero errors..
|
585
|
+
};
|
586
|
+
|
587
|
+
Vector.prototype.magnitude = function() {
|
588
|
+
return Math.sqrt(this.x*this.x + this.y*this.y);
|
589
|
+
};
|
590
|
+
|
591
|
+
Vector.prototype.normal = function() {
|
592
|
+
return new Vector(-this.y, this.x);
|
593
|
+
};
|
594
|
+
|
595
|
+
Vector.prototype.normalise = function() {
|
596
|
+
return this.divide(this.magnitude());
|
597
|
+
};
|
598
|
+
|
599
|
+
// Point
|
600
|
+
Layout.ForceDirected.Point = function(position, mass) {
|
601
|
+
this.p = position; // position
|
602
|
+
this.m = mass; // mass
|
603
|
+
this.v = new Vector(0, 0); // velocity
|
604
|
+
this.a = new Vector(0, 0); // acceleration
|
605
|
+
};
|
606
|
+
|
607
|
+
Layout.ForceDirected.Point.prototype.applyForce = function(force) {
|
608
|
+
this.a = this.a.add(force.divide(this.m));
|
609
|
+
};
|
610
|
+
|
611
|
+
// Spring
|
612
|
+
Layout.ForceDirected.Spring = function(point1, point2, length, k) {
|
613
|
+
this.point1 = point1;
|
614
|
+
this.point2 = point2;
|
615
|
+
this.length = length; // spring length at rest
|
616
|
+
this.k = k; // spring constant (See Hooke's law) .. how stiff the spring is
|
617
|
+
};
|
618
|
+
|
619
|
+
// Layout.ForceDirected.Spring.prototype.distanceToPoint = function(point)
|
620
|
+
// {
|
621
|
+
// // hardcore vector arithmetic.. ohh yeah!
|
622
|
+
// // .. see http://stackoverflow.com/questions/849211/shortest-distance-between-a-point-and-a-line-segment/865080#865080
|
623
|
+
// var n = this.point2.p.subtract(this.point1.p).normalise().normal();
|
624
|
+
// var ac = point.p.subtract(this.point1.p);
|
625
|
+
// return Math.abs(ac.x * n.x + ac.y * n.y);
|
626
|
+
// };
|
627
|
+
|
628
|
+
// Renderer handles the layout rendering loop
|
629
|
+
var Renderer = Springy.Renderer = function(layout, clear, drawEdge, drawNode) {
|
630
|
+
this.layout = layout;
|
631
|
+
this.clear = clear;
|
632
|
+
this.drawEdge = drawEdge;
|
633
|
+
this.drawNode = drawNode;
|
634
|
+
|
635
|
+
this.layout.graph.addGraphListener(this);
|
636
|
+
}
|
637
|
+
|
638
|
+
Renderer.prototype.graphChanged = function(e) {
|
639
|
+
this.start();
|
640
|
+
};
|
641
|
+
|
642
|
+
Renderer.prototype.start = function() {
|
643
|
+
var t = this;
|
644
|
+
this.layout.start(function render() {
|
645
|
+
t.clear();
|
646
|
+
|
647
|
+
t.layout.eachEdge(function(edge, spring) {
|
648
|
+
t.drawEdge(edge, spring.point1.p, spring.point2.p);
|
649
|
+
});
|
650
|
+
|
651
|
+
t.layout.eachNode(function(node, point) {
|
652
|
+
t.drawNode(node, point.p);
|
653
|
+
});
|
654
|
+
});
|
655
|
+
};
|
656
|
+
|
657
|
+
Renderer.prototype.stop = function() {
|
658
|
+
this.layout.stop();
|
659
|
+
};
|
660
|
+
|
661
|
+
// Array.forEach implementation for IE support..
|
662
|
+
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
|
663
|
+
if ( !Array.prototype.forEach ) {
|
664
|
+
Array.prototype.forEach = function( callback, thisArg ) {
|
665
|
+
var T, k;
|
666
|
+
if ( this == null ) {
|
667
|
+
throw new TypeError( " this is null or not defined" );
|
668
|
+
}
|
669
|
+
var O = Object(this);
|
670
|
+
var len = O.length >>> 0; // Hack to convert O.length to a UInt32
|
671
|
+
if ( {}.toString.call(callback) != "[object Function]" ) {
|
672
|
+
throw new TypeError( callback + " is not a function" );
|
673
|
+
}
|
674
|
+
if ( thisArg ) {
|
675
|
+
T = thisArg;
|
676
|
+
}
|
677
|
+
k = 0;
|
678
|
+
while( k < len ) {
|
679
|
+
var kValue;
|
680
|
+
if ( k in O ) {
|
681
|
+
kValue = O[ k ];
|
682
|
+
callback.call( T, kValue, k, O );
|
683
|
+
}
|
684
|
+
k++;
|
685
|
+
}
|
686
|
+
};
|
687
|
+
}
|
688
|
+
|
689
|
+
var isEmpty = function(obj) {
|
690
|
+
for (var k in obj) {
|
691
|
+
if (obj.hasOwnProperty(k)) {
|
692
|
+
return false;
|
693
|
+
}
|
694
|
+
}
|
695
|
+
return true;
|
696
|
+
};
|
697
|
+
}).call(this);
|