From 62d220262f06addfb7204748fc433dd36f12c9bd Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 25 Jun 2016 12:43:46 +0200 Subject: [PATCH] Clean move command --- src/commands/view/MoveComponent.js | 128 +---------------------------- 1 file changed, 4 insertions(+), 124 deletions(-) diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index d49daf48f..4fa343b92 100644 --- a/src/commands/view/MoveComponent.js +++ b/src/commands/view/MoveComponent.js @@ -8,7 +8,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], init: function(o){ SelectComponent.init.apply(this, arguments); - _.bindAll(this,'initSorter','startMove','onMove','endMove','rollback','selectingPosition','itemLeft', 'onEndMove'); + _.bindAll(this,'initSorter','rollback','selectingPosition','itemLeft', 'onEndMove'); this.opt = o; this.hoverClass = this.pfx + 'hover-move'; this.badgeClass = this.pfx + 'badge-yellow'; @@ -16,13 +16,9 @@ define(['backbone', './SelectComponent','./SelectPosition'], }, enable: function(){ - this.canvasTop = this.$canvas.offset().top; - this.canvasLeft = this.$canvas.offset().left; this.$el.css('cursor','move'); - //this.$el.on('mousedown', this.startMove); this.$el.on('mousedown', this.initSorter); this.startSelectComponent(); - //Avoid strange moving behavior this.$el.addClass(this.noSelClass); }, @@ -46,7 +42,7 @@ define(['backbone', './SelectComponent','./SelectPosition'], }, /** - * Hover command + * Hover command. Helps to avoid selecting not movable elements, eg. wrapper * @param {Object} e * @private */ @@ -54,122 +50,19 @@ define(['backbone', './SelectComponent','./SelectPosition'], e.stopPropagation(); var $this = $(e.target); - if($this.data('model').get('movable')){ //Show badge if possible + if($this.data('model').get('movable')){ $this.addClass(this.hoverClass); this.attachBadge(e.target); } }, - /** Say what to do after the component was selected - * - Method from selectComponent + /** Say what to do after the component was selected (selectComponent) * @param Event * @param Object Selected element * @private * */ onSelect: function(e,el){}, - /** Picking component to move - * @param event - * @private - * */ - startMove: function(e, el){ - this.moved = false; - if( !$(e.target).data('model').get('movable') ){ return; } //In case the component selected is not movable - this.$el.off('mousedown', this.startMove); - this.stopSelectComponent(e); - this.$selectedEl = $(e.target); - this.freezeComponent(this.$selectedEl); - this.helperObj = $('
', {class: "tempComp"}).css({ //HELPER gray box - top : (e.pageY - this.canvasTop) + this.$canvas.scrollTop(), - left: (e.pageX - this.canvasLeft) + this.$canvas.scrollLeft(), - width: $(e.target).width(), - height: $(e.target).height(), - position : 'absolute', - 'pointer-events': 'none', //disable events for the element - }).data('helper',1).appendTo(this.$el); - - this.startSelectPosition(); - - this.$el.on('mousemove',this.onMove); - $(document).on('mouseup',this.endMove); - $(document).on('keypress',this.rollback); - }, - - /** During move - * @param event - * @private - * */ - onMove: function(e){ - this.moved = true; - var relativeY = (e.pageY - this.canvasTop) + this.$canvas.scrollTop(); - var relativeX = (e.pageX - this.canvasLeft) + this.$canvas.scrollLeft(); - this.helperObj[0].style.top = (relativeY)+'px'; - this.helperObj[0].style.left = (relativeX)+'px'; - }, - - /** Leave component - * @param event - * @private - * */ - endMove: function(e){ - this.$el.off('mousemove',this.onMove); - $(document).off('mouseup', this.endMove); - $(document).off('keypress', this.rollback); - this.helperObj.remove(); - - this.removePositionPlaceholder(); - this.stopSelectPosition(); - - //this.highlightComponent(e,el) after end of move - if(this.moved) - this.move(null, this.$selectedEl, this.posIndex, this.posMethod); - this.unfreezeComponent(this.$selectedEl); - this.enable(); - }, - - /** Move component to new position - * @param object Component to move - * @param object Target component - * @param int Indicates the position inside the collection - * @param string Before of after component - * - * @private - * */ - move: function(target, el, posIndex, posMethod){ - var index = posIndex || 0; - var model = el.data("model"); - var collection = model.collection; - - var targetCollection = this.posTargetCollection; - var targetModel = this.posTargetModel; - - if(targetCollection && targetModel.get('droppable')){ - var modelTemp = targetCollection.add({css:{}}, { at: index }); - var modelRemoved = collection.remove(model); - targetCollection.add(modelRemoved, { at: index }); - targetCollection.remove(modelTemp);//{ avoidStore: 1 } - }else - console.warn("Invalid target position"); - }, - - /** Make component untouchable - * @param object Component - * @private - * */ - freezeComponent: function($component){ - $component.css({'pointer-events':'none'}); - $component.addClass(this.freezClass); - }, - - /** Make component touchable - * @param object Component - * @private - * */ - unfreezeComponent: function($component){ - $component.css({'pointer-events':'auto'}); - $component.removeClass(this.freezClass); - }, - /** Used to bring the previous situation before start moving the component * @param Event * @param Bool Indicates if rollback in anycase @@ -184,19 +77,6 @@ define(['backbone', './SelectComponent','./SelectPosition'], return; }, - /** - * Closing method - * @private - * */ - last: function(){ - this.placeholder.remove(); - this.placeholderStart.remove(); - this.helperObj.remove(); - this.$el.off('mousemove',this.move); - $(document).off('mouseup', this.endMove); - $(document).off('keypress', this.rollback); - }, - run: function(editor, sender, opts){ this.editor = editor;