changing_directions.html #1

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • changing_directions.html
  • View
  • Commits
  • Open Download .zip Download (2 KB)
<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Change Terminal directions</title>
  
<!-- Libs -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/excanvas.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../build/wireit-min.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />

<style>
div.bubble {
	width: 45px; height: 45px;
	position: relative;
	z-index: 5;
	opacity: 0.8;
	cursor: move;
	background-image: url(bubble.png);
}
</style>

<script>

var Bubble = function(id, position) {
	this.id = id;
	
	// Create the main bubble div
	this.el = WireIt.cn('div', {id: this.id, className: "bubble"});
	document.body.appendChild(this.el);
	
	// Create the 4 terminals
	var terminalConfigs = [{direction: [-1,-1], offsetPosition: [-10,-10]},
								  {direction: [1,-1], offsetPosition: [25,-10]},
								  {direction: [-1,1], offsetPosition: [-10,25]},
								  {direction: [1,1], offsetPosition: [25,25]}];
	this.terminals = [];
	for(i = 0 ; i < 4 ; i++) {
		this.terminals[i] = new WireIt.Terminal(this.el, terminalConfigs[i]);
	}					
	
	// Make Drag/drop !
	new WireIt.util.DD(this.terminals,this.el);
	
	// Position the bubble
	if(position) {
		YAHOO.util.Dom.setXY(this.el, position);
	}
};


var Nbubbles = 0;
function createBubble(position) {
	return new Bubble('bubble'+(Nbubbles++), position);
};

window.onload = function() {	
	var b1 = createBubble([335,60]);
	var b2 = createBubble([280,150]);
	var b3 = createBubble([380,150]);
	var bubbles = [b1,b2,b3];
	
	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]] ];
	
	for(var i = 0 ; i < wires.length ; i++) {
		var wire = wires[i];
		var src = wire[0];
		var tgt = wire[1];
		var w = new WireIt.BezierWire( bubbles[src[0]].terminals[src[1]] , bubbles[tgt[0]].terminals[tgt[1]], document.body);
		w.redraw();
	}
	
};

</script>
 </head>
 <body>
	
	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
	
	<p style="margin: 15px;">Terminal directions can be changed !</p>
	
	<button style="margin: 15px;" onclick='createBubble();'>Add a Bubble</button>
	
 </body>
</html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s)
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/changing_directions.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop.