fix(timeline): only stack visible items inside subgroups (#211)

visjs · Dec 6, 2019 · 9723d4c · 9723d4c
1 parent c4d5fd7
commit 9723d4c
Showing 1 changed file with 25 additions and 20 deletions.
diff --git 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')