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.

943 lines
32 KiB

  1. var Emitter = require('emitter-component');
  2. var Hammer = require('../module/hammer');
  3. var hammerUtil = require('../hammerUtil');
  4. var util = require('../util');
  5. var DataSet = require('../DataSet');
  6. var DataView = require('../DataView');
  7. var Range = require('./Range');
  8. var ItemSet = require('./component/ItemSet');
  9. var Activator = require('../shared/Activator');
  10. var DateUtil = require('./DateUtil');
  11. var CustomTime = require('./component/CustomTime');
  12. /**
  13. * Create a timeline visualization
  14. * @param {HTMLElement} container
  15. * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
  16. * @param {Object} [options] See Core.setOptions for the available options.
  17. * @constructor
  18. */
  19. function Core () {}
  20. // turn Core into an event emitter
  21. Emitter(Core.prototype);
  22. /**
  23. * Create the main DOM for the Core: a root panel containing left, right,
  24. * top, bottom, content, and background panel.
  25. * @param {Element} container The container element where the Core will
  26. * be attached.
  27. * @private
  28. */
  29. Core.prototype._create = function (container) {
  30. this.dom = {};
  31. this.dom.root = document.createElement('div');
  32. this.dom.background = document.createElement('div');
  33. this.dom.backgroundVertical = document.createElement('div');
  34. this.dom.backgroundHorizontal = document.createElement('div');
  35. this.dom.centerContainer = document.createElement('div');
  36. this.dom.leftContainer = document.createElement('div');
  37. this.dom.rightContainer = document.createElement('div');
  38. this.dom.center = document.createElement('div');
  39. this.dom.left = document.createElement('div');
  40. this.dom.right = document.createElement('div');
  41. this.dom.top = document.createElement('div');
  42. this.dom.bottom = document.createElement('div');
  43. this.dom.shadowTop = document.createElement('div');
  44. this.dom.shadowBottom = document.createElement('div');
  45. this.dom.shadowTopLeft = document.createElement('div');
  46. this.dom.shadowBottomLeft = document.createElement('div');
  47. this.dom.shadowTopRight = document.createElement('div');
  48. this.dom.shadowBottomRight = document.createElement('div');
  49. this.dom.root.className = 'vis-timeline';
  50. this.dom.background.className = 'vis-panel vis-background';
  51. this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical';
  52. this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
  53. this.dom.centerContainer.className = 'vis-panel vis-center';
  54. this.dom.leftContainer.className = 'vis-panel vis-left';
  55. this.dom.rightContainer.className = 'vis-panel vis-right';
  56. this.dom.top.className = 'vis-panel vis-top';
  57. this.dom.bottom.className = 'vis-panel vis-bottom';
  58. this.dom.left.className = 'vis-content';
  59. this.dom.center.className = 'vis-content';
  60. this.dom.right.className = 'vis-content';
  61. this.dom.shadowTop.className = 'vis-shadow vis-top';
  62. this.dom.shadowBottom.className = 'vis-shadow vis-bottom';
  63. this.dom.shadowTopLeft.className = 'vis-shadow vis-top';
  64. this.dom.shadowBottomLeft.className = 'vis-shadow vis-bottom';
  65. this.dom.shadowTopRight.className = 'vis-shadow vis-top';
  66. this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom';
  67. this.dom.root.appendChild(this.dom.background);
  68. this.dom.root.appendChild(this.dom.backgroundVertical);
  69. this.dom.root.appendChild(this.dom.backgroundHorizontal);
  70. this.dom.root.appendChild(this.dom.centerContainer);
  71. this.dom.root.appendChild(this.dom.leftContainer);
  72. this.dom.root.appendChild(this.dom.rightContainer);
  73. this.dom.root.appendChild(this.dom.top);
  74. this.dom.root.appendChild(this.dom.bottom);
  75. this.dom.centerContainer.appendChild(this.dom.center);
  76. this.dom.leftContainer.appendChild(this.dom.left);
  77. this.dom.rightContainer.appendChild(this.dom.right);
  78. this.dom.centerContainer.appendChild(this.dom.shadowTop);
  79. this.dom.centerContainer.appendChild(this.dom.shadowBottom);
  80. this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
  81. this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
  82. this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
  83. this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
  84. this.on('rangechange', this.redraw.bind(this));
  85. var me = this;
  86. this.on('change', function (properties) {
  87. if (properties && properties.queue == true) {
  88. // redraw once on next tick
  89. if (!me._redrawTimer) {
  90. me._redrawTimer = setTimeout(function () {
  91. me._redrawTimer = null;
  92. me._redraw();
  93. }, 0)
  94. }
  95. }
  96. else {
  97. // redraw immediately
  98. me._redraw();
  99. }
  100. });
  101. // create event listeners for all interesting events, these events will be
  102. // emitted via emitter
  103. this.hammer = new Hammer(this.dom.root, {touchAction: 'pan-y'});
  104. this.hammer.get('pinch').set({enable: true});
  105. this.listeners = {};
  106. var events = [
  107. 'tap', 'doubletap', 'press',
  108. 'pinch',
  109. 'pan', 'panstart', 'panmove', 'panend'
  110. // TODO: cleanup
  111. //'touch', 'pinch',
  112. //'tap', 'doubletap', 'hold',
  113. //'dragstart', 'drag', 'dragend',
  114. //'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
  115. ];
  116. events.forEach(function (type) {
  117. var listener = function (event) {
  118. if (me.isActive()) {
  119. me.emit(type, event);
  120. }
  121. };
  122. me.hammer.on(type, listener);
  123. me.listeners[type] = listener;
  124. });
  125. // emulate a touch event (emitted before the start of a pan, pinch, tap, or press)
  126. hammerUtil.onTouch(this.hammer, function (event) {
  127. me.emit('touch', event);
  128. }.bind(this));
  129. // emulate a release event (emitted after a pan, pinch, tap, or press)
  130. hammerUtil.onRelease(this.hammer, function (event) {
  131. me.emit('release', event);
  132. }.bind(this));
  133. function onMouseWheel(event) {
  134. if (me.isActive()) {
  135. me.emit('mousewheel', event);
  136. }
  137. }
  138. this.dom.root.addEventListener('mousewheel', onMouseWheel);
  139. this.dom.root.addEventListener('DOMMouseScroll', onMouseWheel);
  140. // size properties of each of the panels
  141. this.props = {
  142. root: {},
  143. background: {},
  144. centerContainer: {},
  145. leftContainer: {},
  146. rightContainer: {},
  147. center: {},
  148. left: {},
  149. right: {},
  150. top: {},
  151. bottom: {},
  152. border: {},
  153. scrollTop: 0,
  154. scrollTopMin: 0
  155. };
  156. this.redrawCount = 0;
  157. // attach the root panel to the provided container
  158. if (!container) throw new Error('No container provided');
  159. container.appendChild(this.dom.root);
  160. };
  161. /**
  162. * Set options. Options will be passed to all components loaded in the Timeline.
  163. * @param {Object} [options]
  164. * {String} orientation
  165. * Vertical orientation for the Timeline,
  166. * can be 'bottom' (default) or 'top'.
  167. * {String | Number} width
  168. * Width for the timeline, a number in pixels or
  169. * a css string like '1000px' or '75%'. '100%' by default.
  170. * {String | Number} height
  171. * Fixed height for the Timeline, a number in pixels or
  172. * a css string like '400px' or '75%'. If undefined,
  173. * The Timeline will automatically size such that
  174. * its contents fit.
  175. * {String | Number} minHeight
  176. * Minimum height for the Timeline, a number in pixels or
  177. * a css string like '400px' or '75%'.
  178. * {String | Number} maxHeight
  179. * Maximum height for the Timeline, a number in pixels or
  180. * a css string like '400px' or '75%'.
  181. * {Number | Date | String} start
  182. * Start date for the visible window
  183. * {Number | Date | String} end
  184. * End date for the visible window
  185. */
  186. Core.prototype.setOptions = function (options) {
  187. if (options) {
  188. // copy the known options
  189. var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation', 'clickToUse', 'dataAttributes', 'hiddenDates'];
  190. util.selectiveExtend(fields, this.options, options);
  191. if ('hiddenDates' in this.options) {
  192. DateUtil.convertHiddenOptions(this.body, this.options.hiddenDates);
  193. }
  194. if ('clickToUse' in options) {
  195. if (options.clickToUse) {
  196. if (!this.activator) {
  197. this.activator = new Activator(this.dom.root);
  198. }
  199. }
  200. else {
  201. if (this.activator) {
  202. this.activator.destroy();
  203. delete this.activator;
  204. }
  205. }
  206. }
  207. // enable/disable autoResize
  208. this._initAutoResize();
  209. }
  210. // propagate options to all components
  211. this.components.forEach(component => component.setOptions(options));
  212. // TODO: remove deprecation error one day (deprecated since version 0.8.0)
  213. if (options && options.order) {
  214. throw new Error('Option order is deprecated. There is no replacement for this feature.');
  215. }
  216. // redraw everything
  217. this._redraw();
  218. };
  219. /**
  220. * Returns true when the Timeline is active.
  221. * @returns {boolean}
  222. */
  223. Core.prototype.isActive = function () {
  224. return !this.activator || this.activator.active;
  225. };
  226. /**
  227. * Destroy the Core, clean up all DOM elements and event listeners.
  228. */
  229. Core.prototype.destroy = function () {
  230. // unbind datasets
  231. this.clear();
  232. // remove all event listeners
  233. this.off();
  234. // stop checking for changed size
  235. this._stopAutoResize();
  236. // remove from DOM
  237. if (this.dom.root.parentNode) {
  238. this.dom.root.parentNode.removeChild(this.dom.root);
  239. }
  240. this.dom = null;
  241. // remove Activator
  242. if (this.activator) {
  243. this.activator.destroy();
  244. delete this.activator;
  245. }
  246. // cleanup hammer touch events
  247. for (var event in this.listeners) {
  248. if (this.listeners.hasOwnProperty(event)) {
  249. delete this.listeners[event];
  250. }
  251. }
  252. this.listeners = null;
  253. this.hammer = null;
  254. // give all components the opportunity to cleanup
  255. this.components.forEach(component => component.destroy());
  256. this.body = null;
  257. };
  258. /**
  259. * Set a custom time bar
  260. * @param {Date} time
  261. * @param {int} id
  262. */
  263. Core.prototype.setCustomTime = function (time, id) {
  264. if (!this.customTime) {
  265. throw new Error('Cannot get custom time: Custom time bar is not enabled');
  266. }
  267. var barId = id || 0;
  268. this.components.forEach(function (element, index, components) {
  269. if (element instanceof CustomTime && element.options.id === barId) {
  270. element.setCustomTime(time);
  271. }
  272. });
  273. };
  274. /**
  275. * Retrieve the current custom time.
  276. * @return {Date} customTime
  277. * @param {int} id
  278. */
  279. Core.prototype.getCustomTime = function(id) {
  280. if (!this.customTime) {
  281. throw new Error('Cannot get custom time: Custom time bar is not enabled');
  282. }
  283. var barId = id || 0,
  284. customTime = this.customTime.getCustomTime();
  285. this.components.forEach(function (element, index, components) {
  286. if (element instanceof CustomTime && element.options.id === barId) {
  287. customTime = element.getCustomTime();
  288. }
  289. });
  290. return customTime;
  291. };
  292. /**
  293. * Add custom vertical bar
  294. * @param {Date | String | Number} time A Date, unix timestamp, or
  295. * ISO date string. Time point where the new bar should be placed
  296. * @param {Number | String} ID of the new bar
  297. * @return {Number | String} ID of the new bar
  298. */
  299. Core.prototype.addCustomTime = function (time, id) {
  300. if (!this.currentTime) {
  301. throw new Error('Option showCurrentTime must be true');
  302. }
  303. if (time === undefined) {
  304. throw new Error('Time parameter for the custom bar must be provided');
  305. }
  306. var ts = util.convert(time, 'Date').valueOf(),
  307. numIds, customTime, customBarId;
  308. // All bar IDs are kept in 1 array, mixed types
  309. // Bar with ID 0 is the default bar.
  310. if (!this.customBarIds || this.customBarIds.constructor !== Array) {
  311. this.customBarIds = [0];
  312. }
  313. // If the ID is not provided, generate one, otherwise just use it
  314. if (id === undefined) {
  315. numIds = this.customBarIds.filter(function (element) {
  316. return util.isNumber(element);
  317. });
  318. customBarId = numIds.length > 0 ? Math.max.apply(null, numIds) + 1 : 1;
  319. } else {
  320. // Check for duplicates
  321. this.customBarIds.forEach(function (element) {
  322. if (element === id) {
  323. throw new Error('Custom time ID already exists');
  324. }
  325. });
  326. customBarId = id;
  327. }
  328. this.customBarIds.push(customBarId);
  329. customTime = new CustomTime(this.body, {
  330. showCustomTime : true,
  331. time : ts,
  332. id : customBarId
  333. });
  334. this.components.push(customTime);
  335. this.redraw();
  336. return customBarId;
  337. };
  338. /**
  339. * Remove previously added custom bar
  340. * @param {int} id ID of the custom bar to be removed
  341. * @return {boolean} True if the bar exists and is removed, false otherwise
  342. */
  343. Core.prototype.removeCustomTime = function (id) {
  344. var me = this;
  345. this.components.forEach(function (bar, index, components) {
  346. if (bar instanceof CustomTime && bar.options.id === id) {
  347. // Only the lines added by the user will be removed
  348. if (bar.options.id !== 0) {
  349. me.customBarIds.splice(me.customBarIds.indexOf(id), 1);
  350. components.splice(index, 1);
  351. bar.destroy();
  352. }
  353. }
  354. });
  355. };
  356. /**
  357. * Get the id's of the currently visible items.
  358. * @returns {Array} The ids of the visible items
  359. */
  360. Core.prototype.getVisibleItems = function() {
  361. return this.itemSet && this.itemSet.getVisibleItems() || [];
  362. };
  363. /**
  364. * Clear the Core. By Default, items, groups and options are cleared.
  365. * Example usage:
  366. *
  367. * timeline.clear(); // clear items, groups, and options
  368. * timeline.clear({options: true}); // clear options only
  369. *
  370. * @param {Object} [what] Optionally specify what to clear. By default:
  371. * {items: true, groups: true, options: true}
  372. */
  373. Core.prototype.clear = function(what) {
  374. // clear items
  375. if (!what || what.items) {
  376. this.setItems(null);
  377. }
  378. // clear groups
  379. if (!what || what.groups) {
  380. this.setGroups(null);
  381. }
  382. // clear options of timeline and of each of the components
  383. if (!what || what.options) {
  384. this.components.forEach(component => component.setOptions(component.defaultOptions));
  385. this.setOptions(this.defaultOptions); // this will also do a redraw
  386. }
  387. };
  388. /**
  389. * Set Core window such that it fits all items
  390. * @param {Object} [options] Available options:
  391. * `animate: boolean | number`
  392. * If true (default), the range is animated
  393. * smoothly to the new window.
  394. * If a number, the number is taken as duration
  395. * for the animation. Default duration is 500 ms.
  396. */
  397. Core.prototype.fit = function(options) {
  398. var range = this._getDataRange();
  399. // skip range set if there is no start and end date
  400. if (range.start === null && range.end === null) {
  401. return;
  402. }
  403. var animate = (options && options.animate !== undefined) ? options.animate : true;
  404. this.range.setRange(range.start, range.end, animate);
  405. };
  406. /**
  407. * Calculate the data range of the items and applies a 5% window around it.
  408. * @returns {{start: Date | null, end: Date | null}}
  409. * @protected
  410. */
  411. Core.prototype._getDataRange = function() {
  412. // apply the data range as range
  413. var dataRange = this.getItemRange();
  414. // add 5% space on both sides
  415. var start = dataRange.min;
  416. var end = dataRange.max;
  417. if (start != null && end != null) {
  418. var interval = (end.valueOf() - start.valueOf());
  419. if (interval <= 0) {
  420. // prevent an empty interval
  421. interval = 24 * 60 * 60 * 1000; // 1 day
  422. }
  423. start = new Date(start.valueOf() - interval * 0.05);
  424. end = new Date(end.valueOf() + interval * 0.05);
  425. }
  426. return {
  427. start: start,
  428. end: end
  429. }
  430. };
  431. /**
  432. * Set the visible window. Both parameters are optional, you can change only
  433. * start or only end. Syntax:
  434. *
  435. * TimeLine.setWindow(start, end)
  436. * TimeLine.setWindow(start, end, options)
  437. * TimeLine.setWindow(range)
  438. *
  439. * Where start and end can be a Date, number, or string, and range is an
  440. * object with properties start and end.
  441. *
  442. * @param {Date | Number | String | Object} [start] Start date of visible window
  443. * @param {Date | Number | String} [end] End date of visible window
  444. * @param {Object} [options] Available options:
  445. * `animate: boolean | number`
  446. * If true (default), the range is animated
  447. * smoothly to the new window.
  448. * If a number, the number is taken as duration
  449. * for the animation. Default duration is 500 ms.
  450. */
  451. Core.prototype.setWindow = function(start, end, options) {
  452. var animate;
  453. if (arguments.length == 1) {
  454. var range = arguments[0];
  455. animate = (range.animate !== undefined) ? range.animate : true;
  456. this.range.setRange(range.start, range.end, animate);
  457. }
  458. else {
  459. animate = (options && options.animate !== undefined) ? options.animate : true;
  460. this.range.setRange(start, end, animate);
  461. }
  462. };
  463. /**
  464. * Move the window such that given time is centered on screen.
  465. * @param {Date | Number | String} time
  466. * @param {Object} [options] Available options:
  467. * `animate: boolean | number`
  468. * If true (default), the range is animated
  469. * smoothly to the new window.
  470. * If a number, the number is taken as duration
  471. * for the animation. Default duration is 500 ms.
  472. */
  473. Core.prototype.moveTo = function(time, options) {
  474. var interval = this.range.end - this.range.start;
  475. var t = util.convert(time, 'Date').valueOf();
  476. var start = t - interval / 2;
  477. var end = t + interval / 2;
  478. var animate = (options && options.animate !== undefined) ? options.animate : true;
  479. this.range.setRange(start, end, animate);
  480. };
  481. /**
  482. * Get the visible window
  483. * @return {{start: Date, end: Date}} Visible range
  484. */
  485. Core.prototype.getWindow = function() {
  486. var range = this.range.getRange();
  487. return {
  488. start: new Date(range.start),
  489. end: new Date(range.end)
  490. };
  491. };
  492. /**
  493. * Force a redraw. Can be overridden by implementations of Core
  494. */
  495. Core.prototype.redraw = function() {
  496. this._redraw();
  497. };
  498. /**
  499. * Redraw for internal use. Redraws all components. See also the public
  500. * method redraw.
  501. * @protected
  502. */
  503. Core.prototype._redraw = function() {
  504. var resized = false;
  505. var options = this.options;
  506. var props = this.props;
  507. var dom = this.dom;
  508. if (!dom) return; // when destroyed
  509. DateUtil.updateHiddenDates(this.body, this.options.hiddenDates);
  510. // update class names
  511. if (options.orientation == 'top') {
  512. util.addClassName(dom.root, 'vis-top');
  513. util.removeClassName(dom.root, 'vis-bottom');
  514. }
  515. else {
  516. util.removeClassName(dom.root, 'vis-top');
  517. util.addClassName(dom.root, 'vis-bottom');
  518. }
  519. // update root width and height options
  520. dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
  521. dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
  522. dom.root.style.width = util.option.asSize(options.width, '');
  523. // calculate border widths
  524. props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
  525. props.border.right = props.border.left;
  526. props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
  527. props.border.bottom = props.border.top;
  528. var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
  529. var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
  530. // workaround for a bug in IE: the clientWidth of an element with
  531. // a height:0px and overflow:hidden is not calculated and always has value 0
  532. if (dom.centerContainer.clientHeight === 0) {
  533. props.border.left = props.border.top;
  534. props.border.right = props.border.left;
  535. }
  536. if (dom.root.clientHeight === 0) {
  537. borderRootWidth = borderRootHeight;
  538. }
  539. // calculate the heights. If any of the side panels is empty, we set the height to
  540. // minus the border width, such that the border will be invisible
  541. props.center.height = dom.center.offsetHeight;
  542. props.left.height = dom.left.offsetHeight;
  543. props.right.height = dom.right.offsetHeight;
  544. props.top.height = dom.top.clientHeight || -props.border.top;
  545. props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
  546. // TODO: compensate borders when any of the panels is empty.
  547. // apply auto height
  548. // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
  549. var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
  550. var autoHeight = props.top.height + contentHeight + props.bottom.height +
  551. borderRootHeight + props.border.top + props.border.bottom;
  552. dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
  553. // calculate heights of the content panels
  554. props.root.height = dom.root.offsetHeight;
  555. props.background.height = props.root.height - borderRootHeight;
  556. var containerHeight = props.root.height - props.top.height - props.bottom.height -
  557. borderRootHeight;
  558. props.centerContainer.height = containerHeight;
  559. props.leftContainer.height = containerHeight;
  560. props.rightContainer.height = props.leftContainer.height;
  561. // calculate the widths of the panels
  562. props.root.width = dom.root.offsetWidth;
  563. props.background.width = props.root.width - borderRootWidth;
  564. props.left.width = dom.leftContainer.clientWidth || -props.border.left;
  565. props.leftContainer.width = props.left.width;
  566. props.right.width = dom.rightContainer.clientWidth || -props.border.right;
  567. props.rightContainer.width = props.right.width;
  568. var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
  569. props.center.width = centerWidth;
  570. props.centerContainer.width = centerWidth;
  571. props.top.width = centerWidth;
  572. props.bottom.width = centerWidth;
  573. // resize the panels
  574. dom.background.style.height = props.background.height + 'px';
  575. dom.backgroundVertical.style.height = props.background.height + 'px';
  576. dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
  577. dom.centerContainer.style.height = props.centerContainer.height + 'px';
  578. dom.leftContainer.style.height = props.leftContainer.height + 'px';
  579. dom.rightContainer.style.height = props.rightContainer.height + 'px';
  580. dom.background.style.width = props.background.width + 'px';
  581. dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
  582. dom.backgroundHorizontal.style.width = props.background.width + 'px';
  583. dom.centerContainer.style.width = props.center.width + 'px';
  584. dom.top.style.width = props.top.width + 'px';
  585. dom.bottom.style.width = props.bottom.width + 'px';
  586. // reposition the panels
  587. dom.background.style.left = '0';
  588. dom.background.style.top = '0';
  589. dom.backgroundVertical.style.left = (props.left.width + props.border.left) + 'px';
  590. dom.backgroundVertical.style.top = '0';
  591. dom.backgroundHorizontal.style.left = '0';
  592. dom.backgroundHorizontal.style.top = props.top.height + 'px';
  593. dom.centerContainer.style.left = props.left.width + 'px';
  594. dom.centerContainer.style.top = props.top.height + 'px';
  595. dom.leftContainer.style.left = '0';
  596. dom.leftContainer.style.top = props.top.height + 'px';
  597. dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
  598. dom.rightContainer.style.top = props.top.height + 'px';
  599. dom.top.style.left = props.left.width + 'px';
  600. dom.top.style.top = '0';
  601. dom.bottom.style.left = props.left.width + 'px';
  602. dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
  603. // update the scrollTop, feasible range for the offset can be changed
  604. // when the height of the Core or of the contents of the center changed
  605. this._updateScrollTop();
  606. // reposition the scrollable contents
  607. var offset = this.props.scrollTop;
  608. if (options.orientation == 'bottom') {
  609. offset += Math.max(this.props.centerContainer.height - this.props.center.height -
  610. this.props.border.top - this.props.border.bottom, 0);
  611. }
  612. dom.center.style.left = '0';
  613. dom.center.style.top = offset + 'px';
  614. dom.left.style.left = '0';
  615. dom.left.style.top = offset + 'px';
  616. dom.right.style.left = '0';
  617. dom.right.style.top = offset + 'px';
  618. // show shadows when vertical scrolling is available
  619. var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
  620. var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
  621. dom.shadowTop.style.visibility = visibilityTop;
  622. dom.shadowBottom.style.visibility = visibilityBottom;
  623. dom.shadowTopLeft.style.visibility = visibilityTop;
  624. dom.shadowBottomLeft.style.visibility = visibilityBottom;
  625. dom.shadowTopRight.style.visibility = visibilityTop;
  626. dom.shadowBottomRight.style.visibility = visibilityBottom;
  627. // redraw all components
  628. this.components.forEach(function (component) {
  629. resized = component.redraw() || resized;
  630. });
  631. if (resized) {
  632. // keep repainting until all sizes are settled
  633. var MAX_REDRAWS = 3; // maximum number of consecutive redraws
  634. if (this.redrawCount < MAX_REDRAWS) {
  635. this.redrawCount++;
  636. this._redraw();
  637. }
  638. else {
  639. console.log('WARNING: infinite loop in redraw?');
  640. }
  641. this.redrawCount = 0;
  642. }
  643. this.emit("finishedRedraw");
  644. };
  645. // TODO: deprecated since version 1.1.0, remove some day
  646. Core.prototype.repaint = function () {
  647. throw new Error('Function repaint is deprecated. Use redraw instead.');
  648. };
  649. /**
  650. * Set a current time. This can be used for example to ensure that a client's
  651. * time is synchronized with a shared server time.
  652. * Only applicable when option `showCurrentTime` is true.
  653. * @param {Date | String | Number} time A Date, unix timestamp, or
  654. * ISO date string.
  655. */
  656. Core.prototype.setCurrentTime = function(time) {
  657. if (!this.currentTime) {
  658. throw new Error('Option showCurrentTime must be true');
  659. }
  660. this.currentTime.setCurrentTime(time);
  661. };
  662. /**
  663. * Get the current time.
  664. * Only applicable when option `showCurrentTime` is true.
  665. * @return {Date} Returns the current time.
  666. */
  667. Core.prototype.getCurrentTime = function() {
  668. if (!this.currentTime) {
  669. throw new Error('Option showCurrentTime must be true');
  670. }
  671. return this.currentTime.getCurrentTime();
  672. };
  673. /**
  674. * Convert a position on screen (pixels) to a datetime
  675. * @param {int} x Position on the screen in pixels
  676. * @return {Date} time The datetime the corresponds with given position x
  677. * @private
  678. */
  679. // TODO: move this function to Range
  680. Core.prototype._toTime = function(x) {
  681. return DateUtil.toTime(this, x, this.props.center.width);
  682. };
  683. /**
  684. * Convert a position on the global screen (pixels) to a datetime
  685. * @param {int} x Position on the screen in pixels
  686. * @return {Date} time The datetime the corresponds with given position x
  687. * @private
  688. */
  689. // TODO: move this function to Range
  690. Core.prototype._toGlobalTime = function(x) {
  691. return DateUtil.toTime(this, x, this.props.root.width);
  692. //var conversion = this.range.conversion(this.props.root.width);
  693. //return new Date(x / conversion.scale + conversion.offset);
  694. };
  695. /**
  696. * Convert a datetime (Date object) into a position on the screen
  697. * @param {Date} time A date
  698. * @return {int} x The position on the screen in pixels which corresponds
  699. * with the given date.
  700. * @private
  701. */
  702. // TODO: move this function to Range
  703. Core.prototype._toScreen = function(time) {
  704. return DateUtil.toScreen(this, time, this.props.center.width);
  705. };
  706. /**
  707. * Convert a datetime (Date object) into a position on the root
  708. * This is used to get the pixel density estimate for the screen, not the center panel
  709. * @param {Date} time A date
  710. * @return {int} x The position on root in pixels which corresponds
  711. * with the given date.
  712. * @private
  713. */
  714. // TODO: move this function to Range
  715. Core.prototype._toGlobalScreen = function(time) {
  716. return DateUtil.toScreen(this, time, this.props.root.width);
  717. //var conversion = this.range.conversion(this.props.root.width);
  718. //return (time.valueOf() - conversion.offset) * conversion.scale;
  719. };
  720. /**
  721. * Initialize watching when option autoResize is true
  722. * @private
  723. */
  724. Core.prototype._initAutoResize = function () {
  725. if (this.options.autoResize == true) {
  726. this._startAutoResize();
  727. }
  728. else {
  729. this._stopAutoResize();
  730. }
  731. };
  732. /**
  733. * Watch for changes in the size of the container. On resize, the Panel will
  734. * automatically redraw itself.
  735. * @private
  736. */
  737. Core.prototype._startAutoResize = function () {
  738. var me = this;
  739. this._stopAutoResize();
  740. this._onResize = function() {
  741. if (me.options.autoResize != true) {
  742. // stop watching when the option autoResize is changed to false
  743. me._stopAutoResize();
  744. return;
  745. }
  746. if (me.dom.root) {
  747. // check whether the frame is resized
  748. // Note: we compare offsetWidth here, not clientWidth. For some reason,
  749. // IE does not restore the clientWidth from 0 to the actual width after
  750. // changing the timeline's container display style from none to visible
  751. if ((me.dom.root.offsetWidth != me.props.lastWidth) ||
  752. (me.dom.root.offsetHeight != me.props.lastHeight)) {
  753. me.props.lastWidth = me.dom.root.offsetWidth;
  754. me.props.lastHeight = me.dom.root.offsetHeight;
  755. me.emit('change');
  756. }
  757. }
  758. };
  759. // add event listener to window resize
  760. util.addEventListener(window, 'resize', this._onResize);
  761. this.watchTimer = setInterval(this._onResize, 1000);
  762. };
  763. /**
  764. * Stop watching for a resize of the frame.
  765. * @private
  766. */
  767. Core.prototype._stopAutoResize = function () {
  768. if (this.watchTimer) {
  769. clearInterval(this.watchTimer);
  770. this.watchTimer = undefined;
  771. }
  772. // remove event listener on window.resize
  773. util.removeEventListener(window, 'resize', this._onResize);
  774. this._onResize = null;
  775. };
  776. /**
  777. * Apply a scrollTop
  778. * @param {Number} scrollTop
  779. * @returns {Number} scrollTop Returns the applied scrollTop
  780. * @private
  781. */
  782. Core.prototype._setScrollTop = function (scrollTop) {
  783. this.props.scrollTop = scrollTop;
  784. this._updateScrollTop();
  785. return this.props.scrollTop;
  786. };
  787. /**
  788. * Update the current scrollTop when the height of the containers has been changed
  789. * @returns {Number} scrollTop Returns the applied scrollTop
  790. * @private
  791. */
  792. Core.prototype._updateScrollTop = function () {
  793. // recalculate the scrollTopMin
  794. var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
  795. if (scrollTopMin != this.props.scrollTopMin) {
  796. // in case of bottom orientation, change the scrollTop such that the contents
  797. // do not move relative to the time axis at the bottom
  798. if (this.options.orientation == 'bottom') {
  799. this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
  800. }
  801. this.props.scrollTopMin = scrollTopMin;
  802. }
  803. // limit the scrollTop to the feasible scroll range
  804. if (this.props.scrollTop > 0) this.props.scrollTop = 0;
  805. if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
  806. return this.props.scrollTop;
  807. };
  808. /**
  809. * Get the current scrollTop
  810. * @returns {number} scrollTop
  811. * @private
  812. */
  813. Core.prototype._getScrollTop = function () {
  814. return this.props.scrollTop;
  815. };
  816. module.exports = Core;