Relational Diagraming 0.0.1 - Parsing Paths to Views

Using Ember and Raphael to create relational diagrams - Parsing Paths to Views

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});
*/


//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 == '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;
  ...