Merge branch 'sorter-refactor' into dev

src/canvas/index.js

@@ -206,11 +206,7 @@ module.exports = () => {
     * @private
     */
     offset(el) {
-      var rect = el.getBoundingClientRect();
+      return CanvasView.offset(el);
-      return {
-        top: rect.top + document.body.scrollTop,
-        left: rect.left + document.body.scrollLeft
-      };
     },
 
     /**

src/demo.js

@@ -1,334 +0,0 @@
-require(['config/require-config'], function() {
-
-	require(['grapesjs/main'],function (grapesjs){
-
-		var editor	= grapesjs.init(
-
-		{
-      noticeOnUnload: 0,
-			container	: '#gjs',
-			height: '100%',
-			fromElement: true,
-			/*
-			components: [{
-				type: 'text',
-				style:{
-					width:'100px',
-					height:'100px',
-					margin: '50px auto',
-				},
-				traits: ['title'],
-				components: [{
-					type: 'textnode',
-					content: 'text node row',
-				},{
-					type: 'textnode',
-					content: ', another text node',
-				},{
-					type: 'link',
-					content: 'someLink',
-				},{
-					type: 'textnode',
-					content: " More text node  ---   ",
-				}],
-			}],*/
-
-			storageManager:{
-				autoload: 0,
-				storeComponents: 1,
-				storeStyles: 1,
-			},
-			commands: 		{
-					defaults		: [{
-													id: 	'open-github',
-													run: 	function(editor, sender){
-														sender.set('active',false);
-														window.open('https://github.com/artf/grapesjs','_blank');
-													}
-												},{
-													id: 	'undo',
-													run: 	function(editor, sender){
-														sender.set('active',false);
-														editor.UndoManager.undo(true);
-													}
-												},{
-													id: 	'redo',
-													run: 	function(editor, sender){
-														sender.set('active',false);
-														editor.UndoManager.redo(true);
-													}
-												},{
-													id: 	'clean-all',
-													run: 	function(editor, sender){
-														sender.set('active',false);
-														if(confirm('Are you sure to clean the canvas?')){
-															var comps = editor.DomComponents.clear();
-														}
-													}
-												}],
-			},
-
-			assetManager: {
-				storageType			: '',
-				storeOnChange		: true,
-				storeAfterUpload	: true,
-				assets				: [
-					      				   { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250},
-					      				   { type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250},
-					      				   { type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728},
-					      				   { type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320},
-					      				   { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
-				      				   ]
-			},
-
-
-			styleManager : {
-				sectors: [{
-					name: 'General',
-					open: false,
-					buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom'],
-				},{
-					name: 'Dimension',
-					open: false,
-					buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
-				},{
-					name: 'Typography',
-					open: false,
-					buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'],
-					properties: [{
-						property: 'text-align',
-						list		: [
-							{value: 'left', className: 'fa fa-align-left'},
-							{value: 'center', className: 'fa fa-align-center' },
-							{value: 'right', className: 'fa fa-align-right'},
-							{value: 'justify', className: 'fa fa-align-justify'}
-						],
-					}]
-				},{
-					name: 'Decorations',
-					open: false,
-					buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
-				},{
-					name: 'Extra',
-					open: false,
-					buildProps: ['transition', 'perspective', 'transform'],
-				},{
-					name: 'Dimension',
-					open: false,
-					buildProps: ['margin'],
-					properties:[{
-              name: 'Marginnnn',
-              property: 'margin',
-              type: 'composite',
-              properties:[{
-                name: 'Top',
-                property: 'margin-top',
-              },{
-                name: 'Right',
-                property: 'margin-right',
-              },{
-                name: 'Bottom',
-                property: 'margin-bottom',
-              },{
-                name: 'Left',
-                property: 'margin-left',
-              },],
-            }/*{
-						name		: 'Center blocksss',
-						property	: 'margins',
-						type		: 'select',
-						defaults 	: '0',
-						list		:	[{
-											value 		: '0',
-											name			: 'Normal',
-										},{
-											value 		: '0 auto',
-											name			: 'Center',
-										}],
-					}*/],
-					},{
-            name: 'Flex',
-            open: false,
-            properties: [{
-              name    : 'Flex Container',
-              property  : 'display',
-              type    : 'select',
-              defaults  : 'block',
-              list    : [{
-                        value     : 'block',
-                        name   : 'Disable',
-                      },{
-                        value   : 'flex',
-                        name   : 'Enable',
-                      }],
-            },{
-              name: 'Flex Parent',
-              property: 'label-parent-flex',
-            },{
-              name      : 'Direction',
-              property  : 'flex-direction',
-              type    : 'radio',
-              defaults  : 'row',
-              list    : [{
-                        value   : 'row',
-                        name    : 'Row',
-                        className : 'icons-flex icon-dir-row',
-                        title   : 'Row',
-                      },{
-                        value   : 'row-reverse',
-                        name    : 'Row reverse',
-                        className : 'icons-flex icon-dir-row-rev',
-                        title   : 'Row reverse',
-                      },{
-                        value   : 'column',
-                        name    : 'Column',
-                        title   : 'Column',
-                        className : 'icons-flex icon-dir-col',
-                      },{
-                        value   : 'column-reverse',
-                        name    : 'Column reverse',
-                        title   : 'Column reverse',
-                        className : 'icons-flex icon-dir-col-rev',
-                      }],
-            },{
-            	name      : 'Wrap',
-              property  : 'flex-wrap',
-              type    : 'radio',
-              defaults  : 'nowrap',
-              list    : [{
-                        value   : 'nowrap',
-                        title   : 'Single line',
-                      },{
-                        value   : 'wrap',
-                        title   : 'Multiple lines',
-                      },{
-                        value   : 'wrap-reverse',
-                        title   : 'Multiple lines reverse',
-                      }],
-            },{
-              name      : 'Justify',
-              property  : 'justify-content',
-              type    : 'radio',
-              defaults  : 'flex-start',
-              list    : [{
-                        value   : 'flex-start',
-                        className : 'icons-flex icon-just-start',
-                        title   : 'Start',
-                      },{
-                        value   : 'flex-end',
-                        title    : 'End',
-                        className : 'icons-flex icon-just-end',
-                      },{
-                        value   : 'space-between',
-                        title    : 'Space between',
-                        className : 'icons-flex icon-just-sp-bet',
-                      },{
-                        value   : 'space-around',
-                        title    : 'Space around',
-                        className : 'icons-flex icon-just-sp-ar',
-                      },{
-                        value   : 'center',
-                        title    : 'Center',
-                        className : 'icons-flex icon-just-sp-cent',
-                      }],
-            },{
-              name      : 'Align',
-              property  : 'align-items',
-              type    : 'radio',
-              defaults  : 'center',
-              list    : [{
-                        value   : 'flex-start',
-                        title    : 'Start',
-                        className : 'icons-flex icon-al-start',
-                      },{
-                        value   : 'flex-end',
-                        title    : 'End',
-                        className : 'icons-flex icon-al-end',
-                      },{
-                        value   : 'stretch',
-                        title    : 'Stretch',
-                        className : 'icons-flex icon-al-str',
-                      },{
-                        value   : 'center',
-                        title    : 'Center',
-                        className : 'icons-flex icon-al-center',
-                      }],
-            },{
-              name: 'Flex Children',
-              property: 'label-parent-flex',
-            },{
-              name:     'Order',
-              property:   'order',
-              type:     'integer',
-              defaults :  0,
-              min: 0
-            },{
-              name    : 'Flex',
-              property  : 'flex',
-              type    : 'composite',
-              properties  : [{
-                      name:     'Grow',
-                      property:   'flex-grow',
-                      type:     'integer',
-                      defaults :  0,
-                      min: 0
-                    },{
-                      name:     'Shrink',
-                      property:   'flex-shrink',
-                      type:     'integer',
-                      defaults :  0,
-                      min: 0
-                    },{
-                      name:     'Basis',
-                      property:   'flex-basis',
-                      type:     'integer',
-                      units:    ['px','%',''],
-                      unit: '',
-                      defaults :  'auto',
-                    }],
-            },{
-              name      : 'Align',
-              property  : 'align-self',
-              type      : 'radio',
-              defaults  : 'auto',
-              list    : [{
-                        value   : 'auto',
-                        name    : 'Auto',
-                      },{
-                        value   : 'flex-start',
-                        title    : 'Start',
-                        className : 'icons-flex icon-al-start',
-                      },{
-                        value   : 'flex-end',
-                        title    : 'End',
-                        className : 'icons-flex icon-al-end',
-                      },{
-                        value   : 'stretch',
-                        title    : 'Stretch',
-                        className : 'icons-flex icon-al-str',
-                      },{
-                        value   : 'center',
-                        title    : 'Center',
-                        className : 'icons-flex icon-al-center',
-                      }],
-            }]
-          }
-
-				],
-
-			},
-		}
-
-
-		);
-
-
-    window.editor = editor;
-
-	});
-});

src/style_manager/view/PropertyRadioView.js

@@ -36,7 +36,7 @@ module.exports = require('./PropertyView').extend({
         });
 
         const inputHld = this.el.querySelector(`#${pfx}input-holder`);
-        inputHld.innerHTML = `<div>${inputStr}</div>`;
+        inputHld.innerHTML = `<div class="${ppfx}radio-items">${inputStr}</div>`;
         this.input = inputHld.firstChild;
       }
     }

src/styles/scss/_gjs_inputs.scss

@@ -137,6 +137,10 @@
     right: $inputPadding - 2px;
     top: 0;
   }
+
+  &-color {
+    width: 100%;
+  }
 }
 
 .#{$app-prefix}field-color {
@@ -207,7 +211,8 @@
 }
 
 .#{$app-prefix}radio-item {
-  float: left;
+  flex: 1 1 auto;
+  text-align: center;
   border-left: 1px solid $darkTextShadow;
 
   &:first-child {
@@ -225,6 +230,10 @@
   input:checked + .#{$app-prefix}radio-item-label {
     background-color: rgba(255, 255, 255, 0.2);
   }
+
+  &s {
+    display: flex;
+  }
 }
 
 .#{$app-prefix}radio-item-label {

src/utils/Sorter.js

@@ -57,6 +57,15 @@ module.exports = Backbone.View.extend({
     return this.el;
   },
 
+
+  getDocuments() {
+    const em = this.em;
+    const canvasDoc = em && em.get('Canvas').getBody().ownerDocument;
+    const docs = [document];
+    canvasDoc && docs.push(canvasDoc);
+    return docs;
+  },
+
   /**
    * Triggered when the offset of the editro is changed
    */
@@ -227,11 +236,15 @@ module.exports = Backbone.View.extend({
    * @param {HTMLElement} src
    * */
   startSort(src) {
+    const em = this.em;
     const itemSel = this.itemSel;
     const contSel = this.containerSel;
+    const container = this.getContainerEl();
+    const docs = this.getDocuments();
+    const onStart = this.onStart;
+    let plh = this.plh;
     this.dropModel = null;
     this.moved = 0;
-    //this.$document = $([document, trg.ownerDocument]);
 
     // Check if the start element is a valid one, if not get the
     // closest valid one
@@ -242,29 +255,24 @@ module.exports = Backbone.View.extend({
     this.eV = src;
 
     // Create placeholder if not yet exists
-    if (!this.plh) {
+    if (!plh) {
-      this.plh = this.createPlaceholder();
+      plh = this.createPlaceholder();
-      this.getContainerEl().appendChild(this.plh);
+      container.appendChild(plh);
+      this.plh = plh;
     }
 
     if (src) {
       const srcModel = this.getSourceModel(src);
       srcModel && srcModel.set && srcModel.set('status', 'freezed');
-      this.$document.on('mouseup', this.endMove);
     }
 
-    this.$el.on('mousemove', this.onMove);
+    on(container, 'mousemove', this.onMove);
-    $(document).on('keydown', this.rollback);
+    on(docs, 'mouseup', this.endMove);
-    this.$document.on('keydown', this.rollback);
+    on(docs, 'keydown', this.rollback);
-
+    onStart && onStart();
-    if(typeof this.onStart === 'function')
-      this.onStart();
 
     // Avoid strange effects on dragging
-    if(this.em) {
+    em && em.clearSelection();
-      this.em.clearSelection();
-    }
-
     this.toggleSortCursor(1);
   },
 
@@ -328,7 +336,6 @@ module.exports = Backbone.View.extend({
    * */
   onMove(e) {
     this.moved = 1;
-
     // Turn placeholder visibile
     var plh = this.plh;
     var dsp = plh.style.display;
@@ -348,8 +355,12 @@ module.exports = Backbone.View.extend({
       rY = mousePos.y;
     }
 
-    var dims = this.dimsFromTarget(e.target, rX, rY);
+    this.rX = rX;
+    this.rY = rY;
+    this.eventMove = e;
 
+    //var target = this.getTargetFromEl(e.target);
+    var dims = this.dimsFromTarget(e.target, rX, rY);
     let targetModel = this.getTargetModel(this.target);
     this.selectTargetModel(targetModel);
 
@@ -464,14 +475,14 @@ module.exports = Backbone.View.extend({
     droppable = droppable instanceof Backbone.Collection ? 1 : droppable;
     droppable = droppable instanceof Array ? droppable.join(', ') : droppable;
     result.dropInfo = droppable;
-    droppable = typeof droppable === 'string' ? src.matches(droppable) : droppable;
+    droppable = typeof droppable === 'string' ? this.matches(src, droppable) : droppable;
     result.droppable = droppable;
 
     // check if the source is draggable in target
     let draggable = srcModel.get('draggable');
     draggable = draggable instanceof Array ? draggable.join(', ') : draggable;
     result.dragInfo = draggable;
-    draggable = typeof draggable === 'string' ? trg.matches(draggable) : draggable;
+    draggable = typeof draggable === 'string' ? this.matches(trg, draggable) : draggable;
     result.draggable = draggable;
 
     if (!droppable || !draggable) {
@@ -496,7 +507,7 @@ module.exports = Backbone.View.extend({
     }
 
     // Select the first valuable target
-    if (!target.matches(`${this.itemSel}, ${this.containerSel}`)) {
+    if (!this.matches(target, `${this.itemSel}, ${this.containerSel}`)) {
       target = this.closest(target, this.itemSel);
     }
 
@@ -537,21 +548,110 @@ module.exports = Backbone.View.extend({
     // Target when I will drop element to sort
     this.target = this.prevTarget;
 
-    // Generally also on every new target the poiner enters near
+    // Generally, on any new target the poiner enters inside its area and
-    // to borders, so have to to check always
+    // triggers nearBorders(), so have to take care of this
     if(this.nearBorders(this.prevTargetDim, rX, rY) ||
        (!this.nested && !this.cacheDims.length)) {
-        if (!this.validTarget(this.targetP).valid) {
+        const targetParent = this.targetP;
-          return this.dimsFromTarget(this.targetP, rX, rY);
+
+        if (targetParent && this.validTarget(targetParent).valid) {
+          dims = this.cacheDimsP;
+          this.target = targetParent;
         }
-        dims = this.cacheDimsP;
-        this.target = this.targetP;
     }
 
     this.lastPos = null;
     return dims;
   },
 
+
+  /**
+   * Get valid target from element
+   * This method should replace dimsFromTarget()
+   * @param  {HTMLElement} el
+   * @return {HTMLElement}
+   */
+  getTargetFromEl(el) {
+    let target = el;
+    let targetParent;
+    let targetPrev = this.targetPrev;
+    const containerSel = this.containerSel;
+
+    // Select the first valuable target
+    if (!this.matches(target, `${this.itemSel}, ${containerSel}`)) {
+      target = this.closest(target, this.itemSel);
+    }
+
+    // If draggable is an array the target will be one of those
+    // TODO check if this options is used somewhere
+    if (this.draggable instanceof Array) {
+      target = this.closest(target, this.draggable.join(','));
+    }
+
+    // Check if the target is different from the previous one
+    if (targetPrev && targetPrev != target) {
+        this.targetPrev = '';
+    }
+
+    // New target found
+    if (!this.targetPrev) {
+      targetParent = this.closest(target, containerSel);
+
+      // If the current target is not valid (src/trg reasons) try with
+      // the parent one (if exists)
+      if (!this.validTarget(target).valid && targetParent) {
+        return this.getTargetFromEl(targetParent);
+      }
+
+      this.targetPrev = target;
+    }
+
+    // Generally, on any new target the poiner enters inside its area and
+    // triggers nearBorders(), so have to take care of this
+    if (this.nearElBorders(target)) {
+      targetParent = this.closest(target, containerSel);
+
+      if (targetParent && this.validTarget(targetParent).valid) {
+        target = targetParent;
+      }
+    }
+
+    return target;
+  },
+
+
+  /**
+   * Check if the current pointer is neare to element borders
+   * @return {Boolen}
+   */
+  nearElBorders(el) {
+    const off = 10;
+    const rect = el.getBoundingClientRect();
+    const body = el.ownerDocument.body;
+    const {x, y} = this.getCurrentPos();
+    const top = rect.top + body.scrollTop;
+    const left = rect.left + body.scrollLeft;
+    const width = rect.width;
+    const height = rect.height;
+
+    //console.log(pos, {top, left});
+    if ( y < (top + off) || // near top edge
+        y > (top + height - off) || // near bottom edge
+        x < (left + off) || // near left edge
+        x > (left + width - off)  // near right edge
+      ) {
+        return 1;
+    }
+  },
+
+
+  getCurrentPos() {
+    const ev = this.eventMove;
+    const x = ev.pageX || 0;
+    const y = ev.pageY || 0;
+    return {x, y};
+  },
+
   /**
    * Returns dimensions and positions about the element
    * @param {HTMLElement} el
@@ -605,7 +705,7 @@ module.exports = Backbone.View.extend({
     for (var i = 0, len = ch.length; i < len; i++) {
       var el = ch[i];
 
-      if (!el.matches(this.itemSel)) {
+      if (!this.matches(el, this.itemSel)) {
         continue;
       }
 
@@ -761,9 +861,13 @@ module.exports = Backbone.View.extend({
    * */
   endMove(e) {
     var created;
-    this.$el.off('mousemove', this.onMove);
+    const docs = this.getDocuments();
-    this.$document.off('mouseup', this.endMove);
+    const container = this.getContainerEl();
-    this.$document.off('keydown', this.rollback);
+    off(container, 'mousemove', this.onMove);
+    off(docs, 'mouseup', this.endMove);
+    off(docs, 'keydown', this.rollback);
+    //this.$document.off('mouseup', this.endMove);
+    //this.$document.off('keydown', this.rollback);
     this.plh.style.display = 'none';
     var clsReg = new RegExp('(?:^|\\s)'+this.freezeClass+'(?!\\S)', 'gi');
     let src = this.eV;
@@ -873,15 +977,13 @@ module.exports = Backbone.View.extend({
    * @param {Bool} Indicates if rollback in anycase
    * */
   rollback(e) {
-    $(document).off('keydown', this.rollback);
+    off(this.getDocuments(), 'keydown', this.rollback);
-    this.$document.off('keydown', this.rollback);
+    const key = e.which || e.keyCode;
-    var key = e.which || e.keyCode;
 
     if (key == 27) {
-      this.moved = false;
+      this.moved = 0;
       this.endMove();
     }
-    return;
   },
 
 });