Created a Group holding ungrouped items, for timelines not using groups

src/timeline/Stack.js

@@ -92,7 +92,6 @@ Stack.prototype.orderByEnd = function orderByEnd(items) {
  * @param {boolean} [force=false] If true, all items will be re-stacked.
  *                                If false (default), only items having a
  *                                top===null will be re-stacked
- * @private
  */
 Stack.prototype.stack = function stack (items, force) {
   var i,
@@ -152,8 +151,8 @@ Stack.prototype.stack = function stack (items, force) {
 /**
  * Test if the two provided items collide
  * The items must have parameters left, width, top, and height.
- * @param {Component} a     The first item
- * @param {Component} b     The second item
+ * @param {Item} a          The first item
+ * @param {Item} b          The second item
  * @param {Number} margin   A minimum required margin.
  *                          If margin is provided, the two items will be
  *                          marked colliding when they overlap or

src/timeline/component/Component.js

@@ -74,7 +74,7 @@ Component.prototype.repaint = function repaint() {
  * Test whether the component is resized since the last time _isResized() was
  * called.
  * @return {Boolean} Returns true if the component is resized
- * @private
+ * @protected
  */
 Component.prototype._isResized = function _isResized() {
   var resized = (this._previousWidth !== this.width || this._previousHeight !== this.height);

src/timeline/component/ItemSet.js

@@ -67,6 +67,7 @@ function ItemSet(backgroundPanel, axisPanel, labelPanel, options) {
 
   this.groups = {}; // Group object for every group
   this.groupIds = [];
+  this.ungrouped = null; // Group holding all ungrouped items (yeah, funny right?), used when there are no groups
 
   this.visibleItems = []; // visible, ordered items
   this.selection = [];  // list with the ids of all selected nodes
@@ -383,7 +384,6 @@ ItemSet.prototype.repaint = function repaint() {
       options = this.options,
       orientation = this.getOption('orientation'),
       frame = this.frame,
-      initialPosByStart,
       i, ii;
 
   // update className
@@ -507,6 +507,36 @@ ItemSet.prototype._updateVisibleItems = function _updateVisibleItems(orderedItem
   return newVisibleItems;
 };
 
+/**
+ * Create or delete the group holding all ungrouped items. This group is used when
+ * there are no groups specified.
+ * @protected
+ */
+ItemSet.prototype._updateUngrouped = function _updateUngrouped() {
+  if (this.groupsData) {
+    // remove the group holding all (unfiltered) items
+    if (this.ungrouped) {
+      this.ungrouped.hide();
+      this.ungrouped = null;
+    }
+  }
+  else {
+    // create a group holding all (unfiltered) items
+    if (!this.ungrouped) {
+      var id = null;
+      this.ungrouped = new Group(id, this, this.dom.background, this.dom.axis, this.labelPanel.frame);
+
+      for (var itemId in this.items) {
+        if (this.items.hasOwnProperty(itemId)) {
+          this.ungrouped.add(this.items[itemId]);
+        }
+      }
+
+      this.ungrouped.show();
+    }
+  }
+};
+
 /**
  * Get the foreground container element
  * @return {HTMLElement} foreground
@@ -577,9 +607,12 @@ ItemSet.prototype.setItems = function setItems(items) {
       me.itemsData.on(event, callback, id);
     });
 
-    // draw all new items
+    // add all new items
     ids = this.itemsData.getIds();
     this._onAdd(ids);
+
+    // update the group holding all ungrouped items
+    this._updateUngrouped();
   }
 };
 
@@ -633,6 +666,9 @@ ItemSet.prototype.setGroups = function setGroups(groups) {
     this._onAddGroups(ids);
   }
 
+  // update the group holding all ungrouped items
+  this._updateUngrouped();
+
   this.emit('change');
 };
 
@@ -667,7 +703,7 @@ ItemSet.prototype.removeItem = function removeItem (id) {
 /**
  * Handle updated items
  * @param {Number[]} ids
- * @private
+ * @protected
  */
 ItemSet.prototype._onUpdate = function _onUpdate(ids) {
   var me = this,
@@ -721,14 +757,14 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
 /**
  * Handle added items
  * @param {Number[]} ids
- * @private
+ * @protected
  */
 ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
 
 /**
  * Handle removed items
  * @param {Number[]} ids
- * @private
+ * @protected
  */
 ItemSet.prototype._onRemove = function _onRemove(ids) {
   var count = 0;
@@ -822,15 +858,6 @@ ItemSet.prototype._updateGroupIds = function () {
   this.groupIds = this.groupsData.getIds({
     order: this.options.groupOrder
   });
-
-  /* TODO
-  // hide the groups now, they will be shown again in the next repaint
-  // in correct order
-  var groups = this.groups;
-  this.groupIds.forEach(function (id) {
-    groups[id].hide();
-  });
-  */
 };
 
 /**
@@ -841,8 +868,11 @@ ItemSet.prototype._updateGroupIds = function () {
 ItemSet.prototype._addItem = function _addItem(item) {
   this.items[item.id] = item;
 
-  // add to group (if any)
-  if ('group' in item.data) {
+  // add to group
+  if (this.ungrouped) {
+    this.ungrouped.add(item);
+  }
+  else {
     var group = this.groups[item.data.group];
     if (group) group.add(item);
   }
@@ -868,7 +898,10 @@ ItemSet.prototype._updateItem = function _updateItem(item, itemData) {
       if (group) group.remove(item);
     }
 
-    if ('group' in item.data) {
+    if (this.ungrouped) {
+      this.ungrouped.add(item);
+    }
+    else {
       group = this.groups[item.data.group];
       if (group) group.add(item);
     }
@@ -896,8 +929,11 @@ ItemSet.prototype._removeItem = function _removeItem(item) {
   index = this.selection.indexOf(item.id);
   if (index != -1) this.selection.splice(index, 1);
 
-  // remove from group (if any)
-  if ('group' in item.data) {
+  // remove from group
+  if (this.ungrouped) {
+    this.ungrouped.remove(item);
+  }
+  else {
     var group = this.groups[item.data.group];
     if (group) group.remove(item);
   }
@@ -919,8 +955,15 @@ ItemSet.prototype._order = function _order() {
   this.stack.orderByEnd(this.orderedItems.byEnd);
 };
 
+/**
+ * Create an array containing all items being a range (having an end date)
+ * @param array
+ * @returns {Array}
+ * @private
+ */
 ItemSet.prototype._constructByEndArray = function _constructByEndArray(array) {
   var endArray = [];
+
   for (var i = 0; i < array.length; i++) {
     if (array[i] instanceof ItemRange) {
       endArray.push(array[i]);

src/timeline/component/item/Item.js

@@ -108,7 +108,7 @@ Item.prototype.repositionY = function repositionY() {
 /**
  * Repaint a delete button on the top right of the item when the item is selected
  * @param {HTMLElement} anchor
- * @private
+ * @protected
  */
 Item.prototype._repaintDeleteButton = function (anchor) {
   if (this.selected && this.options.editable && !this.dom.deleteButton) {

src/timeline/component/item/ItemRange.js

@@ -205,7 +205,7 @@ ItemRange.prototype.repositionY = function repositionY() {
 
 /**
  * Repaint a drag area on the left side of the range when the range is selected
- * @private
+ * @protected
  */
 ItemRange.prototype._repaintDragLeft = function () {
   if (this.selected && this.options.editable && !this.dom.dragLeft) {
@@ -235,7 +235,7 @@ ItemRange.prototype._repaintDragLeft = function () {
 
 /**
  * Repaint a drag area on the right side of the range when the range is selected
- * @private
+ * @protected
  */
 ItemRange.prototype._repaintDragRight = function () {
   if (this.selected && this.options.editable && !this.dom.dragRight) {