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.

413 lines
13 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. var util = require('../../util');
  2. var Component = require('./Component');
  3. var TimeStep = require('../TimeStep');
  4. var DateUtil = require('../DateUtil');
  5. var moment = require('../../module/moment');
  6. /**
  7. * A horizontal time axis
  8. * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
  9. * @param {Object} [options] See TimeAxis.setOptions for the available
  10. * options.
  11. * @constructor TimeAxis
  12. * @extends Component
  13. */
  14. function TimeAxis (body, options) {
  15. this.dom = {
  16. foreground: null,
  17. majorLines: [],
  18. majorTexts: [],
  19. minorLines: [],
  20. minorTexts: [],
  21. redundant: {
  22. majorLines: [],
  23. majorTexts: [],
  24. minorLines: [],
  25. minorTexts: []
  26. }
  27. };
  28. this.props = {
  29. range: {
  30. start: 0,
  31. end: 0,
  32. minimumStep: 0
  33. },
  34. lineTop: 0
  35. };
  36. this.defaultOptions = {
  37. orientation: 'bottom', // supported: 'top', 'bottom'
  38. // TODO: implement timeaxis orientations 'left' and 'right'
  39. showMinorLabels: true,
  40. showMajorLabels: true
  41. };
  42. this.options = util.extend({}, this.defaultOptions);
  43. this.body = body;
  44. // create the HTML DOM
  45. this._create();
  46. this.setOptions(options);
  47. }
  48. TimeAxis.prototype = new Component();
  49. /**
  50. * Set options for the TimeAxis.
  51. * Parameters will be merged in current options.
  52. * @param {Object} options Available options:
  53. * {string} [orientation]
  54. * {boolean} [showMinorLabels]
  55. * {boolean} [showMajorLabels]
  56. */
  57. TimeAxis.prototype.setOptions = function(options) {
  58. if (options) {
  59. // copy all options that we know
  60. util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels','hiddenDates'], this.options, options);
  61. // apply locale to moment.js
  62. // TODO: not so nice, this is applied globally to moment.js
  63. if ('locale' in options) {
  64. if (typeof moment.locale === 'function') {
  65. // moment.js 2.8.1+
  66. moment.locale(options.locale);
  67. }
  68. else {
  69. moment.lang(options.locale);
  70. }
  71. }
  72. }
  73. };
  74. /**
  75. * Create the HTML DOM for the TimeAxis
  76. */
  77. TimeAxis.prototype._create = function() {
  78. this.dom.foreground = document.createElement('div');
  79. this.dom.background = document.createElement('div');
  80. this.dom.foreground.className = 'timeaxis foreground';
  81. this.dom.background.className = 'timeaxis background';
  82. };
  83. /**
  84. * Destroy the TimeAxis
  85. */
  86. TimeAxis.prototype.destroy = function() {
  87. // remove from DOM
  88. if (this.dom.foreground.parentNode) {
  89. this.dom.foreground.parentNode.removeChild(this.dom.foreground);
  90. }
  91. if (this.dom.background.parentNode) {
  92. this.dom.background.parentNode.removeChild(this.dom.background);
  93. }
  94. this.body = null;
  95. };
  96. /**
  97. * Repaint the component
  98. * @return {boolean} Returns true if the component is resized
  99. */
  100. TimeAxis.prototype.redraw = function () {
  101. var options = this.options;
  102. var props = this.props;
  103. var foreground = this.dom.foreground;
  104. var background = this.dom.background;
  105. // determine the correct parent DOM element (depending on option orientation)
  106. var parent = (options.orientation == 'top') ? this.body.dom.top : this.body.dom.bottom;
  107. var parentChanged = (foreground.parentNode !== parent);
  108. // calculate character width and height
  109. this._calculateCharSize();
  110. // TODO: recalculate sizes only needed when parent is resized or options is changed
  111. var orientation = this.options.orientation,
  112. showMinorLabels = this.options.showMinorLabels,
  113. showMajorLabels = this.options.showMajorLabels;
  114. // determine the width and height of the elemens for the axis
  115. props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
  116. props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
  117. props.height = props.minorLabelHeight + props.majorLabelHeight;
  118. props.width = foreground.offsetWidth;
  119. props.minorLineHeight = this.body.domProps.root.height - props.majorLabelHeight -
  120. (options.orientation == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
  121. props.minorLineWidth = 1; // TODO: really calculate width
  122. props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
  123. props.majorLineWidth = 1; // TODO: really calculate width
  124. // take foreground and background offline while updating (is almost twice as fast)
  125. var foregroundNextSibling = foreground.nextSibling;
  126. var backgroundNextSibling = background.nextSibling;
  127. foreground.parentNode && foreground.parentNode.removeChild(foreground);
  128. background.parentNode && background.parentNode.removeChild(background);
  129. foreground.style.height = this.props.height + 'px';
  130. this._repaintLabels();
  131. // put DOM online again (at the same place)
  132. if (foregroundNextSibling) {
  133. parent.insertBefore(foreground, foregroundNextSibling);
  134. }
  135. else {
  136. parent.appendChild(foreground)
  137. }
  138. if (backgroundNextSibling) {
  139. this.body.dom.backgroundVertical.insertBefore(background, backgroundNextSibling);
  140. }
  141. else {
  142. this.body.dom.backgroundVertical.appendChild(background)
  143. }
  144. return this._isResized() || parentChanged;
  145. };
  146. /**
  147. * Repaint major and minor text labels and vertical grid lines
  148. * @private
  149. */
  150. TimeAxis.prototype._repaintLabels = function () {
  151. var orientation = this.options.orientation;
  152. // calculate range and step (step such that we have space for 7 characters per label)
  153. var start = util.convert(this.body.range.start, 'Number');
  154. var end = util.convert(this.body.range.end, 'Number');
  155. var timeLabelsize = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf();
  156. var minimumStep = timeLabelsize - DateUtil.getHiddenDurationBefore(this.body.hiddenDates, this.body.range, timeLabelsize);
  157. minimumStep -= this.body.util.toTime(0).valueOf();
  158. var step = new TimeStep(new Date(start), new Date(end), minimumStep, this.body.hiddenDates);
  159. this.step = step;
  160. // Move all DOM elements to a "redundant" list, where they
  161. // can be picked for re-use, and clear the lists with lines and texts.
  162. // At the end of the function _repaintLabels, left over elements will be cleaned up
  163. var dom = this.dom;
  164. dom.redundant.majorLines = dom.majorLines;
  165. dom.redundant.majorTexts = dom.majorTexts;
  166. dom.redundant.minorLines = dom.minorLines;
  167. dom.redundant.minorTexts = dom.minorTexts;
  168. dom.majorLines = [];
  169. dom.majorTexts = [];
  170. dom.minorLines = [];
  171. dom.minorTexts = [];
  172. step.first();
  173. var xFirstMajorLabel = undefined;
  174. var max = 0;
  175. while (step.hasNext() && max < 1000) {
  176. max++;
  177. var cur = step.getCurrent();
  178. var x = this.body.util.toScreen(cur);
  179. var isMajor = step.isMajor();
  180. // TODO: lines must have a width, such that we can create css backgrounds
  181. if (this.options.showMinorLabels) {
  182. this._repaintMinorText(x, step.getLabelMinor(), orientation);
  183. }
  184. if (isMajor && this.options.showMajorLabels) {
  185. if (x > 0) {
  186. if (xFirstMajorLabel == undefined) {
  187. xFirstMajorLabel = x;
  188. }
  189. this._repaintMajorText(x, step.getLabelMajor(), orientation);
  190. }
  191. this._repaintMajorLine(x, orientation);
  192. }
  193. else {
  194. this._repaintMinorLine(x, orientation);
  195. }
  196. step.next();
  197. }
  198. // create a major label on the left when needed
  199. if (this.options.showMajorLabels) {
  200. var leftTime = this.body.util.toTime(0),
  201. leftText = step.getLabelMajor(leftTime),
  202. widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation
  203. if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
  204. this._repaintMajorText(0, leftText, orientation);
  205. }
  206. }
  207. // Cleanup leftover DOM elements from the redundant list
  208. util.forEach(this.dom.redundant, function (arr) {
  209. while (arr.length) {
  210. var elem = arr.pop();
  211. if (elem && elem.parentNode) {
  212. elem.parentNode.removeChild(elem);
  213. }
  214. }
  215. });
  216. };
  217. /**
  218. * Create a minor label for the axis at position x
  219. * @param {Number} x
  220. * @param {String} text
  221. * @param {String} orientation "top" or "bottom" (default)
  222. * @private
  223. */
  224. TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
  225. // reuse redundant label
  226. var label = this.dom.redundant.minorTexts.shift();
  227. if (!label) {
  228. // create new label
  229. var content = document.createTextNode('');
  230. label = document.createElement('div');
  231. label.appendChild(content);
  232. label.className = 'text minor';
  233. this.dom.foreground.appendChild(label);
  234. }
  235. this.dom.minorTexts.push(label);
  236. label.childNodes[0].nodeValue = text;
  237. label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
  238. label.style.left = x + 'px';
  239. //label.title = title; // TODO: this is a heavy operation
  240. };
  241. /**
  242. * Create a Major label for the axis at position x
  243. * @param {Number} x
  244. * @param {String} text
  245. * @param {String} orientation "top" or "bottom" (default)
  246. * @private
  247. */
  248. TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
  249. // reuse redundant label
  250. var label = this.dom.redundant.majorTexts.shift();
  251. if (!label) {
  252. // create label
  253. var content = document.createTextNode(text);
  254. label = document.createElement('div');
  255. label.className = 'text major';
  256. label.appendChild(content);
  257. this.dom.foreground.appendChild(label);
  258. }
  259. this.dom.majorTexts.push(label);
  260. label.childNodes[0].nodeValue = text;
  261. //label.title = title; // TODO: this is a heavy operation
  262. label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');
  263. label.style.left = x + 'px';
  264. };
  265. /**
  266. * Create a minor line for the axis at position x
  267. * @param {Number} x
  268. * @param {String} orientation "top" or "bottom" (default)
  269. * @private
  270. */
  271. TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
  272. // reuse redundant line
  273. var line = this.dom.redundant.minorLines.shift();
  274. if (!line) {
  275. // create vertical line
  276. line = document.createElement('div');
  277. line.className = 'grid vertical minor';
  278. this.dom.background.appendChild(line);
  279. }
  280. this.dom.minorLines.push(line);
  281. var props = this.props;
  282. if (orientation == 'top') {
  283. line.style.top = props.majorLabelHeight + 'px';
  284. }
  285. else {
  286. line.style.top = this.body.domProps.top.height + 'px';
  287. }
  288. line.style.height = props.minorLineHeight + 'px';
  289. line.style.left = (x - props.minorLineWidth / 2) + 'px';
  290. };
  291. /**
  292. * Create a Major line for the axis at position x
  293. * @param {Number} x
  294. * @param {String} orientation "top" or "bottom" (default)
  295. * @private
  296. */
  297. TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
  298. // reuse redundant line
  299. var line = this.dom.redundant.majorLines.shift();
  300. if (!line) {
  301. // create vertical line
  302. line = document.createElement('DIV');
  303. line.className = 'grid vertical major';
  304. this.dom.background.appendChild(line);
  305. }
  306. this.dom.majorLines.push(line);
  307. var props = this.props;
  308. if (orientation == 'top') {
  309. line.style.top = '0';
  310. }
  311. else {
  312. line.style.top = this.body.domProps.top.height + 'px';
  313. }
  314. line.style.left = (x - props.majorLineWidth / 2) + 'px';
  315. line.style.height = props.majorLineHeight + 'px';
  316. };
  317. /**
  318. * Determine the size of text on the axis (both major and minor axis).
  319. * The size is calculated only once and then cached in this.props.
  320. * @private
  321. */
  322. TimeAxis.prototype._calculateCharSize = function () {
  323. // Note: We calculate char size with every redraw. Size may change, for
  324. // example when any of the timelines parents had display:none for example.
  325. // determine the char width and height on the minor axis
  326. if (!this.dom.measureCharMinor) {
  327. this.dom.measureCharMinor = document.createElement('DIV');
  328. this.dom.measureCharMinor.className = 'text minor measure';
  329. this.dom.measureCharMinor.style.position = 'absolute';
  330. this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
  331. this.dom.foreground.appendChild(this.dom.measureCharMinor);
  332. }
  333. this.props.minorCharHeight = this.dom.measureCharMinor.clientHeight;
  334. this.props.minorCharWidth = this.dom.measureCharMinor.clientWidth;
  335. // determine the char width and height on the major axis
  336. if (!this.dom.measureCharMajor) {
  337. this.dom.measureCharMajor = document.createElement('DIV');
  338. this.dom.measureCharMajor.className = 'text major measure';
  339. this.dom.measureCharMajor.style.position = 'absolute';
  340. this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
  341. this.dom.foreground.appendChild(this.dom.measureCharMajor);
  342. }
  343. this.props.majorCharHeight = this.dom.measureCharMajor.clientHeight;
  344. this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;
  345. };
  346. /**
  347. * Snap a date to a rounded value.
  348. * The snap intervals are dependent on the current scale and step.
  349. * @param {Date} date the date to be snapped.
  350. * @return {Date} snappedDate
  351. */
  352. TimeAxis.prototype.snap = function(date) {
  353. return this.step.snap(date);
  354. };
  355. module.exports = TimeAxis;