<?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">< 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>