Use requestAnimationFrame to throttle redraws

8 years ago · ff3948f85c
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@ -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();">
@ -213,7 +213,7 @@
    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>

@ -624,7 +624,7 @@ function (option, path) {
        If no <code>order</code> properties are provided, the order will be undetermined.
      </td>
    </tr>
    

    <tr>
      <td>groupOrderSwap</td>
      <td>Function</td>
@ -787,7 +787,7 @@ function (option, path) {
        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>
@ -805,7 +805,7 @@ function (option, path) {
      <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>
@ -829,7 +829,7 @@ function (option, path) {
      <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>
@ -853,7 +853,7 @@ function (option, path) {
      <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>
@ -967,13 +967,6 @@ function (option, path) {
      <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>
--- a/index-timeline-graph2d.js
+++ b/index-timeline-graph2d.js
@ -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');
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@ -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);

@ -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) {
@ -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();
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@ -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'
@ -426,7 +425,7 @@ 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;
@ -434,7 +433,7 @@ Timeline.prototype.getItemRange = function () {
        var startSide  = start - (item.getWidthLeft()  + 10) * factor;
        var endSide = end   + (item.getWidthRight() + 10) * factor;
      }
        


      if (startSide < min) {
        min = startSide;
--- a/lib/timeline/optionsGraph2d.js
+++ b/lib/timeline/optionsGraph2d.js
@ -100,7 +100,6 @@ let allOptions = {
  },

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

    autoResize: true,
    throttleRedraw: [10, 0, 1000, 10],
    clickToUse: false,
    end: '',
    format: {
--- a/lib/timeline/optionsTimeline.js
+++ b/lib/timeline/optionsTimeline.js
@ -27,7 +27,6 @@ let allOptions = {
  align: {string},
  rtl: {boolean, 'undefined': 'undefined'},
  autoResize: {boolean},
  throttleRedraw: {number},
  clickToUse: {boolean},
  dataAttributes: {string, array},
  editable: {
@ -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: {
@ -229,4 +227,4 @@ let configureOptions = {
  }
 };

 export {allOptions, configureOptions};
 export {allOptions, configureOptions};
--- a/lib/util.js
+++ b/lib/util.js
@ -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();
      });
    }
  }
 };