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.

186 lines
6.0 KiB

  1. var Hammer = require('../../../module/hammer');
  2. var Item = require('./Item');
  3. var BackgroundGroup = require('../BackgroundGroup');
  4. var RangeItem = require('./RangeItem');
  5. /**
  6. * @constructor BackgroundItem
  7. * @extends Item
  8. * @param {Object} data Object containing parameters start, end
  9. * content, className.
  10. * @param {{toScreen: function, toTime: function}} conversion
  11. * Conversion functions from time to screen and vice versa
  12. * @param {Object} [options] Configuration options
  13. * // TODO: describe options
  14. */
  15. // TODO: implement support for the BackgroundItem just having a start, then being displayed as a sort of an annotation
  16. function BackgroundItem (data, conversion, options) {
  17. this.props = {
  18. content: {
  19. width: 0
  20. }
  21. };
  22. this.overflow = false; // if contents can overflow (css styling), this flag is set to true
  23. // validate data
  24. if (data) {
  25. if (data.start == undefined) {
  26. throw new Error('Property "start" missing in item ' + data.id);
  27. }
  28. if (data.end == undefined) {
  29. throw new Error('Property "end" missing in item ' + data.id);
  30. }
  31. }
  32. Item.call(this, data, conversion, options);
  33. }
  34. BackgroundItem.prototype = new Item (null, null, null);
  35. BackgroundItem.prototype.baseClassName = 'vis-item vis-background';
  36. BackgroundItem.prototype.stack = false;
  37. /**
  38. * Check whether this item is visible inside given range
  39. * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  40. * @returns {boolean} True if visible
  41. */
  42. BackgroundItem.prototype.isVisible = function(range) {
  43. // determine visibility
  44. return (this.data.start < range.end) && (this.data.end > range.start);
  45. };
  46. /**
  47. * Repaint the item
  48. */
  49. BackgroundItem.prototype.redraw = function() {
  50. var dom = this.dom;
  51. if (!dom) {
  52. // create DOM
  53. this.dom = {};
  54. dom = this.dom;
  55. // background box
  56. dom.box = document.createElement('div');
  57. // className is updated in redraw()
  58. // frame box (to prevent the item contents from overflowing
  59. dom.frame = document.createElement('div');
  60. dom.frame.className = 'vis-item-overflow';
  61. dom.box.appendChild(dom.frame);
  62. // contents box
  63. dom.content = document.createElement('div');
  64. dom.content.className = 'vis-item-content';
  65. dom.frame.appendChild(dom.content);
  66. // Note: we do NOT attach this item as attribute to the DOM,
  67. // such that background items cannot be selected
  68. //dom.box['timeline-item'] = this;
  69. this.dirty = true;
  70. }
  71. // append DOM to parent DOM
  72. if (!this.parent) {
  73. throw new Error('Cannot redraw item: no parent attached');
  74. }
  75. if (!dom.box.parentNode) {
  76. var background = this.parent.dom.background;
  77. if (!background) {
  78. throw new Error('Cannot redraw item: parent has no background container element');
  79. }
  80. background.appendChild(dom.box);
  81. }
  82. this.displayed = true;
  83. // Update DOM when item is marked dirty. An item is marked dirty when:
  84. // - the item is not yet rendered
  85. // - the item's data is changed
  86. // - the item is selected/deselected
  87. if (this.dirty) {
  88. this._updateContents(this.dom.content);
  89. this._updateDataAttributes(this.dom.content);
  90. this._updateStyle(this.dom.box);
  91. // update class
  92. var className = (this.data.className ? (' ' + this.data.className) : '') +
  93. (this.selected ? ' vis-selected' : '');
  94. dom.box.className = this.baseClassName + className;
  95. // determine from css whether this box has overflow
  96. this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
  97. // recalculate size
  98. this.props.content.width = this.dom.content.offsetWidth;
  99. this.height = 0; // set height zero, so this item will be ignored when stacking items
  100. this.dirty = false;
  101. }
  102. };
  103. /**
  104. * Show the item in the DOM (when not already visible). The items DOM will
  105. * be created when needed.
  106. */
  107. BackgroundItem.prototype.show = RangeItem.prototype.show;
  108. /**
  109. * Hide the item from the DOM (when visible)
  110. * @return {Boolean} changed
  111. */
  112. BackgroundItem.prototype.hide = RangeItem.prototype.hide;
  113. /**
  114. * Reposition the item horizontally
  115. * @Override
  116. */
  117. BackgroundItem.prototype.repositionX = RangeItem.prototype.repositionX;
  118. /**
  119. * Reposition the item vertically
  120. * @Override
  121. */
  122. BackgroundItem.prototype.repositionY = function(margin) {
  123. var height;
  124. var orientation = this.options.orientation.item;
  125. // special positioning for subgroups
  126. if (this.data.subgroup !== undefined) {
  127. // TODO: instead of calculating the top position of the subgroups here for every BackgroundItem, calculate the top of the subgroup once in Itemset
  128. var itemSubgroup = this.data.subgroup;
  129. var subgroups = this.parent.subgroups;
  130. var subgroupIndex = subgroups[itemSubgroup].index;
  131. this.dom.box.style.height = this.parent.subgroups[itemSubgroup].height + 'px';
  132. if (orientation == 'top') {
  133. this.dom.box.style.top = this.parent.top + this.parent.subgroups[itemSubgroup].top + 'px';
  134. } else {
  135. this.dom.box.style.top = (this.parent.top + this.parent.height - this.parent.subgroups[itemSubgroup].top - this.parent.subgroups[itemSubgroup].height) + 'px';
  136. }
  137. this.dom.box.style.bottom = '';
  138. }
  139. // and in the case of no subgroups:
  140. else {
  141. // we want backgrounds with groups to only show in groups.
  142. if (this.parent instanceof BackgroundGroup) {
  143. // if the item is not in a group:
  144. height = Math.max(this.parent.height,
  145. this.parent.itemSet.body.domProps.center.height,
  146. this.parent.itemSet.body.domProps.centerContainer.height);
  147. this.dom.box.style.bottom = orientation == 'bottom' ? '0' : '';
  148. this.dom.box.style.top = orientation == 'top' ? '0' : '';
  149. }
  150. else {
  151. height = this.parent.height;
  152. // same alignment for items when orientation is top or bottom
  153. this.dom.box.style.top = this.parent.top + 'px';
  154. this.dom.box.style.bottom = '';
  155. }
  156. }
  157. this.dom.box.style.height = height + 'px';
  158. };
  159. module.exports = BackgroundItem;