Browse Source

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>
jittering-top
Yotam Berkowitz 7 years ago
committed by GitHub
parent
commit
6afc095d63
5 changed files with 59 additions and 32 deletions
  1. +29
    -21
      docs/timeline/index.html
  2. +2
    -1
      examples/timeline/interaction/eventListeners.html
  3. +6
    -1
      lib/timeline/Core.js
  4. +21
    -9
      lib/timeline/Timeline.js
  5. +1
    -0
      lib/timeline/optionsTimeline.js

+ 29
- 21
docs/timeline/index.html View File

@ -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>

+ 2
- 1
examples/timeline/interaction/eventListeners.html View File

@ -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);

+ 6
- 1
lib/timeline/Core.js View File

@ -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");

+ 21
- 9
lib/timeline/Timeline.js View File

@ -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);
}
};

+ 1
- 0
lib/timeline/optionsTimeline.js View File

@ -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'},

Loading…
Cancel
Save