Significantly reduce unexpected vertical jumping when moving the time…

…line (visjs#1677)
Guy-Adler · Dec 9, 2023 · ec7acd4 · ec7acd4
1 parent 83eb4fe
commit ec7acd4
Showing 1 changed file with 24 additions and 19 deletions.
diff --git a/lib/timeline/component/Group.js b/lib/timeline/component/Group.js
@@ -32,6 +32,7 @@ class Group {
     this.subgroupOrderer = data && data.subgroupOrder;
     this.itemSet = itemSet;
     this.isVisible = null;
+    this.height = 0;
     this.stackDirty = true; // if true, items will be restacked on next redraw
 
     // This is a stack of functions (`() => void`) that will be executed before
@@ -537,7 +538,7 @@ class Group {
       this._updateSubgroupsSizes.bind(this),
 
       () => {
-        height = this._calculateHeight.bind(this)(margin);
+        height = this.height = this._calculateHeight.bind(this)(margin);
       },
 
       // calculate actual size and position again
@@ -627,29 +628,33 @@ class Group {
       items = this.visibleItems;
     }
 
-    if (items.length > 0) {
-      let min = items[0].top;
-      let max = items[0].top + items[0].height;
-      util.forEach(items, item => {
-        min = Math.min(min, item.top);
-        max = Math.max(max, (item.top + item.height));
-      });
-      if (min > margin.axis) {
-        // there is an empty gap between the lowest item and the axis
-        const offset = min - margin.axis;
-        max -= offset;
+    if (!this.isVisible && this.height) {
+      height = Math.max(this.height, this.props.label.height);
+    } else {
+      if (items.length > 0) {
+        let min = items[0].top;
+        let max = items[0].top + items[0].height;
         util.forEach(items, item => {
-          item.top -= offset;
+          min = Math.min(min, item.top);
+          max = Math.max(max, (item.top + item.height));
         });
+        if (min > margin.axis) {
+          // there is an empty gap between the lowest item and the axis
+          const offset = min - margin.axis;
+          max -= offset;
+          util.forEach(items, item => {
+            item.top -= offset;
+          });
+        }
+        height = Math.ceil(max + margin.item.vertical / 2);
+        if (this.heightMode !== "fitItems") {
+          height = Math.max(height, this.props.label.height);
+        }
       }
-      height = Math.ceil(max + margin.item.vertical / 2);
-      if (this.heightMode !== "fitItems") {
-        height = Math.max(height, this.props.label.height);
+      else {
+        height = 0 || this.props.label.height;
       }
     }
-    else {
-      height = 0 || this.props.label.height;
-    }
     return height;
   }