sandbox/layer.html from neyric/wireit

sandbox/layer.html
Summary

Maintainability

Test Coverage

Issues
<?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('layer', 'bezier-wire', 'terminal', 'image-container', function(Y) {
    
    // Layer Demo
  demoLayer = new Y.Layer({render: document.body});
    
  // You can use a global setWiring method    
  demoLayer.fromJSON({
    containers: [

      // ImageContainer
        {
            position:[600,240],
            type:"ImageContainer", 
            imageUrl: "bubble.png",
            draggable: false,
            close: false,
            children: [
                {"name": "_INPUT1", dir: [-1,-1], offsetPosition: [-10,-10], editable: false},
                {dir: [1,-1], offsetPosition: [25,-10]},
                {dir: [-1,1], offsetPosition: [-10,25]},
                {dir: [1,1], offsetPosition: [25,25]}
            ]
        },
        
        // ImageContainer
        {
            position:[700,140],
            type:"ImageContainer", 
            className: "WireIt-Container WireIt-ImageContainer Bubble",
            imageUrl: "bubble.png",
            draggable: false,
            close: false,
            children: [
                    {"name": "_INPUT1", dir: [-1,-1], offsetPosition: [-10,-10], editable: false},
                    {dir: [1,-1], offsetPosition: [25,-10]},
                    {dir: [-1,1], offsetPosition: [-10,25]},
                    {dir: [1,1], offsetPosition: [25,25]}
            ]
        }
    ],
    
    
    wires: [
        {
            src: {
                moduleId: 0,
                terminal: "_INPUT1"
            },
            tgt: {
                moduleId: 1,
                terminal: "_INPUT1"
            },
            
            xtype: "Y.BezierWire"
        }
    ]
    
});

});
</script>
</body>
</html>