sandbox/creating_terminals.html from neyric/wireit

sandbox/creating_terminals.html
Summary

Maintainability

Test Coverage

Issues
<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Creating Terminals and Wires.</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>

<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />

<style>
div.blockBox {
    /* WireIt */
    position: relative;
    z-index: 5;
    opacity: 0.8;
    filter: alpha(opacity = 80);
    
    /* Others */
    width: 50px;
    height: 380px;
    background-color: rgb(255,200,200);
}

div.WireIt-Terminal {
    margin: 20px 8px;
}


#blockTop div.WireIt-Terminal, #blockBottom div.WireIt-Terminal {
    margin: 8px;
    float: left;
}

</style>

 </head>
 <body>
    <p style="margin: 30px;"><a href="../index.html">&lt; Back</a></p>
    <p style="margin: 30px;">This example demonstrates how to create Terminals.</p>
    <p style="margin: 30px;">Try to create some wires by drag'n drop on the terminals. Click on the scissor to delete them.</p>
    
    <div id='blockLeft' class="blockBox" style="top: 150px; left: 200px;">
    </div>
    
    <div id='blockRight'  class="blockBox"  style="top: 150px; left: 400px;">
    </div>
    
    
    <div id='blockTop' class="blockBox" style="width: 380px; height: 50px; top: 150px; left: 600px;">
    </div>
    
    <div id='blockBottom'  class="blockBox"  style="width: 380px; height: 50px; top: 350px; left: 600px;">
    </div>


<script src="../src/loader.js"  type='text/javascript'></script>
<!--script src="../res/inputex-examples.js"  type='text/javascript'></script-->
<script>
YUI_config.groups.wireit.base = '../src/';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {

  // For debug
  window.Y = Y;
  
    var bl = Y.one('#blockLeft');
    var br = Y.one('#blockRight');
    var bt = Y.one('#blockTop');
    var bb = Y.one('#blockBottom');
    
    var terminals = [];
    
    for( var i = 0 ; i < 7 ; i++) {
        terminals.push( new Y.Terminal({render: bl, dir: [1,0], x: 0, y: i*50 }) );
        terminals.push( new Y.Terminal({render: br, dir: [-1,0], x: 0, y: i*50 }) );
        terminals.push( new Y.Terminal({render: bt, dir: [0,1], x: i*50, y: 0 }) );
        terminals.push( new Y.Terminal({render: bb, dir: [0,-1], x: i*50, y: 0 }) );
    }
  
  var w = new Y.BezierWire( {
    src: terminals[3], 
    tgt: terminals[10], 
    render: document.body
    });
  
  
});
</script>


 </body>
</html>