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.

425 lines
12 KiB

10 years ago
10 years ago
10 years ago
10 years ago
  1. var util = require('../../util');
  2. var stack = require('../Stack');
  3. var RangeItem = require('./item/RangeItem');
  4. /**
  5. * @constructor Group
  6. * @param {Number | String} groupId
  7. * @param {Object} data
  8. * @param {ItemSet} itemSet
  9. */
  10. function Group (groupId, data, itemSet) {
  11. this.groupId = groupId;
  12. this.itemSet = itemSet;
  13. this.dom = {};
  14. this.props = {
  15. label: {
  16. width: 0,
  17. height: 0
  18. }
  19. };
  20. this.className = null;
  21. this.items = {}; // items filtered by groupId of this group
  22. this.visibleItems = []; // items currently visible in window
  23. this.orderedItems = { // items sorted by start and by end
  24. byStart: [],
  25. byEnd: []
  26. };
  27. this._create();
  28. this.setData(data);
  29. }
  30. /**
  31. * Create DOM elements for the group
  32. * @private
  33. */
  34. Group.prototype._create = function() {
  35. var label = document.createElement('div');
  36. label.className = 'vlabel';
  37. this.dom.label = label;
  38. var inner = document.createElement('div');
  39. inner.className = 'inner';
  40. label.appendChild(inner);
  41. this.dom.inner = inner;
  42. var foreground = document.createElement('div');
  43. foreground.className = 'group';
  44. foreground['timeline-group'] = this;
  45. this.dom.foreground = foreground;
  46. this.dom.background = document.createElement('div');
  47. this.dom.background.className = 'group';
  48. this.dom.axis = document.createElement('div');
  49. this.dom.axis.className = 'group';
  50. // create a hidden marker to detect when the Timelines container is attached
  51. // to the DOM, or the style of a parent of the Timeline is changed from
  52. // display:none is changed to visible.
  53. this.dom.marker = document.createElement('div');
  54. this.dom.marker.style.visibility = 'hidden';
  55. this.dom.marker.innerHTML = '?';
  56. this.dom.background.appendChild(this.dom.marker);
  57. };
  58. /**
  59. * Set the group data for this group
  60. * @param {Object} data Group data, can contain properties content and className
  61. */
  62. Group.prototype.setData = function(data) {
  63. // update contents
  64. var content = data && data.content;
  65. if (content instanceof Element) {
  66. this.dom.inner.appendChild(content);
  67. }
  68. else if (content !== undefined && content !== null) {
  69. this.dom.inner.innerHTML = content;
  70. }
  71. else {
  72. this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
  73. }
  74. // update title
  75. this.dom.label.title = data && data.title || '';
  76. if (!this.dom.inner.firstChild) {
  77. util.addClassName(this.dom.inner, 'hidden');
  78. }
  79. else {
  80. util.removeClassName(this.dom.inner, 'hidden');
  81. }
  82. // update className
  83. var className = data && data.className || null;
  84. if (className != this.className) {
  85. if (this.className) {
  86. util.removeClassName(this.dom.label, this.className);
  87. util.removeClassName(this.dom.foreground, this.className);
  88. util.removeClassName(this.dom.background, this.className);
  89. util.removeClassName(this.dom.axis, this.className);
  90. }
  91. util.addClassName(this.dom.label, className);
  92. util.addClassName(this.dom.foreground, className);
  93. util.addClassName(this.dom.background, className);
  94. util.addClassName(this.dom.axis, className);
  95. this.className = className;
  96. }
  97. };
  98. /**
  99. * Get the width of the group label
  100. * @return {number} width
  101. */
  102. Group.prototype.getLabelWidth = function() {
  103. return this.props.label.width;
  104. };
  105. /**
  106. * Repaint this group
  107. * @param {{start: number, end: number}} range
  108. * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
  109. * @param {boolean} [restack=false] Force restacking of all items
  110. * @return {boolean} Returns true if the group is resized
  111. */
  112. Group.prototype.redraw = function(range, margin, restack) {
  113. var resized = false;
  114. this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
  115. // force recalculation of the height of the items when the marker height changed
  116. // (due to the Timeline being attached to the DOM or changed from display:none to visible)
  117. var markerHeight = this.dom.marker.clientHeight;
  118. if (markerHeight != this.lastMarkerHeight) {
  119. this.lastMarkerHeight = markerHeight;
  120. util.forEach(this.items, function (item) {
  121. item.dirty = true;
  122. if (item.displayed) item.redraw();
  123. });
  124. restack = true;
  125. }
  126. // reposition visible items vertically
  127. if (this.itemSet.options.stack) { // TODO: ugly way to access options...
  128. stack.stack(this.visibleItems, margin, restack);
  129. }
  130. else { // no stacking
  131. stack.nostack(this.visibleItems, margin);
  132. }
  133. // recalculate the height of the group
  134. var height;
  135. var visibleItems = this.visibleItems;
  136. if (visibleItems.length) {
  137. var min = visibleItems[0].top;
  138. var max = visibleItems[0].top + visibleItems[0].height;
  139. util.forEach(visibleItems, function (item) {
  140. min = Math.min(min, item.top);
  141. max = Math.max(max, (item.top + item.height));
  142. });
  143. if (min > margin.axis) {
  144. // there is an empty gap between the lowest item and the axis
  145. var offset = min - margin.axis;
  146. max -= offset;
  147. util.forEach(visibleItems, function (item) {
  148. item.top -= offset;
  149. });
  150. }
  151. height = max + margin.item.vertical / 2;
  152. }
  153. else {
  154. height = margin.axis + margin.item.vertical;
  155. }
  156. height = Math.max(height, this.props.label.height);
  157. // calculate actual size and position
  158. var foreground = this.dom.foreground;
  159. this.top = foreground.offsetTop;
  160. this.left = foreground.offsetLeft;
  161. this.width = foreground.offsetWidth;
  162. resized = util.updateProperty(this, 'height', height) || resized;
  163. // recalculate size of label
  164. resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
  165. resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;
  166. // apply new height
  167. this.dom.background.style.height = height + 'px';
  168. this.dom.foreground.style.height = height + 'px';
  169. this.dom.label.style.height = height + 'px';
  170. // update vertical position of items after they are re-stacked and the height of the group is calculated
  171. for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
  172. var item = this.visibleItems[i];
  173. item.repositionY();
  174. }
  175. return resized;
  176. };
  177. /**
  178. * Show this group: attach to the DOM
  179. */
  180. Group.prototype.show = function() {
  181. if (!this.dom.label.parentNode) {
  182. this.itemSet.dom.labelSet.appendChild(this.dom.label);
  183. }
  184. if (!this.dom.foreground.parentNode) {
  185. this.itemSet.dom.foreground.appendChild(this.dom.foreground);
  186. }
  187. if (!this.dom.background.parentNode) {
  188. this.itemSet.dom.background.appendChild(this.dom.background);
  189. }
  190. if (!this.dom.axis.parentNode) {
  191. this.itemSet.dom.axis.appendChild(this.dom.axis);
  192. }
  193. };
  194. /**
  195. * Hide this group: remove from the DOM
  196. */
  197. Group.prototype.hide = function() {
  198. var label = this.dom.label;
  199. if (label.parentNode) {
  200. label.parentNode.removeChild(label);
  201. }
  202. var foreground = this.dom.foreground;
  203. if (foreground.parentNode) {
  204. foreground.parentNode.removeChild(foreground);
  205. }
  206. var background = this.dom.background;
  207. if (background.parentNode) {
  208. background.parentNode.removeChild(background);
  209. }
  210. var axis = this.dom.axis;
  211. if (axis.parentNode) {
  212. axis.parentNode.removeChild(axis);
  213. }
  214. };
  215. /**
  216. * Add an item to the group
  217. * @param {Item} item
  218. */
  219. Group.prototype.add = function(item) {
  220. this.items[item.id] = item;
  221. item.setParent(this);
  222. if (this.visibleItems.indexOf(item) == -1) {
  223. var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
  224. this._checkIfVisible(item, this.visibleItems, range);
  225. }
  226. };
  227. /**
  228. * Remove an item from the group
  229. * @param {Item} item
  230. */
  231. Group.prototype.remove = function(item) {
  232. delete this.items[item.id];
  233. item.setParent(this.itemSet);
  234. // remove from visible items
  235. var index = this.visibleItems.indexOf(item);
  236. if (index != -1) this.visibleItems.splice(index, 1);
  237. // TODO: also remove from ordered items?
  238. };
  239. /**
  240. * Remove an item from the corresponding DataSet
  241. * @param {Item} item
  242. */
  243. Group.prototype.removeFromDataSet = function(item) {
  244. this.itemSet.removeItem(item.id);
  245. };
  246. /**
  247. * Reorder the items
  248. */
  249. Group.prototype.order = function() {
  250. var array = util.toArray(this.items);
  251. this.orderedItems.byStart = array;
  252. this.orderedItems.byEnd = this._constructByEndArray(array);
  253. stack.orderByStart(this.orderedItems.byStart);
  254. stack.orderByEnd(this.orderedItems.byEnd);
  255. };
  256. /**
  257. * Create an array containing all items being a range (having an end date)
  258. * @param {Item[]} array
  259. * @returns {RangeItem[]}
  260. * @private
  261. */
  262. Group.prototype._constructByEndArray = function(array) {
  263. var endArray = [];
  264. for (var i = 0; i < array.length; i++) {
  265. if (array[i] instanceof RangeItem) {
  266. endArray.push(array[i]);
  267. }
  268. }
  269. return endArray;
  270. };
  271. /**
  272. * Update the visible items
  273. * @param {{byStart: Item[], byEnd: Item[]}} orderedItems All items ordered by start date and by end date
  274. * @param {Item[]} visibleItems The previously visible items.
  275. * @param {{start: number, end: number}} range Visible range
  276. * @return {Item[]} visibleItems The new visible items.
  277. * @private
  278. */
  279. Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
  280. var initialPosByStart,
  281. newVisibleItems = [],
  282. i;
  283. // first check if the items that were in view previously are still in view.
  284. // this handles the case for the RangeItem that is both before and after the current one.
  285. if (visibleItems.length > 0) {
  286. for (i = 0; i < visibleItems.length; i++) {
  287. this._checkIfVisible(visibleItems[i], newVisibleItems, range);
  288. }
  289. }
  290. // If there were no visible items previously, use binarySearch to find a visible PointItem or RangeItem (based on startTime)
  291. if (newVisibleItems.length == 0) {
  292. initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
  293. }
  294. else {
  295. initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
  296. }
  297. // use visible search to find a visible RangeItem (only based on endTime)
  298. var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
  299. // if we found a initial ID to use, trace it up and down until we meet an invisible item.
  300. if (initialPosByStart != -1) {
  301. for (i = initialPosByStart; i >= 0; i--) {
  302. if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
  303. }
  304. for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
  305. if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
  306. }
  307. }
  308. // if we found a initial ID to use, trace it up and down until we meet an invisible item.
  309. if (initialPosByEnd != -1) {
  310. for (i = initialPosByEnd; i >= 0; i--) {
  311. if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
  312. }
  313. for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
  314. if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
  315. }
  316. }
  317. return newVisibleItems;
  318. };
  319. /**
  320. * this function checks if an item is invisible. If it is NOT we make it visible
  321. * and add it to the global visible items. If it is, return true.
  322. *
  323. * @param {Item} item
  324. * @param {Item[]} visibleItems
  325. * @param {{start:number, end:number}} range
  326. * @returns {boolean}
  327. * @private
  328. */
  329. Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
  330. if (item.isVisible(range)) {
  331. if (!item.displayed) item.show();
  332. item.repositionX();
  333. if (visibleItems.indexOf(item) == -1) {
  334. visibleItems.push(item);
  335. }
  336. return false;
  337. }
  338. else {
  339. if (item.displayed) item.hide();
  340. return true;
  341. }
  342. };
  343. /**
  344. * this function is very similar to the _checkIfInvisible() but it does not
  345. * return booleans, hides the item if it should not be seen and always adds to
  346. * the visibleItems.
  347. * this one is for brute forcing and hiding.
  348. *
  349. * @param {Item} item
  350. * @param {Array} visibleItems
  351. * @param {{start:number, end:number}} range
  352. * @private
  353. */
  354. Group.prototype._checkIfVisible = function(item, visibleItems, range) {
  355. if (item.isVisible(range)) {
  356. if (!item.displayed) item.show();
  357. // reposition item horizontally
  358. item.repositionX();
  359. visibleItems.push(item);
  360. }
  361. else {
  362. if (item.displayed) item.hide();
  363. }
  364. };
  365. module.exports = Group;