Browse Source

Minor cleanups in Timeline Range. (#2633)

Fixes default end, and reduces duplicated code. Adds tests.
runTests
Brad Hards 7 years ago
committed by yotamberk
parent
commit
6c22663b3d
5 changed files with 76 additions and 8 deletions
  1. +9
    -2
      lib/timeline/Range.js
  2. +2
    -3
      lib/timeline/component/item/BoxItem.js
  3. +2
    -3
      lib/timeline/component/item/PointItem.js
  4. +2
    -0
      package.json
  5. +61
    -0
      test/TimelineRange.test.js

+ 9
- 2
lib/timeline/Range.js View File

@ -15,7 +15,7 @@ var DateUtil = require('./DateUtil');
function Range(body, options) { function Range(body, options) {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0); var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
var start = now.clone().add(-3, 'days').valueOf(); var start = now.clone().add(-3, 'days').valueOf();
var end = now.clone().add(-3, 'days').valueOf();
var end = now.clone().add(3, 'days').valueOf();
if(options === undefined) { if(options === undefined) {
this.start = start; this.start = start;
@ -256,6 +256,13 @@ Range.prototype.setRange = function(start, end, animation, byUser, event) {
} }
}; };
/**
* Get the number of milliseconds per pixel.
*/
Range.prototype.getMillisecondsPerPixel = function() {
return (this.end - this.start) / this.body.dom.center.clientWidth;
}
/** /**
* Stop an animation * Stop an animation
* @private * @private
@ -291,7 +298,7 @@ Range.prototype._applyRange = function(start, end) {
throw new Error('Invalid end "' + end + '"'); throw new Error('Invalid end "' + end + '"');
} }
// prevent start < end
// prevent end < start
if (newEnd < newStart) { if (newEnd < newStart) {
newEnd = newStart; newEnd = newStart;
} }

+ 2
- 3
lib/timeline/component/item/BoxItem.js View File

@ -37,15 +37,14 @@ BoxItem.prototype = new Item (null, null, null);
/** /**
* Check whether this item is visible inside given range * Check whether this item is visible inside given range
* @returns {{start: Number, end: Number}} range with a timestamp for start and end
* @param {{start: Number, end: Number}} range with a timestamp for start and end
* @returns {boolean} True if visible * @returns {boolean} True if visible
*/ */
BoxItem.prototype.isVisible = function(range) { BoxItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
var isVisible; var isVisible;
var align = this.options.align; var align = this.options.align;
var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
var widthInMs = this.width * msPerPixel;
var widthInMs = this.width * range.getMillisecondsPerPixel();
if (align == 'right') { if (align == 'right') {
isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end); isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end);

+ 2
- 3
lib/timeline/component/item/PointItem.js View File

@ -38,13 +38,12 @@ PointItem.prototype = new Item (null, null, null);
/** /**
* Check whether this item is visible inside given range * Check whether this item is visible inside given range
* @returns {{start: Number, end: Number}} range with a timestamp for start and end
* @param {{start: Number, end: Number}} range with a timestamp for start and end
* @returns {boolean} True if visible * @returns {boolean} True if visible
*/ */
PointItem.prototype.isVisible = function(range) { PointItem.prototype.isVisible = function(range) {
// determine visibility // determine visibility
var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
var widthInMs = this.width * msPerPixel;
var widthInMs = this.width * range.getMillisecondsPerPixel();
return (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start < range.end); return (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start < range.end);
}; };

+ 2
- 0
package.json View File

@ -52,7 +52,9 @@
"gulp-concat": "^2.6.0", "gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7", "gulp-util": "^3.0.7",
"jsdom": "9.9.1",
"mocha": "^3.1.2", "mocha": "^3.1.2",
"mocha-jsdom": "^1.1.0",
"rimraf": "^2.5.2", "rimraf": "^2.5.2",
"uglify-js": "^2.6.2", "uglify-js": "^2.6.2",
"uuid": "^3.0.1", "uuid": "^3.0.1",

+ 61
- 0
test/TimelineRange.test.js View File

@ -0,0 +1,61 @@
var assert = require('assert');
var vis = require('../dist/vis');
var jsdom = require('mocha-jsdom')
var moment = vis.moment;
var timeline = vis.timeline;
var Range = timeline.Range;
function buildSimpleBody() {
var body = {
dom: {
center: {
clientWidth: 1000
}
},
domProps: this.props,
emitter: {
on: function() {},
off: function() {},
emit: function() {}
},
hiddenDates: [],
util: {}
};
body.dom.rollingModeBtn = document.createElement('div');
return body;
}
describe('Timeline Range', function () {
jsdom();
it('should have start default before now', function () {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf();
var range = new Range(buildSimpleBody());
assert(range.start < now, "Default start is before now");
});
it('should have end default after now', function () {
var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf();
var range = new Range(buildSimpleBody());
assert(range.end > now, "Default end is after now");
});
it('should support custom start and end dates', function () {
var range = new Range(buildSimpleBody());
range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 3, 11, 0, 23, 35, 0), false, false, null);
assert.equal(range.start, new Date(2017, 0, 26, 13, 26, 3, 320).valueOf(), "start is as expected");
assert.equal(range.end, new Date(2017, 3, 11, 0, 23, 35, 0).valueOf(), "end is as expected");
});
it('should calculate milliseconds per pixel', function () {
var range = new Range(buildSimpleBody());
assert(range.getMillisecondsPerPixel() > 0, "positive value for milliseconds per pixel");
});
it('should calculate 1 millisecond per pixel for simple range', function () {
var range = new Range(buildSimpleBody());
range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 0, 26, 13, 26, 4, 320), false, false, null);
assert.equal(range.getMillisecondsPerPixel(), 1, "one second over 1000 pixels");
});
});

Loading…
Cancel
Save