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.

305 lines
9.1 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. var Item = require('./Item');
  2. var util = require('../../../util');
  3. /**
  4. * @constructor BoxItem
  5. * @extends Item
  6. * @param {Object} data Object containing parameters start
  7. * content, className.
  8. * @param {{toScreen: function, toTime: function}} conversion
  9. * Conversion functions from time to screen and vice versa
  10. * @param {Object} [options] Configuration options
  11. * // TODO: describe available options
  12. */
  13. function BoxItem (data, conversion, options) {
  14. this.props = {
  15. dot: {
  16. width: 0,
  17. height: 0
  18. },
  19. line: {
  20. width: 0,
  21. height: 0
  22. }
  23. };
  24. this.options = options;
  25. // validate data
  26. if (data) {
  27. if (data.start == undefined) {
  28. throw new Error('Property "start" missing in item ' + data);
  29. }
  30. }
  31. Item.call(this, data, conversion, options);
  32. }
  33. BoxItem.prototype = new Item (null, null, null);
  34. /**
  35. * Check whether this item is visible inside given range
  36. * @returns {{start: Number, end: Number}} range with a timestamp for start and end
  37. * @returns {boolean} True if visible
  38. */
  39. BoxItem.prototype.isVisible = function(range) {
  40. // determine visibility
  41. var isVisible;
  42. var align = this.options.align;
  43. var msPerPixel = (range.end - range.start) / range.body.dom.center.clientWidth;
  44. var widthInMs = this.width * msPerPixel;
  45. if (align == 'right') {
  46. isVisible = (this.data.start.getTime() > range.start ) && (this.data.start.getTime() - widthInMs < range.end);
  47. }
  48. else if (align == 'left') {
  49. isVisible = (this.data.start.getTime() + widthInMs > range.start ) && (this.data.start.getTime() < range.end);
  50. }
  51. else {
  52. // default or 'center'
  53. isVisible = (this.data.start.getTime() + widthInMs/2 > range.start ) && (this.data.start.getTime() - widthInMs/2 < range.end);
  54. }
  55. return isVisible;
  56. };
  57. /**
  58. * Repaint the item
  59. */
  60. BoxItem.prototype.redraw = function() {
  61. var dom = this.dom;
  62. if (!dom) {
  63. // create DOM
  64. this.dom = {};
  65. dom = this.dom;
  66. // create main box
  67. dom.box = document.createElement('DIV');
  68. // contents box (inside the background box). used for making margins
  69. dom.content = document.createElement('DIV');
  70. dom.content.className = 'vis-item-content';
  71. dom.box.appendChild(dom.content);
  72. // line to axis
  73. dom.line = document.createElement('DIV');
  74. dom.line.className = 'vis-line';
  75. // dot on axis
  76. dom.dot = document.createElement('DIV');
  77. dom.dot.className = 'vis-dot';
  78. // attach this item as attribute
  79. dom.box['timeline-item'] = this;
  80. this.dirty = true;
  81. }
  82. // append DOM to parent DOM
  83. if (!this.parent) {
  84. throw new Error('Cannot redraw item: no parent attached');
  85. }
  86. if (!dom.box.parentNode) {
  87. var foreground = this.parent.dom.foreground;
  88. if (!foreground) throw new Error('Cannot redraw item: parent has no foreground container element');
  89. foreground.appendChild(dom.box);
  90. }
  91. if (!dom.line.parentNode) {
  92. var background = this.parent.dom.background;
  93. if (!background) throw new Error('Cannot redraw item: parent has no background container element');
  94. background.appendChild(dom.line);
  95. }
  96. if (!dom.dot.parentNode) {
  97. var axis = this.parent.dom.axis;
  98. if (!background) throw new Error('Cannot redraw item: parent has no axis container element');
  99. axis.appendChild(dom.dot);
  100. }
  101. this.displayed = true;
  102. // Update DOM when item is marked dirty. An item is marked dirty when:
  103. // - the item is not yet rendered
  104. // - the item's data is changed
  105. // - the item is selected/deselected
  106. if (this.dirty) {
  107. this._updateContents(this.dom.content);
  108. this._updateTitle(this.dom.box);
  109. this._updateDataAttributes(this.dom.box);
  110. this._updateStyle(this.dom.box);
  111. var editable = (this.options.editable.updateTime ||
  112. this.options.editable.updateGroup ||
  113. this.editable === true) &&
  114. this.editable !== false;
  115. // update class
  116. var className = (this.data.className? ' ' + this.data.className : '') +
  117. (this.selected ? ' vis-selected' : '') +
  118. (editable ? ' vis-editable' : ' vis-readonly');
  119. dom.box.className = 'vis-item vis-box' + className;
  120. dom.line.className = 'vis-item vis-line' + className;
  121. dom.dot.className = 'vis-item vis-dot' + className;
  122. // set initial position in the visible range of the grid so that the
  123. // rendered box size can be determinated correctly, even the content
  124. // has a dynamic width (fixes #2032).
  125. var previousRight = dom.box.style.right;
  126. var previousLeft = dom.box.style.left;
  127. if (this.options.rtl) {
  128. dom.box.style.right = "0px";
  129. } else {
  130. dom.box.style.left = "0px";
  131. }
  132. // recalculate size
  133. this.props.dot.height = dom.dot.offsetHeight;
  134. this.props.dot.width = dom.dot.offsetWidth;
  135. this.props.line.width = dom.line.offsetWidth;
  136. this.width = dom.box.offsetWidth;
  137. this.height = dom.box.offsetHeight;
  138. // restore previous position
  139. if (this.options.rtl) {
  140. dom.box.style.right = previousRight;
  141. } else {
  142. dom.box.style.left = previousLeft;
  143. }
  144. this.dirty = false;
  145. }
  146. this._repaintOnItemUpdateTimeTooltip(dom.box);
  147. this._repaintDragCenter();
  148. this._repaintDeleteButton(dom.box);
  149. };
  150. /**
  151. * Show the item in the DOM (when not already displayed). The items DOM will
  152. * be created when needed.
  153. */
  154. BoxItem.prototype.show = function() {
  155. if (!this.displayed) {
  156. this.redraw();
  157. }
  158. };
  159. /**
  160. * Hide the item from the DOM (when visible)
  161. */
  162. BoxItem.prototype.hide = function() {
  163. if (this.displayed) {
  164. var dom = this.dom;
  165. if (dom.box.parentNode) dom.box.parentNode.removeChild(dom.box);
  166. if (dom.line.parentNode) dom.line.parentNode.removeChild(dom.line);
  167. if (dom.dot.parentNode) dom.dot.parentNode.removeChild(dom.dot);
  168. this.displayed = false;
  169. }
  170. };
  171. /**
  172. * Reposition the item horizontally
  173. * @Override
  174. */
  175. BoxItem.prototype.repositionX = function() {
  176. var start = this.conversion.toScreen(this.data.start);
  177. var align = this.options.align;
  178. // calculate left position of the box
  179. if (align == 'right') {
  180. if (this.options.rtl) {
  181. this.right = start - this.width;
  182. // reposition box, line, and dot
  183. this.dom.box.style.right = this.right + 'px';
  184. this.dom.line.style.right = (start - this.props.line.width) + 'px';
  185. this.dom.dot.style.right = (start - this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
  186. } else {
  187. this.left = start - this.width;
  188. // reposition box, line, and dot
  189. this.dom.box.style.left = this.left + 'px';
  190. this.dom.line.style.left = (start - this.props.line.width) + 'px';
  191. this.dom.dot.style.left = (start - this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
  192. }
  193. }
  194. else if (align == 'left') {
  195. if (this.options.rtl) {
  196. this.right = start;
  197. // reposition box, line, and dot
  198. this.dom.box.style.right = this.right + 'px';
  199. this.dom.line.style.right = start + 'px';
  200. this.dom.dot.style.right = (start + this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
  201. } else {
  202. this.left = start;
  203. // reposition box, line, and dot
  204. this.dom.box.style.left = this.left + 'px';
  205. this.dom.line.style.left = start + 'px';
  206. this.dom.dot.style.left = (start + this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
  207. }
  208. }
  209. else {
  210. // default or 'center'
  211. if (this.options.rtl) {
  212. this.right = start - this.width / 2;
  213. // reposition box, line, and dot
  214. this.dom.box.style.right = this.right + 'px';
  215. this.dom.line.style.right = (start - this.props.line.width) + 'px';
  216. this.dom.dot.style.right = (start - this.props.dot.width / 2) + 'px';
  217. } else {
  218. this.left = start - this.width / 2;
  219. // reposition box, line, and dot
  220. this.dom.box.style.left = this.left + 'px';
  221. this.dom.line.style.left = (start - this.props.line.width / 2) + 'px';
  222. this.dom.dot.style.left = (start - this.props.dot.width / 2) + 'px';
  223. }
  224. }
  225. };
  226. /**
  227. * Reposition the item vertically
  228. * @Override
  229. */
  230. BoxItem.prototype.repositionY = function() {
  231. var orientation = this.options.orientation.item;
  232. var box = this.dom.box;
  233. var line = this.dom.line;
  234. var dot = this.dom.dot;
  235. if (orientation == 'top') {
  236. box.style.top = (this.top || 0) + 'px';
  237. line.style.top = '0';
  238. line.style.height = (this.parent.top + this.top + 1) + 'px';
  239. line.style.bottom = '';
  240. }
  241. else { // orientation 'bottom'
  242. var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
  243. var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;
  244. box.style.top = (this.parent.height - this.top - this.height || 0) + 'px';
  245. line.style.top = (itemSetHeight - lineHeight) + 'px';
  246. line.style.bottom = '0';
  247. }
  248. dot.style.top = (-this.props.dot.height / 2) + 'px';
  249. };
  250. /**
  251. * Return the width of the item left from its start date
  252. * @return {number}
  253. */
  254. BoxItem.prototype.getWidthLeft = function () {
  255. return this.width / 2;
  256. };
  257. /**
  258. * Return the width of the item right from its start date
  259. * @return {number}
  260. */
  261. BoxItem.prototype.getWidthRight = function () {
  262. return this.width / 2;
  263. };
  264. module.exports = BoxItem;