vis-rails 2.0.0 → 2.0.1

data/vendor/assets/vis/timeline/component/ItemSet.js

@@ -1,1332 +0,0 @@
-var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
-
-/**
- * An ItemSet holds a set of items and ranges which can be displayed in a
- * range. The width is determined by the parent of the ItemSet, and the height
- * is determined by the size of the items.
- * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
- * @param {Object} [options]      See ItemSet.setOptions for the available options.
- * @constructor ItemSet
- * @extends Component
- */
-function ItemSet(body, options) {
-  this.body = body;
-
-  this.defaultOptions = {
-    type: 'box',
-    orientation: 'bottom',  // 'top' or 'bottom'
-    align: 'center', // alignment of box items
-    stack: true,
-    groupOrder: null,
-
-    selectable: true,
-    editable: {
-      updateTime: false,
-      updateGroup: false,
-      add: false,
-      remove: false
-    },
-
-    onAdd: function (item, callback) {
-      callback(item);
-    },
-    onUpdate: function (item, callback) {
-      callback(item);
-    },
-    onMove: function (item, callback) {
-      callback(item);
-    },
-    onRemove: function (item, callback) {
-      callback(item);
-    },
-
-    margin: {
-      item: 10,
-      axis: 20
-    },
-    padding: 5
-  };
-
-  // options is shared by this ItemSet and all its items
-  this.options = util.extend({}, this.defaultOptions);
-
-  // options for getting items from the DataSet with the correct type
-  this.itemOptions = {
-    type: {start: 'Date', end: 'Date'}
-  };
-
-  this.conversion = {
-    toScreen: body.util.toScreen,
-    toTime: body.util.toTime
-  };
-  this.dom = {};
-  this.props = {};
-  this.hammer = null;
-
-  var me = this;
-  this.itemsData = null;    // DataSet
-  this.groupsData = null;   // DataSet
-
-  // listeners for the DataSet of the items
-  this.itemListeners = {
-    'add': function (event, params, senderId) {
-      me._onAdd(params.items);
-    },
-    'update': function (event, params, senderId) {
-      me._onUpdate(params.items);
-    },
-    'remove': function (event, params, senderId) {
-      me._onRemove(params.items);
-    }
-  };
-
-  // listeners for the DataSet of the groups
-  this.groupListeners = {
-    'add': function (event, params, senderId) {
-      me._onAddGroups(params.items);
-    },
-    'update': function (event, params, senderId) {
-      me._onUpdateGroups(params.items);
-    },
-    'remove': function (event, params, senderId) {
-      me._onRemoveGroups(params.items);
-    }
-  };
-
-  this.items = {};      // object with an Item for every data item
-  this.groups = {};     // Group object for every group
-  this.groupIds = [];
-
-  this.selection = [];  // list with the ids of all selected nodes
-  this.stackDirty = true; // if true, all items will be restacked on next redraw
-
-  this.touchParams = {}; // stores properties while dragging
-  // create the HTML DOM
-
-  this._create();
-
-  this.setOptions(options);
-}
-
-ItemSet.prototype = new Component();
-
-// available item types will be registered here
-ItemSet.types = {
-  box: ItemBox,
-  range: ItemRange,
-  rangeoverflow: ItemRangeOverflow,
-  point: ItemPoint
-};
-
-/**
- * Create the HTML DOM for the ItemSet
- */
-ItemSet.prototype._create = function(){
-  var frame = document.createElement('div');
-  frame.className = 'itemset';
-  frame['timeline-itemset'] = this;
-  this.dom.frame = frame;
-
-  // create background panel
-  var background = document.createElement('div');
-  background.className = 'background';
-  frame.appendChild(background);
-  this.dom.background = background;
-
-  // create foreground panel
-  var foreground = document.createElement('div');
-  foreground.className = 'foreground';
-  frame.appendChild(foreground);
-  this.dom.foreground = foreground;
-
-  // create axis panel
-  var axis = document.createElement('div');
-  axis.className = 'axis';
-  this.dom.axis = axis;
-
-  // create labelset
-  var labelSet = document.createElement('div');
-  labelSet.className = 'labelset';
-  this.dom.labelSet = labelSet;
-
-  // create ungrouped Group
-  this._updateUngrouped();
-
-  // attach event listeners
-  // Note: we bind to the centerContainer for the case where the height
-  //       of the center container is larger than of the ItemSet, so we
-  //       can click in the empty area to create a new item or deselect an item.
-  this.hammer = Hammer(this.body.dom.centerContainer, {
-    prevent_default: true
-  });
-
-  // drag items when selected
-  this.hammer.on('touch',     this._onTouch.bind(this));
-  this.hammer.on('dragstart', this._onDragStart.bind(this));
-  this.hammer.on('drag',      this._onDrag.bind(this));
-  this.hammer.on('dragend',   this._onDragEnd.bind(this));
-
-  // single select (or unselect) when tapping an item
-  this.hammer.on('tap',  this._onSelectItem.bind(this));
-
-  // multi select when holding mouse/touch, or on ctrl+click
-  this.hammer.on('hold', this._onMultiSelectItem.bind(this));
-
-  // add item on doubletap
-  this.hammer.on('doubletap', this._onAddItem.bind(this));
-
-  // attach to the DOM
-  this.show();
-};
-
-/**
- * Set options for the ItemSet. Existing options will be extended/overwritten.
- * @param {Object} [options] The following options are available:
- *                           {String} type
- *                              Default type for the items. Choose from 'box'
- *                              (default), 'point', or 'range'. The default
- *                              Style can be overwritten by individual items.
- *                           {String} align
- *                              Alignment for the items, only applicable for
- *                              ItemBox. Choose 'center' (default), 'left', or
- *                              'right'.
- *                           {String} orientation
- *                              Orientation of the item set. Choose 'top' or
- *                              'bottom' (default).
- *                           {Function} groupOrder
- *                              A sorting function for ordering groups
- *                           {Boolean} stack
- *                              If true (deafult), items will be stacked on
- *                              top of each other.
- *                           {Number} margin.axis
- *                              Margin between the axis and the items in pixels.
- *                              Default is 20.
- *                           {Number} margin.item
- *                              Margin between items in pixels. Default is 10.
- *                           {Number} margin
- *                              Set margin for both axis and items in pixels.
- *                           {Number} padding
- *                              Padding of the contents of an item in pixels.
- *                              Must correspond with the items css. Default is 5.
- *                           {Boolean} selectable
- *                              If true (default), items can be selected.
- *                           {Boolean} editable
- *                              Set all editable options to true or false
- *                           {Boolean} editable.updateTime
- *                              Allow dragging an item to an other moment in time
- *                           {Boolean} editable.updateGroup
- *                              Allow dragging an item to an other group
- *                           {Boolean} editable.add
- *                              Allow creating new items on double tap
- *                           {Boolean} editable.remove
- *                              Allow removing items by clicking the delete button
- *                              top right of a selected item.
- *                           {Function(item: Item, callback: Function)} onAdd
- *                              Callback function triggered when an item is about to be added:
- *                              when the user double taps an empty space in the Timeline.
- *                           {Function(item: Item, callback: Function)} onUpdate
- *                              Callback function fired when an item is about to be updated.
- *                              This function typically has to show a dialog where the user
- *                              change the item. If not implemented, nothing happens.
- *                           {Function(item: Item, callback: Function)} onMove
- *                              Fired when an item has been moved. If not implemented,
- *                              the move action will be accepted.
- *                           {Function(item: Item, callback: Function)} onRemove
- *                              Fired when an item is about to be deleted.
- *                              If not implemented, the item will be always removed.
- */
-ItemSet.prototype.setOptions = function(options) {
-  if (options) {
-    // copy all options that we know
-    var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
-    util.selectiveExtend(fields, this.options, options);
-
-    if ('margin' in options) {
-      if (typeof options.margin === 'number') {
-        this.options.margin.axis = options.margin;
-        this.options.margin.item = options.margin;
-      }
-      else if (typeof options.margin === 'object'){
-        util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
-      }
-    }
-
-    if ('editable' in options) {
-      if (typeof options.editable === 'boolean') {
-        this.options.editable.updateTime  = options.editable;
-        this.options.editable.updateGroup = options.editable;
-        this.options.editable.add         = options.editable;
-        this.options.editable.remove      = options.editable;
-      }
-      else if (typeof options.editable === 'object') {
-        util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove'], this.options.editable, options.editable);
-      }
-    }
-
-    // callback functions
-    var addCallback = (function (name) {
-      if (name in options) {
-        var fn = options[name];
-        if (!(fn instanceof Function) || fn.length != 2) {
-          throw new Error('option ' + name + ' must be a function ' + name + '(item, callback)');
-        }
-        this.options[name] = fn;
-      }
-    }).bind(this);
-    ['onAdd', 'onUpdate', 'onRemove', 'onMove'].forEach(addCallback);
-
-    // force the itemSet to refresh: options like orientation and margins may be changed
-    this.markDirty();
-  }
-};
-
-/**
- * Mark the ItemSet dirty so it will refresh everything with next redraw
- */
-ItemSet.prototype.markDirty = function() {
-  this.groupIds = [];
-  this.stackDirty = true;
-};
-
-/**
- * Destroy the ItemSet
- */
-ItemSet.prototype.destroy = function() {
-  this.hide();
-  this.setItems(null);
-  this.setGroups(null);
-
-  this.hammer = null;
-
-  this.body = null;
-  this.conversion = null;
-};
-
-/**
- * Hide the component from the DOM
- */
-ItemSet.prototype.hide = function() {
-  // remove the frame containing the items
-  if (this.dom.frame.parentNode) {
-    this.dom.frame.parentNode.removeChild(this.dom.frame);
-  }
-
-  // remove the axis with dots
-  if (this.dom.axis.parentNode) {
-    this.dom.axis.parentNode.removeChild(this.dom.axis);
-  }
-
-  // remove the labelset containing all group labels
-  if (this.dom.labelSet.parentNode) {
-    this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
-  }
-};
-
-/**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
- */
-ItemSet.prototype.show = function() {
-  // show frame containing the items
-  if (!this.dom.frame.parentNode) {
-    this.body.dom.center.appendChild(this.dom.frame);
-  }
-
-  // show axis with dots
-  if (!this.dom.axis.parentNode) {
-    this.body.dom.backgroundVertical.appendChild(this.dom.axis);
-  }
-
-  // show labelset containing labels
-  if (!this.dom.labelSet.parentNode) {
-    this.body.dom.left.appendChild(this.dom.labelSet);
-  }
-};
-
-/**
- * Set selected items by their id. Replaces the current selection
- * Unknown id's are silently ignored.
- * @param {Array} [ids] An array with zero or more id's of the items to be
- *                      selected. If ids is an empty array, all items will be
- *                      unselected.
- */
-ItemSet.prototype.setSelection = function(ids) {
-  var i, ii, id, item;
-
-  if (ids) {
-    if (!Array.isArray(ids)) {
-      throw new TypeError('Array expected');
-    }
-
-    // unselect currently selected items
-    for (i = 0, ii = this.selection.length; i < ii; i++) {
-      id = this.selection[i];
-      item = this.items[id];
-      if (item) item.unselect();
-    }
-
-    // select items
-    this.selection = [];
-    for (i = 0, ii = ids.length; i < ii; i++) {
-      id = ids[i];
-      item = this.items[id];
-      if (item) {
-        this.selection.push(id);
-        item.select();
-      }
-    }
-  }
-};
-
-/**
- * Get the selected items by their id
- * @return {Array} ids  The ids of the selected items
- */
-ItemSet.prototype.getSelection = function() {
-  return this.selection.concat([]);
-};
-
-/**
- * Deselect a selected item
- * @param {String | Number} id
- * @private
- */
-ItemSet.prototype._deselect = function(id) {
-  var selection = this.selection;
-  for (var i = 0, ii = selection.length; i < ii; i++) {
-    if (selection[i] == id) { // non-strict comparison!
-      selection.splice(i, 1);
-      break;
-    }
-  }
-};
-
-/**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
-ItemSet.prototype.redraw = function() {
-  var margin = this.options.margin,
-      range = this.body.range,
-      asSize = util.option.asSize,
-      options = this.options,
-      orientation = options.orientation,
-      resized = false,
-      frame = this.dom.frame,
-      editable = options.editable.updateTime || options.editable.updateGroup;
-
-  // update class name
-  frame.className = 'itemset' + (editable ? ' editable' : '');
-
-  // reorder the groups (if needed)
-  resized = this._orderGroups() || resized;
-
-  // check whether zoomed (in that case we need to re-stack everything)
-  // TODO: would be nicer to get this as a trigger from Range
-  var visibleInterval = range.end - range.start;
-  var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.props.width != this.props.lastWidth);
-  if (zoomed) this.stackDirty = true;
-  this.lastVisibleInterval = visibleInterval;
-  this.props.lastWidth = this.props.width;
-
-  // redraw all groups
-  var restack = this.stackDirty,
-      firstGroup = this._firstGroup(),
-      firstMargin = {
-        item: margin.item,
-        axis: margin.axis
-      },
-      nonFirstMargin = {
-        item: margin.item,
-        axis: margin.item / 2
-      },
-      height = 0,
-      minHeight = margin.axis + margin.item;
-  util.forEach(this.groups, function (group) {
-    var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin;
-    var groupResized = group.redraw(range, groupMargin, restack);
-    resized = groupResized || resized;
-    height += group.height;
-  });
-  height = Math.max(height, minHeight);
-  this.stackDirty = false;
-
-  // update frame height
-  frame.style.height  = asSize(height);
-
-  // calculate actual size and position
-  this.props.top = frame.offsetTop;
-  this.props.left = frame.offsetLeft;
-  this.props.width = frame.offsetWidth;
-  this.props.height = height;
-
-  // reposition axis
-  this.dom.axis.style.top = asSize((orientation == 'top') ?
-      (this.body.domProps.top.height + this.body.domProps.border.top) :
-      (this.body.domProps.top.height + this.body.domProps.centerContainer.height));
-  this.dom.axis.style.left = this.body.domProps.border.left + 'px';
-
-  // check if this component is resized
-  resized = this._isResized() || resized;
-
-  return resized;
-};
-
-/**
- * Get the first group, aligned with the axis
- * @return {Group | null} firstGroup
- * @private
- */
-ItemSet.prototype._firstGroup = function() {
-  var firstGroupIndex = (this.options.orientation == 'top') ? 0 : (this.groupIds.length - 1);
-  var firstGroupId = this.groupIds[firstGroupIndex];
-  var firstGroup = this.groups[firstGroupId] || this.groups[UNGROUPED];
-
-  return firstGroup || null;
-};
-
-/**
- * Create or delete the group holding all ungrouped items. This group is used when
- * there are no groups specified.
- * @protected
- */
-ItemSet.prototype._updateUngrouped = function() {
-  var ungrouped = this.groups[UNGROUPED];
-
-  if (this.groupsData) {
-    // remove the group holding all ungrouped items
-    if (ungrouped) {
-      ungrouped.hide();
-      delete this.groups[UNGROUPED];
-    }
-  }
-  else {
-    // create a group holding all (unfiltered) items
-    if (!ungrouped) {
-      var id = null;
-      var data = null;
-      ungrouped = new Group(id, data, this);
-      this.groups[UNGROUPED] = ungrouped;
-
-      for (var itemId in this.items) {
-        if (this.items.hasOwnProperty(itemId)) {
-          ungrouped.add(this.items[itemId]);
-        }
-      }
-
-      ungrouped.show();
-    }
-  }
-};
-
-/**
- * Get the element for the labelset
- * @return {HTMLElement} labelSet
- */
-ItemSet.prototype.getLabelSet = function() {
-  return this.dom.labelSet;
-};
-
-/**
- * Set items
- * @param {vis.DataSet | null} items
- */
-ItemSet.prototype.setItems = function(items) {
-  var me = this,
-      ids,
-      oldItemsData = this.itemsData;
-
-  // replace the dataset
-  if (!items) {
-    this.itemsData = null;
-  }
-  else if (items instanceof DataSet || items instanceof DataView) {
-    this.itemsData = items;
-  }
-  else {
-    throw new TypeError('Data must be an instance of DataSet or DataView');
-  }
-
-  if (oldItemsData) {
-    // unsubscribe from old dataset
-    util.forEach(this.itemListeners, function (callback, event) {
-      oldItemsData.off(event, callback);
-    });
-
-    // remove all drawn items
-    ids = oldItemsData.getIds();
-    this._onRemove(ids);
-  }
-
-  if (this.itemsData) {
-    // subscribe to new dataset
-    var id = this.id;
-    util.forEach(this.itemListeners, function (callback, event) {
-      me.itemsData.on(event, callback, id);
-    });
-
-    // add all new items
-    ids = this.itemsData.getIds();
-    this._onAdd(ids);
-
-    // update the group holding all ungrouped items
-    this._updateUngrouped();
-  }
-};
-
-/**
- * Get the current items
- * @returns {vis.DataSet | null}
- */
-ItemSet.prototype.getItems = function() {
-  return this.itemsData;
-};
-
-/**
- * Set groups
- * @param {vis.DataSet} groups
- */
-ItemSet.prototype.setGroups = function(groups) {
-  var me = this,
-      ids;
-
-  // unsubscribe from current dataset
-  if (this.groupsData) {
-    util.forEach(this.groupListeners, function (callback, event) {
-      me.groupsData.unsubscribe(event, callback);
-    });
-
-    // remove all drawn groups
-    ids = this.groupsData.getIds();
-    this.groupsData = null;
-    this._onRemoveGroups(ids); // note: this will cause a redraw
-  }
-
-  // replace the dataset
-  if (!groups) {
-    this.groupsData = null;
-  }
-  else if (groups instanceof DataSet || groups instanceof DataView) {
-    this.groupsData = groups;
-  }
-  else {
-    throw new TypeError('Data must be an instance of DataSet or DataView');
-  }
-
-  if (this.groupsData) {
-    // subscribe to new dataset
-    var id = this.id;
-    util.forEach(this.groupListeners, function (callback, event) {
-      me.groupsData.on(event, callback, id);
-    });
-
-    // draw all ms
-    ids = this.groupsData.getIds();
-    this._onAddGroups(ids);
-  }
-
-  // update the group holding all ungrouped items
-  this._updateUngrouped();
-
-  // update the order of all items in each group
-  this._order();
-
-  this.body.emitter.emit('change');
-};
-
-/**
- * Get the current groups
- * @returns {vis.DataSet | null} groups
- */
-ItemSet.prototype.getGroups = function() {
-  return this.groupsData;
-};
-
-/**
- * Remove an item by its id
- * @param {String | Number} id
- */
-ItemSet.prototype.removeItem = function(id) {
-  var item = this.itemsData.get(id),
-      dataset = this._myDataSet();
-
-  if (item) {
-    // confirm deletion
-    this.options.onRemove(item, function (item) {
-      if (item) {
-        // remove by id here, it is possible that an item has no id defined
-        // itself, so better not delete by the item itself
-        dataset.remove(id);
-      }
-    });
-  }
-};
-
-/**
- * Handle updated items
- * @param {Number[]} ids
- * @protected
- */
-ItemSet.prototype._onUpdate = function(ids) {
-  var me = this;
-
-  ids.forEach(function (id) {
-    var itemData = me.itemsData.get(id, me.itemOptions),
-        item = me.items[id],
-        type = itemData.type ||
-            (itemData.start && itemData.end && 'range') ||
-            me.options.type ||
-            'box';
-
-    var constructor = ItemSet.types[type];
-
-    if (item) {
-      // update item
-      if (!constructor || !(item instanceof constructor)) {
-        // item type has changed, delete the item and recreate it
-        me._removeItem(item);
-        item = null;
-      }
-      else {
-        me._updateItem(item, itemData);
-      }
-    }
-
-    if (!item) {
-      // create item
-      if (constructor) {
-        item = new constructor(itemData, me.conversion, me.options);
-        item.id = id; // TODO: not so nice setting id afterwards
-        me._addItem(item);
-      }
-      else {
-        throw new TypeError('Unknown item type "' + type + '"');
-      }
-    }
-  });
-
-  this._order();
-  this.stackDirty = true; // force re-stacking of all items next redraw
-  this.body.emitter.emit('change');
-};
-
-/**
- * Handle added items
- * @param {Number[]} ids
- * @protected
- */
-ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
-
-/**
- * Handle removed items
- * @param {Number[]} ids
- * @protected
- */
-ItemSet.prototype._onRemove = function(ids) {
-  var count = 0;
-  var me = this;
-  ids.forEach(function (id) {
-    var item = me.items[id];
-    if (item) {
-      count++;
-      me._removeItem(item);
-    }
-  });
-
-  if (count) {
-    // update order
-    this._order();
-    this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change');
-  }
-};
-
-/**
- * Update the order of item in all groups
- * @private
- */
-ItemSet.prototype._order = function() {
-  // reorder the items in all groups
-  // TODO: optimization: only reorder groups affected by the changed items
-  util.forEach(this.groups, function (group) {
-    group.order();
-  });
-};
-
-/**
- * Handle updated groups
- * @param {Number[]} ids
- * @private
- */
-ItemSet.prototype._onUpdateGroups = function(ids) {
-  this._onAddGroups(ids);
-};
-
-/**
- * Handle changed groups
- * @param {Number[]} ids
- * @private
- */
-ItemSet.prototype._onAddGroups = function(ids) {
-  var me = this;
-
-  ids.forEach(function (id) {
-    var groupData = me.groupsData.get(id);
-    var group = me.groups[id];
-
-    if (!group) {
-      // check for reserved ids
-      if (id == UNGROUPED) {
-        throw new Error('Illegal group id. ' + id + ' is a reserved id.');
-      }
-
-      var groupOptions = Object.create(me.options);
-      util.extend(groupOptions, {
-        height: null
-      });
-
-      group = new Group(id, groupData, me);
-      me.groups[id] = group;
-
-      // add items with this groupId to the new group
-      for (var itemId in me.items) {
-        if (me.items.hasOwnProperty(itemId)) {
-          var item = me.items[itemId];
-          if (item.data.group == id) {
-            group.add(item);
-          }
-        }
-      }
-
-      group.order();
-      group.show();
-    }
-    else {
-      // update group
-      group.setData(groupData);
-    }
-  });
-
-  this.body.emitter.emit('change');
-};
-
-/**
- * Handle removed groups
- * @param {Number[]} ids
- * @private
- */
-ItemSet.prototype._onRemoveGroups = function(ids) {
-  var groups = this.groups;
-  ids.forEach(function (id) {
-    var group = groups[id];
-
-    if (group) {
-      group.hide();
-      delete groups[id];
-    }
-  });
-
-  this.markDirty();
-
-  this.body.emitter.emit('change');
-};
-
-/**
- * Reorder the groups if needed
- * @return {boolean} changed
- * @private
- */
-ItemSet.prototype._orderGroups = function () {
-  if (this.groupsData) {
-    // reorder the groups
-    var groupIds = this.groupsData.getIds({
-      order: this.options.groupOrder
-    });
-
-    var changed = !util.equalArray(groupIds, this.groupIds);
-    if (changed) {
-      // hide all groups, removes them from the DOM
-      var groups = this.groups;
-      groupIds.forEach(function (groupId) {
-        groups[groupId].hide();
-      });
-
-      // show the groups again, attach them to the DOM in correct order
-      groupIds.forEach(function (groupId) {
-        groups[groupId].show();
-      });
-
-      this.groupIds = groupIds;
-    }
-
-    return changed;
-  }
-  else {
-    return false;
-  }
-};
-
-/**
- * Add a new item
- * @param {Item} item
- * @private
- */
-ItemSet.prototype._addItem = function(item) {
-  this.items[item.id] = item;
-
-  // add to group
-  var groupId = this.groupsData ? item.data.group : UNGROUPED;
-  var group = this.groups[groupId];
-  if (group) group.add(item);
-};
-
-/**
- * Update an existing item
- * @param {Item} item
- * @param {Object} itemData
- * @private
- */
-ItemSet.prototype._updateItem = function(item, itemData) {
-  var oldGroupId = item.data.group;
-
-  item.data = itemData;
-  if (item.displayed) {
-    item.redraw();
-  }
-
-  // update group
-  if (oldGroupId != item.data.group) {
-    var oldGroup = this.groups[oldGroupId];
-    if (oldGroup) oldGroup.remove(item);
-
-    var groupId = this.groupsData ? item.data.group : UNGROUPED;
-    var group = this.groups[groupId];
-    if (group) group.add(item);
-  }
-};
-
-/**
- * Delete an item from the ItemSet: remove it from the DOM, from the map
- * with items, and from the map with visible items, and from the selection
- * @param {Item} item
- * @private
- */
-ItemSet.prototype._removeItem = function(item) {
-  // remove from DOM
-  item.hide();
-
-  // remove from items
-  delete this.items[item.id];
-
-  // remove from selection
-  var index = this.selection.indexOf(item.id);
-  if (index != -1) this.selection.splice(index, 1);
-
-  // remove from group
-  var groupId = this.groupsData ? item.data.group : UNGROUPED;
-  var group = this.groups[groupId];
-  if (group) group.remove(item);
-};
-
-/**
- * Create an array containing all items being a range (having an end date)
- * @param array
- * @returns {Array}
- * @private
- */
-ItemSet.prototype._constructByEndArray = function(array) {
-  var endArray = [];
-
-  for (var i = 0; i < array.length; i++) {
-    if (array[i] instanceof ItemRange) {
-      endArray.push(array[i]);
-    }
-  }
-  return endArray;
-};
-
-/**
- * Register the clicked item on touch, before dragStart is initiated.
- *
- * dragStart is initiated from a mousemove event, which can have left the item
- * already resulting in an item == null
- *
- * @param {Event} event
- * @private
- */
-ItemSet.prototype._onTouch = function (event) {
-  // store the touched item, used in _onDragStart
-  this.touchParams.item = ItemSet.itemFromTarget(event);
-};
-
-/**
- * Start dragging the selected events
- * @param {Event} event
- * @private
- */
-ItemSet.prototype._onDragStart = function (event) {
-  if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
-    return;
-  }
-
-  var item = this.touchParams.item || null,
-      me = this,
-      props;
-
-  if (item && item.selected) {
-    var dragLeftItem = event.target.dragLeftItem;
-    var dragRightItem = event.target.dragRightItem;
-
-    if (dragLeftItem) {
-      props = {
-        item: dragLeftItem
-      };
-
-      if (me.options.editable.updateTime) {
-        props.start = item.data.start.valueOf();
-      }
-      if (me.options.editable.updateGroup) {
-        if ('group' in item.data) props.group = item.data.group;
-      }
-
-      this.touchParams.itemProps = [props];
-    }
-    else if (dragRightItem) {
-      props = {
-        item: dragRightItem
-      };
-
-      if (me.options.editable.updateTime) {
-        props.end = item.data.end.valueOf();
-      }
-      if (me.options.editable.updateGroup) {
-        if ('group' in item.data) props.group = item.data.group;
-      }
-
-      this.touchParams.itemProps = [props];
-    }
-    else {
-      this.touchParams.itemProps = this.getSelection().map(function (id) {
-        var item = me.items[id];
-        var props = {
-          item: item
-        };
-
-        if (me.options.editable.updateTime) {
-          if ('start' in item.data) props.start = item.data.start.valueOf();
-          if ('end' in item.data)   props.end = item.data.end.valueOf();
-        }
-        if (me.options.editable.updateGroup) {
-          if ('group' in item.data) props.group = item.data.group;
-        }
-
-        return props;
-      });
-    }
-
-    event.stopPropagation();
-  }
-};
-
-/**
- * Drag selected items
- * @param {Event} event
- * @private
- */
-ItemSet.prototype._onDrag = function (event) {
-  if (this.touchParams.itemProps) {
-    var range = this.body.range,
-        snap = this.body.util.snap || null,
-        deltaX = event.gesture.deltaX,
-        scale = (this.props.width / (range.end - range.start)),
-        offset = deltaX / scale;
-
-    // move
-    this.touchParams.itemProps.forEach(function (props) {
-      if ('start' in props) {
-        var start = new Date(props.start + offset);
-        props.item.data.start = snap ? snap(start) : start;
-      }
-
-      if ('end' in props) {
-        var end = new Date(props.end + offset);
-        props.item.data.end = snap ? snap(end) : end;
-      }
-
-      if ('group' in props) {
-        // drag from one group to another
-        var group = ItemSet.groupFromTarget(event);
-        if (group && group.groupId != props.item.data.group) {
-          var oldGroup = props.item.parent;
-          oldGroup.remove(props.item);
-          oldGroup.order();
-          group.add(props.item);
-          group.order();
-
-          props.item.data.group = group.groupId;
-        }
-      }
-    });
-
-    // TODO: implement onMoving handler
-
-    this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change');
-
-    event.stopPropagation();
-  }
-};
-
-/**
- * End of dragging selected items
- * @param {Event} event
- * @private
- */
-ItemSet.prototype._onDragEnd = function (event) {
-  if (this.touchParams.itemProps) {
-    // prepare a change set for the changed items
-    var changes = [],
-        me = this,
-        dataset = this._myDataSet();
-
-    this.touchParams.itemProps.forEach(function (props) {
-      var id = props.item.id,
-          itemData = me.itemsData.get(id, me.itemOptions);
-
-      var changed = false;
-      if ('start' in props.item.data) {
-        changed = (props.start != props.item.data.start.valueOf());
-        itemData.start = util.convert(props.item.data.start,
-                dataset._options.type && dataset._options.type.start || 'Date');
-      }
-      if ('end' in props.item.data) {
-        changed = changed  || (props.end != props.item.data.end.valueOf());
-        itemData.end = util.convert(props.item.data.end,
-                dataset._options.type && dataset._options.type.end || 'Date');
-      }
-      if ('group' in props.item.data) {
-        changed = changed  || (props.group != props.item.data.group);
-        itemData.group = props.item.data.group;
-      }
-
-      // only apply changes when start or end is actually changed
-      if (changed) {
-        me.options.onMove(itemData, function (itemData) {
-          if (itemData) {
-            // apply changes
-            itemData[dataset._fieldId] = id; // ensure the item contains its id (can be undefined)
-            changes.push(itemData);
-          }
-          else {
-            // restore original values
-            if ('start' in props) props.item.data.start = props.start;
-            if ('end' in props)   props.item.data.end   = props.end;
-
-            me.stackDirty = true; // force re-stacking of all items next redraw
-            me.body.emitter.emit('change');
-          }
-        });
-      }
-    });
-    this.touchParams.itemProps = null;
-
-    // apply the changes to the data (if there are changes)
-    if (changes.length) {
-      dataset.update(changes);
-    }
-
-    event.stopPropagation();
-  }
-};
-
-/**
- * Handle selecting/deselecting an item when tapping it
- * @param {Event} event
- * @private
- */
-ItemSet.prototype._onSelectItem = function (event) {
-  if (!this.options.selectable) return;
-
-  var ctrlKey  = event.gesture.srcEvent && event.gesture.srcEvent.ctrlKey;
-  var shiftKey = event.gesture.srcEvent && event.gesture.srcEvent.shiftKey;
-  if (ctrlKey || shiftKey) {
-    this._onMultiSelectItem(event);
-    return;
-  }
-
-  var oldSelection = this.getSelection();
-
-  var item = ItemSet.itemFromTarget(event);
-  var selection = item ? [item.id] : [];
-  this.setSelection(selection);
-
-  var newSelection = this.getSelection();
-
-  // emit a select event,
-  // except when old selection is empty and new selection is still empty
-  if (newSelection.length > 0 || oldSelection.length > 0) {
-    this.body.emitter.emit('select', {
-      items: this.getSelection()
-    });
-  }
-
-  event.stopPropagation();
-};
-
-/**
- * Handle creation and updates of an item on double tap
- * @param event
- * @private
- */
-ItemSet.prototype._onAddItem = function (event) {
-  if (!this.options.selectable) return;
-  if (!this.options.editable.add) return;
-
-  var me = this,
-      snap = this.body.util.snap || null,
-      item = ItemSet.itemFromTarget(event);
-
-  if (item) {
-    // update item
-
-    // execute async handler to update the item (or cancel it)
-    var itemData = me.itemsData.get(item.id); // get a clone of the data from the dataset
-    this.options.onUpdate(itemData, function (itemData) {
-      if (itemData) {
-        me.itemsData.update(itemData);
-      }
-    });
-  }
-  else {
-    // add item
-    var xAbs = vis.util.getAbsoluteLeft(this.dom.frame);
-    var x = event.gesture.center.pageX - xAbs;
-    var start = this.body.util.toTime(x);
-    var newItem = {
-      start: snap ? snap(start) : start,
-      content: 'new item'
-    };
-
-    // when default type is a range, add a default end date to the new item
-    if (this.options.type === 'range' || this.options.type == 'rangeoverflow') {
-      var end = this.body.util.toTime(x + this.props.width / 5);
-      newItem.end = snap ? snap(end) : end;
-    }
-
-    newItem[this.itemsData.fieldId] = util.randomUUID();
-
-    var group = ItemSet.groupFromTarget(event);
-    if (group) {
-      newItem.group = group.groupId;
-    }
-
-    // execute async handler to customize (or cancel) adding an item
-    this.options.onAdd(newItem, function (item) {
-      if (item) {
-        me.itemsData.add(newItem);
-        // TODO: need to trigger a redraw?
-      }
-    });
-  }
-};
-
-/**
- * Handle selecting/deselecting multiple items when holding an item
- * @param {Event} event
- * @private
- */
-ItemSet.prototype._onMultiSelectItem = function (event) {
-  if (!this.options.selectable) return;
-
-  var selection,
-      item = ItemSet.itemFromTarget(event);
-
-  if (item) {
-    // multi select items
-    selection = this.getSelection(); // current selection
-    var index = selection.indexOf(item.id);
-    if (index == -1) {
-      // item is not yet selected -> select it
-      selection.push(item.id);
-    }
-    else {
-      // item is already selected -> deselect it
-      selection.splice(index, 1);
-    }
-    this.setSelection(selection);
-
-    this.body.emitter.emit('select', {
-      items: this.getSelection()
-    });
-
-    event.stopPropagation();
-  }
-};
-
-/**
- * Find an item from an event target:
- * searches for the attribute 'timeline-item' in the event target's element tree
- * @param {Event} event
- * @return {Item | null} item
- */
-ItemSet.itemFromTarget = function(event) {
-  var target = event.target;
-  while (target) {
-    if (target.hasOwnProperty('timeline-item')) {
-      return target['timeline-item'];
-    }
-    target = target.parentNode;
-  }
-
-  return null;
-};
-
-/**
- * Find the Group from an event target:
- * searches for the attribute 'timeline-group' in the event target's element tree
- * @param {Event} event
- * @return {Group | null} group
- */
-ItemSet.groupFromTarget = function(event) {
-  var target = event.target;
-  while (target) {
-    if (target.hasOwnProperty('timeline-group')) {
-      return target['timeline-group'];
-    }
-    target = target.parentNode;
-  }
-
-  return null;
-};
-
-/**
- * Find the ItemSet from an event target:
- * searches for the attribute 'timeline-itemset' in the event target's element tree
- * @param {Event} event
- * @return {ItemSet | null} item
- */
-ItemSet.itemSetFromTarget = function(event) {
-  var target = event.target;
-  while (target) {
-    if (target.hasOwnProperty('timeline-itemset')) {
-      return target['timeline-itemset'];
-    }
-    target = target.parentNode;
-  }
-
-  return null;
-};
-
-/**
- * Find the DataSet to which this ItemSet is connected
- * @returns {null | DataSet} dataset
- * @private
- */
-ItemSet.prototype._myDataSet = function() {
-  // find the root DataSet
-  var dataset = this.itemsData;
-  while (dataset instanceof DataView) {
-    dataset = dataset.data;
-  }
-  return dataset;
-};