Fixed #550: `Timeline.redraw()` now also recalculates the size of items.

HISTORY.md

@@ -29,6 +29,7 @@ http://visjs.org
 
 ### Timeline
 
+- `Timeline.redraw()` now also recalculates the size of items.
 - Implemented option `timeAxis: {scale: string, step: number}` to set a
   fixed scale.
 - Fixed width of range items not always being maintained when moving due to

docs/timeline.html

@@ -941,7 +941,9 @@ timeline.clear({options: true}); // clear options only
   <tr>
     <td>redraw()</td>
     <td>none</td>
-    <td>Force a redraw of the Timeline. Can be useful to manually redraw when option autoResize=false.
+    <td>Force a redraw of the Timeline. The size of all items will be recalculated.
+      Can be useful to manually redraw when option <code>autoResize=false</code> and the window
+      has been resized, or when the items CSS has been changed.
     </td>
   </tr>
 

lib/timeline/Core.js

@@ -88,7 +88,7 @@ Core.prototype._create = function (container) {
   this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
   this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-  this.on('rangechange', this.redraw.bind(this));
+  this.on('rangechange', this._redraw.bind(this));
   this.on('touch', this._onTouch.bind(this));
   this.on('pinch', this._onPinch.bind(this));
   this.on('dragstart', this._onDragStart.bind(this));
@@ -101,13 +101,13 @@ Core.prototype._create = function (container) {
       if (!me._redrawTimer) {
         me._redrawTimer = setTimeout(function () {
           me._redrawTimer = null;
-          me.redraw();
+          me._redraw();
         }, 0)
       }
     }
     else {
       // redraw immediately
-      me.redraw();
+      me._redraw();
     }
   });
 
@@ -224,7 +224,7 @@ Core.prototype.setOptions = function (options) {
   }
 
   // redraw everything
-  this.redraw();
+  this._redraw();
 };
 
 /**
@@ -457,10 +457,18 @@ Core.prototype.getWindow = function() {
 };
 
 /**
- * Force a redraw of the Core. Can be useful to manually redraw when
- * option autoResize=false
+ * Force a redraw. Can be overridden by implementations of Core
  */
 Core.prototype.redraw = function() {
+  this._redraw();
+};
+
+/**
+ * Redraw for internal use. Redraws all components. See also the public
+ * method redraw.
+ * @protected
+ */
+Core.prototype._redraw = function() {
   var resized = false;
   var options = this.options;
   var props = this.props;
@@ -611,7 +619,7 @@ Core.prototype.redraw = function() {
     var MAX_REDRAWS = 3; // maximum number of consecutive redraws
     if (this.redrawCount < MAX_REDRAWS) {
       this.redrawCount++;
-      this.redraw();
+      this._redraw();
     }
     else {
       console.log('WARNING: infinite loop in redraw?');
@@ -819,7 +827,7 @@ Core.prototype._onDrag = function (event) {
 
 
   if (newScrollTop != oldScrollTop) {
-    this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
+    this._redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
     this.emit("verticalDrag");
   }
 };

lib/timeline/Graph2d.js

@@ -106,7 +106,7 @@ function Graph2d (container, items, groups, options) {
     this.setItems(items);
   }
   else {
-    this.redraw();
+    this._redraw();
   }
 }
 

lib/timeline/Timeline.js

@@ -111,13 +111,23 @@ function Timeline (container, items, groups, options) {
     this.setItems(items);
   }
   else {
-    this.redraw();
+    this._redraw();
   }
 }
 
 // Extend the functionality from Core
 Timeline.prototype = new Core();
 
+/**
+ * Force a redraw. The size of all items will be recalculated.
+ * Can be useful to manually redraw when option autoResize=false and the window
+ * has been resized, or when the items CSS has been changed.
+ */
+Timeline.prototype.redraw = function() {
+  this.itemSet && this.itemSet.markDirty({refreshItems: true});
+  this._redraw();
+};
+
 /**
  * Set items
  * @param {vis.DataSet | Array | google.visualization.DataTable | null} items

lib/timeline/component/ItemSet.js

@@ -324,11 +324,20 @@ ItemSet.prototype.setOptions = function(options) {
 };
 
 /**
- * Mark the ItemSet dirty so it will refresh everything with next redraw
+ * Mark the ItemSet dirty so it will refresh everything with next redraw.
+ * Optionally, all items can be marked as dirty and be refreshed.
+ * @param {{refreshItems: boolean}} [options]
  */
-ItemSet.prototype.markDirty = function() {
+ItemSet.prototype.markDirty = function(options) {
   this.groupIds = [];
   this.stackDirty = true;
+
+  if (options && options.refreshItems) {
+    util.forEach(this.items, function (item) {
+      item.dirty = true;
+      if (item.displayed) item.redraw();
+    });
+  }
 };
 
 /**