diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index 3e1ec671..9d6fa7eb 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -57,6 +57,7 @@ function Timeline (container, items, options) { }; // event bus + // TODO: make the Timeline itself an emitter this.emitter = new Emitter(); // root panel @@ -129,6 +130,14 @@ function Timeline (container, items, options) { now.clone().add('days', -3).valueOf(), now.clone().add('days', 4).valueOf() ); + /* TODO + this.range.on('rangechange', function (properties) { + me.controller.emit('rangechange', properties); + }); + this.range.on('rangechanged', function (properties) { + me.controller.emit('rangechanged', properties); + }); + */ // panel with time axis var timeAxisOptions = Object.create(rootOptions); @@ -155,15 +164,19 @@ function Timeline (container, items, options) { this.contentPanel = new Panel(contentOptions); this.mainPanel.appendChild(this.contentPanel); - /* TODO // current time bar - this.currenttime = new CurrentTime(rootOptions); - this.mainPanel.appendChild(this.currenttime); + this.currentTime = new CurrentTime(this.range, rootOptions); + this.mainPanel.appendChild(this.currentTime); // custom time bar - this.customtime = new CustomTime(rootOptions); - this.mainPanel.appendChild(this.customtime); - */ + this.customTime = new CustomTime(rootOptions); + this.mainPanel.appendChild(this.customTime); + this.customTime.on('timechange', function (time) { + me.emitter.emit('timechange', time); + }); + this.customTime.on('timechanged', function (time) { + me.emitter.emit('timechanged', time); + }); // create groupset this.setGroups(null); @@ -240,11 +253,11 @@ Timeline.prototype.setOptions = function (options) { * @param {Date} time */ Timeline.prototype.setCustomTime = function (time) { - if (!this.customtime) { + if (!this.customTime) { throw new Error('Cannot get custom time: Custom time bar is not enabled'); } - this.customtime.setCustomTime(time); + this.customTime.setCustomTime(time); }; /** @@ -252,11 +265,11 @@ Timeline.prototype.setCustomTime = function (time) { * @return {Date} customTime */ Timeline.prototype.getCustomTime = function() { - if (!this.customtime) { + if (!this.customTime) { throw new Error('Cannot get custom time: Custom time bar is not enabled'); } - return this.customtime.getCustomTime(); + return this.customTime.getCustomTime(); }; /** diff --git a/src/timeline/component/CurrentTime.js b/src/timeline/component/CurrentTime.js index 0e4b7ce3..a39e3330 100644 --- a/src/timeline/component/CurrentTime.js +++ b/src/timeline/component/CurrentTime.js @@ -1,14 +1,16 @@ /** * A current time bar + * @param {Range} range * @param {Object} [options] Available parameters: * {Boolean} [showCurrentTime] * @constructor CurrentTime * @extends Component */ -function CurrentTime (options) { +function CurrentTime (range, options) { this.id = util.randomUUID(); + this.range = range; this.options = options || {}; this.defaultOptions = { showCurrentTime: false @@ -40,7 +42,7 @@ CurrentTime.prototype.repaint = function () { throw new Error('Cannot repaint bar: no parent attached'); } - var parentContainer = parent.parent.getContainer(); // FIXME: this is weird + var parentContainer = parent.getContainer(); if (!parentContainer) { throw new Error('Cannot repaint bar: parent has no container element'); } @@ -66,7 +68,7 @@ CurrentTime.prototype.repaint = function () { } var now = new Date(); - var x = parent.toScreen(now); + var x = this.options.toScreen(now); bar.style.left = x + 'px'; bar.title = 'Current time: ' + now; @@ -77,12 +79,12 @@ CurrentTime.prototype.repaint = function () { delete this.currentTimeTimer; } + // determine interval to refresh var timeline = this; - var interval = 1 / parent.conversion.scale / 2; - - if (interval < 30) { - interval = 30; - } + var scale = this.range.conversion(parent.width).scale; + var interval = 1 / scale / 2; + if (interval < 30) interval = 30; + if (interval > 1000) interval = 1000; this.currentTimeTimer = setTimeout(function() { timeline.repaint(); diff --git a/src/timeline/component/CustomTime.js b/src/timeline/component/CustomTime.js index 313f12ec..a3ae666f 100644 --- a/src/timeline/component/CustomTime.js +++ b/src/timeline/component/CustomTime.js @@ -45,7 +45,7 @@ CustomTime.prototype.repaint = function () { throw new Error('Cannot repaint bar: no parent attached'); } - var parentContainer = parent.parent.getContainer(); // FIXME: this is weird + var parentContainer = parent.getContainer(); if (!parentContainer) { throw new Error('Cannot repaint bar: parent has no container element'); } @@ -87,7 +87,7 @@ CustomTime.prototype.repaint = function () { this.hammer.on('dragend', this._onDragEnd.bind(this)); } - var x = parent.toScreen(this.customTime); + var x = this.options.toScreen(this.customTime); bar.style.left = x + 'px'; bar.title = 'Time: ' + this.customTime; @@ -131,17 +131,15 @@ CustomTime.prototype._onDragStart = function(event) { */ CustomTime.prototype._onDrag = function (event) { var deltaX = event.gesture.deltaX, - x = this.parent.toScreen(this.eventParams.customTime) + deltaX, - time = this.parent.toTime(x); + x = this.options.toScreen(this.eventParams.customTime) + deltaX, + time = this.options.toTime(x); this.setCustomTime(time); // fire a timechange event - if (this.controller) { - this.controller.emit('timechange', { - time: this.customTime - }) - } + this.emit('timechange', { + time: new Date(this.customTime.valueOf()) + }); event.stopPropagation(); event.preventDefault(); @@ -154,11 +152,9 @@ CustomTime.prototype._onDrag = function (event) { */ CustomTime.prototype._onDragEnd = function (event) { // fire a timechanged event - if (this.controller) { - this.controller.emit('timechanged', { - time: this.customTime - }) - } + this.emit('timechanged', { + time: new Date(this.customTime.valueOf()) + }); event.stopPropagation(); event.preventDefault();