sandbox/label_containers.html from neyric/wireit

sandbox/label_containers.html
Summary

Maintainability

Test Coverage

Issues
<?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>

<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-CanvasContainer div.body {
    background-color: transparent;
    border: 0;
    position: relative;
}

div.WireIt-CanvasContainer div.WireIt-Container-closebutton {
    display: none;
}


div.WireIt-CanvasContainer:hover div.WireIt-Container-closebutton {
    display: block;
}


div.WireIt-CanvasContainer:hover div.WireIt-Container-resizehandle {
    border: 1px solid black;
}






div.WireIt-RectLabelContainer div.body {
    background-color: transparent;
    border: 0;
    position: relative;
    background-color: #FDEADA;
    padding: 20px;
}

div.WireIt-RectLabelContainer div.WireIt-Container-closebutton {
    display: none;
}


div.WireIt-RectLabelContainer:hover div.WireIt-Container-closebutton {
    display: block;
}


div.WireIt-RectLabelContainer:hover div.WireIt-Container-resizehandle {
    border: 1px solid black;
}

</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:[150,100],
                    "xtype":"Y.EllipseLabelContainer", 
                    label: "http://neyric.github.com/wireit",
                    width: 250,
                     "terminals": [
                         {"name": "in", direction: [0,-1], offsetPosition: {top: -5, left: 115} },
                        {"name": "out", direction: [0,1], offsetPosition: {bottom: -15, left: 115} }
                     ]
                },
                
                // ImageContainer
                {
                    position:[300,300],
                    "xtype":"Y.RectLabelContainer", 
                    label: "Eric Abouaf",
                     "terminals": [
                            {"name": "in", direction: [0,-1], offsetPosition: {top: -15, left: 90} }
                    ]
                }
            ],
            
            
            wires: [
                {
                    src: {
                        moduleId: 0,
                        terminal: "out"
                    },
                    tgt: {
                        moduleId: 1,
                        terminal: "in"
                    },
                    width: 1,
                    label: "dc:author",
                    labelStyle: { fontSize: "150%"},
                    labelEditor: {type: 'select', choices: ['dc:title', 'dc:author'] },
                    
                    xtype: "Y.BezierArrowWire"
                }
            ]
            
        });

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