Browse Source

Fit working (still needs simplification)

flowchartTest
jos 9 years ago
parent
commit
ac0563e408
4 changed files with 58 additions and 98 deletions
  1. +45
    -87
      lib/timeline/Timeline.js
  2. +2
    -2
      lib/timeline/component/item/BoxItem.js
  3. +2
    -2
      lib/timeline/component/item/Item.js
  4. +9
    -7
      lib/timeline/component/item/PointItem.js

+ 45
- 87
lib/timeline/Timeline.js View File

@ -354,119 +354,77 @@ Timeline.prototype.focus = function(id, options) {
* function is 'easeInOutQuad'. * function is 'easeInOutQuad'.
*/ */
Timeline.prototype.fit = function (options) { 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 minItem = null;
var maxItem = 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 * Calculate the data range of the items start and end dates
* @returns {{min: Date | null, max: Date | null}} * @returns {{min: Date | null, max: Date | null}}
* @protected
*/ */
Timeline.prototype.getDataRange = function() { Timeline.prototype.getDataRange = function() {
var min = null; var min = null;

+ 2
- 2
lib/timeline/component/item/BoxItem.js View File

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

+ 2
- 2
lib/timeline/component/item/Item.js View File

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

+ 9
- 7
lib/timeline/component/item/PointItem.js View File

@ -105,9 +105,7 @@ PointItem.prototype.redraw = function() {
dom.point.className = 'vis-item vis-point' + className; dom.point.className = 'vis-item vis-point' + className;
dom.dot.className = 'vis-item vis-dot' + 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.width = dom.dot.offsetWidth;
this.props.dot.height = dom.dot.offsetHeight; this.props.dot.height = dom.dot.offsetHeight;
this.props.content.height = dom.content.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.top = ((this.height - this.props.dot.height) / 2) + 'px';
dom.dot.style.left = (this.props.dot.width / 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; this.dirty = false;
} }
@ -181,16 +183,16 @@ PointItem.prototype.repositionY = function() {
* Return the width of the item left from its start date * Return the width of the item left from its start date
* @return {number} * @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 the width of the item right from its start date
* @return {number} * @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; module.exports = PointItem;

Loading…
Cancel
Save