Implemented option `stack` to enable/disable stacking of items.

HISTORY.md

@@ -10,6 +10,7 @@ http://visjs.org
 - Great performance improvements.
 - Improved layout of box-items inside groups.
 - Items can now be dragged from one group to another.
+- Implemented option `stack` to enable/disable stacking of items.
 - Option `editable` can now be used to enable/disable individual manipulation
   actions (`add`, `updateTime`, `updateGroup`, `remove`).
 - Function `setWindow` now accepts an object with properties `start` and `end`.

dist/vis.js

@@ -2488,14 +2488,14 @@ stack.orderByEnd = function orderByEnd(items) {
 };
 
 /**
- * Adjust vertical positions of the events such that they don't overlap each
+ * Adjust vertical positions of the items such that they don't overlap each
  * other.
  * @param {Item[]} items
  *            All visible items
  * @param {{item: number, axis: number}} margin
  *            Margins between items and between items and the axis.
  * @param {boolean} [force=false]
- *            If true, all items will be re-stacked. If false (default), only
+ *            If true, all items will be repositioned. If false (default), only
  *            items having a top===null will be re-stacked
  */
 stack.stack = function _stack (items, margin, force) {
@@ -2528,7 +2528,7 @@ stack.stack = function _stack (items, margin, force) {
         }
 
         if (collidingItem != null) {
-          // There is a collision. Reposition the event above the colliding element
+          // There is a collision. Reposition the items above the colliding element
           item.top = collidingItem.top + collidingItem.height + margin.item;
         }
       } while (collidingItem);
@@ -2536,6 +2536,22 @@ stack.stack = function _stack (items, margin, force) {
   }
 };
 
+/**
+ * Adjust vertical positions of the items without stacking them
+ * @param {Item[]} items
+ *            All visible items
+ * @param {{item: number, axis: number}} margin
+ *            Margins between items and between items and the axis.
+ */
+stack.nostack = function nostack (items, margin) {
+  var i, iMax;
+
+  // reset top position of all items
+  for (i = 0, iMax = items.length; i < iMax; i++) {
+    items[i].top = margin.axis;
+  }
+};
+
 /**
  * Test if the two provided items collide
  * The items must have parameters left, width, top, and height.
@@ -5405,6 +5421,8 @@ ItemSet.prototype._onRemoveGroups = function _onRemoveGroups(ids) {
     }
   });
 
+  this.markDirty();
+
   this.emit('change');
 };
 
@@ -6795,7 +6813,12 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
   this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
 
   // reposition visible items vertically
-  stack.stack(this.visibleItems, margin, restack);
+  if (this.itemSet.options.stack) { // TODO: ugly way to access options...
+    stack.stack(this.visibleItems, margin, restack);
+  }
+  else { // no stacking
+    stack.nostack(this.visibleItems, margin);
+  }
   this.stackDirty = false;
   for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
     var item = this.visibleItems[i];
@@ -7135,6 +7158,7 @@ function Timeline (container, items, options) {
     orientation: 'bottom',
     direction: 'horizontal', // 'horizontal' or 'vertical'
     autoResize: true,
+    stacking: true,
 
     editable: {
       updateTime: false,

docs/timeline.html

@@ -564,6 +564,13 @@ var options = {
     visible.</td>
 </tr>
 
+<tr>
+  <td>stack</td>
+  <td>Boolean</td>
+  <td>true</td>
+  <td>If true (default), items will be stacked on top of each other such that they are not overlapping.</td>
+</tr>
+
 <tr>
   <td>start</td>
   <td>Date | Number | String</td>

src/timeline/Timeline.js

@@ -15,6 +15,7 @@ function Timeline (container, items, options) {
     orientation: 'bottom',
     direction: 'horizontal', // 'horizontal' or 'vertical'
     autoResize: true,
+    stacking: true,
 
     editable: {
       updateTime: false,

src/timeline/component/Group.js

@@ -123,7 +123,12 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
   this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
 
   // reposition visible items vertically
-  stack.stack(this.visibleItems, margin, restack);
+  if (this.itemSet.options.stack) { // TODO: ugly way to access options...
+    stack.stack(this.visibleItems, margin, restack);
+  }
+  else { // no stacking
+    stack.nostack(this.visibleItems, margin);
+  }
   this.stackDirty = false;
   for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
     var item = this.visibleItems[i];

src/timeline/stack.js

@@ -28,14 +28,14 @@ stack.orderByEnd = function orderByEnd(items) {
 };
 
 /**
- * Adjust vertical positions of the events such that they don't overlap each
+ * Adjust vertical positions of the items such that they don't overlap each
  * other.
  * @param {Item[]} items
  *            All visible items
  * @param {{item: number, axis: number}} margin
  *            Margins between items and between items and the axis.
  * @param {boolean} [force=false]
- *            If true, all items will be re-stacked. If false (default), only
+ *            If true, all items will be repositioned. If false (default), only
  *            items having a top===null will be re-stacked
  */
 stack.stack = function _stack (items, margin, force) {
@@ -68,7 +68,7 @@ stack.stack = function _stack (items, margin, force) {
         }
 
         if (collidingItem != null) {
-          // There is a collision. Reposition the event above the colliding element
+          // There is a collision. Reposition the items above the colliding element
           item.top = collidingItem.top + collidingItem.height + margin.item;
         }
       } while (collidingItem);
@@ -76,6 +76,22 @@ stack.stack = function _stack (items, margin, force) {
   }
 };
 
+/**
+ * Adjust vertical positions of the items without stacking them
+ * @param {Item[]} items
+ *            All visible items
+ * @param {{item: number, axis: number}} margin
+ *            Margins between items and between items and the axis.
+ */
+stack.nostack = function nostack (items, margin) {
+  var i, iMax;
+
+  // reset top position of all items
+  for (i = 0, iMax = items.length; i < iMax; i++) {
+    items[i].top = margin.axis;
+  }
+};
+
 /**
  * Test if the two provided items collide
  * The items must have parameters left, width, top, and height.

test/timeline_groups.html

@@ -78,6 +78,7 @@
       updateTime: true,
       updateGroup: true
     },
+    stack: false,
     //height: 200,
     groupOrder: 'content'
   };