diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js index 3913bc9f32..9117b31a63 100644 --- a/lib/timeline/component/Group.js +++ b/lib/timeline/component/Group.js @@ -349,17 +349,16 @@ class Group { // if restacking, reposition visible items vertically if (restack) { - const visibleSubgroups = {}; const orderedItems = { byEnd: this.orderedItems.byEnd.filter(item => !item.isCluster), byStart: this.orderedItems.byStart.filter(item => !item.isCluster) } - + const orderedClusters = { byEnd: [...new Set(this.orderedItems.byEnd.map(item => item.cluster).filter(item => !!item))], byStart: [...new Set(this.orderedItems.byStart.map(item => item.cluster).filter(item => !!item))], } - + /** * Get all visible items in range * @return {array} items @@ -370,17 +369,28 @@ class Group { return [...visibleItems, ...visibleClusters]; } + /** + * Get visible items grouped by subgroup + * @param {function} orderFn An optional function to order items inside the subgroups + * @return {Object} + */ + const getVisibleItemsGroupedBySubgroup = orderFn => { + let visibleSubgroupsItems = {}; + for (const subgroup in this.subgroups) { + const items = this.visibleItems.filter(item => item.data.subgroup === subgroup); + visibleSubgroupsItems[subgroup] = orderFn ? items.sort((a, b) => orderFn(a.data, b.data)) : items; + } + return visibleSubgroupsItems; + }; + if (typeof this.itemSet.options.order === 'function') { // a custom order function //show all items const me = this; if (this.doInnerStack && this.itemSet.options.stackSubgroups) { // Order the items within each subgroup - for (const subgroup in this.subgroups) { - visibleSubgroups[subgroup] = this.subgroups[subgroup].items.slice().sort((a, b) => me.itemSet.options.order(a.data, b.data)); - } - - stack.stackSubgroupsWithInnerStack(visibleSubgroups, margin, this.subgroups); + const visibleSubgroupsItems = getVisibleItemsGroupedBySubgroup(this.itemSet.options.order); + stack.stackSubgroupsWithInnerStack(visibleSubgroupsItems, margin, this.subgroups); this.visibleItems = getVisibleItems(); this._updateSubGroupHeights(margin); } @@ -389,7 +399,7 @@ class Group { this._updateSubGroupHeights(margin); // order all items and force a restacking // order all items outside clusters and force a restacking - const customOrderedItems = this.visibleItems + const customOrderedItems = this.visibleItems .slice() .filter(item => item.isCluster || (!item.isCluster && !item.cluster)) .sort((a, b) => { @@ -399,18 +409,13 @@ class Group { } } else { // no custom order function, lazy stacking - const visibleItems = this._updateItemsInRange(orderedItems, this.visibleItems.filter(item => !item.isCluster), range); - const visibleClusters = this._updateClustersInRange(orderedClusters, this.visibleItems.filter(item => item.isCluster), range); - this.visibleItems = [...visibleItems, ...visibleClusters]; + this.visibleItems = getVisibleItems(); this._updateSubGroupHeights(margin); if (this.itemSet.options.stack) { if (this.doInnerStack && this.itemSet.options.stackSubgroups) { - for (const subgroup in this.subgroups) { - visibleSubgroups[subgroup] = this.subgroups[subgroup].items; - } - - stack.stackSubgroupsWithInnerStack(visibleSubgroups, margin, this.subgroups); + const visibleSubgroupsItems = getVisibleItemsGroupedBySubgroup(); + stack.stackSubgroupsWithInnerStack(visibleSubgroupsItems, margin, this.subgroups); } else { // TODO: ugly way to access options... @@ -427,7 +432,7 @@ class Group { if (this.subgroupVisibility[this.visibleItems[i].data.subgroup] !== undefined) { if (!this.subgroupVisibility[this.visibleItems[i].data.subgroup]) { this.visibleItems[i].hide(); - } + } } } @@ -436,8 +441,8 @@ class Group { if (item.cluster && item.displayed) { item.hide(); } - }); - } + }); + } if (this.shouldBailStackItems) { this.itemSet.body.emitter.emit('destroyTimeline')