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;