vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

300 lines
8.6 KiB

var Hammer = require('../../../module/hammer');
var Item = require('./Item');
/**
* @constructor RangeItem
* @extends Item
* @param {Object} data Object containing parameters start, end
* content, className.
* @param {{toScreen: function, toTime: function}} conversion
* Conversion functions from time to screen and vice versa
* @param {Object} [options] Configuration options
* // TODO: describe options
*/
function RangeItem (data, conversion, options) {
this.props = {
content: {
width: 0
}
};
this.overflow = false; // if contents can overflow (css styling), this flag is set to true
// validate data
if (data) {
if (data.start == undefined) {
throw new Error('Property "start" missing in item ' + data.id);
}
if (data.end == undefined) {
throw new Error('Property "end" missing in item ' + data.id);
}
}
Item.call(this, data, conversion, options);
}
RangeItem.prototype = new Item (null, null, null);
RangeItem.prototype.baseClassName = 'vis-item vis-range';
/**
* Check whether this item is visible inside given range
* @returns {{start: Number, end: Number}} range with a timestamp for start and end
* @returns {boolean} True if visible
*/
RangeItem.prototype.isVisible = function(range) {
// determine visibility
return (this.data.start < range.end) && (this.data.end > range.start);
};
/**
* Repaint the item
*/
RangeItem.prototype.redraw = function() {
var dom = this.dom;
if (!dom) {
// create DOM
this.dom = {};
dom = this.dom;
// background box
dom.box = document.createElement('div');
// className is updated in redraw()
// frame box (to prevent the item contents from overflowing
dom.frame = document.createElement('div');
dom.frame.className = 'vis-item-overflow';
dom.box.appendChild(dom.frame);
// contents box
dom.content = document.createElement('div');
dom.content.className = 'vis-item-content';
dom.frame.appendChild(dom.content);
// attach this item as attribute
dom.box['timeline-item'] = this;
this.dirty = true;
}
// append DOM to parent DOM
if (!this.parent) {
throw new Error('Cannot redraw item: no parent attached');
}
if (!dom.box.parentNode) {
var foreground = this.parent.dom.foreground;
if (!foreground) {
throw new Error('Cannot redraw item: parent has no foreground container element');
}
foreground.appendChild(dom.box);
}
this.displayed = true;
// Update DOM when item is marked dirty. An item is marked dirty when:
// - the item is not yet rendered
// - the item's data is changed
// - the item is selected/deselected
if (this.dirty) {
this._updateContents(this.dom.content);
this._updateTitle(this.dom.box);
this._updateDataAttributes(this.dom.box);
this._updateStyle(this.dom.box);
var editable = (this.options.editable.updateTime ||
this.options.editable.updateGroup ||
this.editable === true) &&
this.editable !== false;
// update class
var className = (this.data.className ? (' ' + this.data.className) : '') +
(this.selected ? ' vis-selected' : '') +
(editable ? ' vis-editable' : '');
dom.box.className = this.baseClassName + className;
// determine from css whether this box has overflow
this.overflow = window.getComputedStyle(dom.frame).overflow !== 'hidden';
// recalculate size
// turn off max-width to be able to calculate the real width
// this causes an extra browser repaint/reflow, but so be it
this.dom.content.style.maxWidth = 'none';
this.props.content.width = this.dom.content.offsetWidth;
this.height = this.dom.box.offsetHeight;
this.dom.content.style.maxWidth = '';
this.dirty = false;
}
this._repaintDeleteButton(dom.box);
this._repaintDragLeft();
this._repaintDragRight();
};
/**
* Show the item in the DOM (when not already visible). The items DOM will
* be created when needed.
*/
RangeItem.prototype.show = function() {
if (!this.displayed) {
this.redraw();
}
};
/**
* Hide the item from the DOM (when visible)
* @return {Boolean} changed
*/
RangeItem.prototype.hide = function() {
if (this.displayed) {
var box = this.dom.box;
if (box.parentNode) {
box.parentNode.removeChild(box);
}
this.displayed = false;
}
};
/**
* Reposition the item horizontally
* @param {boolean} [limitSize=true] If true (default), the width of the range
* item will be limited, as the browser cannot
* display very wide divs. This means though
* that the applied left and width may
* not correspond to the ranges start and end
* @Override
*/
RangeItem.prototype.repositionX = function(limitSize) {
var parentWidth = this.parent.width;
var start = this.conversion.toScreen(this.data.start);
var end = this.conversion.toScreen(this.data.end);
var contentLeft;
var contentWidth;
// limit the width of the range, as browsers cannot draw very wide divs
if (limitSize === undefined || limitSize === true) {
if (start < -parentWidth) {
start = -parentWidth;
}
if (end > 2 * parentWidth) {
end = 2 * parentWidth;
}
}
var boxWidth = Math.max(end - start, 1);
if (this.overflow) {
this.left = start;
this.width = boxWidth + this.props.content.width;
contentWidth = this.props.content.width;
// Note: The calculation of width is an optimistic calculation, giving
// a width which will not change when moving the Timeline
// So no re-stacking needed, which is nicer for the eye;
}
else {
this.left = start;
this.width = boxWidth;
contentWidth = Math.min(end - start, this.props.content.width);
}
this.dom.box.style.left = this.left + 'px';
this.dom.box.style.width = boxWidth + 'px';
switch (this.options.align) {
case 'left':
this.dom.content.style.left = '0';
break;
case 'right':
this.dom.content.style.left = Math.max((boxWidth - contentWidth), 0) + 'px';
break;
case 'center':
this.dom.content.style.left = Math.max((boxWidth - contentWidth) / 2, 0) + 'px';
break;
default: // 'auto'
// when range exceeds left of the window, position the contents at the left of the visible area
if (this.overflow) {
if (end > 0) {
contentLeft = Math.max(-start, 0);
}
else {
contentLeft = -contentWidth; // ensure it's not visible anymore
}
}
else {
if (start < 0) {
contentLeft = -start;
}
else {
contentLeft = 0;
}
}
this.dom.content.style.left = contentLeft + 'px';
}
};
/**
* Reposition the item vertically
* @Override
*/
RangeItem.prototype.repositionY = function() {
var orientation = this.options.orientation.item;
var box = this.dom.box;
if (orientation == 'top') {
box.style.top = this.top + 'px';
}
else {
box.style.top = (this.parent.height - this.top - this.height) + 'px';
}
};
/**
* Repaint a drag area on the left side of the range when the range is selected
* @protected
*/
RangeItem.prototype._repaintDragLeft = function () {
if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
// create and show drag area
var dragLeft = document.createElement('div');
dragLeft.className = 'vis-drag-left';
dragLeft.dragLeftItem = this;
this.dom.box.appendChild(dragLeft);
this.dom.dragLeft = dragLeft;
}
else if (!this.selected && this.dom.dragLeft) {
// delete drag area
if (this.dom.dragLeft.parentNode) {
this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
}
this.dom.dragLeft = null;
}
};
/**
* Repaint a drag area on the right side of the range when the range is selected
* @protected
*/
RangeItem.prototype._repaintDragRight = function () {
if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
// create and show drag area
var dragRight = document.createElement('div');
dragRight.className = 'vis-drag-right';
dragRight.dragRightItem = this;
this.dom.box.appendChild(dragRight);
this.dom.dragRight = dragRight;
}
else if (!this.selected && this.dom.dragRight) {
// delete drag area
if (this.dom.dragRight.parentNode) {
this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
}
this.dom.dragRight = null;
}
};
module.exports = RangeItem;