From 9f2eee8af93d3468af049353266f99acbf40bd1f Mon Sep 17 00:00:00 2001 From: jos Date: Thu, 5 Jun 2014 14:23:20 +0200 Subject: [PATCH] CurrentTime and CustomTime working again --- src/timeline/Timeline.js | 24 ++++++------- src/timeline/component/CurrentTime.js | 51 +++++++++++++++------------ src/timeline/component/CustomTime.js | 47 ++++++++++++------------ src/timeline/component/TimeAxis.js | 16 ++++++--- src/timeline/component/css/panel.css | 4 +++ 5 files changed, 80 insertions(+), 62 deletions(-) diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js index 9003aaff..abb44b69 100644 --- a/src/timeline/Timeline.js +++ b/src/timeline/Timeline.js @@ -97,25 +97,25 @@ function Timeline (container, items, options) { this.components = []; - // create a Range + // range this.range = new Range(this, this.options); this.range.setRange( now.clone().add('days', -3).valueOf(), now.clone().add('days', 4).valueOf() ); - // Create a TimeAxis - var timeAxis = new TimeAxis(this, this.options); - this.components.push(timeAxis); + // time axis + this.timeAxis = new TimeAxis(this, this.options); + this.components.push(this.timeAxis); - // re-emit public events - this.emitter.on('rangechange', function (properties) { - me.emit('rangechange', properties); - }); - this.emitter.on('rangechanged', function (properties) { - me.emit('rangechanged', properties); - }); + // current time bar + this.currentTime = new CurrentTime(this, this.options); + this.components.push(this.currentTime); + // custom time bar + // Note: time bar will be attached in this.setOptions when selected + this.customTime = new CustomTime(this, this.options); + this.components.push(this.customTime); /* TODO // root panel @@ -378,7 +378,7 @@ Timeline.prototype._create = function () { // TODO: move watch from RootPanel to here // create a central event bus - this.emitter = new Emitter(); + this.emitter = this; this.emitter.on('rangechange', this.repaint.bind(this)); diff --git a/src/timeline/component/CurrentTime.js b/src/timeline/component/CurrentTime.js index 26606207..5260b298 100644 --- a/src/timeline/component/CurrentTime.js +++ b/src/timeline/component/CurrentTime.js @@ -1,28 +1,22 @@ /** * A current time bar - * @param {Range} range + * @param {{range: Range, dom: Object}} timeline * @param {Object} [options] Available parameters: * {Boolean} [showCurrentTime] * @constructor CurrentTime * @extends Component */ -function CurrentTime (range, options) { - this.id = util.randomUUID(); +function CurrentTime (timeline, options) { + this.timeline = timeline; - this.range = range; this.options = options || {}; - this.defaultOptions = { - showCurrentTime: false - }; this._create(); } CurrentTime.prototype = new Component(); -CurrentTime.prototype.setOptions = Component.prototype.setOptions; - /** * Create the HTML DOM for the current time bar * @private @@ -37,26 +31,37 @@ CurrentTime.prototype._create = function _create () { this.bar = bar; }; -/** - * Get the frame element of the current time bar - * @returns {HTMLElement} frame - */ -CurrentTime.prototype.getFrame = function getFrame() { - return this.bar; -}; - /** * Repaint the component * @return {boolean} Returns true if the component is resized */ CurrentTime.prototype.repaint = function repaint() { - var parent = this.parent; + // FIXME: CurrentTime should be on the foreground - var now = new Date(); - var x = this.options.toScreen(now); + if (this.options.showCurrentTime) { + if (this.bar.parentNode != this.timeline.dom.backgroundVertical) { + // attach to the dom + if (this.bar.parentNode) { + this.bar.parentNode.removeChild(this.bar); + } + this.timeline.dom.backgroundVertical.appendChild(this.bar); - this.bar.style.left = x + 'px'; - this.bar.title = 'Current time: ' + now; + this.start(); + } + + var now = new Date(); + var x = this.options.toScreen(now); + + this.bar.style.left = x + 'px'; + this.bar.title = 'Current time: ' + now; + } + else { + // remove the line from the DOM + if (this.bar.parentNode) { + this.bar.parentNode.removeChild(this.bar); + this.stop(); + } + } return false; }; @@ -71,7 +76,7 @@ CurrentTime.prototype.start = function start() { me.stop(); // determine interval to refresh - var scale = me.range.conversion(me.parent.width).scale; + var scale = me.timeline.range.conversion(me.timeline.props.center.width).scale; var interval = 1 / scale / 10; if (interval < 30) interval = 30; if (interval > 1000) interval = 1000; diff --git a/src/timeline/component/CustomTime.js b/src/timeline/component/CustomTime.js index 4b7634b3..59536219 100644 --- a/src/timeline/component/CustomTime.js +++ b/src/timeline/component/CustomTime.js @@ -1,18 +1,15 @@ /** * A custom time bar + * @param {{range: Range, dom: Object}} timeline * @param {Object} [options] Available parameters: * {Boolean} [showCustomTime] * @constructor CustomTime * @extends Component */ -function CustomTime (options) { - this.id = util.randomUUID(); - +function CustomTime (timeline, options) { + this.timeline = timeline; this.options = options || {}; - this.defaultOptions = { - showCustomTime: false - }; this.customTime = new Date(); this.eventParams = {}; // stores state parameters while dragging the bar @@ -23,8 +20,6 @@ function CustomTime (options) { CustomTime.prototype = new Component(); -CustomTime.prototype.setOptions = Component.prototype.setOptions; - /** * Create the DOM for the custom time * @private @@ -54,23 +49,31 @@ CustomTime.prototype._create = function _create () { this.hammer.on('dragend', this._onDragEnd.bind(this)); }; -/** - * Get the frame element of the custom time bar - * @returns {HTMLElement} frame - */ -CustomTime.prototype.getFrame = function getFrame() { - return this.bar; -}; - /** * Repaint the component * @return {boolean} Returns true if the component is resized */ CustomTime.prototype.repaint = function () { - var x = this.options.toScreen(this.customTime); - - this.bar.style.left = x + 'px'; - this.bar.title = 'Time: ' + this.customTime; + if (this.options.showCustomTime) { + if (this.bar.parentNode != this.timeline.dom.backgroundVertical) { + // attach to the dom + if (this.bar.parentNode) { + this.bar.parentNode.removeChild(this.bar); + } + this.timeline.dom.backgroundVertical.appendChild(this.bar); + } + + var x = this.options.toScreen(this.customTime); + + this.bar.style.left = x + 'px'; + this.bar.title = 'Time: ' + this.customTime; + } + else { + // remove the line from the DOM + if (this.bar.parentNode) { + this.bar.parentNode.removeChild(this.bar); + } + } return false; }; @@ -120,7 +123,7 @@ CustomTime.prototype._onDrag = function (event) { this.setCustomTime(time); // fire a timechange event - this.emit('timechange', { + this.timeline.emitter.emit('timechange', { time: new Date(this.customTime.valueOf()) }); @@ -137,7 +140,7 @@ CustomTime.prototype._onDragEnd = function (event) { if (!this.eventParams.dragging) return; // fire a timechanged event - this.emit('timechanged', { + this.timeline.emitter.emit('timechanged', { time: new Date(this.customTime.valueOf()) }); diff --git a/src/timeline/component/TimeAxis.js b/src/timeline/component/TimeAxis.js index df91731c..46978ab1 100644 --- a/src/timeline/component/TimeAxis.js +++ b/src/timeline/component/TimeAxis.js @@ -101,7 +101,8 @@ TimeAxis.prototype.repaint = function () { props.majorLineWidth = 1; // TODO: really calculate width // take foreground and background offline while updating (is almost twice as fast) - var beforeChild = foreground.nextSibling; + var foregroundNextSibling = foreground.nextSibling; + var backgroundNextSibling = background.nextSibling; foreground.parentNode && foreground.parentNode.removeChild(foreground); background.parentNode && background.parentNode.removeChild(background); @@ -109,14 +110,19 @@ TimeAxis.prototype.repaint = function () { this._repaintLabels(); - // put DOM online again (foreground at the same place) - if (beforeChild) { - parent.insertBefore(foreground, beforeChild); + // put DOM online again (at the same place) + if (foregroundNextSibling) { + parent.insertBefore(foreground, foregroundNextSibling); } else { parent.appendChild(foreground) } - this.timeline.dom.backgroundVertical.appendChild(background); + if (backgroundNextSibling) { + this.timeline.dom.backgroundVertical.insertBefore(background, backgroundNextSibling); + } + else { + this.timeline.dom.backgroundVertical.appendChild(background) + } return this._isResized() || parentChanged; }; diff --git a/src/timeline/component/css/panel.css b/src/timeline/component/css/panel.css index 66010dfa..902dd34b 100644 --- a/src/timeline/component/css/panel.css +++ b/src/timeline/component/css/panel.css @@ -40,3 +40,7 @@ border-left-style: solid; border-right-style: solid; } + +.vis.timeline .background { + overflow: hidden; +} \ No newline at end of file