Refreshed Diagramming w EmberData

by amindunited

HTML

<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.7/ember-data.min.js"></script>

<script type="text/x-handlebars" data-template-name="application"></script>


<div class="tableWrap draggable">
    <div></div>
    <input class="tableTitle"/>
    <ul>
        <li class="key">
            Key
        </li>
        <li class="key">
            Key
        </li>
        <li class="key">
            Key
        </li>
    </ul>
</div>

CSS

html, body {
    font-size: 12px;
    font-family: 'courier';
}
.tableWrap {
    width: 100px;
    height: 100px;
    background-color: #ededed;
    padding-top:10px;
    border-radius: 5px;
}
.tableWrap .tableTitle {
    display: block;
    width: 90%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.tableWrap .key {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: solid 1px #999999;
}
.tableWrap .key:last-of-type {
    border-bottom: none;
}

JavaScript

////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.2/handlebars.min.js
//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js
App = Em.Application.create();
//@TODO this should be changed to localstorage ad
App.ApplicationAdapter = DS.FixtureAdapter;


App.Person = DS.Model.extend({
    
});
$(function(){
    $('.draggable').draggable({
        drag: function(event, ui){
            
            //console.log('going to update lines for...', $(event.target));
        }
    });
});

///////////////////////////////////////////////
//SOF CONNECT
function connectObjects(obj1, obj2) {
    var fx, fy, tx, ty;
    
    var o1 = $(obj1).offset();
    var o2 = $(obj2).offset();
    
    if (o1.left < o2.left) {
        o1_left_calc = ($(obj1).width());
        o2_left_calc = 0;
    }
    else if (o1.left > o2.left) {
        o1_left_calc = 0;
        o2_left_calc = ($(obj2).width())
    }
    
    if (o1.top < o2.top) {
        o1_top_calc = ($(obj1).height() / 2);
        o2_top_calc = ($(obj2).height() / 2);
    }
    else if (o1.left > o2.left) {
        o1_top_calc = ($(obj1).height() / 2);
        o2_top_calc = ($(obj2).height() / 2);
    }
    fx = o1.left + o1_left_calc;
    fy = o1.top + o1_top_calc;
    
    tx = o2.left + o2_left_calc;
    ty = o2.top + o2_top_calc;
    
    
    
    return drawLine({x:fx, y:fy}, {x:tx, y:ty})
}

/*
    @param from   OBJECT {x:0, y:0}
    @param to     OBJECT {x:0, y:0}
*/
function drawLine(from, to, color){
    var p = paper.path("M"+from.x+" "+from.y+"L"+ to.x+" "+to.y).attr('id', "foo");
    //p.node.id = "arg";
    return p;
}
//EOF CONNECT
/////////////////////////////////////////////////////////