From be7f14e5f7a7f70667e8e855b442d8a21e62d0b0 Mon Sep 17 00:00:00 2001 From: Glavin Wiechert Date: Sun, 26 Oct 2014 20:25:33 -0300 Subject: [PATCH] feat(draw-route): implement drag-n-drop Stencils onto drawing container Closes #10. --- app/index.html | 1 + app/scripts/app.coffee | 1 + app/scripts/controllers/draw.coffee | 28 +++++++++++++++++++++++++++- app/scripts/stencils/base.coffee | 4 +++- app/styles/draw.scss | 12 ------------ app/styles/layout.scss | 9 ++++++++- app/styles/main.scss | 4 ++-- app/views/draw.html | 20 ++++++++------------ bower.json | 3 ++- 9 files changed, 52 insertions(+), 30 deletions(-) diff --git a/app/index.html b/app/index.html index 4d1d10e..eeaef9f 100644 --- a/app/index.html +++ b/app/index.html @@ -81,6 +81,7 @@ + diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index 87e1738..033d18b 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -18,6 +18,7 @@ angular 'ngTouch', 'ui.bootstrap' 'ui.select' + 'ngDragDrop' ]) .config ($routeProvider) -> $routeProvider diff --git a/app/scripts/controllers/draw.coffee b/app/scripts/controllers/draw.coffee index c6f58c8..bfcc78f 100644 --- a/app/scripts/controllers/draw.coffee +++ b/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 diff --git a/app/scripts/stencils/base.coffee b/app/scripts/stencils/base.coffee index 3044080..b8cc474 100644 --- a/app/scripts/stencils/base.coffee +++ b/app/scripts/stencils/base.coffee @@ -10,9 +10,11 @@ class @stencils.BaseStencil constructor: (@uuid, @$container, @plumbInstance) -> # Create new element - @$element = $element = $('
', { + @$element = $element = $('
', { id: @uuid }).append($('

').text("#{@constructor.title} <#{@constructor.type}>")) + # Data + @$element.data('stencil', @) # Add class names console.log(@constructor.classNames) cls = @constructor.classNames.join(" ") diff --git a/app/styles/draw.scss b/app/styles/draw.scss index c571b2f..edcebf8 100644 --- a/app/styles/draw.scss +++ b/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; -} - diff --git a/app/styles/layout.scss b/app/styles/layout.scss index 5924c78..7ddb892 100644 --- a/app/styles/layout.scss +++ b/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 { diff --git a/app/styles/main.scss b/app/styles/main.scss index dfa89b3..48636c8 100644 --- a/app/styles/main.scss +++ b/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; diff --git a/app/views/draw.html b/app/views/draw.html index f87fb44..de37ca2 100644 --- a/app/views/draw.html +++ b/app/views/draw.html @@ -15,15 +15,7 @@

- - +
@@ -39,9 +31,12 @@ Stencils -
+
-
+
{{stencil.title}} @@ -104,7 +99,8 @@ -
+
diff --git a/bower.json b/bower.json index 18ff6cf..8c33b53 100644 --- a/bower.json +++ b/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",