sandbox/wires_and_terminals.html from neyric/wireit

sandbox/wires_and_terminals.html
Summary

Maintainability

Test Coverage

Issues
<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt: How to use Wire and Terminals definitions</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>

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

div.blockBox {
    width: 200px;
    height: 200px;
    margin: 30px;
    float: left;
    position: relative;
    z-index: 5;
    /*background-color: rgb(255,200,200);*/
    border: 1px solid #aaa;
    opacity: 0.8;
    padding: 10px;
    font-weight: bold;
}

</style>
<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 block1 = Y.one('#block1');
    new Y.Terminal(block1, {offsetPosition:[30,30] });
    
    
    var block2 = Y.one('#block2');
    new Y.Terminal(block2, { wireConfig: { xtype: "Y.BezierWire"}, offsetPosition:[30,30] });
    new Y.Terminal(block2, { wireConfig: { xtype: "Y.StepWire"}, offsetPosition:[100,30] });
    new Y.Terminal(block2, { wireConfig: { xtype: "Y.BezierArrowWire"}, offsetPosition:[30,100] });
    new Y.Terminal(block2, { wireConfig: { xtype: "Y.ArrowWire"}, offsetPosition:[100,100] });
    
    
    var block3 = Y.one('#block3');
    new Y.Terminal(block3, { direction: [-1,-1], offsetPosition:[30,30] });
    new Y.Terminal(block3, { direction: [1,-1], offsetPosition:[100,30] });
    new Y.Terminal(block3, { direction: [-1,1], offsetPosition:[30,100] });
    new Y.Terminal(block3, { direction: [1,1], offsetPosition:[100,100] });
    
    
    var block4 = Y.one('#block4');
    new Y.Terminal(block4, {direction: [1,0], offsetPosition:[30,30], 
                                                wireConfig:{color: "#EEEE11", bordercolor:"#FFFF00"} });
    new Y.Terminal(block4, {direction: [1,0], offsetPosition:[100,30], 
                                                wireConfig:{color: "#EE1111", bordercolor:"#FF0000"} });
    new Y.Terminal(block4, {direction: [1,0], offsetPosition:[100,100], 
                                                wireConfig:{color: "#EE11EE", bordercolor:"#FF00FF"} });
    
    
    var block5 = Y.one('#block5');
    new Y.Terminal(block5, {direction: [1,0], offsetPosition:[30,30], 
                                                wireConfig:{width: 5, borderwidth:3} });    
    new Y.Terminal(block5, {direction: [1,0], offsetPosition:[100,100], 
                                                wireConfig:{width: 4, borderwidth:0} });
    new Y.Terminal(block5, {direction: [1,0], offsetPosition:[100,30], 
                                                wireConfig:{width: 1, borderwidth:0} });
    new Y.Terminal(block5, {direction: [1,0], offsetPosition:[30,100], 
                                                wireConfig:{width: 1, borderwidth:4} });


    var block6 = Y.one('#block6');
    new Y.Terminal(block6, { direction: [1,0], fakeDirection: [1,0], offsetPosition:[30,30] });
    new Y.Terminal(block6, { direction: [1,0], fakeDirection: [0,1], offsetPosition:[100,30] });
    new Y.Terminal(block6, { direction: [0,1], fakeDirection: [0,1], offsetPosition:[30,100] });
    new Y.Terminal(block6, { direction: [1,0], fakeDirection: [0,-1], offsetPosition:[100,100] });

    
    var block7 = Y.one('#block7');
    var w1 = new Y.Wire(
        new Y.Terminal(block7, {offsetPosition:[30,30], editable: false }),
        new Y.Terminal(block7, {offsetPosition:[100,30], editable: false }), 
        document.body);
    w1.redraw();
    
    
    var block8 = Y.one('#block8');
    new Y.Terminal(block8, { nMaxWires: 1, offsetPosition:[30,30] });
    new Y.Terminal(block8, { nMaxWires: 2, offsetPosition:[100,30] });
    new Y.Terminal(block8, { nMaxWires: 3, offsetPosition:[30,100] });
    
});
</script>

 </head>
 <body>
    <p style="margin: 30px;"><a href="../index.html">&lt; Back</a></p>
    <p style="margin: 5px 30px;">This page presents the various options on the terminals and wires. Try to create some wires from each terminal. Look at the source to see how to use them.</p>
    
    <div id='block1' class="blockBox">
        1. Default options
    </div>
    
    <div id='block2'  class="blockBox">
        2. Drawing methods (bezier,straight,bezierArrows,arrows)
    </div>
    
    <div id='block3' class="blockBox">
        3. Changing directions
    </div>
    
    <div id='block4'  class="blockBox">
        4. Changing colors
    </div>

    <div id='block5'  class="blockBox">
        5. Changing the size of the wire
    </div>
    
    <div id='block6'  class="blockBox">
        6. Using different editing direction
    </div>
    
    <div id='block7'  class="blockBox">
        7. Not editable
    </div>
    
    <div id='block8'  class="blockBox">
        8. Maximum number of wires (1,2,3)
    </div>

 </body>
</html>