Implemented redraw throttling for Timeline

dist/vis.css

@@ -115,6 +115,10 @@
   border-bottom: 1px solid #bfbfbf;
 }
 
+.vis-labelset .vis-label.draggable {
+  cursor: pointer;
+}
+
 .vis-labelset .vis-label:last-child {
   border-bottom: none;
 }

docs/timeline/index.html

@@ -954,6 +954,14 @@ function (option, path) {
 }</pre>
       </td>
     </tr>
+
+    <tr parent="timeAxis" class="hidden">
+      <td class="indent">throttleRedraw</td>
+      <td>number</td>
+      <td><code>0</code></td>
+      <td>Limit the maximum number of redraws to once every x milliseconds. For example setting throttleRedraw to `100` milliseconds will limit the number of redraws to 10 times per second.</td>
+    </tr>
+
     <tr parent="timeAxis" class="hidden">
       <td class="indent">timeAxis.step</td>
       <td>number</td>

lib/timeline/Core.js

@@ -90,7 +90,9 @@ Core.prototype._create = function (container) {
   this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
   this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
-  this.on('rangechange', this.redraw.bind(this));
+  this.on('rangechange', function () {
+    this.redraw(); // this allows overriding the redraw method
+  }.bind(this));
   this.on('touch',       this._onTouch.bind(this));
   this.on('pan',         this._onDrag.bind(this));
 
@@ -216,7 +218,8 @@ Core.prototype.setOptions = function (options) {
     var fields = [
       'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
       'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
-      'locale', 'locales', 'moment'
+      'locale', 'locales', 'moment',
+      'throttleRedraw'
     ];
     util.selectiveExtend(fields, this.options, options);
 
@@ -311,6 +314,12 @@ Core.prototype.setOptions = function (options) {
     this.configurator.setModuleOptions({global: appliedOptions});
   }
 
+  // override redraw with a throttled version
+  if (!this._origRedraw) {
+    this._origRedraw = this.redraw.bind(this);
+  }
+  this.redraw = util.throttle(this._origRedraw, this.options.throttleRedraw);
+
   // redraw everything
   this._redraw();
 };
@@ -581,6 +590,8 @@ Core.prototype.getWindow = function() {
 
 /**
  * Force a redraw. Can be overridden by implementations of Core
+ *
+ * Note: this function will be overridden on construction with a trottled version
  */
 Core.prototype.redraw = function() {
   this._redraw();

lib/timeline/Timeline.js

@@ -44,6 +44,7 @@ function Timeline (container, items, groups, options) {
     end:   null,
 
     autoResize: true,
+    throttleRedraw: 0, // ms
 
     orientation: {
       axis: 'bottom',   // axis orientation: 'bottom', 'top', or 'both'
@@ -155,6 +156,8 @@ Timeline.prototype._createConfigurator = function () {
  * Force a redraw. The size of all items will be recalculated.
  * Can be useful to manually redraw when option autoResize=false and the window
  * has been resized, or when the items CSS has been changed.
+ *
+ * Note: this function will be overridden on construction with a trottled version
  */
 Timeline.prototype.redraw = function() {
   this.itemSet && this.itemSet.markDirty({refreshItems: true});

lib/timeline/optionsGraph2d.js

@@ -98,6 +98,7 @@ let allOptions = {
   },
 
   autoResize: {boolean},
+  throttleRedraw: {number},
   clickToUse: {boolean},
   end: {number, date, string, moment},
   format: {
@@ -214,6 +215,7 @@ let configureOptions = {
     },
 
     autoResize: true,
+    throttleRedraw: 0,
     clickToUse: false,
     end: '',
     format: {

lib/timeline/optionsTimeline.js

@@ -27,6 +27,7 @@ let allOptions = {
   //globals :
   align: {string},
   autoResize: {boolean},
+  throttleRedraw: {number},
   clickToUse: {boolean},
   dataAttributes: {string, array},
   editable: {
@@ -135,6 +136,7 @@ let configureOptions = {
   global: {
     align:  ['center', 'left', 'right'],
     autoResize: true,
+    throttleRedraw: 0,
     clickToUse: false,
     // dataAttributes: ['all'], // FIXME: can be 'all' or string[]
     editable: {

lib/util.js

@@ -663,7 +663,7 @@ exports.toArray = function (object) {
   }
 
   return array;
-}
+};
 
 /**
  * Update a property in an object
@@ -682,6 +682,34 @@ exports.updateProperty = function (object, key, value) {
   }
 };
 
+/**
+ * Throttle the given function to be only executed once every `wait` milliseconds
+ * @param {function} fn
+ * @param {number} wait    Time in milliseconds
+ * @returns {function} Returns the throttled function
+ */
+exports.throttle = function (fn, wait) {
+  var timeout = null;
+  var needExecution = false;
+
+  return function throttled () {
+    if (!timeout) {
+      needExecution = false;
+      fn();
+
+      timeout = setTimeout(function() {
+        timeout = null;
+        if (needExecution) {
+          throttled();
+        }
+      }, wait)
+    }
+    else {
+      needExecution = true;
+    }
+  }
+};
+
 /**
  * Add and event listener. Works for all browsers
  * @param {Element}     element    An html element

package.json

@@ -32,9 +32,9 @@
     "emitter-component": "^1.1.1",
     "hammerjs": "^2.0.4",
     "keycharm": "^0.2.0",
-    "uuid": "^2.0.1",
     "moment": "^2.10.2",
-    "propagating-hammerjs": "^1.4.3"
+    "propagating-hammerjs": "^1.4.3",
+    "uuid": "^2.0.1"
   },
   "devDependencies": {
     "babel": "^5.1.11",
@@ -54,6 +54,8 @@
     "yargs": "^3.7.2"
   },
   "browserify": {
-    "transform": ["babelify"]
+    "transform": [
+      "babelify"
+    ]
   }
 }