Relational Diagraming 0.0.1

Using Ember and Raphael to create relational diagrams

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.js"></script>
<div id="drawingAreaBackground">
    
</div>
<script type="text/x-handlebars" data-template-name="application">
    {{render objs}}
</script>
<script type="text/x-handlebars" data-template-name="object">
    <div class="handle">{{view.content.name}}</div>
    <div class="properties">        <ul>
        {{#each prop in view.content.properties itemViewClass="App.PropertyView"}}
            {{view.content.name}}
        {{/each}}
        </ul>
    </div>
</script>
<div class="draggable" id="model">
    <div class="handle"></div>
    <div class="vars">
        <ul>
            <li class="var_1">var1</li>
            <li class="var_2">var2</li>
            <li class="var_3">var3</li>
        </ul>
    </div>
    <div class="functions">
        <ul>
            <li class="func_1">Function 01</li>
            <li class="func_2">Function 02</li>
            <li class="func_3">Function 03</li>
        </ul>
    </div>
    
</div>

CSS

html, body{
    margin: 0;
    padding: 0;
}
#drawingAreaBackground {
    width: 100%;
    height: 100%;
}
.box {
    opacity: 0.9;
    position: absolute;
    width: 80px;
    overflow: hidden;
    border: solid 1px gray;
    background-color: #efefef;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.box ul {list-style-type: none; margin 0; padding:0;}
.box ul li {
    list-style-type: none; 
    margin 0; 
    padding:0;
    border: solid 1px #cdcdcd;
    border-top:none;
    font-size: 8pt;
}
.handle {
    background-color: #cdcdcd;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: groove 2px #dedede;
    height: 20px;
}
#model {
    display:none;
}

JavaScript

/*
//In Ember RC-6:
    //at line 3 add: 
var ObjectsList = [];

    //inside exend at: line 11644, add:
ObjectsList.push({"Class":Class, "args":arguments});
*/
var objectsData = [
    {
        name: "Body",
        filename: "body.js",
        properties: [
            
        ]
    },
    {
        name: "Groups",
        filename: "groups.js",
        properties: [
            {name:'content',
             value:[]
            },
            {name: 'current',
             value: {subs: []}
            }
        ]
    },
    {
        name: "SubGroups",
        filename: "subs.js",
        properties: [
            {name: 'contentBinding',
             type:'binding',
             value:"groups.current.subs"},
            {name: 'current',
             value: []
            }
        ]
    },
    {
        name: "Items",
        filename: "items.js",
        properties: [
            {name: 'contentBinding',
             type:'binding',
             target:"subs.current.items"
            },
            {name: 'current',
             value: []
            }
        ]
    }
];

//Draggable jQuery function
(function ($){
    //An object to hold the default values, and the callback functions
    var defaults = {
        handle:'.handle',
        //When writting callback functions
        //Note that the events do not occur on the given jQuery element
        //to get a reference to that element use e.data.$this
        onMouseDown:function(e){},
        onMouseUp:function(e){},
        onMouseMove:function(e){}
    };
    
    //An object to hold the functions of the plugin
    var methods = {
        init: function(options){
            //Use each to individually apply settings and listeners
            return this.each(function(){
                var $this = $(this);
                var settings = $this.data('draggable');
                
                //If settings haven't been previously created, create them now
                if (typeof settings ==...