<?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/excanvas.js"></script>
<!-- WireIt -->
<script type="text/javascript" src="../build/wireit-min.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
<script>
window.onload = function() {
// Functions executed with the scope of a wire
var wireRed = function() {
this.color = 'rgb(255, 0, 0)';
this.redraw();
},
wireBlue = function() {
this.color = 'rgb(173, 216, 230)';
this.redraw();
},
wireClick = function() {
alert("Hoho ! you clicked !");
};
// Generate a random layer
var layer = new WireIt.Layer({});
for(var i = 0 ; i < 5 ; i++) {
layer.addContainer({
terminals: [ {direction: [0,1], offsetPosition: {bottom: -13, left: 25} }],
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 methods to mouse events for all wires
w.eventMouseIn.subscribe(wireRed, w, true);
w.eventMouseOut.subscribe(wireBlue, w, true);
w.eventMouseClick.subscribe(wireClick, w, true);
}
};
</script>
</head><body></body></html>