Timeline.js in vis-rails-1.0.2

- old
+ new

@@ -9,11 +9,11 @@
   // validate arguments
   if (!container) throw new Error('No container element provided');
 
   var me = this;
   var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
-  this.options = {
+  this.defaultOptions = {
     orientation: 'bottom',
     direction: 'horizontal', // 'horizontal' or 'vertical'
     autoResize: true,
     stack: true,
 
@@ -23,11 +23,10 @@
       add: false,
       remove: false
     },
 
     selectable: true,
-    snap: null, // will be specified after timeaxis is created
 
     min: null,
     max: null,
     zoomMin: 10,                                // milliseconds
     zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
@@ -37,10 +36,17 @@
     showMinorLabels: true,
     showMajorLabels: true,
     showCurrentTime: false,
     showCustomTime: false,
 
+    groupOrder: null,
+
+    width: null,
+    height: null,
+    maxHeight: null,
+    minHeight: null,
+
     type: 'box',
     align: 'center',
     margin: {
       axis: 20,
       item: 10
@@ -56,15 +62,21 @@
     onMove: function (item, callback) {
       callback(item);
     },
     onRemove: function (item, callback) {
       callback(item);
-    },
+    }
+  };
 
+  this.options = {};
+  util.deepExtend(this.options, this.defaultOptions);
+  util.deepExtend(this.options, {
+    snap: null, // will be specified after timeaxis is created
+
     toScreen: me._toScreen.bind(me),
     toTime: me._toTime.bind(me)
-  };
+  });
 
   // root panel
   var rootOptions = util.extend(Object.create(this.options), {
     height: function () {
       if (me.options.height) {
@@ -278,11 +290,11 @@
 /**
  * Set options
  * @param {Object} options  TODO: describe the available options
  */
 Timeline.prototype.setOptions = function (options) {
-  util.extend(this.options, options);
+  util.deepExtend(this.options, options);
 
   if ('editable' in options) {
     var isBoolean = typeof options.editable === 'boolean';
 
     this.options.editable = {
@@ -438,10 +450,37 @@
   this.groupsData = newDataSet;
   this.itemSet.setGroups(newDataSet);
 };
 
 /**
+ * Clear the Timeline. By Default, items, groups and options are cleared.
+ * Example usage:
+ *
+ *     timeline.clear();                // clear items, groups, and options
+ *     timeline.clear({options: true}); // clear options only
+ *
+ * @param {Object} [what]      Optionally specify what to clear. By default:
+ *                             {items: true, groups: true, options: true}
+ */
+Timeline.prototype.clear = function clear(what) {
+  // clear items
+  if (!what || what.items) {
+    this.setItems(null);
+  }
+
+  // clear groups
+  if (!what || what.groups) {
+    this.setGroups(null);
+  }
+
+  // clear options
+  if (!what || what.options) {
+    this.setOptions(this.defaultOptions);
+  }
+};
+
+/**
  * Set Timeline window such that it fits all items
  */
 Timeline.prototype.fit = function fit() {
   // apply the data range as range
   var dataRange = this.getItemRange();
@@ -533,11 +572,11 @@
  *     TimeLine.setWindow(range)
  *
  * Where start and end can be a Date, number, or string, and range is an
  * object with properties start and end.
  *
- * @param {Date | Number | String} [start] Start date of visible window
+ * @param {Date | Number | String | Object} [start] Start date of visible window
  * @param {Date | Number | String} [end]   End date of visible window
  */
 Timeline.prototype.setWindow = function setWindow(start, end) {
   if (arguments.length == 1) {
     var range = arguments[0];
@@ -559,10 +598,18 @@
     end: new Date(range.end)
   };
 };
 
 /**
+ * Force a repaint of the Timeline. Can be useful to manually repaint when
+ * option autoResize=false
+ */
+Timeline.prototype.repaint = function repaint() {
+    this.rootPanel.repaint();
+};
+
+/**
  * Handle selecting/deselecting an item when tapping it
  * @param {Event} event
  * @private
  */
 // TODO: move this function to ItemSet
@@ -623,9 +670,14 @@
     var x = event.gesture.center.pageX - xAbs;
     var newItem = {
       start: this.timeAxis.snap(this._toTime(x)),
       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') {
+      newItem.end = this.timeAxis.snap(this._toTime(x + this.rootPanel.width / 5));
+    }
 
     var id = util.randomUUID();
     newItem[this.itemsData.fieldId] = id;
 
     var group = ItemSet.groupFromTarget(event);