Fixed a bug in the configuration option `config` when zooming out a lot when using range items

HISTORY.md

@@ -23,7 +23,7 @@ http://visjs.org
 - Implemented creating new range items by dragging in an empty space with the
   ctrl key down.
 - Implemented configuration option `order: function` to define a custom ordering
-  for the items (see #538, #324).
+  for the items (see #538, #234).
 - Fixed not property initializing with a DataView for groups.
 - Merged add custom timebar functionality, thanks @aytech!
 - Fixed #664: end of item not restored when canceling a move event.

dist/vis.js

@@ -9860,9 +9860,6 @@ return /******/ (function(modules) { // webpackBootstrap
     var start = this.conversion.toScreen(this.data.start);
     var align = this.options.align;
     var left;
-    var box = this.dom.box;
-    var line = this.dom.line;
-    var dot = this.dom.dot;
 
     // calculate left position of the box
     if (align == 'right') {
@@ -9877,13 +9874,13 @@ return /******/ (function(modules) { // webpackBootstrap
     }
 
     // reposition box
-    box.style.left = this.left + 'px';
+    this.dom.box.style.left = this.left + 'px';
 
     // reposition line
-    line.style.left = (start - this.props.line.width / 2) + 'px';
+    this.dom.line.style.left = (start - this.props.line.width / 2) + 'px';
 
     // reposition dot
-    dot.style.left = (start - this.props.dot.width / 2) + 'px';
+    this.dom.dot.style.left = (start - this.props.dot.width / 2) + 'px';
   };
 
   /**
@@ -10256,21 +10253,28 @@ return /******/ (function(modules) { // webpackBootstrap
 
   /**
    * Reposition the item horizontally
+   * @param {boolean} [limitSize=true] If true (default), the width of the range
+   *                                   item will be limited, as the browser cannot
+   *                                   display very wide divs. This means though
+   *                                   that the applied left and width may
+   *                                   not correspond to the ranges start and end
    * @Override
    */
-  RangeItem.prototype.repositionX = function() {
+  RangeItem.prototype.repositionX = function(limitSize) {
     var parentWidth = this.parent.width;
     var start = this.conversion.toScreen(this.data.start);
     var end = this.conversion.toScreen(this.data.end);
     var contentLeft;
     var contentWidth;
 
-    // limit the width of the this, as browsers cannot draw very wide divs
-    if (start < -parentWidth) {
-      start = -parentWidth;
-    }
-    if (end > 2 * parentWidth) {
-      end = 2 * parentWidth;
+    // limit the width of the range, as browsers cannot draw very wide divs
+    if (limitSize === undefined || limitSize === true) {
+      if (start < -parentWidth) {
+        start = -parentWidth;
+      }
+      if (end > 2 * parentWidth) {
+        end = 2 * parentWidth;
+      }
     }
     var boxWidth = Math.max(end - start, 1);
 
@@ -11869,12 +11873,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
         // show all items
         var me = this;
+        var limitSize = false;
         util.forEach(this.items, function (item) {
           if (!item.displayed) {
             item.redraw();
             me.visibleItems.push(item);
           }
-          item.repositionX();
+          item.repositionX(limitSize);
         });
 
         // order all items and force a restacking

docs/timeline.html

@@ -674,7 +674,7 @@ var options = {
     order is called with two arguments containing the data of two items to be
     compared.
     </p>
-    <p style="font-style: italic">IMPORTANT: Custom ordering is not suitable for large amounts of items. Keep the number of items in this configuration limited to not more than a few hundred.</p>
+    <p style="font-style: italic">WARNING: Use with caution. Custom ordering is not suitable for large amounts of items. On load, the Timeline will render all items once to determine their width and height. Keep the number of items in this configuration limited to a maximum of a few hundred items.</p>
   </td>
 </tr>
 

examples/timeline/35_item_ordering.html

@@ -42,7 +42,7 @@
   // Create a DataSet (allows two way data-binding)
   var items = new vis.DataSet();
   var date = vis.moment('2015-03-02');
-  for (var i = 0; i < 20; i++) {
+  for (var i = 0; i < 100; i++) {
     date.add(Math.round(Math.random() * 2), 'hour');
     items.add({
       id:      i,

lib/timeline/component/Group.js

@@ -171,12 +171,13 @@ Group.prototype.redraw = function(range, margin, restack) {
 
       // show all items
       var me = this;
+      var limitSize = false;
       util.forEach(this.items, function (item) {
         if (!item.displayed) {
           item.redraw();
           me.visibleItems.push(item);
         }
-        item.repositionX();
+        item.repositionX(limitSize);
       });
 
       // order all items and force a restacking

lib/timeline/component/item/BoxItem.js

@@ -163,9 +163,6 @@ BoxItem.prototype.repositionX = function() {
   var start = this.conversion.toScreen(this.data.start);
   var align = this.options.align;
   var left;
-  var box = this.dom.box;
-  var line = this.dom.line;
-  var dot = this.dom.dot;
 
   // calculate left position of the box
   if (align == 'right') {
@@ -180,13 +177,13 @@ BoxItem.prototype.repositionX = function() {
   }
 
   // reposition box
-  box.style.left = this.left + 'px';
+  this.dom.box.style.left = this.left + 'px';
 
   // reposition line
-  line.style.left = (start - this.props.line.width / 2) + 'px';
+  this.dom.line.style.left = (start - this.props.line.width / 2) + 'px';
 
   // reposition dot
-  dot.style.left = (start - this.props.dot.width / 2) + 'px';
+  this.dom.dot.style.left = (start - this.props.dot.width / 2) + 'px';
 };
 
 /**

lib/timeline/component/item/RangeItem.js

@@ -146,21 +146,28 @@ RangeItem.prototype.hide = function() {
 
 /**
  * Reposition the item horizontally
+ * @param {boolean} [limitSize=true] If true (default), the width of the range
+ *                                   item will be limited, as the browser cannot
+ *                                   display very wide divs. This means though
+ *                                   that the applied left and width may
+ *                                   not correspond to the ranges start and end
  * @Override
  */
-RangeItem.prototype.repositionX = function() {
+RangeItem.prototype.repositionX = function(limitSize) {
   var parentWidth = this.parent.width;
   var start = this.conversion.toScreen(this.data.start);
   var end = this.conversion.toScreen(this.data.end);
   var contentLeft;
   var contentWidth;
 
-  // limit the width of the this, as browsers cannot draw very wide divs
-  if (start < -parentWidth) {
-    start = -parentWidth;
-  }
-  if (end > 2 * parentWidth) {
-    end = 2 * parentWidth;
+  // limit the width of the range, as browsers cannot draw very wide divs
+  if (limitSize === undefined || limitSize === true) {
+    if (start < -parentWidth) {
+      start = -parentWidth;
+    }
+    if (end > 2 * parentWidth) {
+      end = 2 * parentWidth;
+    }
   }
   var boxWidth = Math.max(end - start, 1);