diff --git a/src/commands/index.js b/src/commands/index.js index 85aa09b2d..9991919d2 100644 --- a/src/commands/index.js +++ b/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'); diff --git a/src/commands/view/MoveComponent.js b/src/commands/view/MoveComponent.js index d7cb093d7..d8ea04801 100644 --- a/src/commands/view/MoveComponent.js +++ b/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); } diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index e3244fd15..0734d2ef3 100644 --- a/src/editor/model/Editor.js +++ b/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); + }); }, /** diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index d910e4d22..ee088e519 100644 --- a/src/utils/Sorter.js +++ b/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;