mongo3 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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>
|