Fixed #1580: Invisible timeline/graph should not be drawn, as most inputs are invalid

Moved initial autoscale/fit method to an handler of the "changed" event.

HISTORY.md

@@ -17,11 +17,14 @@ http://visjs.org
 
 ### Timeline
 
+- Moved initial autoscale/fit method to an handler of the "changed" event.
+- Fixed #1580: Invisible timeline/graph should not be drawn, as most inputs are invalid
 - Fixed #1521: Prevent items from staying stuck to the left side of the viewport.
 - Fixed #1592: Emit a "changed" event after each redraw.
 
 ### Graph2d
 
+- Fixed #1580: Invisible timeline/graph should not be drawn, as most inputs are invalid
 - Fixed #1177: Fix custom range of slaved right axis.
 - Fixed #1592: Emit a "changed" event after each redraw.
 - Cleanup of linegraph's event handling.

lib/timeline/Core.js

@@ -631,7 +631,7 @@ Core.prototype._redraw = function() {
   var props = this.props;
   var dom = this.dom;
 
-  if (!dom) return; // when destroyed
+  if (!dom|| !dom.container || dom.container.clientWidth == 0 ) return;// when destroyed, or invisible
 
   DateUtil.updateHiddenDates(this.options.moment, this.body, this.options.hiddenDates);
 

lib/timeline/Timeline.js

@@ -121,6 +121,28 @@ function Timeline (container, items, groups, options) {
     me.emit('contextmenu', me.getEventProperties(event))
   };
 
+  //Single time autoscale/fit
+  this.fitDone = false;
+  this.on('changed', function (){
+    if (this.itemsData == null) return;
+    if (!me.fitDone) {
+      me.fitDone = true;
+      if (me.options.start != undefined || me.options.end != undefined) {
+        if (me.options.start == undefined || me.options.end == undefined) {
+          var range = me.getItemRange();
+        }
+
+        var start = me.options.start != undefined ? me.options.start : range.min;
+        var end = me.options.end != undefined ? me.options.end : range.max;
+
+        me.setWindow(start, end, {animation: false});
+      }
+      else {
+        me.fit({animation: false});
+      }
+    }
+  });
+
   // apply options
   if (options) {
     this.setOptions(options);
@@ -194,8 +216,6 @@ Timeline.prototype.setOptions = function (options) {
  * @param {vis.DataSet | Array | null} items
  */
 Timeline.prototype.setItems = function(items) {
-  var initialLoad = (this.itemsData == null);
-
   // convert to type DataSet when needed
   var newDataSet;
   if (!items) {
@@ -218,23 +238,8 @@ Timeline.prototype.setItems = function(items) {
   this.itemsData = newDataSet;
   this.itemSet && this.itemSet.setItems(newDataSet);
 
-  this.body.emitter.emit("_change");
+  this.body.emitter.emit('_change', {queue: true});
 
-  if (initialLoad) {
-    if (this.options.start != undefined || this.options.end != undefined) {
-      if (this.options.start == undefined || this.options.end == undefined) {
-        var range = this.getItemRange();
-      }
-
-      var start = this.options.start != undefined ? this.options.start : range.min;
-      var end   = this.options.end != undefined   ? this.options.end   : range.max;
-
-      this.setWindow(start, end, {animation: false});
-    }
-    else {
-      this.fit({animation: false});
-    }
-  }
 };
 
 /**