Fix move command

src/commands/view/MoveComponent.js

@@ -13,17 +13,27 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			},
 
 			enable: function(){
-				_.bindAll(this, 'onFrameScroll');
-				this.$el.css('cursor','move');
-				this.$el.on('mousedown', this.initSorter);
-				this.startSelectComponent();
+				SelectComponent.enable.apply(this, arguments);
+				this.getBadgeEl().addClass(this.badgeClass);
+				this.getHighlighterEl().addClass(this.hoverClass);
+				var wp = this.$wrapper;
+				wp.css('cursor','move');
+				wp.on('mousedown', this.initSorter);
+
 				// Avoid strange moving behavior
-				this.$el.addClass(this.noSelClass);
+				wp.addClass(this.noSelClass);
 			},
 
+			/**
+			 * Overwrite for doing nothing
+			 * @private
+			 */
+			toggleClipboard: function(){},
+
 			/**
 			 * Delegate sorting
 			 * @param	{Event} e
+			 * @private
 			 * */
 			initSorter: function(e){
 				var el = $(e.target).data('model');
@@ -33,58 +43,71 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				this.cacheEl = null;
 				this.startSelectPosition(e.target, this.frameEl.contentDocument);
 				this.sorter.onEndMove = this.onEndMove.bind(this);
-				this.stopSelectComponent(e);
-				this.$el.off('mousedown', this.initSorter);
+				this.stopSelectComponent();
+				this.$wrapper.off('mousedown', this.initSorter);
+				this.getContentWindow().on('keydown', this.rollback);
 			},
 
 			/**
 			 * Callback after sorting
+			 * @private
 			 */
 			onEndMove: function(){
 				this.enable();
+				this.getContentWindow().off('keydown', this.rollback);
 			},
 
-			/** Say what to do after the component was selected (selectComponent)
-			 * @param Event
-			 * @param Object Selected element
+			/**
+			 * Say what to do after the component was selected (selectComponent)
+			 * @param {Event} e
+			 * @param {Object} Selected element
 			 * @private
 			 * */
 			onSelect: function(e,el){},
 
-			/** Used to bring the previous situation before start moving the component
-			 * @param Event
-			 * @param Bool Indicates if rollback in anycase
+			/**
+			 * Used to bring the previous situation before start moving the component
+			 * @param {Event} e
+			 * @param {Boolean} Indicates if rollback in anycase
 			 * @private
 			 * */
 			rollback: function(e, force){
 				var key = e.which || e.keyCode;
 				if(key == this.opt.ESCAPE_KEY || force){
-					this.moved = false;
-					this.endMove();
+					this.sorter.moved = false;
+					this.sorter.endMove();
 				}
 				return;
 			},
 
-			run: function(editor, sender, opts){
-				this.editor = editor;
-				this.$el = this.$wrapper;
-				this.$badge = $(this.getBadge());
-				this.$badge.addClass(this.badgeClass);
-				this.$hl = $(this.canvas.getHighlighter());
-				this.$hl.addClass(this.hoverClass);
-				this.enable();
+			/**
+			 * Returns badge element
+			 * @return {HTMLElement}
+			 * @private
+			 */
+			getBadgeEl: function(){
+				if(!this.$badge)
+					this.$badge = $(this.getBadge());
+				return this.$badge;
+			},
+
+			/**
+			 * Returns highlighter element
+			 * @return {HTMLElement}
+			 * @private
+			 */
+			getHighlighterEl: function(){
+				if(!this.$hl)
+					this.$hl = $(this.canvas.getHighlighter());
+				return this.$hl;
 			},
 
 			stop: function(){
-				this.stopSelectComponent();
-				this.hideBadge();
-				this.$badge = $(this.getBadge());
-				this.$badge.removeClass(this.badgeClass);
-				this.$hl = $(this.canvas.getHighlighter());
-				this.$hl.removeClass(this.hoverClass);
-				this.$el.css('cursor','');//changes back aspect of the cursor
-				this.$el.unbind();//removes all attached events
-				this.$el.removeClass(this.noSelClass);
+				SelectComponent.stop.apply(this, arguments);
+				this.getBadgeEl().removeClass(this.badgeClass);
+				this.getHighlighterEl().removeClass(this.hoverClass);
+				var wp = this.$wrapper;
+				wp.css('cursor', '').unbind().removeClass(this.noSelClass);
 			}
 		});
 	});

src/commands/view/SelectComponent.js

@@ -7,21 +7,32 @@ define(function() {
 
 			init: function(o){
 				_.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'clearOff');
-				this.trEvents = 'transitionend oTransitionEnd transitionend webkitTransitionEnd';
 			},
 
 
 			enable: function() {
-				_.bindAll(this,'copyComp', 'pasteComp', 'onFrameScroll');
+				_.bindAll(this, 'copyComp', 'pasteComp', 'onFrameScroll');
+				this.frameOff = this.canvasOff = this.adjScroll = null;
 				var config	= this.config.em.get('Config');
 				this.startSelectComponent();
-				// TODO refactor
-				if(config.copyPaste){
+				this.toggleClipboard(config.copyPaste);
+			},
+
+			/**
+			 * Toggle clipboard function
+			 * @param  {Boolean} active
+			 * @return {this}
+			 * @private
+			 */
+			toggleClipboard: function(active){
+				var en = active || 0;
+				if(en){
 					key('⌘+c, ctrl+c', this.copyComp);
 					key('⌘+v, ctrl+v', this.pasteComp);
+				}else{
+					key.unbind('⌘+c, ctrl+c');
+					key.unbind('⌘+v, ctrl+v');
 				}
-				this.listenTo(this.em.editor, 'change:device', this.clearOff);
-				$(this.frameEl).on(this.trEvents, this.clearOff);
 			},
 
 			/**
@@ -62,12 +73,14 @@ define(function() {
 			 * @private
 			 * */
 			startSelectComponent: function() {
-				this.getContentWindow().on('scroll', this.onFrameScroll);
+				this.listenTo(this.em, 'change:canvasOffset', this.clearOff);
 				this.selEl = $(this.getCanvasBody()).find('*');
-				this.selEl.on('mouseover',this.onHover)
+				this.selEl.on('mouseover', this.onHover)
 					.on('mouseout', this.onOut)
 					.on('click', this.onClick);
-				this.getContentWindow().on('keydown', this.onKeyPress);
+				var cw = this.getContentWindow();
+				cw.on('scroll', this.onFrameScroll);
+				cw.on('keydown', this.onKeyPress);
 			},
 
 			/**
@@ -75,10 +88,15 @@ define(function() {
 			 * @private
 			 * */
 			stopSelectComponent: function() {
-				this.getContentWindow().off('scroll', this.onFrameScroll);
+				this.stopListening(this.em, 'change:canvasOffset', this.clearOff);
 				if(this.selEl)
-					this.selEl.trigger('mouseout').off('mouseover mouseout click');
+					this.selEl.trigger('mouseout').off('mouseover', this.onHover)
+						.off('mouseout', this.onOut)
+						.off('click', this.onClick);
 				this.selEl = null;
+				var cw = this.getContentWindow();
+				cw.off('scroll', this.onFrameScroll);
+				cw.off('keydown', this.onKeyPress);
 			},
 
 			/**
@@ -169,8 +187,7 @@ define(function() {
 			onSelect: function(e, el) {
 				e.stopPropagation();
 				var md 	= this.editorModel.get('selectedComponent');
-				if(md)
-					this.cleanPrevious(md);
+				this.cleanPrevious(md);
 				var $el = $(el);
 				var nMd = $el.data('model');
 				if(nMd){
@@ -268,10 +285,11 @@ define(function() {
 			 * @private
 			 */
 			cleanPrevious: function(model) {
-				model.set({
-					status: '',
-					state: '',
-				});
+				if(model)
+					model.set({
+						status: '',
+						state: '',
+					});
 			},
 
 			/**
@@ -285,31 +303,16 @@ define(function() {
 			},
 
 			run: function(em, sender) {
-				this.em = em;
 				this.enable();
 			},
 
 			stop: function() {
-				this.stopListening(this.em.editor, 'change:device', this.clearOff);
-				$(this.frameEl).off(this.trEvents, this.clearOff);
-				if(!this.selEl)
-					this.selEl = $(this.getCanvasBody()).find('*');
-			  this.frameOff = this.canvasOff = this.adjScroll = null;
-
-			  var frameEl = this.canvas.getFrameEl();
-				var sel = this.editorModel.get('selectedComponent');
-				if(sel)
-					this.cleanPrevious(sel);
-				this.$el.unbind();												//removes all attached events
-				this.hideBadge();
-				this.clean();
-				this.selEl.unbind('mouseover').unbind('mouseout').unbind('click');
-				this.editorModel.set('selectedComponent',null);
-				key.unbind('⌘+c, ctrl+c');
-				key.unbind('⌘+v, ctrl+v');
-				var cw = this.getContentWindow();
-				cw.off('keydown', this.onKeyPress);
 				this.stopSelectComponent();
+				this.cleanPrevious(this.em.get('selectedComponent'));
+				this.clean();
+				this.em.set('selectedComponent', null);
+				this.toggleClipboard();
+				this.hideBadge();
 			}
 		};
 });