Fixed initial stacking of items in groups

src/timeline/component/Group.js

@@ -64,9 +64,10 @@ Group.prototype.setItems = function setItems(items) {
     var itemSetOptions = Object.create(this.options);
     this.itemSet = new ItemSet(itemSetOptions);
     this.itemSet.on('change', this.emit.bind(this, 'change')); // propagate change event
-    if (this.range) this.itemSet.setRange(this.range);
     this.contentPanel.appendChild(this.itemSet);
 
+    if (this.range) this.itemSet.setRange(this.range);
+
     this.view = new DataView(items, {
       filter: function (item) {
         return item.group == groupId;

src/timeline/component/ItemSet.js

@@ -46,7 +46,6 @@ function ItemSet(options) {
   this.queue = {};      // queue with id/actions: 'add', 'update', 'delete'
   this.stack = new Stack(Object.create(this.options));
   this.stackDirty = true; // if true, all items will be restacked on next repaint
-  this.conversion = null;
 
   this.touchParams = {}; // stores properties while dragging
 
@@ -174,8 +173,6 @@ ItemSet.prototype.repaint = function repaint() {
       orientation = this.getOption('orientation'),
       frame = this.frame;
 
-  this._updateConversion();
-
   if (!frame) {
     frame = document.createElement('div');
     frame['timeline-itemset'] = this;
@@ -477,11 +474,6 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
       // update item
       if (!constructor || !(item instanceof constructor)) {
         // item type has changed, hide and delete the item
-        if (!('hide' in item)) {
-          console.log('item has no hide?!', item, Object.keys(items))
-          console.trace()
-        }
-
         item.hide();
         item = null;
       }
@@ -560,52 +552,6 @@ ItemSet.prototype._order = function _order() {
   //console.log('byEnd', this.orderedItems.byEnd.map(function (item) {return item.id}))
 };
 
-/**
- * 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
- */
-ItemSet.prototype._updateConversion = function _updateConversion() {
-  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);
-  }
-};
-
-/**
- * Convert a position on screen (pixels) to a datetime
- * Before this method can be used, the method _updateConversion must be
- * executed once.
- * @param {int}     x    Position on the screen in pixels
- * @return {Date}   time The datetime the corresponds with given position x
- */
-ItemSet.prototype.toTime = function toTime(x) {
-  var conversion = this.conversion;
-  return new Date(x / conversion.scale + conversion.offset);
-};
-
-/**
- * Convert a datetime (Date object) into a position on the screen
- * Before this method can be used, the method _updateConversion must be
- * executed once.
- * @param {Date}   time A date
- * @return {int}   x    The position on the screen in pixels which corresponds
- *                      with the given date.
- */
-ItemSet.prototype.toScreen = function toScreen(time) {
-  var conversion = this.conversion;
-  return (time.valueOf() - conversion.offset) * conversion.scale;
-};
-
 /**
  * Start dragging the selected events
  * @param {Event} event
@@ -666,7 +612,8 @@ ItemSet.prototype._onDrag = function (event) {
   if (this.touchParams.itemProps) {
     var snap = this.options.snap || null,
         deltaX = event.gesture.deltaX,
-        offset = deltaX / this.conversion.scale;
+        scale = (this.width / (this.range.end - this.range.start)),
+        offset = deltaX / scale;
 
     // move
     this.touchParams.itemProps.forEach(function (props) {

src/timeline/component/item/ItemBox.js

@@ -172,7 +172,7 @@ ItemBox.prototype.hide = function hide() {
  * @Override
  */
 ItemBox.prototype.repositionX = function repositionX() {
-  var start = this.parent.toScreen(this.data.start),
+  var start = this.defaultOptions.toScreen(this.data.start),
       align = this.options.align || this.defaultOptions.align,
       left,
       box = this.dom.box,
@@ -229,4 +229,4 @@ ItemBox.prototype.repositionY = function repositionY () {
   }
 
   dot.style.top = (-this.props.dot.height / 2) + 'px';
-}
+};

src/timeline/component/item/ItemPoint.js

@@ -163,7 +163,7 @@ ItemPoint.prototype.hide = function hide() {
  * @Override
  */
 ItemPoint.prototype.repositionX = function repositionX() {
-  var start = this.parent.toScreen(this.data.start);
+  var start = this.defaultOptions.toScreen(this.data.start);
 
   this.left = start - this.props.dot.width / 2;
 

src/timeline/component/item/ItemRange.js

@@ -154,8 +154,8 @@ ItemRange.prototype.hide = function hide() {
 ItemRange.prototype.repositionX = function repositionX() {
   var props = this.props,
       parentWidth = this.parent.width,
-      start = this.parent.toScreen(this.data.start),
-      end = this.parent.toScreen(this.data.end),
+      start = this.defaultOptions.toScreen(this.data.start),
+      end = this.defaultOptions.toScreen(this.data.end),
       padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding,
       contentLeft;
 

src/timeline/component/item/ItemRangeOverflow.js

@@ -29,8 +29,8 @@ ItemRangeOverflow.prototype.baseClassName = 'item rangeoverflow';
  */
 ItemRangeOverflow.prototype.repositionX = function repositionX() {
   var parentWidth = this.parent.width,
-      start = this.parent.toScreen(this.data.start),
-      end = this.parent.toScreen(this.data.end),
+      start = this.defaultOptions.toScreen(this.data.start),
+      end = this.defaultOptions.toScreen(this.data.end),
       padding = 'padding' in this.options ? this.options.padding : this.defaultOptions.padding,
       contentLeft;
 

test/timeline.html

@@ -40,6 +40,8 @@
 <div id="visualization"></div>
 
 <script>
+  console.time('create dataset')
+
   // create a dataset with items
   var now = moment().minutes(0).seconds(0).milliseconds(0);
   var items = new vis.DataSet({
@@ -79,7 +81,11 @@
     zoomMax: 1000 * 60 * 60 * 24 * 30 * 6    // 6 months
   };
 
+  console.timeEnd('create dataset')
+
+  console.time('create timeline')
   var timeline = new vis.Timeline(container, items, options);
+  console.timeEnd('create timeline')
 
 </script>
 </body>