<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt Example, Spring model layout</title>
<!-- Libs -->
<link rel="stylesheet" type="text/css" href="../../../lib/yui/reset-fonts/reset-fonts.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>
<!-- Animation plugin -->
<script type="text/javascript" src="../../../js/Anim.js"></script>
<!-- WireIt Layout plugin -->
<script type="text/javascript" src="../js/Layout.js"></script>
<link rel="stylesheet" type="text/css" href="../../../assets/WireIt.css" />
<style>
div.WireIt-Terminal {
background-image: none;
width: 0px;
height: 0px;
}
div.WireIt-Container {
width: 90px
}
</style>
<script>
var layer = null;
window.onload = function() {
var nodes = [
"WireIt", // 0
"librairies", "inputEx", "YUI", "excanvas", // 1, 2, 3, 4
"classes", "Wire", "Terminal", "Container", "Layer", "WiringEditor", // 5, 6, 7, 8, 9, 10
"modules", "editor", "inputex", "labels", "layout", "composable", "grouping" // 11, 12, 13, 14, 15,16,17
];
var wires = [
[0,1], [1,2], [1,3], [2,3], [1,4], // librairies
[0,5], [5,6], [5,7], [5,8], [5,9], [5,10], // classes
[0, 11], [11, 12], [11, 13], [11, 14], [11, 15], [11, 16], [11, 17]
];
layer = new WireIt.Layer({});
for(var i = 0 ; i < nodes.length ; i++) {
layer.addContainer({
terminals: [ { offsetPosition: {top: 5, left: 25}, editable: false }],
title: nodes[i],
position: [ Math.floor(Math.random()*800)+30, Math.floor(Math.random()*300)+30 ],
close: false
});
}
for(var i = 0 ; i < wires.length ; i++) {
var wc = wires[i];
layer.addWire({
src: {moduleId: wc[0], terminalId: 0},
tgt: {moduleId: wc[1], terminalId: 0},
xtype: "WireIt.Wire"
});
}
layer.startDynamicLayout();
// For example with animation
/*setInterval(function() {
var c = layer.containers[0];
var anim = new WireIt.util.Anim( c.terminals, c.el, { left: {to: 500 }, top: {to: 200 } }, 1, YAHOO.util.Easing.easeOut);
anim.animate();
layer.dynamicLayout.init();
}, 5000);*/
};
</script>
</head>
<body>
</body>
</html>