Fit working (still needs simplification)

lib/timeline/Timeline.js

@@ -354,119 +354,77 @@ Timeline.prototype.focus = function(id, options) {
  *                                    function is 'easeInOutQuad'.
  */
 Timeline.prototype.fit = function (options) {
-  // then, make sure all items are drawn and have a width, and fit the timeline window exactly.
-  var min = null;
-  var max = null;
+  // get a rough approximation for the range based on the items start and end dates
+  var range = this.getDataRange();
+  var min = range.min;
+  var max = range.max;
   var minItem = null;
   var maxItem = null;
 
-  util.forEach(this.itemSet.items, function (item) {
-    item.show();
-    item.repositionX();
+  if (min != null && max != null) {
 
-    if (item.left < min) {
-      min = item.left;
-      minItem = item;
-    }
+    var factor = (max - min) / this.props.center.width;
 
-    var right = item.left + item.width;
-    if (right > max) {
-      max = right;
-      maxItem = item;
+    function getStart(item) {
+      return util.convert(item.data.start, 'Date').valueOf()
     }
-  });
 
-  if (minItem && maxItem) {
-    var start = util.convert(minItem.data.start, 'Date').valueOf();
-    var end = maxItem.data.end != undefined
-        ? util.convert(maxItem.data.end, 'Date').valueOf()
-        : util.convert(maxItem.data.start, 'Date').valueOf();
-
-    var lhs = this._toScreen(start) - minItem.left - 10;
-    var rhs = maxItem.left + maxItem.width - this._toScreen(end) + 10;
-
-    var interval = end - start; // ms
-    if (interval <= 0) {interval = 10;}
-    var delta = this.props.center.width - lhs - rhs;  // px
+    function getEnd(item) {
+      var end = item.data.end != undefined ? item.data.end : item.data.start;
+      return util.convert(end, 'Date').valueOf();
+    }
 
-    //console.log(start, end, lhs, rhs, delta)
+    // calculate the date of the left side and right side of the items given
+    util.forEach(this.itemSet.items, function (item) {
+      item.show();
 
-    if (delta > 0) {
-      start -= lhs * interval / delta; // ms
-      end   += rhs * interval / delta; // ms
+      var start = getStart(item);
+      var end = getEnd(item);
 
-      var animation = (options && options.animation !== undefined) ? options.animation : true;
-      this.range.setRange(start, end, animation);
-    }
-  }
-};
+      var left  = new Date(start - (item.getWidthLeft() + 10) * factor);
+      var right = new Date(end   + (item.getWidthRight() + 10) * factor);
 
-/**
- * Get the data range of the item set.
- * @returns {{min: Date, max: Date}} range  A range with a start and end Date.
- *                                          When no minimum is found, min==null
- *                                          When no maximum is found, max==null
- */
-// TODO: remove this function
-Timeline.prototype.getItemRange = function() {
-  var min = null;
-  var max = null;
-  var minId = null;
-  var maxId = null;
+      //console.log(item.id, left, right, item.width, item.getWidthLeft(), item.getWidthRight())
 
-  var dataset = this.itemsData && this.itemsData.getDataSet();
-  if (dataset) {
-    var fieldId = dataset._fieldId;
-
-    dataset.forEach(function (item) {
-      var start = util.convert(item.start, 'Date').valueOf();
-      var end   = util.convert(item.end != undefined ? item.end : item.start, 'Date').valueOf();
-      if (min === null || start < min) {
-        min = start;
-        minId = item[fieldId];
+      if (left < min || right > max) {
+        if (left < min) {
+          min = left;
+          minItem = item;
+        }
+        if (right > max) {
+          max = right;
+          maxItem = item;
+        }
       }
-      if (max === null || end > max) {
-        max = start;
-        maxId = item[fieldId];
-      }
-    });
-  }
+    }.bind(this));
 
-  var minItem = this.itemSet.items[minId];
-  var maxItem = this.itemSet.items[maxId];
-  if (minItem && minItem.width && maxItem && maxItem.width) {
-    //var left = minItem.left;
-    //var right = maxItem.left + maxItem.width;
-    //
-    //min = this._toTime(left - 10);
-    //max = this._toTime(right + 10);
+    if (minItem && maxItem) {
+      var lhs = minItem.getWidthLeft() + 10;
+      var rhs = maxItem.getWidthRight() + 10;
 
-    var lhs = minItem.widthLhs(); // px
-    var rhs = maxItem.widthRhs(); // px
+      var start = getStart(minItem);
+      var end = getEnd(maxItem);
 
-    var interval = max - min;                         // ms
-    if (interval <= 0) {interval = 10;}
-    var delta = this.props.center.width - lhs - rhs;  // px
+      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)
 
-    console.log(minId, maxId, minItem.left, this._toScreen(min), this._toScreen(minItem.data.start), lhs, rhs, interval, delta)
+      if (delta > 0) {
+        start -= lhs * interval / delta; // ms
+        end   += rhs * interval / delta; // ms
 
-    if (delta > 0) {
-      min -= lhs * interval / delta; // ms
-      max += rhs * interval / delta; // ms
+        var animation = (options && options.animation !== undefined) ? options.animation : true;
+        this.range.setRange(start, end, animation);
+      }
     }
   }
-
-  return {
-    min: (min != null) ? new Date(min) : null,
-    max: (max != null) ? new Date(max) : null
-  };
 };
 
 /**
  * Calculate the data range of the items start and end dates
  * @returns {{min: Date | null, max: Date | null}}
- * @protected
  */
 Timeline.prototype.getDataRange = function() {
   var min = null;

lib/timeline/component/item/BoxItem.js

@@ -219,7 +219,7 @@ BoxItem.prototype.repositionY = function() {
  * Return the width of the item left from its start date
  * @return {number}
  */
-BoxItem.prototype.widthLhs = function () {
+BoxItem.prototype.getWidthLeft = function () {
   return this.width / 2;
 };
 
@@ -227,7 +227,7 @@ BoxItem.prototype.widthLhs = function () {
  * Return the width of the item right from its start date
  * @return {number}
  */
-BoxItem.prototype.widthRhs = function () {
+BoxItem.prototype.getWidthRight = function () {
   return this.width / 2;
 };
 

lib/timeline/component/item/Item.js

@@ -277,7 +277,7 @@ Item.prototype._contentToString = function (content) {
  * Return the width of the item left from its start date
  * @return {number}
  */
-Item.prototype.widthLhs = function () {
+Item.prototype.getWidthLeft = function () {
   return 0;
 };
 
@@ -285,7 +285,7 @@ Item.prototype.widthLhs = function () {
  * Return the width of the item right from the max of its start and end date
  * @return {number}
  */
-Item.prototype.widthRhs = function () {
+Item.prototype.getWidthRight = function () {
   return 0;
 };
 

lib/timeline/component/item/PointItem.js

@@ -105,9 +105,7 @@ PointItem.prototype.redraw = function() {
     dom.point.className  = 'vis-item vis-point' + className;
     dom.dot.className  = 'vis-item vis-dot' + className;
 
-    // recalculate size
-    this.width = dom.point.offsetWidth;
-    this.height = dom.point.offsetHeight;
+    // recalculate size of dot and contents
     this.props.dot.width = dom.dot.offsetWidth;
     this.props.dot.height = dom.dot.offsetHeight;
     this.props.content.height = dom.content.offsetHeight;
@@ -119,6 +117,10 @@ PointItem.prototype.redraw = function() {
     dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
     dom.dot.style.left = (this.props.dot.width / 2) + 'px';
 
+    // recalculate size
+    this.width = dom.point.offsetWidth;
+    this.height = dom.point.offsetHeight;
+
     this.dirty = false;
   }
 
@@ -181,16 +183,16 @@ PointItem.prototype.repositionY = function() {
  * Return the width of the item left from its start date
  * @return {number}
  */
-PointItem.prototype.widthLhs = function () {
-  return this.props.dot.width / 2;
+PointItem.prototype.getWidthLeft = function () {
+  return this.props.dot.width;
 };
 
 /**
  * Return the width of the item right from  its start date
  * @return {number}
  */
-PointItem.prototype.widthRhs = function () {
-  return this.width - this.props.dot.width / 2;
+PointItem.prototype.getWidthRight = function () {
+  return this.width - this.props.dot.width;
 };
 
 module.exports = PointItem;