sandbox/label_editor.html
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt: How to use the Layer</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>
<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;
YUI_config.groups.wireit.base = '../src/';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {
// Layer Demo
demoLayer = new Y.Layer({layerMap: false});
// You can use a global setWiring method
demoLayer.setWiring({
containers: [
// ImageContainer
{
position:[600,240],
"xtype":"Y.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":"Y.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: "Y.BezierWire"
}
]
});
});
</script>
</body>
</html>