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.

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