On timeline loaded (#3530)

* initial trial

* Add onInitialDrawComplete

* Add docs

* Add to eventListeners examples

* Keeping things DRY

* Remove callback insertion

* Remove call

* Fix initial real first draw complete and fix comments from review

* remove all <code><code>

docs/timeline/index.html

@@ -579,7 +579,7 @@ function (option, path) {
       <td><span parent="editable" class="right-caret"></span> editable</td>
       <td>boolean or Object</td>
       <td><code>false</code></td>
-      <td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code><code>true</code></code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
+      <td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
         See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
       </td>
     </tr>
@@ -901,10 +901,10 @@ function (option, path) {
       <td>onAdd</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onAddGroup</td>
       <td>function</td>
@@ -912,31 +912,31 @@ function (option, path) {
       <td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>.
       </td>
     </tr>
-
+    
     <tr>
         <td>onDropObjectOnItem</td>
         <td>function</td>
         <td>none</td>
         <td>Callback function triggered when an object containing <code>target:'item'</code> in its drag data is dropped in to a timeline item.
         </td>
-      </tr>
+    </tr>
 
     <tr>
-      <td>onUpdate</td>
+      <td>onInitialDrawComplete</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMove</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMoveGroup</td>
       <td>function</td>
@@ -944,23 +944,23 @@ function (option, path) {
       <td>Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for <code>onMove</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onMoving</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onRemove</td>
       <td>function</td>
       <td>none</td>
-      <td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
+      <td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>.
       </td>
     </tr>
-
+    
     <tr>
       <td>onRemoveGroup</td>
       <td>function</td>
@@ -968,7 +968,15 @@ function (option, path) {
       <td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>.
       </td>
     </tr>
-
+    
+    <tr>
+      <td>onUpdate</td>
+      <td>function</td>
+      <td>none</td>
+      <td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
+      </td>
+    </tr>
+    
     <tr>
       <td>order</td>
       <td>function</td>
@@ -1054,7 +1062,7 @@ function (option, path) {
       <td>By default, the timeline shows both minor and major date labels on the
         time axis.
         For example the minor labels show minutes and the major labels show hours.
-        When <code>showMajorLabels</code> is <code><code>false</code></code>, no major labels
+        When <code>showMajorLabels</code> is <code>false</code>, no major labels
         are shown.</td>
     </tr>
 
@@ -1065,7 +1073,7 @@ function (option, path) {
       <td>By default, the timeline shows both minor and major date labels on the
         time axis.
         For example the minor labels show minutes and the major labels show hours.
-        When <code>showMinorLabels</code> is <code><code>false</code></code>, no minor labels
+        When <code>showMinorLabels</code> is <code>false</code>, no minor labels
         are shown. When both <code>showMajorLabels</code> and
         <code>showMinorLabels</code> are false, no horizontal axis will be
         visible.</td>
@@ -1225,7 +1233,7 @@ function (option, path) {
       <td><code>true</code></td>
       <td>
         Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
-        Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
+        Only applicable when option <code>moveable</code> is set <code>true</code>.
       </td>
     </tr>
 
@@ -1235,7 +1243,7 @@ function (option, path) {
       <td><code>''</code></td>
       <td>Specifies whether the Timeline is only zoomed when an additional key is down.
       	Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
-        Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
+        Only applicable when option <code>moveable</code> is set <code>true</code>.
       </td>
     </tr>
 
@@ -1776,7 +1784,7 @@ timeline.off('select', onSelect);
 
   <h2 id="Editing_Items">Editing Items</h2>
   <p>
-    When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code><code>true</code></code>), the user can:
+    When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can:
   </p>
   <ul>
     <li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>

examples/timeline/interaction/eventListeners.html

@@ -34,7 +34,8 @@
 
     var container = document.getElementById('visualization');
     var options = {
-      editable: true
+      editable: true,
+      onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
     };
     var timeline = new vis.Timeline(container, items, options);
 

lib/timeline/Core.js

@@ -111,6 +111,11 @@ Core.prototype._create = function (container) {
       this._redraw();
     }
   }.bind(this));
+  this.on('rangechanged', function () {
+    if (!this.initialRangeChangeDone) {
+      this.initialRangeChangeDone = true;
+    }
+  }.bind(this));
   this.on('touch',       this._onTouch.bind(this));
   this.on('panmove',         this._onDrag.bind(this));
 
@@ -324,6 +329,7 @@ Core.prototype._create = function (container) {
 
   this.redrawCount = 0;
   this.initialDrawDone = false;
+  this.initialRangeChangeDone = false;
 
   // attach the root panel to the provided container
   if (!container) throw new Error('No container provided');
@@ -1008,7 +1014,6 @@ Core.prototype._redraw = function() {
   } else {
     this.redrawCount = 0;
   }
-  this.initialDrawDone = true;
 
   //Emit public 'changed' event for UI updates, see issue #1592
   this.body.emitter.emit("changed");

lib/timeline/Timeline.js

@@ -58,13 +58,14 @@ function Timeline (container, items, groups, options) {
     width: null,
     height: null,
     maxHeight: null,
-    minHeight: null
+    minHeight: null,
   };
   this.options = util.deepExtend({}, this.defaultOptions);
 
   // Create the DOM, props, and emitter
   this._create(container);
   if (!options || (options && typeof options.rtl == "undefined")) {
+    this.dom.root.style.visibility = 'hidden';
     var directionFromDom, domNode = this.dom.root;
     while (!directionFromDom && domNode) {
       directionFromDom = window.getComputedStyle(domNode, null).direction;
@@ -76,6 +77,7 @@ function Timeline (container, items, groups, options) {
   }
 
   this.options.rollingMode = options && options.rollingMode;
+  this.options.onInitialDrawComplete = options && options.onInitialDrawComplete;
 
   // all components listed here will be repainted automatically
   this.components = [];
@@ -160,11 +162,11 @@ function Timeline (container, items, groups, options) {
   }
 
   //Single time autoscale/fit
-  this.fitDone = false;
+  this.initialFitDone = false;
   this.on('changed', function (){
     if (this.itemsData == null || this.options.rollingMode) return;
-    if (!me.fitDone) {
-      me.fitDone = true;
+    if (!me.initialFitDone) {
+      me.initialFitDone = true;
       if (me.options.start != undefined || me.options.end != undefined) {
         if (me.options.start == undefined || me.options.end == undefined) {
           var range = me.getItemRange();
@@ -173,11 +175,20 @@ function Timeline (container, items, groups, options) {
         var start = me.options.start != undefined ? me.options.start : range.min;
         var end   = me.options.end   != undefined ? me.options.end   : range.max;
         me.setWindow(start, end, {animation: false});
-      }
-      else {
+      } else {
         me.fit({animation: false});
       }
     }
+
+    if (!me.initialDrawDone && me.initialRangeChangeDone) {
+      me.initialDrawDone = true;
+      me.dom.root.style.visibility = 'visible';
+      if (me.options.onInitialDrawComplete) {
+        setTimeout(() => {
+          return me.options.onInitialDrawComplete();
+        }, 0)
+      }
+    }
   });
 
   // apply options
@@ -472,8 +483,9 @@ Timeline.prototype.focus = function(id, options) {
  *                                    provided to specify duration and easing function.
  *                                    Default duration is 500 ms, and default easing
  *                                    function is 'easeInOutQuad'.
+ * @param {function} [callback]
  */
-Timeline.prototype.fit = function (options) {
+Timeline.prototype.fit = function (options, callback) {
   var animation = (options && options.animation !== undefined) ? options.animation : true;
   var range;
 
@@ -481,12 +493,12 @@ Timeline.prototype.fit = function (options) {
   if (dataset.length === 1 && dataset.get()[0].end === undefined) {
     // a single item -> don't fit, just show a range around the item from -4 to +3 days
     range = this.getDataRange();
-    this.moveTo(range.min.valueOf(), {animation});
+    this.moveTo(range.min.valueOf(), {animation}, callback);
   }
   else {
     // exactly fit the items (plus a small margin)
     range = this.getItemRange();
-    this.range.setRange(range.min, range.max, { animation: animation });
+    this.range.setRange(range.min, range.max, { animation: animation }, callback);
   }
 };
 

lib/timeline/optionsTimeline.js

@@ -126,6 +126,7 @@ let allOptions = {
   onAddGroup: {'function': 'function'},
   onMoveGroup: {'function': 'function'},
   onRemoveGroup: {'function': 'function'},
+  onInitialDrawComplete: {'function': 'function'},
   order: {'function': 'function'},
   orientation: {
     axis: {string,'undefined': 'undefined'},