Updated relational Diagramming App

Draw Relational Diagrams With Ember and Raphael

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<nav></nav>
<div class="left menu draggable">
    <div class="handle">Left Menu</div>
</div>
<div class="right menu draggable">
    <div class="handle">right Menu</div>
</div>
<article>
    <section>
        Section Body
        <div class="diagram-item">
            <div class="handle"></div>
            <div class="di-body">
                <div class="di-front">
                    <h1>Fronty</h1>
                </div>
                <div class="di-back">
                    <h1>Backy</h1>
                </div>
            </div>
            <div class="di-footer">
                <div class="di-flip-button"><==></div>
            </div>
        </div>
    </section>
</article>


<!-- SCRIPTS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>

CSS

html, body{
    margin: 0;
    padding: 0;
}
#drawingAreaBackground {
    width: 100%;
    height: 100%;
}
.diagram-item {
    opacity: 0.9;
    position: absolute;
    width: 160px;
    min-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    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;
}
.diagram-item ul {list-style-type: none; margin 0; padding:0;}
.diagram-item 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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    cursor: pointer;
    font-size: 9pt;
    font-weight: bold;
}
#model {
    display:none;
}

/* SOF Application Container*/
.menu.left {
    float: left;
    clear: left;
}
.menu.right {
    float: right;
    clear: right;
}

/* SOF flipping */


@-webkit-keyframes back {
  0% {
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1)
    rotateY(180deg);
  }

  10% {
    box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1.000768)
    rotateY(180deg);
  }

  20% {
    box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1.024576)
    rotateY(180deg);
  }

  30% {
    box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1.125424)
    rotateY(180.17135717260666deg);
  }

  40% {
    box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1.149232)
    rotateY(185.48342952341287deg);
  }

  50% {
    box-shadow: 0px 20px 20px rgba(0,0,0,0.3);
  ...

JavaScript

//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;
            var settings = $this.data('draggable');
            
            //Set the mouse down positions so we can do calculations based on the original offsets
 ...