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.

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