Raphael Simple Line connect

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.4/ember.js"></script>
<div id="drawingAreaBackground">
    
</div>

<script type="text/x-handlebars" data-template-name="application">
    {{render tools}}
    {{render objsCollection}}
</script>
<script type="text/x-handlebars" data-template-name="tools">
    <li><a {{action newClass target="controller"}}>Class</a></li>
    <li><a {{action deleteClass target="controller"}}>Delete Class</a></li>
    <li><a {{action drawConnection target="controller"}}>Draw Connection</a></li>
    <li><a {{action deleteConnection target="controller"}}>Delete Connection</a></li>
</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;
}
.handle {
    background-color: #cdcdcd;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: groove 2px #dedede;
    height: 20px;
}
#model {
    display:none;
}

.toolsMenu {
    list-style-type: none;
    margin:0px;
    padding:0px;
}
.toolsMenu li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align:center;
    display:inline-block;
}

JavaScript

/* Note, this fiddle uses Emberjs.1.0.0-rc.4 
... there is a bug in rc4, that is fixed in rc.5, 
but rc.5 wasn't available through the cdn at the point of creation 
*/
(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 == 'undefined') {
                    settings = $.extend({}, defaults, options);
                    $this.data('draggable', settings)
                } else {
                    settings = $.extend({}, defaults, options);
                }
                //Add the mouse down listener to the "handle"
                //We pass {$this} so that we can back reference 'this' element from the event (because the event occurs on the "handle")
                $this.find(settings.handle).on('mousedown', {$this:$this}, methods.mouseDown);
            });
        },
        mouseDown: function(e){
            //Stop if mouseDown wasn't a left click
            if ( e.which != 1 ) {
                return $(this);
            }
            e.preventDefault();
            
            //Get the element that we want to reference is not the event.target
            //...it is passed as event.data.$this
            var $this = e.data.$this;
            var settings...