Browse Source

Implemented redraw throttling for Timeline

kamadaKawai
jos 9 years ago
parent
commit
d9223685e2
12 changed files with 1752 additions and 1342 deletions
  1. +4
    -0
      dist/vis.css
  2. +1666
    -1316
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +1
    -1
      dist/vis.min.css
  5. +18
    -18
      dist/vis.min.js
  6. +8
    -0
      docs/timeline/index.html
  7. +13
    -2
      lib/timeline/Core.js
  8. +3
    -0
      lib/timeline/Timeline.js
  9. +2
    -0
      lib/timeline/optionsGraph2d.js
  10. +2
    -0
      lib/timeline/optionsTimeline.js
  11. +29
    -1
      lib/util.js
  12. +5
    -3
      package.json

+ 4
- 0
dist/vis.css View File

@ -115,6 +115,10 @@
border-bottom: 1px solid #bfbfbf;
}
.vis-labelset .vis-label.draggable {
cursor: pointer;
}
.vis-labelset .vis-label:last-child {
border-bottom: none;
}

+ 1666
- 1316
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 18
- 18
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 8
- 0
docs/timeline/index.html View File

@ -954,6 +954,14 @@ function (option, path) {
}</pre>
</td>
</tr>
<tr parent="timeAxis" class="hidden">
<td class="indent">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 parent="timeAxis" class="hidden">
<td class="indent">timeAxis.step</td>
<td>number</td>

+ 13
- 2
lib/timeline/Core.js View File

@ -90,7 +90,9 @@ Core.prototype._create = function (container) {
this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
this.on('rangechange', this.redraw.bind(this));
this.on('rangechange', function () {
this.redraw(); // this allows overriding the redraw method
}.bind(this));
this.on('touch', this._onTouch.bind(this));
this.on('pan', this._onDrag.bind(this));
@ -216,7 +218,8 @@ Core.prototype.setOptions = function (options) {
var fields = [
'width', 'height', 'minHeight', 'maxHeight', 'autoResize',
'start', 'end', 'clickToUse', 'dataAttributes', 'hiddenDates',
'locale', 'locales', 'moment'
'locale', 'locales', 'moment',
'throttleRedraw'
];
util.selectiveExtend(fields, this.options, options);
@ -311,6 +314,12 @@ Core.prototype.setOptions = function (options) {
this.configurator.setModuleOptions({global: appliedOptions});
}
// override redraw with a throttled version
if (!this._origRedraw) {
this._origRedraw = this.redraw.bind(this);
}
this.redraw = util.throttle(this._origRedraw, this.options.throttleRedraw);
// redraw everything
this._redraw();
};
@ -581,6 +590,8 @@ Core.prototype.getWindow = function() {
/**
* Force a redraw. Can be overridden by implementations of Core
*
* Note: this function will be overridden on construction with a trottled version
*/
Core.prototype.redraw = function() {
this._redraw();

+ 3
- 0
lib/timeline/Timeline.js View File

@ -44,6 +44,7 @@ function Timeline (container, items, groups, options) {
end: null,
autoResize: true,
throttleRedraw: 0, // ms
orientation: {
axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
@ -155,6 +156,8 @@ Timeline.prototype._createConfigurator = function () {
* Force a redraw. The size of all items will be recalculated.
* Can be useful to manually redraw when option autoResize=false and the window
* has been resized, or when the items CSS has been changed.
*
* Note: this function will be overridden on construction with a trottled version
*/
Timeline.prototype.redraw = function() {
this.itemSet && this.itemSet.markDirty({refreshItems: true});

+ 2
- 0
lib/timeline/optionsGraph2d.js View File

@ -98,6 +98,7 @@ let allOptions = {
},
autoResize: {boolean},
throttleRedraw: {number},
clickToUse: {boolean},
end: {number, date, string, moment},
format: {
@ -214,6 +215,7 @@ let configureOptions = {
},
autoResize: true,
throttleRedraw: 0,
clickToUse: false,
end: '',
format: {

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

@ -27,6 +27,7 @@ let allOptions = {
//globals :
align: {string},
autoResize: {boolean},
throttleRedraw: {number},
clickToUse: {boolean},
dataAttributes: {string, array},
editable: {
@ -135,6 +136,7 @@ let configureOptions = {
global: {
align: ['center', 'left', 'right'],
autoResize: true,
throttleRedraw: 0,
clickToUse: false,
// dataAttributes: ['all'], // FIXME: can be 'all' or string[]
editable: {

+ 29
- 1
lib/util.js View File

@ -663,7 +663,7 @@ exports.toArray = function (object) {
}
return array;
}
};
/**
* Update a property in an object
@ -682,6 +682,34 @@ exports.updateProperty = function (object, key, value) {
}
};
/**
* Throttle the given function to be only executed once every `wait` milliseconds
* @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;
return function throttled () {
if (!timeout) {
needExecution = false;
fn();
timeout = setTimeout(function() {
timeout = null;
if (needExecution) {
throttled();
}
}, wait)
}
else {
needExecution = true;
}
}
};
/**
* Add and event listener. Works for all browsers
* @param {Element} element An html element

+ 5
- 3
package.json View File

@ -32,9 +32,9 @@
"emitter-component": "^1.1.1",
"hammerjs": "^2.0.4",
"keycharm": "^0.2.0",
"uuid": "^2.0.1",
"moment": "^2.10.2",
"propagating-hammerjs": "^1.4.3"
"propagating-hammerjs": "^1.4.3",
"uuid": "^2.0.1"
},
"devDependencies": {
"babel": "^5.1.11",
@ -54,6 +54,8 @@
"yargs": "^3.7.2"
},
"browserify": {
"transform": ["babelify"]
"transform": [
"babelify"
]
}
}

Loading…
Cancel
Save