Add new `component:drag` events #2500

src/commands/index.js

@@ -139,11 +139,18 @@ export default () => {
           // Without setTimeout the ghost image disappears
           nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();
 
-          const onEnd = (e, opts) => {
+          const onStart = data => {
+            em.trigger('component:drag:start', data);
+          };
+          const onDrag = data => {
+            em.trigger('component:drag', data);
+          };
+          const onEnd = (e, opts, data) => {
             em.runDefault(defComOptions);
             selAll.forEach(sel => sel.set('status', 'selected'));
             ed.select(selAll);
             sel.emitUpdate();
+            em.trigger('component:drag:end', data);
           };
 
           if (includes(modes, mode)) {
@@ -165,6 +172,8 @@ export default () => {
             }
 
             const cmdMove = ed.Commands.get('move-comp');
+            cmdMove.onStart = onStart;
+            cmdMove.onDrag = onDrag;
             cmdMove.onEndMoveFromModel = onEnd;
             cmdMove.initSorterFromModels(selAll);
           }

src/commands/view/MoveComponent.js

@@ -94,9 +94,10 @@ export default extend({}, SelectPosition, SelectComponent, {
     const frame = (this.em.get('currentFrame') || {}).model;
     const el = lastModel.getEl(frame);
     const doc = el.ownerDocument;
-    this.startSelectPosition(el, doc);
+    this.startSelectPosition(el, doc, { onStart: this.onStart });
     this.sorter.draggable = lastModel.get('draggable');
     this.sorter.toMove = models;
+    this.sorter.onMoveClb = this.onDrag;
     this.sorter.onEndMove = this.onEndMoveFromModel.bind(this);
     this.stopSelectComponent();
     on(this.getContentWindow(), 'keydown', this.rollback);

src/commands/view/SelectPosition.js

@@ -7,7 +7,7 @@ export default {
    * @param {HTMLElement} trg
    * @private
    * */
-  startSelectPosition(trg, doc) {
+  startSelectPosition(trg, doc, opts = {}) {
     this.isPointed = false;
     var utils = this.editorModel.get('Utils');
     const container = trg.ownerDocument.body;
@@ -28,6 +28,7 @@ export default {
         scale: () => this.em.getZoomDecimal()
       });
 
+    if (opts.onStart) this.sorter.onStart = opts.onStart;
     trg && this.sorter.startSort(trg, { container });
   },
 

src/utils/Sorter.js

@@ -150,12 +150,12 @@ export default Backbone.View.extend({
    * @param {Boolean} active
    */
   toggleSortCursor(active) {
-    const em = this.em;
+    const { em } = this;
     const cv = em && em.get('Canvas');
 
     // Avoid updating body className as it causes a huge repaint
     // Noticeable with "fast" drag of blocks
-    active ? cv.startAutoscroll() : cv.stopAutoscroll();
+    cv && (active ? cv.startAutoscroll() : cv.stopAutoscroll());
   },
 
   /**
@@ -327,7 +327,12 @@ export default Backbone.View.extend({
     on(container, 'mousemove dragover', this.onMove);
     on(docs, 'mouseup dragend touchend', this.endMove);
     on(docs, 'keydown', this.rollback);
-    onStart && onStart();
+    onStart &&
+      onStart({
+        target: srcModel,
+        parent: srcModel && srcModel.parent(),
+        index: srcModel && srcModel.index()
+      });
 
     // Avoid strange effects on dragging
     em && em.clearSelection();
@@ -485,7 +490,13 @@ export default Backbone.View.extend({
       }
     }
 
-    isFunction(onMoveClb) && onMoveClb(e);
+    isFunction(onMoveClb) &&
+      onMoveClb({
+        event: e,
+        target: sourceModel,
+        parent: targetModel,
+        index: pos.index + (pos.method == 'after' ? 1 : 0)
+      });
 
     em &&
       em.trigger('sorter:drag', {
@@ -1009,13 +1020,14 @@ export default Backbone.View.extend({
     const container = this.getContainerEl();
     const onEndMove = this.onEndMove;
     const { target, lastPos } = this;
+    let srcModel;
     off(container, 'mousemove dragover', this.onMove);
     off(docs, 'mouseup dragend touchend', this.endMove);
     off(docs, 'keydown', this.rollback);
     this.plh.style.display = 'none';
 
     if (src && this.selectOnEnd) {
-      var srcModel = this.getSourceModel();
+      srcModel = this.getSourceModel();
       if (srcModel && srcModel.set) {
         srcModel.set('status', '');
         srcModel.set('status', 'selected');
@@ -1043,7 +1055,14 @@ export default Backbone.View.extend({
     this.toggleSortCursor();
 
     this.toMove = null;
-    isFunction(onEndMove) && moved.forEach(m => onEndMove(m, this));
+    isFunction(onEndMove) &&
+      moved.forEach(m =>
+        onEndMove(m, this, {
+          target: srcModel,
+          parent: srcModel && srcModel.parent(),
+          index: srcModel && srcModel.index()
+        })
+      );
   },
 
   /**