neyric/wireit

View on GitHub
sandbox/layer_container.html

Summary

Maintainability
Test Coverage
<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt: Label containers</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>

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


<script type="text/javascript" src="../../../lib/excanvas.js"></script>

<!-- WireIt -->
<script type="text/javascript" src="../../../build/wireit-inputex-min.js"></script>

<script type="text/javascript" src="../js/LayerContainer.js"></script>



<style>
body {
    font-size: 10px;
}


div.WireIt-LayerContainer div.body {
    background-color: transparent;
}

div.WireIt-LayerContainer div.WireIt-Layer {
    background-color: transparent;
}

</style>

</head>
<body>
    
<script>

    var demoLayer;

  YUI_config.groups.wireit.base = '../src/';
  YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {
        
        // Layer Demo
      demoLayer = new Y.Layer({layerMap: false});
        
        // You can use a global setWiring method    
        demoLayer.setWiring(
            {
                "containers": [{
                    "position": [0,0],
                    "xtype": "WireIt.LayerContainer",
                            title: "when",
                            "terminals": [
                                 {"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 115}, editable: false },
                                {"name": "out", direction: [0,1], offsetPosition: {bottom: -50, left: 115} }
                             ]
                },
                {
                    "position": [600, 167],
                    "xtype": "WireIt.LayerContainer",
                            title: "otherwise",
                            "terminals": [
                                 {"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 115}, editable: false },
                                {"name": "out", direction: [0,1], offsetPosition: {bottom: -50, left: 115} }
                             ]
                },
                {
                    "position": [469, 42],
                    "xtype": "WireIt.Container",
                            title: "choose",
                            width: 200,
                            "terminals": [
                                 {"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 90}, editable: false },
                                {"name": "out", direction: [0,1], offsetPosition: {bottom: -15, left: 90} }
                             ]
                },
                {
                    "position": [462, 550],
                    "xtype": "WireIt.Container",
                            title: "output",
                            width: 200,
                            "terminals": [
                                 {"name": "in", direction: [0,-1], offsetPosition: {top: -13, left: 90}, editable: false },
                                {"name": "out", direction: [0,1], offsetPosition: {bottom: -15, left: 90} }
                             ]
                }],
                "wires": [{
                    "xtype": "WireIt.BezierWire",
                    "src": {
                        "moduleId": 2,
                        "terminal": "out"
                    },
                    "tgt": {
                        "moduleId": 0,
                        "terminal": "in"
                    }
                },
                {
                    "xtype": "WireIt.BezierWire",
                    "src": {
                        "moduleId": 2,
                        "terminal": "out"
                    },
                    "tgt": {
                        "moduleId": 1,
                        "terminal": "in"
                    }
                },
                {
                    "xtype": "WireIt.BezierWire",
                    "src": {
                        "moduleId": 0,
                        "terminal": "out"
                    },
                    "tgt": {
                        "moduleId": 3,
                        "terminal": "in"
                    }
                },
                {
                    "xtype": "WireIt.BezierWire",
                    "src": {
                        "moduleId": 1,
                        "terminal": "out"
                    },
                    "tgt": {
                        "moduleId": 3,
                        "terminal": "in"
                    }
                }]
            });

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