<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt Example, handle wire events</title>
<!-- Libs -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" />
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css">
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.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.wireInfos {
position: absolute;
background-color: #AADDFF;
border: 2px solid #3366CC;
z-index: 10;
padding: 10px;
}
</style>
<script>
window.onload = function() {
var layer = new WireIt.Layer({});
// The wire tooltip
var wireInfos = WireIt.cn('div', {className: 'wireInfos'}, {display: 'none'}, "<div id='wireTooltip'></div>");
layer.el.appendChild(wireInfos);
// method to close the tooltip
var closeWireInfos = function(e) {
YAHOO.util.Event.stopEvent(e);
wireInfos.style.display = "none";
};
// close button
var wireClose = WireIt.cn('div', {className: "WireIt-Container-closebutton"});
wireInfos.appendChild(wireClose);
YAHOO.util.Event.addListener(wireClose, 'click', closeWireInfos);
// Generate the tooltip contents
YAHOO.util.Event.onAvailable('wireTooltip', function() {
var el = YAHOO.util.Dom.get('wireTooltip');
el.innerHTML = "Wires properties :<br />name <input type='text'/><br />";
var okButton = WireIt.cn('button', null, null, 'Ok');
el.appendChild(okButton);
YAHOO.util.Event.addListener(okButton, 'click', closeWireInfos);
var cancelLink = WireIt.cn('a', {href: "#"}, null, 'cancel');
el.appendChild(cancelLink);
YAHOO.util.Event.addListener(cancelLink, 'click', closeWireInfos);
});
var wireClick = function(e, params) {
var xy = params[1];
var l = this.element.style.left,
t = this.element.style.top;
var li = parseInt(l.substr(0, l.length-2),10),
ti = parseInt(t.substr(0, t.length-2),10);
wireInfos.style.left = (li+xy[0])+"px";
wireInfos.style.top = (ti+xy[1])+"px";
wireInfos.style.display = "";
},
wireRed = function() {
this.color = 'rgb(255, 0, 0)';
this.redraw();
},
wireBlue = function() {
this.color = 'rgb(173, 216, 230)';
this.redraw();
};
// Generate a random layer
for(var i = 0 ; i < 5 ; i++) {
layer.addContainer({
terminals: [ {direction: [0,1], offsetPosition: {bottom: -13, left: 25}, editable: false }],
title: "Block #"+i,
position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ]
});
}
for(var i = 0 ; i < 7 ; i++) {
var w = layer.addWire({
src: {moduleId: Math.floor(Math.random()*5), terminalId: 0},
tgt: {moduleId: Math.floor(Math.random()*5), terminalId: 0}
});
// Subscribe to the wire events
w.eventMouseIn.subscribe(wireRed, w, true);
w.eventMouseOut.subscribe(wireBlue, w, true);
w.eventMouseClick.subscribe(wireClick, w, true);
}
};
</script>
</head><body></body></html>