Implemented function `fit`

HISTORY.md

@@ -11,6 +11,8 @@ http://visjs.org
 - Improved layout of box-items inside groups.
 - Items can now be dragged from one group to another.
 - Implemented option `stack` to enable/disable stacking of items.
+- Implemented function `fit`, which sets the Timeline window such that it fits
+  all items.
 - Option `editable` can now be used to enable/disable individual manipulation
   actions (`add`, `updateTime`, `updateGroup`, `remove`).
 - Function `setWindow` now accepts an object with properties `start` and `end`.

docs/timeline.html

@@ -628,6 +628,13 @@ var options = {
     <th>Description</th>
   </tr>
 
+  <tr>
+    <td>fit()</td>
+    <td>none</td>
+    <td>Adjust the visible window such that it fits all items.
+    </td>
+  </tr>
+
   <tr>
     <td>getCustomTime()</td>
     <td>Date</td>

src/timeline/Timeline.js

@@ -408,47 +408,12 @@ Timeline.prototype.setItems = function(items) {
   this.itemSet.setItems(newDataSet);
 
   if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) {
-    // apply the data range as range
-    var dataRange = this.getItemRange();
-
-    // add 5% space on both sides
-    var start = dataRange.min;
-    var end = dataRange.max;
-    if (start != null && end != null) {
-      var interval = (end.valueOf() - start.valueOf());
-      if (interval <= 0) {
-        // prevent an empty interval
-        interval = 24 * 60 * 60 * 1000; // 1 day
-      }
-      start = new Date(start.valueOf() - interval * 0.05);
-      end = new Date(end.valueOf() + interval * 0.05);
-    }
-
-    // override specified start and/or end date
-    if (this.options.start != undefined) {
-      start = util.convert(this.options.start, 'Date');
-    }
-    if (this.options.end != undefined) {
-      end = util.convert(this.options.end, 'Date');
-    }
+    this.fit();
 
-    // skip range set if there is no start and end date
-    if (start === null && end === null) {
-      return;
-    }
+    var start = (this.options.start != undefined) ? util.convert(this.options.start, 'Date') : null;
+    var end   = (this.options.end != undefined) ? util.convert(this.options.end, 'Date') : null;
 
-    // if start and end dates are set but cannot be satisfyed due to zoom restrictions — correct end date
-    if (start != null && end != null) {
-      var diff = end.valueOf() - start.valueOf();
-      if (this.options.zoomMax != undefined && this.options.zoomMax < diff) {
-        end = new Date(start.valueOf() + this.options.zoomMax);
-      }
-      if (this.options.zoomMin != undefined && this.options.zoomMin > diff) {
-        end = new Date(start.valueOf() + this.options.zoomMin);
-      }
-    }
-
-    this.range.setRange(start, end);
+    this.setWindow(start, end);
   }
 };
 
@@ -456,7 +421,7 @@ Timeline.prototype.setItems = function(items) {
  * Set groups
  * @param {vis.DataSet | Array | google.visualization.DataTable} groups
  */
-Timeline.prototype.setGroups = function(groups) {
+Timeline.prototype.setGroups = function setGroups(groups) {
   // convert to type DataSet when needed
   var newDataSet;
   if (!groups) {
@@ -474,6 +439,34 @@ Timeline.prototype.setGroups = function(groups) {
   this.itemSet.setGroups(newDataSet);
 };
 
+/**
+ * Set Timeline window such that it fits all items
+ */
+Timeline.prototype.fit = function fit() {
+  // apply the data range as range
+  var dataRange = this.getItemRange();
+
+  // add 5% space on both sides
+  var start = dataRange.min;
+  var end = dataRange.max;
+  if (start != null && end != null) {
+    var interval = (end.valueOf() - start.valueOf());
+    if (interval <= 0) {
+      // prevent an empty interval
+      interval = 24 * 60 * 60 * 1000; // 1 day
+    }
+    start = new Date(start.valueOf() - interval * 0.05);
+    end = new Date(end.valueOf() + interval * 0.05);
+  }
+
+  // skip range set if there is no start and end date
+  if (start === null && end === null) {
+    return;
+  }
+
+  this.range.setRange(start, end);
+};
+
 /**
  * Get the data range of the item set.
  * @returns {{min: Date, max: Date}} range  A range with a start and end Date.

test/timeline.html

@@ -86,8 +86,6 @@
     //height: 200,
     showCurrentTime: true,
     showCustomTime: true,
-    //start: moment('2013-01-01'),
-    //end: moment('2013-12-31'),
     //min: moment('2013-01-01'),
     //max: moment('2013-12-31'),
     //zoomMin: 1000 * 60 * 60 * 24,            // 1 day

test/timeline_groups.html

@@ -78,7 +78,7 @@
       updateTime: true,
       updateGroup: true
     },
-    stack: false,
+    //stack: false,
     //height: 200,
     groupOrder: 'content'
   };