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.

931 lines
28 KiB

9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. var util = require('../../util');
  2. var stack = require('../Stack');
  3. /**
  4. * @param {number | string} groupId
  5. * @param {Object} data
  6. * @param {ItemSet} itemSet
  7. * @constructor Group
  8. */
  9. function Group (groupId, data, itemSet) {
  10. this.groupId = groupId;
  11. this.subgroups = {};
  12. this.subgroupStack = {};
  13. this.subgroupStackAll = false;
  14. this.doInnerStack = false;
  15. this.subgroupIndex = 0;
  16. this.subgroupOrderer = data && data.subgroupOrder;
  17. this.itemSet = itemSet;
  18. this.isVisible = null;
  19. this.stackDirty = true; // if true, items will be restacked on next redraw
  20. if (data && data.nestedGroups) {
  21. this.nestedGroups = data.nestedGroups;
  22. if (data.showNested == false) {
  23. this.showNested = false;
  24. } else {
  25. this.showNested = true;
  26. }
  27. }
  28. if (data && data.subgroupStack) {
  29. if (typeof data.subgroupStack === "boolean") {
  30. this.doInnerStack = data.subgroupStack;
  31. this.subgroupStackAll = data.subgroupStack;
  32. }
  33. else {
  34. // We might be doing stacking on specific sub groups, but only
  35. // if at least one is set to do stacking
  36. for(var key in data.subgroupStack) {
  37. this.subgroupStack[key] = data.subgroupStack[key];
  38. this.doInnerStack = this.doInnerStack || data.subgroupStack[key];
  39. }
  40. }
  41. }
  42. this.nestedInGroup = null;
  43. this.dom = {};
  44. this.props = {
  45. label: {
  46. width: 0,
  47. height: 0
  48. }
  49. };
  50. this.className = null;
  51. this.items = {}; // items filtered by groupId of this group
  52. this.visibleItems = []; // items currently visible in window
  53. this.itemsInRange = []; // items currently in range
  54. this.orderedItems = {
  55. byStart: [],
  56. byEnd: []
  57. };
  58. this.checkRangedItems = false; // needed to refresh the ranged items if the window is programatically changed with NO overlap.
  59. var me = this;
  60. this.itemSet.body.emitter.on("checkRangedItems", function () {
  61. me.checkRangedItems = true;
  62. })
  63. this._create();
  64. this.setData(data);
  65. }
  66. /**
  67. * Create DOM elements for the group
  68. * @private
  69. */
  70. Group.prototype._create = function() {
  71. var label = document.createElement('div');
  72. if (this.itemSet.options.groupEditable.order) {
  73. label.className = 'vis-label draggable';
  74. } else {
  75. label.className = 'vis-label';
  76. }
  77. this.dom.label = label;
  78. var inner = document.createElement('div');
  79. inner.className = 'vis-inner';
  80. label.appendChild(inner);
  81. this.dom.inner = inner;
  82. var foreground = document.createElement('div');
  83. foreground.className = 'vis-group';
  84. foreground['timeline-group'] = this;
  85. this.dom.foreground = foreground;
  86. this.dom.background = document.createElement('div');
  87. this.dom.background.className = 'vis-group';
  88. this.dom.axis = document.createElement('div');
  89. this.dom.axis.className = 'vis-group';
  90. // create a hidden marker to detect when the Timelines container is attached
  91. // to the DOM, or the style of a parent of the Timeline is changed from
  92. // display:none is changed to visible.
  93. this.dom.marker = document.createElement('div');
  94. this.dom.marker.style.visibility = 'hidden';
  95. this.dom.marker.style.position = 'absolute';
  96. this.dom.marker.innerHTML = '';
  97. this.dom.background.appendChild(this.dom.marker);
  98. };
  99. /**
  100. * Set the group data for this group
  101. * @param {Object} data Group data, can contain properties content and className
  102. */
  103. Group.prototype.setData = function(data) {
  104. // update contents
  105. var content;
  106. var templateFunction;
  107. if (this.itemSet.options && this.itemSet.options.groupTemplate) {
  108. templateFunction = this.itemSet.options.groupTemplate.bind(this);
  109. content = templateFunction(data, this.dom.inner);
  110. } else {
  111. content = data && data.content;
  112. }
  113. if (content instanceof Element) {
  114. this.dom.inner.appendChild(content);
  115. while (this.dom.inner.firstChild) {
  116. this.dom.inner.removeChild(this.dom.inner.firstChild);
  117. }
  118. this.dom.inner.appendChild(content);
  119. } else if (content instanceof Object) {
  120. templateFunction(data, this.dom.inner);
  121. } else if (content !== undefined && content !== null) {
  122. this.dom.inner.innerHTML = content;
  123. } else {
  124. this.dom.inner.innerHTML = this.groupId || ''; // groupId can be null
  125. }
  126. // update title
  127. this.dom.label.title = data && data.title || '';
  128. if (!this.dom.inner.firstChild) {
  129. util.addClassName(this.dom.inner, 'vis-hidden');
  130. }
  131. else {
  132. util.removeClassName(this.dom.inner, 'vis-hidden');
  133. }
  134. if (data && data.nestedGroups) {
  135. if (!this.nestedGroups || this.nestedGroups != data.nestedGroups) {
  136. this.nestedGroups = data.nestedGroups;
  137. }
  138. if (data.showNested !== undefined || this.showNested === undefined) {
  139. if (data.showNested == false) {
  140. this.showNested = false;
  141. } else {
  142. this.showNested = true;
  143. }
  144. }
  145. util.addClassName(this.dom.label, 'vis-nesting-group');
  146. var collapsedDirClassName = this.itemSet.options.rtl ? 'collapsed-rtl' : 'collapsed'
  147. if (this.showNested) {
  148. util.removeClassName(this.dom.label, collapsedDirClassName);
  149. util.addClassName(this.dom.label, 'expanded');
  150. } else {
  151. util.removeClassName(this.dom.label, 'expanded');
  152. util.addClassName(this.dom.label, collapsedDirClassName);
  153. }
  154. } else if (this.nestedGroups) {
  155. this.nestedGroups = null;
  156. collapsedDirClassName = this.itemSet.options.rtl ? 'collapsed-rtl' : 'collapsed'
  157. util.removeClassName(this.dom.label, collapsedDirClassName);
  158. util.removeClassName(this.dom.label, 'expanded');
  159. util.removeClassName(this.dom.label, 'vis-nesting-group');
  160. }
  161. if (data && data.nestedInGroup) {
  162. util.addClassName(this.dom.label, 'vis-nested-group');
  163. if (this.itemSet.options && this.itemSet.options.rtl) {
  164. this.dom.inner.style.paddingRight = '30px';
  165. } else {
  166. this.dom.inner.style.paddingLeft = '30px';
  167. }
  168. }
  169. // update className
  170. var className = data && data.className || null;
  171. if (className != this.className) {
  172. if (this.className) {
  173. util.removeClassName(this.dom.label, this.className);
  174. util.removeClassName(this.dom.foreground, this.className);
  175. util.removeClassName(this.dom.background, this.className);
  176. util.removeClassName(this.dom.axis, this.className);
  177. }
  178. util.addClassName(this.dom.label, className);
  179. util.addClassName(this.dom.foreground, className);
  180. util.addClassName(this.dom.background, className);
  181. util.addClassName(this.dom.axis, className);
  182. this.className = className;
  183. }
  184. // update style
  185. if (this.style) {
  186. util.removeCssText(this.dom.label, this.style);
  187. this.style = null;
  188. }
  189. if (data && data.style) {
  190. util.addCssText(this.dom.label, data.style);
  191. this.style = data.style;
  192. }
  193. };
  194. /**
  195. * Get the width of the group label
  196. * @return {number} width
  197. */
  198. Group.prototype.getLabelWidth = function() {
  199. return this.props.label.width;
  200. };
  201. Group.prototype._didMarkerHeightChange = function() {
  202. var markerHeight = this.dom.marker.clientHeight;
  203. if (markerHeight != this.lastMarkerHeight) {
  204. this.lastMarkerHeight = markerHeight;
  205. var redrawQueue = {};
  206. var redrawQueueLength = 0;
  207. util.forEach(this.items, function (item, key) {
  208. item.dirty = true;
  209. if (item.displayed) {
  210. var returnQueue = true;
  211. redrawQueue[key] = item.redraw(returnQueue);
  212. redrawQueueLength = redrawQueue[key].length;
  213. }
  214. })
  215. var needRedraw = redrawQueueLength > 0;
  216. if (needRedraw) {
  217. // redraw all regular items
  218. for (var i = 0; i < redrawQueueLength; i++) {
  219. util.forEach(redrawQueue, function (fns) {
  220. fns[i]();
  221. });
  222. }
  223. }
  224. return true;
  225. }
  226. }
  227. Group.prototype._calculateGroupSizeAndPosition = function() {
  228. var offsetTop = this.dom.foreground.offsetTop
  229. var offsetLeft = this.dom.foreground.offsetLeft
  230. var offsetWidth = this.dom.foreground.offsetWidth
  231. this.top = offsetTop;
  232. this.right = offsetLeft;
  233. this.width = offsetWidth;
  234. }
  235. Group.prototype._redrawItems = function(forceRestack, lastIsVisible, margin, range) {
  236. var restack = forceRestack || this.stackDirty || this.isVisible && !lastIsVisible;
  237. // if restacking, reposition visible items vertically
  238. if (restack) {
  239. var visibleSubgroups = {};
  240. var subgroup = null;
  241. if (typeof this.itemSet.options.order === 'function') {
  242. // a custom order function
  243. // brute force restack of all items
  244. // show all items
  245. var me = this;
  246. var limitSize = false;
  247. var redrawQueue = {};
  248. var redrawQueueLength = 0;
  249. util.forEach(this.items, function (item, key) {
  250. if (!item.displayed) {
  251. var returnQueue = true;
  252. redrawQueue[key] = item.redraw(returnQueue);
  253. redrawQueueLength = redrawQueue[key].length;
  254. me.visibleItems.push(item);
  255. }
  256. })
  257. var needRedraw = redrawQueueLength > 0;
  258. if (needRedraw) {
  259. // redraw all regular items
  260. for (var i = 0; i < redrawQueueLength; i++) {
  261. util.forEach(redrawQueue, function (fns) {
  262. fns[i]();
  263. });
  264. }
  265. }
  266. for (i = 0; i < this.items.length; i++) {
  267. this.items[i].repositionX(limitSize);
  268. }
  269. if (this.doInnerStack && this.itemSet.options.stackSubgroups) {
  270. // Order the items within each subgroup
  271. for(subgroup in this.subgroups) {
  272. visibleSubgroups[subgroup] = this.subgroups[subgroup].items.slice().sort(function (a, b) {
  273. return me.itemSet.options.order(a.data, b.data);
  274. });
  275. }
  276. stack.stackSubgroupsWithInnerStack(visibleSubgroups, margin, this.subgroups);
  277. }
  278. else {
  279. // order all items and force a restacking
  280. var customOrderedItems = this.orderedItems.byStart.slice().sort(function (a, b) {
  281. return me.itemSet.options.order(a.data, b.data);
  282. });
  283. stack.stack(customOrderedItems, margin, true /* restack=true */);
  284. }
  285. this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range);
  286. } else {
  287. // no custom order function, lazy stacking
  288. this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range);
  289. if (this.itemSet.options.stack) {
  290. if (this.doInnerStack && this.itemSet.options.stackSubgroups) {
  291. for(subgroup in this.subgroups) {
  292. visibleSubgroups[subgroup] = this.subgroups[subgroup].items;
  293. }
  294. stack.stackSubgroupsWithInnerStack(visibleSubgroups, margin, this.subgroups);
  295. }
  296. else {
  297. // TODO: ugly way to access options...
  298. stack.stack(this.visibleItems, margin, true /* restack=true */);
  299. }
  300. } else {
  301. // no stacking
  302. stack.nostack(this.visibleItems, margin, this.subgroups, this.itemSet.options.stackSubgroups);
  303. }
  304. }
  305. this.stackDirty = false;
  306. }
  307. }
  308. Group.prototype._didResize = function(resized, height) {
  309. resized = util.updateProperty(this, 'height', height) || resized;
  310. // recalculate size of label
  311. var labelWidth = this.dom.inner.clientWidth;
  312. var labelHeight = this.dom.inner.clientHeight;
  313. resized = util.updateProperty(this.props.label, 'width', labelWidth) || resized;
  314. resized = util.updateProperty(this.props.label, 'height', labelHeight) || resized;
  315. return resized;
  316. }
  317. Group.prototype._applyGroupHeight = function(height) {
  318. this.dom.background.style.height = height + 'px';
  319. this.dom.foreground.style.height = height + 'px';
  320. this.dom.label.style.height = height + 'px';
  321. }
  322. // update vertical position of items after they are re-stacked and the height of the group is calculated
  323. Group.prototype._updateItemsVerticalPosition = function(margin) {
  324. for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
  325. var item = this.visibleItems[i];
  326. item.repositionY(margin);
  327. if (!this.isVisible && this.groupId != "__background__") {
  328. if (item.displayed) item.hide();
  329. }
  330. }
  331. }
  332. /**
  333. * Repaint this group
  334. * @param {{start: number, end: number}} range
  335. * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
  336. * @param {boolean} [forceRestack=false] Force restacking of all items
  337. * @param {boolean} [returnQueue=false] return the queue or if the group resized
  338. * @return {boolean} Returns true if the group is resized or the redraw queue if returnQueue=true
  339. */
  340. Group.prototype.redraw = function(range, margin, forceRestack, returnQueue) {
  341. var resized = false;
  342. var lastIsVisible = this.isVisible;
  343. var height;
  344. var queue = [
  345. // force recalculation of the height of the items when the marker height changed
  346. // (due to the Timeline being attached to the DOM or changed from display:none to visible)
  347. (function () {
  348. forceRestack = this._didMarkerHeightChange.bind(this);
  349. }).bind(this),
  350. // recalculate the height of the subgroups
  351. this._updateSubGroupHeights.bind(this, margin),
  352. // calculate actual size and position
  353. this._calculateGroupSizeAndPosition.bind(this),
  354. // check if group is visible
  355. (function() {
  356. this.isVisible = this._isGroupVisible.bind(this)(range, margin);
  357. }).bind(this),
  358. // redraw Items if needed
  359. (function() {
  360. this._redrawItems.bind(this)(forceRestack, lastIsVisible, margin, range)
  361. }).bind(this),
  362. // update subgroups
  363. this._updateSubgroupsSizes.bind(this),
  364. // recalculate the height of the group
  365. (function() {
  366. height = this._calculateHeight.bind(this)(margin);
  367. }).bind(this),
  368. // calculate actual size and position again
  369. this._calculateGroupSizeAndPosition.bind(this),
  370. // check if resized
  371. (function() {
  372. resized = this._didResize.bind(this)(resized, height)
  373. }).bind(this),
  374. // apply group height
  375. (function() {
  376. this._applyGroupHeight.bind(this)(height)
  377. }).bind(this),
  378. // update vertical position of items after they are re-stacked and the height of the group is calculated
  379. (function() {
  380. this._updateItemsVerticalPosition.bind(this)(margin)
  381. }).bind(this),
  382. function() {
  383. if (!this.isVisible && this.height) {
  384. resized = false;
  385. }
  386. return resized
  387. }
  388. ]
  389. if (returnQueue) {
  390. return queue;
  391. } else {
  392. var result;
  393. queue.forEach(function (fn) {
  394. result = fn();
  395. });
  396. return result;
  397. }
  398. };
  399. /**
  400. * recalculate the height of the subgroups
  401. *
  402. * @param {{item: vis.Item}} margin
  403. * @private
  404. */
  405. Group.prototype._updateSubGroupHeights = function (margin) {
  406. if (Object.keys(this.subgroups).length > 0) {
  407. var me = this;
  408. this.resetSubgroups();
  409. util.forEach(this.visibleItems, function (item) {
  410. if (item.data.subgroup !== undefined) {
  411. me.subgroups[item.data.subgroup].height = Math.max(me.subgroups[item.data.subgroup].height, item.height + margin.item.vertical);
  412. me.subgroups[item.data.subgroup].visible = true;
  413. }
  414. });
  415. }
  416. };
  417. /**
  418. * check if group is visible
  419. *
  420. * @param {vis.Range} range
  421. * @param {{axis: vis.DataAxis}} margin
  422. * @returns {boolean} is visible
  423. * @private
  424. */
  425. Group.prototype._isGroupVisible = function (range, margin) {
  426. return (this.top <= range.body.domProps.centerContainer.height - range.body.domProps.scrollTop + margin.axis)
  427. && (this.top + this.height + margin.axis >= - range.body.domProps.scrollTop);
  428. };
  429. /**
  430. * recalculate the height of the group
  431. * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin
  432. * @returns {number} Returns the height
  433. * @private
  434. */
  435. Group.prototype._calculateHeight = function (margin) {
  436. // recalculate the height of the group
  437. var height;
  438. var itemsInRange = this.visibleItems;
  439. if (itemsInRange.length > 0) {
  440. var min = itemsInRange[0].top;
  441. var max = itemsInRange[0].top + itemsInRange[0].height;
  442. util.forEach(itemsInRange, function (item) {
  443. min = Math.min(min, item.top);
  444. max = Math.max(max, (item.top + item.height));
  445. });
  446. if (min > margin.axis) {
  447. // there is an empty gap between the lowest item and the axis
  448. var offset = min - margin.axis;
  449. max -= offset;
  450. util.forEach(itemsInRange, function (item) {
  451. item.top -= offset;
  452. });
  453. }
  454. height = max + margin.item.vertical / 2;
  455. }
  456. else {
  457. height = 0;
  458. }
  459. height = Math.max(height, this.props.label.height);
  460. return height;
  461. };
  462. /**
  463. * Show this group: attach to the DOM
  464. */
  465. Group.prototype.show = function() {
  466. if (!this.dom.label.parentNode) {
  467. this.itemSet.dom.labelSet.appendChild(this.dom.label);
  468. }
  469. if (!this.dom.foreground.parentNode) {
  470. this.itemSet.dom.foreground.appendChild(this.dom.foreground);
  471. }
  472. if (!this.dom.background.parentNode) {
  473. this.itemSet.dom.background.appendChild(this.dom.background);
  474. }
  475. if (!this.dom.axis.parentNode) {
  476. this.itemSet.dom.axis.appendChild(this.dom.axis);
  477. }
  478. };
  479. /**
  480. * Hide this group: remove from the DOM
  481. */
  482. Group.prototype.hide = function() {
  483. var label = this.dom.label;
  484. if (label.parentNode) {
  485. label.parentNode.removeChild(label);
  486. }
  487. var foreground = this.dom.foreground;
  488. if (foreground.parentNode) {
  489. foreground.parentNode.removeChild(foreground);
  490. }
  491. var background = this.dom.background;
  492. if (background.parentNode) {
  493. background.parentNode.removeChild(background);
  494. }
  495. var axis = this.dom.axis;
  496. if (axis.parentNode) {
  497. axis.parentNode.removeChild(axis);
  498. }
  499. };
  500. /**
  501. * Add an item to the group
  502. * @param {Item} item
  503. */
  504. Group.prototype.add = function(item) {
  505. this.items[item.id] = item;
  506. item.setParent(this);
  507. this.stackDirty = true;
  508. // add to
  509. if (item.data.subgroup !== undefined) {
  510. this._addToSubgroup(item);
  511. this.orderSubgroups();
  512. }
  513. if (this.visibleItems.indexOf(item) == -1) {
  514. var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
  515. this._checkIfVisible(item, this.visibleItems, range);
  516. }
  517. };
  518. Group.prototype._addToSubgroup = function(item, subgroupId) {
  519. subgroupId = subgroupId || item.data.subgroup;
  520. if (subgroupId != undefined && this.subgroups[subgroupId] === undefined) {
  521. this.subgroups[subgroupId] = {
  522. height:0,
  523. top: 0,
  524. start: item.data.start,
  525. end: item.data.end || item.data.start,
  526. visible: false,
  527. index:this.subgroupIndex,
  528. items: [],
  529. stack: this.subgroupStackAll || this.subgroupStack[subgroupId] || false
  530. };
  531. this.subgroupIndex++;
  532. }
  533. if (new Date(item.data.start) < new Date(this.subgroups[subgroupId].start)) {
  534. this.subgroups[subgroupId].start = item.data.start;
  535. }
  536. var itemEnd = item.data.end || item.data.start;
  537. if (new Date(itemEnd) > new Date(this.subgroups[subgroupId].end)) {
  538. this.subgroups[subgroupId].end = itemEnd;
  539. }
  540. this.subgroups[subgroupId].items.push(item);
  541. };
  542. Group.prototype._updateSubgroupsSizes = function () {
  543. var me = this;
  544. if (me.subgroups) {
  545. for (var subgroup in me.subgroups) {
  546. var initialEnd = me.subgroups[subgroup].items[0].data.end || me.subgroups[subgroup].items[0].data.start;
  547. var newStart = me.subgroups[subgroup].items[0].data.start;
  548. var newEnd = initialEnd - 1;
  549. me.subgroups[subgroup].items.forEach(function(item) {
  550. if (new Date(item.data.start) < new Date(newStart)) {
  551. newStart = item.data.start;
  552. }
  553. var itemEnd = item.data.end || item.data.start;
  554. if (new Date(itemEnd) > new Date(newEnd)) {
  555. newEnd = itemEnd;
  556. }
  557. })
  558. me.subgroups[subgroup].start = newStart;
  559. me.subgroups[subgroup].end = new Date(newEnd - 1) // -1 to compensate for colliding end to start subgroups;
  560. }
  561. }
  562. }
  563. Group.prototype.orderSubgroups = function() {
  564. if (this.subgroupOrderer !== undefined) {
  565. var sortArray = [];
  566. var subgroup;
  567. if (typeof this.subgroupOrderer == 'string') {
  568. for (subgroup in this.subgroups) {
  569. sortArray.push({subgroup: subgroup, sortField: this.subgroups[subgroup].items[0].data[this.subgroupOrderer]})
  570. }
  571. sortArray.sort(function (a, b) {
  572. return a.sortField - b.sortField;
  573. })
  574. }
  575. else if (typeof this.subgroupOrderer == 'function') {
  576. for (subgroup in this.subgroups) {
  577. sortArray.push(this.subgroups[subgroup].items[0].data);
  578. }
  579. sortArray.sort(this.subgroupOrderer);
  580. }
  581. if (sortArray.length > 0) {
  582. for (var i = 0; i < sortArray.length; i++) {
  583. this.subgroups[sortArray[i].subgroup].index = i;
  584. }
  585. }
  586. }
  587. };
  588. Group.prototype.resetSubgroups = function() {
  589. for (var subgroup in this.subgroups) {
  590. if (this.subgroups.hasOwnProperty(subgroup)) {
  591. this.subgroups[subgroup].visible = false;
  592. this.subgroups[subgroup].height = 0;
  593. }
  594. }
  595. };
  596. /**
  597. * Remove an item from the group
  598. * @param {Item} item
  599. */
  600. Group.prototype.remove = function(item) {
  601. delete this.items[item.id];
  602. item.setParent(null);
  603. this.stackDirty = true;
  604. // remove from visible items
  605. var index = this.visibleItems.indexOf(item);
  606. if (index != -1) this.visibleItems.splice(index, 1);
  607. if(item.data.subgroup !== undefined){
  608. this._removeFromSubgroup(item);
  609. this.orderSubgroups();
  610. }
  611. };
  612. Group.prototype._removeFromSubgroup = function(item, subgroupId) {
  613. subgroupId = subgroupId || item.data.subgroup;
  614. if (subgroupId != undefined) {
  615. var subgroup = this.subgroups[subgroupId];
  616. if (subgroup){
  617. var itemIndex = subgroup.items.indexOf(item);
  618. // Check the item is actually in this subgroup. How should items not in the group be handled?
  619. if (itemIndex >= 0) {
  620. subgroup.items.splice(itemIndex,1);
  621. if (!subgroup.items.length){
  622. delete this.subgroups[subgroupId];
  623. } else {
  624. this._updateSubgroupsSizes();
  625. }
  626. }
  627. }
  628. }
  629. };
  630. /**
  631. * Remove an item from the corresponding DataSet
  632. * @param {Item} item
  633. */
  634. Group.prototype.removeFromDataSet = function(item) {
  635. this.itemSet.removeItem(item.id);
  636. };
  637. /**
  638. * Reorder the items
  639. */
  640. Group.prototype.order = function() {
  641. var array = util.toArray(this.items);
  642. var startArray = [];
  643. var endArray = [];
  644. for (var i = 0; i < array.length; i++) {
  645. if (array[i].data.end !== undefined) {
  646. endArray.push(array[i]);
  647. }
  648. startArray.push(array[i]);
  649. }
  650. this.orderedItems = {
  651. byStart: startArray,
  652. byEnd: endArray
  653. };
  654. stack.orderByStart(this.orderedItems.byStart);
  655. stack.orderByEnd(this.orderedItems.byEnd);
  656. };
  657. /**
  658. * Update the visible items
  659. * @param {{byStart: Item[], byEnd: Item[]}} orderedItems All items ordered by start date and by end date
  660. * @param {Item[]} oldVisibleItems The previously visible items.
  661. * @param {{start: number, end: number}} range Visible range
  662. * @return {Item[]} visibleItems The new visible items.
  663. * @private
  664. */
  665. Group.prototype._updateItemsInRange = function(orderedItems, oldVisibleItems, range) {
  666. var visibleItems = [];
  667. var visibleItemsLookup = {}; // we keep this to quickly look up if an item already exists in the list without using indexOf on visibleItems
  668. var interval = (range.end - range.start) / 4;
  669. var lowerBound = range.start - interval;
  670. var upperBound = range.end + interval;
  671. // this function is used to do the binary search.
  672. var searchFunction = function (value) {
  673. if (value < lowerBound) {return -1;}
  674. else if (value <= upperBound) {return 0;}
  675. else {return 1;}
  676. };
  677. // first check if the items that were in view previously are still in view.
  678. // IMPORTANT: this handles the case for the items with startdate before the window and enddate after the window!
  679. // also cleans up invisible items.
  680. if (oldVisibleItems.length > 0) {
  681. for (var i = 0; i < oldVisibleItems.length; i++) {
  682. this._checkIfVisibleWithReference(oldVisibleItems[i], visibleItems, visibleItemsLookup, range);
  683. }
  684. }
  685. // we do a binary search for the items that have only start values.
  686. var initialPosByStart = util.binarySearchCustom(orderedItems.byStart, searchFunction, 'data','start');
  687. // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the start values.
  688. this._traceVisible(initialPosByStart, orderedItems.byStart, visibleItems, visibleItemsLookup, function (item) {
  689. return (item.data.start < lowerBound || item.data.start > upperBound);
  690. });
  691. // if the window has changed programmatically without overlapping the old window, the ranged items with start < lowerBound and end > upperbound are not shown.
  692. // We therefore have to brute force check all items in the byEnd list
  693. if (this.checkRangedItems == true) {
  694. this.checkRangedItems = false;
  695. for (i = 0; i < orderedItems.byEnd.length; i++) {
  696. this._checkIfVisibleWithReference(orderedItems.byEnd[i], visibleItems, visibleItemsLookup, range);
  697. }
  698. }
  699. else {
  700. // we do a binary search for the items that have defined end times.
  701. var initialPosByEnd = util.binarySearchCustom(orderedItems.byEnd, searchFunction, 'data','end');
  702. // trace the visible items from the inital start pos both ways until an invisible item is found, we only look at the end values.
  703. this._traceVisible(initialPosByEnd, orderedItems.byEnd, visibleItems, visibleItemsLookup, function (item) {
  704. return (item.data.end < lowerBound || item.data.end > upperBound);
  705. });
  706. }
  707. var redrawQueue = {};
  708. var redrawQueueLength = 0;
  709. for (i = 0; i < visibleItems.length; i++) {
  710. var item = visibleItems[i];
  711. if (!item.displayed) {
  712. var returnQueue = true;
  713. redrawQueue[i] = item.redraw(returnQueue);
  714. redrawQueueLength = redrawQueue[i].length;
  715. }
  716. }
  717. var needRedraw = redrawQueueLength > 0;
  718. if (needRedraw) {
  719. // redraw all regular items
  720. for (var j = 0; j < redrawQueueLength; j++) {
  721. util.forEach(redrawQueue, function (fns) {
  722. fns[j]();
  723. });
  724. }
  725. }
  726. for (i = 0; i < visibleItems.length; i++) {
  727. visibleItems[i].repositionX();
  728. }
  729. return visibleItems;
  730. };
  731. Group.prototype._traceVisible = function (initialPos, items, visibleItems, visibleItemsLookup, breakCondition) {
  732. if (initialPos != -1) {
  733. var i, item;
  734. for (i = initialPos; i >= 0; i--) {
  735. item = items[i];
  736. if (breakCondition(item)) {
  737. break;
  738. }
  739. else {
  740. if (visibleItemsLookup[item.id] === undefined) {
  741. visibleItemsLookup[item.id] = true;
  742. visibleItems.push(item);
  743. }
  744. }
  745. }
  746. for (i = initialPos + 1; i < items.length; i++) {
  747. item = items[i];
  748. if (breakCondition(item)) {
  749. break;
  750. }
  751. else {
  752. if (visibleItemsLookup[item.id] === undefined) {
  753. visibleItemsLookup[item.id] = true;
  754. visibleItems.push(item);
  755. }
  756. }
  757. }
  758. }
  759. }
  760. /**
  761. * this function is very similar to the _checkIfInvisible() but it does not
  762. * return booleans, hides the item if it should not be seen and always adds to
  763. * the visibleItems.
  764. * this one is for brute forcing and hiding.
  765. *
  766. * @param {Item} item
  767. * @param {Array} visibleItems
  768. * @param {{start:number, end:number}} range
  769. * @private
  770. */
  771. Group.prototype._checkIfVisible = function(item, visibleItems, range) {
  772. if (item.isVisible(range)) {
  773. if (!item.displayed) item.show();
  774. // reposition item horizontally
  775. item.repositionX();
  776. visibleItems.push(item);
  777. }
  778. else {
  779. if (item.displayed) item.hide();
  780. }
  781. };
  782. /**
  783. * this function is very similar to the _checkIfInvisible() but it does not
  784. * return booleans, hides the item if it should not be seen and always adds to
  785. * the visibleItems.
  786. * this one is for brute forcing and hiding.
  787. *
  788. * @param {Item} item
  789. * @param {Array.<vis.Item>} visibleItems
  790. * @param {Object<number, boolean>} visibleItemsLookup
  791. * @param {{start:number, end:number}} range
  792. * @private
  793. */
  794. Group.prototype._checkIfVisibleWithReference = function(item, visibleItems, visibleItemsLookup, range) {
  795. if (item.isVisible(range)) {
  796. if (visibleItemsLookup[item.id] === undefined) {
  797. visibleItemsLookup[item.id] = true;
  798. visibleItems.push(item);
  799. }
  800. }
  801. else {
  802. if (item.displayed) item.hide();
  803. }
  804. };
  805. Group.prototype.changeSubgroup = function(item, oldSubgroup, newSubgroup) {
  806. this._removeFromSubgroup(item, oldSubgroup);
  807. this._addToSubgroup(item, newSubgroup);
  808. this.orderSubgroups();
  809. };
  810. module.exports = Group;