TimeAxis works again

src/timeline/Timeline.js

@@ -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;
 };

src/timeline/component/TimeAxis.js

@@ -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.