From 7771406dcd9723f4e14dc487976cab2c530f8e92 Mon Sep 17 00:00:00 2001 From: jos Date: Mon, 1 Jun 2015 11:11:07 +0200 Subject: [PATCH] Reorganized `Timeline.fit()` a bit --- lib/timeline/Timeline.js | 66 +++++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 31 deletions(-) diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index 267a7154..9952c97f 100644 --- a/lib/timeline/Timeline.js +++ b/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 } };