Update create command

src/canvas/main.js

@@ -100,6 +100,15 @@ define(function(require) {
 				return this.CanvasView.placerEl;
 			},
 
+			/**
+			 * Returns ghost element
+			 * @return {HTMLElement}
+			 * @private
+			 */
+			getGhostEl: function(){
+				return this.CanvasView.ghostEl;
+			},
+
 			/**
 			 * Render canvas
 			 * */

src/canvas/view/CanvasView.js

@@ -15,10 +15,12 @@ function(Backbone, FrameView) {
 			this.badgeEl = $('<div>', {class: this.ppfx + 'badge'}).get(0);
 			this.placerEl = $('<div>', {class: this.ppfx + 'placeholder'}).get(0);
 			this.placerIntEl = $('<div>', {class: this.ppfx + 'placeholder-int'}).get(0);
+      this.ghostEl = $('<div>', {class: this.ppfx + 'ghost'}).get(0);
 			this.placerEl.appendChild(this.placerIntEl);
 			this.toolsEl.appendChild(this.hlEl);
 			this.toolsEl.appendChild(this.badgeEl);
 			this.toolsEl.appendChild(this.placerEl);
+      this.toolsEl.appendChild(this.ghostEl);
 		},
 
 		/**

src/commands/view/CreateComponent.js

@@ -1,105 +1,59 @@
-/**
- * @module CreateComponent
- * @private
- * */
 define(['backbone','./SelectPosition'],
 	function(Backbone, SelectPosition) {
 
 		return _.extend({}, SelectPosition, {
 
-			newElement : null,
-
-			tempComponent: { style:{} },
-
 			init: function(opt) {
 				_.bindAll(this,'startDraw','draw','endDraw','rollback');
-				this.config		= opt;
+				this.config = opt || {};
-				this.heightType = this.config.newFixedH ? 'height' : 'min-height';
+				this.hType = this.config.newFixedH ? 'height' : 'min-height';
-			},
-
-			/**
-			 * Returns creation placeholder
-			 *
-			 * @return 	{Object}
-			 * @private
-			 * */
-			getCreationPlaceholder: function()
-			{
-				return this.newElem;
-			},
-
-			/**
-			 * Removes creation placeholder
-			 *
-			 * @return 	void
-			 * @private
-			 * */
-			removeCreationPlaceholder: function()
-			{
-				this.newElem.remove();
 			},
 
 			/**
 			 * Start with enabling to select position and listening to start drawning
-			 * @return 	void
 			 * @private
 			 * */
-			enable: function()
+			enable: function() {
-			{
 				SelectPosition.enable.apply(this, arguments);
-				this.$el.css('cursor','crosshair');
+				this.$wr.css('cursor','crosshair');
-				this.enableToDraw();
+				this.$wr.on('mousedown', this.startDraw);
-				if(this.sorter)
+				this.plh = $(this.canvas.getPlacerEl());
-					this.sorter.startSort();
+				this.ghost = this.canvas.getGhostEl();
-			},
-
-			/**
-			 * Enable user to draw components
-			 *
-			 * @return 	void
-			 * @private
-			 * */
-			enableToDraw: function()
-			{
-				this.$el.on('mousedown', this.startDraw);
-				//Need to disable selection
 			},
 
 			/**
 			 * Start drawing component
-			 * @param 	{Object}	e	Event
+			 * @param 	{Object} e	Event
-			 *
-			 * @return 	void
 			 * @private
 			 * */
-			startDraw : function(e)
+			startDraw : function(e) {
-			{
 				e.preventDefault();
-				this.stopSelectPosition();														//Interrupt selecting position
+				this.stopSelectPosition();
-				this.tempComponent = { style: {} };												//Reset the helper
+				this.ghost.style.display = 'block';
+				this.frameOff = this.getOffsetDim();
+				this.startPos = {
+					top : e.pageY + this.frameOff.top,
+					left: e.pageX + this.frameOff.left
+				};
+
 				this.isDragged = false;
+				this.tempComponent = {style: {}};
 				this.beforeDraw(this.tempComponent);
-				this.getPositionPlaceholder().addClass('change-placeholder');					//Change color of the position placeholder
+				this.updateSize(this.startPos.top, this.startPos.left, 0, 0);
-				this.newElemOrig = { top : e.pageY, left: e.pageX };
+
-				this.newElem = $('<div>', {class: "tempComp"}).css(this.newElemOrig);			//Create helper element with initial position
+				this.$wr.on('mousemove', this.draw);
-				this.newElem.data('helper',1);
+				this.$wr.on('mouseup', this.endDraw);
-				$('body').append(this.newElem);													//Show helper component
+				this.$canvas.on('mousemove', this.draw);
-				this.parentElem=this.newElem.parent();											//For percent count
+				$(document).on('mouseup', this.endDraw);
-				this.targetC = this.outsideElem;
+				$(document).on('keypress', this.rollback);
-				$(document).mousemove(this.draw);
-				$(document).mouseup(this.endDraw);
-				$(document).keypress(this.rollback);
 			},
 
 			/**
 			 * While drawing the component
 			 * @param 	{Object}	e	Event
-			 *
-			 * @return 	void
 			 * @private
 			 * */
-			draw: function(e)
+			draw: function(e) {
-			{
 				this.isDragged = true;
 				this.updateComponentSize(e);
 			},
@@ -107,25 +61,23 @@ define(['backbone','./SelectPosition'],
 			/**
 			 * End drawing component
 			 * @param 	{Object}	e Event
-			 *
-			 * @return 	void
 			 * @private
 			 * */
-			endDraw : function(e)
+			endDraw : function(e) {
-			{
+				this.$wr.off('mousemove', this.draw);
+				this.$wr.off('mouseup', this.endDraw);
+				this.$canvas.off('mousemove', this.draw);
 				$(document).off('mouseup', this.endDraw);
-				$(document).off('mousemove', this.draw);
 				$(document).off('keypress',this.rollback);
+
 				var model = {};
 				if(this.isDragged){																						//Only if the mouse was moved
 					this.updateComponentSize(e);
 					this.setRequirements(this.tempComponent);
 					model = this.create(null,this.tempComponent,this.posIndex,this.posMethod);
 				}
-				if(this.getPositionPlaceholder())
+				this.ghost.style.display = 'none';
-					this.getPositionPlaceholder().removeClass('change-placeholder');			//Turn back the original color of the placeholder
+				this.startSelectPosition();
-				this.startSelectPosition();														//Return with selecting new position
-				this.removeCreationPlaceholder();												//Remove the element used for size indication
 				this.afterDraw(model);
 			},
 
@@ -139,8 +91,7 @@ define(['backbone','./SelectPosition'],
 			 * @return 	{Object} Created model
 			 * @private
 			 * */
-			create: function(target, component, posIndex, method)
+			create: function(target, component, posIndex, method) {
-			{
 				var index = posIndex || 0;
 				if(this.posTargetCollection && this.posTargetModel.get('droppable')){
 					//Check config parameters for center in wrapper
@@ -168,8 +119,8 @@ define(['backbone','./SelectPosition'],
 				var c	= this.config;
 				if(component.style.width.replace(/\D/g,'') < c.minComponentW)				//Check min width
 					component.style.width = c.minComponentW +'px';
-				if(component.style[this.heightType].replace(/\D/g,'') < c.minComponentH)		//Check min height
+				if(component.style[this.hType].replace(/\D/g,'') < c.minComponentH)		//Check min height
-					component.style[this.heightType] = c.minComponentH +'px';
+					component.style[this.hType] = c.minComponentH +'px';
 				if(c.newFixedH)															//Set overflow in case of fixed height
 					component.style.overflow = 'auto';
 				if(!this.absoluteMode){
@@ -183,47 +134,48 @@ define(['backbone','./SelectPosition'],
 			/**
 			 * Update new component size while drawing
 			 * @param 	{Object} 	e	Event
-			 *
-			 * @return 	void
 			 * @private
 			 * */
-			updateComponentSize : function (e)
+			updateComponentSize : function (e) {
-			{
+				var y = e.pageY + this.frameOff.top;
-		       	var newLeft		= e.pageX;
+	     	var x = e.pageX + this.frameOff.left;
-		        var newTop      = e.pageY;
+	      var start = this.startPos;
-		        var startLeft   = this.newElemOrig.left;
+	      var top = start.top;
-		        var startTop    = this.newElemOrig.top;
+	      var left = start.left;
-		       	var newWidth    = newLeft - startLeft;//$(this.newElem).offset().left
+	      var height = y - top;
-		        var newHeight   = newTop - startTop;//$(this.newElem).offset().top
+	     	var width = x - left;
-		        if (newLeft < this.newElemOrig.left) {
+	      if (x < left) {
-		        	startLeft   = newLeft;
+	      	left = x;
-		            newWidth    = this.newElemOrig.left - newLeft;
+					width = start.left - x;
-		        }
+	      }
-		        if (newTop < this.newElemOrig.top) {
+	      if (y < top) {
-		        	startTop 	 = newTop;
+	      	top = y;
-		            newHeight    = this.newElemOrig.top - newTop;
+					height = start.top - y;
-		        }
+	      }
-		        newWidth = this.absoluteMode ? (newWidth/this.parentElem.width()*100+"%") : newWidth+'px';
+	      this.updateSize(top, left, width, height);
-		        this.newElem[0].style.left 	= startLeft+'px';
+			},
-	        	this.newElem[0].style.top 	= startTop+'px';
+
-	        	this.newElem[0].style.width = newWidth;
+			/**
-	        	this.newElem[0].style['min-height'] = newHeight+'px';
+			 * Update size
-		        this.tempComponent.style.width = newWidth;
+			 * @private
-		        this.tempComponent.style[this.heightType] = newHeight+"px";
+			 */
-		        this.tempComponent.style.left = startLeft + "px";
+			updateSize: function(top, left, width, height){
-		        this.tempComponent.style.top = startTop + "px";
+				var u = 'px';
+				var ghStl = this.ghost.style;
+				var compStl = this.tempComponent.style;
+				ghStl.top = compStl.top = top + u;
+				ghStl.left = compStl.left = left + u;
+				ghStl.width = compStl.width = width + u;
+				ghStl[this.hType] = compStl[this.hType] = height +  u;
 			},
 
 			/**
 			 * Used to bring the previous situation before event started
 			 * @param 	{Object}	e		Event
 			 * @param 	{Boolean} 	forse	Indicates if rollback in anycase
-			 *
-			 * @return 	void
 			 * @private
 			 * */
-			rollback: function(e, force)
+			rollback: function(e, force) {
-			{
 				var key = e.which || e.keyCode;
 				if(key == this.config.ESCAPE_KEY || force){
 					this.isDragged = false;
@@ -235,8 +187,6 @@ define(['backbone','./SelectPosition'],
 			/**
 			 * This event is triggered at the beginning of a draw operation
 			 * @param 	{Object}	component	Object component before creation
-			 *
-			 * @return 	void
 			 * @private
 			 * */
 			beforeDraw: function(component){
@@ -246,8 +196,6 @@ define(['backbone','./SelectPosition'],
 			/**
 			 * This event is triggered at the end of a draw operation
 			 * @param 	{Object}	model	Component model created
-			 *
-			 * @return 	void
 			 * @private
 			 * */
 			afterDraw: function(model){},
@@ -255,8 +203,6 @@ define(['backbone','./SelectPosition'],
 			/**
 			 * This event is triggered just before a create operation
 			 * @param 	{Object} 	component	Object component before creation
-			 *
-			 * @return 	void
 			 * @private
 			 * */
 			beforeCreation: function(component){},
@@ -264,8 +210,6 @@ define(['backbone','./SelectPosition'],
 			/**
 			 * This event is triggered at the end of a create operation
 			 * @param 	{Object}	model	Component model created
-			 *
-			 * @return 	void
 			 * @private
 			 * */
 			afterCreation: function(model){},
@@ -274,27 +218,14 @@ define(['backbone','./SelectPosition'],
 			run: function(editor, sender, opts){
 				this.editor = editor;
 				this.sender	= sender;
-				this.$el 	= this.$wrapper;
+				this.$wr = this.$wrapper;
-/*
-				var utils = editor.Utils;
-				if(utils && utils.Sorter && !this.sorter)
-					this.sorter = new utils.Sorter({
-						container: this.$canvas.get(0),
-						containerSel: '*',
-						itemSel: '*',
-						pfx: this.ppfx,
-						//onEndMove: this.onEndMove,
-						direction: 'a',
-						nested: 1,
-					});
-*/
 				this.enable();
 			},
 
 			stop: function(){
 				this.stopSelectPosition();
-				this.$el.css('cursor','');													//Changes back aspect of the cursor
+				this.$wrapper.css('cursor','');													//Changes back aspect of the cursor
-				this.$el.unbind();															//Removes all attached events
+				this.$wrapper.unbind();															//Removes all attached events
 			}
 		});
 	});

src/commands/view/SelectPosition.js

@@ -22,7 +22,7 @@ define(function() {
 				var offDim = this.getOffsetDim();
 				this.sorter.offTop = offDim.top;
 				this.sorter.offLeft = offDim.left;
-				this.$wrapper.on('mousemove', this.selectingPosition);
+				this.sorter.startSort();
 			},
 
 			/**
@@ -44,7 +44,6 @@ define(function() {
 			 * @private
 			 * */
 			stopSelectPosition: function() {
-				this.$wrapper.off('mousemove',this.selectingPosition);
 				this.posTargetCollection = null;
 				this.posIndex 	= this.posMethod=='after' && this.cDim.length!==0 ? this.posIndex + 1 : this.posIndex; //Normalize
 				if(this.sorter){
@@ -86,8 +85,8 @@ define(function() {
 			stop: function() {
 				this.frameEl.contentWindow.onscroll = null;
 				this.stopSelectPosition();
-				this.$wrapper.css('cursor','');//changes back aspect of the cursor
+				this.$wrapper.css('cursor','');
-				this.$wrapper.unbind();//removes all attached events
+				this.$wrapper.unbind();
 			}
 		};
 });

styles/css/main.css

@@ -2645,6 +2645,15 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     outline: medium none;
     width: 100%;
     border: none; }
+  .wte-cv-canvas .wte-ghost {
+    display: none;
+    pointer-events: none;
+    background-color: #5b5b5b;
+    border: 2px dashed #ccc;
+    position: absolute;
+    z-index: 10;
+    opacity: 0.55;
+    filter: alpha(opacity=55); }
   .wte-cv-canvas .wte-highlighter, .wte-cv-canvas .wte-highlighter-sel {
     position: absolute;
     outline: 1px solid #3b97e3;
@@ -2961,15 +2970,6 @@ ol.example li.placeholder:before {
 .btn.expand, .wte-nv-navigator .wte-nv-item .expand#wte-nv-btn-eye {
   background-image: none; }
 
-.tempComp {
-  background-color: #5b5b5b;
-  border: 2px dashed #ccc;
-  outline: none !important;
-  position: absolute;
-  z-index: 55;
-  opacity: 0.55;
-  filter: alpha(opacity=55); }
-
 /***********  Components *************/
 .wte-comp-image-placeholder {
   display: block;

styles/scss/main.scss

@@ -134,6 +134,16 @@ $imageCompDim:	50px;
     border: none;
   }
 
+  .#{$app-prefix}ghost{
+    display: none;
+    pointer-events: none;
+    background-color: #5b5b5b;
+    border: 2px dashed #ccc;
+    position: absolute;
+    z-index: 10;
+    @include opacity(0.55);
+  }
+
   .#{$app-prefix}highlighter, .#{$app-prefix}highlighter-sel{
     position: absolute;
     outline: 1px solid $colorBlue;
@@ -465,14 +475,6 @@ $leftWidth: 16.5%;
 
 /* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */
 .btn.expand{ background-image: none;}
-.tempComp{
-	background-color: #5b5b5b;
-	border: 2px dashed #ccc;
-	outline:none !important;
-	position: absolute; z-index: 55;
-	opacity:0.55;
-	filter: alpha(opacity=55);
-}
 
 /***********  Components *************/