Reorganized `Timeline.fit()` a bit

lib/timeline/Timeline.js

@@ -209,11 +209,11 @@ Timeline.prototype.setItems = function(items) {
   if (initialLoad) {
     if (this.options.start != undefined || this.options.end != undefined) {
       if (this.options.start == undefined || this.options.end == undefined) {
-        var dataRange = this._getDataRange();
+        var range = this.getItemRange();
       }
 
-      var start = this.options.start != undefined ? this.options.start : dataRange.start;
-      var end   = this.options.end != undefined   ? this.options.end   : dataRange.end;
+      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});
     }
@@ -354,6 +354,17 @@ Timeline.prototype.focus = function(id, options) {
  *                                    function is 'easeInOutQuad'.
  */
 Timeline.prototype.fit = function (options) {
+  var animation = (options && options.animation !== undefined) ? options.animation : true;
+  var range = this.getItemRange();
+  this.range.setRange(range.min, range.max, animation);
+};
+
+/**
+ * Determine the range of the items, taking into account their actual width
+ * and a margin of 10 pixels on both sides.
+ * @return {{min: Date | null, max: Date | null}}
+ */
+Timeline.prototype.getItemRange = function () {
   // get a rough approximation for the range based on the items start and end dates
   var range = this.getDataRange();
   var min = range.min;
@@ -362,8 +373,11 @@ Timeline.prototype.fit = function (options) {
   var maxItem = null;
 
   if (min != null && max != null) {
-
-    var factor = (max - min) / this.props.center.width;
+    var interval = (max - min); // ms
+    if (interval <= 0) {
+      interval = 10;
+    }
+    var factor = interval / this.props.center.width;
 
     function getStart(item) {
       return util.convert(item.data.start, 'Date').valueOf()
@@ -384,42 +398,32 @@ Timeline.prototype.fit = function (options) {
       var left  = new Date(start - (item.getWidthLeft() + 10) * factor);
       var right = new Date(end   + (item.getWidthRight() + 10) * factor);
 
-      //console.log(item.id, left, right, item.width, item.getWidthLeft(), item.getWidthRight())
-
-      if (left < min || right > max) {
-        if (left < min) {
-          min = left;
-          minItem = item;
-        }
-        if (right > max) {
-          max = right;
-          maxItem = item;
-        }
+      if (left < min) {
+        min = left;
+        minItem = item;
+      }
+      if (right > max) {
+        max = right;
+        maxItem = item;
       }
     }.bind(this));
 
     if (minItem && maxItem) {
       var lhs = minItem.getWidthLeft() + 10;
       var rhs = maxItem.getWidthRight() + 10;
-
-      var start = getStart(minItem);
-      var end = getEnd(maxItem);
-
-      var interval = end - start; // ms
-      if (interval <= 0) {interval = 10;}
       var delta = this.props.center.width - lhs - rhs;  // px
 
-      //console.log(new Date(start).toISOString(), new Date(end).toISOString(), lhs, rhs, delta)
-
       if (delta > 0) {
-        start -= lhs * interval / delta; // ms
-        end   += rhs * interval / delta; // ms
-
-        var animation = (options && options.animation !== undefined) ? options.animation : true;
-        this.range.setRange(start, end, animation);
+        min = getStart(minItem) - lhs * interval / delta; // ms
+        max = getEnd(maxItem)   + rhs * interval / delta; // ms
       }
     }
   }
+
+  return {
+    min: min != null ? new Date(min) : null,
+    max: max != null ? new Date(max) : null
+  }
 };
 
 /**
@@ -445,8 +449,8 @@ Timeline.prototype.getDataRange = function() {
   }
 
   return {
-    min: min,
-    max: max
+    min: min != null ? new Date(min) : null,
+    max: max != null ? new Date(max) : null
   }
 };