<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt: How to use the Layer</title>
<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" />
<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../plugins/inputex/lib/inputex/css/inputEx.css" />
<!-- YUI -->
<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-inputex-min.js"></script>
<style>
body {
font-size: 10px;
}
div.WireIt-Container {
width: 350px; /* Prevent the modules from scratching on the right */
}
div.WireIt-ImageContainer { width: auto; }
div.Bubble div.body {
width: 70px;
height: 45px;
opacity: 0.8;
/*cursor: move;*/
}
</style>
</head>
<body>
<script>
var demoLayer;
YAHOO.util.Event.addListener(window, 'load', function() {
// Layer Demo
demoLayer = new WireIt.Layer({layerMap: false});
// You can use a global setWiring method
demoLayer.setWiring({
containers: [
// ImageContainer
{
position:[600,240],
"xtype":"WireIt.ImageContainer",
"image": "bubble.png",
//draggable: false,
close: false,
"terminals": [
{"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
{direction: [1,-1], offsetPosition: [25,-10]},
{direction: [-1,1], offsetPosition: [-10,25]},
{direction: [1,1], offsetPosition: [25,25]}
]
},
// ImageContainer
{
position:[700,140],
"xtype":"WireIt.ImageContainer",
className: "WireIt-Container WireIt-ImageContainer Bubble",
"image": "bubble.png",
//draggable: false,
close: false,
"terminals": [
{"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
{direction: [1,-1], offsetPosition: [25,-10]},
{direction: [-1,1], offsetPosition: [-10,25]},
{direction: [1,1], offsetPosition: [25,25]}
]
}
],
wires: [
{
src: {
moduleId: 0,
terminal: "_INPUT1"
},
tgt: {
moduleId: 1,
terminal: "_INPUT1"
},
label: 'Ouf !!',
labelEditor: {type: 'string', value: "Testst"},
xtype: "WireIt.BezierWire"
}
]
});
});
</script>
</body>
</html>