Browse Source

TimeAxis works again

css_transitions
josdejong 10 years ago
parent
commit
a462d04f34
2 changed files with 34 additions and 73 deletions
  1. +30
    -23
      src/timeline/Timeline.js
  2. +4
    -50
      src/timeline/component/TimeAxis.js

+ 30
- 23
src/timeline/Timeline.js View File

@ -50,7 +50,10 @@ function Timeline (container, items, options) {
},
onRemove: function (item, callback) {
callback(item);
}
},
toScreen: me._toScreen.bind(me),
toTime: me._toTime.bind(me)
};
// event bus
@ -80,14 +83,9 @@ function Timeline (container, items, options) {
// add item on doubletap
this.emitter.on('doubletap', this._onAddItem.bind(this));
// range
// TODO: move range inside rootPanel?
var rangeOptions = Object.create(this.options);
this.range = new Range(this.rootPanel, this.emitter, rangeOptions);
this.range.setRange(
now.clone().add('days', -3).valueOf(),
now.clone().add('days', 4).valueOf()
);
// repaint on range change
this.emitter.on('rangechange', this.rootPanel.repaint.bind(this.rootPanel));
this.emitter.on('rangechanged', this.rootPanel.repaint.bind(this.rootPanel));
// label panel
var labelOptions = Object.create(this.options);
@ -123,18 +121,14 @@ function Timeline (container, items, options) {
this.mainPanel = new Panel(mainOptions);
this.rootPanel.appendChild(this.mainPanel);
// content panel (contains itemset(s))
var contentOptions = Object.create(this.options);
contentOptions.top = '0';
contentOptions.bottom = null;
contentOptions.left = '0';
contentOptions.right = null;
contentOptions.height = function () {
return me.mainPanel.height - me.timeAxis.height;
};
contentOptions.width = null;
this.contentPanel = new Panel(contentOptions);
this.mainPanel.appendChild(this.contentPanel);
// range
// TODO: move range inside rootPanel?
var rangeOptions = Object.create(this.options);
this.range = new Range(this.mainPanel, this.emitter, rangeOptions);
this.range.setRange(
now.clone().add('days', -3).valueOf(),
now.clone().add('days', 4).valueOf()
);
// panel with time axis
var timeAxisOptions = Object.create(rootOptions);
@ -148,6 +142,19 @@ function Timeline (container, items, options) {
this.options.snap = this.timeAxis.snap.bind(this.timeAxis);
this.mainPanel.appendChild(this.timeAxis);
// content panel (contains itemset(s))
var contentOptions = Object.create(this.options);
contentOptions.top = '0';
contentOptions.bottom = null;
contentOptions.left = '0';
contentOptions.right = null;
contentOptions.height = function () {
return me.mainPanel.height - me.timeAxis.height;
};
contentOptions.width = null;
this.contentPanel = new Panel(contentOptions);
this.mainPanel.appendChild(this.contentPanel);
/* TODO
// current time bar
this.currenttime = new CurrentTime(rootOptions);
@ -599,7 +606,7 @@ Timeline.prototype._onMultiSelectItem = function (event) {
* @private
*/
Timeline.prototype._toTime = function _toTime(x) {
var conversion = this.range.conversion(this.content.width);
var conversion = this.range.conversion(this.mainPanel.width);
return new Date(x / conversion.scale + conversion.offset);
};
@ -611,6 +618,6 @@ Timeline.prototype._toTime = function _toTime(x) {
* @private
*/
Timeline.prototype._toScreen = function _toScreen(time) {
var conversion = this.range.conversion(this.content.width);
var conversion = this.range.conversion(this.mainPanel.width);
return (time.valueOf() - conversion.offset) * conversion.scale;
};

+ 4
- 50
src/timeline/component/TimeAxis.js View File

@ -37,7 +37,6 @@ function TimeAxis (options) {
showMajorLabels: true
};
this.conversion = null;
this.range = null;
}
@ -58,28 +57,6 @@ TimeAxis.prototype.setRange = function (range) {
this.range = range;
};
/**
* Convert a position on screen (pixels) to a datetime
* @param {int} x Position on the screen in pixels
* @return {Date} time The datetime the corresponds with given position x
*/
TimeAxis.prototype.toTime = function(x) {
var conversion = this.conversion;
return new Date(x / conversion.scale + conversion.offset);
};
/**
* Convert a datetime (Date object) into a position on the screen
* @param {Date} time A date
* @return {int} x The position on the screen in pixels which corresponds
* with the given date.
* @private
*/
TimeAxis.prototype.toScreen = function(time) {
var conversion = this.conversion;
return (time.valueOf() - conversion.offset) * conversion.scale;
};
/**
* Repaint the component
*/
@ -171,15 +148,13 @@ TimeAxis.prototype._repaintLabels = function () {
var orientation = this.getOption('orientation');
// calculate range and step
this._updateConversion();
var start = util.convert(this.range.start, 'Number'),
end = util.convert(this.range.end, 'Number'),
minimumStep = this.toTime((this.props.minorCharWidth || 10) * 5).valueOf()
-this.toTime(0).valueOf();
minimumStep = this.options.toTime((this.props.minorCharWidth || 10) * 5).valueOf()
-this.options.toTime(0).valueOf();
var step = new TimeStep(new Date(start), new Date(end), minimumStep);
this.step = step;
// Move all DOM elements to a "redundant" list, where they
// can be picked for re-use, and clear the lists with lines and texts.
// At the end of the function _repaintLabels, left over elements will be cleaned up
@ -199,7 +174,7 @@ TimeAxis.prototype._repaintLabels = function () {
while (step.hasNext() && max < 1000) {
max++;
var cur = step.getCurrent(),
x = this.toScreen(cur),
x = this.options.toScreen(cur),
isMajor = step.isMajor();
// TODO: lines must have a width, such that we can create css backgrounds
@ -226,7 +201,7 @@ TimeAxis.prototype._repaintLabels = function () {
// create a major label on the left when needed
if (this.getOption('showMajorLabels')) {
var leftTime = this.toTime(0),
var leftTime = this.options.toTime(0),
leftText = step.getLabelMajor(leftTime),
widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation
@ -454,27 +429,6 @@ TimeAxis.prototype._calculateCharSize = function () {
}
};
/**
* Calculate the scale and offset to convert a position on screen to the
* corresponding date and vice versa.
* After the method _updateConversion is executed once, the methods toTime
* and toScreen can be used.
* @private
*/
TimeAxis.prototype._updateConversion = function() {
var range = this.range;
if (!range) {
throw new Error('No range configured');
}
if (range.conversion) {
this.conversion = range.conversion(this.width);
}
else {
this.conversion = Range.conversion(range.start, range.end, this.width);
}
};
/**
* Snap a date to a rounded value.
* The snap intervals are dependent on the current scale and step.

Loading…
Cancel
Save