feat(draw-route): implement drag-n-drop Stencils onto drawing container

Closes #10.

app/index.html

@@ -81,6 +81,7 @@
   <script src="bower_components/jquery-ui/jquery-ui.js"></script>
   <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
   <script src="bower_components/angular-ui-select/dist/select.js"></script>
+  <script src="bower_components/angular-dragdrop/src/angular-dragdrop.js"></script>
   <!-- endbower -->
   <!-- endbuild -->
 

app/scripts/app.coffee

@@ -18,6 +18,7 @@ angular
     'ngTouch',
     'ui.bootstrap'
     'ui.select'
+    'ngDragDrop'
   ])
   .config ($routeProvider) ->
     $routeProvider

app/scripts/controllers/draw.coffee

@@ -13,7 +13,7 @@ angular.module('seaspongeApp')
     $scope.stencils = window.stencils
 
     $scope.menu = {
-      stencilsOpen: false
+      stencilsOpen: true
       propertiesOpen: false
     }
 
@@ -30,6 +30,30 @@ angular.module('seaspongeApp')
       return arr
     )()
 
+    $scope.dropStencil = @dropStencil = (event, ui) ->
+        console.log('dropStencil', arguments)
+        el = ui.draggable
+        $el = $(el)
+        #s = $el.data('$ngModelController')
+        ctrl = $el.controller('ngModel')
+        if ctrl
+            stencil = ctrl.$modelValue
+            # console.log(el, $el, stencil)
+            i = $scope.addStencil(stencil)
+            b = $scope.container.offset()
+            offset = {
+                'left': event.pageX - b.left
+                'top': event.pageY - b.top
+            }
+            console.log(offset)
+            # i.$element.offset(offset)
+            $se = i.$element
+            console.log($se, $se.offset(), $se.position())
+            $se.css(offset)
+            console.log($se, $se.offset(), $se.position())
+            $scope.instance.repaintEverything()
+            console.log($se, $se.offset(), $se.position())
+
     jsPlumb.ready ->
       $scope.instance = instance = jsPlumb.getInstance(
         # default drag options
@@ -116,6 +140,7 @@ angular.module('seaspongeApp')
                     # Change selected in $scope
                     $scope.selectedStencil = null
                     $scope.menu.propertiesOpen = false
+                    $scope.menu.stencilsOpen = true
                 else
                     # Add selected class
                     inst.$element.addClass('selected-stencil')
@@ -139,3 +164,4 @@ angular.module('seaspongeApp')
       # stencil = new stencils.BaseStencil(uuid, $container, instance)
       stencil = new stencilClass(uuid, $scope.container, instance)
       console.log(stencil)
+      return stencil

app/scripts/stencils/base.coffee

@@ -10,9 +10,11 @@ class @stencils.BaseStencil
 
   constructor: (@uuid, @$container, @plumbInstance) ->
     # Create new element
-    @$element = $element = $('<div/>', {
+    @$element = $element = $('<div />', {
       id: @uuid
     }).append($('<p/>').text("#{@constructor.title} <#{@constructor.type}>"))
+    # Data
+    @$element.data('stencil', @)
     # Add class names
     console.log(@constructor.classNames)
     cls = @constructor.classNames.join(" ")

app/styles/draw.scss

@@ -81,15 +81,3 @@
 .stencil.selected-stencil {
     background-color: blue;
 }
-
-/* Prevent the text contents of draggable elements from being selectable. */
-[draggable] {
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  /* Required to make elements draggable in old WebKit */
-  -khtml-user-drag: element;
-  -webkit-user-drag: element;
-}
-

app/styles/layout.scss

@@ -1,15 +1,22 @@
 // Variables
 $sidebar-left-width: 350px;
 $nav-bar-top-height: 40px;
+$sidebar-left-height: 200px;
 
 //
 .content-left {
-  position: absolute;
+  //position: absolute;
   top: $nav-bar-top-height;
   bottom: 0px;
   left: 0px;
   width: $sidebar-left-width;
   overflow-y: scroll;
+
+  .all-stencils {
+      max-height: $sidebar-left-height;
+      overflow-y: scroll;
+  }
+
 }
 
 .content-right {

app/styles/main.scss

@@ -2,8 +2,8 @@ $icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/boots
 // bower:scss
 @import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
 // endbower
-@import "layout.scss";
-@import "draw.scss";
+//@import "layout.scss";
+//@import "draw.scss";
 
 .browsehappy {
   margin: 0.2em 0;

app/views/draw.html

@@ -15,15 +15,7 @@
         <button type="button" class="btn btn-default">2</button>
       </div>
     </div>
-
-    <ul class="nav nav-pills">
-      <li class=""><a href="#"><i class="glyphicon glyphicon-floppy-save"></i></a>
-      </li>
-      <li><a href="#">Profile</a>
-      </li>
-      <li><a href="#">Messages</a>
-      </li>
-    </ul>
+    <br/>
   </div>
 
   <div class="row">
@@ -39,9 +31,12 @@
             Stencils <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.stencilsOpen, 'glyphicon-chevron-right': !status.stencilsOpen}"></i>
           </accordion-heading>
 
-          <div class="row">
+          <div class="all-stencils row">
 
-            <div class="stencil col-xs-6 col-md-4" ng-repeat="stencil in stencils | filter:{ title:'!Base' }">
+            <div class="stencil col-xs-6 col-md-4 col-lg-4" 
+            ng-repeat="stencil in stencils | filter:{ title:'!Base' }" 
+            draggable="true" data-drag="true" jqyoui-draggable ng-model="stencil" 
+            data-jqyoui-options="{helper: 'clone', animate: true, placeholder: 'keep'}">
               <a href="" class="thumbnail" ng-click="addStencil(stencil)">
                 <img ng-src="{{stencil.icon}}" ng-alt="{{stencil.title}}">
                 <span class="stencil-title">{{stencil.title}}</span>
@@ -104,7 +99,8 @@
       </ul>
 
       <!-- Tab panes -->
-      <div class="drawing-panel">
+      <div class="drawing-panel" data-drop="true"
+      jqyoui-droppable="{onDrop:'dropStencil'}">
         <div class="tab-content">
           <div class="tab-pane active" id="home">
 

bower.json

@@ -16,7 +16,8 @@
     "jsplumb": "~1.6.2",
     "jquery-ui": "~1.11.1",
     "angular-bootstrap": "~0.11.2",
-    "angular-ui-select": "~0.8.3"
+    "angular-ui-select": "~0.8.3",
+    "angular-dragdrop": "~1.0.8"
   },
   "devDependencies": {
     "angular-mocks": "1.2.16",