sandbox/wire_events.html
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt Example, handle wire events</title>
<!-- YUI -->
<link rel="stylesheet" href="https://yui-s.yahooapis.com/combo?3.6.0/build/cssreset/reset-min.css&3.6.0/build/cssfonts/fonts-min.css">
<script src="https://yui-s.yahooapis.com/3.6.0/build/yui/yui.js"></script>
<script type="text/javascript" src="../lib/excanvas.js"></script>
<!-- WireIt -->
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
<script src="../src/loader.js" type='text/javascript'></script>
<script>
YUI_config.groups.wireit.base = '../src/';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', 'layer', function(Y) {
// 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 Y.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.on('eventMouseIn', wireRed, w, true);
w.on('eventMouseOut', wireBlue, w, true);
w.on('eventMouseClick', wireClick, w, true);
}
});
</script>
</head><body></body></html>