Support multiple moving

src/commands/index.js

@@ -129,6 +129,7 @@ module.exports = () => {
           const em = ed.getModel();
           const event = opts && opts.event;
           const sel = ed.getSelected();
+          const selAll = [...ed.getSelectedAll()];
           const toolbarStyle = ed.Canvas.getToolbarEl().style;
           const nativeDrag = event && event.type == 'dragstart';
 
@@ -155,7 +156,7 @@ module.exports = () => {
 
           const onEnd = (e, opts) => {
             em.runDefault();
-            em.setSelected(sel);
+            ed.select(selAll);
             sel.emitUpdate();
             dragger && dragger.blur();
           };
@@ -184,7 +185,8 @@ module.exports = () => {
 
             const cmdMove = ed.Commands.get('move-comp');
             cmdMove.onEndMoveFromModel = onEnd;
-            cmdMove.initSorterFromModel(sel);
+            // cmdMove.initSorterFromModel(sel);
+            cmdMove.initSorterFromModels(selAll);
           }
 
           sel.set('status', 'freezed-selected');

src/commands/view/MoveComponent.js

@@ -81,6 +81,24 @@ module.exports = _.extend({}, SelectPosition, SelectComponent, {
     on(this.getContentWindow(), 'keydown', this.rollback);
   },
 
+  /**
+   * Init sorter from model
+   * @param  {Object} model
+   * @private
+   */
+  initSorterFromModels(models) {
+    // TODO: if one only check for `draggable`
+    // Avoid badge showing on move
+    this.cacheEl = null;
+    models = [...models];
+    const lastModel = models[models.length - 1];
+    const doc = this.frameEl.contentDocument;
+    this.startSelectPosition(lastModel.view.el, doc);
+    this.sorter.draggable = lastModel.get('draggable');
+    this.sorter.toMove = models.reverse();
+    this.sorter.onEndMove = this.onEndMoveFromModel.bind(this);
+  },
+
   onEndMoveFromModel() {
     off(this.getContentWindow(), 'keydown', this.rollback);
   },
@@ -142,8 +160,7 @@ module.exports = _.extend({}, SelectPosition, SelectComponent, {
     this.getBadgeEl().removeClass(this.badgeClass);
     this.getHighlighterEl().removeClass(this.hoverClass);
     var wp = this.$wrapper;
-    wp
-      .css('cursor', '')
+    wp.css('cursor', '')
       .unbind()
       .removeClass(this.noSelClass);
   }

src/editor/model/Editor.js

@@ -1,4 +1,4 @@
-import { isUndefined, defaults } from 'underscore';
+import { isUndefined, defaults, isArray } from 'underscore';
 import { getModel } from 'utils/mixins';
 
 const deps = [
@@ -233,11 +233,17 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   setSelected(el, opts = {}) {
-    const model = getModel(el, $);
-    if (model && !model.get('selectable')) return;
+    const multiple = isArray(el);
+    const els = multiple ? el : [el];
     const selected = this.get('selected');
-    selected.remove(selected.filter(sel => sel !== model));
-    this.addSelected(model, opts);
+    multiple && selected.remove(selected.models);
+
+    els.forEach(el => {
+      const model = getModel(el, $);
+      if (model && !model.get('selectable')) return;
+      !multiple && selected.remove(selected.filter(sel => sel !== model));
+      this.addSelected(model, opts);
+    });
   },
 
   /**

src/utils/Sorter.js

@@ -1,6 +1,6 @@
 import Backbone from 'backbone';
-import { isString, isFunction } from 'underscore';
-import { on, off, matches } from 'utils/mixins';
+import { isString, isFunction, isArray } from 'underscore';
+import { on, off, matches, getElement } from 'utils/mixins';
 const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({
@@ -482,9 +482,9 @@ module.exports = Backbone.View.extend({
    * @param  {HTMLElement} trg
    * @return {Boolean}
    */
-  validTarget(trg) {
-    let srcModel = this.getSourceModel();
-    let src = srcModel && srcModel.view && srcModel.view.el;
+  validTarget(trg, src) {
+    let srcModel = this.getSourceModel(src);
+    src = srcModel && srcModel.view && srcModel.view.el;
     let trgModel = this.getTargetModel(trg);
     trg = trgModel && trgModel.view && trgModel.view.el;
     let result = {
@@ -925,11 +925,23 @@ module.exports = Backbone.View.extend({
     }
 
     if (this.moved) {
-      created = this.move(this.target, src, this.lastPos);
+      const toMove = this.toMove;
+      const onEndMove = this.onEndMove;
+
+      if (!toMove || !toMove.length) {
+        created = this.move(this.target, src, this.lastPos);
+        isFunction(onEndMove) && onEndMove(created, this);
+      } else {
+        const toMoveArr = isArray(toMove) ? toMove : [toMove];
+        toMoveArr.forEach(model => {
+          console.log('toMove', model);
+          created = this.move(this.target, model, this.lastPos);
+          isFunction(onEndMove) && onEndMove(created, this);
+        });
+      }
     }
 
     if (this.plh) this.plh.style.display = 'none';
-    if (isFunction(this.onEndMove)) this.onEndMove(created, this);
     var dragHelper = this.dragHelper;
 
     if (dragHelper) {
@@ -949,11 +961,12 @@ module.exports = Backbone.View.extend({
    * */
   move(dst, src, pos) {
     var em = this.em;
-    em && em.trigger('component:dragEnd:before', dst, src, pos); // @depricated
+    const srcEl = getElement(src);
+    em && em.trigger('component:dragEnd:before', dst, srcEl, pos); // @depricated
     var warns = [];
     var index = pos.index;
     var modelToDrop, modelTemp, created;
-    var validResult = this.validTarget(dst);
+    var validResult = this.validTarget(dst, srcEl);
     var targetCollection = $(dst).data('collection');
     var model = validResult.srcModel;
     var droppable = validResult.droppable;