Loading...
Helix SwarmHelix Swarm
Loading...

changing_directions.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • changing_directions.html #1
  • View
  • Commits
  • Open Download .zip Download (2 KB) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <html>
  3.  <head>
  4.   <title>WireIt Example, Change Terminal directions</title>
  5.   
  6. <!-- Libs -->
  7. <link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
  8. <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
  9. <script type="text/javascript" src="../lib/excanvas.js"></script>
  10.  
  11. <!-- WireIt -->
  12. <script type="text/javascript" src="../build/wireit-min.js"></script>
  13. <link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
  14.  
  15. <style>
  16. div.bubble {
  17. 	width: 45px; height: 45px;
  18. 	position: relative;
  19. 	z-index: 5;
  20. 	opacity: 0.8;
  21. 	cursor: move;
  22. 	background-image: url(bubble.png);
  23. }
  24. </style>
  25.  
  26. <script>
  27.  
  28. var Bubble = function(id, position) {
  29. 	this.id = id;
  30. 	
  31. 	// Create the main bubble div
  32. 	this.el = WireIt.cn('div', {id: this.id, className: "bubble"});
  33. 	document.body.appendChild(this.el);
  34. 	
  35. 	// Create the 4 terminals
  36. 	var terminalConfigs = [{direction: [-1,-1], offsetPosition: [-10,-10]},
  37. 								  {direction: [1,-1], offsetPosition: [25,-10]},
  38. 								  {direction: [-1,1], offsetPosition: [-10,25]},
  39. 								  {direction: [1,1], offsetPosition: [25,25]}];
  40. 	this.terminals = [];
  41. 	for(i = 0 ; i < 4 ; i++) {
  42. 		this.terminals[i] = new WireIt.Terminal(this.el, terminalConfigs[i]);
  43. 	}					
  44. 	
  45. 	// Make Drag/drop !
  46. 	new WireIt.util.DD(this.terminals,this.el);
  47. 	
  48. 	// Position the bubble
  49. 	if(position) {
  50. 		YAHOO.util.Dom.setXY(this.el, position);
  51. 	}
  52. };
  53.  
  54.  
  55. var Nbubbles = 0;
  56. function createBubble(position) {
  57. 	return new Bubble('bubble'+(Nbubbles++), position);
  58. };
  59.  
  60. window.onload = function() {	
  61. 	var b1 = createBubble([335,60]);
  62. 	var b2 = createBubble([280,150]);
  63. 	var b3 = createBubble([380,150]);
  64. 	var bubbles = [b1,b2,b3];
  65. 	
  66. 	var wires = [ [[0,3],[2,0]] , [[0,2],[1,1]] , [[1,3],[2,2]] , [[0,0],[1,0]], [[1,2],[2,3]] , [[0,1],[2,1]] ];
  67. 	
  68. 	for(var i = 0 ; i < wires.length ; i++) {
  69. 		var wire = wires[i];
  70. 		var src = wire[0];
  71. 		var tgt = wire[1];
  72. 		var w = new WireIt.BezierWire( bubbles[src[0]].terminals[src[1]] , bubbles[tgt[0]].terminals[tgt[1]], document.body);
  73. 		w.redraw();
  74. 	}
  75. 	
  76. };
  77.  
  78. </script>
  79.  </head>
  80.  <body>
  81. 	
  82. 	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
  83. 	
  84. 	<p style="margin: 15px;">Terminal directions can be changed !</p>
  85. 	
  86. 	<button style="margin: 15px;" onclick='createBubble();'>Add a Bubble</button>
  87. 	
  88.  </body>
  89. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/changing_directions.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago