diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 11f21149e..eb6440279 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -322,54 +322,7 @@ export default { */ select(model, event = {}) { if (!model) return; - const ctrlKey = event.ctrlKey || event.metaKey; - const { shiftKey } = event; - const { editor, em } = this; - const multiple = editor.getConfig('multipleSelection'); - - if (ctrlKey && multiple) { - editor.selectToggle(model); - } else if (shiftKey && multiple) { - em.clearSelection(editor.Canvas.getWindow()); - const coll = model.collection; - const index = coll.indexOf(model); - const selAll = editor.getSelectedAll(); - let min, max; - - // Fin min and max siblings - editor.getSelectedAll().forEach(sel => { - const selColl = sel.collection; - const selIndex = selColl.indexOf(sel); - if (selColl === coll) { - if (selIndex < index) { - // First model BEFORE the selected one - min = isUndefined(min) ? selIndex : Math.max(min, selIndex); - } else if (selIndex > index) { - // First model AFTER the selected one - max = isUndefined(max) ? selIndex : Math.min(max, selIndex); - } - } - }); - - if (!isUndefined(min)) { - while (min !== index) { - editor.selectAdd(coll.at(min)); - min++; - } - } - - if (!isUndefined(max)) { - while (max !== index) { - editor.selectAdd(coll.at(max)); - max--; - } - } - - editor.selectAdd(model); - } else { - editor.select(model, { scroll: {} }); - } - + this.editor.select(model, { scroll: {}, event }); this.initResize(model); }, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 553139f42..19e64161f 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -298,9 +298,13 @@ export default Backbone.Model.extend({ * @private */ setSelected(el, opts = {}) { + const { event } = opts; + const ctrlKey = event && (event.ctrlKey || event.metaKey); + const { shiftKey } = event || {}; const multiple = isArray(el); const els = multiple ? el : [el]; const selected = this.get('selected'); + const mltSel = this.getConfig('multipleSelection'); let added; // If an array is passed remove all selected @@ -310,6 +314,48 @@ export default Backbone.Model.extend({ els.forEach(el => { const model = getModel(el, $); if (model && !model.get('selectable')) return; + + // Hanlde multiple selection + if (ctrlKey && mltSel) { + return this.toggleSelected(model); + } else if (shiftKey && mltSel) { + this.clearSelection(this.get('Canvas').getWindow()); + const coll = model.collection; + const index = model.index(); + let min, max; + + // Fin min and max siblings + editor.getSelectedAll().forEach(sel => { + const selColl = sel.collection; + const selIndex = sel.index(); + if (selColl === coll) { + if (selIndex < index) { + // First model BEFORE the selected one + min = isUndefined(min) ? selIndex : Math.max(min, selIndex); + } else if (selIndex > index) { + // First model AFTER the selected one + max = isUndefined(max) ? selIndex : Math.min(max, selIndex); + } + } + }); + + if (!isUndefined(min)) { + while (min !== index) { + this.addSelected(coll.at(min)); + min++; + } + } + + if (!isUndefined(max)) { + while (max !== index) { + this.addSelected(coll.at(max)); + max--; + } + } + + return this.addSelected(model); + } + !multiple && this.removeSelected(selected.filter(s => s !== model)); this.addSelected(model, opts); added = model; diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js index e86fb318c..b57921403 100644 --- a/src/navigator/view/ItemView.js +++ b/src/navigator/view/ItemView.js @@ -234,7 +234,7 @@ export default Backbone.View.extend({ if (em) { const model = this.model; - em.setSelected(model, { fromLayers: 1 }); + em.setSelected(model, { fromLayers: 1, event: e }); const scroll = config.scrollCanvas; scroll && model.views.forEach(view => view.scrollIntoView(scroll)); }