Fix `matches` method in Sorter. Fixes #484

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.12.27",
+  "version": "0.12.28",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.12.27",
+  "version": "0.12.28",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/block_manager/view/BlockView.js

@@ -30,8 +30,8 @@ module.exports = Backbone.View.extend({
     this.config.em.refreshCanvas();
     var sorter = this.config.getSorter();
     sorter.setDragHelper(this.el, e);
-    sorter.startSort(this.el);
     sorter.setDropContent(this.model.get('content'));
+    sorter.startSort(this.el);
     on(document, 'mouseup', this.endDrag);
   },
 

src/utils/Sorter.js

@@ -1,4 +1,5 @@
-import {on, off} from 'utils/mixins';
+import { isString } from 'underscore';
+import { on, off, matches } from 'utils/mixins';
 const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({
@@ -175,13 +176,7 @@ module.exports = Backbone.View.extend({
    * @return {Boolean}
    */
   matches(el, selector, useBody) {
-    var startEl = el.parentNode || document.body;
+    return matches.call(el, selector);
-    //startEl = useBody ? startEl.ownerDocument.body : startEl;
-    var els = startEl.querySelectorAll(selector);
-    var i = 0;
-    while (els[i] && els[i] !== el)
-      ++i;
-    return !!els[i];
   },
 
   /**
@@ -242,6 +237,7 @@ module.exports = Backbone.View.extend({
     const container = this.getContainerEl();
     const docs = this.getDocuments();
     const onStart = this.onStart;
+    let srcModel;
     let plh = this.plh;
     this.dropModel = null;
     this.moved = 0;
@@ -262,7 +258,7 @@ module.exports = Backbone.View.extend({
     }
 
     if (src) {
-      const srcModel = this.getSourceModel(src);
+      srcModel = this.getSourceModel(src);
       srcModel && srcModel.set && srcModel.set('status', 'freezed');
     }
 
@@ -274,6 +270,8 @@ module.exports = Backbone.View.extend({
     // Avoid strange effects on dragging
     em && em.clearSelection();
     this.toggleSortCursor(1);
+
+    em && em.trigger('component:drag-start', src, srcModel);
   },
 
   /**
@@ -285,6 +283,7 @@ module.exports = Backbone.View.extend({
     return $(elem).data('model');
   },
 
+
   /**
    * Get the model of the current source element (element to drag)
    * @return {Model}
@@ -310,6 +309,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
+
   /**
    * Highlight target
    * @param  {Model|null} model
@@ -335,11 +335,13 @@ module.exports = Backbone.View.extend({
    * @param {Event} e
    * */
   onMove(e) {
+    const em = this.em;
     this.moved = 1;
+
     // Turn placeholder visibile
     var plh = this.plh;
     var dsp = plh.style.display;
-    if(!dsp || dsp === 'none')
+    if (!dsp || dsp === 'none')
       plh.style.display = 'block';
 
     // Cache all necessary positions
@@ -349,8 +351,8 @@ module.exports = Backbone.View.extend({
     var rY = (e.pageY - this.elT) + this.el.scrollTop;
     var rX = (e.pageX - this.elL) + this.el.scrollLeft;
 
-    if (this.canvasRelative && this.em) {
+    if (this.canvasRelative && em) {
-      var mousePos = this.em.get('Canvas').getMouseRelativeCanvas(e);
+      var mousePos = em.get('Canvas').getMouseRelativeCanvas(e);
       rX = mousePos.x;
       rY = mousePos.y;
     }
@@ -359,9 +361,10 @@ module.exports = Backbone.View.extend({
     this.rY = rY;
     this.eventMove = e;
 
-    //var target = this.getTargetFromEl(e.target);
+    //var targetNew = this.getTargetFromEl(e.target);
-    var dims = this.dimsFromTarget(e.target, rX, rY);
+    const dims = this.dimsFromTarget(e.target, rX, rY);
-    let targetModel = this.getTargetModel(this.target);
+    const target = this.target;
+    const targetModel = this.getTargetModel(target);
     this.selectTargetModel(targetModel);
 
     this.lastDims = dims;
@@ -387,6 +390,15 @@ module.exports = Backbone.View.extend({
 
     if(typeof this.onMoveClb === 'function')
       this.onMoveClb(e);
+
+    em && em.trigger('component:drag', {
+      target,
+      targetModel,
+      dims,
+      pos,
+      x: rX,
+      y: rY,
+    });
   },
 
   /**
@@ -475,14 +487,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' ? this.matches(src, droppable) : droppable;
+    droppable = isString(droppable) ? 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' ? this.matches(trg, draggable) : draggable;
+    draggable = isString(draggable) ? this.matches(trg, draggable) : draggable;
     result.draggable = draggable;
 
     if (!droppable || !draggable) {
@@ -500,6 +512,7 @@ module.exports = Backbone.View.extend({
    * @return {Array<Array>}
    */
   dimsFromTarget(target, rX, rY) {
+    const em = this.em;
     var dims = [];
 
     if (!target) {
@@ -531,6 +544,8 @@ module.exports = Backbone.View.extend({
 
       // Check if the source is valid with the target
       let validResult = this.validTarget(target);
+      em && em.trigger('component:drag-validation', validResult);
+
       if (!validResult.valid && this.targetP) {
         return this.dimsFromTarget(this.targetP, rX, rY);
       }
@@ -575,11 +590,13 @@ module.exports = Backbone.View.extend({
     let target = el;
     let targetParent;
     let targetPrev = this.targetPrev;
+    const em = this.em;
     const containerSel = this.containerSel;
+    const itemSel = this.itemSel;
 
     // Select the first valuable target
-    if (!this.matches(target, `${this.itemSel}, ${containerSel}`)) {
+    if (!this.matches(target, `${itemSel}, ${containerSel}`)) {
-      target = this.closest(target, this.itemSel);
+      target = this.closest(target, itemSel);
     }
 
     // If draggable is an array the target will be one of those
@@ -599,7 +616,10 @@ module.exports = Backbone.View.extend({
 
       // If the current target is not valid (src/trg reasons) try with
       // the parent one (if exists)
-      if (!this.validTarget(target).valid && targetParent) {
+      const validResult = this.validTarget(target);
+      em && em.trigger('component:drag-validation', validResult);
+
+      if (!validResult.valid && targetParent) {
         return this.getTargetFromEl(targetParent);
       }
 

src/utils/mixins.js

@@ -1,3 +1,6 @@
+const elProt = window.Element.prototype;
+const matches = elProt.matches || elProt.webkitMatchesSelector || elProt.mozMatchesSelector || elProt.msMatchesSelector;
+
 const on = (el, ev, fn) => {
   ev = ev.split(/\s+/);
   el = el instanceof Array ? el : [el];
@@ -36,6 +39,7 @@ export {
   on,
   off,
   upFirst,
+  matches,
   camelCase,
   getUnitFromValue
 }