diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 92823b52..8987c78b 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -769,6 +769,16 @@ function (option, path) { Only applicable when option selectable is true. + + + multiselectPerGroup + boolean + false + + If true, selecting multiple items using shift+click will only select items residing in the same group as the first selected item. + Only applicable when option selectable and multiselect are true. + + onAdd diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js index 094dbc6a..e688bf11 100644 --- a/lib/timeline/component/ItemSet.js +++ b/lib/timeline/component/ItemSet.js @@ -307,7 +307,7 @@ ItemSet.prototype._create = function(){ ItemSet.prototype.setOptions = function(options) { if (options) { // copy all options that we know - var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap']; + var fields = ['type', 'align', 'order', 'stack', 'selectable', 'multiselect', 'multiselectPerGroup', 'groupOrder', 'dataAttributes', 'template', 'groupTemplate', 'hide', 'snap', 'groupOrderSwap']; util.selectiveExtend(fields, this.options, options); if ('orientation' in options) { @@ -1759,23 +1759,37 @@ ItemSet.prototype._onMultiSelectItem = function (event) { if (shiftKey && this.options.multiselect) { // select all items between the old selection and the tapped item - + var itemGroup = this.itemsData.get(item.id).group; + + // when filtering get the group of the last selected item + var lastSelectedGroup = undefined; + if (this.options.multiselectPerGroup) { + if (selection.length > 0) { + lastSelectedGroup = this.itemsData.get(selection[0]).group; + } + } + // determine the selection range - selection.push(item.id); + if (!this.options.multiselectPerGroup || lastSelectedGroup == undefined || lastSelectedGroup == itemGroup) { + selection.push(item.id); + } var range = ItemSet._getItemRange(this.itemsData.get(selection, this.itemOptions)); - - // select all items within the selection range - selection = []; - for (var id in this.items) { - if (this.items.hasOwnProperty(id)) { - var _item = this.items[id]; - var start = _item.data.start; - var end = (_item.data.end !== undefined) ? _item.data.end : start; - - if (start >= range.min && - end <= range.max && - !(_item instanceof BackgroundItem)) { - selection.push(_item.id); // do not use id but item.id, id itself is stringified + + if (!this.options.multiselectPerGroup || lastSelectedGroup == itemGroup) { + // select all items within the selection range + selection = []; + for (var id in this.items) { + if (this.items.hasOwnProperty(id)) { + var _item = this.items[id]; + var start = _item.data.start; + var end = (_item.data.end !== undefined) ? _item.data.end : start; + + if (start >= range.min && + end <= range.max && + (!this.options.multiselectPerGroup || lastSelectedGroup == this.itemsData.get(_item.id).group) && + !(_item instanceof BackgroundItem)) { + selection.push(_item.id); // do not use id but item.id, id itself is stringified + } } } } diff --git a/lib/timeline/optionsTimeline.js b/lib/timeline/optionsTimeline.js index 5d0ad3c1..e3e9c3f3 100644 --- a/lib/timeline/optionsTimeline.js +++ b/lib/timeline/optionsTimeline.js @@ -98,6 +98,7 @@ let allOptions = { minHeight: {number, string}, moveable: {boolean}, multiselect: {boolean}, + multiselectPerGroup: {boolean}, onAdd: {'function': 'function'}, onUpdate: {'function': 'function'}, onMove: {'function': 'function'}, @@ -191,6 +192,7 @@ let configureOptions = { minHeight: '', moveable: false, multiselect: false, + multiselectPerGroup: false, //onAdd: {'function': 'function'}, //onUpdate: {'function': 'function'}, //onMove: {'function': 'function'},