Update block manager

src/block_manager/view/BlockView.js

@@ -23,6 +23,7 @@ function(Backbone) {
       if(!this.config.getSorter)
         return;
       var sorter = this.config.getSorter();
+      //this.config.dragHelper(this.el.cloneNode(1));
       sorter.startSort(this.el);
       sorter.setDropContent(this.model.get('content'));
       this.doc.on('mouseup', this.onDrop);

src/block_manager/view/BlocksView.js

@@ -4,13 +4,14 @@ function(Backbone, BlockView) {
   return Backbone.View.extend({
 
     initialize: function(opts, config) {
-      _.bindAll(this, 'getSorter', 'onDrag', 'onDrop');
+      _.bindAll(this, 'getSorter', 'onDrag', 'onDrop', 'dragHelper', 'moveHelper');
       this.config = config || {};
       this.ppfx = this.config.pStylePrefix || '';
       this.listenTo(this.collection, 'add', this.addTo);
       this.em = this.config.em;
       this.tac = 'test-tac';
       this.config.getSorter = this.getSorter;
+      this.config.dragHelper = this.dragHelper;
     },
 
     /**
@@ -49,15 +50,30 @@ function(Backbone, BlockView) {
      * @private
      */
     onDrag: function(){
+      this.em.stopDefault();
       this.em.get('Canvas').getBody().style.cursor = 'grabbing';
       document.body.style.cursor = 'grabbing';
     },
 
+    dragHelper: function(el){
+      el.className += ' ' + this.ppfx + 'bdrag';
+      this.helper = el;
+      document.body.appendChild(el);
+      $(this.em.get('Canvas').getBody()).on('mousemove', this.moveHelper);
+      $(document).on('mousemove', this.moveHelper);
+    },
+
+    moveHelper: function(e){
+      this.helper.style.left = e.pageX + 'px';
+      this.helper.style.top = e.pageY + 'px';
+    },
+
     /**
      * Callback when block is dropped
      * @private
      */
     onDrop: function(){
+      this.em.runDefault();
       this.em.get('Canvas').getBody().style.cursor = '';
       document.body.style.cursor = '';
     },

src/commands/view/OpenStyleManager.js

@@ -19,8 +19,11 @@ define(['StyleManager'], function(StyleManager) {
 
 					// Device Manager
 					var dvm = em.DeviceManager;
-					if(dvm && config.showDevices)
-						this.$cn2.append(dvm.render());
+					if(dvm && config.showDevices){
+						var devicePanel = panels.addPanel({ id: 'devices-c'});
+						devicePanel.set('appendContent', dvm.render()).trigger('change:appendContent');
+						//this.$cn2.append(dvm.render());
+					}
 
 					// Class Manager container
 					var clm = em.ClassManager;

src/demo.js

@@ -61,19 +61,21 @@ require(['config/require-config'], function() {
 panels: {
         defaults    : [{
           id    : 'commands',
-          buttons : [{
+          buttons : [/*{
             id        : 'selcomp',
             className : 'fa fa fa-mouse-pointer',
             command   : 'select-comp',
             active: 1,
-          },{
+          },*/{
             id        : 'create',
             className : 'fa fa-plus-square-o icon-add-comp',
             command   : 'create-comp',
+            stopDefaultCommand: 1,
           },{
             id: 'image-comp',
             className: 'fa fa-picture-o',
             dragDrop: 1,
+            stopDefaultCommand: 1,
             options:  {
               content: '<div style="width:100%; padding:7px">'+
                           '<div class="redbg" style="width:33.333%; min-height:75px; padding:7px; float:left;"></div>' +

src/device_manager/view/DevicesView.js

@@ -11,8 +11,10 @@ function(Backbone, devicesTemplate) {
 
     initialize: function(o) {
       this.config = o.config || {};
+      this.em = this.config.em;
       this.ppfx = this.config.pStylePrefix || '';
       this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd;
+      this.listenTo(this.em, 'change:device', this.updateSelect);
       this.delegateEvents();
     },
 
@@ -27,7 +29,7 @@ function(Backbone, devicesTemplate) {
      * @private
      */
     updateDevice: function(){
-      var em = this.config.em;
+      var em = this.em;
       if(em){
         var devEl = this.devicesEl;
         var val = devEl ? devEl.val() : '';
@@ -35,6 +37,19 @@ function(Backbone, devicesTemplate) {
       }
     },
 
+    /**
+     * Update select value on device update
+     * @private
+     */
+    updateSelect: function(){
+      var em = this.em;
+      if(em){
+        var device = this.em.getDeviceModel();
+        var name = device ? device.get('name') : '';
+        this.devicesEl.val(name);
+      }
+    },
+
     /**
      * Return devices options
      * @return {string} String of options

src/editor/config/config.js

@@ -38,7 +38,7 @@ define(function () {
 		storageType: 'local',
 
 		// The css that could only be seen (for instance, inside the code viewer)
-		protectedCss: 'body{margin:0;height:100%}#wrapper{height:100%}',
+		protectedCss: 'body{margin:0;height:100%}#wrapper{min-height:100%; overflow:auto}',
 
 		//Configurations for Asset Manager
 		assetManager			: {},
@@ -114,6 +114,9 @@ define(function () {
 	      }],
 		},
 
+		// Default command
+		defaultCommand: 'select-comp',
+
 		// If true render a select of available devices
 		showDevices: 1,
 

src/editor/main.js

@@ -40,6 +40,7 @@
  * @param {Object} [config.domComponents={}] Components configuration, see the relative documentation
  * @param {Object} [config.panels={}] Panels configuration, see the relative documentation
  * @param {Object} [config.showDevices=true] If true render a select of available devices inside style manager panel
+ * @param {string} [config.defaultCommand='select-comp'] Command to execute when no other command is running
  * @example
  * var editor = grapesjs.init({
  * 	container : '#gjs',

src/editor/model/Editor.js

@@ -776,5 +776,30 @@ define([
 				return this.get('DeviceManager').get(name);
 			},
 
+			/**
+			 * Run default command if setted
+			 * @private
+			 */
+			runDefault: function(){
+				var command = this.get('Commands').get(this.config.defaultCommand);
+				if(!command || this.defaultRunning)
+					return;
+				command.stop(this, this);
+				command.run(this, this);
+				this.defaultRunning = 1;
+			},
+
+			/**
+			 * Stop default command
+			 * @private
+			 */
+			stopDefault: function(){
+				var command = this.get('Commands').get(this.config.defaultCommand);
+				if(!command)
+					return;
+				command.stop(this, this);
+				this.defaultRunning = 0;
+			},
+
 		});
 	});

src/editor/view/EditorView.js

@@ -9,7 +9,8 @@ function(Backbone){
 			this.className = this.conf.stylePrefix + 'editor';
 			this.model.on('loaded', function(){
 				this.pn.active();
-			});
+				this.model.runDefault();
+			}, this);
 		},
 
 		render: function(){

src/panels/model/Button.js

@@ -15,6 +15,8 @@ define([ 'backbone','require'],
 			options: {},
 			active: false,
 			dragDrop: false,
+			runDefaultCommand: true,
+			stopDefaultCommand: false,
 		},
 
 		initialize: function(options) {

src/panels/view/ButtonView.js

@@ -260,8 +260,19 @@ function(Backbone, require) {
 
 			if(this.parentM)
 				this.swapParent();
+			var active = this.model.get('active');
+			this.model.set('active', !active);
 
-			this.model.set('active', !this.model.get('active'));
+			// If the stop is requested
+			var command = this.em.get('Commands').get('select-comp');
+
+			if(active){
+				if(this.model.get('runDefaultCommand'))
+					this.em.runDefault();
+			}else{
+				if(this.model.get('stopDefaultCommand'))
+					this.em.stopDefault();
+			}
 		},
 
 		/**

src/utils/Sorter.js

@@ -30,6 +30,7 @@ define(['backbone'],
         this.offleft = o.offsetLeft || 0;
         this.document = o.document || document;
         this.dropContent = '';
+        this.helper = '';
       },
 
       /**
@@ -123,6 +124,12 @@ define(['backbone'],
           $(this.document).on('mouseup',this.endMove);
         }
 
+        if(this.helper){
+          this.helperEl = this.helper;
+          this.helperEl.className += ' ' + this.ppfx + 'bdrag';
+          document.body.appendChild(this.helperEl);
+        }
+
         this.$el.on('mousemove',this.onMove);
         $(document).on('keypress',this.rollback);
 
@@ -165,6 +172,12 @@ define(['backbone'],
           this.lastPos = pos;
         }
 
+        if(this.helperEl){
+          var helperS = this.helperEl.style;
+          helperS.left = this.rX + 'px';
+          helperS.top = this.rY + 'px';
+        }
+
         if(typeof this.onMoveClb === 'function')
           this.onMoveClb(e);
       },
@@ -459,6 +472,9 @@ define(['backbone'],
           this.move(this.target, this.eV, this.lastPos);
         if(this.plh)
           this.plh.style.display = 'none';
+        this.helperEl = '';
+        if(this.helper)
+          this.helper.parentNode.removeChild(this.helper);
         if(typeof this.onEndMove === 'function')
           this.onEndMove();
       },

styles/css/main.css

@@ -2594,6 +2594,11 @@ $fontColorActive: #4f8ef7;
 .wte-color-active, .wte-pn-btn.wte-pn-active, .wte-btnt.wte-pn-active {
   color: #f8f8f8; }
 
+.wte-bdrag {
+  position: absolute;
+  z-index: 10;
+  width: auto; }
+
 /********************* MAIN ************************/
 .clear {
   clear: both; }
@@ -3073,9 +3078,12 @@ ol.example li.placeholder:before {
 .wte-devices-c {
   display: flex;
   align-items: center;
+  padding: 4px;
+  /*
   padding: 10px 5px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  margin-bottom: 10px; }
+  margin-bottom: 10px;
+  */ }
   .wte-devices-c .wte-device-label {
     flex-grow: 2;
     font-size: 0.7em;
@@ -3413,6 +3421,10 @@ ol.example li.placeholder:before {
   cursor: all-scroll;
   margin: 2.5%; }
 
+.wte-block.wte-bdrag {
+  width: auto;
+  padding: 0; }
+
 /********* END Block manager **********/
 /********* Class manager **********/
 .wte-clm-tags {

styles/scss/main.scss

@@ -96,6 +96,12 @@ $imageCompDim:	50px;
   color: $fontColorActive;
 }
 
+.#{$app-prefix}bdrag{
+  position: absolute;
+  z-index: 10;
+  width: auto;
+}
+
 /********************* MAIN ************************/
 .clear{ clear:both }
 .no-select{
@@ -608,9 +614,12 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
 .#{$app-prefix}devices-c{
   display: flex;
   align-items: center;
+  padding: 4px;
+  /*
   padding: 10px 5px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   margin-bottom: 10px;
+  */
 
   .#{$app-prefix}device-label {
     flex-grow: 2;
@@ -993,6 +1002,11 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
   margin: 2.5%;
 }
 
+.#{$app-prefix}block.#{$app-prefix}bdrag{
+ width: auto;
+ padding: 0;
+}
+
 /********* END Block manager **********/