Fix clone method

src/commands/main.js

@@ -104,7 +104,7 @@ define(function(require) {
 				defaultCommands.resize = require('./view/Resize');
 
 				defaultCommands['tlb-delete'] = {
-					run: function(ed){
+					run: function(ed) {
 						var sel = ed.getSelected();
 
 						if(!sel || !sel.get('removable')) {
@@ -112,7 +112,6 @@ define(function(require) {
 							return;
 						}
 
-						//sel.destroy();
 						sel.collection.remove(sel);
 						ed.Canvas.getToolbarEl().style.display = 'none';
 						ed.editor.runDefault();

src/commands/view/MoveComponent.js

@@ -66,6 +66,15 @@ define(['backbone', './SelectComponent','./SelectPosition'],
 				this.startSelectPosition(el, this.frameEl.contentDocument);
 				this.sorter.draggable = drag;
 				this.sorter.onEndMove = this.onEndMoveFromModel.bind(this);
+
+				/*
+				this.sorter.setDragHelper(el);
+				var dragHelper = this.sorter.dragHelper;
+				dragHelper.className = this.ppfx + 'drag-helper';
+				dragHelper.innerHTML = '';
+				dragHelper.backgroundColor = 'white';
+				*/
+
 				this.stopSelectComponent();
 				this.getContentWindow().on('keydown', this.rollback);
 			},

src/dom_components/model/Component.js

@@ -87,7 +87,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 
         this.opt = opt;
         this.sm = opt ? opt.sm || {} : {};
-        this.config 	= o || {};
+        this.config = o || {};
         this.defaultC = this.config.components || [];
         this.defaultCl = this.normalizeClasses(this.get('classes') || this.config.classes || []);
         this.components	= new Components(this.defaultC, opt);
@@ -182,7 +182,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
        * Override original clone method
        * @private
        */
-      clone: function() {
+      clone: function(reset) {
         var attr = _.clone(this.attributes),
         comp = this.get('components'),
         traits = this.get('traits'),
@@ -190,24 +190,24 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
         attr.components = [];
         attr.classes = [];
         attr.traits = [];
-        if(comp.length){
-          comp.each(function(md,i) {
-            attr.components[i]	= md.clone();
-          });
-        }
-        if(traits.length){
-          traits.each(function(md, i) {
-            attr.traits[i] = md.clone();
-          });
-        }
-        if(cls.length){
-          cls.each(function(md,i) {
-            attr.classes[i]	= md.get('name');
-          });
-        }
+
+        comp.each(function(md,i) {
+          attr.components[i]	= md.clone(1);
+        });
+        traits.each(function(md, i) {
+          attr.traits[i] = md.clone();
+        });
+        cls.each(function(md,i) {
+          attr.classes[i]	= md.get('name');
+        });
+
         attr.status = '';
         attr.view = '';
 
+        if(reset){
+          this.opt.collection = null;
+        }
+
         return new this.constructor(attr, this.opt);
       },
 

styles/css/main.css

@@ -2667,6 +2667,18 @@ $fontColorActive: #4f8ef7;
   z-index: 10 !important;
   width: auto; }
 
+.gjs-drag-helper {
+  background-color: #3b97e3 !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  z-index: 10 !important;
+  transform: scale(0.3) !important;
+  transform-origin: top left !important;
+  -webkit-transform-origin: top left !important;
+  margin: 15px !important;
+  transition: none !important;
+  outline: none !important; }
+
 .gjs-grabbing,
 .gjs-grabbing * {
   cursor: grabbing !important;

styles/scss/main.scss

@@ -162,6 +162,19 @@ $fontV: 20;//random(1000)
   width: auto;
 }
 
+.#{$app-prefix}drag-helper {
+  background-color: $colorBlue !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  z-index: 10 !important;
+  transform: scale(0.3) !important;
+  transform-origin: top left !important;
+  -webkit-transform-origin: top left !important;
+  margin: 15px !important;
+  transition: none !important;
+  outline: none !important;
+}
+
 .#{$app-prefix}grabbing,
 .#{$app-prefix}grabbing * {
   cursor: grabbing !important;