diff --git a/src/canvas/index.js b/src/canvas/index.js index b936f2b7e..4ee286f99 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.js @@ -94,6 +94,14 @@ module.exports = () => { return this.getFrameEl().contentDocument; }, + /** + * Returns the frame's window + * @return {HTMLElement} + */ + getWindow() { + return this.getFrameEl().contentWindow; + }, + /** * Returns body element of the frame * @return {HTMLElement} diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 6c384e6d0..27a9a3aa4 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -1,4 +1,4 @@ -import { bindAll, isElement } from 'underscore'; +import { bindAll, isElement, isUndefined } from 'underscore'; import { on, off, getUnitFromValue } from 'utils/mixins'; const ToolbarView = require('dom_components/view/ToolbarView'); @@ -222,10 +222,47 @@ module.exports = { const shiftKey = event.shiftKey; const { editor } = this; const multiple = editor.getConfig('multipleSelection'); + const em = this.em; if (ctrlKey && multiple) { editor.selectToggle(model); - // else if (shiftKey) // multiple selection + } 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); }