├── LICENSE
├── README.md
├── samples
    ├── 3d.html
    ├── about.html
    ├── animation.html
    ├── contact.html
    ├── container.html
    ├── container2.html
    ├── css
    │   ├── bootstrap-responsive.css
    │   ├── bootstrap.min.css
    │   └── jquery.snippet.min.css
    ├── cutFruit.html
    ├── dev.html
    ├── device.html
    ├── diy.html
    ├── gravitate.html
    ├── img
    │   ├── OS_Apple.png
    │   ├── OS_Ubuntu.png
    │   ├── OS_Windows_8.png
    │   ├── acer-samll.jpg
    │   ├── bg.jpg
    │   ├── building.png
    │   ├── cloud.png
    │   ├── cutfruit.jpg
    │   ├── cutfruit_bg.jpg
    │   ├── delivery.png
    │   ├── email.png
    │   ├── fruit
    │   │   ├── apple.png
    │   │   ├── background.jpg
    │   │   ├── banana.png
    │   │   ├── basaha.png
    │   │   ├── boom.png
    │   │   ├── developing.png
    │   │   ├── dojo.png
    │   │   ├── flash.png
    │   │   ├── flash_bak.png
    │   │   ├── game-over.png
    │   │   ├── home-desc.png
    │   │   ├── home-mask.png
    │   │   ├── logo.png
    │   │   ├── lose.png
    │   │   ├── new-game.png
    │   │   ├── new.png
    │   │   ├── ninja.png
    │   │   ├── peach.png
    │   │   ├── quit.png
    │   │   ├── sandia.png
    │   │   ├── score.png
    │   │   └── xxxf.png
    │   ├── harddisk.png
    │   ├── helpdesk.png
    │   ├── home.png
    │   ├── host.png
    │   ├── laptop.png
    │   ├── memory.png
    │   ├── ne.png
    │   ├── new-game.png
    │   ├── ok.png
    │   ├── person.png
    │   ├── phone
    │   │   ├── IE.png
    │   │   ├── Karate.png
    │   │   ├── SMS.png
    │   │   ├── Setup.png
    │   │   ├── bullets.png
    │   │   ├── power.png
    │   │   ├── signal.png
    │   │   ├── usb.png
    │   │   └── writing.png
    │   ├── print.png
    │   ├── qq.png
    │   ├── room.jpg
    │   ├── telephone.png
    │   ├── vm.png
    │   ├── vm_inner.jpg
    │   └── zone.png
    ├── index.html
    ├── js
    │   ├── animation.js
    │   ├── dev.js
    │   ├── excanvas.js
    │   ├── jquery.js
    │   ├── jtopo-0.3.0-min.js
    │   ├── menu.js
    │   └── snippet
    │   │   └── jquery.snippet.min.js
    ├── keyboard.html
    ├── link.html
    ├── mix.html
    ├── mix2.html
    ├── mix3.html
    ├── mix4.html
    ├── mouse.html
    ├── node.html
    ├── nodeDown.html
    ├── phoneNode.html
    ├── real.html
    ├── rotate.html
    ├── sound
    │   ├── boom.mp3
    │   ├── boom.ogg
    │   ├── menu.mp3
    │   ├── menu.ogg
    │   ├── over.mp3
    │   ├── over.ogg
    │   ├── splatter.mp3
    │   ├── splatter.ogg
    │   ├── start.mp3
    │   ├── start.ogg
    │   ├── throw.mp3
    │   └── throw.ogg
    ├── star.html
    ├── star2.html
    ├── star3.html
    ├── star4.html
    ├── tree.html
    ├── tree2.html
    ├── tree3.html
    └── umlNode.html
└── src
    ├── jtopo.abstractnode.js
    ├── jtopo.animation.js
    ├── jtopo.container.js
    ├── jtopo.databox.js
    ├── jtopo.element.js
    ├── jtopo.js
    ├── jtopo.layout.js
    ├── jtopo.link.js
    ├── jtopo.node.js
    └── jtopo.util.js


/LICENSE:
--------------------------------------------------------------------------------
  1 | GNU LESSER GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 | 
  9 |   This version of the GNU Lesser General Public License incorporates
 10 | the terms and conditions of version 3 of the GNU General Public
 11 | License, supplemented by the additional permissions listed below.
 12 | 
 13 |   0. Additional Definitions.
 14 | 
 15 |   As used herein, "this License" refers to version 3 of the GNU Lesser
 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU
 17 | General Public License.
 18 | 
 19 |   "The Library" refers to a covered work governed by this License,
 20 | other than an Application or a Combined Work as defined below.
 21 | 
 22 |   An "Application" is any work that makes use of an interface provided
 23 | by the Library, but which is not otherwise based on the Library.
 24 | Defining a subclass of a class defined by the Library is deemed a mode
 25 | of using an interface provided by the Library.
 26 | 
 27 |   A "Combined Work" is a work produced by combining or linking an
 28 | Application with the Library.  The particular version of the Library
 29 | with which the Combined Work was made is also called the "Linked
 30 | Version".
 31 | 
 32 |   The "Minimal Corresponding Source" for a Combined Work means the
 33 | Corresponding Source for the Combined Work, excluding any source code
 34 | for portions of the Combined Work that, considered in isolation, are
 35 | based on the Application, and not on the Linked Version.
 36 | 
 37 |   The "Corresponding Application Code" for a Combined Work means the
 38 | object code and/or source code for the Application, including any data
 39 | and utility programs needed for reproducing the Combined Work from the
 40 | Application, but excluding the System Libraries of the Combined Work.
 41 | 
 42 |   1. Exception to Section 3 of the GNU GPL.
 43 | 
 44 |   You may convey a covered work under sections 3 and 4 of this License
 45 | without being bound by section 3 of the GNU GPL.
 46 | 
 47 |   2. Conveying Modified Versions.
 48 | 
 49 |   If you modify a copy of the Library, and, in your modifications, a
 50 | facility refers to a function or data to be supplied by an Application
 51 | that uses the facility (other than as an argument passed when the
 52 | facility is invoked), then you may convey a copy of the modified
 53 | version:
 54 | 
 55 |    a) under this License, provided that you make a good faith effort to
 56 |    ensure that, in the event an Application does not supply the
 57 |    function or data, the facility still operates, and performs
 58 |    whatever part of its purpose remains meaningful, or
 59 | 
 60 |    b) under the GNU GPL, with none of the additional permissions of
 61 |    this License applicable to that copy.
 62 | 
 63 |   3. Object Code Incorporating Material from Library Header Files.
 64 | 
 65 |   The object code form of an Application may incorporate material from
 66 | a header file that is part of the Library.  You may convey such object
 67 | code under terms of your choice, provided that, if the incorporated
 68 | material is not limited to numerical parameters, data structure
 69 | layouts and accessors, or small macros, inline functions and templates
 70 | (ten or fewer lines in length), you do both of the following:
 71 | 
 72 |    a) Give prominent notice with each copy of the object code that the
 73 |    Library is used in it and that the Library and its use are
 74 |    covered by this License.
 75 | 
 76 |    b) Accompany the object code with a copy of the GNU GPL and this license
 77 |    document.
 78 | 
 79 |   4. Combined Works.
 80 | 
 81 |   You may convey a Combined Work under terms of your choice that,
 82 | taken together, effectively do not restrict modification of the
 83 | portions of the Library contained in the Combined Work and reverse
 84 | engineering for debugging such modifications, if you also do each of
 85 | the following:
 86 | 
 87 |    a) Give prominent notice with each copy of the Combined Work that
 88 |    the Library is used in it and that the Library and its use are
 89 |    covered by this License.
 90 | 
 91 |    b) Accompany the Combined Work with a copy of the GNU GPL and this license
 92 |    document.
 93 | 
 94 |    c) For a Combined Work that displays copyright notices during
 95 |    execution, include the copyright notice for the Library among
 96 |    these notices, as well as a reference directing the user to the
 97 |    copies of the GNU GPL and this license document.
 98 | 
 99 |    d) Do one of the following:
100 | 
101 |        0) Convey the Minimal Corresponding Source under the terms of this
102 |        License, and the Corresponding Application Code in a form
103 |        suitable for, and under terms that permit, the user to
104 |        recombine or relink the Application with a modified version of
105 |        the Linked Version to produce a modified Combined Work, in the
106 |        manner specified by section 6 of the GNU GPL for conveying
107 |        Corresponding Source.
108 | 
109 |        1) Use a suitable shared library mechanism for linking with the
110 |        Library.  A suitable mechanism is one that (a) uses at run time
111 |        a copy of the Library already present on the user's computer
112 |        system, and (b) will operate properly with a modified version
113 |        of the Library that is interface-compatible with the Linked
114 |        Version.
115 | 
116 |    e) Provide Installation Information, but only if you would otherwise
117 |    be required to provide such information under section 6 of the
118 |    GNU GPL, and only to the extent that such information is
119 |    necessary to install and execute a modified version of the
120 |    Combined Work produced by recombining or relinking the
121 |    Application with a modified version of the Linked Version. (If
122 |    you use option 4d0, the Installation Information must accompany
123 |    the Minimal Corresponding Source and Corresponding Application
124 |    Code. If you use option 4d1, you must provide the Installation
125 |    Information in the manner specified by section 6 of the GNU GPL
126 |    for conveying Corresponding Source.)
127 | 
128 |   5. Combined Libraries.
129 | 
130 |   You may place library facilities that are a work based on the
131 | Library side by side in a single library together with other library
132 | facilities that are not Applications and are not covered by this
133 | License, and convey such a combined library under terms of your
134 | choice, if you do both of the following:
135 | 
136 |    a) Accompany the combined library with a copy of the same work based
137 |    on the Library, uncombined with any other library facilities,
138 |    conveyed under the terms of this License.
139 | 
140 |    b) Give prominent notice with the combined library that part of it
141 |    is a work based on the Library, and explaining where to find the
142 |    accompanying uncombined form of the same work.
143 | 
144 |   6. Revised Versions of the GNU Lesser General Public License.
145 | 
146 |   The Free Software Foundation may publish revised and/or new versions
147 | of the GNU Lesser General Public License from time to time. Such new
148 | versions will be similar in spirit to the present version, but may
149 | differ in detail to address new problems or concerns.
150 | 
151 |   Each version is given a distinguishing version number. If the
152 | Library as you received it specifies that a certain numbered version
153 | of the GNU Lesser General Public License "or any later version"
154 | applies to it, you have the option of following the terms and
155 | conditions either of that published version or of any later version
156 | published by the Free Software Foundation. If the Library as you
157 | received it does not specify a version number of the GNU Lesser
158 | General Public License, you may choose any version of the GNU Lesser
159 | General Public License ever published by the Free Software Foundation.
160 | 
161 |   If the Library as you received it specifies that a proxy can decide
162 | whether future versions of the GNU Lesser General Public License shall
163 | apply, that proxy's public statement of acceptance of any version is
164 | permanent authorization for you to choose that version for the
165 | Library.
166 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | JTopo 
2 | =====
3 | 
4 | http://wondery.github.io/jtopo/
5 | 
6 | An simple and powerful HTML5 topology libraries.
7 | More about please to see samples.
8 | 
9 | 


--------------------------------------------------------------------------------
/samples/3d.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 | 	<meta http-equiv="Expires" content="0" />
  5 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  6 |     <!-- Le styles -->
  7 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
  8 |     <style type="text/css">
  9 |       body {
 10 |         padding-top: 60px;
 11 |         padding-bottom: 40px;
 12 |       }
 13 |       .sidebar-nav {
 14 |         padding: 9px 0;
 15 |       }
 16 | 
 17 |       @media (max-width: 980px) {
 18 |         /* Enable use of floated navbar text */
 19 |         .navbar-text.pull-right {
 20 |           float: none;
 21 |           padding-left: 5px;
 22 |           padding-right: 5px;
 23 |         }
 24 |       }
 25 |     </style>
 26 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 27 | 	<script type="text/javascript" src="js/jquery.js"></script>
 28 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 29 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 30 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 31 | 	<script type="text/javascript" src="./js/jtopo-0.3.0-min.js"></script>
 32 | 	<script type="text/javascript" src="js/menu.js"></script>
 33 | 	<script type="text/javascript" src="js/animation.js"></script>
 34 | 	<script id='code'>
 35 | 		var box = null;
 36 | 		$(document).ready(function(){		
 37 | 			box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 38 | 			var bak = box.updateView;
 39 | 			box.updateView = function(){};
 40 | 			
 41 | 			var n = 0;
 42 | 			var beginTime = new Date().getTime();
 43 | 			var rep = function(){
 44 | 				bak.call(box);
 45 | 				n++;
 46 | 				if(n % 100 == 0){
 47 | 					var totalTime = (new Date().getTime()) - beginTime;
 48 | 					var frame = n / (totalTime/1000);
 49 | 					n = 0;
 50 | 					console.log(frame);
 51 | 				}
 52 | 			}
 53 | 
 54 | 			setInterval(function(){rep()}, 1000/24);
 55 | 		
 56 | 			$('#types').change(function(){
 57 | 				var val = $(this).val();
 58 | 				box.clear();
 59 | 				if(val == '') return;
 60 | 				eval(val);
 61 | 			});
 62 | 		});
 63 | 	</script>
 64 | 	<style>
 65 | 		canvas {
 66 | 			background-color:#EEEEEE;
 67 | 			border:1px solid #444;
 68 | 		}
 69 | 	</style>
 70 |   </head>
 71 | 
 72 |   <body>
 73 | 
 74 |     <div class="navbar navbar-inverse navbar-fixed-top">
 75 |       <div class="navbar-inner">
 76 |         <div class="container-fluid">
 77 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 78 |             <span class="icon-bar"></span>
 79 |             <span class="icon-bar"></span>
 80 |             <span class="icon-bar"></span>
 81 |           </button>
 82 |           <a class="brand" href="#">Project name</a>
 83 |           <div class="nav-collapse collapse">
 84 |             <p class="navbar-text pull-right">
 85 |               Logged in as <a href="#" class="navbar-link">Username</a>
 86 |             </p>
 87 |             <ul class="nav">
 88 |               <li class="active"><a href="#">Home</a></li>
 89 |               <li><a href="about.html">About</a></li>
 90 |               <li><a href="contact.html">Contact</a></li>
 91 |             </ul>
 92 |           </div><!--/.nav-collapse -->
 93 |         </div>
 94 |       </div>
 95 |     </div>
 96 | 
 97 |     <div class="container-fluid">
 98 |       <div class="row-fluid">
 99 |         <div class="span3">
100 |           <div class="well sidebar-nav">
101 |             <ul class="nav nav-list" id='Menu_ul'>
102 |             </ul>
103 |           </div><!--/.well -->
104 |         </div><!--/span-->
105 |         <div class="span9">
106 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
107 | 		  	<br>
108 | 		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Effect： </strong>
109 | 		<select id="types">
110 | 		    <option value="">-- please chooice --</option>
111 | 			<option value="d3_5()">3d space</option>
112 | 		</select>
113 |         </div><!--/span-->
114 |       </div><!--/row-->
115 | 
116 |       <hr>
117 | 
118 |       <footer>
119 |         <p>&copy; Company 2013</p>
120 |       </footer>
121 | 
122 |     </div><!--/.fluid-container-->
123 | 
124 |   </body>
125 | </html>
126 | 


--------------------------------------------------------------------------------
/samples/about.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 37 | 	<script type="text/javascript" src="js/menu.js"></script>
 38 | 	<script>
 39 | 		$(document).ready(function(){		
 40 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 41 | 			
 42 | 			function msg(x, y, msg){
 43 | 				var node = new JTopo.TextNode(msg);
 44 | 				node.setLocation(x, y);
 45 | 				node.style.fontSize = '16pt';
 46 | 				box.add(node);	
 47 | 			}
 48 | 
 49 | 			msg(260, 200, 'Email: jtopology@163.com');
 50 | 			msg(300, 250, 'QQ: 94474837');
 51 | 
 52 | 
 53 | 			box.updateView();
 54 | 		});
 55 | 	</script>
 56 | 	<style>
 57 | 		canvas {
 58 | 			background-color:#EEEEEE;
 59 | 			border:1px solid #444;
 60 | 		}
 61 | 	</style>
 62 |   </head>
 63 | 
 64 |   <body>
 65 | 
 66 |     <div class="navbar navbar-inverse navbar-fixed-top">
 67 |       <div class="navbar-inner">
 68 |         <div class="container-fluid">
 69 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 70 |             <span class="icon-bar"></span>
 71 |             <span class="icon-bar"></span>
 72 |             <span class="icon-bar"></span>
 73 |           </button>
 74 |           <a class="brand" href="#">Project name</a>
 75 |           <div class="nav-collapse collapse">
 76 |             <p class="navbar-text pull-right">
 77 |               Logged in as <a href="#" class="navbar-link">Username</a>
 78 |             </p>
 79 |             <ul class="nav">
 80 |               <li class="active"><a href="#">Home</a></li>
 81 |               <li><a href="about.html">About</a></li>
 82 |               <li><a href="contact.html">Contact</a></li>
 83 |             </ul>
 84 |           </div><!--/.nav-collapse -->
 85 |         </div>
 86 |       </div>
 87 |     </div>
 88 | 
 89 |     <div class="container-fluid">
 90 |       <div class="row-fluid">
 91 |         <div class="span3">
 92 |           <div class="well sidebar-nav">
 93 |             <ul class="nav nav-list" id='Menu_ul'>
 94 |             </ul>
 95 |           </div><!--/.well -->
 96 |         </div><!--/span-->
 97 |         <div class="span9">
 98 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
 99 |         </div><!--/span-->
100 |       </div><!--/row-->
101 | 
102 |       <hr>
103 | 
104 |       <footer>
105 |         <p>&copy; Company 2013</p>
106 |       </footer>
107 | 
108 |     </div><!--/.fluid-container-->
109 | 
110 |   </body>
111 | </html>
112 | 


--------------------------------------------------------------------------------
/samples/animation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 | 	<meta http-equiv="Expires" content="0" />
  5 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  6 |     <!-- Le styles -->
  7 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
  8 |     <style type="text/css">
  9 |       body {
 10 |         padding-top: 60px;
 11 |         padding-bottom: 40px;
 12 |       }
 13 |       .sidebar-nav {
 14 |         padding: 9px 0;
 15 |       }
 16 | 
 17 |       @media (max-width: 980px) {
 18 |         /* Enable use of floated navbar text */
 19 |         .navbar-text.pull-right {
 20 |           float: none;
 21 |           padding-left: 5px;
 22 |           padding-right: 5px;
 23 |         }
 24 |       }
 25 |     </style>
 26 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 27 | 	<script type="text/javascript" src="js/jquery.js"></script>
 28 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 29 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 30 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 31 | 	
 32 | 	
 33 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 34 | 	
 35 | 	<script type="text/javascript" src="js/menu.js"></script>
 36 | 	<script type="text/javascript" src="js/animation.js"></script>
 37 | 	<script id='code'>
 38 | 		var box = null;
 39 | 		$(document).ready(function(){		
 40 | 			box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 41 | 		
 42 | 			$('#types').change(function(){
 43 | 				var val = $(this).val();
 44 | 				box.clear();
 45 | 				eval(val);
 46 | 			});
 47 | 
 48 | 		d3();
 49 | 		});
 50 | 	</script>
 51 | 	<style>
 52 | 		canvas {
 53 | 			background-color:#EEEEEE;
 54 | 			border:1px solid #444;
 55 | 		}
 56 | 	</style>
 57 |   </head>
 58 | 
 59 |   <body>
 60 | 
 61 |     <div class="navbar navbar-inverse navbar-fixed-top">
 62 |       <div class="navbar-inner">
 63 |         <div class="container-fluid">
 64 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 65 |             <span class="icon-bar"></span>
 66 |             <span class="icon-bar"></span>
 67 |             <span class="icon-bar"></span>
 68 |           </button>
 69 |           <a class="brand" href="#">Project name</a>
 70 |           <div class="nav-collapse collapse">
 71 |             <p class="navbar-text pull-right">
 72 |               Logged in as <a href="#" class="navbar-link">Username</a>
 73 |             </p>
 74 |             <ul class="nav">
 75 |               <li class="active"><a href="#">Home</a></li>
 76 |               <li><a href="about.html">About</a></li>
 77 |               <li><a href="contact.html">Contact</a></li>
 78 |             </ul>
 79 |           </div><!--/.nav-collapse -->
 80 |         </div>
 81 |       </div>
 82 |     </div>
 83 | 
 84 |     <div class="container-fluid">
 85 |       <div class="row-fluid">
 86 |         <div class="span3">
 87 |           <div class="well sidebar-nav">
 88 |             <ul class="nav nav-list" id='Menu_ul'>
 89 |             </ul>
 90 |           </div><!--/.well -->
 91 |         </div><!--/span-->
 92 |         <div class="span9">
 93 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
 94 | 		  	<br>
 95 | 		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Chooice： </strong>
 96 | 		<select id="types">
 97 | 			<option value="basic()">round</option>
 98 | 			<option value="sunstart()">Sun-Moon-Star</option>
 99 | 			<option value="basic1()">Gravity</option>
100 | 			<option value="basic2()">Cycle</option>
101 | 			<option value="basic4()">Fountain</option>
102 | 			<option value="basic5()">Frictional </option>
103 | 			<option value="advance1()">Slow</option>		
104 | 			<option value="advance2()">Spring</option>
105 | 			<option value="advance3()">Spring-chain</option>
106 | 			<option value="advance4()">Spring-muti-target</option>
107 | 		</select>
108 |         </div><!--/span-->
109 |       </div><!--/row-->
110 | 
111 |       <hr>
112 | 
113 |       <footer>
114 |         <p>&copy; Company 2013</p>
115 |       </footer>
116 | 
117 |     </div><!--/.fluid-container-->
118 | 
119 |   </body>
120 | </html>
121 | 


--------------------------------------------------------------------------------
/samples/contact.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 37 | 	<script type="text/javascript" src="js/menu.js"></script>
 38 | 	<script id='code'>
 39 | 		$(document).ready(function(){		
 40 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 41 | 			
 42 | 			function msg(x, y, msg){
 43 | 				var node = new JTopo.TextNode(msg);
 44 | 				node.setLocation(x, y);
 45 | 				node.style.fontSize = '16pt';
 46 | 				box.add(node);	
 47 | 			}
 48 | 
 49 | 			msg(260, 200, 'Email: jtopology@163.com');
 50 | 			msg(300, 250, 'QQ: 94474837');
 51 | 
 52 | 
 53 | 			box.updateView();
 54 | 		});
 55 | 	</script>
 56 | 	<style>
 57 | 		canvas {
 58 | 			background-color:#EEEEEE;
 59 | 			border:1px solid #444;
 60 | 		}
 61 | 	</style>
 62 |   </head>
 63 | 
 64 |   <body>
 65 | 
 66 |     <div class="navbar navbar-inverse navbar-fixed-top">
 67 |       <div class="navbar-inner">
 68 |         <div class="container-fluid">
 69 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 70 |             <span class="icon-bar"></span>
 71 |             <span class="icon-bar"></span>
 72 |             <span class="icon-bar"></span>
 73 |           </button>
 74 |           <a class="brand" href="#">Project name</a>
 75 |           <div class="nav-collapse collapse">
 76 |             <p class="navbar-text pull-right">
 77 |               Logged in as <a href="#" class="navbar-link">Username</a>
 78 |             </p>
 79 |             <ul class="nav">
 80 |               <li class="active"><a href="#">Home</a></li>
 81 |               <li><a href="about.html">About</a></li>
 82 |               <li><a href="contact.html">Contact</a></li>
 83 |             </ul>
 84 |           </div><!--/.nav-collapse -->
 85 |         </div>
 86 |       </div>
 87 |     </div>
 88 | 
 89 |     <div class="container-fluid">
 90 |       <div class="row-fluid">
 91 |         <div class="span3">
 92 |           <div class="well sidebar-nav">
 93 |             <ul class="nav nav-list" id='Menu_ul'>
 94 |             </ul>
 95 |           </div><!--/.well -->
 96 |         </div><!--/span-->
 97 |         <div class="span9">
 98 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
 99 |         </div><!--/span-->
100 |       </div><!--/row-->
101 | 
102 |       <hr>
103 | 
104 |       <footer>
105 |         <p>&copy; Company 2013</p>
106 |       </footer>
107 | 
108 |     </div><!--/.fluid-container-->
109 | 
110 |   </body>
111 | </html>
112 | 


--------------------------------------------------------------------------------
/samples/container.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 37 | 	<script type="text/javascript" src="js/menu.js"></script>
 38 | 	<script id='code'>
 39 | 		$(document).ready(function(){		
 40 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 41 | 
 42 | 			function HostNode(name){
 43 | 				var node = new JTopo.Node(name);
 44 | 				node.setType('host');
 45 | 				return node;
 46 | 			}
 47 | 			function VmNode(name){
 48 | 				var node = new JTopo.Node(name);
 49 | 				node.setType('vm');
 50 | 				return node;
 51 | 			}
 52 | 			
 53 | 			var nodeA = null;
 54 | 			(function(){
 55 | 				var node0 = new JTopo.GhomboidNode('vm_0');
 56 | 				node0.setLocation(34, 181);
 57 | 				box.add(node0);
 58 | 	
 59 | 				var node1 = new JTopo.GhomboidNode('vm_1');
 60 | 				node1.setLocation(244, 191);
 61 | 				box.add(node1);
 62 | 				nodeA = node1;
 63 | 	
 64 | 				var node2 = new JTopo.GhomboidNode('vm_2');
 65 | 				node2.setLocation(281, 94);				
 66 | 				box.add(node2);
 67 | 	
 68 | 				var group = new JTopo.GhomboidContainer("vmgroup");
 69 | 		        group.style = {fillStyle: '0, 100, 0'};
 70 | 				group.add(node0);
 71 | 				group.add(node1);
 72 | 				group.add(node2);		
 73 | 				
 74 | 				box.add(group);
 75 | 			})();
 76 | 			
 77 | 			(function(){
 78 | 				var node0 = new JTopo.GhomboidNode('vm_0');
 79 | 				node0.setLocation(11, 393);
 80 | 				box.add(node0);
 81 | 	
 82 | 				var node1 = new JTopo.GhomboidNode('vm_1');
 83 | 				node1.setLocation(213, 292);
 84 | 				box.add(node1);
 85 | 	
 86 | 				var node2 = new JTopo.GhomboidNode('vm_2');
 87 | 				node2.setLocation(285, 345);				
 88 | 				box.add(node2);
 89 | 	
 90 | 				var group = new JTopo.GhomboidContainer("vmgroup");
 91 | 		        group.style = {fillStyle: '0, 0, 100'};
 92 | 				group.add(node0);
 93 | 				group.add(node1);
 94 | 				group.add(node2);		
 95 | 				
 96 | 				box.add(new JTopo.FoldLink(nodeA, node1));
 97 | 				
 98 | 				box.add(group);
 99 | 			})();
100 | 
101 | 			box.updateView();
102 | 		});
103 | 	</script>
104 | 	<style>
105 | 		canvas {
106 | 			background-color:#EEEEEE;
107 | 			border:1px solid #444;
108 | 		}
109 | 	</style>
110 |   </head>
111 | 
112 |   <body>
113 | 
114 |     <div class="navbar navbar-inverse navbar-fixed-top">
115 |       <div class="navbar-inner">
116 |         <div class="container-fluid">
117 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
118 |             <span class="icon-bar"></span>
119 |             <span class="icon-bar"></span>
120 |             <span class="icon-bar"></span>
121 |           </button>
122 |           <a class="brand" href="#">Project name</a>
123 |           <div class="nav-collapse collapse">
124 |             <p class="navbar-text pull-right">
125 |               Logged in as <a href="#" class="navbar-link">Username</a>
126 |             </p>
127 |             <ul class="nav">
128 |               <li class="active"><a href="#">Home</a></li>
129 |               <li><a href="about.html">About</a></li>
130 |               <li><a href="contact.html">Contact</a></li>
131 |             </ul>
132 |           </div><!--/.nav-collapse -->
133 |         </div>
134 |       </div>
135 |     </div>
136 | 
137 |     <div class="container-fluid">
138 |       <div class="row-fluid">
139 |         <div class="span3">
140 |           <div class="well sidebar-nav">
141 |             <ul class="nav nav-list" id='Menu_ul'>
142 |             </ul>
143 |           </div><!--/.well -->
144 |         </div><!--/span-->
145 |         <div class="span9">
146 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
147 |         </div><!--/span-->
148 |       </div><!--/row-->
149 | 
150 |       <hr>
151 | 
152 |       <footer>
153 |         <p>&copy; Company 2013</p>
154 |       </footer>
155 | 
156 |     </div><!--/.fluid-container-->
157 | 
158 |   </body>
159 | </html>
160 | 


--------------------------------------------------------------------------------
/samples/container2.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 37 | 	<script type="text/javascript" src="js/menu.js"></script>
 38 | 	<script id='code'>
 39 | 		$(document).ready(function(){		
 40 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 41 | 			//box.image.src= './img/room.jpg';
 42 | 
 43 | 			(function(){
 44 | 				var text1 = new JTopo.TextNode('Shelf-1');
 45 | 				text1.setLocation(190, 300);
 46 | 				box.add(text1);
 47 | 
 48 | 				var text1 = new JTopo.TextNode('Shelf-2');
 49 | 				text1.setLocation(390, 300);
 50 | 				box.add(text1);
 51 | 
 52 | 				var text1 = new JTopo.TextNode('Shelf-2');
 53 | 				text1.setLocation(590, 300);
 54 | 				box.add(text1);
 55 | 
 56 | 				function GravityNode(name){
 57 | 				   var node = new JTopo.Node(name);
 58 | 					node.inContainer = function(target){
 59 | 						return true;
 60 | 					};
 61 | 					node.outContainer = function(target){
 62 | 						return true;
 63 | 					};
 64 | 					return node;
 65 | 				}
 66 | 				var node0 = new JTopo.Node('node');
 67 | 				node0.setType('host');
 68 | 				box.add(node0);
 69 | 
 70 | 				for(var i=0; i<20; i++){
 71 | 					var node = new GravityNode('node'+i);
 72 | 					node.x = 400+Math.random()*50;
 73 | 					node.y = 320+Math.random()*50;
 74 | 					if(Math.random() > 0.5){
 75 | 						node.setType('host');
 76 | 					}else{
 77 | 						node.setType('vm');
 78 | 						node.x -= 100;
 79 | 					}
 80 | 					box.add(node);
 81 | 			   }
 82 | 
 83 | 				var group = new JTopo.GridContainer("hostgroup");
 84 | 				group.x = 150; group.y = 100;
 85 | 				box.add(group);
 86 | 
 87 | 				var group = new JTopo.GridContainer("hostgroup");
 88 | 				group.x = 350; group.y = 100;
 89 | 				group.add(node0);
 90 | 				box.add(group);
 91 | 
 92 | 				var group = new JTopo.GridContainer("hostgroup2");
 93 | 				group.x = 550; group.y = 150;
 94 | 				group.rows = 2; group.cols = 4;
 95 | 				group.style = {fillStyle: '255, 200, 254'};
 96 | 				box.add(group);
 97 | 			})();
 98 | 
 99 | 			box.updateView();
100 | 		});
101 | 	</script>
102 | 	<style>
103 | 		canvas {
104 | 			background-color:#EEEEEE;
105 | 			border:1px solid #444;
106 | 		}
107 | 	</style>
108 |   </head>
109 | 
110 |   <body>
111 | 
112 |     <div class="navbar navbar-inverse navbar-fixed-top">
113 |       <div class="navbar-inner">
114 |         <div class="container-fluid">
115 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
116 |             <span class="icon-bar"></span>
117 |             <span class="icon-bar"></span>
118 |             <span class="icon-bar"></span>
119 |           </button>
120 |           <a class="brand" href="#">Project name</a>
121 |           <div class="nav-collapse collapse">
122 |             <p class="navbar-text pull-right">
123 |               Logged in as <a href="#" class="navbar-link">Username</a>
124 |             </p>
125 |             <ul class="nav">
126 |               <li class="active"><a href="#">Home</a></li>
127 |               <li><a href="about.html">About</a></li>
128 |               <li><a href="contact.html">Contact</a></li>
129 |             </ul>
130 |           </div><!--/.nav-collapse -->
131 |         </div>
132 |       </div>
133 |     </div>
134 | 
135 |     <div class="container-fluid">
136 |       <div class="row-fluid">
137 |         <div class="span3">
138 |           <div class="well sidebar-nav">
139 |             <ul class="nav nav-list" id='Menu_ul'>
140 |             </ul>
141 |           </div><!--/.well -->
142 |         </div><!--/span-->
143 |         <div class="span9">
144 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
145 |         </div><!--/span-->
146 |       </div><!--/row-->
147 | 
148 |       <hr>
149 | 
150 |       <footer>
151 |         <p>&copy; Company 2013</p>
152 |       </footer>
153 | 
154 |     </div><!--/.fluid-container-->
155 | 
156 |   </body>
157 | </html>
158 | 


--------------------------------------------------------------------------------
/samples/cutFruit.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  6 | 	<meta http-equiv="Pragma" content="no-cache" />
  7 | 	<meta http-equiv="Expires" content="0" />
  8 | 
  9 |     <!-- Le styles -->
 10 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 11 |     <style type="text/css">
 12 |       body {
 13 |         padding-top: 60px;
 14 |         padding-bottom: 40px;
 15 |       }
 16 |       .sidebar-nav {
 17 |         padding: 9px 0;
 18 |       }
 19 | 
 20 |       @media (max-width: 980px) {
 21 |         /* Enable use of floated navbar text */
 22 |         .navbar-text.pull-right {
 23 |           float: none;
 24 |           padding-left: 5px;
 25 |           padding-right: 5px;
 26 |         }
 27 |       }
 28 |     </style>
 29 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 30 | 
 31 | 	<script type="text/javascript" src="js/jquery.js"></script>
 32 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 33 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 34 | 
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 37 | 	<script type="text/javascript" src="js/menu.js"></script>
 38 | 	<script id='code'>
 39 | 
 40 | 		function randomFruit(){
 41 | 			var fruits = ['sandia','apple','basaha','peach','banana', 'boom'];
 42 | 			return fruits[Math.floor(Math.random()*fruits.length)];
 43 | 		}
 44 | 		// 音乐控制
 45 | 		function playSound(sound, volume){
 46 | 			var s = document.getElementById(sound);
 47 | 			s.volume = volume ? volume : 0.6;
 48 | 			s.play();
 49 | 		}
 50 | 		function stopSound(sound){
 51 | 			document.getElementById(sound).pause();
 52 | 		}
 53 | 		// 最高分记录
 54 | 		function getBestScore(){
 55 | 			var score = localStorage.getItem('best');
 56 | 			if(score == null){
 57 | 				score = 0;
 58 | 			}else{
 59 | 				score = parseInt(score);
 60 | 			}
 61 | 			return score;
 62 | 		}
 63 | 		function updateBestScore(newBest){
 64 | 			localStorage.setItem('best', newBest);
 65 | 		}
 66 | 		
 67 | 		$(document).ready(function(){					
 68 | 			var box = new JTopo.DataBox('dataBox', $("#canvas")[0]);
 69 | 			box.image.src = './img/cutfruit.jpg';//cutfruit_bg.jpg';
 70 | 			box.isRangeSelectable = false;
 71 | 			
 72 | 			function isBoom(node){
 73 | 				return node.image.src.indexOf('boom') != -1;
 74 | 			}
 75 | 			
 76 | 			var isGameOver = false;
 77 | 			
 78 | 			//游戏开始
 79 | 			function startGame(){
 80 | 				isGameOver = false;
 81 | 				box.clear();	
 82 | 				stopSound('menu');				
 83 | 				playSound('start');
 84 | 				var nodes = [];			
 85 | 				for(var i=0; i<3; i++){
 86 | 					var node = new JTopo.Node();
 87 | 					var fruit = randomFruit();
 88 | 					node.setImage('./img/fruit/'+fruit+'.png');					
 89 | 					box.add(node);
 90 | 					nodes.push(node);					
 91 | 					node.isFruit = true;
 92 | 				}
 93 | 				
 94 | 				var score = 0;
 95 | 				
 96 | 				var scoreIcon = iconNode('score.png', 10, 10);			
 97 | 				var scoreNode = new JTopo.TextNode('0');
 98 | 				scoreNode.style.fontSize = '18pt';
 99 | 				scoreNode.style.strokeStyle = 'rgb(255,255,0)';
100 | 				scoreNode.setLocation(60, 24);
101 | 				box.add(scoreNode);
102 | 				
103 | 				var bestScoreNode = new JTopo.TextNode('Best :' + getBestScore());
104 | 				bestScoreNode.style.fontSize = '18pt';
105 | 				bestScoreNode.style.strokeStyle = 'rgb(255,255,0)';
106 | 				bestScoreNode.setLocation(10, 60);
107 | 				box.add(bestScoreNode);
108 | 				
109 | 				var lose = 0;
110 | 				var loseIcon = iconNode('lose.png', 530, 10);			
111 | 				var loseNode = new JTopo.TextNode('0');
112 | 				loseNode.style.fontSize = '18pt';
113 | 				loseNode.style.strokeStyle = 'rgb(255,255,0)';
114 | 				loseNode.setLocation(590, 22);
115 | 				box.add(loseNode);
116 | 
117 | 				var aNode = new JTopo.Node();
118 | 				var bNode = new JTopo.Node();
119 | 				var link = new JTopo.Link(aNode, bNode);
120 | 				box.add(link);
121 | 								
122 | 				box.subscribe('mouseover', function(e){
123 | 					if(! e.context.isOnMouseDown) return;
124 | 					var node = e.target;	
125 | 					if(!node.isFruit || node.visible == false) {
126 | 						return;
127 | 					}	
128 | 					if(isGameOver) return;
129 | 					if(isBoom(node)){	
130 | 						isGameOver = true;
131 | 						playSound('boom', 1);
132 | 						JTopo.Animation.stopAll();
133 | 						JTopo.Animation.scala(node, {scala: 2, context:box}).run().onStop(function(n){
134 | 							box.clear();							
135 | 							JTopo.Animation.startAll();
136 | 							GameOver();
137 | 						});												
138 | 					}else{
139 | 						scoreNode.setName((score+=1));
140 | 						if(score > getBestScore()){
141 | 							updateBestScore(score);
142 | 							bestScoreNode.setName('Best :' + score);
143 | 						}
144 | 						
145 | 						playSound('splatter');
146 | 						//切成两半
147 | 						JTopo.Animation.dividedTwoPiece(node, 
148 | 							{angle:Math.atan2(e.dy, e.dx), context:box}).run().onStop(function(n){
149 | 								var fruit =  randomFruit();			
150 | 								node.setImage('./img/fruit/'+fruit+'.png');
151 | 						});
152 | 					}
153 | 				});
154 | 				
155 | 				for(var i=0; i<nodes.length; i++){
156 | 					var node = nodes[i];
157 | 					//不停的向往抛
158 | 					var e = JTopo.Animation.repeatThrow(node, {context:box}).run()
159 | 						.onStop(function(n){						
160 | 						if(n.visible == true){
161 | 							if(! isBoom(n)){																
162 | 								loseNode.setName((++lose));							
163 | 								iconNode('lose.png', n.x, n.y - 60);
164 | 								if(lose > 3){
165 | 									playSound('over');								
166 | 									GameOver();								
167 | 								}
168 | 							}else{
169 | 								var fruit =  randomFruit();			
170 | 								n.setImage('./img/fruit/'+fruit+'.png');
171 | 							}
172 | 						}					
173 | 						playSound('throw');
174 | 					});
175 | 					//旋转着
176 | 					JTopo.Animation.rotate(node, {context:box}).run();
177 | 				}				
178 | 			}						
179 | 			
180 | 			// 在指定位置显示图像节点
181 | 			function iconNode(image, x, y, isMenu){
182 | 				var node = new JTopo.Node();
183 | 				node.setImage('./img/fruit/' + image);
184 | 				node.setLocation(x, y);
185 | 				box.add(node);
186 | 				node.isSelected = function(){ return false;	};
187 | 				node.isFocus = function(){return false;	};
188 | 				node.isMenu = isMenu;
189 | 				node.setDragable(false);
190 | 				return node;
191 | 			}
192 | 			
193 | 			// 游戏结束
194 | 			function GameOver(){
195 | 				isGameOver = true;
196 | 				JTopo.Animation.stopAll();
197 | 				setTimeout(function(){
198 | 					box.clear();
199 | 					JTopo.Animation.startAll();
200 | 					var overNode = iconNode('game-over.png', 60, -100);
201 | 					JTopo.Animation.move(overNode, {context:box, position:{x:60, y:200}}).run();
202 | 					setTimeout(function(){location.href = location.href}, 3000);
203 | 				}, 1000);				
204 | 			}
205 | 			
206 | 			// 进入游戏主菜单
207 | 			function showMenu(){
208 | 				box.clear();
209 | 				playSound('menu');
210 | 				var headBgNode = iconNode('home-mask.png', 0, -300);
211 | 				JTopo.Animation.move(headBgNode, {context:box, position:{x:0, y:0}}).run();
212 | 				
213 | 				var logoNode = iconNode('logo.png', 14, -600);				
214 | 				JTopo.Animation.move(logoNode, {context:box, position:{x:14, y:2}}).run();
215 | 				
216 | 				var ninjaNode = iconNode('ninja.png', 320, -900);
217 | 				JTopo.Animation.move(ninjaNode, {context:box, position:{x:320, y:40}}).run();
218 | 				
219 | 				var homeDescNode = iconNode('home-desc.png', -1000, 127);								
220 | 				JTopo.Animation.move(homeDescNode, {context:box, position:{x:16, y:127}}).run();
221 | 				
222 | 				setTimeout(function(){				
223 | 					var peachNode = iconNode('peach.png', 91, 306, true);				
224 | 					var dojoNode = iconNode('dojo.png', 34, 248);						
225 | 					JTopo.Animation.rotate(dojoNode, {context:box, v: -0.01}).run();
226 | 					JTopo.Animation.rotate(peachNode, {context:box, v: 0.03}).run();	
227 | 					
228 | 					var newGameNode = iconNode('new-game.png', 239, 220);				
229 | 					var sandiaNode = iconNode('sandia.png', 289, 275, true);						
230 | 					JTopo.Animation.rotate(sandiaNode, {context:box, v: 0.04}).run();
231 | 					JTopo.Animation.rotate(newGameNode, {context:box, v: 0.01}).run();	
232 | 					
233 | 					var newNode = iconNode('new.png', 148, 213);
234 | 					JTopo.Animation.cycle(newNode, {context:box, p1:{x:34, y:190}, p2:{x:34, y:200}}).run();	
235 | 
236 | 					var quitNode = iconNode('quit.png', 485, 303);
237 | 					var boomNode = iconNode('boom.png', 521, 333, true);	
238 | 					JTopo.Animation.rotate(quitNode, {context:box, v: 0.02}).run();	
239 | 
240 | 					box.subscribe('mouseover', function(e){
241 | 						if(! e.context.isOnMouseDown) return;
242 | 						var node = e.target;	
243 | 						if(node == null) return;
244 | 						if(!node.isMenu || node.visible == false) {
245 | 							return;
246 | 						}
247 | 						playSound('splatter');
248 | 						//切成两半
249 | 						JTopo.Animation.dividedTwoPiece(node, 
250 | 							{angle:Math.atan2(e.dy, e.dx), context:box}).run().onStop(function(n){						
251 | 							startGame();
252 | 						});									
253 | 					});
254 | 				}, 1500);
255 | 			}
256 | 			
257 | 			showMenu();			
258 | 			box.updateView();			
259 | 		});
260 | 				
261 | 	</script>
262 | 	<style>
263 | 		canvas {
264 | 			background-color:#EEEEEE;
265 | 			border:1px solid #444;
266 | 		}
267 | 	</style>
268 |   </head>
269 | 
270 |   <body>
271 | 
272 |     <div class="navbar navbar-inverse navbar-fixed-top">
273 |       <div class="navbar-inner">
274 |         <div class="container-fluid">
275 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
276 |             <span class="icon-bar"></span>
277 |             <span class="icon-bar"></span>
278 |             <span class="icon-bar"></span>
279 |           </button>
280 |           <a class="brand" href="#">Project name</a>
281 |           <div class="nav-collapse collapse">
282 |             <p class="navbar-text pull-right">
283 |               Logged in as <a href="#" class="navbar-link">Username</a>
284 |             </p>
285 |             <ul class="nav">
286 |               <li class="active"><a href="#">Home</a></li>
287 |               <li><a href="about.html">About</a></li>
288 |               <li><a href="contact.html">Contact</a></li>
289 |             </ul>
290 |           </div><!--/.nav-collapse -->
291 |         </div>
292 |       </div>
293 |     </div>
294 | 
295 |     <div class="container-fluid">
296 |       <div class="row-fluid">
297 |         <div class="span3">
298 |           <div class="well sidebar-nav">
299 |             <ul class="nav nav-list" id='Menu_ul'>
300 |             </ul>
301 |           </div><!--/.well -->
302 |         </div><!--/span-->
303 |         <div class="span9">
304 |           <canvas id="canvas" style="" width="640" height="480"></canvas>
305 |         </div><!--/span-->
306 |       </div><!--/row-->
307 | 
308 |       <hr>
309 | 	<audio id="throw">
310 |         <source src="./sound/throw.ogg">
311 |     </audio>
312 | 	<audio id="splatter">
313 |         <source src="./sound/splatter.ogg">
314 |     </audio>
315 | 	<audio id="start">
316 |         <source src="./sound/start.ogg">
317 |     </audio>
318 | 	<audio id="menu">
319 |         <source src="./sound/menu.ogg">
320 |     </audio>
321 | 	<audio id="over">
322 |         <source src="./sound/over.ogg">
323 |     </audio>	
324 | 	<audio id="boom">
325 |         <source src="./sound/boom.ogg">
326 |     </audio>
327 |       <footer>
328 |         <p>&copy; Company 2013</p>
329 |       </footer>
330 | 
331 |     </div><!--/.fluid-container-->
332 | 
333 |   </body>
334 | </html>
335 | 


--------------------------------------------------------------------------------
/samples/dev.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 |   <head>
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
 6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
 8 | 	<meta http-equiv="Pragma" content="no-cache" />
 9 | 	<meta http-equiv="Expires" content="0" />
10 |        
11 | 	<script type="text/javascript" src="../samples/js/jquery.js"></script>
12 | 	<script type="text/javascript" src="../samples/js/excanvas.js"></script>
13 |         
14 |     <script type="text/javascript" src="../src/jtopo.js"></script>
15 | 
16 |     <script type="text/javascript" src="../src/jtopo.util.js"></script>
17 |     <script type="text/javascript" src="../src/jtopo.element.js"></script>
18 |     <script type="text/javascript" src="../src/jtopo.abstractnode.js"></script>
19 |     <script type="text/javascript" src="../src/jtopo.node.js"></script>
20 |     <script type="text/javascript" src="../src/jtopo.databox.js"></script>
21 |     <script type="text/javascript" src="../src/jtopo.link.js"></script>
22 |     <script type="text/javascript" src="../src/jtopo.container.js"></script>
23 |     
24 |     <script type="text/javascript" src="../src/jtopo.layout.js"></script>
25 |     <script type="text/javascript" src="../src/jtopo.animation.js"></script>
26 |     
27 |     <script type="text/javascript" src="js/dev.js"></script>
28 | 	<script id='code'>
29 | 	  
30 | 	</script>
31 | 	<style>
32 | 	  canvas {
33 | 	  background-color:#EEEEEE;
34 | 	  border:1px solid #444;
35 | 	  }
36 | 	</style>
37 |   </head>
38 |   
39 |   <body>
40 | 	
41 |     <canvas id="canvas" style="" width="800" height="800"></canvas>
42 | 	
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/samples/device.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 38 | 
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 
 42 | 		$(document).ready(function(){					
 43 | 			var box = new JTopo.DataBox('dataBox', $("#canvas")[0]);
 44 | 			box.image.src= './img/room.jpg';
 45 | 
 46 | 			for(var i=0; i<5; i++){
 47 | 				var pcNode = new JTopo.Node('pc');
 48 | 				pcNode.setImage('./img/acer-samll.jpg');
 49 | 				pcNode.width = 65;
 50 | 				pcNode.height = 124;
 51 | 				pcNode.setLocation(200+i*100, 500);
 52 | 				box.add(pcNode);
 53 | 			}
 54 | 
 55 | 			var vmNode = new JTopo.Node();
 56 | 			vmNode.setImage('./img/vm_inner.jpg');
 57 | 			vmNode.width = 900;
 58 | 			vmNode.height = 600;
 59 | 			vmNode.setLocation(100, 2000);
 60 | 			box.add(vmNode);
 61 | 
 62 | 			box.updateView();
 63 | 
 64 | 			setTimeout(function(){
 65 | 				vmNode.setLocation(100, 2000);
 66 | 			}, 500);
 67 | 		
 68 | 			box.subscribe('mouseup', function(e){
 69 | 				if(e.target && e.target != vmNode){
 70 | 					vmNode.visible = true;
 71 | 					vmNode.setLocation(100, 50);
 72 | 				}else{
 73 | 					vmNode.visible = false;
 74 | 					vmNode.setLocation(100, 2000);
 75 | 				}
 76 | 			});
 77 | 		});
 78 | 	</script>
 79 | 	<style>
 80 | 		canvas {
 81 | 			background-color:#EEEEEE;
 82 | 			border:1px solid #444;
 83 | 		}
 84 | 	</style>
 85 |   </head>
 86 | 
 87 |   <body>
 88 | 
 89 |     <div class="navbar navbar-inverse navbar-fixed-top">
 90 |       <div class="navbar-inner">
 91 |         <div class="container-fluid">
 92 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 93 |             <span class="icon-bar"></span>
 94 |             <span class="icon-bar"></span>
 95 |             <span class="icon-bar"></span>
 96 |           </button>
 97 |           <a class="brand" href="#">Project name</a>
 98 |           <div class="nav-collapse collapse">
 99 |             <p class="navbar-text pull-right">
100 |               Logged in as <a href="#" class="navbar-link">Username</a>
101 |             </p>
102 |             <ul class="nav">
103 |               <li class="active"><a href="#">Home</a></li>
104 |               <li><a href="about.html">About</a></li>
105 |               <li><a href="contact.html">Contact</a></li>
106 |             </ul>
107 |           </div><!--/.nav-collapse -->
108 |         </div>
109 |       </div>
110 |     </div>
111 | 
112 |     <div class="container-fluid">
113 |       <div class="row-fluid">
114 |         <div class="span3">
115 |           <div class="well sidebar-nav">
116 |             <ul class="nav nav-list" id='Menu_ul'>
117 |             </ul>
118 |           </div><!--/.well -->
119 |         </div><!--/span-->
120 |         <div class="span9">
121 |           <canvas id="canvas" style="" width="1101" height="698"></canvas>
122 |         </div><!--/span-->
123 |       </div><!--/row-->
124 | 
125 |       <hr>
126 | 
127 |       <footer>
128 |         <p>&copy; Company 2013</p>
129 |       </footer>
130 | 
131 |     </div><!--/.fluid-container-->
132 | 
133 |   </body>
134 | </html>
135 | 


--------------------------------------------------------------------------------
/samples/diy.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 
 37 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 38 | 
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 		// Simulator for DIY an virtual computer through of mouse drag.
 42 | 		// Step:
 43 | 		// 1. Drag the components(disk/memory/OS(CD)) to the chassis(one panel on 
 44 | 		//	  most left side),
 45 | 		// 2. Click the play button, Congratulation! one virtual computer is born.
 46 | 		// 3. See the virtual computer on the bottom panel.
 47 | 
 48 | 		$(document).ready(function(){					
 49 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 50 | 			//box.image.src= './img/room.jpg';
 51 | 
 52 | 			(function(){
 53 | 							
 54 | 				function HardDiskNode(name){
 55 | 					var node = new JTopo.Node(name);
 56 | 					node.inContainer = function(target){
 57 | 						return true;
 58 | 					};
 59 | 					node.outContainer = function(target){
 60 | 						return true;
 61 | 					};
 62 | 					node.setSize(128, 128);
 63 | 					node.setImage('./img/harddisk.png');
 64 | 					return node;
 65 | 				}
 66 | 
 67 | 				function MemoryNode(name){
 68 | 					var node = new JTopo.Node(name);
 69 | 					node.inContainer = function(target){
 70 | 						return true;
 71 | 					};
 72 | 					node.outContainer = function(target){
 73 | 						return true;
 74 | 					};
 75 | 					node.setTip('DDR-3');
 76 | 					node.setSize(128, 128);
 77 | 					node.setImage('./img/memory.png');
 78 | 					return node;
 79 | 				}
 80 | 
 81 | 				function OsNode(name){
 82 | 					var node = new JTopo.Node(name);
 83 | 					node.inContainer = function(target){
 84 | 						return true;
 85 | 					};
 86 | 					node.outContainer = function(target){
 87 | 						return true;
 88 | 					};
 89 | 					node.setSize(128, 128);
 90 | 					node.setImage('./img/memory.png');
 91 | 					return node;
 92 | 				}
 93 | 
 94 | 				//An empty chassis
 95 | 				var chassis = new JTopo.GridContainer("vm");
 96 | 				chassis.setDragable(false);
 97 | 				chassis.x = 21; chassis.y = 100;
 98 | 				chassis.cellWidth = 140;
 99 | 				chassis.cellHeight = 160;
100 | 				box.add(chassis);
101 | 
102 | 
103 | 				// Disk container
104 | 				var diskContainer = new JTopo.GridContainer();
105 | 				diskContainer.setDragable(false);
106 | 				diskContainer.cellWidth = 128;
107 | 				diskContainer.cellHeight = 128;
108 | 				box.add(diskContainer);
109 | 				diskContainer.x = 350; diskContainer.y = 30;
110 | 				diskContainer.rows = 1; diskContainer.cols = 3;
111 | 				diskContainer.style = {fillStyle: '255, 200, 254'};
112 | 				// Put in three pieces of hard disk
113 | 				for(var i=0; i<3; i++){
114 | 					var node = new HardDiskNode((i+1)*20 + 'GB');
115 | 					box.add(node);
116 | 					diskContainer.add(node);
117 | 				}
118 | 				
119 | 				// Memory Container
120 | 				var memoryContainer = new JTopo.GridContainer();
121 | 				memoryContainer.setDragable(false);
122 | 				memoryContainer.cellWidth = 128;
123 | 				memoryContainer.cellHeight = 128;
124 | 				box.add(memoryContainer);
125 | 				memoryContainer.x = 350; memoryContainer.y = 208;
126 | 				memoryContainer.rows = 1; memoryContainer.cols = 3;
127 | 				memoryContainer.style = {fillStyle: '255, 200, 254'};
128 | 				// Put in three pieces of memory card
129 | 				for(var i=0; i<3; i++){
130 | 					var node = new MemoryNode((i+1) + 'GB');
131 | 					box.add(node);
132 | 					memoryContainer.add(node);
133 | 				}
134 | 
135 | 				// OS(CD) Container
136 | 				var OSContainer = new JTopo.GridContainer();
137 | 				OSContainer.setDragable(false);
138 | 				OSContainer.cellWidth = 128;
139 | 				OSContainer.cellHeight = 128;
140 | 				box.add(OSContainer);
141 | 				OSContainer.x = 350; OSContainer.y = 408;
142 | 				OSContainer.rows = 1; OSContainer.cols = 3;
143 | 				OSContainer.style = {fillStyle: '255, 200, 254'};
144 | 				// Put in three CDS
145 | 				var oss = [
146 | 					{name:'Windows-8', image: './img/OS_Windows_8.png'},
147 | 					{name:'Linux', image: './img/OS_Ubuntu.png'},
148 | 					{name:'Mac', image: './img/OS_Apple.png'}
149 | 				];
150 | 				for(var i=0; i<oss.length; i++){
151 | 					var os = oss[i];
152 | 					var node = new OsNode(os.name);
153 | 					node.setSize(128, 128);
154 | 					node.setImage(os.image);
155 | 					box.add(node);
156 | 					OSContainer.add(node);
157 | 				}
158 | 
159 | 				// The virtual computer container(to accommodate already assembled).
160 | 				var vmContainer = new JTopo.GridContainer();
161 | 				vmContainer.setDragable(false);
162 | 				box.add(vmContainer);
163 | 				vmContainer.cellWidth = 128;
164 | 				vmContainer.cellHeight = 128;
165 | 				vmContainer.x = 0; vmContainer.y = 577;
166 | 				vmContainer.rows = 2; vmContainer.cols = 10;
167 | 
168 | 				// Play button				
169 | 				var playButton = new JTopo.Node();
170 | 				playButton.setTip('execute!');
171 | 				playButton.setDragable(false);
172 | 				playButton.setImage('./img/ok.png');
173 | 				playButton.setSize(64, 64);
174 | 				playButton.setLocation(120, 490);
175 | 				box.add(playButton);
176 | 				
177 | 				var vms = [];
178 | 				// Play button's event handler
179 | 				box.subscribe('mousedown', function(e){
180 | 					if(e.target === playButton && chassis.items.length >= 3){
181 | 						var node = new JTopo.Node();
182 | 						node.setImage('./img/acer-samll.jpg');
183 | 						box.add(node);
184 | 						node.setSize(65, 124);
185 | 						node.setLocation(100+ vms.length*148, 590);
186 | 
187 | 						var name = '';
188 | 						for(var i=0; i<chassis.items.length; i++){
189 | 							name += ' ' + chassis.items[i].name;
190 | 						}
191 | 						node.setName(name);
192 | 						vms.push(node);
193 | 						vmContainer.add(node);
194 | 						box.updateView();
195 | 					}
196 | 				});
197 | 			})();
198 | 
199 | 			box.updateView();			
200 | 		});
201 | 	</script>
202 | 	<style>
203 | 		canvas {
204 | 			background-color:#EEEEEE;
205 | 			border:1px solid #444;
206 | 		}
207 | 	</style>
208 |   </head>
209 | 
210 |   <body>
211 | 
212 |     <div class="navbar navbar-inverse navbar-fixed-top">
213 |       <div class="navbar-inner">
214 |         <div class="container-fluid">
215 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
216 |             <span class="icon-bar"></span>
217 |             <span class="icon-bar"></span>
218 |             <span class="icon-bar"></span>
219 |           </button>
220 |           <a class="brand" href="#">Project name</a>
221 |           <div class="nav-collapse collapse">
222 |             <p class="navbar-text pull-right">
223 |               Logged in as <a href="#" class="navbar-link">Username</a>
224 |             </p>
225 |             <ul class="nav">
226 |               <li class="active"><a href="#">Home</a></li>
227 |               <li><a href="about.html">About</a></li>
228 |               <li><a href="contact.html">Contact</a></li>
229 |             </ul>
230 |           </div><!--/.nav-collapse -->
231 |         </div>
232 |       </div>
233 |     </div>
234 | 
235 |     <div class="container-fluid">
236 |       <div class="row-fluid">
237 |         <div class="span3">
238 |           <div class="well sidebar-nav">
239 |             <ul class="nav nav-list" id='Menu_ul'>
240 |             </ul>
241 |           </div><!--/.well -->
242 |         </div><!--/span-->
243 |         <div class="span9">
244 |           <canvas id="canvas" style="" width="800" height="798"></canvas>
245 |         </div><!--/span-->
246 |       </div><!--/row-->
247 | 
248 |       <hr>
249 | 
250 |       <footer>
251 |         <p>&copy; Company 2013</p>
252 |       </footer>
253 | 
254 |     </div><!--/.fluid-container-->
255 | 
256 |   </body>
257 | </html>
258 | 


--------------------------------------------------------------------------------
/samples/gravitate.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	
 40 | 	
 41 | 	<script type="text/javascript" src="js/menu.js"></script>
 42 | 	<script id='code'>
 43 | 		$(document).ready(function(){		
 44 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 45 | 			
 46 | 			function VmNode(name){
 47 | 				var node = new JTopo.Node(name);
 48 | 				node.setType('vm');
 49 | 				// gravitate condition.
 50 | 				node.gravitate = function(targetNode){
 51 | 					return targetNode.type == 'host';
 52 | 				};
 53 | 				return node;
 54 | 			}
 55 | 
 56 | 			var zoneNode = new JTopo.Node();
 57 | 			zoneNode.setType('zone');
 58 | 			zoneNode.setLocation(350, 30);
 59 | 			zoneNode.layout = {type: 'tree', auto:true, width: 240, height: 160};
 60 | 			box.add(zoneNode);			
 61 | 
 62 | 			for(var i=0; i<3; i++){
 63 | 				var hostNode = new JTopo.Node("host");
 64 | 				hostNode.setType('host');
 65 | 				hostNode.layout = {type:'star', auto:true, radius:100, endDegree:Math.PI};
 66 | 				box.add(hostNode);
 67 | 				box.add(new JTopo.Link(zoneNode, hostNode));	
 68 | 
 69 | 				for(var j=0; j<3; j++){
 70 | 					var vmNode = new VmNode("vm");
 71 | 					box.add(vmNode);
 72 | 					box.add(new JTopo.Link(hostNode, vmNode));
 73 | 				}
 74 | 			}
 75 | 
 76 | 			box.layoutNode(zoneNode);
 77 | 
 78 | 			var node = new JTopo.TextNode('Drag vm node to other host.');
 79 | 			node.setDragable(false);
 80 | 			node.setLocation(260, 430);
 81 | 			node.style.fontSize = '16pt';
 82 | 			box.add(node);	
 83 | 
 84 | 			box.updateView();
 85 | 		});
 86 | 	</script>
 87 | 	<style>
 88 | 		canvas {
 89 | 			background-color:#EEEEEE;
 90 | 			border:1px solid #444;
 91 | 		}
 92 | 	</style>
 93 |   </head>
 94 | 
 95 |   <body>
 96 | 
 97 |     <div class="navbar navbar-inverse navbar-fixed-top">
 98 |       <div class="navbar-inner">
 99 |         <div class="container-fluid">
100 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
101 |             <span class="icon-bar"></span>
102 |             <span class="icon-bar"></span>
103 |             <span class="icon-bar"></span>
104 |           </button>
105 |           <a class="brand" href="#">Project name</a>
106 |           <div class="nav-collapse collapse">
107 |             <p class="navbar-text pull-right">
108 |               Logged in as <a href="#" class="navbar-link">Username</a>
109 |             </p>
110 |             <ul class="nav">
111 |               <li class="active"><a href="#">Home</a></li>
112 |               <li><a href="about.html">About</a></li>
113 |               <li><a href="contact.html">Contact</a></li>
114 |             </ul>
115 |           </div><!--/.nav-collapse -->
116 |         </div>
117 |       </div>
118 |     </div>
119 | 
120 |     <div class="container-fluid">
121 |       <div class="row-fluid">
122 |         <div class="span3">
123 |           <div class="well sidebar-nav">
124 |             <ul class="nav nav-list" id='Menu_ul'>
125 |             </ul>			
126 |           </div><!--/.well -->
127 |         </div><!--/span-->
128 |         <div class="span9">
129 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
130 |           	<p>
131 |         </div><!--/span-->
132 |       </div><!--/row-->
133 | 
134 |       <hr>
135 | 
136 |       <footer>
137 |         <p>&copy; Company 2013</p>
138 |       </footer>
139 | 
140 |     </div><!--/.fluid-container-->
141 | 
142 |   </body>
143 | </html>
144 | 


--------------------------------------------------------------------------------
/samples/img/OS_Apple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/OS_Apple.png


--------------------------------------------------------------------------------
/samples/img/OS_Ubuntu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/OS_Ubuntu.png


--------------------------------------------------------------------------------
/samples/img/OS_Windows_8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/OS_Windows_8.png


--------------------------------------------------------------------------------
/samples/img/acer-samll.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/acer-samll.jpg


--------------------------------------------------------------------------------
/samples/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/bg.jpg


--------------------------------------------------------------------------------
/samples/img/building.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/building.png


--------------------------------------------------------------------------------
/samples/img/cloud.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/cloud.png


--------------------------------------------------------------------------------
/samples/img/cutfruit.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/cutfruit.jpg


--------------------------------------------------------------------------------
/samples/img/cutfruit_bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/cutfruit_bg.jpg


--------------------------------------------------------------------------------
/samples/img/delivery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/delivery.png


--------------------------------------------------------------------------------
/samples/img/email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/email.png


--------------------------------------------------------------------------------
/samples/img/fruit/apple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/apple.png


--------------------------------------------------------------------------------
/samples/img/fruit/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/background.jpg


--------------------------------------------------------------------------------
/samples/img/fruit/banana.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/banana.png


--------------------------------------------------------------------------------
/samples/img/fruit/basaha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/basaha.png


--------------------------------------------------------------------------------
/samples/img/fruit/boom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/boom.png


--------------------------------------------------------------------------------
/samples/img/fruit/developing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/developing.png


--------------------------------------------------------------------------------
/samples/img/fruit/dojo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/dojo.png


--------------------------------------------------------------------------------
/samples/img/fruit/flash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/flash.png


--------------------------------------------------------------------------------
/samples/img/fruit/flash_bak.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/flash_bak.png


--------------------------------------------------------------------------------
/samples/img/fruit/game-over.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/game-over.png


--------------------------------------------------------------------------------
/samples/img/fruit/home-desc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/home-desc.png


--------------------------------------------------------------------------------
/samples/img/fruit/home-mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/home-mask.png


--------------------------------------------------------------------------------
/samples/img/fruit/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/logo.png


--------------------------------------------------------------------------------
/samples/img/fruit/lose.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/lose.png


--------------------------------------------------------------------------------
/samples/img/fruit/new-game.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/new-game.png


--------------------------------------------------------------------------------
/samples/img/fruit/new.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/new.png


--------------------------------------------------------------------------------
/samples/img/fruit/ninja.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/ninja.png


--------------------------------------------------------------------------------
/samples/img/fruit/peach.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/peach.png


--------------------------------------------------------------------------------
/samples/img/fruit/quit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/quit.png


--------------------------------------------------------------------------------
/samples/img/fruit/sandia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/sandia.png


--------------------------------------------------------------------------------
/samples/img/fruit/score.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/score.png


--------------------------------------------------------------------------------
/samples/img/fruit/xxxf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/fruit/xxxf.png


--------------------------------------------------------------------------------
/samples/img/harddisk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/harddisk.png


--------------------------------------------------------------------------------
/samples/img/helpdesk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/helpdesk.png


--------------------------------------------------------------------------------
/samples/img/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/home.png


--------------------------------------------------------------------------------
/samples/img/host.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/host.png


--------------------------------------------------------------------------------
/samples/img/laptop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/laptop.png


--------------------------------------------------------------------------------
/samples/img/memory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/memory.png


--------------------------------------------------------------------------------
/samples/img/ne.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/ne.png


--------------------------------------------------------------------------------
/samples/img/new-game.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/new-game.png


--------------------------------------------------------------------------------
/samples/img/ok.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/ok.png


--------------------------------------------------------------------------------
/samples/img/person.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/person.png


--------------------------------------------------------------------------------
/samples/img/phone/IE.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/IE.png


--------------------------------------------------------------------------------
/samples/img/phone/Karate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/Karate.png


--------------------------------------------------------------------------------
/samples/img/phone/SMS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/SMS.png


--------------------------------------------------------------------------------
/samples/img/phone/Setup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/Setup.png


--------------------------------------------------------------------------------
/samples/img/phone/bullets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/bullets.png


--------------------------------------------------------------------------------
/samples/img/phone/power.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/power.png


--------------------------------------------------------------------------------
/samples/img/phone/signal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/signal.png


--------------------------------------------------------------------------------
/samples/img/phone/usb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/usb.png


--------------------------------------------------------------------------------
/samples/img/phone/writing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/phone/writing.png


--------------------------------------------------------------------------------
/samples/img/print.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/print.png


--------------------------------------------------------------------------------
/samples/img/qq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/qq.png


--------------------------------------------------------------------------------
/samples/img/room.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/room.jpg


--------------------------------------------------------------------------------
/samples/img/telephone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/telephone.png


--------------------------------------------------------------------------------
/samples/img/vm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/vm.png


--------------------------------------------------------------------------------
/samples/img/vm_inner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/vm_inner.jpg


--------------------------------------------------------------------------------
/samples/img/zone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/img/zone.png


--------------------------------------------------------------------------------
/samples/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 
 33 | 	<script type="text/javascript" src="js/jquery.js"></script>
 34 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 35 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 36 | 
 37 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 		
 42 | 		/*
 43 | 		 * Usage:
 44 | 		 * <script type="text/javascript" src="jquery.js"> < /script>
 45 | 		 * <script type="text/javascript" src="jtopo-0.3.0-min.js"> </ script>
 46 | 		 */
 47 | 
 48 | 		$(document).ready(function(){					
 49 | 			var box = new JTopo.DataBox('dataBox', $("#canvas")[0]);
 50 | 			box.isShowRange = false;
 51 | 			var node = new JTopo.Node('Hello world!');
 52 | 			node.setLocation(387, 270);
 53 | 			box.add(node);
 54 | 
 55 | 			box.updateView();
 56 | 		});
 57 | 	</script>
 58 | 	<style>
 59 | 		canvas {
 60 | 			background-color:#EEEEEE;
 61 | 			border:1px solid #444;
 62 | 		}
 63 | 	</style>
 64 |   </head>
 65 | 
 66 |   <body>
 67 | 
 68 |     <div class="navbar navbar-inverse navbar-fixed-top">
 69 |       <div class="navbar-inner">
 70 |         <div class="container-fluid">
 71 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 72 |             <span class="icon-bar"></span>
 73 |             <span class="icon-bar"></span>
 74 |             <span class="icon-bar"></span>
 75 |           </button>
 76 |           <a class="brand" href="#">Project name</a>
 77 |           <div class="nav-collapse collapse">
 78 |             <p class="navbar-text pull-right">
 79 |               Logged in as <a href="#" class="navbar-link">Username</a>
 80 |             </p>
 81 |             <ul class="nav">
 82 |               <li class="active"><a href="#">Home</a></li>
 83 |               <li><a href="about.html">About</a></li>
 84 |               <li><a href="contact.html">Contact</a></li>
 85 |             </ul>
 86 |           </div><!--/.nav-collapse -->
 87 |         </div>
 88 |       </div>
 89 |     </div>
 90 | 
 91 |     <div class="container-fluid">
 92 |       <div class="row-fluid">
 93 |         <div class="span3">
 94 |           <div class="well sidebar-nav">
 95 |             <ul class="nav nav-list" id='Menu_ul'>
 96 |             </ul>
 97 |           </div><!--/.well -->
 98 |         </div><!--/span-->
 99 |         <div class="span9">
100 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
101 |         </div><!--/span-->
102 |       </div><!--/row-->
103 | 
104 |       <hr>
105 | 
106 |       <footer>
107 |         <p>&copy; Company 2013</p>
108 |       </footer>
109 | 
110 |     </div><!--/.fluid-container-->
111 | 
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/samples/js/menu.js:
--------------------------------------------------------------------------------
 1 | var menus = [
 2 | 	{text:'Hello world', href:'index.html'},
 3 | 	'Basic', 
 4 | 	{text:'Node', href:'node.html'},
 5 | 	{text:'UML-Node', href:'umlNode.html'},
 6 | 	{text:'phoneNode', href:'phoneNode.html'},
 7 | 	{text:'Link', href:'link.html'},
 8 | 	{text:'Container', href:'container.html'},
 9 | 	{text:'Container-2', href:'container2.html'},
10 | 	'Layout',
11 | 	{text:'star', href:'star.html'},
12 | 	{text:'star-2', href:'star2.html'},
13 | 	{text:'star-3', href:'star3.html'},
14 | 	{text:'tree', href:'tree.html'},
15 | 	{text:'tree-2', href:'tree2.html'},
16 | 	{text:'tree-3', href:'tree3.html'},
17 | 	{text:'mix', href:'mix.html'},
18 | 	{text:'mix-2', href:'mix2.html'},
19 | 	{text:'mix-3', href:'mix3.html'},
20 | 	{text:'mix-4', href:'mix4.html'},
21 | 	'Effect',
22 | 	{text:'gravitate', href:'gravitate.html'},
23 | 	{text:'rotate', href:'rotate.html'},
24 | 	{text:'nodeDown', href:'nodeDown.html'},
25 | 	'Animation',
26 | 	{text:'basic', href:'animation.html'},
27 | 	{text:'cutFruit', href:'cutFruit.html'},
28 | 	'Event',
29 | 	{text:'mouse', href:'mouse.html'},
30 | 	{text:'keyboard', href:'keyboard.html'},
31 | 	'Real',
32 | 	{text:'DIY Machine', href:'diy.html'},
33 | 	{text:'Device', href:'device.html'},
34 | 	'3D',
35 | 	{text:'basic', href:'3d.html'}
36 | 
37 | ];
38 | 
39 | function drawMenus(menus){
40 | 	var ul = $('#Menu_ul');
41 | 	$.each(menus, function(i, e){
42 | 		var li = $('<li>').appendTo(ul);
43 | 		if(typeof e == 'string'){
44 | 			li.addClass('nav-header').html(e);
45 | 		}else{
46 | 			var a = $('<a>').attr('href', e.href).html(e.text);
47 | 			li.append(a);
48 | 			if(location.href.indexOf(e.href) != -1){
49 | 				li.addClass('active');
50 | 			}
51 | 		}
52 | 	});
53 | }
54 | 
55 | 
56 | String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
57 |     if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
58 |         return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);
59 |     } else {
60 |         return this.replace(reallyDo, replaceWith);
61 |     }
62 | };
63 | 
64 | $(document).ready(function(){
65 | 	drawMenus(menus);
66 | 	$('.brand').html('JTopo');
67 | 	$('.pull-right').html('');
68 | 
69 | 	var code = $('#code').text();
70 | 	code = code.replaceAll('>', '&gt;');
71 | 	code = code.replaceAll('<', '&lt;');
72 | 	$('<pre width="600">').appendTo($('#canvas').parent().css('width', '800px'))
73 | 		.html(code).snippet("javascript",{style:"acid",collapse:true});
74 | });
75 | 
76 | 
77 | 


--------------------------------------------------------------------------------
/samples/keyboard.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 	
 45 | 			var node = new JTopo.Node('press any key...');
 46 | 			node.setLocation(360, 200);
 47 | 			box.add(node);			
 48 | 	
 49 | 		    box.subscribe('keydown', function(keyID){
 50 | 				node.setName(keyID + ' down');
 51 | 			});
 52 | 
 53 | 			box.subscribe('keyup', function(keyID){
 54 | 				node.setName(keyID + ' up');
 55 | 			});
 56 | 
 57 | 			box.updateView();
 58 | 
 59 | 		});
 60 | 	</script>
 61 | 	<style>
 62 | 		canvas {
 63 | 			background-color:#EEEEEE;
 64 | 			border:1px solid #444;
 65 | 		}
 66 | 	</style>
 67 |   </head>
 68 | 
 69 |   <body>
 70 | 
 71 |     <div class="navbar navbar-inverse navbar-fixed-top">
 72 |       <div class="navbar-inner">
 73 |         <div class="container-fluid">
 74 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 75 |             <span class="icon-bar"></span>
 76 |             <span class="icon-bar"></span>
 77 |             <span class="icon-bar"></span>
 78 |           </button>
 79 |           <a class="brand" href="#">Project name</a>
 80 |           <div class="nav-collapse collapse">
 81 |             <p class="navbar-text pull-right">
 82 |               Logged in as <a href="#" class="navbar-link">Username</a>
 83 |             </p>
 84 |             <ul class="nav">
 85 |               <li class="active"><a href="#">Home</a></li>
 86 |               <li><a href="about.html">About</a></li>
 87 |               <li><a href="contact.html">Contact</a></li>
 88 |             </ul>
 89 |           </div><!--/.nav-collapse -->
 90 |         </div>
 91 |       </div>
 92 |     </div>
 93 | 
 94 |     <div class="container-fluid">
 95 |       <div class="row-fluid">
 96 |         <div class="span3">
 97 |           <div class="well sidebar-nav">
 98 |             <ul class="nav nav-list" id='Menu_ul'>
 99 |             </ul>
100 | 
101 |           </div><!--/.well -->
102 |         </div><!--/span-->
103 |         <div class="span9">
104 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
105 |         </div><!--/span-->
106 |       </div><!--/row-->
107 | 
108 |       <hr>
109 | 
110 |       <footer>
111 |         <p>&copy; Company 2013</p>
112 |       </footer>
113 | 
114 |     </div><!--/.fluid-container-->
115 | 
116 |   </body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/samples/link.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 38 | 	<script type="text/javascript" src="js/menu.js"></script>
 39 | 	<script id='code'>
 40 | 		$(document).ready(function(){		
 41 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 42 | 
 43 | 			(function(){
 44 | 				var nodeA = new JTopo.Node('NodeA');
 45 | 				nodeA.setType('host');
 46 | 				nodeA.setLocation(300, 100);
 47 | 				box.add(nodeA);
 48 | 
 49 | 				var nodeB = new JTopo.Node('NodeB');
 50 | 				nodeB.setType('host');
 51 | 				nodeB.setLocation(130, 200);
 52 | 				box.add(nodeB);
 53 | 				
 54 | 				var link = new JTopo.CurveLink(nodeA, nodeB);
 55 | 				box.add(link);	
 56 | 			})();
 57 | 					
 58 | 			(function(){
 59 | 				var nodeA = new JTopo.CircleNode();
 60 | 				nodeA.setType('host');
 61 | 				nodeA.setLocation(50, 420);
 62 | 				box.add(nodeA);
 63 | 
 64 | 				var nodeB = new JTopo.CircleNode();
 65 | 				nodeB.setLocation(300, 420);
 66 | 				box.add(nodeB);
 67 | 				
 68 | 				var link = new JTopo.Link(nodeA, nodeB);
 69 | 				box.add(link);	
 70 | 			})();
 71 | 				
 72 | 			(function(){
 73 | 				var nodeD = new JTopo.Node('NodeD');
 74 | 				nodeD.setType('host');
 75 | 				nodeD.setLocation(350, 210);
 76 | 				box.add(nodeD);
 77 | 
 78 | 				var nodeE = new JTopo.Node('NodeE');
 79 | 				nodeE.setType('zone');
 80 | 				nodeE.setLocation(470, 100);
 81 | 				box.add(nodeE);
 82 | 				
 83 | 				var nodeC = new JTopo.Node('NodeC');
 84 | 				nodeC.setType('host');
 85 | 				nodeC.setLocation(540, 300);
 86 | 				box.add(nodeC);
 87 | 				
 88 | 				var nodeH = new JTopo.Node('NodeG');
 89 | 				nodeH.setType('host');
 90 | 				nodeH.setLocation(540, 400);
 91 | 				box.add(nodeH);
 92 | 				
 93 | 				var nodeG = new JTopo.Node('NodeH');
 94 | 				nodeG.setType('host');
 95 | 				nodeG.setLocation(350, 360);
 96 | 				box.add(nodeG);
 97 | 
 98 | 				
 99 | 				var link = new JTopo.FoldLink(nodeD, nodeE);
100 | 				box.add(link);
101 | 				
102 | 				var link2 = new JTopo.FoldLink(nodeE, nodeC);
103 | 				link2.fold = 'y';
104 | 				box.add(link2);
105 | 				
106 | 				var link3 = new JTopo.FoldLink(nodeE, nodeG);
107 | 				link3.fold = 'y';
108 | 				box.add(link3);
109 | 
110 | 				var link4 = new JTopo.FoldLink(nodeE, nodeH);
111 | 				link4.fold = 'y';
112 | 				box.add(link4);
113 | 				
114 | 			})();
115 | 
116 | 			box.updateView();
117 | 		});
118 | 	</script>
119 | 	<style>
120 | 		canvas {
121 | 			background-color:#EEEEEE;
122 | 			border:1px solid #444;
123 | 		}
124 | 	</style>
125 |   </head>
126 | 
127 |   <body>
128 | 
129 |     <div class="navbar navbar-inverse navbar-fixed-top">
130 |       <div class="navbar-inner">
131 |         <div class="container-fluid">
132 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
133 |             <span class="icon-bar"></span>
134 |             <span class="icon-bar"></span>
135 |             <span class="icon-bar"></span>
136 |           </button>
137 |           <a class="brand" href="#">Project name</a>
138 |           <div class="nav-collapse collapse">
139 |             <p class="navbar-text pull-right">
140 |               Logged in as <a href="#" class="navbar-link">Username</a>
141 |             </p>
142 |             <ul class="nav">
143 |               <li class="active"><a href="#">Home</a></li>
144 |               <li><a href="about.html">About</a></li>
145 |               <li><a href="contact.html">Contact</a></li>
146 |             </ul>
147 |           </div><!--/.nav-collapse -->
148 |         </div>
149 |       </div>
150 |     </div>
151 | 
152 |     <div class="container-fluid">
153 |       <div class="row-fluid">
154 |         <div class="span3">
155 |           <div class="well sidebar-nav">
156 |             <ul class="nav nav-list" id='Menu_ul'>
157 |             </ul>
158 |           </div><!--/.well -->
159 |         </div><!--/span-->
160 |         <div class="span9">
161 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
162 |         </div><!--/span-->
163 |       </div><!--/row-->
164 | 
165 |       <hr>
166 | 
167 |       <footer>
168 |         <p>&copy; Company 2013</p>
169 |       </footer>
170 | 
171 |     </div><!--/.fluid-container-->
172 | 
173 |   </body>
174 | </html>
175 | 


--------------------------------------------------------------------------------
/samples/mix.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 38 | 
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 		function layout(){		
 42 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 43 | 
 44 | 			function ZoneNode(name){
 45 | 				var node = new JTopo.Node(name);
 46 | 				node.setType('zone');
 47 | 				return node;
 48 | 			}
 49 | 			function HostNode(name){
 50 | 				var node = new JTopo.Node(name);
 51 | 				node.setType('host');
 52 | 				return node;
 53 | 			}
 54 | 			function VmNode(name){
 55 | 				var node = new JTopo.Node(name);
 56 | 				node.setType('vm');
 57 | 				return node;
 58 | 			}
 59 | 		    var links = [JTopo.Link, JTopo.FoldLink, JTopo.CurveLink];
 60 | 			var treeLayout = {type: 'tree', auto: true, width: 60, height: 70, direction:'bottom'};
 61 | 			var starLayout = {type: 'star', auto: true, r:220, beginDegree:0, endDegree:Math.PI};
 62 | 
 63 | 			var zoneNode = new ZoneNode('testzone');
 64 | 			box.add(zoneNode);			
 65 | 			zoneNode.setLocation(350, 100);
 66 | 			zoneNode.layout = Math.random()>0.5 ?  {type: 'tree', auto: true, width: 220, height: 130, direction: 'bottom'}: starLayout;
 67 | 			var hostCount =  3;
 68 | 	
 69 | 			var HostLink = links[Math.floor(Math.random()*links.length)];
 70 | 			var VmLink = Math.random()>0.3 ? JTopo.Link : JTopo.FoldLink;
 71 | 			var hostLayout = Math.random()>0.5 ?  treeLayout: {type: 'star',  auto: true, r:100, beginDegree:0, endDegree:Math.PI};
 72 | 		    var fold = Math.random() > 0.5 ? 'x':'y';
 73 | 		    var fold2 = Math.random() > 0.5 ? 'x':'y';
 74 | 		    
 75 | 			for(var i=0; i<hostCount; i++){
 76 | 				var hostNode = new HostNode("h" + i);
 77 | 				hostNode.layout = hostLayout;
 78 | 				box.add(hostNode);
 79 | 				
 80 | 				var link = new HostLink(zoneNode, hostNode);
 81 | 				link.fold = fold;
 82 | 				box.add(link);
 83 | 				
 84 | 				var n = 2 + Math.random() * 2;
 85 | 				
 86 | 				for(var j=0; j<n; j++){
 87 | 					var vmNode = new VmNode("v" + i + "" + j );
 88 | 					box.add(vmNode);
 89 | 					var link = new VmLink(hostNode, vmNode);
 90 | 					link.fold = fold2;
 91 | 					box.add(link);
 92 | 				}
 93 | 			}
 94 | 
 95 | 			box.layoutNode(zoneNode);
 96 | 
 97 | 			box.updateView();
 98 | 		}
 99 | 		$(document).ready(layout);
100 | 	</script>
101 | 	<style>
102 | 		canvas {
103 | 			background-color:#EEEEEE;
104 | 			border:1px solid #444;
105 | 		}
106 | 	</style>
107 |   </head>
108 | 
109 |   <body>
110 | 
111 |     <div class="navbar navbar-inverse navbar-fixed-top">
112 |       <div class="navbar-inner">
113 |         <div class="container-fluid">
114 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
115 |             <span class="icon-bar"></span>
116 |             <span class="icon-bar"></span>
117 |             <span class="icon-bar"></span>
118 |           </button>
119 |           <a class="brand" href="#">Project name</a>
120 |           <div class="nav-collapse collapse">
121 |             <p class="navbar-text pull-right">
122 |               Logged in as <a href="#" class="navbar-link">Username</a>
123 |             </p>
124 |             <ul class="nav">
125 |               <li class="active"><a href="#">Home</a></li>
126 |               <li><a href="about.html">About</a></li>
127 |               <li><a href="contact.html">Contact</a></li>
128 |             </ul>
129 |           </div><!--/.nav-collapse -->
130 |         </div>
131 |       </div>
132 |     </div>
133 | 
134 |     <div class="container-fluid">
135 |       <div class="row-fluid">
136 |         <div class="span3">
137 |           <div class="well sidebar-nav">
138 |             <ul class="nav nav-list" id='Menu_ul'>
139 |             </ul>
140 |           </div><!--/.well -->
141 |         </div><!--/span-->
142 |         <div class="span9">
143 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
144 |         </div><!--/span-->
145 |       </div><!--/row-->
146 | 
147 |       <hr>
148 | 
149 |       <footer>
150 |         <p>&copy; Company 2013</p>
151 |       </footer>
152 | 
153 |     </div><!--/.fluid-container-->
154 | 
155 |   </body>
156 | </html>
157 | 


--------------------------------------------------------------------------------
/samples/mix2.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			var zoneNode = new JTopo.Node('testzone');
 46 | 			zoneNode.setLocation(400, 30);
 47 | 			zoneNode.layout = {type: 'star', radius:200, beginDegree:0, endDegree: Math.PI};		
 48 | 			box.add(zoneNode);
 49 | 
 50 | 			for(var i=0; i<3; i++){
 51 | 				var hostNode = new JTopo.Node("host" + i);
 52 | 				box.add(hostNode);
 53 | 				hostNode.layout = {type: 'tree', width: 100, height: 100};
 54 | 				
 55 | 				box.add(new JTopo.Link(zoneNode, hostNode));
 56 | 				
 57 | 				for(var j=0; j<3; j++){
 58 | 					var vmNode = new JTopo.Node("vm-" + i + "" + j );
 59 | 					box.add(vmNode);
 60 | 
 61 | 					var link = new JTopo.Link(hostNode, vmNode);
 62 | 					box.add(link);
 63 | 				}
 64 | 			}
 65 | 
 66 | 			box.layoutNode(zoneNode);
 67 | 			box.updateView();
 68 | 		});
 69 | 	</script>
 70 | 	<style>
 71 | 		canvas {
 72 | 			background-color:#EEEEEE;
 73 | 			border:1px solid #444;
 74 | 		}
 75 | 	</style>
 76 |   </head>
 77 | 
 78 |   <body>
 79 | 
 80 |     <div class="navbar navbar-inverse navbar-fixed-top">
 81 |       <div class="navbar-inner">
 82 |         <div class="container-fluid">
 83 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 84 |             <span class="icon-bar"></span>
 85 |             <span class="icon-bar"></span>
 86 |             <span class="icon-bar"></span>
 87 |           </button>
 88 |           <a class="brand" href="#">Project name</a>
 89 |           <div class="nav-collapse collapse">
 90 |             <p class="navbar-text pull-right">
 91 |               Logged in as <a href="#" class="navbar-link">Username</a>
 92 |             </p>
 93 |             <ul class="nav">
 94 |               <li class="active"><a href="#">Home</a></li>
 95 |               <li><a href="about.html">About</a></li>
 96 |               <li><a href="contact.html">Contact</a></li>
 97 |             </ul>
 98 |           </div><!--/.nav-collapse -->
 99 |         </div>
100 |       </div>
101 |     </div>
102 | 
103 |     <div class="container-fluid">
104 |       <div class="row-fluid">
105 |         <div class="span3">
106 |           <div class="well sidebar-nav">
107 |             <ul class="nav nav-list" id='Menu_ul'>
108 |             </ul>
109 | 
110 |           </div><!--/.well -->
111 |         </div><!--/span-->
112 |         <div class="span9">
113 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
114 |         </div><!--/span-->
115 |       </div><!--/row-->
116 | 
117 |       <hr>
118 | 
119 |       <footer>
120 |         <p>&copy; Company 2013</p>
121 |       </footer>
122 | 
123 |     </div><!--/.fluid-container-->
124 | 
125 |   </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/samples/mix3.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			var zoneNode = new JTopo.Node('testzone');
 46 | 			zoneNode.setLocation(400, 30);
 47 | 			zoneNode.layout = {type: 'tree', width: 240, height: 190};
 48 | 			box.add(zoneNode);
 49 | 
 50 | 			for(var i=0; i<3; i++){
 51 | 				var hostNode = new JTopo.Node("host" + i);
 52 | 				box.add(hostNode);
 53 | 				hostNode.layout = {type: 'star', radius:90};
 54 | 				
 55 | 				box.add(new JTopo.Link(zoneNode, hostNode));
 56 | 				
 57 | 				for(var j=0; j<10; j++){
 58 | 					var vmNode = new JTopo.Node("vm-" + i + "" + j );
 59 | 					box.add(vmNode);
 60 | 
 61 | 					var link = new JTopo.Link(hostNode, vmNode);
 62 | 					box.add(link);
 63 | 				}
 64 | 			}
 65 | 
 66 | 			box.layoutNode(zoneNode);
 67 | 			box.updateView();
 68 | 		});
 69 | 	</script>
 70 | 	<style>
 71 | 		canvas {
 72 | 			background-color:#EEEEEE;
 73 | 			border:1px solid #444;
 74 | 		}
 75 | 	</style>
 76 |   </head>
 77 | 
 78 |   <body>
 79 | 
 80 |     <div class="navbar navbar-inverse navbar-fixed-top">
 81 |       <div class="navbar-inner">
 82 |         <div class="container-fluid">
 83 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 84 |             <span class="icon-bar"></span>
 85 |             <span class="icon-bar"></span>
 86 |             <span class="icon-bar"></span>
 87 |           </button>
 88 |           <a class="brand" href="#">Project name</a>
 89 |           <div class="nav-collapse collapse">
 90 |             <p class="navbar-text pull-right">
 91 |               Logged in as <a href="#" class="navbar-link">Username</a>
 92 |             </p>
 93 |             <ul class="nav">
 94 |               <li class="active"><a href="#">Home</a></li>
 95 |               <li><a href="about.html">About</a></li>
 96 |               <li><a href="contact.html">Contact</a></li>
 97 |             </ul>
 98 |           </div><!--/.nav-collapse -->
 99 |         </div>
100 |       </div>
101 |     </div>
102 | 
103 |     <div class="container-fluid">
104 |       <div class="row-fluid">
105 |         <div class="span3">
106 |           <div class="well sidebar-nav">
107 |             <ul class="nav nav-list" id='Menu_ul'>
108 |             </ul>
109 | 
110 |           </div><!--/.well -->
111 |         </div><!--/span-->
112 |         <div class="span9">
113 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
114 |         </div><!--/span-->
115 |       </div><!--/row-->
116 | 
117 |       <hr>
118 | 
119 |       <footer>
120 |         <p>&copy; Company 2013</p>
121 |       </footer>
122 | 
123 |     </div><!--/.fluid-container-->
124 | 
125 |   </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/samples/mix4.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			function stars(x, y){
 46 | 				var hostNode = new JTopo.Node();
 47 | 				hostNode.setType('host');
 48 | 				hostNode.setLocation(x, y);
 49 | 				box.add(hostNode);
 50 | 
 51 | 				for(var i=1; i<10; i++){
 52 | 					var node = new JTopo.Node();
 53 | 					node.setType('vm');
 54 | 					box.add(node);
 55 | 
 56 | 					var link = new JTopo.Link(hostNode, node);
 57 | 					box.add(link);
 58 | 				}
 59 | 				
 60 | 				hostNode.layout = {type: 'star', radius:100};
 61 | 				box.layoutNode(hostNode);
 62 | 				return hostNode;
 63 | 			}
 64 | 
 65 | 			var node1 = stars(100, 110);
 66 | 			var node2 = stars(300, 350);
 67 | 			var node3 = stars(600, 180);
 68 | 
 69 | 			box.add(new JTopo.Link(node1, node2));
 70 | 			box.add(new JTopo.Link(node2, node3));		
 71 | 
 72 | 			box.updateView();
 73 | 		});
 74 | 	</script>
 75 | 	<style>
 76 | 		canvas {
 77 | 			background-color:#EEEEEE;
 78 | 			border:1px solid #444;
 79 | 		}
 80 | 	</style>
 81 |   </head>
 82 | 
 83 |   <body>
 84 | 
 85 |     <div class="navbar navbar-inverse navbar-fixed-top">
 86 |       <div class="navbar-inner">
 87 |         <div class="container-fluid">
 88 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 89 |             <span class="icon-bar"></span>
 90 |             <span class="icon-bar"></span>
 91 |             <span class="icon-bar"></span>
 92 |           </button>
 93 |           <a class="brand" href="#">Project name</a>
 94 |           <div class="nav-collapse collapse">
 95 |             <p class="navbar-text pull-right">
 96 |               Logged in as <a href="#" class="navbar-link">Username</a>
 97 |             </p>
 98 |             <ul class="nav">
 99 |               <li class="active"><a href="#">Home</a></li>
100 |               <li><a href="about.html">About</a></li>
101 |               <li><a href="contact.html">Contact</a></li>
102 |             </ul>
103 |           </div><!--/.nav-collapse -->
104 |         </div>
105 |       </div>
106 |     </div>
107 | 
108 |     <div class="container-fluid">
109 |       <div class="row-fluid">
110 |         <div class="span3">
111 |           <div class="well sidebar-nav">
112 |             <ul class="nav nav-list" id='Menu_ul'>
113 |             </ul>
114 | 
115 |           </div><!--/.well -->
116 |         </div><!--/span-->
117 |         <div class="span9">
118 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
119 |         </div><!--/span-->
120 |       </div><!--/row-->
121 | 
122 |       <hr>
123 | 
124 |       <footer>
125 |         <p>&copy; Company 2013</p>
126 |       </footer>
127 | 
128 |     </div><!--/.fluid-container-->
129 | 
130 |   </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------
/samples/mouse.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 	
 45 | 			var node = new JTopo.Node('click or drag me...');
 46 | 			node.setLocation(360, 200);
 47 | 			box.add(node);			
 48 | 	
 49 | 		    box.subscribe('mousedown', function(e){
 50 | 				if(e.target != null){
 51 |  				   e.target.setName("Click");
 52 | 				   box.updateView();
 53 | 				}
 54 | 			});
 55 | 
 56 | 			box.subscribe('mouseup', function(e){
 57 | 				if(e.target != null){
 58 | 				   e.target.setName('click or drag me...');
 59 | 				   box.updateView();
 60 | 				}
 61 | 			});
 62 | 
 63 | 			box.subscribe('mousedrag', function(e){
 64 | 				if(e.target != null){
 65 | 					e.target.setName("Drag");
 66 | 				}
 67 | 			});
 68 | 
 69 | 			box.updateView();
 70 | 
 71 | 		});
 72 | 	</script>
 73 | 	<style>
 74 | 		canvas {
 75 | 			background-color:#EEEEEE;
 76 | 			border:1px solid #444;
 77 | 		}
 78 | 	</style>
 79 |   </head>
 80 | 
 81 |   <body>
 82 | 
 83 |     <div class="navbar navbar-inverse navbar-fixed-top">
 84 |       <div class="navbar-inner">
 85 |         <div class="container-fluid">
 86 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 87 |             <span class="icon-bar"></span>
 88 |             <span class="icon-bar"></span>
 89 |             <span class="icon-bar"></span>
 90 |           </button>
 91 |           <a class="brand" href="#">Project name</a>
 92 |           <div class="nav-collapse collapse">
 93 |             <p class="navbar-text pull-right">
 94 |               Logged in as <a href="#" class="navbar-link">Username</a>
 95 |             </p>
 96 |             <ul class="nav">
 97 |               <li class="active"><a href="#">Home</a></li>
 98 |               <li><a href="about.html">About</a></li>
 99 |               <li><a href="contact.html">Contact</a></li>
100 |             </ul>
101 |           </div><!--/.nav-collapse -->
102 |         </div>
103 |       </div>
104 |     </div>
105 | 
106 |     <div class="container-fluid">
107 |       <div class="row-fluid">
108 |         <div class="span3">
109 |           <div class="well sidebar-nav">
110 |             <ul class="nav nav-list" id='Menu_ul'>
111 |             </ul>
112 | 
113 |           </div><!--/.well -->
114 |         </div><!--/span-->
115 |         <div class="span9">
116 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
117 |         </div><!--/span-->
118 |       </div><!--/row-->
119 | 
120 |       <hr>
121 | 
122 |       <footer>
123 |         <p>&copy; Company 2013</p>
124 |       </footer>
125 | 
126 |     </div><!--/.fluid-container-->
127 | 
128 |   </body>
129 | </html>
130 | 


--------------------------------------------------------------------------------
/samples/node.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 
 33 | 	<script type="text/javascript" src="js/jquery.js"></script>
 34 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 35 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 36 | 
 37 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 
 42 | 		$(document).ready(function(){					
 43 | 			var box = new JTopo.DataBox('dataBox', $("#canvas")[0]);
 44 | 
 45 | 			var defaultNode = new JTopo.Node('Node');
 46 | 			defaultNode.setLocation(200, 100);
 47 | 			defaultNode.rotate = Math.PI/10;
 48 | 			box.add(defaultNode);
 49 | 
 50 | 			var hostNode = new JTopo.Node('Hello');
 51 | 			hostNode.setType('host');
 52 | 			hostNode.setLocation(300, 100);
 53 | 			hostNode.rotate = Math.PI/10;
 54 | 			hostNode.scala = 1.5;
 55 | 			box.add(hostNode);
 56 | 
 57 | 			var textNode = new JTopo.TextNode('This is a Text node.');
 58 | 			textNode.setLocation(317, 310);
 59 | 			box.add(textNode);
 60 | 			
 61 | 			var tipNode = new JTopo.TipNode('a tip.');
 62 | 			tipNode.setLocation(540, 100);
 63 | 			box.add(tipNode);
 64 | 			
 65 | 			var peopleNode = new JTopo.Node('people');
 66 | 			peopleNode.setLocation(500, 200);
 67 | 			peopleNode.setSize(64, 64);
 68 | 			peopleNode.setImage('./img/person.png');
 69 | 			box.add(peopleNode);
 70 | 
 71 | 			var circleNode = new JTopo.CircleNode()
 72 | 			circleNode.style.fillStyle = '0, 0, 255';
 73 | 			circleNode.setLocation(390, 90);
 74 | 			box.add(circleNode);
 75 | 
 76 | 			var heartNode = new JTopo.HeartNode();	
 77 | 			heartNode.style.fillStyle = '255, 0, 0';
 78 | 			heartNode.setLocation(300, 170);
 79 | 			box.add(heartNode);						
 80 | 
 81 | 			box.updateView();
 82 | 		});
 83 | 
 84 | 	</script>
 85 | 	<style>
 86 | 		canvas {
 87 | 			background-color:#EEEEEE;
 88 | 			border:1px solid #444;
 89 | 		}
 90 | 	</style>
 91 |   </head>
 92 | 
 93 |   <body>
 94 | 
 95 |     <div class="navbar navbar-inverse navbar-fixed-top">
 96 |       <div class="navbar-inner">
 97 |         <div class="container-fluid">
 98 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 99 |             <span class="icon-bar"></span>
100 |             <span class="icon-bar"></span>
101 |             <span class="icon-bar"></span>
102 |           </button>
103 |           <a class="brand" href="#">Project name</a>
104 |           <div class="nav-collapse collapse">
105 |             <p class="navbar-text pull-right">
106 |               Logged in as <a href="#" class="navbar-link">Username</a>
107 |             </p>
108 |             <ul class="nav">
109 |               <li class="active"><a href="#">Home</a></li>
110 |               <li><a href="about.html">About</a></li>
111 |               <li><a href="contact.html">Contact</a></li>
112 |             </ul>
113 |           </div><!--/.nav-collapse -->
114 |         </div>
115 |       </div>
116 |     </div>
117 | 
118 |     <div class="container-fluid">
119 |       <div class="row-fluid">
120 |         <div class="span3">
121 |           <div class="well sidebar-nav">
122 |             <ul class="nav nav-list" id='Menu_ul'>
123 |             </ul>
124 |           </div><!--/.well -->
125 |         </div><!--/span-->
126 |         <div class="span9">
127 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
128 |         </div><!--/span-->
129 |       </div><!--/row-->
130 | 
131 |       <hr>
132 | 
133 |       <footer>
134 |         <p>&copy; Company 2013</p>
135 |       </footer>
136 | 
137 |     </div><!--/.fluid-container-->
138 | 
139 |   </body>
140 | </html>
141 | 


--------------------------------------------------------------------------------
/samples/nodeDown.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 
 33 | 	<script type="text/javascript" src="js/jquery.js"></script>
 34 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 35 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 36 | 
 37 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 
 42 | 		$(document).ready(function(){					
 43 | 			var box = new JTopo.DataBox('dataBox', $("#canvas")[0]);
 44 | 
 45 | 			var defaultNode = new JTopo.Node('Node');
 46 | 			defaultNode.setLocation(200, 100);
 47 | 			box.add(defaultNode);
 48 | 
 49 | 			var hostNode = new JTopo.Node('Hello');
 50 | 			hostNode.setType('host');
 51 | 			hostNode.setLocation(300, 100);
 52 | 			box.add(hostNode);
 53 | 
 54 | 			var textNode = new JTopo.TextNode('This is a Text node.');
 55 | 			textNode.setLocation(317, 310);
 56 | 			box.add(textNode);
 57 | 			
 58 | 			var tipNode = new JTopo.TipNode('a tip.');
 59 | 			tipNode.setLocation(540, 100);
 60 | 			box.add(tipNode);
 61 | 			
 62 | 			var peopleNode = new JTopo.Node('people');
 63 | 			peopleNode.setLocation(500, 200);
 64 | 			peopleNode.setSize(64, 64);
 65 | 			peopleNode.setImage('./img/person.png');
 66 | 			box.add(peopleNode);
 67 | 			
 68 | 			var rectangleNode = new JTopo.Node('');
 69 | 			rectangleNode.setLocation(310, 170);
 70 | 			rectangleNode.setSize(128, 128);
 71 | 			rectangleNode.style = {fillStyle: '71, 167, 184'};
 72 | 			box.add(rectangleNode);
 73 | 
 74 | 			var circleNode = new JTopo.CircleNode()
 75 | 			circleNode.style.fillStyle = '0, 0, 255';
 76 | 			circleNode.setLocation(390, 90);
 77 | 			box.add(circleNode);
 78 | 
 79 | 			var heartNode = new JTopo.HeartNode();	
 80 | 			heartNode.style.fillStyle = '255, 0, 0';
 81 | 			heartNode.setLocation(300, 170);
 82 | 			box.add(heartNode);
 83 | 					
 84 | 			box.subscribe('mousedown', function(e){
 85 | 				if(e.target == null) return;
 86 | 				var node = e.target;
 87 | 				if(node.gravity){
 88 | 					node.gravity.stop();
 89 | 				}
 90 | 			});
 91 | 			box.subscribe('mouseup', function(e){
 92 | 				if(e.target == null) return;				
 93 | 				var node = e.target;			
 94 | 				if(node.gravity == null){
 95 | 					node.gravity = JTopo.Animation.gravity(node, {context: e.context});			
 96 | 				}
 97 | 				node.gravity.run();
 98 | 			}); 	
 99 | 
100 | 			box.updateView();
101 | 		});
102 | 
103 | 	</script>
104 | 	<style>
105 | 		canvas {
106 | 			background-color:#EEEEEE;
107 | 			border:1px solid #444;
108 | 		}
109 | 	</style>
110 |   </head>
111 | 
112 |   <body>
113 | 
114 |     <div class="navbar navbar-inverse navbar-fixed-top">
115 |       <div class="navbar-inner">
116 |         <div class="container-fluid">
117 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
118 |             <span class="icon-bar"></span>
119 |             <span class="icon-bar"></span>
120 |             <span class="icon-bar"></span>
121 |           </button>
122 |           <a class="brand" href="#">Project name</a>
123 |           <div class="nav-collapse collapse">
124 |             <p class="navbar-text pull-right">
125 |               Logged in as <a href="#" class="navbar-link">Username</a>
126 |             </p>
127 |             <ul class="nav">
128 |               <li class="active"><a href="#">Home</a></li>
129 |               <li><a href="about.html">About</a></li>
130 |               <li><a href="contact.html">Contact</a></li>
131 |             </ul>
132 |           </div><!--/.nav-collapse -->
133 |         </div>
134 |       </div>
135 |     </div>
136 | 
137 |     <div class="container-fluid">
138 |       <div class="row-fluid">
139 |         <div class="span3">
140 |           <div class="well sidebar-nav">
141 |             <ul class="nav nav-list" id='Menu_ul'>
142 |             </ul>
143 |           </div><!--/.well -->
144 |         </div><!--/span-->
145 |         <div class="span9">
146 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
147 |         </div><!--/span-->
148 |       </div><!--/row-->
149 | 
150 |       <hr>
151 | 
152 |       <footer>
153 |         <p>&copy; Company 2013</p>
154 |       </footer>
155 | 
156 |     </div><!--/.fluid-container-->
157 | 
158 |   </body>
159 | </html>
160 | 


--------------------------------------------------------------------------------
/samples/phoneNode.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 
 33 | 	<script type="text/javascript" src="js/jquery.js"></script>
 34 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 35 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 36 | 
 37 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 
 42 | 		$(document).ready(function(){					
 43 | 			var box = new JTopo.DataBox('dataBox', $("#canvas")[0]);
 44 | 			var imgs = ['usb', 'signal', 'Setup', 'writing', 'bullets', 'SMS', 'Karate', 'IE', 'power', 'Setup'];
 45 | 			
 46 | 			var n = 0;
 47 | 			for(var i=0; i<3; i++){
 48 | 				for(var j=0; j<3; j++){
 49 | 					var node = new JTopo.Node(imgs[n++]);
 50 | 					node.setLocation(260 + i * 100, 100 + j * 100);
 51 | 					node.setSize(64, 64);
 52 | 					node.setImage('./img/phone/'+imgs[n]+'.png');
 53 | 					box.add(node);
 54 | 				}
 55 | 			}
 56 | 
 57 | 
 58 | 			box.updateView();
 59 | 		});
 60 | 
 61 | 	</script>
 62 | 	<style>
 63 | 		canvas {
 64 | 			background-color:#EEEEEE;
 65 | 			border:1px solid #444;
 66 | 		}
 67 | 	</style>
 68 |   </head>
 69 | 
 70 |   <body>
 71 | 
 72 |     <div class="navbar navbar-inverse navbar-fixed-top">
 73 |       <div class="navbar-inner">
 74 |         <div class="container-fluid">
 75 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 76 |             <span class="icon-bar"></span>
 77 |             <span class="icon-bar"></span>
 78 |             <span class="icon-bar"></span>
 79 |           </button>
 80 |           <a class="brand" href="#">Project name</a>
 81 |           <div class="nav-collapse collapse">
 82 |             <p class="navbar-text pull-right">
 83 |               Logged in as <a href="#" class="navbar-link">Username</a>
 84 |             </p>
 85 |             <ul class="nav">
 86 |               <li class="active"><a href="#">Home</a></li>
 87 |               <li><a href="about.html">About</a></li>
 88 |               <li><a href="contact.html">Contact</a></li>
 89 |             </ul>
 90 |           </div><!--/.nav-collapse -->
 91 |         </div>
 92 |       </div>
 93 |     </div>
 94 | 
 95 |     <div class="container-fluid">
 96 |       <div class="row-fluid">
 97 |         <div class="span3">
 98 |           <div class="well sidebar-nav">
 99 |             <ul class="nav nav-list" id='Menu_ul'>
100 |             </ul>
101 |           </div><!--/.well -->
102 |         </div><!--/span-->
103 |         <div class="span9">
104 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
105 |         </div><!--/span-->
106 |       </div><!--/row-->
107 | 
108 |       <hr>
109 | 
110 |       <footer>
111 |         <p>&copy; Company 2013</p>
112 |       </footer>
113 | 
114 |     </div><!--/.fluid-container-->
115 | 
116 |   </body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/samples/real.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 
 38 | 	
 39 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 40 | 
 41 | 	<script type="text/javascript" src="js/menu.js"></script>
 42 | 	<script id='code'>
 43 | 
 44 | 		$(document).ready(function(){					
 45 | 			var box = new JTopo.DataBox('dataBox', $("#canvas")[0]);
 46 | 
 47 | 		var textNode = new JTopo.TextNode('This is a Text node.');
 48 | 			textNode.setLocation(317, 410);
 49 | 			box.add(textNode);
 50 | 
 51 | 			var node = new JTopo.Node(' Hello');
 52 | 		node.setImage('./acer.jpg');
 53 | node.width = 130;
 54 | node.height = 254;
 55 | 			node.setLocation(300, 200);
 56 | 			box.add(node);
 57 | 		
 58 | 		box.updateView();
 59 | 		});
 60 | 	</script>
 61 | 	<style>
 62 | 		canvas {
 63 | 			background-color:#EEEEEE;
 64 | 			border:1px solid #444;
 65 | 		}
 66 | 	</style>
 67 |   </head>
 68 | 
 69 |   <body>
 70 | 
 71 |     <div class="navbar navbar-inverse navbar-fixed-top">
 72 |       <div class="navbar-inner">
 73 |         <div class="container-fluid">
 74 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 75 |             <span class="icon-bar"></span>
 76 |             <span class="icon-bar"></span>
 77 |             <span class="icon-bar"></span>
 78 |           </button>
 79 |           <a class="brand" href="#">Project name</a>
 80 |           <div class="nav-collapse collapse">
 81 |             <p class="navbar-text pull-right">
 82 |               Logged in as <a href="#" class="navbar-link">Username</a>
 83 |             </p>
 84 |             <ul class="nav">
 85 |               <li class="active"><a href="#">Home</a></li>
 86 |               <li><a href="about.html">About</a></li>
 87 |               <li><a href="contact.html">Contact</a></li>
 88 |             </ul>
 89 |           </div><!--/.nav-collapse -->
 90 |         </div>
 91 |       </div>
 92 |     </div>
 93 | 
 94 |     <div class="container-fluid">
 95 |       <div class="row-fluid">
 96 |         <div class="span3">
 97 |           <div class="well sidebar-nav">
 98 |             <ul class="nav nav-list" id='Menu_ul'>
 99 |             </ul>
100 |           </div><!--/.well -->
101 |         </div><!--/span-->
102 |         <div class="span9">
103 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
104 |         </div><!--/span-->
105 |       </div><!--/row-->
106 | 
107 |       <hr>
108 | 
109 |       <footer>
110 |         <p>&copy; Company 2013</p>
111 |       </footer>
112 | 
113 |     </div><!--/.fluid-container-->
114 | 
115 |   </body>
116 | </html>
117 | 


--------------------------------------------------------------------------------
/samples/rotate.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 		
 37 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 38 | 
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 		$(document).ready(function(){					
 42 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 43 | 
 44 | 			var node = new JTopo.Node();
 45 | 			node.setLocation(350, 200);
 46 | 			box.add(node);			
 47 | 			
 48 | 			//Animation(rotate, exist bug!)
 49 | 		    setInterval(function(){
 50 | 				node.rotate += 0.3;
 51 | 				if(node.rotate > 2 * Math.PI){
 52 | 					node.rotate = 0;
 53 | 				}	
 54 | 				box.updateView();
 55 | 			}, 100);
 56 | 
 57 | 			box.updateView();
 58 | 		});
 59 | 	</script>
 60 | 	<style>
 61 | 		canvas {
 62 | 			background-color:#EEEEEE;
 63 | 			border:1px solid #444;
 64 | 		}
 65 | 	</style>
 66 |   </head>
 67 | 
 68 |   <body>
 69 | 
 70 |     <div class="navbar navbar-inverse navbar-fixed-top">
 71 |       <div class="navbar-inner">
 72 |         <div class="container-fluid">
 73 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 74 |             <span class="icon-bar"></span>
 75 |             <span class="icon-bar"></span>
 76 |             <span class="icon-bar"></span>
 77 |           </button>
 78 |           <a class="brand" href="#">Project name</a>
 79 |           <div class="nav-collapse collapse">
 80 |             <p class="navbar-text pull-right">
 81 |               Logged in as <a href="#" class="navbar-link">Username</a>
 82 |             </p>
 83 |             <ul class="nav">
 84 |               <li class="active"><a href="#">Home</a></li>
 85 |               <li><a href="about.html">About</a></li>
 86 |               <li><a href="contact.html">Contact</a></li>
 87 |             </ul>
 88 |           </div><!--/.nav-collapse -->
 89 |         </div>
 90 |       </div>
 91 |     </div>
 92 | 
 93 |     <div class="container-fluid">
 94 |       <div class="row-fluid">
 95 |         <div class="span3">
 96 |           <div class="well sidebar-nav">
 97 |             <ul class="nav nav-list" id='Menu_ul'>
 98 |             </ul>
 99 | 
100 |           </div><!--/.well -->
101 |         </div><!--/span-->
102 |         <div class="span9">
103 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
104 |         </div><!--/span-->
105 |       </div><!--/row-->
106 | 
107 |       <hr>
108 | 
109 |       <footer>
110 |         <p>&copy; Company 2013</p>
111 |       </footer>
112 | 
113 |     </div><!--/.fluid-container-->
114 | 
115 |   </body>
116 | </html>
117 | 


--------------------------------------------------------------------------------
/samples/sound/boom.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/boom.mp3


--------------------------------------------------------------------------------
/samples/sound/boom.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/boom.ogg


--------------------------------------------------------------------------------
/samples/sound/menu.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/menu.mp3


--------------------------------------------------------------------------------
/samples/sound/menu.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/menu.ogg


--------------------------------------------------------------------------------
/samples/sound/over.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/over.mp3


--------------------------------------------------------------------------------
/samples/sound/over.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/over.ogg


--------------------------------------------------------------------------------
/samples/sound/splatter.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/splatter.mp3


--------------------------------------------------------------------------------
/samples/sound/splatter.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/splatter.ogg


--------------------------------------------------------------------------------
/samples/sound/start.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/start.mp3


--------------------------------------------------------------------------------
/samples/sound/start.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/start.ogg


--------------------------------------------------------------------------------
/samples/sound/throw.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/throw.mp3


--------------------------------------------------------------------------------
/samples/sound/throw.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tuanjie54188/jtopo/3247af33618b9f94eb6f54a2f930b062bb53730c/samples/sound/throw.ogg


--------------------------------------------------------------------------------
/samples/star.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			var hostNode = new JTopo.Node();
 46 | 			hostNode.setImage('./img/cloud.png');
 47 | 			hostNode.setSize(64, 64);
 48 | 			hostNode.setLocation(360,190);
 49 | 			box.add(hostNode);
 50 | 
 51 | 			for(var i=1; i<10; i++){
 52 | 				var node = new JTopo.Node();
 53 | 				node.setImage('./img/laptop.png');
 54 | 				node.setSize(64, 64);
 55 | 				box.add(node);
 56 | 				box.add(new JTopo.Link(hostNode, node));
 57 | 			}
 58 | 			
 59 | 			hostNode.layout = {type: 'star', radius:160};
 60 | 			box.layoutNode(hostNode);
 61 | 
 62 | 			box.updateView();
 63 | 		});
 64 | 	</script>
 65 | 	<style>
 66 | 		canvas {
 67 | 			background-color:#EEEEEE;
 68 | 			border:1px solid #444;
 69 | 		}
 70 | 	</style>
 71 |   </head>
 72 | 
 73 |   <body>
 74 | 
 75 |     <div class="navbar navbar-inverse navbar-fixed-top">
 76 |       <div class="navbar-inner">
 77 |         <div class="container-fluid">
 78 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 79 |             <span class="icon-bar"></span>
 80 |             <span class="icon-bar"></span>
 81 |             <span class="icon-bar"></span>
 82 |           </button>
 83 |           <a class="brand" href="#">Project name</a>
 84 |           <div class="nav-collapse collapse">
 85 |             <p class="navbar-text pull-right">
 86 |               Logged in as <a href="#" class="navbar-link">Username</a>
 87 |             </p>
 88 |             <ul class="nav">
 89 |               <li class="active"><a href="#">Home</a></li>
 90 |               <li><a href="about.html">About</a></li>
 91 |               <li><a href="contact.html">Contact</a></li>
 92 |             </ul>
 93 |           </div><!--/.nav-collapse -->
 94 |         </div>
 95 |       </div>
 96 |     </div>
 97 | 
 98 |     <div class="container-fluid">
 99 |       <div class="row-fluid">
100 |         <div class="span3">
101 |           <div class="well sidebar-nav">
102 |             <ul class="nav nav-list" id='Menu_ul'>
103 |             </ul>
104 | 
105 |           </div><!--/.well -->
106 |         </div><!--/span-->
107 |         <div class="span9">
108 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
109 |         </div><!--/span-->
110 |       </div><!--/row-->
111 | 
112 |       <hr>
113 | 
114 |       <footer>
115 |         <p>&copy; Company 2013</p>
116 |       </footer>
117 | 
118 |     </div><!--/.fluid-container-->
119 | 
120 |   </body>
121 | </html>
122 | 


--------------------------------------------------------------------------------
/samples/star2.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			var cNode = new JTopo.Node();
 46 | 			cNode.setLocation(360, 100);
 47 | 			cNode.setImage('./img/cloud.png');
 48 | 			cNode.setSize(64, 64);
 49 | 			cNode.layout = {type: 'star', radius:250, beginDegree:0, endDegree: Math.PI};
 50 | 			box.add(cNode);
 51 | 
 52 | 			var images = ['telephone.png', 'email.png', 'print.png', 'OS_Windows_8.png', 'OS_Ubuntu.png'];
 53 | 			for(var i=0; i<images.length; i++){
 54 | 				var node = new JTopo.Node();
 55 | 				node.setImage('./img/' + images[i]);
 56 | 				node.setSize(128, 128);
 57 | 				box.add(node);
 58 | 
 59 | 				var link = new JTopo.Link(cNode , node);
 60 | 				box.add(link);
 61 | 			}
 62 | 
 63 | 			box.layoutNode(cNode);
 64 | 			box.updateView();
 65 | 		});
 66 | 	</script>
 67 | 	<style>
 68 | 		canvas {
 69 | 			background-color:#EEEEEE;
 70 | 			border:1px solid #444;
 71 | 		}
 72 | 	</style>
 73 |   </head>
 74 | 
 75 |   <body>
 76 | 
 77 |     <div class="navbar navbar-inverse navbar-fixed-top">
 78 |       <div class="navbar-inner">
 79 |         <div class="container-fluid">
 80 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 81 |             <span class="icon-bar"></span>
 82 |             <span class="icon-bar"></span>
 83 |             <span class="icon-bar"></span>
 84 |           </button>
 85 |           <a class="brand" href="#">Project name</a>
 86 |           <div class="nav-collapse collapse">
 87 |             <p class="navbar-text pull-right">
 88 |               Logged in as <a href="#" class="navbar-link">Username</a>
 89 |             </p>
 90 |             <ul class="nav">
 91 |               <li class="active"><a href="#">Home</a></li>
 92 |               <li><a href="about.html">About</a></li>
 93 |               <li><a href="contact.html">Contact</a></li>
 94 |             </ul>
 95 |           </div><!--/.nav-collapse -->
 96 |         </div>
 97 |       </div>
 98 |     </div>
 99 | 
100 |     <div class="container-fluid">
101 |       <div class="row-fluid">
102 |         <div class="span3">
103 |           <div class="well sidebar-nav">
104 |             <ul class="nav nav-list" id='Menu_ul'>
105 |             </ul>
106 | 
107 |           </div><!--/.well -->
108 |         </div><!--/span-->
109 |         <div class="span9">
110 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
111 |         </div><!--/span-->
112 |       </div><!--/row-->
113 | 
114 |       <hr>
115 | 
116 |       <footer>
117 |         <p>&copy; Company 2013</p>
118 |       </footer>
119 | 
120 |     </div><!--/.fluid-container-->
121 | 
122 |   </body>
123 | </html>
124 | 


--------------------------------------------------------------------------------
/samples/star3.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 		<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			var cNode = new JTopo.Node();
 46 | 			cNode.setLocation(360, 200);
 47 | 			cNode.layout = {type: 'star', radius:150, beginDegree:Math.PI/2, endDegree: Math.PI+Math.PI/2};
 48 | 			box.add(cNode);
 49 | 
 50 | 			for(var i=0; i<6; i++){
 51 | 				var node = new JTopo.Node();			
 52 | 				box.add(node);
 53 | 
 54 | 				var link = new JTopo.Link(cNode , node);
 55 | 				box.add(link);
 56 | 			}
 57 | 
 58 | 			box.layoutNode(cNode);
 59 | 			box.updateView();
 60 | 		});
 61 | 	</script>
 62 | 	<style>
 63 | 		canvas {
 64 | 			background-color:#EEEEEE;
 65 | 			border:1px solid #444;
 66 | 		}
 67 | 	</style>
 68 |   </head>
 69 | 
 70 |   <body>
 71 | 
 72 |     <div class="navbar navbar-inverse navbar-fixed-top">
 73 |       <div class="navbar-inner">
 74 |         <div class="container-fluid">
 75 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 76 |             <span class="icon-bar"></span>
 77 |             <span class="icon-bar"></span>
 78 |             <span class="icon-bar"></span>
 79 |           </button>
 80 |           <a class="brand" href="#">Project name</a>
 81 |           <div class="nav-collapse collapse">
 82 |             <p class="navbar-text pull-right">
 83 |               Logged in as <a href="#" class="navbar-link">Username</a>
 84 |             </p>
 85 |             <ul class="nav">
 86 |               <li class="active"><a href="#">Home</a></li>
 87 |               <li><a href="about.html">About</a></li>
 88 |               <li><a href="contact.html">Contact</a></li>
 89 |             </ul>
 90 |           </div><!--/.nav-collapse -->
 91 |         </div>
 92 |       </div>
 93 |     </div>
 94 | 
 95 |     <div class="container-fluid">
 96 |       <div class="row-fluid">
 97 |         <div class="span3">
 98 |           <div class="well sidebar-nav">
 99 |             <ul class="nav nav-list" id='Menu_ul'>
100 |             </ul>
101 |           </div><!--/.well -->
102 |         </div><!--/span-->
103 |         <div class="span9">
104 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
105 |         </div><!--/span-->
106 |       </div><!--/row-->
107 | 
108 |       <hr>
109 | 
110 |       <footer>
111 |         <p>&copy; Company 2013</p>
112 |       </footer>
113 | 
114 |     </div><!--/.fluid-container-->
115 | 
116 |   </body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/samples/star4.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 38 | 
 39 | 	<script id='code'>
 40 | 		$(document).ready(function(){		
 41 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 42 | 
 43 | 			function ZoneNode(name){
 44 | 				var node = new JTopo.Node(name);
 45 | 				node.setType('zone');
 46 | 				return node;
 47 | 			}
 48 | 			function HostNode(name){
 49 | 				var node = new JTopo.Node(name);
 50 | 				node.setType('host');
 51 | 				node.gravitate = function(targetNode){
 52 | 					return targetNode.type == 'zone';
 53 | 				};
 54 | 				return node;
 55 | 			}
 56 | 			function VmNode(name){
 57 | 				var node = new JTopo.Node(name);
 58 | 				node.setType('vm');
 59 | 				return node;
 60 | 			}
 61 | 			/* 星型布局-1 */
 62 | 			var cNode = new HostNode('host_star2');
 63 | 			cNode.layout = {r:150, beginDegree:Math.PI-Math.Pi/4, endDegree: Math.PI-Math.Pi/4};
 64 | 			cNode.setLocation(360, 250);
 65 | 			box.add(cNode);
 66 | 
 67 | 			var n = 5+Math.round(Math.random() * 4);
 68 | 			var points = JTopo.Layout.getStarPositions(cNode.x, cNode.y, n, cNode.layout.r, cNode.layout.beginDegree, cNode.layout.endDegree);
 69 | 			for(var i=0; i<n; i++){
 70 | 				var node = new VmNode('vm_star_2'+i);
 71 | 				node.setLocation(points[i].x, points[i].y);
 72 | 				box.add(node);
 73 | 				var link = new JTopo.Link(cNode , node);
 74 | 				box.add(link);
 75 | 			}
 76 | 
 77 | 			box.updateView();
 78 | 		});
 79 | 	</script>
 80 | 	<style>
 81 | 		canvas {
 82 | 			background-color:#EEEEEE;
 83 | 			border:1px solid #444;
 84 | 		}
 85 | 	</style>
 86 |   </head>
 87 | 
 88 |   <body>
 89 | 
 90 |     <div class="navbar navbar-inverse navbar-fixed-top">
 91 |       <div class="navbar-inner">
 92 |         <div class="container-fluid">
 93 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 94 |             <span class="icon-bar"></span>
 95 |             <span class="icon-bar"></span>
 96 |             <span class="icon-bar"></span>
 97 |           </button>
 98 |           <a class="brand" href="#">Project name</a>
 99 |           <div class="nav-collapse collapse">
100 |             <p class="navbar-text pull-right">
101 |               Logged in as <a href="#" class="navbar-link">Username</a>
102 |             </p>
103 |             <ul class="nav">
104 |               <li class="active"><a href="#">Home</a></li>
105 |               <li><a href="about.html">About</a></li>
106 |               <li><a href="contact.html">Contact</a></li>
107 |             </ul>
108 |           </div><!--/.nav-collapse -->
109 |         </div>
110 |       </div>
111 |     </div>
112 | 
113 |     <div class="container-fluid">
114 |       <div class="row-fluid">
115 |         <div class="span3">
116 |           <div class="well sidebar-nav">
117 |             <ul class="nav nav-list">
118 |               <li class="nav-header">演示</li>
119 |               <li><a href="index.html">HelloWorld</a></li>
120 |               <li><a href="link.html">连线</a></li>
121 | 			  <li><a href="group.html">节点分组</a></li>
122 |               <li class="active"><a href="star.html">星型布局</a></li>
123 |               <li><a href="tree.html">树形布局</a></li>
124 | 			  <li><a href="mix.html">混合布局</a></li>
125 |               <li class="nav-header">效果</li>
126 | 			  <li><a href="gravitate.html">自动吸附</a></li>
127 | 			  <li><a href="donghua.html">动画</a></li>
128 | 			  <li><a href="#">弹性</a></li>
129 |               <li><a href="#">缓动</a></li>
130 |               <li><a href="#">粘性</a></li>
131 |               <li class="nav-header">事件</li>
132 |               <li><a href="click.html">鼠标单击</a></li>
133 |               <li><a href="drag.html">鼠标拖拽</a></li>
134 |             </ul>
135 |           </div><!--/.well -->
136 |         </div><!--/span-->
137 |         <div class="span9">
138 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
139 |         </div><!--/span-->
140 |       </div><!--/row-->
141 | 
142 |       <hr>
143 | 
144 |       <footer>
145 |         <p>&copy; Company 2013</p>
146 |       </footer>
147 | 
148 |     </div><!--/.fluid-container-->
149 | 
150 |   </body>
151 | </html>
152 | 


--------------------------------------------------------------------------------
/samples/tree.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 38 | 
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 		$(document).ready(function(){
 42 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 43 | 
 44 | 			var hostNode = new JTopo.Node();
 45 | 			hostNode.setLocation(360,190);
 46 | 			box.add(hostNode);
 47 | 
 48 | 			for(var i=1; i<6; i++){
 49 | 				var node = new JTopo.Node();
 50 | 				box.add(node);
 51 | 				box.add(new JTopo.Link(hostNode, node));
 52 | 			}
 53 | 			
 54 | 			hostNode.layout = {type: 'tree', width: 140, height: 90, direction:'bottom'};
 55 | 			box.layoutNode(hostNode);
 56 | 
 57 | 			box.updateView();
 58 | 		});
 59 | 	</script>
 60 | 	<style>
 61 | 		canvas {
 62 | 			background-color:#EEEEEE;
 63 | 			border:1px solid #444;
 64 | 		}
 65 | 	</style>
 66 |   </head>
 67 | 
 68 |   <body>
 69 | 
 70 |     <div class="navbar navbar-inverse navbar-fixed-top">
 71 |       <div class="navbar-inner">
 72 |         <div class="container-fluid">
 73 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 74 |             <span class="icon-bar"></span>
 75 |             <span class="icon-bar"></span>
 76 |             <span class="icon-bar"></span>
 77 |           </button>
 78 |           <a class="brand" href="#">Project name</a>
 79 |           <div class="nav-collapse collapse">
 80 |             <p class="navbar-text pull-right">
 81 |               Logged in as <a href="#" class="navbar-link">Username</a>
 82 |             </p>
 83 |             <ul class="nav">
 84 |               <li class="active"><a href="#">Home</a></li>
 85 |               <li><a href="about.html">About</a></li>
 86 |               <li><a href="contact.html">Contact</a></li>
 87 |             </ul>
 88 |           </div><!--/.nav-collapse -->
 89 |         </div>
 90 |       </div>
 91 |     </div>
 92 | 
 93 |     <div class="container-fluid">
 94 |       <div class="row-fluid">
 95 |         <div class="span3">
 96 |           <div class="well sidebar-nav">
 97 |             <ul class="nav nav-list" id='Menu_ul'>
 98 |             </ul>
 99 | 
100 |           </div><!--/.well -->
101 |         </div><!--/span-->
102 |         <div class="span9">
103 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
104 |         </div><!--/span-->
105 |       </div><!--/row-->
106 | 
107 |       <hr>
108 | 
109 |       <footer>
110 |         <p>&copy; Company 2013</p>
111 |       </footer>
112 | 
113 |     </div><!--/.fluid-container-->
114 | 
115 |   </body>
116 | </html>
117 | 


--------------------------------------------------------------------------------
/samples/tree2.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			var hostNode = new JTopo.Node();
 46 | 			hostNode.setLocation(360,190);
 47 | 			box.add(hostNode);
 48 | 
 49 | 			for(var i=1; i<6; i++){
 50 | 				var node = new JTopo.Node();
 51 | 				box.add(node);
 52 | 				box.add(new JTopo.Link(hostNode, node));
 53 | 			}
 54 | 			
 55 | 			hostNode.layout = {type: 'tree', width: 60, height: 90, direction:'right'};
 56 | 			box.layoutNode(hostNode);
 57 | 
 58 | 			box.updateView();
 59 | 		});
 60 | 	</script>
 61 | 	<style>
 62 | 		canvas {
 63 | 			background-color:#EEEEEE;
 64 | 			border:1px solid #444;
 65 | 		}
 66 | 	</style>
 67 |   </head>
 68 | 
 69 |   <body>
 70 | 
 71 |     <div class="navbar navbar-inverse navbar-fixed-top">
 72 |       <div class="navbar-inner">
 73 |         <div class="container-fluid">
 74 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 75 |             <span class="icon-bar"></span>
 76 |             <span class="icon-bar"></span>
 77 |             <span class="icon-bar"></span>
 78 |           </button>
 79 |           <a class="brand" href="#">Project name</a>
 80 |           <div class="nav-collapse collapse">
 81 |             <p class="navbar-text pull-right">
 82 |               Logged in as <a href="#" class="navbar-link">Username</a>
 83 |             </p>
 84 |             <ul class="nav">
 85 |               <li class="active"><a href="#">Home</a></li>
 86 |               <li><a href="about.html">About</a></li>
 87 |               <li><a href="contact.html">Contact</a></li>
 88 |             </ul>
 89 |           </div><!--/.nav-collapse -->
 90 |         </div>
 91 |       </div>
 92 |     </div>
 93 | 
 94 |     <div class="container-fluid">
 95 |       <div class="row-fluid">
 96 |         <div class="span3">
 97 |           <div class="well sidebar-nav">
 98 |             <ul class="nav nav-list" id='Menu_ul'>
 99 |             </ul>
100 | 
101 |           </div><!--/.well -->
102 |         </div><!--/span-->
103 |         <div class="span9">
104 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
105 |         </div><!--/span-->
106 |       </div><!--/row-->
107 | 
108 |       <hr>
109 | 
110 |       <footer>
111 |         <p>&copy; Company 2013</p>
112 |       </footer>
113 | 
114 |     </div><!--/.fluid-container-->
115 | 
116 |   </body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/samples/tree3.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 	<script type="text/javascript" src="js/jquery.js"></script>
 33 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 34 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 35 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 36 | 	
 37 | 	
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 
 40 | 	<script type="text/javascript" src="js/menu.js"></script>
 41 | 	<script id='code'>
 42 | 		$(document).ready(function(){		
 43 | 			var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 			var hostNode = new JTopo.Node();
 46 | 			hostNode.setLocation(360,190);
 47 | 			box.add(hostNode);
 48 | 
 49 | 			for(var i=1; i<6; i++){
 50 | 				var node = new JTopo.Node();
 51 | 				box.add(node);
 52 | 				box.add(new JTopo.Link(hostNode, node));
 53 | 			}
 54 | 			
 55 | 			hostNode.layout = {type: 'tree', width: 60, height: 90, direction:'top'};
 56 | 			box.layoutNode(hostNode);
 57 | 
 58 | 			box.updateView();
 59 | 		});
 60 | 	</script>
 61 | 	<style>
 62 | 		canvas {
 63 | 			background-color:#EEEEEE;
 64 | 			border:1px solid #444;
 65 | 		}
 66 | 	</style>
 67 |   </head>
 68 | 
 69 |   <body>
 70 | 
 71 |     <div class="navbar navbar-inverse navbar-fixed-top">
 72 |       <div class="navbar-inner">
 73 |         <div class="container-fluid">
 74 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 75 |             <span class="icon-bar"></span>
 76 |             <span class="icon-bar"></span>
 77 |             <span class="icon-bar"></span>
 78 |           </button>
 79 |           <a class="brand" href="#">Project name</a>
 80 |           <div class="nav-collapse collapse">
 81 |             <p class="navbar-text pull-right">
 82 |               Logged in as <a href="#" class="navbar-link">Username</a>
 83 |             </p>
 84 |             <ul class="nav">
 85 |               <li class="active"><a href="#">Home</a></li>
 86 |               <li><a href="about.html">About</a></li>
 87 |               <li><a href="contact.html">Contact</a></li>
 88 |             </ul>
 89 |           </div><!--/.nav-collapse -->
 90 |         </div>
 91 |       </div>
 92 |     </div>
 93 | 
 94 |     <div class="container-fluid">
 95 |       <div class="row-fluid">
 96 |         <div class="span3">
 97 |           <div class="well sidebar-nav">
 98 |             <ul class="nav nav-list" id='Menu_ul'>
 99 |             </ul>
100 | 
101 |           </div><!--/.well -->
102 |         </div><!--/span-->
103 |         <div class="span9">
104 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
105 |         </div><!--/span-->
106 |       </div><!--/row-->
107 | 
108 |       <hr>
109 | 
110 |       <footer>
111 |         <p>&copy; Company 2013</p>
112 |       </footer>
113 | 
114 |     </div><!--/.fluid-container-->
115 | 
116 |   </body>
117 | </html>
118 | 


--------------------------------------------------------------------------------
/samples/umlNode.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html>
  4 |   <head>
  5 | 	<meta http-equiv="X-UA-Compatible" content="IE=8" />
  6 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  7 | 	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
  8 | 	<meta http-equiv="Pragma" content="no-cache" />
  9 | 	<meta http-equiv="Expires" content="0" />
 10 | 
 11 |     <!-- Le styles -->
 12 |     <link href="./css/bootstrap.min.css" rel="stylesheet">
 13 |     <style type="text/css">
 14 |       body {
 15 |         padding-top: 60px;
 16 |         padding-bottom: 40px;
 17 |       }
 18 |       .sidebar-nav {
 19 |         padding: 9px 0;
 20 |       }
 21 | 
 22 |       @media (max-width: 980px) {
 23 |         /* Enable use of floated navbar text */
 24 |         .navbar-text.pull-right {
 25 |           float: none;
 26 |           padding-left: 5px;
 27 |           padding-right: 5px;
 28 |         }
 29 |       }
 30 |     </style>
 31 |     <link href="./css/bootstrap-responsive.css" rel="stylesheet">
 32 | 
 33 | 	<script type="text/javascript" src="js/jquery.js"></script>
 34 | 	<link href="./css/jquery.snippet.min.css" rel="stylesheet">
 35 | 	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
 36 | 
 37 | 	<script type="text/javascript" src="js/excanvas.js"></script>
 38 | 	<script type="text/javascript" src="js/jtopo-0.3.0-min.js"></script>
 39 | 	<script type="text/javascript" src="js/menu.js"></script>
 40 | 	<script id='code'>
 41 | 
 42 | 	$(document).ready(function(){					
 43 | 		var box = new JTopo.DataBox('dataBox', $("canvas")[0]);
 44 | 
 45 | 		var User = {
 46 | 		   id: 001,name:'jack',address: [],
 47 | 		   getName: function(){}, setName: function(){}
 48 | 		};
 49 | 
 50 | 		var userNode = new JTopo.UMLClassNode('User');
 51 | 		userNode.classObj = User;
 52 | 		userNode.setLocation(377, 77);
 53 | 		box.addElement(userNode);
 54 | 
 55 | 		var accountNode = new JTopo.UMLClassNode('Account');
 56 | 		accountNode.operations = ['+ add(user) :Integer', '+ getUsers :List'];
 57 | 		accountNode.attributes = ['- id :String', '+ users :List'];
 58 | 		accountNode.setLocation(92, 221);
 59 | 		box.addElement(accountNode);
 60 | 
 61 | 		var resourceNode = new JTopo.UMLClassNode('Resource');
 62 | 		resourceNode.operations = [];
 63 | 		resourceNode.attributes = ['- id :String', '+ accounts :List', '+ type :String'];
 64 | 		resourceNode.setLocation(381, 351);
 65 | 		box.addElement(resourceNode);
 66 | 
 67 | 		box.addElement(new JTopo.ArrowsFoldLink(userNode, accountNode));
 68 | 		box.addElement(new JTopo.ArrowsLink(userNode, resourceNode));
 69 | 
 70 | 		box.updateView();
 71 | 	});
 72 | 	</script>
 73 | 	<style>
 74 | 		canvas {
 75 | 			background-color:#EEEEEE;
 76 | 			border:1px solid #444;
 77 | 		}
 78 | 	</style>
 79 |   </head>
 80 | 
 81 |   <body>
 82 | 
 83 |     <div class="navbar navbar-inverse navbar-fixed-top">
 84 |       <div class="navbar-inner">
 85 |         <div class="container-fluid">
 86 |           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 87 |             <span class="icon-bar"></span>
 88 |             <span class="icon-bar"></span>
 89 |             <span class="icon-bar"></span>
 90 |           </button>
 91 |           <a class="brand" href="#">Project name</a>
 92 |           <div class="nav-collapse collapse">
 93 |             <p class="navbar-text pull-right">
 94 |               Logged in as <a href="#" class="navbar-link">Username</a>
 95 |             </p>
 96 |             <ul class="nav">
 97 |               <li class="active"><a href="#">Home</a></li>
 98 |               <li><a href="about.html">About</a></li>
 99 |               <li><a href="contact.html">Contact</a></li>
100 |             </ul>
101 |           </div><!--/.nav-collapse -->
102 |         </div>
103 |       </div>
104 |     </div>
105 | 
106 |     <div class="container-fluid">
107 |       <div class="row-fluid">
108 |         <div class="span3">
109 |           <div class="well sidebar-nav">
110 |             <ul class="nav nav-list" id='Menu_ul'>
111 |             </ul>
112 |           </div><!--/.well -->
113 |         </div><!--/span-->
114 |         <div class="span9">
115 |           <canvas id="canvas" style="" width="800" height="500"></canvas>
116 |         </div><!--/span-->
117 |       </div><!--/row-->
118 | 
119 |       <hr>
120 | 
121 |       <footer>
122 |         <p>&copy; Company 2013</p>
123 |       </footer>
124 | 
125 |     </div><!--/.fluid-container-->
126 | 
127 |   </body>
128 | </html>
129 | 


--------------------------------------------------------------------------------
/src/jtopo.abstractnode.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * JTopo (Javascript topology libraries) 0.2.0
 3 |  * https://github.com/wondery/jtopo
 4 |  * 
 5 |  * Copyright (c) 2013 wondery
 6 |  * Released under the LGPL license, Version 3.0
 7 |  * http://www.gnu.org/licenses/lgpl.html
 8 |  *
 9 |  * Author: wondery
10 |  * Email: jtopology@163.com
11 |  */
12 | 
13 | (function(JTopo){
14 | 	/**
15 | 	 * Abstract node object
16 | 	 * @param {int} id
17 | 	 * @param {String} name
18 | 	 */
19 | 	function AbstractNode(name) {
20 | 		this.id = null;
21 | 		this.x = 0;
22 | 		this.y = 0;
23 | 		this.width = 0;
24 | 		this.height = 0;
25 | 		this.visible = true;
26 | 		this.dragable = true;
27 | 
28 | 		this.name = name;
29 | 		this.image = null;
30 | 		this.color = null;
31 | 		this.layout = null;
32 | 		this.gravitate = null;//function(){};
33 | 		this.parentContainer = null;
34 | 		this.inContainer = null;
35 | 		this.outContainer = null;
36 | 		this.fixed = false;
37 | 	};
38 | 
39 | 	AbstractNode.prototype = new JTopo.Element();
40 | 
41 | 	AbstractNode.prototype.getName = function(){
42 | 		return this.name;
43 | 	};
44 | 
45 | 	AbstractNode.prototype.setName = function(n){
46 | 		this.name = n;
47 | 		return this;
48 | 	};
49 | 
50 | 	AbstractNode.prototype.getImage = function(){
51 | 		return this.image;
52 | 	};
53 | 
54 | 	AbstractNode.prototype.setImage = function(i){
55 | 		var node = this;
56 | 		if(typeof i == 'string'){
57 | 			var img = this.image = new Image();
58 | 			this.image.onload = function(){
59 | 				node.setSize(img.width, img.height);
60 | 			};
61 | 			this.image.src = i;
62 | 		}else{
63 | 			this.image = i;
64 | 		}
65 | 	};
66 | 
67 | 	var ImageCache = {};
68 | 	AbstractNode.prototype.getTypeImage = function(type){
69 | 		var typeImages = {
70 | 			'zone' : './img/zone.png',
71 | 			'host' : './img/host.png',
72 | 			'vm' : './img/vm.png'
73 | 		};
74 | 		if(ImageCache[type]){
75 | 			return ImageCache[type];
76 | 		}
77 | 		var src = typeImages[type];
78 | 		if(src == null) return null;
79 | 
80 | 		var image = new Image();
81 | 		image.src = src;
82 | 		return ImageCache[type] = image;
83 | 	};
84 | 
85 | 	AbstractNode.prototype.getType = function(){
86 | 		return this.type;
87 | 	};
88 | 
89 | 	AbstractNode.prototype.setType = function(type){
90 | 		this.type = type;
91 | 		this.setImage(this.getTypeImage(type));
92 | 	};
93 | 
94 | 	JTopo.AbstractNode = AbstractNode;
95 | 
96 | })(JTopo);
97 | 


--------------------------------------------------------------------------------
/src/jtopo.animation.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * JTopo (Javascript topology libraries) 0.2.0
  3 |  * https://github.com/wondery/jtopo
  4 |  * 
  5 |  * Copyright (c) 2013 wondery
  6 |  * Released under the LGPL license, Version 3.0
  7 |  * http://www.gnu.org/licenses/lgpl.html
  8 |  *
  9 |  * Author: wondery
 10 |  * Email: jtopology@163.com
 11 |  */
 12 | 
 13 | (function(JTopo){
 14 | 	var isStopAll = false;
 15 | 
 16 | 	//gravity
 17 | 	function gravity(node, option){
 18 | 		var box = option.context;
 19 | 		var gravity = option.gravity || 0.1;
 20 | 		
 21 | 		var t = null;
 22 | 		var effect = {};
 23 | 		
 24 | 		function stop(){
 25 | 			window.clearInterval(t);
 26 | 			if(effect.onStop){
 27 | 				effect.onStop(node);
 28 | 			}
 29 | 			return effect;
 30 | 		}
 31 | 
 32 | 		function run(){
 33 | 			var dx = option.dx || 0, dy = option.dy || 2;
 34 | 			t = setInterval(function(){
 35 | 				if(isStopAll){
 36 | 					effect.stop();
 37 | 					return;
 38 | 				}
 39 | 				dy += gravity;
 40 | 				if(node.y + node.height < box.canvas.height){
 41 | 					node.setLocation(node.x + dx, node.y + dy);
 42 | 					box.updateView();
 43 | 				}else{
 44 | 					dy = 0;	
 45 | 					stop();
 46 | 				}
 47 | 			}, 20);
 48 | 			return effect;
 49 | 		}
 50 | 
 51 | 		effect.run = run;
 52 | 		effect.stop = stop;
 53 | 		effect.onStop = function(f){ effect.onStop = f; return effect;};
 54 | 		return effect;
 55 | 	}
 56 | 
 57 | 	//
 58 | 	function rotate(node, option){
 59 | 		var box = option.context;
 60 | 		var t = null;
 61 | 		var effect = {};
 62 | 		var v = option.v;
 63 | 		
 64 | 		function run(){
 65 | 			t = setInterval(function(){
 66 | 				if(isStopAll){
 67 | 					effect.stop();
 68 | 					return;
 69 | 				}
 70 | 				node.rotate += v || 0.2;
 71 | 				if(node.rotate>2*Math.PI){
 72 | 					node.rotate = 0;
 73 | 				}
 74 | 				box.updateView();
 75 | 			}, 100);
 76 | 			return effect;
 77 | 		}
 78 | 		function stop(){
 79 | 			window.clearInterval(t);
 80 | 			if(effect.onStop){
 81 | 				effect.onStop(node);
 82 | 			}
 83 | 			return effect;
 84 | 		}
 85 | 
 86 | 		effect.run = run;
 87 | 		effect.stop = stop;
 88 | 		effect.onStop = function(f){ effect.onStop = f; return effect;};
 89 | 		return effect;
 90 | 	}
 91 | 
 92 | 	//
 93 | 	function dividedTwoPiece(node, option){
 94 | 		var box = option.context;
 95 | 		var style = node.style;
 96 | 		var effect = {};
 97 | 
 98 | 		function genNode(x, y, r, beginDegree, endDegree){
 99 | 			var newNode = new JTopo.Node();
100 | 			newNode.setImage(node.image);
101 | 			newNode.setSize(node.width, node.height);
102 | 			newNode.setLocation(x, y);
103 | 			newNode.draw = function(ctx){
104 | 				ctx.save();
105 | 				ctx.arc(this.x+this.width/2, this.y+this.height/2, r, beginDegree, endDegree);
106 | 				ctx.clip();
107 | 				ctx.beginPath();
108 | 				if(this.image != null){	
109 | 					ctx.drawImage(this.image, this.x, this.y);
110 | 				}else{
111 | 					ctx.fillStyle = 'rgba(' + this.style.fillStyle + ',' + this.alpha + ')';
112 | 					ctx.rect(this.x, this.y, this.width, this.height);
113 | 					ctx.fill();
114 | 				}
115 | 				ctx.closePath();
116 | 				ctx.restore();
117 | 			};
118 | 			return newNode;
119 | 		};
120 | 
121 | 		function split(angle, box){
122 | 			var beginDegree = angle;
123 | 			var endDegree = angle + Math.PI;
124 | 
125 | 			var node1 = genNode(node.x, node.y , node.width, beginDegree, endDegree);
126 | 			var node2 = genNode(node.x- 2 + Math.random()*4, node.y , node.width, beginDegree + Math.PI, beginDegree);
127 | 
128 | 			node.setVisible(false);
129 | 
130 | 			box.add(node1);
131 | 			box.add(node2);
132 | 			box.updateView();
133 | 
134 | 			JTopo.Animation.gravity(node1, {context:box, dx:0.3}).run().onStop(function(n){
135 | 				box.remove(node1);
136 | 				box.remove(node2);
137 | 				box.updateView();
138 | 				effect.stop();
139 | 			});
140 | 			JTopo.Animation.gravity(node2, {context:box, dx:-0.2}).run();
141 | 		}
142 | 
143 | 		function run(){	
144 | 			split(option.angle, box);
145 | 			return effect;
146 | 		}
147 | 		function stop(){	
148 | 			if(effect.onStop){
149 | 				effect.onStop(node);
150 | 			}
151 | 			return effect;
152 | 		}
153 | 
154 | 		effect.onStop = function(f){ effect.onStop = f; return effect;};
155 | 		effect.run = run;
156 | 		effect.stop = stop;
157 | 		return effect;
158 | 	}
159 | 
160 | 	function repeatThrow(node, option){
161 | 		var gravity = 0.8;
162 | 		var wind = 2;
163 | 		var angle = 0;
164 | 		var box = option.context;
165 | 		node.isSelected = function(){ return false;	};
166 | 		node.isFocus = function(){return false;	};
167 | 		node.setDragable(false);
168 | 
169 | 		function initNode(node){
170 | 			node.setVisible(true);
171 | 			node.rotate = Math.random();
172 | 			var w = box.canvas.width/2;
173 | 			node.x = w + Math.random() * (w - 100)  -   Math.random() * (w - 100);
174 | 			node.y = box.canvas.height;
175 | 			node.vx = Math.random() * 5 - Math.random() * 5;
176 | 			node.vy =  -25;
177 | 		}
178 | 
179 | 		var t = null;
180 | 		var effect = {};
181 | 		function run(){				
182 | 			initNode(node);
183 | 			t = setInterval(function(){
184 | 				if(isStopAll){
185 | 					effect.stop();
186 | 					return;
187 | 				}
188 | 				node.vy += gravity;
189 | 				node.x += node.vx;
190 | 				node.y += node.vy;
191 | 				if(node.x < 0 || node.x >box.canvas.width || node.y>box.canvas.height){
192 | 					if(effect.onStop){
193 | 						effect.onStop(node);
194 | 					}
195 | 					initNode(node);
196 | 				}
197 | 				box.updateView();
198 | 			}, 50);
199 | 			return effect;
200 | 		}
201 | 		function stop(){
202 | 			window.clearInterval(t);
203 | 		}
204 | 
205 | 		effect.onStop = function(f){ effect.onStop = f; return effect;};
206 | 		effect.run = run;
207 | 		effect.stop = stop;
208 | 		return effect;
209 | 	}
210 | 
211 | 	function stopAll(){
212 | 		isStopAll = true;
213 | 	}
214 | 
215 | 	function startAll(){
216 | 		isStopAll = false;
217 | 	}
218 | 
219 | 	
220 | 	//cycle
221 | 	function cycle(node, option){
222 | 		var p1 = option.p1;
223 | 		var p2 = option.p2;
224 | 		var box = option.context;
225 | 
226 | 		var midX = p1.x + (p2.x - p1.x)/2;
227 | 		var midY = p1.y + (p2.y - p1.y)/2;
228 | 		var r = JTopo.util.getDistance(p1, p2)/2;
229 | 
230 | 		var angle = Math.atan2(midY, midX);
231 | 		var speed = option.speed || 0.2;
232 | 		var effect = {};
233 | 		var t = null;
234 | 		function run(){
235 | 			t = setInterval(function(){
236 | 				if(isStopAll){
237 | 					effect.stop();
238 | 					return;
239 | 				}
240 | 				//var newx = p1.x + midX + Math.cos(angle) * r;
241 | 				var newy = p1.y + midX + Math.sin(angle) * r;
242 | 				node.setLocation(node.x,newy);
243 | 				box.updateView();
244 | 				angle += speed;
245 | 			}, 100);	
246 | 			return effect;
247 | 		}
248 | 		function stop(){
249 | 			window.clearInterval(t);
250 | 		}
251 | 		
252 | 		effect.run = run;
253 | 		effect.stop = stop;
254 | 		return effect;
255 | 	}
256 | 
257 | 	//move
258 | 	function move(node, option){
259 | 		var p = option.position;
260 | 		var box = option.context;
261 | 		var easing = option.easing || 0.2;
262 | 
263 | 		var effect = {};
264 | 		var t = null;
265 | 		function run(){
266 | 			t = setInterval(function(){
267 | 				if(isStopAll){
268 | 					effect.stop();
269 | 					return;
270 | 				}
271 | 				var dx = p.x - node.x;
272 | 				var dy = p.y - node.y;
273 | 				var vx = dx * easing;
274 | 				var vy = dy * easing;
275 | 				
276 | 				node.x += vx;
277 | 				node.y += vy;
278 | 				box.updateView();
279 | 				if(vx < 0.01 && vy<0.1){
280 | 					stop();
281 | 				}
282 | 			}, 100);	
283 | 			return effect;
284 | 		}
285 | 		function stop(){
286 | 			window.clearInterval(t);
287 | 		}
288 | 		effect.onStop = function(f){ effect.onStop = f; return effect;};
289 | 		effect.run = run;
290 | 		effect.stop = stop;
291 | 		return effect;
292 | 	}
293 | 
294 | 	//scala
295 | 	function scala(node, option){
296 | 		var p = option.position;
297 | 		var box = option.context;
298 | 		var scala = option.scala || 1;
299 | 		var v = 0.06;
300 | 		var oldScala = node.scala;
301 | 
302 | 		var effect = {};
303 | 		var t = null;
304 | 		function run(){
305 | 			t = setInterval(function(){				
306 | 				node.scala += v;
307 | 
308 | 				if(node.scala >= scala){
309 | 					stop();
310 | 				}
311 | 				box.updateView();
312 | 			}, 100);	
313 | 			return effect;
314 | 		}
315 | 		function stop(){
316 | 			if(effect.onStop){
317 | 				effect.onStop(node);
318 | 			}
319 | 			node.scala = oldScala;
320 | 			window.clearInterval(t);
321 | 		}
322 | 		effect.onStop = function(f){ effect.onStop = f; return effect;};
323 | 		effect.run = run;
324 | 		effect.stop = stop;
325 | 		return effect;
326 | 	}
327 | 
328 | 	JTopo.Animation = {
329 | 		gravity : gravity,
330 | 		dividedTwoPiece : dividedTwoPiece,
331 | 		repeatThrow: repeatThrow,
332 | 		rotate: rotate,
333 | 		cycle: cycle,
334 | 		move: move,
335 | 		scala: scala,
336 | 		stopAll: stopAll,
337 | 		startAll: startAll
338 | 	};
339 | })(JTopo);
340 | 


--------------------------------------------------------------------------------
/src/jtopo.container.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * JTopo (Javascript topology libraries) 0.2.0
  3 |  * https://github.com/wondery/jtopo
  4 |  * 
  5 |  * Copyright (c) 2013 wondery
  6 |  * Released under the LGPL license, Version 3.0
  7 |  * http://www.gnu.org/licenses/lgpl.html
  8 |  *
  9 |  * Author: wondery
 10 |  * Email: jtopology@163.com
 11 |  */
 12 | 
 13 | (function(JTopo){
 14 | 
 15 | 	function Container(name) {
 16 | 		this.name = name;
 17 | 		this.x = 0;
 18 | 		this.y = 0;
 19 | 		this.width = 40;
 20 | 		this.height = 40;
 21 | 		this.items = [];
 22 | 		this.style = {fillStyle: '193, 200, 254'};
 23 | 		this.alpha = 0.3;
 24 | 		this.dragable = true;
 25 | 	};
 26 | 
 27 | 	Container.prototype = new JTopo.Element();
 28 | 
 29 | 	Container.prototype.add = function (e) {
 30 | 		this.items.push(e);
 31 | 		e.parentContainer = this;
 32 | 	};
 33 | 
 34 | 	Container.prototype.remove = function (e) {
 35 | 		for(var i=0; i<this.items.length; i++){
 36 | 			if(this.items[i] === e){
 37 | 				e.parentContainer = null;
 38 | 				this.items = this.items.del(i);
 39 | 				e.lastParentContainer = this;
 40 | 				break;
 41 | 			}
 42 | 		}
 43 | 	};
 44 | 
 45 | 	Container.prototype.removeAll = function () {
 46 | 		for(var i=0; i<this.items.length; i++){
 47 | 			this.remove(this.items[i]);
 48 | 		}
 49 | 	};
 50 | 
 51 | 	Container.prototype.setLocation = function(x , y){
 52 | 		var dx = x - this.getX();
 53 | 		var dy = y - this.getY();
 54 | 		this.setX(x);
 55 | 		this.setY(y);
 56 | 
 57 | 		for(var i=0; i<this.items.length; i++){
 58 | 			var item = this.items[i];
 59 | 			item.setLocation(item.getX() + dx, item.getY() + dy);
 60 | 		}
 61 | 	};
 62 | 
 63 | 	Container.prototype.updateBound = function(){
 64 | 		var bound = {x: 10000000, y:1000000, width:0, height:0};
 65 | 		if(this.items.length > 0){
 66 | 			var minX = 10000000;
 67 | 			var maxX = -10000000;
 68 | 			var minY = 10000000;
 69 | 			var maxY = -10000000;
 70 | 			var width = maxX - minX;
 71 | 			var height = maxY - minY;
 72 | 			for (var i = 0; i < this.items.length; i++) {
 73 | 				var item = this.items[i];
 74 | 				if (item.x <= minX) {
 75 | 					minX = item.x;
 76 | 				}
 77 | 				if (item.x >= maxX) {
 78 | 					maxX = item.x;
 79 | 				}
 80 | 				if (item.y <= minY) {
 81 | 					minY = item.y;
 82 | 				}
 83 | 				if (item.y >= maxY) {
 84 | 					maxY = item.y;
 85 | 				}
 86 | 				width = maxX - minX + item.width;
 87 | 				height = maxY - minY + item.height;
 88 | 			}
 89 | 			
 90 | 			this.x = minX - 5;
 91 | 			this.y = minY - 5;
 92 | 			this.width = width + 5;
 93 | 			this.height = height + 5;
 94 | 		}
 95 | 	};
 96 | 
 97 | 	Container.prototype.draw = function (ctx) {
 98 | 		this.updateBound();
 99 | 		ctx.save();
100 | 		ctx.beginPath();
101 | 		ctx.shadowBlur = 9;
102 | 		ctx.shadowColor = 'rgba(0,0,0,0.5)';
103 | 		ctx.shadowOffsetX = 3;
104 | 		ctx.shadowOffsetY = 3;
105 | 		ctx.fillStyle = 'rgba(' + this.style.fillStyle + ',' + this.alpha + ')';
106 | 		ctx.fillRect(this.x, this.y, this.width, this.height);
107 | 		ctx.closePath();
108 | 		ctx.restore();
109 | 	};
110 | 
111 | 	function GhomboidContainer(){
112 | 		var container = new JTopo.Container();
113 | 		container.offset = 50;
114 | 		container.draw = function(ctx){
115 | 			this.updateBound();
116 | 			ctx.save();
117 | 			ctx.beginPath();
118 | 			ctx.shadowBlur = 9;
119 | 			ctx.shadowColor = 'rgba(0,0,0,0.9)';
120 | 			ctx.shadowOffsetX = 6;
121 | 			ctx.shadowOffsetY = 6;
122 | 			ctx.fillStyle = 'rgba(' + this.style.fillStyle + ',' + this.alpha + ')';
123 | 			ctx.moveTo(this.x+this.offset, this.y);
124 | 			ctx.lineTo(this.x+this.offset+this.width, this.y);
125 | 			ctx.lineTo(this.x+this.width, this.y+this.height);
126 | 			ctx.lineTo(this.x, this.y+this.height);
127 | 			ctx.lineTo(this.x+this.offset, this.y);
128 | 			ctx.fill();
129 | 			ctx.stroke();
130 | 			ctx.closePath();
131 | 			ctx.restore();
132 | 		};
133 | 		return container;
134 | 	}
135 | 
136 | 
137 | 	function GridContainer(){
138 | 		var container = new JTopo.Container();
139 | 		container.rows = 3;
140 | 		container.cols = 2;
141 | 		container.cellWidth = 60;
142 | 		container.cellHeight = 60;
143 | 		container.offset = 3;
144 | 		//container.padding = {left:0, right:0, top:0, bottom:0};
145 | 		
146 | 		container.adjustLayout = function(){
147 | 			for(var i=0; i<this.items.length; i++){
148 | 				var item = this.items[i];
149 | 				var row = Math.floor(i / this.cols);
150 | 				var col = i % this.cols;
151 | 				item.x = this.x + col * container.cellWidth;
152 | 				item.y = this.y + row * container.cellHeight;		
153 | 			}
154 | 		};
155 | 
156 | 		container.add = function(e){
157 | 			var capacity = this.items.length;
158 | 			if(capacity == this.rows * this.cols) return;
159 | 			this.items.push(e);
160 | 			e.parentContainer = this;
161 | 			this.adjustLayout();
162 | 		};
163 | 
164 | 		container.draw = function(ctx){
165 | 			container.width = container.cols * container.cellWidth;
166 | 			container.height = container.rows * container.cellHeight;
167 | 			ctx.save();
168 | 			ctx.beginPath();
169 | 			ctx.shadowBlur = 12;
170 | 			ctx.shadowColor = 'rgba(0,0,0,0.9)';
171 | 			ctx.shadowOffsetX = 5;
172 | 			ctx.shadowOffsetY = 3;
173 | 			ctx.fillStyle = 'rgba(' + this.style.fillStyle + ',' + this.alpha + ')';
174 | 
175 | 			var r = 0;
176 | 			if(container.isFocus()){
177 | 				r = this.offset;
178 | 				ctx.shadowColor = 'rgba(0,0,200, 1)';
179 | 				ctx.fillRect(this.x-r, this.y-r, this.width+r*2, this.height+r*2);
180 | 			}else{
181 | 				ctx.shadowColor = 'rgba(0,0,0,0.5)';
182 | 				ctx.fillRect(this.x, this.y, this.width, this.height);
183 | 			}
184 | 			/*
185 | 			 ctx.moveTo(this.x-r, this.y -r);
186 | 			 ctx.lineTo(this.x-r + 10, this.y - 10 -r);
187 | 			 ctx.lineTo(this.x-r + 10 + this.width, this.y - 10-r);
188 | 			 ctx.lineTo(this.x-r + 10 + this.width, this.y + this.height - 10 -r);
189 | 			 ctx.lineTo(this.x-r + this.width, this.y + this.height -r);
190 | 
191 | 			 ctx.moveTo(this.x-r + 10 + this.width, this.y - 10 -r);
192 | 			 ctx.lineTo(this.x-r + this.width, this.y -r);
193 | 			 
194 | 			 for(var i=0; i<=this.rows; i++){
195 | 			 for(var j=0; j<this.cols; j++){
196 | 			 ctx.moveTo(this.x-r, this.y + i * this.cellHeight - r);
197 | 			 ctx.lineTo(this.x-r+this.width, this.y+ i * this.cellHeight-r);
198 | 			 }
199 | 			 }
200 | 			 for(var i=0; i<=this.rows; i++){
201 | 			 for(var j=0; j<=this.cols; j++){
202 | 			 ctx.moveTo(this.x-r + j * this.cellWidth, this.y + r);
203 | 			 ctx.lineTo(this.x-r + j * this.cellWidth, this.y+ i * this.cellHeight - r);
204 | 			 }
205 | 			 }*/
206 | 
207 | 			ctx.stroke();
208 | 			ctx.closePath();
209 | 			ctx.restore();
210 | 		};
211 | 		return container;
212 | 	}
213 | 
214 | 	function OneItemContainer(){
215 | 		var container = new JTopo.GridContainer();
216 | 		container.rows = 1;
217 | 		container.cols = 1;
218 | 		container.cellWidth = 50;
219 | 		container.cellHeight = 50;
220 | 		
221 | 		container.setDragable(false);
222 | 
223 | 		container.style.fillStyle = '0,100,100';
224 | 		container.alpha = 0.5;
225 | 
226 | 		return container;
227 | 	};
228 | 
229 | 	JTopo.Container = Container;
230 | 	JTopo.GridContainer = GridContainer;
231 | 	JTopo.OneItemContainer = OneItemContainer;
232 | 	JTopo.GhomboidContainer = GhomboidContainer;
233 | 	
234 | })(JTopo);
235 | 


--------------------------------------------------------------------------------
/src/jtopo.element.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * JTopo (Javascript topology libraries) 0.2.0
  3 |  * https://github.com/wondery/jtopo
  4 |  * 
  5 |  * Copyright (c) 2013 wondery
  6 |  * Released under the LGPL license, Version 3.0
  7 |  * http://www.gnu.org/licenses/lgpl.html
  8 |  *
  9 |  * Author: wondery
 10 |  * Email: jtopology@163.com
 11 |  */
 12 | 
 13 | (function(JTopo){
 14 | 
 15 | 	var Element = function(){
 16 | 	};
 17 | 
 18 | 	Element.prototype.draw = function(){};
 19 | 
 20 | 	Element.prototype.getId = function(){
 21 | 		return this.id;
 22 | 	};
 23 | 
 24 | 	Element.prototype.setId = function(i){
 25 | 		this.id = i;
 26 | 		return this;
 27 | 	};
 28 | 
 29 | 	Element.prototype.getFloatMenu = function(){
 30 | 		return this.floatMenu;
 31 | 	};
 32 | 
 33 | 	Element.prototype.setFloatMenu = function(m){
 34 | 		this.floatMenu = m;
 35 | 		return this;
 36 | 	};
 37 | 
 38 | 	Element.prototype.isFloatMenuVisible = function(){
 39 | 		return this.floatMenuVisible;
 40 | 	};
 41 | 
 42 | 	Element.prototype.setFloatMenuVisible = function(v){
 43 | 		this.floatMenuVisible = v;
 44 | 		return this;
 45 | 	};
 46 | 
 47 | 	Element.prototype.setX = function(x){
 48 | 		this.x = x;
 49 | 		return this;
 50 | 	};
 51 | 
 52 | 	Element.prototype.setY = function(y){
 53 | 		this.y = y;
 54 | 		return this;
 55 | 	};
 56 | 
 57 | 	Element.prototype.getX = function() {
 58 | 		return this.x;
 59 | 	};
 60 | 
 61 | 	Element.prototype.getY = function() {
 62 | 		return this.y;
 63 | 	};
 64 | 
 65 | 	Element.prototype.getLocation = function(x, y) {
 66 | 		return {x: this.getX(), y: this.getY()};
 67 | 	};
 68 | 
 69 | 	Element.prototype.setLocation = function(x, y) {
 70 | 		this.setX(x);
 71 | 		this.setY(y);
 72 | 		return this;
 73 | 	};
 74 | 
 75 | 	Element.prototype.getWidth = function() {
 76 | 		return this.width;
 77 | 	};
 78 | 
 79 | 	Element.prototype.setWidth = function(width) {
 80 | 		this.width = width;
 81 | 		return this;
 82 | 	};
 83 | 
 84 | 	Element.prototype.getHeight = function() {
 85 | 		return this.height;
 86 | 	};
 87 | 
 88 | 	Element.prototype.setHeight = function(height) {
 89 | 		this.height = height;
 90 | 		return this;
 91 | 	};
 92 | 
 93 | 	Element.prototype.getSize = function(){
 94 | 		return {width: this.getWidth(), height: this.getHeight()};
 95 | 	};
 96 | 
 97 | 	Element.prototype.setSize = function(width, height){
 98 | 		this.setWidth(width);
 99 | 		this.setHeight(height);
100 | 		return this;
101 | 	};
102 | 
103 | 	Element.prototype.setBound = function(x, y, width, height){
104 | 		this.setLocation(x, y);
105 | 		this.setSize(width, height);
106 | 		return this;
107 | 	};
108 | 
109 | 	Element.prototype.getBound = function(){
110 | 		return {
111 | 			left: this.getX(), top: this.getY(), 
112 | 			right: this.getX() + this.getWidth(), bottom: this.getY() +this.getHeight()
113 | 		};
114 | 	};
115 | 
116 | 	Element.prototype.isVisible = function(){
117 | 		return this.visible;
118 | 	};
119 | 
120 | 	Element.prototype.setVisible = function(v){
121 | 		this.visible = v;
122 | 		return this;
123 | 	};
124 | 
125 | 	Element.prototype.isDragable = function(){
126 | 		return this.dragable;
127 | 	};
128 | 
129 | 	Element.prototype.setDragable = function(d){
130 | 		this.dragable = d;
131 | 		return this;
132 | 	};
133 | 
134 | 	Element.prototype.isSelected = function(){
135 | 		return this.selected;
136 | 	};
137 | 
138 | 	Element.prototype.setSelected = function(s){
139 | 		this.selected = s;
140 | 		return this;
141 | 	};
142 | 
143 | 	Element.prototype.isFocus = function(){
144 | 		return this.focus;
145 | 	};
146 | 
147 | 	Element.prototype.setFocus = function(f){
148 | 		this.focus = f;
149 | 		return this;
150 | 	};
151 | 
152 | 	Element.prototype.onFocus = function(){
153 | 		this.setFocus(true);
154 | 		return this;
155 | 	};
156 | 
157 | 	Element.prototype.loseFocus = function(){
158 | 		this.setFocus(false);
159 | 		return this;
160 | 	};
161 | 
162 | 	Element.prototype.setTip = function(tip){
163 | 		this.tip = tip;
164 | 		return this;
165 | 	};
166 | 
167 | 	Element.prototype.getTip = function(){
168 | 		return this.tip;
169 | 	};
170 | 
171 | 	Element.prototype.onMousedown = function(e){
172 | 		console.log(this);
173 | 		this.setSelected(true);
174 | 		this.mousedownX = e.x;
175 | 		this.mousedownY = e.y;
176 | 		this.selectedLocation = {x: this.getX(), y:this.getY()};
177 | 	};
178 | 
179 | 	Element.prototype.onMouseselected = function(){
180 | 		this.setSelected(true);
181 | 		this.selectedLocation = {x: this.getX(), y:this.getY()};
182 | 	};
183 | 
184 | 	Element.prototype.goBack = function(box){
185 | 	};
186 | 
187 | 	Element.prototype.onMouseup = function(e){
188 | 		this.mouseupX = e.x;
189 | 		this.mouseupY = e.y;
190 | 		var x = e.x;
191 | 		var y = e.y;
192 | 		var box = e.context;
193 | 
194 | 		if(this.gravitate){
195 | 			for (var i = 0; i < box.links.length; i++) {
196 | 				var link = box.links[i];
197 | 				if(this === link.nodeB){
198 | 					var newNodeA = box.findCloserNode(this, this.gravitate);
199 | 					var gravitateMsg = {
200 | 						link: link, target:this,
201 | 						oldNode: this.lastParentNode, newNode: newNodeA
202 | 					};
203 | 					if(newNodeA && newNodeA.layout && newNodeA.layout.auto == true){
204 | 						box.layoutNode(newNodeA);
205 | 					}
206 | 					if(this.lastParentNode && this.lastParentNode.layout && this.lastParentNode.layout.auto == true){
207 | 						box.layoutNode(this.lastParentNode);
208 | 					}
209 | 					box.publish('gravitate', $.extend({}, gravitateMsg));
210 | 					break;
211 | 				}
212 | 			}
213 | 		}
214 | 
215 | 		if(this.outContainer &&	this.isIndrag){
216 | 			for (var j = 0; j < box.containers.length; j++) {
217 | 				var c = box.containers[j];
218 | 				if(! this.inContainer(c)) continue;
219 | 				if(this.parentContainer !== c) continue;
220 | 				if (this.x + this.width < c.x || this.x > c.x+c.width || this.y+this.height < c.y || this.y>c.y + c.height){
221 | 					this.parentContainer.remove(this);
222 | 					break;
223 | 				}
224 | 			}
225 | 		}
226 | 
227 | 		if(this.inContainer && 	this.isOnMousedrag){
228 | 			for (var j = 0; j < box.containers.length; j++) {
229 | 				var group = box.containers[j];
230 | 				if(! this.inContainer(group)) continue;
231 | 				if (x > group.x && x < group.x+group.width && y>group.y && y<group.y+group.height){
232 | 					if(this.parentContainer){
233 | 						this.parentContainer.remove(this);
234 | 					}
235 | 					group.add(this);
236 | 					break;
237 | 				}
238 | 			}
239 | 		}
240 | 		if(this.layout && this.layout.auto == true){
241 | 			box.layoutNode(this);
242 | 		}
243 | 		this.isOnMousedrag = false;
244 | 	};
245 | 
246 | 	Element.prototype.cancleSelected = function(){
247 | 		this.setSelected(false);
248 | 		this.selectedLocation = null;
249 | 	};
250 | 
251 | 	Element.prototype.onMouseover = function(e){
252 | 		this.isOnMousOver = true;
253 | 		this.isTipVisible = true;
254 | 		this.setFocus(true);
255 | 	};
256 | 
257 | 	Element.prototype.onMouseout = function(e){
258 | 		this.isOnMousOver = false;
259 | 		this.isTipVisible = false;
260 | 		this.setFocus(false);
261 | 	};
262 | 
263 | 	Element.prototype.onMousedrag = function(e){
264 | 		this.isOnMousedrag = true;
265 | 		var dx = e.dx;
266 | 		var dy = e.dy;
267 | 		var x = e.x;
268 | 		var y = e.y;
269 | 
270 | 		var newX = this.selectedLocation.x + dx;
271 | 		var newY = this.selectedLocation.y + dy;
272 | 		this.setLocation(newX, newY);
273 | 		var box = e.context;
274 | 
275 | 		if(this.gravitate){
276 | 			for (var i = 0; i < box.links.length; i++) {
277 | 				var link = box.links[i];
278 | 				if(this === link.nodeB){
279 | 					var newNodeA = box.findCloserNode(this, this.gravitate);
280 | 					if(newNodeA != null && newNodeA !== link.nodeA){
281 | 						if(this.lastParentNode == null){
282 | 							this.lastParentNode = link.nodeA;
283 | 						}
284 | 						link.nodeA = newNodeA;
285 | 						break;
286 | 					}
287 | 				}
288 | 			}
289 | 		}
290 | 
291 | 		if(this.inContainer){
292 | 			for (var j = 0; j < box.containers.length; j++) {
293 | 				var group = box.containers[j];
294 | 				if(! this.inContainer(group)) continue;
295 | 				if (x > group.x && x < group.x+group.width && y>group.y && y<group.y+group.height){
296 | 					group.setFocus(true);
297 | 				}else{
298 | 					group.setFocus(false);
299 | 				}
300 | 			}
301 | 		}
302 | 		this.isIndrag = true;
303 | 	};
304 | 
305 | 	JTopo.Element = Element;
306 | 
307 | })(JTopo);
308 | 


--------------------------------------------------------------------------------
/src/jtopo.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * JTopo (Javascript topology libraries) 0.2.0
 3 |  * https://github.com/wondery/jtopo
 4 |  * 
 5 |  * Copyright (c) 2013 wondery
 6 |  * Released under the LGPL license, Version 3.0
 7 |  * http://www.gnu.org/licenses/lgpl.html
 8 |  *
 9 |  * Author: wondery
10 |  * Email: jtopology@163.com
11 |  */
12 | 
13 | var JTopo = {
14 | 	version: '0.3.0'
15 | };
16 | 


--------------------------------------------------------------------------------
/src/jtopo.layout.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * JTopo (Javascript topology libraries) 0.2.0
 3 |  * https://github.com/wondery/jtopo
 4 |  * 
 5 |  * Copyright (c) 2013 wondery
 6 |  * Released under the LGPL license, Version 3.0
 7 |  * http://www.gnu.org/licenses/lgpl.html
 8 |  *
 9 |  * Author: wondery
10 |  * Email: jtopology@163.com
11 |  */
12 | 
13 | (function(JTopo){
14 | 
15 | 	function getStarPositions(x, y, count, radius, beginDegree, endDegree){
16 | 		var start = beginDegree ? beginDegree : 0;
17 | 		var end = endDegree ? endDegree : 2*Math.PI;
18 | 		var total = end - start;
19 | 		var degree = total / count;
20 | 		var result = [];
21 | 		
22 | 		start += degree/2;
23 | 		for(var i=start; i<=end; i+=degree){
24 | 			var dx = x + Math.cos(i) * radius;
25 | 			var dy = y + Math.sin(i) * radius;
26 | 			result.push({x: dx, y: dy});
27 | 		}
28 | 		return result;
29 | 	} 
30 | 
31 | 	function getTreePositions(x, y, count, horizontal, vertical, dir){
32 | 		var direction = dir || 'bottom';
33 | 		var result = [];	
34 | 		
35 | 		if(direction == 'bottom'){
36 | 			var start = x - (count/2) * horizontal + horizontal/2;
37 | 			for(var i=0; i<=count; i++){	   
38 | 				result.push({x: start + i*horizontal , y: y + vertical});
39 | 			}
40 | 		}else if(direction == 'top'){
41 | 			var start = x - (count/2) * horizontal + horizontal/2;
42 | 			for(var i=0; i<=count; i++){	   
43 | 				result.push({x: start + i*horizontal, y: y - vertical});
44 | 			}
45 | 		}else if(direction == 'right'){
46 | 			var start = y - (count/2) * horizontal + horizontal/2;
47 | 			for(var i=0; i<=count; i++){	   
48 | 				result.push({x: x + vertical, y: start + i*horizontal});
49 | 			}
50 | 		}else if(direction == 'left'){
51 | 			var start = y - (count/2) * horizontal + horizontal /2;
52 | 			for(var i=0; i<=count; i++){	   
53 | 				result.push({x: x - vertical, y: start + i*horizontal});
54 | 			}
55 | 		}
56 | 		return result;
57 | 	} 
58 | 
59 | 	function getBusPositions(x, y, count, r, vertical, dir){
60 | 		var direction = dir || 'horizontal';//vertical
61 | 		var result = [];
62 | 		var mid = Math.round(count/2);
63 | 		var startx = x + r;
64 | 
65 | 		if(direction == 'horizontal'){
66 | 			for(var i=0; i<mid; i++){	   
67 | 				result.push({x: startx + i*r, y: y - vertical});
68 | 			}
69 | 			for(var i=mid; i<=count; i++){	   
70 | 				result.push({x: startx + i*r, y: y + vertical});
71 | 			}
72 | 		}else if(direction == 'vertical'){
73 | 
74 | 		}
75 | 		return result;
76 | 	} 
77 | 
78 | 	JTopo.Layout = {
79 | 		getStarPositions : getStarPositions,
80 | 		getTreePositions : getTreePositions,
81 | 		getBusPositions : getBusPositions
82 | 	};
83 | 
84 | })(JTopo);
85 | 


--------------------------------------------------------------------------------
/src/jtopo.link.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * JTopo (Javascript topology libraries) 0.2.0
  3 |  * https://github.com/wondery/jtopo
  4 |  * 
  5 |  * Copyright (c) 2013 wondery
  6 |  * Released under the LGPL license, Version 3.0
  7 |  * http://www.gnu.org/licenses/lgpl.html
  8 |  *
  9 |  * Author: wondery
 10 |  * Email: jtopology@163.com
 11 |  * Date: 2013-07-22
 12 |  */
 13 | 
 14 | (function(JTopo){
 15 | 
 16 | 	function Link(nodeA, nodeB) {
 17 | 		this.nodeA = nodeA;
 18 | 		this.nodeB = nodeB;
 19 | 		this.style = {strokeStyle: '116, 166, 250', alpha: 1, lineWidth: 2};
 20 | 	};
 21 | 
 22 | 	Link.prototype = new JTopo.Element();
 23 | 
 24 | 	Link.prototype.draw = function (ctx) {
 25 | 		ctx.save();
 26 | 		ctx.beginPath();
 27 | 		ctx.strokeStyle = 'rgba(' + this.style.strokeStyle + ',' + this.style.alpha + ')';
 28 | 		ctx.lineWidth = this.style.lineWidth;
 29 | 		ctx.moveTo(this.nodeA.x + this.nodeA.width / 2, this.nodeA.y + this.nodeA.height / 2);
 30 | 		ctx.lineTo(this.nodeB.x + this.nodeB.width / 2, this.nodeB.y + this.nodeB.height / 2);
 31 | 		ctx.stroke();
 32 | 		ctx.closePath();
 33 | 		ctx.restore();
 34 | 	};
 35 | 
 36 | 	Link.prototype.getLength = function(){
 37 | 		return getDistance(this.nodeA , this.nodeB);
 38 | 	};
 39 | 
 40 | 	function FoldLink(nodeA, nodeB) {
 41 | 		var link = new JTopo.Link(nodeA, nodeB);
 42 | 		link.fold = 'x';
 43 | 		link.draw = function (ctx) {
 44 | 			var x1 = this.nodeA.x;
 45 | 			var y1 = this.nodeA.y;
 46 | 			var x2 = this.nodeB.x;
 47 | 			var y2 = this.nodeB.y;
 48 | 			var mx = x1;
 49 | 			var my = y1;
 50 | 			
 51 | 			if(x1 == x2 || y1 == y2){
 52 | 				ctx.save();
 53 | 				ctx.beginPath();
 54 | 				ctx.strokeStyle = 'rgba(' + this.style.strokeStyle + ',' + this.style.alpha + ')';
 55 | 				ctx.lineWidth = this.style.lineWidth;
 56 | 				ctx.moveTo(this.nodeA.x + this.nodeA.width / 2, this.nodeA.y + this.nodeA.height / 2);
 57 | 				ctx.lineTo(this.nodeB.x + this.nodeB.width / 2, this.nodeB.y + this.nodeB.height / 2);
 58 | 				ctx.closePath();
 59 | 				ctx.stroke();
 60 | 				ctx.restore();
 61 | 			}else{
 62 | 				if(this.fold == 'x'){
 63 | 					mx = x1 + (x2 - x1);
 64 | 				}else{
 65 | 					my = y1 + (y2 - y1);
 66 | 				}
 67 | 				ctx.save();
 68 | 				ctx.beginPath();
 69 | 				ctx.strokeStyle = 'rgba(' + this.style.strokeStyle + ',' + this.style.alpha + ')';
 70 | 				ctx.lineWidth = this.style.lineWidth;
 71 | 				ctx.moveTo(x1 + this.nodeA.width / 2, y1+ this.nodeA.height / 2);
 72 | 				ctx.lineTo(mx + this.nodeA.width / 2, my+ this.nodeA.height / 2);
 73 | 				ctx.lineTo(x2 + this.nodeA.width / 2, y2+ this.nodeA.height / 2);
 74 | 				ctx.stroke();		
 75 | 				ctx.closePath();
 76 | 				ctx.restore();
 77 | 			}
 78 | 		};
 79 | 
 80 | 		return link;
 81 | 	};
 82 | 
 83 | 
 84 | 	function CurveLink(nodeA, nodeB) {
 85 | 		var link = new JTopo.Link(nodeA, nodeB);
 86 | 		link.curve = 0.5; 
 87 | 		link.draw = function (ctx) {
 88 | 			var x1 = this.nodeA.x;
 89 | 			var y1 = this.nodeA.y;
 90 | 			var x2 = this.nodeB.x;
 91 | 			var y2 = this.nodeB.y;
 92 | 			var mx = x1;
 93 | 			var my = y1;
 94 | 
 95 | 			mx = x1 + (x2 - x1);
 96 | 			my = y1 + (y2 - y1);
 97 | 
 98 | 			mx *= this.curve;
 99 | 			my *= this.curve;
100 | 
101 | 			ctx.save();
102 | 			ctx.beginPath();
103 | 			ctx.strokeStyle = 'rgba(' + this.style.strokeStyle + ',' + this.style.alpha + ')';
104 | 			ctx.lineWidth = this.style.lineWidth;
105 | 			ctx.moveTo(x1 + this.nodeA.width / 2, y1+ this.nodeA.height / 2);
106 | 			ctx.quadraticCurveTo(mx + this.nodeA.width / 2, my+ this.nodeA.height / 2, 
107 | 								 x2 + this.nodeA.width / 2, y2+ this.nodeA.height / 2);
108 | 			ctx.stroke();		
109 | 			ctx.closePath();
110 | 			ctx.restore();
111 | 		};
112 | 		return link;
113 | 	};
114 | 
115 | 	function ArrowsLink(nodeA, nodeB){
116 | 		var link = new JTopo.Link(nodeA, nodeB);
117 | 		link.angle = 0.4;
118 | 		link.offset = 30;
119 | 		//link.style.fillStyle = '116, 166, 250';
120 | 		link.draw = function(ctx){
121 | 			ctx.save();
122 | 			ctx.beginPath();
123 | 			ctx.strokeStyle = 'rgba(' + this.style.strokeStyle + ',' + this.style.alpha + ')';
124 | 			ctx.fillStyle = 'rgba(' + this.style.fillStyle + ',' + this.style.alpha + ')';
125 | 			ctx.lineWidth = this.style.lineWidth;
126 | 			
127 | 			var ta = {x: this.nodeA.x + this.nodeA.width/2, y:this.nodeA.y + this.nodeA.height/2};
128 | 			var t = {x: this.nodeB.x + this.nodeB.width/2, y:this.nodeB.y + this.nodeB.height/2};
129 | 
130 | 			var angle = Math.atan2(ta.y - t.y, ta.x - t.x);
131 | 			t.x = t.x + Math.cos(angle) * this.nodeB.width/2;
132 | 			t.y = t.y + Math.sin(angle) * this.nodeB.height/2;
133 | 			
134 | 			var da = 0.4;
135 | 			var pointA = {x: t.x + Math.cos(angle-da) * this.offset,
136 | 						  y: t.y + Math.sin(angle-da) * this.offset};
137 | 
138 | 			var pointB = {x: t.x + Math.cos(angle+da) * this.offset,
139 | 						  y: t.y + Math.sin(angle+da) * this.offset};
140 | 
141 | 			ctx.moveTo(this.nodeA.x + this.nodeA.width / 2, this.nodeA.y + this.nodeA.height / 2);
142 | 			//ctx.lineTo(this.nodeB.x + this.nodeB.width / 2, this.nodeB.y + this.nodeB.height / 2);
143 | 			ctx.lineTo(pointA.x + (pointB.x - pointA.x)/2, pointA.y + (pointB.y - pointA.y)/2);
144 | 
145 | 			ctx.moveTo(pointA.x , pointA.y);
146 | 			ctx.lineTo(t.x, t.y);
147 | 			ctx.lineTo(pointB.x, pointB.y);
148 | 			ctx.lineTo(pointA.x , pointA.y);
149 | 			if(this.style.fillStyle != null){
150 | 				ctx.fill();
151 | 			}
152 | 			ctx.stroke();
153 | 			ctx.closePath();
154 | 			ctx.restore();		
155 | 		};
156 | 		return link;
157 | 	}
158 | 
159 | 	function ArrowsFoldLink(nodeA, nodeB) {
160 | 		var link = new JTopo.Link(nodeA, nodeB);
161 | 		link.fold = 'x';
162 | 		link.angle = 0.4;
163 | 		link.offset = 30;
164 | 
165 | 		link.draw = function (ctx) {
166 | 			var x1 = this.nodeA.x;
167 | 			var y1 = this.nodeA.y;
168 | 			var x2 = this.nodeB.x;
169 | 			var y2 = this.nodeB.y;
170 | 			var mx = x1;
171 | 			var my = y1;
172 | 			
173 | 			if(x1 == x2 || y1 == y2){
174 | 				ctx.save();
175 | 				ctx.beginPath();
176 | 				ctx.strokeStyle = 'rgba(' + this.style.strokeStyle + ',' + this.style.alpha + ')';
177 | 				ctx.lineWidth = this.style.lineWidth;
178 | 
179 | 				var ta = {x: this.nodeA.x + this.nodeA.width/2, y:this.nodeA.y + this.nodeA.height/2};
180 | 				var t = {x: this.nodeB.x + this.nodeB.width/2, y:this.nodeB.y + this.nodeB.height/2};
181 | 
182 | 				var angle = Math.atan2(ta.y - t.y, ta.x - t.x);
183 | 				t.x = t.x + Math.cos(angle) * this.nodeB.width/2;
184 | 				t.y = t.y + Math.sin(angle) * this.nodeB.height/2;
185 | 				
186 | 				var da = 0.4;
187 | 				var pointA = {x: t.x + Math.cos(angle-da) * this.offset,
188 | 							  y: t.y + Math.sin(angle-da) * this.offset};
189 | 
190 | 				var pointB = {x: t.x + Math.cos(angle+da) * this.offset,
191 | 							  y: t.y + Math.sin(angle+da) * this.offset};
192 | 
193 | 				ctx.lineTo(pointA.x + (pointB.x - pointA.x)/2, pointA.y + (pointB.y - pointA.y)/2);
194 | 
195 | 				ctx.moveTo(pointA.x , pointA.y);
196 | 				ctx.lineTo(t.x, t.y);
197 | 				ctx.lineTo(pointB.x, pointB.y);
198 | 				ctx.lineTo(pointA.x , pointA.y);
199 | 				if(this.style.fillStyle != null){
200 | 					ctx.fill();
201 | 				}
202 | 				ctx.closePath();
203 | 				ctx.stroke();
204 | 				ctx.restore();
205 | 			}else{
206 | 				if(this.fold == 'x'){
207 | 					mx = x1 + (x2 - x1);
208 | 				}else{
209 | 					my = y1 + (y2 - y1);
210 | 				}
211 | 				ctx.save();
212 | 				ctx.beginPath();
213 | 				ctx.strokeStyle = 'rgba(' + this.style.strokeStyle + ',' + this.style.alpha + ')';
214 | 				ctx.lineWidth = this.style.lineWidth;
215 | 				ctx.moveTo(x1 + this.nodeA.width / 2, y1+ this.nodeA.height / 2);
216 | 				ctx.lineTo(mx + this.nodeA.width / 2, my+ this.nodeA.height / 2);
217 | 
218 | 				var ta = {x: mx + this.nodeA.width / 2, y: my+ this.nodeA.height / 2};
219 | 				var t = {x: this.nodeB.x + this.nodeB.width/2, y:this.nodeB.y + this.nodeB.height/2};
220 | 
221 | 				var angle = Math.atan2(ta.y - t.y, ta.x - t.x);
222 | 				t.x = t.x + Math.cos(angle) * this.nodeB.width/2;
223 | 				t.y = t.y + Math.sin(angle) * this.nodeB.height/2;
224 | 				
225 | 				var da = 0.4;
226 | 				var pointA = {x: t.x + Math.cos(angle-da) * this.offset,
227 | 							  y: t.y + Math.sin(angle-da) * this.offset};
228 | 
229 | 				var pointB = {x: t.x + Math.cos(angle+da) * this.offset,
230 | 							  y: t.y + Math.sin(angle+da) * this.offset};
231 | 				
232 | 				ctx.lineTo(pointA.x + (pointB.x - pointA.x)/2, pointA.y + (pointB.y - pointA.y)/2);
233 | 
234 | 				ctx.moveTo(pointA.x , pointA.y);
235 | 				ctx.lineTo(t.x, t.y);
236 | 				ctx.lineTo(pointB.x, pointB.y);
237 | 				ctx.lineTo(pointA.x , pointA.y);
238 | 
239 | 				if(this.style.fillStyle != null){
240 | 					ctx.fill();
241 | 				}
242 | 				ctx.stroke();		
243 | 				ctx.closePath();
244 | 				ctx.restore();
245 | 			}
246 | 		};
247 | 
248 | 		return link;
249 | 	};
250 | 
251 | 
252 | 	JTopo.Link = Link;
253 | 	JTopo.FoldLink = FoldLink;
254 | 	JTopo.CurveLink = CurveLink;
255 | 	JTopo.ArrowsLink = ArrowsLink;
256 | 	JTopo.ArrowsFoldLink = ArrowsFoldLink;
257 | })(JTopo);
258 | 


--------------------------------------------------------------------------------
/src/jtopo.util.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * JTopo (Javascript topology libraries) 0.2.0
  3 |  * https://github.com/wondery/jtopo
  4 |  * 
  5 |  * Copyright (c) 2013 wondery
  6 |  * Released under the LGPL license, Version 3.0
  7 |  * http://www.gnu.org/licenses/lgpl.html
  8 |  *
  9 |  * Author: wondery
 10 |  * Email: jtopology@163.com
 11 |  */
 12 | 
 13 | (function(JTopo){
 14 | 	function MessageBus(name){
 15 | 		var _self = this;
 16 | 		this.name = name;
 17 | 		this.messageMap = {};
 18 | 		this.messageCount = 0;
 19 | 		
 20 | 		this.subscribe = function(topic, action){
 21 | 			if(! typeof topic == 'string'){
 22 | 				subscribes(topic, action);
 23 | 			}else{
 24 | 				var actions = _self.messageMap[topic];
 25 | 				if(actions == null){
 26 | 					_self.messageMap[topic] = [];
 27 | 				}
 28 | 				_self.messageMap[topic].push(action);
 29 | 				_self.messageCount++;
 30 | 			}
 31 | 		};
 32 | 
 33 | 		function subscribes(topics, action){
 34 | 			var results = [];
 35 | 			var counter = 0;
 36 | 			for(var i=0; i<topics.length; i++){
 37 | 				var topic = topics[i];
 38 | 				var actions = _self.messageMap[topic];
 39 | 				if(actions == null){
 40 | 					_self.messageMap[topic] = [];
 41 | 				}
 42 | 				function actionProxy(result){
 43 | 					results[i] = result;
 44 | 					counter++;
 45 | 					if(counter == topics.length){
 46 | 						counter = 0;
 47 | 						return action.apply(null, results);
 48 | 					}else{
 49 | 						return null;
 50 | 					}
 51 | 				};
 52 | 				
 53 | 				_self.messageMap[topic].push(actionProxy);
 54 | 				_self.messageCount++;			
 55 | 			}	
 56 | 		};
 57 | 
 58 | 		this.unsubscribe = function(topic){
 59 | 			var actions = _self.messageMap[topic];
 60 | 			if(actions != null){
 61 | 				_self.messageMap[topic] = null;
 62 | 				delete(_self.messageMap[topic]);
 63 | 				_self.messageCount--;
 64 | 			}
 65 | 		};
 66 | 
 67 | 		this.publish = function(topic, data, concurrency){
 68 | 			var actions = _self.messageMap[topic];
 69 | 			if(actions != null){
 70 | 				for(var i=0; i<actions.length; i++){
 71 | 					if(concurrency){
 72 | 						(function(action, data){
 73 | 							setTimeout(function(){action(data);}, 10);
 74 | 						})(actions[i], data);
 75 | 					}else{
 76 | 						actions[i](data);
 77 | 					}
 78 | 				}
 79 | 			}
 80 | 		};
 81 | 	}
 82 | 
 83 | 	function getDistance(p1 , p2){
 84 |  		var dx = p2.x - p1.x;
 85 | 		var dy = p2.y - p1.y;
 86 | 		return Math.sqrt(dx * dx + dy * dy);
 87 | 	}
 88 | 
 89 | 	Array.prototype.del=function(n){ 
 90 | 		if(typeof n != 'number'){
 91 | 			for(var i=0; i<this.length; i++){
 92 | 				if(this[i] === n){
 93 | 					return this.slice(0,i).concat(this.slice(i+1,this.length));  
 94 | 				}
 95 | 			}
 96 | 			return this;
 97 | 		}else{
 98 | 			if(n<0)	return this;  
 99 | 			return this.slice(0,n).concat(this.slice(n+1,this.length));  
100 | 		}
101 | 	};
102 | 
103 | 	if(! [].indexOf){ //IE
104 | 		Array.prototype.indexOf = function(data){
105 | 			for(var i=0; i<this.length; i++){
106 | 				if(this[i] === data) return i;
107 | 			}
108 | 			return -1;
109 | 		};
110 | 	}
111 | 
112 | 	if(! window.console){ //IE
113 | 		window.console = {
114 | 			log: function(msg){},
115 | 			info: function(msg){},
116 | 			debug: function(msg){},
117 | 			warn: function(msg){},
118 | 			error: function(msg){}
119 | 		};
120 | 	}
121 | 
122 | 	function mouseCoords(event){ 
123 | 		if(event.pageX || event.pageY){ 
124 | 			return {x:event.pageX, y:event.pageY}; 
125 | 		} 
126 | 		return { 
127 | 			x:event.clientX + document.body.scrollLeft - document.body.clientLeft, 
128 | 			y:event.clientY + document.body.scrollTop - document.body.clientTop 
129 | 		}; 
130 | 	}
131 | 
132 | 	function getXY(box, event){
133 | 		event = event || mouseCoords(window.event); 
134 | 		var x = document.body.scrollLeft + (event.x || event.layerX);
135 | 		var y = document.body.scrollTop + (event.y || event.layerY) ;
136 | 		return {x: x-box.offset.left, y: y-box.offset.top};
137 | 	}
138 | 
139 | 	function rotatePoint(bx, by, x, y, angle){
140 | 		var dx = x - bx;
141 | 		var dy = y - by;
142 | 		var r = Math.sqrt(dx * dx + dy * dy);
143 | 		var a = Math.atan2(dy , dx) + angle;
144 | 		return {
145 | 			x: bx + Math.cos(a)*r, 
146 | 			y: by + Math.sin(a)*r
147 | 		};
148 | 	}
149 | 
150 | 	function rotatePoints(target, points, angle){
151 | 		var result = [];
152 | 		for(var i=0; i<points.length; i++){
153 | 			var p = rotatePoint(target.x, target.y, points[i].x, points[i].y, angle);
154 | 			result.push(p);
155 | 		}
156 | 		return result;
157 | 	}
158 | 
159 | 	function $foreach(datas, f, dur){
160 | 	   if(datas.length == 0) return;
161 | 	   var n = 0;
162 | 	   function doIt(n){
163 | 		 if(n == datas.length) return;
164 | 		 f(datas[n]);
165 | 		 setTimeout(function(){doIt(++n)}, dur);
166 | 	   }
167 | 	   doIt(n);
168 | 	}
169 | 
170 | 	function $for(i, m, f, dur){
171 | 	   if(m < i) return;
172 | 	   var n = 0;
173 | 	   function doIt(n){
174 | 		 if(n == m) return;
175 | 		 f(m);
176 | 		 setTimeout(function(){doIt(++n)}, dur);
177 | 	   }
178 | 	   doIt(n);
179 | 	}
180 | 
181 | 	JTopo.util = {
182 | 		rotatePoint : rotatePoint,
183 | 		rotatePoints : rotatePoints,
184 | 		getDistance : getDistance,
185 | 		getXY: getXY,
186 | 		mouseCoords: mouseCoords,
187 | 		MessageBus: MessageBus
188 | 	};
189 | 	window.$for = $for;
190 | 	window.$foreach = $foreach;
191 | })(JTopo);
192 | 


--------------------------------------------------------------------------------