From ac0563e408fff4218a46834c4f1c33985c15f36c Mon Sep 17 00:00:00 2001 From: jos Date: Mon, 1 Jun 2015 10:48:15 +0200 Subject: [PATCH] Fit working (still needs simplification) --- lib/timeline/Timeline.js | 132 ++++++++--------------- lib/timeline/component/item/BoxItem.js | 4 +- lib/timeline/component/item/Item.js | 4 +- lib/timeline/component/item/PointItem.js | 16 +-- 4 files changed, 58 insertions(+), 98 deletions(-) diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index bc2f6232..267a7154 100644 --- a/lib/timeline/Timeline.js +++ b/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; diff --git a/lib/timeline/component/item/BoxItem.js b/lib/timeline/component/item/BoxItem.js index fad4dd18..efc15f85 100644 --- a/lib/timeline/component/item/BoxItem.js +++ b/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; }; diff --git a/lib/timeline/component/item/Item.js b/lib/timeline/component/item/Item.js index 686b2a47..b940160c 100644 --- a/lib/timeline/component/item/Item.js +++ b/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; }; diff --git a/lib/timeline/component/item/PointItem.js b/lib/timeline/component/item/PointItem.js index 0ce8090a..7c6bd6d4 100644 --- a/lib/timeline/component/item/PointItem.js +++ b/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;