neyric/wireit

View on GitHub
sandbox/label_editor.html

Summary

Maintainability
Test Coverage
<?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('wire', 'bezier-wire', 'terminal', function(Y) {
        
        // Layer Demo
      demoLayer = new Y.Layer({layerMap: false});
        
        // You can use a global setWiring method    
        demoLayer.setWiring({
            containers: [
        
              // ImageContainer
                {
                    position:[600,240],
                    "xtype":"Y.ImageContainer", 
                    "image": "bubble.png",
                    //draggable: false,
                    close: false,
                     "terminals": [
                         {"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
                        {direction: [1,-1], offsetPosition: [25,-10]},
                        {direction: [-1,1], offsetPosition: [-10,25]},
                        {direction: [1,1], offsetPosition: [25,25]}
                     ]
                },
                
                // ImageContainer
                {
                    position:[700,140],
                    "xtype":"Y.ImageContainer", 
                    className: "WireIt-Container WireIt-ImageContainer Bubble",
                    "image": "bubble.png",
                    //draggable: false,
                    close: false,
                     "terminals": [
                            {"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
                            {direction: [1,-1], offsetPosition: [25,-10]},
                            {direction: [-1,1], offsetPosition: [-10,25]},
                            {direction: [1,1], offsetPosition: [25,25]}
                    ]
                }
            ],
            
            
            wires: [
                {
                    src: {
                        moduleId: 0,
                        terminal: "_INPUT1"
                    },
                    tgt: {
                        moduleId: 1,
                        terminal: "_INPUT1"
                    },
                    
                    label: 'Ouf !!',
                    labelEditor: {type: 'string', value: "Testst"},
                    
                    xtype: "Y.BezierWire"
                }
            ]
            
        });

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