Prevent items from being repeatedly redrawn while off screen (#3633)

* Prevent items from being repeatedly redrawn while off screen

Fixes #3249 again, because my previous PR got overwritten

* Add JSDocs for #3633

lib/timeline/component/Group.js

@@ -282,9 +282,9 @@ Group.prototype._redrawItems = function(forceRestack, lastIsVisible, margin, ran
       var redrawQueueLength = 0;
 
       util.forEach(this.items, function (item, key) {
-        if (!item.displayed) {
+        if (!item.displayed && (item.isVisible(range) || !item.dom)) {
           var returnQueue = true;
-          redrawQueue[key] = item.redraw(returnQueue);
+          redrawQueue[key] = item.show(returnQueue);
           redrawQueueLength = redrawQueue[key].length;
           me.visibleItems.push(item);
         }
@@ -301,7 +301,9 @@ Group.prototype._redrawItems = function(forceRestack, lastIsVisible, margin, ran
       }
 
       util.forEach(this.items, function (item) {
-        item.repositionX(limitSize);
+        if(item.displayed) {
+          item.repositionX(limitSize);
+        }
       });
 
       if (this.doInnerStack && this.itemSet.options.stackSubgroups) {

lib/timeline/component/item/BoxItem.js

@@ -225,12 +225,14 @@ BoxItem.prototype.redraw = function(returnQueue) {
 };
 
 /**
- * Show the item in the DOM (when not already displayed). The items DOM will
+ * Show the item in the DOM (when not already visible). The items DOM will
  * be created when needed.
+ * @param {boolean} [returnQueue=false]  whether to return a queue of functions to execute instead of just executing them
+ * @return {boolean} the redraw queue if returnQueue=true
  */
-BoxItem.prototype.show = function() {
+BoxItem.prototype.show = function(returnQueue) {
   if (!this.displayed) {
-    this.redraw();
+    return this.redraw(returnQueue);
   }
 };
 

lib/timeline/component/item/PointItem.js

@@ -207,10 +207,12 @@ PointItem.prototype.redraw = function(returnQueue) {
 /**
  * Show the item in the DOM (when not already visible). The items DOM will
  * be created when needed.
+ * @param {boolean} [returnQueue=false]  whether to return a queue of functions to execute instead of just executing them
+ * @return {boolean} the redraw queue if returnQueue=true
  */
-PointItem.prototype.show = function() {
+PointItem.prototype.show = function(returnQueue) {
   if (!this.displayed) {
-    this.redraw();
+    return this.redraw(returnQueue);
   }
 };
 

lib/timeline/component/item/RangeItem.js

@@ -191,10 +191,12 @@ RangeItem.prototype.redraw = function(returnQueue) {
 /**
  * Show the item in the DOM (when not already visible). The items DOM will
  * be created when needed.
+ * @param {boolean} [returnQueue=false]  whether to return a queue of functions to execute instead of just executing them
+ * @return {boolean} the redraw queue if returnQueue=true
  */
-RangeItem.prototype.show = function() {
+RangeItem.prototype.show = function(returnQueue) {
   if (!this.displayed) {
-    this.redraw();
+    return this.redraw(returnQueue);
   }
 };