Update move command

src/canvas/view/CanvasView.js

@@ -36,7 +36,8 @@ function(Backbone, FrameView) {
         body.append(wrap.render()).append(cssc.render());
         var protCss = conf.protectedCss;
         var frameCss = '.' + this.ppfx	+ 'dashed *{outline: 1px dashed rgba(170,170,170,0.7); outline-offset: -2px}' +
-        							 '.' + this.ppfx	+ 'comp-selected{outline: 3px solid #3b97e3 !important}';
+        							 '.' + this.ppfx	+ 'comp-selected{outline: 3px solid #3b97e3 !important}' +
+                       '.' + this.ppfx  + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}';
         if(protCss)
         	body.append('<style>' + frameCss + protCss + '</style>');
       }

src/commands/view/MoveComponent.js

@@ -1,25 +1,23 @@
 define(['backbone', './SelectComponent','./SelectPosition'],
 	function(Backbone, SelectComponent, SelectPosition) {
-		/**
+
-		 * @class MoveComponent
+		return _.extend({}, SelectPosition, SelectComponent, {
-		 * @private
-		 * */
-		return _.extend({},SelectComponent, SelectPosition, {
 
 			init: function(o){
 				SelectComponent.init.apply(this, arguments);
-				_.bindAll(this,'initSorter','rollback','selectingPosition','itemLeft', 'onEndMove');
+				_.bindAll(this, 'initSorter','rollback', 'onEndMove');
 				this.opt	= o;
-				this.hoverClass	= this.pfx + 'hover-move';
+				this.hoverClass	= this.ppfx + 'highlighter-warning';
-				this.badgeClass	= this.pfx + 'badge-yellow';
+				this.badgeClass	= this.ppfx + 'badge-warning';
-				this.noSelClass	= this.pfx + 'no-select';
+				this.noSelClass	= this.ppfx + 'no-select';
 			},
 
 			enable: function(){
+				this.frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this);
 				this.$el.css('cursor','move');
 				this.$el.on('mousedown', this.initSorter);
 				this.startSelectComponent();
-				//Avoid strange moving behavior
+				// Avoid strange moving behavior
 				this.$el.addClass(this.noSelClass);
 			},
 
@@ -31,8 +29,10 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				var el = $(e.target).data('model');
 				if(!el.get('draggable'))
 					return;
-				if(this.sorter)
+				// Avoid badge showing on move
-					this.sorter.startSort(e.target);
+				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);
 			},
@@ -44,21 +44,6 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				this.enable();
 			},
 
-			/**
-			 * Hover command. Helps to avoid selecting not movable elements, eg. wrapper
-			 * @param {Object}	e
-			 * @private
-			 */
-			onHover: function(e) {
-				e.stopPropagation();
-
-			  var $this 	= $(e.target);
-			  if($this.data('model').get('draggable')){
-					 $this.addClass(this.hoverClass);
-					 this.attachBadge(e.target);
-			    }
-			},
-
 			/** Say what to do after the component was selected (selectComponent)
 			 * @param Event
 			 * @param Object Selected element
@@ -82,25 +67,21 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 
 			run: function(editor, sender, opts){
 				this.editor = editor;
-
+				this.$el = this.$wrapper;
-				// Activate sorter, at any run? In layers, is called once at any stack
+				this.$badge = $(this.getBadge());
-				var utils = this.editor.Utils;
+				this.$badge.addClass(this.badgeClass);
-				if(utils && utils.Sorter)
+				this.$hl = $(this.canvas.getHighlighter());
-					this.sorter = new utils.Sorter({
+				this.$hl.addClass(this.hoverClass);
-						container: this.$el.get(0),
-						containerSel: '*',
-						itemSel: '*',
-						pfx: this.ppfx,
-						onEndMove: this.onEndMove,
-						direction: 'a',
-						nested: 1,
-					});
-
 				this.enable();
 			},
 
 			stop: function(){
 				this.stopSelectComponent();
+				this.$badge = $(this.getBadge());
+				this.$badge.removeClass(this.badgeClass);
+				this.$hl = $(this.canvas.getHighlighter());
+				this.$hl.removeClass(this.hoverClass);
+				this.frameEl.contentWindow.onscroll = null;
 				this.$el.css('cursor','');//changes back aspect of the cursor
 				this.$el.unbind();//removes all attached events
 				this.$el.removeClass(this.noSelClass);

src/commands/view/SelectPosition.js

@@ -4,9 +4,10 @@ define(function() {
 
 			/**
 			 * Start select position event
+			 * @param {HTMLElement} trg
 			 * @private
 			 * */
-			startSelectPosition: function() {
+			startSelectPosition: function(trg, doc) {
 				this.isPointed = false;
 				var utils = this.editorModel.Utils;
 				if(utils && !this.sorter)
@@ -17,12 +18,13 @@ define(function() {
 						itemSel: '*',
 						pfx: this.ppfx,
 						direction: 'a',
+						document: doc,
 						nested: 1,
 					});
 				var offDim = this.getOffsetDim();
 				this.sorter.offTop = offDim.top;
 				this.sorter.offLeft = offDim.left;
-				this.sorter.startSort();
+				this.sorter.startSort(trg);
 			},
 
 			/**

src/utils/Sorter.js

@@ -26,6 +26,7 @@ define(['backbone'],
         // Frame offset
         this.offTop = o.offsetTop || 0;
         this.offleft = o.offsetLeft || 0;
+        this.document = o.document || document;
         this.dropContent = '';
       },
 
@@ -117,11 +118,11 @@ define(['backbone'],
 
         if(this.eV){
           this.eV.className += ' ' + this.freezeClass;
-          $(document).on('mouseup',this.endMove);
+          $(this.document).on('mouseup',this.endMove);
         }
 
         this.$el.on('mousemove',this.onMove);
-        $(document).on('keypress',this.rollback);
+        $(this.document).on('keypress',this.rollback);
       },
 
       /**
@@ -397,7 +398,7 @@ define(['backbone'],
         method = pos.method;
         var elDim = dims[pos.index];
         plh.style.borderColor = 'transparent ' + brdCol;
-        plh.style.borderWidth = brd + ' ' + (brd + 2);
+        plh.style.borderWidth = brd + un + ' ' + (brd + 2) + un;
         plh.style.margin = '-' + brd + 'px 0 0';
         if(elDim){
           // If it's not in flow (like 'float' element)
@@ -407,7 +408,7 @@ define(['backbone'],
             t = elDim[0] + marg;
             l = (method == 'before') ? (elDim[1] - marg) : (elDim[1] + elDim[3] - marg);
             plh.style.borderColor = brdCol + ' transparent';
-            plh.style.borderWidth = (brd + 2) + ' ' + brd;
+            plh.style.borderWidth = (brd + 2) + un + ' ' + brd + un;
             plh.style.margin = '0 0 0 -' + brd + 'px';
           }else{
             w = elDim[3] + un;
@@ -443,8 +444,8 @@ define(['backbone'],
        * */
       endMove: function(e){
         this.$el.off('mousemove', this.onMove);
-        $(document).off('mouseup', this.endMove);
+        $(this.document).off('mouseup', this.endMove);
-        $(document).off('keypress', this.rollback);
+        $(this.document).off('keypress', this.rollback);
         this.plh.style.display = 'none';
         var clsReg = new RegExp('(?:^|\\s)'+this.freezeClass+'(?!\\S)', 'gi');
         if(this.eV)

styles/css/main.css

@@ -2658,6 +2658,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     position: absolute;
     outline: 1px solid #3b97e3;
     pointer-events: none; }
+  .wte-cv-canvas .wte-highlighter-warning {
+    outline: 3px solid #ffca6f; }
   .wte-cv-canvas .wte-highlighter-sel {
     outline: 3px solid #3b97e3; }
   .wte-cv-canvas #wte-tools {
@@ -2758,7 +2760,7 @@ ol.example li.placeholder:before {
 *.wte-com-hover-move, div.wte-com-hover-move {
   outline: 3px solid #ffca6f; }
 
-.wte-com-badge, .wte-com-badge-red, .wte-com-badge-yellow, .wte-badge {
+.wte-com-badge, .wte-com-badge-red, .wte-badge {
   pointer-events: none;
   background-color: #3b97e3;
   color: #fff;
@@ -2772,7 +2774,7 @@ ol.example li.placeholder:before {
 .wte-com-badge-red {
   background-color: #DD3636; }
 
-.wte-com-badge-yellow {
+.wte-badge-warning {
   background-color: #ffca6f; }
 
 .wte-placeholder, .wte-com-placeholder {

styles/scss/main.scss

@@ -150,6 +150,10 @@ $imageCompDim:	50px;
     pointer-events: none;
   }
 
+  .#{$app-prefix}highlighter-warning{
+    outline: 3px solid $colorYell;
+  }
+
   .#{$app-prefix}highlighter-sel{
     outline: 3px solid $colorBlue;
   }
@@ -253,8 +257,7 @@ ol.example li.placeholder:before {position: absolute;}
 	@extend .#{$com-prefix}badge;
 	background-color: $colorRed;
 }
-.#{$com-prefix}badge-yellow{
+.#{$app-prefix}badge-warning{
-	@extend .#{$com-prefix}badge;
 	background-color: $colorYell;
 }
 .#{$app-prefix}placeholder, .#{$com-prefix}placeholder{