From ba6e05486ed6c306492c99d22cc16e638c1523e5 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Tue, 28 Oct 2014 11:16:07 +0100
Subject: [PATCH] redraw on data change is now done on next tick, so you have
 only one redraw for multiple (synchronous) changes

---
 lib/timeline/Core.js              | 19 +++++++++++++++++--
 lib/timeline/component/ItemSet.js | 12 ++++++------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 598b7ba7..ea02fd6a 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -92,12 +92,28 @@ Core.prototype._create = function (container) {
   this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
 
   this.on('rangechange', this.redraw.bind(this));
-  this.on('change', this.redraw.bind(this));
   this.on('touch', this._onTouch.bind(this));
   this.on('pinch', this._onPinch.bind(this));
   this.on('dragstart', this._onDragStart.bind(this));
   this.on('drag', this._onDrag.bind(this));
 
+  var me = this;
+  this.on('change', function (properties) {
+    if (properties && properties.queue == true) {
+      // redraw once on next tick
+      if (!me._redrawTimer) {
+        me._redrawTimer = setTimeout(function () {
+          me._redrawTimer = null;
+          me.redraw();
+        }, 0)
+      }
+    }
+    else {
+      // redraw immediately
+      me.redraw();
+    }
+  });
+
   // create event listeners for all interesting events, these events will be
   // emitted via emitter
   this.hammer = Hammer(this.dom.root, {
@@ -105,7 +121,6 @@ Core.prototype._create = function (container) {
   });
   this.listeners = {};
 
-  var me = this;
   var events = [
     'touch', 'pinch',
     'tap', 'doubletap', 'hold',
diff --git a/lib/timeline/component/ItemSet.js b/lib/timeline/component/ItemSet.js
index f9d32abd..15baf602 100644
--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@@ -720,7 +720,7 @@ ItemSet.prototype.setGroups = function(groups) {
   // update the order of all items in each group
   this._order();
 
-  this.body.emitter.emit('change');
+  this.body.emitter.emit('change', {queue: true});
 };
 
 /**
@@ -825,7 +825,7 @@ ItemSet.prototype._onUpdate = function(ids) {
 
   this._order();
   this.stackDirty = true; // force re-stacking of all items next redraw
-  this.body.emitter.emit('change');
+  this.body.emitter.emit('change', {queue: true});
 };
 
 /**
@@ -855,7 +855,7 @@ ItemSet.prototype._onRemove = function(ids) {
     // update order
     this._order();
     this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change');
+    this.body.emitter.emit('change', {queue: true});
   }
 };
 
@@ -881,7 +881,7 @@ ItemSet.prototype._onUpdateGroups = function(ids) {
 };
 
 /**
- * Handle changed groups
+ * Handle changed groups (added or updated)
  * @param {Number[]} ids
  * @private
  */
@@ -925,7 +925,7 @@ ItemSet.prototype._onAddGroups = function(ids) {
     }
   });
 
-  this.body.emitter.emit('change');
+  this.body.emitter.emit('change', {queue: true});
 };
 
 /**
@@ -946,7 +946,7 @@ ItemSet.prototype._onRemoveGroups = function(ids) {
 
   this.markDirty();
 
-  this.body.emitter.emit('change');
+  this.body.emitter.emit('change', {queue: true});
 };
 
 /**