Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Commit

Permalink
Merge pull request #2091 from Teamwork/requestAnimationFrame-for-redraws
Browse files Browse the repository at this point in the history
Use requestAnimationFrame to throttle redraws
  • Loading branch information
yotamberk authored Oct 15, 2016
2 parents 48b492d + ff3948f commit c130f0b
Show file tree
Hide file tree
Showing 7 changed files with 25 additions and 47 deletions.
25 changes: 9 additions & 16 deletions docs/timeline/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@
<script language="JavaScript">
smoothScroll.init();
</script>

<!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet">

<!-- Tipue vendor css -->
<link href="../css/tipuesearch.css" rel="stylesheet">

<script type="text/javascript" src="../js/toggleTable.js"></script>
</head>
<body onload="prettyPrint();">
Expand Down Expand Up @@ -213,7 +213,7 @@ <h3 id="items">Items</h3>
or a DataView (offering 1 way data binding).
Items are regular objects and can contain the properties <code>start</code>,
<code>end</code> (optional), <code>content</code>,
<code>group</code> (optional), <code>className</code> (optional),
<code>group</code> (optional), <code>className</code> (optional),
<code>editable</code> (optional), and <code>style</code> (optional).
</p>

Expand Down Expand Up @@ -624,7 +624,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
If no <code>order</code> properties are provided, the order will be undetermined.
</td>
</tr>

<tr>
<td>groupOrderSwap</td>
<td>Function</td>
Expand Down Expand Up @@ -787,7 +787,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
Only applicable when option <code>selectable</code> is <code>true</code>.
</td>
</tr>

<tr>
<td style="font-size: 0.9em">multiselectPerGroup</td>
<td>boolean</td>
Expand All @@ -805,7 +805,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>
</tr>

<tr>
<td>onAddGroup</td>
<td>function</td>
Expand All @@ -829,7 +829,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>
</tr>

<tr>
<td>onMoveGroup</td>
<td>function</td>
Expand All @@ -853,7 +853,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<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>
</tr>

<tr>
<td>onRemoveGroup</td>
<td>function</td>
Expand Down Expand Up @@ -973,13 +973,6 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
</tr>

<tr>
<td>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 class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
<td><span parent="timeAxis" class="right-caret"></span> timeAxis</td>
<td>Object</td>
Expand Down
2 changes: 1 addition & 1 deletion index-timeline-graph2d.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,4 @@ exports.timeline = {
// bundled external libraries
exports.moment = require('./lib/module/moment');
exports.Hammer = require('./lib/module/hammer');
exports.keycharm = require('keycharm');
exports.keycharm = require('keycharm');
7 changes: 3 additions & 4 deletions lib/timeline/Core.js
Original file line number Diff line number Diff line change
Expand Up @@ -222,8 +222,7 @@ Core.prototype.setOptions = function (options) {
var fields = [
'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
'locale', 'locales', 'moment', 'rtl',
'throttleRedraw'
'locale', 'locales', 'moment', 'rtl'
];
util.selectiveExtend(fields, this.options, options);

Expand All @@ -233,7 +232,7 @@ Core.prototype.setOptions = function (options) {
this.dom.leftContainer = this.dom.rightContainer;
this.dom.rightContainer = contentContainer;
this.dom.container.style.direction = "rtl";
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl'; }
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical-rtl'; }

this.options.orientation = {item:undefined,axis:undefined};
if ('orientation' in options) {
Expand Down Expand Up @@ -330,7 +329,7 @@ Core.prototype.setOptions = function (options) {
// override redraw with a throttled version
if (!this._origRedraw) {
this._origRedraw = this._redraw.bind(this);
this._redraw = util.throttle(this._origRedraw, this.options.throttleRedraw);
this._redraw = util.throttle(this._origRedraw);
} else {
// Not the initial run: redraw everything
this._redraw();
Expand Down
5 changes: 2 additions & 3 deletions lib/timeline/Timeline.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ function Timeline (container, items, groups, options) {
end: null,

autoResize: true,
throttleRedraw: 0, // ms

orientation: {
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
Expand Down Expand Up @@ -426,15 +425,15 @@ Timeline.prototype.getItemRange = function () {

var start = getStart(item);
var end = getEnd(item);

if (this.options.rtl) {
var startSide = start - (item.getWidthRight() + 10) * factor;
var endSide = end + (item.getWidthLeft() + 10) * factor;
} else {
var startSide = start - (item.getWidthLeft() + 10) * factor;
var endSide = end + (item.getWidthRight() + 10) * factor;
}


if (startSide < min) {
min = startSide;
Expand Down
2 changes: 0 additions & 2 deletions lib/timeline/optionsGraph2d.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ let allOptions = {
},

autoResize: {boolean},
throttleRedraw: {number},
clickToUse: {boolean},
end: {number, date, string, moment},
format: {
Expand Down Expand Up @@ -225,7 +224,6 @@ let configureOptions = {
},

autoResize: true,
throttleRedraw: [10, 0, 1000, 10],
clickToUse: false,
end: '',
format: {
Expand Down
4 changes: 1 addition & 3 deletions lib/timeline/optionsTimeline.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ let allOptions = {
align: {string},
rtl: {boolean, 'undefined': 'undefined'},
autoResize: {boolean},
throttleRedraw: {number},
clickToUse: {boolean},
dataAttributes: {string, array},
editable: {
Expand Down Expand Up @@ -145,7 +144,6 @@ let configureOptions = {
align: ['center', 'left', 'right'],
direction: false,
autoResize: true,
throttleRedraw: [10, 0, 1000, 10],
clickToUse: false,
// dataAttributes: ['all'], // FIXME: can be 'all' or string[]
editable: {
Expand Down Expand Up @@ -229,4 +227,4 @@ let configureOptions = {
}
};

export {allOptions, configureOptions};
export {allOptions, configureOptions};
27 changes: 9 additions & 18 deletions lib/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -702,29 +702,20 @@ exports.updateProperty = function (object, key, value) {
};

/**
* Throttle the given function to be only executed once every `wait` milliseconds
* Throttle the given function to be only executed once per animation frame
* @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;
exports.throttle = function (fn) {
var scheduled = false;

return function throttled () {
if (!timeout) {
needExecution = false;
fn();

timeout = setTimeout(function() {
timeout = null;
if (needExecution) {
throttled();
}
}, wait)
}
else {
needExecution = true;
if (!scheduled) {
scheduled = true;
requestAnimationFrame(function () {
scheduled = false;
fn();
});
}
}
};
Expand Down

0 comments on commit c130f0b

Please sign in to comment.