mongo3 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (132) hide show
  1. data/.bnignore +3 -0
  2. data/.bnsignore +16 -0
  3. data/.gitignore +1 -0
  4. data/HISTORY +2 -0
  5. data/README.rdoc +78 -0
  6. data/Rakefile +31 -0
  7. data/bin/mongo3 +29 -0
  8. data/config/mongo3.yml +33 -0
  9. data/lib/controllers/collections.rb +7 -0
  10. data/lib/controllers/databases.rb +7 -0
  11. data/lib/controllers/explore.rb +46 -0
  12. data/lib/helpers/crumb_helper.rb +46 -0
  13. data/lib/helpers/main_helper.rb +43 -0
  14. data/lib/main.rb +41 -0
  15. data/lib/mongo3/connection.rb +191 -0
  16. data/lib/mongo3/node.rb +80 -0
  17. data/lib/mongo3.rb +57 -0
  18. data/lib/public/images/c292199_a.jpg +0 -0
  19. data/lib/public/images/close.png +0 -0
  20. data/lib/public/images/close.psd +0 -0
  21. data/lib/public/images/cluster.png +0 -0
  22. data/lib/public/images/cluster.psd +0 -0
  23. data/lib/public/images/db.jpg +0 -0
  24. data/lib/public/images/db.png +0 -0
  25. data/lib/public/images/db.psd +0 -0
  26. data/lib/public/images/delete.png +0 -0
  27. data/lib/public/images/header.png +0 -0
  28. data/lib/public/images/header.psd +0 -0
  29. data/lib/public/images/li_select.png +0 -0
  30. data/lib/public/images/li_select.psd +0 -0
  31. data/lib/public/images/lock.png +0 -0
  32. data/lib/public/images/lock.psd +0 -0
  33. data/lib/public/images/mongo.png +0 -0
  34. data/lib/public/images/mongo.psd +0 -0
  35. data/lib/public/images/mongo3.png +0 -0
  36. data/lib/public/images/mongo3.psd +0 -0
  37. data/lib/public/images/mongo3_db.png +0 -0
  38. data/lib/public/images/mongo3_db.psd +0 -0
  39. data/lib/public/images/mongo_10.psd +0 -0
  40. data/lib/public/images/mongo_db.jpg +0 -0
  41. data/lib/public/images/mongo_db.png +0 -0
  42. data/lib/public/images/mongo_db.psd +0 -0
  43. data/lib/public/images/mongo_db_1.jpg +0 -0
  44. data/lib/public/images/mongo_db_2 +0 -0
  45. data/lib/public/images/mongo_db_4 +0 -0
  46. data/lib/public/images/monkey.jpg +0 -0
  47. data/lib/public/images/monkey.png +0 -0
  48. data/lib/public/images/monkey.psd +0 -0
  49. data/lib/public/images/monkey_1.jpg +8 -0
  50. data/lib/public/images/monkey_10.jpg +8 -0
  51. data/lib/public/javascripts/Jit/Examples/Hypertree/example1.html +57 -0
  52. data/lib/public/javascripts/Jit/Examples/Hypertree/example1.js +427 -0
  53. data/lib/public/javascripts/Jit/Examples/Hypertree/example2.html +58 -0
  54. data/lib/public/javascripts/Jit/Examples/Hypertree/example2.js +310 -0
  55. data/lib/public/javascripts/Jit/Examples/Hypertree/example3.html +199 -0
  56. data/lib/public/javascripts/Jit/Examples/Hypertree/example3.js +615 -0
  57. data/lib/public/javascripts/Jit/Examples/Other/example1.html +58 -0
  58. data/lib/public/javascripts/Jit/Examples/Other/example1.js +566 -0
  59. data/lib/public/javascripts/Jit/Examples/Other/example2.html +58 -0
  60. data/lib/public/javascripts/Jit/Examples/Other/example2.js +304 -0
  61. data/lib/public/javascripts/Jit/Examples/Other/example3.html +58 -0
  62. data/lib/public/javascripts/Jit/Examples/Other/example3.js +304 -0
  63. data/lib/public/javascripts/Jit/Examples/RGraph/example1.html +57 -0
  64. data/lib/public/javascripts/Jit/Examples/RGraph/example1.js +475 -0
  65. data/lib/public/javascripts/Jit/Examples/RGraph/example2.html +58 -0
  66. data/lib/public/javascripts/Jit/Examples/RGraph/example2.js +356 -0
  67. data/lib/public/javascripts/Jit/Examples/RGraph/example3.html +199 -0
  68. data/lib/public/javascripts/Jit/Examples/RGraph/example3.js +622 -0
  69. data/lib/public/javascripts/Jit/Examples/Spacetree/example1.html +91 -0
  70. data/lib/public/javascripts/Jit/Examples/Spacetree/example1.js +890 -0
  71. data/lib/public/javascripts/Jit/Examples/Spacetree/example2.html +90 -0
  72. data/lib/public/javascripts/Jit/Examples/Spacetree/example2.js +213 -0
  73. data/lib/public/javascripts/Jit/Examples/Spacetree/example3.html +75 -0
  74. data/lib/public/javascripts/Jit/Examples/Spacetree/example3.js +863 -0
  75. data/lib/public/javascripts/Jit/Examples/Treemap/example1.html +56 -0
  76. data/lib/public/javascripts/Jit/Examples/Treemap/example1.js +95 -0
  77. data/lib/public/javascripts/Jit/Examples/Treemap/example2.html +61 -0
  78. data/lib/public/javascripts/Jit/Examples/Treemap/example2.js +750 -0
  79. data/lib/public/javascripts/Jit/Examples/Treemap/example3.html +62 -0
  80. data/lib/public/javascripts/Jit/Examples/Treemap/example3.js +775 -0
  81. data/lib/public/javascripts/Jit/Examples/css/Hypertree.css +0 -0
  82. data/lib/public/javascripts/Jit/Examples/css/Other.css +8 -0
  83. data/lib/public/javascripts/Jit/Examples/css/RGraph.css +0 -0
  84. data/lib/public/javascripts/Jit/Examples/css/Spacetree.css +0 -0
  85. data/lib/public/javascripts/Jit/Examples/css/Treemap.css +78 -0
  86. data/lib/public/javascripts/Jit/Examples/css/base.css +106 -0
  87. data/lib/public/javascripts/Jit/Examples/css/col1.png +0 -0
  88. data/lib/public/javascripts/Jit/Examples/css/col2.png +0 -0
  89. data/lib/public/javascripts/Jit/Examples/css/gradient.png +0 -0
  90. data/lib/public/javascripts/Jit/Extras/excanvas.js +35 -0
  91. data/lib/public/javascripts/Jit/jit-yc.js +1 -0
  92. data/lib/public/javascripts/Jit/jit.js +9052 -0
  93. data/lib/public/javascripts/Jit-1.1.3.zip +0 -0
  94. data/lib/public/javascripts/application.js +28 -0
  95. data/lib/public/javascripts/jit.min.js +1 -0
  96. data/lib/public/javascripts/jquery.tools.min.js +38 -0
  97. data/lib/public/javascripts/jquery_min.js +19 -0
  98. data/lib/public/javascripts/jquery_ui_min.js +298 -0
  99. data/lib/public/stylesheets/mongo3.css +275 -0
  100. data/lib/utils.rb +3 -0
  101. data/lib/views/_cltn_info.erb +95 -0
  102. data/lib/views/_collection.erb +5 -0
  103. data/lib/views/_crumbs.erb +13 -0
  104. data/lib/views/_dump_array.erb +5 -0
  105. data/lib/views/_dump_hash.erb +14 -0
  106. data/lib/views/_info.erb +15 -0
  107. data/lib/views/center_js.erb +3 -0
  108. data/lib/views/cltn_show.erb +1 -0
  109. data/lib/views/collection.erb +44 -0
  110. data/lib/views/database.erb +37 -0
  111. data/lib/views/db_show.erb +1 -0
  112. data/lib/views/explore.erb +250 -0
  113. data/lib/views/landscape.erb +45 -0
  114. data/lib/views/layout.erb +28 -0
  115. data/lib/views/more_data_js.erb +3 -0
  116. data/lib/views/show_cltn.erb +1 -0
  117. data/lib/views/update_crumb_js.erb +1 -0
  118. data/spec/mongo3/node_spec.rb +84 -0
  119. data/spec/spec_helper.rb +8 -0
  120. data/tasks/bones.rake +20 -0
  121. data/tasks/gem.rake +201 -0
  122. data/tasks/git.rake +40 -0
  123. data/tasks/notes.rake +27 -0
  124. data/tasks/post_load.rake +32 -0
  125. data/tasks/rdoc.rake +56 -0
  126. data/tasks/rubyforge.rake +55 -0
  127. data/tasks/setup.rb +292 -0
  128. data/tasks/spec.rake +54 -0
  129. data/tasks/svn.rake +47 -0
  130. data/tasks/test.rake +40 -0
  131. data/tasks/zentest.rake +36 -0
  132. 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>