mongo3 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.bnignore +3 -0
- data/.bnsignore +16 -0
- data/.gitignore +1 -0
- data/HISTORY +2 -0
- data/README.rdoc +78 -0
- data/Rakefile +31 -0
- data/bin/mongo3 +29 -0
- data/config/mongo3.yml +33 -0
- data/lib/controllers/collections.rb +7 -0
- data/lib/controllers/databases.rb +7 -0
- data/lib/controllers/explore.rb +46 -0
- data/lib/helpers/crumb_helper.rb +46 -0
- data/lib/helpers/main_helper.rb +43 -0
- data/lib/main.rb +41 -0
- data/lib/mongo3/connection.rb +191 -0
- data/lib/mongo3/node.rb +80 -0
- data/lib/mongo3.rb +57 -0
- data/lib/public/images/c292199_a.jpg +0 -0
- data/lib/public/images/close.png +0 -0
- data/lib/public/images/close.psd +0 -0
- data/lib/public/images/cluster.png +0 -0
- data/lib/public/images/cluster.psd +0 -0
- data/lib/public/images/db.jpg +0 -0
- data/lib/public/images/db.png +0 -0
- data/lib/public/images/db.psd +0 -0
- data/lib/public/images/delete.png +0 -0
- data/lib/public/images/header.png +0 -0
- data/lib/public/images/header.psd +0 -0
- data/lib/public/images/li_select.png +0 -0
- data/lib/public/images/li_select.psd +0 -0
- data/lib/public/images/lock.png +0 -0
- data/lib/public/images/lock.psd +0 -0
- data/lib/public/images/mongo.png +0 -0
- data/lib/public/images/mongo.psd +0 -0
- data/lib/public/images/mongo3.png +0 -0
- data/lib/public/images/mongo3.psd +0 -0
- data/lib/public/images/mongo3_db.png +0 -0
- data/lib/public/images/mongo3_db.psd +0 -0
- data/lib/public/images/mongo_10.psd +0 -0
- data/lib/public/images/mongo_db.jpg +0 -0
- data/lib/public/images/mongo_db.png +0 -0
- data/lib/public/images/mongo_db.psd +0 -0
- data/lib/public/images/mongo_db_1.jpg +0 -0
- data/lib/public/images/mongo_db_2 +0 -0
- data/lib/public/images/mongo_db_4 +0 -0
- data/lib/public/images/monkey.jpg +0 -0
- data/lib/public/images/monkey.png +0 -0
- data/lib/public/images/monkey.psd +0 -0
- data/lib/public/images/monkey_1.jpg +8 -0
- data/lib/public/images/monkey_10.jpg +8 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example1.html +57 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example1.js +427 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example2.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example2.js +310 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example3.html +199 -0
- data/lib/public/javascripts/Jit/Examples/Hypertree/example3.js +615 -0
- data/lib/public/javascripts/Jit/Examples/Other/example1.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Other/example1.js +566 -0
- data/lib/public/javascripts/Jit/Examples/Other/example2.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Other/example2.js +304 -0
- data/lib/public/javascripts/Jit/Examples/Other/example3.html +58 -0
- data/lib/public/javascripts/Jit/Examples/Other/example3.js +304 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example1.html +57 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example1.js +475 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example2.html +58 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example2.js +356 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example3.html +199 -0
- data/lib/public/javascripts/Jit/Examples/RGraph/example3.js +622 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example1.html +91 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example1.js +890 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example2.html +90 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example2.js +213 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example3.html +75 -0
- data/lib/public/javascripts/Jit/Examples/Spacetree/example3.js +863 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example1.html +56 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example1.js +95 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example2.html +61 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example2.js +750 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example3.html +62 -0
- data/lib/public/javascripts/Jit/Examples/Treemap/example3.js +775 -0
- data/lib/public/javascripts/Jit/Examples/css/Hypertree.css +0 -0
- data/lib/public/javascripts/Jit/Examples/css/Other.css +8 -0
- data/lib/public/javascripts/Jit/Examples/css/RGraph.css +0 -0
- data/lib/public/javascripts/Jit/Examples/css/Spacetree.css +0 -0
- data/lib/public/javascripts/Jit/Examples/css/Treemap.css +78 -0
- data/lib/public/javascripts/Jit/Examples/css/base.css +106 -0
- data/lib/public/javascripts/Jit/Examples/css/col1.png +0 -0
- data/lib/public/javascripts/Jit/Examples/css/col2.png +0 -0
- data/lib/public/javascripts/Jit/Examples/css/gradient.png +0 -0
- data/lib/public/javascripts/Jit/Extras/excanvas.js +35 -0
- data/lib/public/javascripts/Jit/jit-yc.js +1 -0
- data/lib/public/javascripts/Jit/jit.js +9052 -0
- data/lib/public/javascripts/Jit-1.1.3.zip +0 -0
- data/lib/public/javascripts/application.js +28 -0
- data/lib/public/javascripts/jit.min.js +1 -0
- data/lib/public/javascripts/jquery.tools.min.js +38 -0
- data/lib/public/javascripts/jquery_min.js +19 -0
- data/lib/public/javascripts/jquery_ui_min.js +298 -0
- data/lib/public/stylesheets/mongo3.css +275 -0
- data/lib/utils.rb +3 -0
- data/lib/views/_cltn_info.erb +95 -0
- data/lib/views/_collection.erb +5 -0
- data/lib/views/_crumbs.erb +13 -0
- data/lib/views/_dump_array.erb +5 -0
- data/lib/views/_dump_hash.erb +14 -0
- data/lib/views/_info.erb +15 -0
- data/lib/views/center_js.erb +3 -0
- data/lib/views/cltn_show.erb +1 -0
- data/lib/views/collection.erb +44 -0
- data/lib/views/database.erb +37 -0
- data/lib/views/db_show.erb +1 -0
- data/lib/views/explore.erb +250 -0
- data/lib/views/landscape.erb +45 -0
- data/lib/views/layout.erb +28 -0
- data/lib/views/more_data_js.erb +3 -0
- data/lib/views/show_cltn.erb +1 -0
- data/lib/views/update_crumb_js.erb +1 -0
- data/spec/mongo3/node_spec.rb +84 -0
- data/spec/spec_helper.rb +8 -0
- data/tasks/bones.rake +20 -0
- data/tasks/gem.rake +201 -0
- data/tasks/git.rake +40 -0
- data/tasks/notes.rake +27 -0
- data/tasks/post_load.rake +32 -0
- data/tasks/rdoc.rake +56 -0
- data/tasks/rubyforge.rake +55 -0
- data/tasks/setup.rb +292 -0
- data/tasks/spec.rake +54 -0
- data/tasks/svn.rake +47 -0
- data/tasks/test.rake +40 -0
- data/tasks/zentest.rake +36 -0
- metadata +213 -0
@@ -0,0 +1,90 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
5
|
+
<title>Spacetree - SpaceTree with on-demand nodes</title>
|
6
|
+
|
7
|
+
<!-- CSS Files -->
|
8
|
+
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
9
|
+
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
10
|
+
|
11
|
+
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
12
|
+
|
13
|
+
<!-- JIT Library File -->
|
14
|
+
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
15
|
+
|
16
|
+
<!-- Example File -->
|
17
|
+
<script language="javascript" type="text/javascript" src="example2.js"></script>
|
18
|
+
</head>
|
19
|
+
|
20
|
+
<body onload="init();">
|
21
|
+
<div id="container">
|
22
|
+
|
23
|
+
<div id="left-container">
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
<div class="text">
|
28
|
+
<h4>
|
29
|
+
SpaceTree with on-demand nodes
|
30
|
+
</h4>
|
31
|
+
|
32
|
+
This example shows how you can use the <b>request</b> controller method to create a SpaceTree with <b>on demand</b> nodes<br /><br />
|
33
|
+
The basic JSON Tree structure is cloned and appended on demand on each node to create an <b>infinite large SpaceTree</b><br /><br />
|
34
|
+
You can select the <b>tree orientation</b> by changing the select box in the right column.
|
35
|
+
|
36
|
+
</div>
|
37
|
+
|
38
|
+
<div id="id-list"></div>
|
39
|
+
|
40
|
+
|
41
|
+
<div style="text-align:center;"><a href="example2.js">See the Example Code</a></div>
|
42
|
+
</div>
|
43
|
+
|
44
|
+
<div id="center-container">
|
45
|
+
<div id="infovis"></div>
|
46
|
+
</div>
|
47
|
+
|
48
|
+
<div id="right-container">
|
49
|
+
|
50
|
+
<h4>Change Tree Orientation</h4>
|
51
|
+
<table>
|
52
|
+
<tr>
|
53
|
+
<td>
|
54
|
+
<label for="r-left">left </label>
|
55
|
+
</td>
|
56
|
+
<td>
|
57
|
+
<input type="radio" id="r-left" name="orientation" checked="checked" value="left" />
|
58
|
+
</td>
|
59
|
+
</tr>
|
60
|
+
<tr>
|
61
|
+
<td>
|
62
|
+
<label for="r-top">top </label>
|
63
|
+
</td>
|
64
|
+
<td>
|
65
|
+
<input type="radio" id="r-top" name="orientation" value="top" />
|
66
|
+
</td>
|
67
|
+
<tr>
|
68
|
+
<td>
|
69
|
+
<label for="r-bottom">bottom </label>
|
70
|
+
</td>
|
71
|
+
<td>
|
72
|
+
<input type="radio" id="r-bottom" name="orientation" value="bottom" />
|
73
|
+
</td>
|
74
|
+
</tr>
|
75
|
+
<tr>
|
76
|
+
<td>
|
77
|
+
<label for="r-right">right </label>
|
78
|
+
</td>
|
79
|
+
<td>
|
80
|
+
<input type="radio" id="r-right" name="orientation" value="right" />
|
81
|
+
</td>
|
82
|
+
</tr>
|
83
|
+
</table>
|
84
|
+
|
85
|
+
</div>
|
86
|
+
|
87
|
+
<div id="log"></div>
|
88
|
+
</div>
|
89
|
+
</body>
|
90
|
+
</html>
|
@@ -0,0 +1,213 @@
|
|
1
|
+
var Log = {
|
2
|
+
elem: false,
|
3
|
+
write: function(text){
|
4
|
+
if (!this.elem)
|
5
|
+
this.elem = document.getElementById('log');
|
6
|
+
this.elem.innerHTML = text;
|
7
|
+
this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
|
8
|
+
}
|
9
|
+
};
|
10
|
+
|
11
|
+
function addEvent(obj, type, fn) {
|
12
|
+
if (obj.addEventListener) obj.addEventListener(type, fn, false);
|
13
|
+
else obj.attachEvent('on' + type, fn);
|
14
|
+
};
|
15
|
+
|
16
|
+
|
17
|
+
function init(){
|
18
|
+
//init data
|
19
|
+
var json = "{id:\"node02\", name:\"0.2\", data:{}, children:[{id:\"node13\", name:\"1.3\", data:{}, children:[{id:\"node24\", name:\"2.4\", data:{}, children:[{id:\"node35\", name:\"3.5\", data:{}, children:[{id:\"node46\", name:\"4.6\", data:{}, children:[]}]}, {id:\"node37\", name:\"3.7\", data:{}, children:[{id:\"node48\", name:\"4.8\", data:{}, children:[]}, {id:\"node49\", name:\"4.9\", data:{}, children:[]}, {id:\"node410\", name:\"4.10\", data:{}, children:[]}, {id:\"node411\", name:\"4.11\", data:{}, children:[]}]}, {id:\"node312\", name:\"3.12\", data:{}, children:[{id:\"node413\", name:\"4.13\", data:{}, children:[]}]}, {id:\"node314\", name:\"3.14\", data:{}, children:[{id:\"node415\", name:\"4.15\", data:{}, children:[]}, {id:\"node416\", name:\"4.16\", data:{}, children:[]}, {id:\"node417\", name:\"4.17\", data:{}, children:[]}, {id:\"node418\", name:\"4.18\", data:{}, children:[]}]}, {id:\"node319\", name:\"3.19\", data:{}, children:[{id:\"node420\", name:\"4.20\", data:{}, children:[]}, {id:\"node421\", name:\"4.21\", data:{}, children:[]}]}]}, {id:\"node222\", name:\"2.22\", data:{}, children:[{id:\"node323\", name:\"3.23\", data:{}, children:[{id:\"node424\", name:\"4.24\", data:{}, children:[]}]}]}]}, {id:\"node125\", name:\"1.25\", data:{}, children:[{id:\"node226\", name:\"2.26\", data:{}, children:[{id:\"node327\", name:\"3.27\", data:{}, children:[{id:\"node428\", name:\"4.28\", data:{}, children:[]}, {id:\"node429\", name:\"4.29\", data:{}, children:[]}]}, {id:\"node330\", name:\"3.30\", data:{}, children:[{id:\"node431\", name:\"4.31\", data:{}, children:[]}]}, {id:\"node332\", name:\"3.32\", data:{}, children:[{id:\"node433\", name:\"4.33\", data:{}, children:[]}, {id:\"node434\", name:\"4.34\", data:{}, children:[]}, {id:\"node435\", name:\"4.35\", data:{}, children:[]}, {id:\"node436\", name:\"4.36\", data:{}, children:[]}]}]}, {id:\"node237\", name:\"2.37\", data:{}, children:[{id:\"node338\", name:\"3.38\", data:{}, children:[{id:\"node439\", name:\"4.39\", data:{}, children:[]}, {id:\"node440\", name:\"4.40\", data:{}, children:[]}, {id:\"node441\", name:\"4.41\", data:{}, children:[]}]}, {id:\"node342\", name:\"3.42\", data:{}, children:[{id:\"node443\", name:\"4.43\", data:{}, children:[]}]}, {id:\"node344\", name:\"3.44\", data:{}, children:[{id:\"node445\", name:\"4.45\", data:{}, children:[]}, {id:\"node446\", name:\"4.46\", data:{}, children:[]}, {id:\"node447\", name:\"4.47\", data:{}, children:[]}]}, {id:\"node348\", name:\"3.48\", data:{}, children:[{id:\"node449\", name:\"4.49\", data:{}, children:[]}, {id:\"node450\", name:\"4.50\", data:{}, children:[]}, {id:\"node451\", name:\"4.51\", data:{}, children:[]}, {id:\"node452\", name:\"4.52\", data:{}, children:[]}, {id:\"node453\", name:\"4.53\", data:{}, children:[]}]}, {id:\"node354\", name:\"3.54\", data:{}, children:[{id:\"node455\", name:\"4.55\", data:{}, children:[]}, {id:\"node456\", name:\"4.56\", data:{}, children:[]}, {id:\"node457\", name:\"4.57\", data:{}, children:[]}]}]}, {id:\"node258\", name:\"2.58\", data:{}, children:[{id:\"node359\", name:\"3.59\", data:{}, children:[{id:\"node460\", name:\"4.60\", data:{}, children:[]}, {id:\"node461\", name:\"4.61\", data:{}, children:[]}, {id:\"node462\", name:\"4.62\", data:{}, children:[]}, {id:\"node463\", name:\"4.63\", data:{}, children:[]}, {id:\"node464\", name:\"4.64\", data:{}, children:[]}]}]}]}, {id:\"node165\", name:\"1.65\", data:{}, children:[{id:\"node266\", name:\"2.66\", data:{}, children:[{id:\"node367\", name:\"3.67\", data:{}, children:[{id:\"node468\", name:\"4.68\", data:{}, children:[]}, {id:\"node469\", name:\"4.69\", data:{}, children:[]}, {id:\"node470\", name:\"4.70\", data:{}, children:[]}, {id:\"node471\", name:\"4.71\", data:{}, children:[]}]}, {id:\"node372\", name:\"3.72\", data:{}, children:[{id:\"node473\", name:\"4.73\", data:{}, children:[]}, {id:\"node474\", name:\"4.74\", data:{}, children:[]}, {id:\"node475\", name:\"4.75\", data:{}, children:[]}, {id:\"node476\", name:\"4.76\", data:{}, children:[]}]}, {id:\"node377\", name:\"3.77\", data:{}, children:[{id:\"node478\", name:\"4.78\", data:{}, children:[]}, {id:\"node479\", name:\"4.79\", data:{}, children:[]}]}, {id:\"node380\", name:\"3.80\", data:{}, children:[{id:\"node481\", name:\"4.81\", data:{}, children:[]}, {id:\"node482\", name:\"4.82\", data:{}, children:[]}]}]}, {id:\"node283\", name:\"2.83\", data:{}, children:[{id:\"node384\", name:\"3.84\", data:{}, children:[{id:\"node485\", name:\"4.85\", data:{}, children:[]}]}, {id:\"node386\", name:\"3.86\", data:{}, children:[{id:\"node487\", name:\"4.87\", data:{}, children:[]}, {id:\"node488\", name:\"4.88\", data:{}, children:[]}, {id:\"node489\", name:\"4.89\", data:{}, children:[]}, {id:\"node490\", name:\"4.90\", data:{}, children:[]}, {id:\"node491\", name:\"4.91\", data:{}, children:[]}]}, {id:\"node392\", name:\"3.92\", data:{}, children:[{id:\"node493\", name:\"4.93\", data:{}, children:[]}, {id:\"node494\", name:\"4.94\", data:{}, children:[]}, {id:\"node495\", name:\"4.95\", data:{}, children:[]}, {id:\"node496\", name:\"4.96\", data:{}, children:[]}]}, {id:\"node397\", name:\"3.97\", data:{}, children:[{id:\"node498\", name:\"4.98\", data:{}, children:[]}]}, {id:\"node399\", name:\"3.99\", data:{}, children:[{id:\"node4100\", name:\"4.100\", data:{}, children:[]}, {id:\"node4101\", name:\"4.101\", data:{}, children:[]}, {id:\"node4102\", name:\"4.102\", data:{}, children:[]}, {id:\"node4103\", name:\"4.103\", data:{}, children:[]}]}]}, {id:\"node2104\", name:\"2.104\", data:{}, children:[{id:\"node3105\", name:\"3.105\", data:{}, children:[{id:\"node4106\", name:\"4.106\", data:{}, children:[]}, {id:\"node4107\", name:\"4.107\", data:{}, children:[]}, {id:\"node4108\", name:\"4.108\", data:{}, children:[]}]}]}, {id:\"node2109\", name:\"2.109\", data:{}, children:[{id:\"node3110\", name:\"3.110\", data:{}, children:[{id:\"node4111\", name:\"4.111\", data:{}, children:[]}, {id:\"node4112\", name:\"4.112\", data:{}, children:[]}]}, {id:\"node3113\", name:\"3.113\", data:{}, children:[{id:\"node4114\", name:\"4.114\", data:{}, children:[]}, {id:\"node4115\", name:\"4.115\", data:{}, children:[]}, {id:\"node4116\", name:\"4.116\", data:{}, children:[]}]}, {id:\"node3117\", name:\"3.117\", data:{}, children:[{id:\"node4118\", name:\"4.118\", data:{}, children:[]}, {id:\"node4119\", name:\"4.119\", data:{}, children:[]}, {id:\"node4120\", name:\"4.120\", data:{}, children:[]}, {id:\"node4121\", name:\"4.121\", data:{}, children:[]}]}, {id:\"node3122\", name:\"3.122\", data:{}, children:[{id:\"node4123\", name:\"4.123\", data:{}, children:[]}, {id:\"node4124\", name:\"4.124\", data:{}, children:[]}]}]}, {id:\"node2125\", name:\"2.125\", data:{}, children:[{id:\"node3126\", name:\"3.126\", data:{}, children:[{id:\"node4127\", name:\"4.127\", data:{}, children:[]}, {id:\"node4128\", name:\"4.128\", data:{}, children:[]}, {id:\"node4129\", name:\"4.129\", data:{}, children:[]}]}]}]}, {id:\"node1130\", name:\"1.130\", data:{}, children:[{id:\"node2131\", name:\"2.131\", data:{}, children:[{id:\"node3132\", name:\"3.132\", data:{}, children:[{id:\"node4133\", name:\"4.133\", data:{}, children:[]}, {id:\"node4134\", name:\"4.134\", data:{}, children:[]}, {id:\"node4135\", name:\"4.135\", data:{}, children:[]}, {id:\"node4136\", name:\"4.136\", data:{}, children:[]}, {id:\"node4137\", name:\"4.137\", data:{}, children:[]}]}]}, {id:\"node2138\", name:\"2.138\", data:{}, children:[{id:\"node3139\", name:\"3.139\", data:{}, children:[{id:\"node4140\", name:\"4.140\", data:{}, children:[]}, {id:\"node4141\", name:\"4.141\", data:{}, children:[]}]}, {id:\"node3142\", name:\"3.142\", data:{}, children:[{id:\"node4143\", name:\"4.143\", data:{}, children:[]}, {id:\"node4144\", name:\"4.144\", data:{}, children:[]}, {id:\"node4145\", name:\"4.145\", data:{}, children:[]}, {id:\"node4146\", name:\"4.146\", data:{}, children:[]}, {id:\"node4147\", name:\"4.147\", data:{}, children:[]}]}]}]}]}";
|
20
|
+
//end
|
21
|
+
|
22
|
+
//A client-side tree generator
|
23
|
+
var getTree = (function() {
|
24
|
+
var i = 0;
|
25
|
+
return function(nodeId, level) {
|
26
|
+
var subtree = eval('(' + json.replace(/id:\"([a-zA-Z0-9]+)\"/g,
|
27
|
+
function(all, match) {
|
28
|
+
return "id:\"" + match + "_" + i + "\""
|
29
|
+
}) + ')');
|
30
|
+
TreeUtil.prune(subtree, level); i++;
|
31
|
+
return {
|
32
|
+
'id': nodeId,
|
33
|
+
'children': subtree.children
|
34
|
+
};
|
35
|
+
};
|
36
|
+
})();
|
37
|
+
|
38
|
+
var infovis = document.getElementById('infovis');
|
39
|
+
var w = infovis.offsetWidth, h = infovis.offsetHeight;
|
40
|
+
//init canvas
|
41
|
+
//Create a new canvas instance.
|
42
|
+
var canvas = new Canvas('mycanvas', {
|
43
|
+
'injectInto': 'infovis',
|
44
|
+
'width': w,
|
45
|
+
'height': h,
|
46
|
+
'backgroundColor': '#1a1a1a'
|
47
|
+
});
|
48
|
+
//end
|
49
|
+
|
50
|
+
|
51
|
+
//Implement a node rendering function called 'nodeline' that plots a straight line
|
52
|
+
//when contracting or expanding a subtree.
|
53
|
+
ST.Plot.NodeTypes.implement({
|
54
|
+
'nodeline': function(node, canvas, animating) {
|
55
|
+
if(animating === 'expand' || animating === 'contract') {
|
56
|
+
var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
|
57
|
+
var width = nconfig.width, height = nconfig.height;
|
58
|
+
var algnPos = this.getAlignedPos(pos, width, height);
|
59
|
+
var ctx = canvas.getCtx(), ort = this.config.orientation;
|
60
|
+
ctx.beginPath();
|
61
|
+
if(ort == 'left' || ort == 'right') {
|
62
|
+
ctx.moveTo(algnPos.x, algnPos.y + height / 2);
|
63
|
+
ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
|
64
|
+
} else {
|
65
|
+
ctx.moveTo(algnPos.x + width / 2, algnPos.y);
|
66
|
+
ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
|
67
|
+
}
|
68
|
+
ctx.stroke();
|
69
|
+
}
|
70
|
+
}
|
71
|
+
});
|
72
|
+
|
73
|
+
//init st
|
74
|
+
//Create a new ST instance
|
75
|
+
var st = new ST(canvas, {
|
76
|
+
//set duration for the animation
|
77
|
+
duration: 800,
|
78
|
+
//set animation transition type
|
79
|
+
transition: Trans.Quart.easeInOut,
|
80
|
+
//set distance between node and its children
|
81
|
+
levelDistance: 50,
|
82
|
+
//set max levels to show. Useful when used with
|
83
|
+
//the request method for requesting trees of specific depth
|
84
|
+
levelsToShow: 2,
|
85
|
+
//set node and edge styles
|
86
|
+
//set overridable=true for styling individual
|
87
|
+
//nodes or edges
|
88
|
+
Node: {
|
89
|
+
height: 20,
|
90
|
+
width: 40,
|
91
|
+
//use a custom
|
92
|
+
//node rendering function
|
93
|
+
type: 'nodeline',
|
94
|
+
color:'#23A4FF',
|
95
|
+
lineWidth: 2,
|
96
|
+
align:"center",
|
97
|
+
overridable: true
|
98
|
+
},
|
99
|
+
|
100
|
+
Edge: {
|
101
|
+
type: 'bezier',
|
102
|
+
lineWidth: 2,
|
103
|
+
color:'#23A4FF',
|
104
|
+
overridable: true
|
105
|
+
},
|
106
|
+
|
107
|
+
//Add a request method for requesting on-demand json trees.
|
108
|
+
//This method gets called when a node
|
109
|
+
//is clicked and its subtree has a smaller depth
|
110
|
+
//than the one specified by the levelsToShow parameter.
|
111
|
+
//In that case a subtree is requested and is added to the dataset.
|
112
|
+
//This method is asynchronous, so you can make an Ajax request for that
|
113
|
+
//subtree and then handle it to the onComplete callback.
|
114
|
+
//Here we just use a client-side tree generator (the getTree function).
|
115
|
+
request: function(nodeId, level, onComplete) {
|
116
|
+
var ans = getTree(nodeId, level);
|
117
|
+
onComplete.onComplete(nodeId, ans);
|
118
|
+
},
|
119
|
+
|
120
|
+
onBeforeCompute: function(node){
|
121
|
+
Log.write("loading " + node.name);
|
122
|
+
},
|
123
|
+
|
124
|
+
onAfterCompute: function(){
|
125
|
+
Log.write("done");
|
126
|
+
},
|
127
|
+
|
128
|
+
//This method is called on DOM label creation.
|
129
|
+
//Use this method to add event handlers and styles to
|
130
|
+
//your node.
|
131
|
+
onCreateLabel: function(label, node){
|
132
|
+
label.id = node.id;
|
133
|
+
label.innerHTML = node.name;
|
134
|
+
label.onclick = function(){
|
135
|
+
st.onClick(node.id);
|
136
|
+
};
|
137
|
+
//set label styles
|
138
|
+
var style = label.style;
|
139
|
+
style.width = 40 + 'px';
|
140
|
+
style.height = 17 + 'px';
|
141
|
+
style.cursor = 'pointer';
|
142
|
+
style.color = '#fff';
|
143
|
+
//style.backgroundColor = '#1a1a1a';
|
144
|
+
style.fontSize = '0.8em';
|
145
|
+
style.textAlign= 'center';
|
146
|
+
style.textDecoration = 'underline';
|
147
|
+
style.paddingTop = '3px';
|
148
|
+
},
|
149
|
+
|
150
|
+
//This method is called right before plotting
|
151
|
+
//a node. It's useful for changing an individual node
|
152
|
+
//style properties before plotting it.
|
153
|
+
//The data properties prefixed with a dollar
|
154
|
+
//sign will override the global node style properties.
|
155
|
+
onBeforePlotNode: function(node){
|
156
|
+
//add some color to the nodes in the path between the
|
157
|
+
//root node and the selected node.
|
158
|
+
if (node.selected) {
|
159
|
+
node.data.$color = "#ff7";
|
160
|
+
}
|
161
|
+
else {
|
162
|
+
delete node.data.$color;
|
163
|
+
}
|
164
|
+
},
|
165
|
+
|
166
|
+
//This method is called right before plotting
|
167
|
+
//an edge. It's useful for changing an individual edge
|
168
|
+
//style properties before plotting it.
|
169
|
+
//Edge data proprties prefixed with a dollar sign will
|
170
|
+
//override the Edge global style properties.
|
171
|
+
onBeforePlotLine: function(adj){
|
172
|
+
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
|
173
|
+
adj.data.$color = "#eed";
|
174
|
+
adj.data.$lineWidth = 3;
|
175
|
+
}
|
176
|
+
else {
|
177
|
+
delete adj.data.$color;
|
178
|
+
delete adj.data.$lineWidth;
|
179
|
+
}
|
180
|
+
}
|
181
|
+
});
|
182
|
+
//load json data
|
183
|
+
st.loadJSON(eval( '(' + json + ')' ));
|
184
|
+
//compute node positions and layout
|
185
|
+
st.compute();
|
186
|
+
//emulate a click on the root node.
|
187
|
+
st.onClick(st.root);
|
188
|
+
//end
|
189
|
+
//Add event handlers to switch spacetree orientation.
|
190
|
+
function get(id) {
|
191
|
+
return document.getElementById(id);
|
192
|
+
};
|
193
|
+
|
194
|
+
var top = get('r-top'),
|
195
|
+
left = get('r-left'),
|
196
|
+
bottom = get('r-bottom'),
|
197
|
+
right = get('r-right');
|
198
|
+
|
199
|
+
function changeHandler() {
|
200
|
+
if(this.checked) {
|
201
|
+
top.disabled = bottom.disabled = right.disabled = left.disabled = true;
|
202
|
+
st.switchPosition(this.value, "animate", {
|
203
|
+
onComplete: function(){
|
204
|
+
top.disabled = bottom.disabled = right.disabled = left.disabled = false;
|
205
|
+
}
|
206
|
+
});
|
207
|
+
}
|
208
|
+
};
|
209
|
+
|
210
|
+
top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
|
211
|
+
//end
|
212
|
+
|
213
|
+
}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
3
|
+
<head>
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
5
|
+
<title>Spacetree - Add/Remove Subtrees</title>
|
6
|
+
|
7
|
+
<!-- CSS Files -->
|
8
|
+
<link type="text/css" href="../css/base.css" rel="stylesheet" />
|
9
|
+
<link type="text/css" href="../css/Spacetree.css" rel="stylesheet" />
|
10
|
+
|
11
|
+
<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->
|
12
|
+
|
13
|
+
<!-- JIT Library File -->
|
14
|
+
<script language="javascript" type="text/javascript" src="../../jit.js"></script>
|
15
|
+
|
16
|
+
<!-- Example File -->
|
17
|
+
<script language="javascript" type="text/javascript" src="example3.js"></script>
|
18
|
+
</head>
|
19
|
+
|
20
|
+
<body onload="init();">
|
21
|
+
<div id="container">
|
22
|
+
|
23
|
+
<div id="left-container">
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
<div class="text">
|
28
|
+
<h4>
|
29
|
+
Add/Remove Subtrees
|
30
|
+
</h4>
|
31
|
+
|
32
|
+
This example shows how to add/remove subtrees with the SpaceTree.<br /><br />
|
33
|
+
<b>Add</b> a subtree by clicking on the <em>Add</em> button located in the right column.<br /><br />
|
34
|
+
<b>Remove</b> a subtree by clicking on a red colored node
|
35
|
+
|
36
|
+
</div>
|
37
|
+
|
38
|
+
<div id="id-list"></div>
|
39
|
+
|
40
|
+
|
41
|
+
<div style="text-align:center;"><a href="example3.js">See the Example Code</a></div>
|
42
|
+
</div>
|
43
|
+
|
44
|
+
<div id="center-container">
|
45
|
+
<div id="infovis"></div>
|
46
|
+
</div>
|
47
|
+
|
48
|
+
<div id="right-container">
|
49
|
+
|
50
|
+
<h4>Add Subtrees</h4>
|
51
|
+
<table>
|
52
|
+
<tr>
|
53
|
+
<td>
|
54
|
+
Animate:
|
55
|
+
</td>
|
56
|
+
<td>
|
57
|
+
<input type="checkbox" id="animate" checked="checked" />
|
58
|
+
</td>
|
59
|
+
</tr>
|
60
|
+
<tr>
|
61
|
+
<td>
|
62
|
+
<input type="button" id="addSubtree" value="Add" />
|
63
|
+
</td>
|
64
|
+
<td>
|
65
|
+
<input type="button" value="Refresh" onclick="window.location = window.location" />
|
66
|
+
</td>
|
67
|
+
</tr>
|
68
|
+
</table>
|
69
|
+
|
70
|
+
</div>
|
71
|
+
|
72
|
+
<div id="log"></div>
|
73
|
+
</div>
|
74
|
+
</body>
|
75
|
+
</html>
|