08aa549607dfddc01e8b8e7579893e3e2f94387430ec81afdb5ec1c89dd9e23ee80e74c30518369d5912b9ab9b5a804180d05d545c69077cdce5bc33ef7bf3 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  4. var _element = require('./../../../helpers/dom/element');
  5. var _object = require('./../../../helpers/object');
  6. var _eventManager = require('./../../../eventManager');
  7. var _eventManager2 = _interopRequireDefault(_eventManager);
  8. var _viewportColumns = require('./calculator/viewportColumns');
  9. var _viewportColumns2 = _interopRequireDefault(_viewportColumns);
  10. var _viewportRows = require('./calculator/viewportRows');
  11. var _viewportRows2 = _interopRequireDefault(_viewportRows);
  12. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  13. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  14. /**
  15. * @class Viewport
  16. */
  17. var Viewport = function () {
  18. /**
  19. * @param wotInstance
  20. */
  21. function Viewport(wotInstance) {
  22. var _this = this;
  23. _classCallCheck(this, Viewport);
  24. this.wot = wotInstance;
  25. // legacy support
  26. this.instance = this.wot;
  27. this.oversizedRows = [];
  28. this.oversizedColumnHeaders = [];
  29. this.hasOversizedColumnHeadersMarked = {};
  30. this.clientHeight = 0;
  31. this.containerWidth = NaN;
  32. this.rowHeaderWidth = NaN;
  33. this.rowsVisibleCalculator = null;
  34. this.columnsVisibleCalculator = null;
  35. this.eventManager = new _eventManager2.default(this.wot);
  36. this.eventManager.addEventListener(window, 'resize', function () {
  37. _this.clientHeight = _this.getWorkspaceHeight();
  38. });
  39. }
  40. /**
  41. * @returns {number}
  42. */
  43. _createClass(Viewport, [{
  44. key: 'getWorkspaceHeight',
  45. value: function getWorkspaceHeight() {
  46. var trimmingContainer = this.instance.wtOverlays.topOverlay.trimmingContainer;
  47. var elemHeight = void 0;
  48. var height = 0;
  49. if (trimmingContainer === window) {
  50. height = document.documentElement.clientHeight;
  51. } else {
  52. elemHeight = (0, _element.outerHeight)(trimmingContainer);
  53. // returns height without DIV scrollbar
  54. height = elemHeight > 0 && trimmingContainer.clientHeight > 0 ? trimmingContainer.clientHeight : Infinity;
  55. }
  56. return height;
  57. }
  58. }, {
  59. key: 'getWorkspaceWidth',
  60. value: function getWorkspaceWidth() {
  61. var width = void 0;
  62. var totalColumns = this.wot.getSetting('totalColumns');
  63. var trimmingContainer = this.instance.wtOverlays.leftOverlay.trimmingContainer;
  64. var overflow = void 0;
  65. var stretchSetting = this.wot.getSetting('stretchH');
  66. var docOffsetWidth = document.documentElement.offsetWidth;
  67. var preventOverflow = this.wot.getSetting('preventOverflow');
  68. if (preventOverflow) {
  69. return (0, _element.outerWidth)(this.instance.wtTable.wtRootElement);
  70. }
  71. if (this.wot.getSetting('freezeOverlays')) {
  72. width = Math.min(docOffsetWidth - this.getWorkspaceOffset().left, docOffsetWidth);
  73. } else {
  74. width = Math.min(this.getContainerFillWidth(), docOffsetWidth - this.getWorkspaceOffset().left, docOffsetWidth);
  75. }
  76. if (trimmingContainer === window && totalColumns > 0 && this.sumColumnWidths(0, totalColumns - 1) > width) {
  77. // in case sum of column widths is higher than available stylesheet width, let's assume using the whole window
  78. // otherwise continue below, which will allow stretching
  79. // this is used in `scroll_window.html`
  80. // TODO test me
  81. return document.documentElement.clientWidth;
  82. }
  83. if (trimmingContainer !== window) {
  84. overflow = (0, _element.getStyle)(this.instance.wtOverlays.leftOverlay.trimmingContainer, 'overflow');
  85. if (overflow == 'scroll' || overflow == 'hidden' || overflow == 'auto') {
  86. // this is used in `scroll.html`
  87. // TODO test me
  88. return Math.max(width, trimmingContainer.clientWidth);
  89. }
  90. }
  91. if (stretchSetting === 'none' || !stretchSetting) {
  92. // if no stretching is used, return the maximum used workspace width
  93. return Math.max(width, (0, _element.outerWidth)(this.instance.wtTable.TABLE));
  94. }
  95. // if stretching is used, return the actual container width, so the columns can fit inside it
  96. return width;
  97. }
  98. /**
  99. * Checks if viewport has vertical scroll
  100. *
  101. * @returns {Boolean}
  102. */
  103. }, {
  104. key: 'hasVerticalScroll',
  105. value: function hasVerticalScroll() {
  106. return this.getWorkspaceActualHeight() > this.getWorkspaceHeight();
  107. }
  108. /**
  109. * Checks if viewport has horizontal scroll
  110. *
  111. * @returns {Boolean}
  112. */
  113. }, {
  114. key: 'hasHorizontalScroll',
  115. value: function hasHorizontalScroll() {
  116. return this.getWorkspaceActualWidth() > this.getWorkspaceWidth();
  117. }
  118. /**
  119. * @param from
  120. * @param length
  121. * @returns {Number}
  122. */
  123. }, {
  124. key: 'sumColumnWidths',
  125. value: function sumColumnWidths(from, length) {
  126. var sum = 0;
  127. while (from < length) {
  128. sum += this.wot.wtTable.getColumnWidth(from);
  129. from++;
  130. }
  131. return sum;
  132. }
  133. /**
  134. * @returns {Number}
  135. */
  136. }, {
  137. key: 'getContainerFillWidth',
  138. value: function getContainerFillWidth() {
  139. if (this.containerWidth) {
  140. return this.containerWidth;
  141. }
  142. var mainContainer = this.instance.wtTable.holder;
  143. var fillWidth = void 0;
  144. var dummyElement = void 0;
  145. dummyElement = document.createElement('div');
  146. dummyElement.style.width = '100%';
  147. dummyElement.style.height = '1px';
  148. mainContainer.appendChild(dummyElement);
  149. fillWidth = dummyElement.offsetWidth;
  150. this.containerWidth = fillWidth;
  151. mainContainer.removeChild(dummyElement);
  152. return fillWidth;
  153. }
  154. /**
  155. * @returns {Number}
  156. */
  157. }, {
  158. key: 'getWorkspaceOffset',
  159. value: function getWorkspaceOffset() {
  160. return (0, _element.offset)(this.wot.wtTable.TABLE);
  161. }
  162. /**
  163. * @returns {Number}
  164. */
  165. }, {
  166. key: 'getWorkspaceActualHeight',
  167. value: function getWorkspaceActualHeight() {
  168. return (0, _element.outerHeight)(this.wot.wtTable.TABLE);
  169. }
  170. /**
  171. * @returns {Number}
  172. */
  173. }, {
  174. key: 'getWorkspaceActualWidth',
  175. value: function getWorkspaceActualWidth() {
  176. return (0, _element.outerWidth)(this.wot.wtTable.TABLE) || (0, _element.outerWidth)(this.wot.wtTable.TBODY) || (0, _element.outerWidth)(this.wot.wtTable.THEAD); // IE8 reports 0 as <table> offsetWidth;
  177. }
  178. /**
  179. * @returns {Number}
  180. */
  181. }, {
  182. key: 'getColumnHeaderHeight',
  183. value: function getColumnHeaderHeight() {
  184. if (isNaN(this.columnHeaderHeight)) {
  185. this.columnHeaderHeight = (0, _element.outerHeight)(this.wot.wtTable.THEAD);
  186. }
  187. return this.columnHeaderHeight;
  188. }
  189. /**
  190. * @returns {Number}
  191. */
  192. }, {
  193. key: 'getViewportHeight',
  194. value: function getViewportHeight() {
  195. var containerHeight = this.getWorkspaceHeight();
  196. var columnHeaderHeight = void 0;
  197. if (containerHeight === Infinity) {
  198. return containerHeight;
  199. }
  200. columnHeaderHeight = this.getColumnHeaderHeight();
  201. if (columnHeaderHeight > 0) {
  202. containerHeight -= columnHeaderHeight;
  203. }
  204. return containerHeight;
  205. }
  206. /**
  207. * @returns {Number}
  208. */
  209. }, {
  210. key: 'getRowHeaderWidth',
  211. value: function getRowHeaderWidth() {
  212. var rowHeadersHeightSetting = this.instance.getSetting('rowHeaderWidth');
  213. var rowHeaders = this.instance.getSetting('rowHeaders');
  214. if (rowHeadersHeightSetting) {
  215. this.rowHeaderWidth = 0;
  216. for (var i = 0, len = rowHeaders.length; i < len; i++) {
  217. this.rowHeaderWidth += rowHeadersHeightSetting[i] || rowHeadersHeightSetting;
  218. }
  219. }
  220. if (this.wot.cloneSource) {
  221. return this.wot.cloneSource.wtViewport.getRowHeaderWidth();
  222. }
  223. if (isNaN(this.rowHeaderWidth)) {
  224. if (rowHeaders.length) {
  225. var TH = this.instance.wtTable.TABLE.querySelector('TH');
  226. this.rowHeaderWidth = 0;
  227. for (var _i = 0, _len = rowHeaders.length; _i < _len; _i++) {
  228. if (TH) {
  229. this.rowHeaderWidth += (0, _element.outerWidth)(TH);
  230. TH = TH.nextSibling;
  231. } else {
  232. // yes this is a cheat but it worked like that before, just taking assumption from CSS instead of measuring.
  233. // TODO: proper fix
  234. this.rowHeaderWidth += 50;
  235. }
  236. }
  237. } else {
  238. this.rowHeaderWidth = 0;
  239. }
  240. }
  241. this.rowHeaderWidth = this.instance.getSetting('onModifyRowHeaderWidth', this.rowHeaderWidth) || this.rowHeaderWidth;
  242. return this.rowHeaderWidth;
  243. }
  244. /**
  245. * @returns {Number}
  246. */
  247. }, {
  248. key: 'getViewportWidth',
  249. value: function getViewportWidth() {
  250. var containerWidth = this.getWorkspaceWidth();
  251. var rowHeaderWidth = void 0;
  252. if (containerWidth === Infinity) {
  253. return containerWidth;
  254. }
  255. rowHeaderWidth = this.getRowHeaderWidth();
  256. if (rowHeaderWidth > 0) {
  257. return containerWidth - rowHeaderWidth;
  258. }
  259. return containerWidth;
  260. }
  261. /**
  262. * Creates:
  263. * - rowsRenderCalculator (before draw, to qualify rows for rendering)
  264. * - rowsVisibleCalculator (after draw, to measure which rows are actually visible)
  265. *
  266. * @returns {ViewportRowsCalculator}
  267. */
  268. }, {
  269. key: 'createRowsCalculator',
  270. value: function createRowsCalculator() {
  271. var _this2 = this;
  272. var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  273. var height = void 0;
  274. var pos = void 0;
  275. var fixedRowsTop = void 0;
  276. var scrollbarHeight = void 0;
  277. var fixedRowsBottom = void 0;
  278. var fixedRowsHeight = void 0;
  279. var totalRows = void 0;
  280. this.rowHeaderWidth = NaN;
  281. if (this.wot.wtSettings.settings.renderAllRows) {
  282. height = Infinity;
  283. } else {
  284. height = this.getViewportHeight();
  285. }
  286. pos = this.wot.wtOverlays.topOverlay.getScrollPosition() - this.wot.wtOverlays.topOverlay.getTableParentOffset();
  287. if (pos < 0) {
  288. pos = 0;
  289. }
  290. fixedRowsTop = this.wot.getSetting('fixedRowsTop');
  291. fixedRowsBottom = this.wot.getSetting('fixedRowsBottom');
  292. totalRows = this.wot.getSetting('totalRows');
  293. if (fixedRowsTop) {
  294. fixedRowsHeight = this.wot.wtOverlays.topOverlay.sumCellSizes(0, fixedRowsTop);
  295. pos += fixedRowsHeight;
  296. height -= fixedRowsHeight;
  297. }
  298. if (fixedRowsBottom && this.wot.wtOverlays.bottomOverlay.clone) {
  299. fixedRowsHeight = this.wot.wtOverlays.bottomOverlay.sumCellSizes(totalRows - fixedRowsBottom, totalRows);
  300. height -= fixedRowsHeight;
  301. }
  302. if (this.wot.wtTable.holder.clientHeight === this.wot.wtTable.holder.offsetHeight) {
  303. scrollbarHeight = 0;
  304. } else {
  305. scrollbarHeight = (0, _element.getScrollbarWidth)();
  306. }
  307. return new _viewportRows2.default(height, pos, this.wot.getSetting('totalRows'), function (sourceRow) {
  308. return _this2.wot.wtTable.getRowHeight(sourceRow);
  309. }, visible ? null : this.wot.wtSettings.settings.viewportRowCalculatorOverride, visible, scrollbarHeight);
  310. }
  311. /**
  312. * Creates:
  313. * - columnsRenderCalculator (before draw, to qualify columns for rendering)
  314. * - columnsVisibleCalculator (after draw, to measure which columns are actually visible)
  315. *
  316. * @returns {ViewportRowsCalculator}
  317. */
  318. }, {
  319. key: 'createColumnsCalculator',
  320. value: function createColumnsCalculator() {
  321. var _this3 = this;
  322. var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  323. var width = this.getViewportWidth();
  324. var pos = void 0;
  325. var fixedColumnsLeft = void 0;
  326. this.columnHeaderHeight = NaN;
  327. pos = this.wot.wtOverlays.leftOverlay.getScrollPosition() - this.wot.wtOverlays.leftOverlay.getTableParentOffset();
  328. if (pos < 0) {
  329. pos = 0;
  330. }
  331. fixedColumnsLeft = this.wot.getSetting('fixedColumnsLeft');
  332. if (fixedColumnsLeft) {
  333. var fixedColumnsWidth = this.wot.wtOverlays.leftOverlay.sumCellSizes(0, fixedColumnsLeft);
  334. pos += fixedColumnsWidth;
  335. width -= fixedColumnsWidth;
  336. }
  337. if (this.wot.wtTable.holder.clientWidth !== this.wot.wtTable.holder.offsetWidth) {
  338. width -= (0, _element.getScrollbarWidth)();
  339. }
  340. return new _viewportColumns2.default(width, pos, this.wot.getSetting('totalColumns'), function (sourceCol) {
  341. return _this3.wot.wtTable.getColumnWidth(sourceCol);
  342. }, visible ? null : this.wot.wtSettings.settings.viewportColumnCalculatorOverride, visible, this.wot.getSetting('stretchH'), function (stretchedWidth, column) {
  343. return _this3.wot.getSetting('onBeforeStretchingColumnWidth', stretchedWidth, column);
  344. });
  345. }
  346. /**
  347. * Creates rowsRenderCalculator and columnsRenderCalculator (before draw, to determine what rows and
  348. * cols should be rendered)
  349. *
  350. * @param fastDraw {Boolean} If `true`, will try to avoid full redraw and only update the border positions.
  351. * If `false` or `undefined`, will perform a full redraw
  352. * @returns fastDraw {Boolean} The fastDraw value, possibly modified
  353. */
  354. }, {
  355. key: 'createRenderCalculators',
  356. value: function createRenderCalculators() {
  357. var fastDraw = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  358. if (fastDraw) {
  359. var proposedRowsVisibleCalculator = this.createRowsCalculator(true);
  360. var proposedColumnsVisibleCalculator = this.createColumnsCalculator(true);
  361. if (!(this.areAllProposedVisibleRowsAlreadyRendered(proposedRowsVisibleCalculator) && this.areAllProposedVisibleColumnsAlreadyRendered(proposedColumnsVisibleCalculator))) {
  362. fastDraw = false;
  363. }
  364. }
  365. if (!fastDraw) {
  366. this.rowsRenderCalculator = this.createRowsCalculator();
  367. this.columnsRenderCalculator = this.createColumnsCalculator();
  368. }
  369. // delete temporarily to make sure that renderers always use rowsRenderCalculator, not rowsVisibleCalculator
  370. this.rowsVisibleCalculator = null;
  371. this.columnsVisibleCalculator = null;
  372. return fastDraw;
  373. }
  374. /**
  375. * Creates rowsVisibleCalculator and columnsVisibleCalculator (after draw, to determine what are
  376. * the actually visible rows and columns)
  377. */
  378. }, {
  379. key: 'createVisibleCalculators',
  380. value: function createVisibleCalculators() {
  381. this.rowsVisibleCalculator = this.createRowsCalculator(true);
  382. this.columnsVisibleCalculator = this.createColumnsCalculator(true);
  383. }
  384. /**
  385. * Returns information whether proposedRowsVisibleCalculator viewport
  386. * is contained inside rows rendered in previous draw (cached in rowsRenderCalculator)
  387. *
  388. * @param {Object} proposedRowsVisibleCalculator
  389. * @returns {Boolean} Returns `true` if all proposed visible rows are already rendered (meaning: redraw is not needed).
  390. * Returns `false` if at least one proposed visible row is not already rendered (meaning: redraw is needed)
  391. */
  392. }, {
  393. key: 'areAllProposedVisibleRowsAlreadyRendered',
  394. value: function areAllProposedVisibleRowsAlreadyRendered(proposedRowsVisibleCalculator) {
  395. if (this.rowsVisibleCalculator) {
  396. if (proposedRowsVisibleCalculator.startRow < this.rowsRenderCalculator.startRow || proposedRowsVisibleCalculator.startRow === this.rowsRenderCalculator.startRow && proposedRowsVisibleCalculator.startRow > 0) {
  397. return false;
  398. } else if (proposedRowsVisibleCalculator.endRow > this.rowsRenderCalculator.endRow || proposedRowsVisibleCalculator.endRow === this.rowsRenderCalculator.endRow && proposedRowsVisibleCalculator.endRow < this.wot.getSetting('totalRows') - 1) {
  399. return false;
  400. }
  401. return true;
  402. }
  403. return false;
  404. }
  405. /**
  406. * Returns information whether proposedColumnsVisibleCalculator viewport
  407. * is contained inside column rendered in previous draw (cached in columnsRenderCalculator)
  408. *
  409. * @param {Object} proposedColumnsVisibleCalculator
  410. * @returns {Boolean} Returns `true` if all proposed visible columns are already rendered (meaning: redraw is not needed).
  411. * Returns `false` if at least one proposed visible column is not already rendered (meaning: redraw is needed)
  412. */
  413. }, {
  414. key: 'areAllProposedVisibleColumnsAlreadyRendered',
  415. value: function areAllProposedVisibleColumnsAlreadyRendered(proposedColumnsVisibleCalculator) {
  416. if (this.columnsVisibleCalculator) {
  417. if (proposedColumnsVisibleCalculator.startColumn < this.columnsRenderCalculator.startColumn || proposedColumnsVisibleCalculator.startColumn === this.columnsRenderCalculator.startColumn && proposedColumnsVisibleCalculator.startColumn > 0) {
  418. return false;
  419. } else if (proposedColumnsVisibleCalculator.endColumn > this.columnsRenderCalculator.endColumn || proposedColumnsVisibleCalculator.endColumn === this.columnsRenderCalculator.endColumn && proposedColumnsVisibleCalculator.endColumn < this.wot.getSetting('totalColumns') - 1) {
  420. return false;
  421. }
  422. return true;
  423. }
  424. return false;
  425. }
  426. /**
  427. * Resets values in keys of the hasOversizedColumnHeadersMarked object after updateSettings.
  428. */
  429. }, {
  430. key: 'resetHasOversizedColumnHeadersMarked',
  431. value: function resetHasOversizedColumnHeadersMarked() {
  432. (0, _object.objectEach)(this.hasOversizedColumnHeadersMarked, function (value, key, object) {
  433. object[key] = void 0;
  434. });
  435. }
  436. }]);
  437. return Viewport;
  438. }();
  439. exports.default = Viewport;