Update image command

src/canvas/view/CanvasView.js

@@ -38,7 +38,8 @@ function(Backbone, FrameView) {
         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  + 'no-select{user-select: none; -webkit-user-select:none; -moz-user-select: none}'+
-                       '.' + this.ppfx  + 'freezed{opacity: 0.5; pointer-events: none}';
+                       '.' + this.ppfx  + 'freezed{opacity: 0.5; pointer-events: none}' +
+                       '.' + this.ppfx  + 'plh-image{background:#f5f5f5; border:none; height:50px; width:50px; display:block; outline:3px solid #ffca6f; cursor:pointer}';
         if(protCss)
         	body.append('<style>' + frameCss + protCss + '</style>');
       }

src/commands/view/CommandAbstract.js

@@ -29,7 +29,6 @@ define(['backbone'],
 					this.setElement(this.getCanvas());
 
 				this.$canvas = this.$el;
-				//this.$wrapper			= this.$canvas.find('#'+this.wrapperId);
 				this.$wrapper = $(this.getCanvasWrapper());
 
 				this.init(this.config);
@@ -37,8 +36,6 @@ define(['backbone'],
 				this.frameEl = this.canvas.getFrameEl();
 				this.canvasTool = this.getCanvasTools();
 				this.bodyEl = this.getCanvasBody();
-
-				//frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this);
 			},
 
 			/**

src/commands/view/CreateComponent.js

@@ -7,6 +7,7 @@ define(['backbone','./SelectPosition'],
 				_.bindAll(this,'startDraw','draw','endDraw','rollback');
 				this.config = opt || {};
 				this.hType = this.config.newFixedH ? 'height' : 'min-height';
+				this.allowDraw = 1;
 			},
 
 			/**
@@ -16,7 +17,8 @@ define(['backbone','./SelectPosition'],
 			enable: function() {
 				SelectPosition.enable.apply(this, arguments);
 				this.$wr.css('cursor','crosshair');
-				this.$wr.on('mousedown', this.startDraw);
+				if(this.allowDraw)
+					this.$wr.on('mousedown', this.startDraw);
 				this.ghost = this.canvas.getGhostEl();
 			},
 
@@ -45,7 +47,7 @@ define(['backbone','./SelectPosition'],
 			 * Enable/Disable events
 			 * @param {Boolean} enable
 			 */
-			toggleEvents: function(enable){
+			toggleEvents: function(enable) {
 				var method = enable ? 'on' : 'off';
 				this.$wr[method]('mousemove', this.draw);
 				this.$wr[method]('mouseup', this.endDraw);
@@ -91,16 +93,19 @@ define(['backbone','./SelectPosition'],
 			 * @param {Object} component New component to create
 			 * @param {number} index Index inside the collection, 0 if no children inside
 			 * @param {string} method Before or after of the children
+			 * @param {Object} opts Options
 			 */
-			create: function(target, component, index, method) {
+			create: function(target, component, index, method, opts) {
 				index = method === 'after' ? index + 1 : index;
+				var opt = opts || {};
 				var $trg = $(target);
 				var trgModel = $trg.data('model');
         var trgCollection = $trg.data('collection');
         var droppable = trgModel ? trgModel.get('droppable') : 1;
-        if(trgCollection && droppable){
-        	return trgCollection.add(component, {at: index});
-        }else
+        opt.at = index;
+        if(trgCollection && droppable)
+        	return trgCollection.add(component, opt);
+        else
 					console.warn("Invalid target position");
 			},
 
@@ -110,8 +115,7 @@ define(['backbone','./SelectPosition'],
 			 * @return 	{Object} 	Component updated
 			 * @private
 			 * */
-			setRequirements: function(component)
-			{
+			setRequirements: function(component) {
 				var c	= this.config;
 				if(component.style.width.replace(/\D/g,'') < c.minComponentW)				//Check min width
 					component.style.width = c.minComponentW +'px';

src/commands/view/ImageComponent.js

@@ -16,33 +16,13 @@ define(['backbone', './InsertCustom'],
 				object.type = 'image';
 				object.style = {};
 				object.attributes = {};
-				if (!this.nearToFloat()) {
-					object.style.display	= 'block';
-				}
-				// This allow to avoid 'ghosts' on drag
 				object.attributes.onmousedown = 'return false';
-				if (this.config.firstCentered && (this.$wp.get(0) == this.posTargetEl.get(0)) ) {
-					object.style.margin 	= '0 auto';
+				if (this.config.firstCentered &&
+					 (this.$wrapper.get(0) == this.sorter.target) ) {
+					object.style.margin = '0 auto';
 				}
 			},
 
-			/**
-			 * Check if pointer is near to the float component
-			 * @return	{Integer}
-			 * @private
-			 * */
-			nearToFloat: function() {
-				var index 	= this.posIndex;
-				var isLastEl	= this.posIsLastEl;
-				if(this.cDim.length !== 0 && (
-						(!isLastEl && !this.cDim[index][4]) ||
-						(this.cDim[index-1] && !this.cDim[index-1][4]) ||
-						(isLastEl && !this.cDim[index-1][4]) ) )
-					return 1;
-				else
-					return 0;
-			},
-
 			/**
 			 * Trigger after insert
 			 * @param	{Object}	model	Model created after insert

src/commands/view/InsertCustom.js

@@ -1,27 +1,31 @@
-define(['backbone', './SelectPosition'],
-	function(Backbone, SelectPosition) {
+define(['backbone', './CreateComponent'],
+	function(Backbone, CreateComponent) {
 		/**
 		 * @class InsertCustom
 		 * @private
 		 * */
-		return _.extend({}, SelectPosition, {
+		return _.extend({}, CreateComponent, {
+
+			init: function(){
+				CreateComponent.init.apply(this, arguments);
+				this.allowDraw = 0;
+			},
 
 			/**
 			 * Run method
 			 * @private
 			 * */
-			run: function(em, sender, options){
-				this.enable();
+			run: function(em, sender, options) {
 				this.em = em;
 				this.sender = sender;
 				this.opt = options || {};
+				this.$wr = this.$wrapper;
+				this.enable();
 			},
 
 			enable: function(){
-				SelectPosition.enable.apply(this, arguments);
-				_.bindAll(this,'insertComponent');
-				this.$wp	= this.$wrapper;
-				this.$wp.on('click', this.insertComponent);
+				CreateComponent.enable.apply(this, arguments);
+				this.$wr.on('click', this.insertComponent.bind(this));
 			},
 
 			/**
@@ -29,13 +33,13 @@ define(['backbone', './SelectPosition'],
 			 * @private
 			 * */
 			insertComponent: function(){
-				this.$wp.off('click', this.insertComponent);
+				this.$wr.off('click', this.insertComponent);
 				this.stopSelectPosition();
-				//this.removePositionPlaceholder();
-				var object 	= this.buildContent();
+				var object = this.buildContent();
 				this.beforeInsert(object);
+				var index = this.sorter.lastPos.index;
 				// By default, collections do not trigger add event, so silent is used
-				var model = this.posTargetCollection.add(object, { at: this.posIndex, silent:false });
+				var model = this.create(this.sorter.target, object, index, null, {silent: false});
 
 				if(this.opt.terminateAfterInsert && this.sender)
 					this.sender.set('active',false);

src/commands/view/MoveComponent.js

@@ -6,7 +6,7 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 			init: function(o){
 				SelectComponent.init.apply(this, arguments);
 				_.bindAll(this, 'initSorter','rollback', 'onEndMove');
-				this.opt	= o;
+				this.opt = o;
 				this.hoverClass	= this.ppfx + 'highlighter-warning';
 				this.badgeClass	= this.ppfx + 'badge-warning';
 				this.noSelClass	= this.ppfx + 'no-select';

src/dom_components/view/ComponentImageView.js

@@ -13,8 +13,7 @@ define(['backbone', './ComponentView'],
 			ComponentView.prototype.initialize.apply(this, arguments);
 			this.listenTo( this.model, 'change:src', 	this.updateSrc);
 			this.listenTo( this.model, 'dblclick', 		this.openModal);
-			var compCls = this.config.imageCompClass || '';
-			this.classEmpty = this.pfx + 'image-placeholder' + (compCls ? ' ' + compCls : '');
+			this.classEmpty = this.ppfx + 'plh-image';
 
 			if(this.config.modal)
 				this.modal = this.config.modal;

src/dom_components/view/ComponentView.js

@@ -14,6 +14,7 @@ define(['backbone', './ComponentsView'],
 			initialize: function(opt){
 				this.config = opt.config || {};
 				this.pfx = this.config.stylePrefix || '';
+				this.ppfx = this.config.pStylePrefix || '';
 				this.components = this.model.get('components');
 				this.attr = this.model.get("attributes");
 				this.classe = this.attr.class || [];

src/editor/model/Editor.js

@@ -214,7 +214,7 @@ define([
 				if(this.StorageManager.getConfig().autoload)
 					comp = this.loadComponents();
 
-
+				cfg.pStylePrefix	= this.config.stylePrefix;
 				cfg.stylePrefix	= this.config.stylePrefix + cmpStylePfx;
 
 				if(comp)

styles/scss/main.scss

@@ -483,15 +483,15 @@ $leftWidth: 16.5%;
 
 .#{$comp-prefix}image-placeholder {
 	display:	block;
-  	background-color: #f5f5f5;
-  	color: 	$fontColorDk;
-  	height: $imageCompDim; width: $imageCompDim;
-  	line-height: $imageCompDim;
-  	outline: 3px solid $colorYell;
-  	outline-offset: -3px;
-  	text-align: center;
-  	font-size: $imageCompDim/3;
-  	cursor: pointer;
+	background-color: #f5f5f5;
+	color: 	$fontColorDk;
+	height: $imageCompDim; width: $imageCompDim;
+	line-height: $imageCompDim;
+	outline: 3px solid $colorYell;
+	outline-offset: -3px;
+	text-align: center;
+	font-size: $imageCompDim/3;
+	cursor: pointer;
 
   	&.fa-picture-o::after{
 		content:  "\f03e";