-
Notifications
You must be signed in to change notification settings - Fork 90
/
wire_events.html
64 lines (48 loc) · 1.69 KB
/
wire_events.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt Example, handle wire events</title>
<!-- YUI -->
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.5.1/build/cssreset/reset-min.css&3.5.1/build/cssfonts/fonts-min.css">
<script src="http://yui.yahooapis.com/3.5.1/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>