Fixed #1592: Emit a "changed" event after each redraw. Made "change" event private (by prefixing _).

HISTORY.md

@@ -15,11 +15,16 @@ http://visjs.org
 - Fixed #1588: destroy now unsubscribed from the dataset.
 - Fixed #1584: Navigation buttons broken.
 
+### Timeline
+
+- Fixed #1592: Emit a "changed" event after each redraw.
+
 ### Graph2d
 
-- Fixes #1557: Fix default axis formatting function.
+- Fixed #1592: Emit a "changed" event after each redraw.
 - Cleanup of linegraph's event handling.
 - Fixed #1017: Fixed minWidth behavior for bars.
+- Fixes #1557: Fix default axis formatting function.
 
 ## 2016-01-08, version 4.12.0
 

docs/graph2d/index.html

@@ -1335,7 +1335,14 @@ Graph2d.off('rangechanged', onChange);
             <td>Fired when double clicked inside the Graph2d.
             </td>
         </tr>
-
+        <tr>
+            <td>changed</td>
+            <td>
+                Has no properties.
+            </td>
+            <td>Fired once after each graph redraw.
+            </td>
+        </tr>
         <tr>
             <td>rangechange</td>
             <td>
@@ -1359,6 +1366,7 @@ Graph2d.off('rangechanged', onChange);
             <td>Fired once after the user has dragged the Graph2d window.
             </td>
         </tr>
+
         <tr>
             <td>timechange</td>
             <td>

docs/timeline/index.html

@@ -1381,8 +1381,16 @@ timeline.off('select', onSelect);
       </td>
       <td>Fired after the dragging of a group is finished.
       </td>
-    </tr>    
+    </tr>
 
+    <tr>
+      <td>changed</td>
+      <td>
+        Has no properties.
+      </td>
+      <td>Fired once after each graph redraw.
+      </td>
+    </tr>
     <tr>
       <td>rangechange</td>
       <td>

lib/timeline/Core.js

@@ -99,7 +99,7 @@ Core.prototype._create = function (container) {
   this.on('pan',         this._onDrag.bind(this));
 
   var me = this;
-  this.on('change', function (properties) {
+  this.on('_change', function (properties) {
     if (properties && properties.queue == true) {
       // redraw once on next tick
       if (!me._redrawTimer) {
@@ -774,7 +774,7 @@ Core.prototype._redraw = function() {
   var MAX_REDRAW = 5;
   if (resized) {
     if (this.redrawCount < MAX_REDRAW) {
-      this.body.emitter.emit('change');
+      this.body.emitter.emit('_change');
       return;
     }
     else {
@@ -784,6 +784,9 @@ Core.prototype._redraw = function() {
     this.redrawCount = 0;
   }
   this.initialDrawDone = true;
+
+  //Emit public 'changed' event for UI updates, see issue #1592
+  this.body.emitter.emit("changed");
 };
 
 // TODO: deprecated since version 1.1.0, remove some day
@@ -913,7 +916,7 @@ Core.prototype._startAutoResize = function () {
         me.props.lastWidth = me.dom.root.offsetWidth;
         me.props.lastHeight = me.dom.root.offsetHeight;
 
-        me.emit('change');
+        me.body.emitter.emit('_change');
       }
     }
   };

lib/timeline/component/ItemSet.js

@@ -785,7 +785,7 @@ ItemSet.prototype.setGroups = function(groups) {
   // update the order of all items in each group
   this._order();
 
-  this.body.emitter.emit('change', {queue: true});
+  this.body.emitter.emit('_change', {queue: true});
 };
 
 /**
@@ -896,7 +896,7 @@ ItemSet.prototype._onUpdate = function(ids) {
 
   this._order();
   this.stackDirty = true; // force re-stacking of all items next redraw
-  this.body.emitter.emit('change', {queue: true});
+  this.body.emitter.emit('_change', {queue: true});
 };
 
 /**
@@ -926,7 +926,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', {queue: true});
+    this.body.emitter.emit('_change', {queue: true});
   }
 };
 
@@ -996,7 +996,7 @@ ItemSet.prototype._onAddGroups = function(ids) {
     }
   });
 
-  this.body.emitter.emit('change', {queue: true});
+  this.body.emitter.emit('_change', {queue: true});
 };
 
 /**
@@ -1017,7 +1017,7 @@ ItemSet.prototype._onRemoveGroups = function(ids) {
 
   this.markDirty();
 
-  this.body.emitter.emit('change', {queue: true});
+  this.body.emitter.emit('_change', {queue: true});
 };
 
 /**
@@ -1393,7 +1393,7 @@ ItemSet.prototype._onDrag = function (event) {
     }.bind(this));
 
     this.stackDirty = true; // force re-stacking of all items next redraw
-    this.body.emitter.emit('change');
+    this.body.emitter.emit('_change');
   }
 };
 
@@ -1444,7 +1444,7 @@ ItemSet.prototype._onDragEnd = function (event) {
 
           // force re-stacking of all items next redraw
           me.stackDirty = true;
-          me.body.emitter.emit('change');
+          me.body.emitter.emit('_change');
         });
       }
       else {
@@ -1461,7 +1461,7 @@ ItemSet.prototype._onDragEnd = function (event) {
             props.item.setData(props.data);
 
             me.stackDirty = true; // force re-stacking of all items next redraw
-            me.body.emitter.emit('change');
+            me.body.emitter.emit('_change');
           }
         });
       }

lib/timeline/component/LineGraph.js

@@ -213,7 +213,7 @@ LineGraph.prototype.setOptions = function (options) {
   // this is used to redraw the graph if the visibility of the groups is changed.
   if (this.dom.frame) { //not on initial run?
     this.forceGraphUpdate=true;
-    this.body.emitter.emit("change");
+    this.body.emitter.emit("_change",{queue: true});
   }
 };
 
@@ -357,7 +357,7 @@ LineGraph.prototype._onRemoveGroups = function (groupIds) {
     this._removeGroup(groupIds[i]);
   }
   this.forceGraphUpdate = true;
-  this.body.emitter.emit("change");
+  this.body.emitter.emit("_change",{queue: true});
 };
 
 /**
@@ -492,7 +492,7 @@ LineGraph.prototype._updateAllGroupData = function () {
       }
     }
     this.forceGraphUpdate = true;
-    this.body.emitter.emit("change");
+    this.body.emitter.emit("_change",{queue: true});
   }
 };