sandbox/changing_directions.html from neyric/wireit

sandbox/changing_directions.html
Summary

Maintainability

Test Coverage

Issues
<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Change Terminal directions</title>
  
<!-- Libs -->
<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.bubble {
    width: 45px; height: 45px;
    position: relative;
    z-index: 5;
    opacity: 0.8;
    cursor: move;
    background-image: url(bubble.png);
}
</style>

<script>

YUI_config.groups.wireit.base = '../src/';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {


  var Bubble = function(position) {
    
      this.el = Y.Node.create('<div class="bubble" />').setXY(position).appendTo(document.body);
    
      this.terminals = [
        new Y.Terminal({render: this.el, dir: [-1,-1], x: -10, y: -10}),
        new Y.Terminal({render: this.el, dir: [1,-1], x: 25, y: -10}),
        new Y.Terminal({render: this.el, dir: [-1,1], x: -10, y: 25}),
        new Y.Terminal({render: this.el, dir: [1,1], x: 25, y: 25})
    ];
    
      // Make Drag/drop !
      var drag = new Y.DD.Drag({ 
            node: this.el
    });
    var that = this;
    drag.on('drag:drag', function(ev) {
        Y.Array.each(that.terminals, function(t) {
          t.redrawAllWires();
        });
    });
    
  };
      var bubbles = [
        new Bubble([335,60]),
          new Bubble([280,150]),
          new Bubble([380,150])
    ];
    
    Y.Array.each([ [[0,3],[2,0]] , 
                   [[0,2],[1,1]] , 
                   [[1,3],[2,2]] , 
                   [[0,0],[1,0]], 
                   [[1,2],[2,3]] , 
                   [[0,1],[2,1]] ], function(wire) {
          new Y.BezierWire({
            src: bubbles[wire[0][0]].terminals[wire[0][1]] , 
            tgt: bubbles[wire[1][0]].terminals[wire[1][1]], 
            render: document.body
        });
      });

  
});

</script>
 </head>
 <body>
    
    <p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
    
    <p style="margin: 15px;">Terminal directions can be changed !</p>
    
    <button style="margin: 15px;" onclick='createBubble();'>Add a Bubble</button>
    
 </body>
</html>