Browse Source

CurrentTime and CustomTime working again

css_transitions
jos 10 years ago
parent
commit
9f2eee8af9
5 changed files with 80 additions and 62 deletions
  1. +12
    -12
      src/timeline/Timeline.js
  2. +28
    -23
      src/timeline/component/CurrentTime.js
  3. +25
    -22
      src/timeline/component/CustomTime.js
  4. +11
    -5
      src/timeline/component/TimeAxis.js
  5. +4
    -0
      src/timeline/component/css/panel.css

+ 12
- 12
src/timeline/Timeline.js View File

@ -97,25 +97,25 @@ function Timeline (container, items, options) {
this.components = []; this.components = [];
// create a Range
// range
this.range = new Range(this, this.options); this.range = new Range(this, this.options);
this.range.setRange( this.range.setRange(
now.clone().add('days', -3).valueOf(), now.clone().add('days', -3).valueOf(),
now.clone().add('days', 4).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 /* TODO
// root panel // root panel
@ -378,7 +378,7 @@ Timeline.prototype._create = function () {
// TODO: move watch from RootPanel to here // TODO: move watch from RootPanel to here
// create a central event bus // create a central event bus
this.emitter = new Emitter();
this.emitter = this;
this.emitter.on('rangechange', this.repaint.bind(this)); this.emitter.on('rangechange', this.repaint.bind(this));

+ 28
- 23
src/timeline/component/CurrentTime.js View File

@ -1,28 +1,22 @@
/** /**
* A current time bar * A current time bar
* @param {Range} range
* @param {{range: Range, dom: Object}} timeline
* @param {Object} [options] Available parameters: * @param {Object} [options] Available parameters:
* {Boolean} [showCurrentTime] * {Boolean} [showCurrentTime]
* @constructor CurrentTime * @constructor CurrentTime
* @extends Component * @extends Component
*/ */
function CurrentTime (range, options) {
this.id = util.randomUUID();
function CurrentTime (timeline, options) {
this.timeline = timeline;
this.range = range;
this.options = options || {}; this.options = options || {};
this.defaultOptions = {
showCurrentTime: false
};
this._create(); this._create();
} }
CurrentTime.prototype = new Component(); CurrentTime.prototype = new Component();
CurrentTime.prototype.setOptions = Component.prototype.setOptions;
/** /**
* Create the HTML DOM for the current time bar * Create the HTML DOM for the current time bar
* @private * @private
@ -37,26 +31,37 @@ CurrentTime.prototype._create = function _create () {
this.bar = bar; 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 * Repaint the component
* @return {boolean} Returns true if the component is resized * @return {boolean} Returns true if the component is resized
*/ */
CurrentTime.prototype.repaint = function repaint() { 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; return false;
}; };
@ -71,7 +76,7 @@ CurrentTime.prototype.start = function start() {
me.stop(); me.stop();
// determine interval to refresh // 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; var interval = 1 / scale / 10;
if (interval < 30) interval = 30; if (interval < 30) interval = 30;
if (interval > 1000) interval = 1000; if (interval > 1000) interval = 1000;

+ 25
- 22
src/timeline/component/CustomTime.js View File

@ -1,18 +1,15 @@
/** /**
* A custom time bar * A custom time bar
* @param {{range: Range, dom: Object}} timeline
* @param {Object} [options] Available parameters: * @param {Object} [options] Available parameters:
* {Boolean} [showCustomTime] * {Boolean} [showCustomTime]
* @constructor CustomTime * @constructor CustomTime
* @extends Component * @extends Component
*/ */
function CustomTime (options) {
this.id = util.randomUUID();
function CustomTime (timeline, options) {
this.timeline = timeline;
this.options = options || {}; this.options = options || {};
this.defaultOptions = {
showCustomTime: false
};
this.customTime = new Date(); this.customTime = new Date();
this.eventParams = {}; // stores state parameters while dragging the bar this.eventParams = {}; // stores state parameters while dragging the bar
@ -23,8 +20,6 @@ function CustomTime (options) {
CustomTime.prototype = new Component(); CustomTime.prototype = new Component();
CustomTime.prototype.setOptions = Component.prototype.setOptions;
/** /**
* Create the DOM for the custom time * Create the DOM for the custom time
* @private * @private
@ -54,23 +49,31 @@ CustomTime.prototype._create = function _create () {
this.hammer.on('dragend', this._onDragEnd.bind(this)); 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 * Repaint the component
* @return {boolean} Returns true if the component is resized * @return {boolean} Returns true if the component is resized
*/ */
CustomTime.prototype.repaint = function () { 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; return false;
}; };
@ -120,7 +123,7 @@ CustomTime.prototype._onDrag = function (event) {
this.setCustomTime(time); this.setCustomTime(time);
// fire a timechange event // fire a timechange event
this.emit('timechange', {
this.timeline.emitter.emit('timechange', {
time: new Date(this.customTime.valueOf()) time: new Date(this.customTime.valueOf())
}); });
@ -137,7 +140,7 @@ CustomTime.prototype._onDragEnd = function (event) {
if (!this.eventParams.dragging) return; if (!this.eventParams.dragging) return;
// fire a timechanged event // fire a timechanged event
this.emit('timechanged', {
this.timeline.emitter.emit('timechanged', {
time: new Date(this.customTime.valueOf()) time: new Date(this.customTime.valueOf())
}); });

+ 11
- 5
src/timeline/component/TimeAxis.js View File

@ -101,7 +101,8 @@ TimeAxis.prototype.repaint = function () {
props.majorLineWidth = 1; // TODO: really calculate width props.majorLineWidth = 1; // TODO: really calculate width
// take foreground and background offline while updating (is almost twice as fast) // 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); foreground.parentNode && foreground.parentNode.removeChild(foreground);
background.parentNode && background.parentNode.removeChild(background); background.parentNode && background.parentNode.removeChild(background);
@ -109,14 +110,19 @@ TimeAxis.prototype.repaint = function () {
this._repaintLabels(); 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 { else {
parent.appendChild(foreground) 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; return this._isResized() || parentChanged;
}; };

+ 4
- 0
src/timeline/component/css/panel.css View File

@ -40,3 +40,7 @@
border-left-style: solid; border-left-style: solid;
border-right-style: solid; border-right-style: solid;
} }
.vis.timeline .background {
overflow: hidden;
}

Loading…
Cancel
Save