6fcafee0782757bdca4aa6d0d985e296be3c6569bbc5f1e26bb72b643069f2544c1882335509fb30d2cbdc60661fa9b6b78205d5a3cc830dc79f413926d13f 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. import BasePlugin from './../_base.js';
  2. import {addClass, hasClass, removeClass, outerHeight} from './../../helpers/dom/element';
  3. import EventManager from './../../eventManager';
  4. import {pageX, pageY} from './../../helpers/dom/event';
  5. import {arrayEach} from './../../helpers/array';
  6. import {rangeEach} from './../../helpers/number';
  7. import {registerPlugin} from './../../plugins';
  8. // Developer note! Whenever you make a change in this file, make an analogous change in manualRowResize.js
  9. /**
  10. * @description
  11. * ManualColumnResize Plugin.
  12. *
  13. * Has 2 UI components:
  14. * - handle - the draggable element that sets the desired width of the column.
  15. * - guide - the helper guide that shows the desired width as a vertical guide.
  16. *
  17. * @plugin ManualColumnResize
  18. */
  19. class ManualColumnResize extends BasePlugin {
  20. constructor(hotInstance) {
  21. super(hotInstance);
  22. this.currentTH = null;
  23. this.currentCol = null;
  24. this.selectedCols = [];
  25. this.currentWidth = null;
  26. this.newSize = null;
  27. this.startY = null;
  28. this.startWidth = null;
  29. this.startOffset = null;
  30. this.handle = document.createElement('DIV');
  31. this.guide = document.createElement('DIV');
  32. this.eventManager = new EventManager(this);
  33. this.pressed = null;
  34. this.dblclick = 0;
  35. this.autoresizeTimeout = null;
  36. this.manualColumnWidths = [];
  37. addClass(this.handle, 'manualColumnResizer');
  38. addClass(this.guide, 'manualColumnResizerGuide');
  39. }
  40. /**
  41. * Check if the plugin is enabled in the handsontable settings.
  42. *
  43. * @returns {Boolean}
  44. */
  45. isEnabled() {
  46. return this.hot.getSettings().manualColumnResize;
  47. }
  48. /**
  49. * Enable plugin for this Handsontable instance.
  50. */
  51. enablePlugin() {
  52. if (this.enabled) {
  53. return;
  54. }
  55. this.manualColumnWidths = [];
  56. let initialColumnWidth = this.hot.getSettings().manualColumnResize;
  57. let loadedManualColumnWidths = this.loadManualColumnWidths();
  58. this.addHook('modifyColWidth', (width, col) => this.onModifyColWidth(width, col));
  59. this.addHook('beforeStretchingColumnWidth', (stretchedWidth, column) => this.onBeforeStretchingColumnWidth(stretchedWidth, column));
  60. this.addHook('beforeColumnResize', (currentColumn, newSize, isDoubleClick) => this.onBeforeColumnResize(currentColumn, newSize, isDoubleClick));
  61. if (typeof loadedManualColumnWidths != 'undefined') {
  62. this.manualColumnWidths = loadedManualColumnWidths;
  63. } else if (Array.isArray(initialColumnWidth)) {
  64. this.manualColumnWidths = initialColumnWidth;
  65. } else {
  66. this.manualColumnWidths = [];
  67. }
  68. // Handsontable.hooks.register('beforeColumnResize');
  69. // Handsontable.hooks.register('afterColumnResize');
  70. this.bindEvents();
  71. super.enablePlugin();
  72. }
  73. /**
  74. * Updates the plugin to use the latest options you have specified.
  75. */
  76. updatePlugin() {
  77. let initialColumnWidth = this.hot.getSettings().manualColumnResize;
  78. if (Array.isArray(initialColumnWidth)) {
  79. this.manualColumnWidths = initialColumnWidth;
  80. } else if (!initialColumnWidth) {
  81. this.manualColumnWidths = [];
  82. }
  83. }
  84. /**
  85. * Disable plugin for this Handsontable instance.
  86. */
  87. disablePlugin() {
  88. super.disablePlugin();
  89. }
  90. /**
  91. * Save the current sizes using the persistentState plugin.
  92. */
  93. saveManualColumnWidths() {
  94. this.hot.runHooks('persistentStateSave', 'manualColumnWidths', this.manualColumnWidths);
  95. }
  96. /**
  97. * Load the previously saved sizes using the persistentState plugin.
  98. *
  99. * @returns {Array}
  100. */
  101. loadManualColumnWidths() {
  102. let storedState = {};
  103. this.hot.runHooks('persistentStateLoad', 'manualColumnWidths', storedState);
  104. return storedState.value;
  105. }
  106. /**
  107. * Set the resize handle position.
  108. *
  109. * @param {HTMLCellElement} TH TH HTML element.
  110. */
  111. setupHandlePosition(TH) {
  112. if (!TH.parentNode) {
  113. return false;
  114. }
  115. this.currentTH = TH;
  116. let col = this.hot.view.wt.wtTable.getCoords(TH).col; // getCoords returns CellCoords
  117. let headerHeight = outerHeight(this.currentTH);
  118. if (col >= 0) { // if not col header
  119. let box = this.currentTH.getBoundingClientRect();
  120. this.currentCol = col;
  121. this.selectedCols = [];
  122. if (this.hot.selection.isSelected() && this.hot.selection.selectedHeader.cols) {
  123. let {from, to} = this.hot.getSelectedRange();
  124. let start = from.col;
  125. let end = to.col;
  126. if (start >= end) {
  127. start = to.col;
  128. end = from.col;
  129. }
  130. if (this.currentCol >= start && this.currentCol <= end) {
  131. rangeEach(start, end, (i) => this.selectedCols.push(i));
  132. } else {
  133. this.selectedCols.push(this.currentCol);
  134. }
  135. } else {
  136. this.selectedCols.push(this.currentCol);
  137. }
  138. this.startOffset = box.left - 6;
  139. this.startWidth = parseInt(box.width, 10);
  140. this.handle.style.top = `${box.top}px`;
  141. this.handle.style.left = `${this.startOffset + this.startWidth}px`;
  142. this.handle.style.height = `${headerHeight}px`;
  143. this.hot.rootElement.appendChild(this.handle);
  144. }
  145. }
  146. /**
  147. * Refresh the resize handle position.
  148. */
  149. refreshHandlePosition() {
  150. this.handle.style.left = `${this.startOffset + this.currentWidth}px`;
  151. }
  152. /**
  153. * Set the resize guide position.
  154. */
  155. setupGuidePosition() {
  156. let handleHeight = parseInt(outerHeight(this.handle), 10);
  157. let handleBottomPosition = parseInt(this.handle.style.top, 10) + handleHeight;
  158. let maximumVisibleElementHeight = parseInt(this.hot.view.maximumVisibleElementHeight(0), 10);
  159. addClass(this.handle, 'active');
  160. addClass(this.guide, 'active');
  161. this.guide.style.top = `${handleBottomPosition}px`;
  162. this.guide.style.left = this.handle.style.left;
  163. this.guide.style.height = `${maximumVisibleElementHeight - handleHeight}px`;
  164. this.hot.rootElement.appendChild(this.guide);
  165. }
  166. /**
  167. * Refresh the resize guide position.
  168. */
  169. refreshGuidePosition() {
  170. this.guide.style.left = this.handle.style.left;
  171. }
  172. /**
  173. * Hide both the resize handle and resize guide.
  174. */
  175. hideHandleAndGuide() {
  176. removeClass(this.handle, 'active');
  177. removeClass(this.guide, 'active');
  178. }
  179. /**
  180. * Check if provided element is considered a column header.
  181. *
  182. * @param {HTMLElement} element HTML element.
  183. * @returns {Boolean}
  184. */
  185. checkIfColumnHeader(element) {
  186. if (element != this.hot.rootElement) {
  187. let parent = element.parentNode;
  188. if (parent.tagName === 'THEAD') {
  189. return true;
  190. }
  191. return this.checkIfColumnHeader(parent);
  192. }
  193. return false;
  194. }
  195. /**
  196. * Get the TH element from the provided element.
  197. *
  198. * @param {HTMLElement} element HTML element.
  199. * @returns {HTMLElement}
  200. */
  201. getTHFromTargetElement(element) {
  202. if (element.tagName != 'TABLE') {
  203. if (element.tagName == 'TH') {
  204. return element;
  205. }
  206. return this.getTHFromTargetElement(element.parentNode);
  207. }
  208. return null;
  209. }
  210. /**
  211. * 'mouseover' event callback - set the handle position.
  212. *
  213. * @private
  214. * @param {MouseEvent} event
  215. */
  216. onMouseOver(event) {
  217. if (this.checkIfColumnHeader(event.target)) {
  218. let th = this.getTHFromTargetElement(event.target);
  219. if (!th) {
  220. return;
  221. }
  222. let colspan = th.getAttribute('colspan');
  223. if (th && (colspan === null || colspan === 1)) {
  224. if (!this.pressed) {
  225. this.setupHandlePosition(th);
  226. }
  227. }
  228. }
  229. }
  230. /**
  231. * Auto-size row after doubleclick - callback.
  232. *
  233. * @private
  234. */
  235. afterMouseDownTimeout() {
  236. const render = () => {
  237. this.hot.forceFullRender = true;
  238. this.hot.view.render(); // updates all
  239. this.hot.view.wt.wtOverlays.adjustElementsSize(true);
  240. };
  241. const resize = (selectedCol, forceRender) => {
  242. let hookNewSize = this.hot.runHooks('beforeColumnResize', selectedCol, this.newSize, true);
  243. if (hookNewSize !== void 0) {
  244. this.newSize = hookNewSize;
  245. }
  246. if (this.hot.getSettings().stretchH === 'all') {
  247. this.clearManualSize(selectedCol);
  248. } else {
  249. this.setManualSize(selectedCol, this.newSize); // double click sets by auto row size plugin
  250. }
  251. if (forceRender) {
  252. render();
  253. }
  254. this.saveManualColumnWidths();
  255. this.hot.runHooks('afterColumnResize', selectedCol, this.newSize, true);
  256. };
  257. if (this.dblclick >= 2) {
  258. let selectedColsLength = this.selectedCols.length;
  259. if (selectedColsLength > 1) {
  260. arrayEach(this.selectedCols, (selectedCol) => {
  261. resize(selectedCol);
  262. });
  263. render();
  264. } else {
  265. arrayEach(this.selectedCols, (selectedCol) => {
  266. resize(selectedCol, true);
  267. });
  268. }
  269. }
  270. this.dblclick = 0;
  271. this.autoresizeTimeout = null;
  272. }
  273. /**
  274. * 'mousedown' event callback.
  275. *
  276. * @private
  277. * @param {MouseEvent} e
  278. */
  279. onMouseDown(event) {
  280. if (hasClass(event.target, 'manualColumnResizer')) {
  281. this.setupGuidePosition();
  282. this.pressed = this.hot;
  283. if (this.autoresizeTimeout === null) {
  284. this.autoresizeTimeout = setTimeout(() => this.afterMouseDownTimeout(), 500);
  285. this.hot._registerTimeout(this.autoresizeTimeout);
  286. }
  287. this.dblclick++;
  288. this.startX = pageX(event);
  289. this.newSize = this.startWidth;
  290. }
  291. }
  292. /**
  293. * 'mousemove' event callback - refresh the handle and guide positions, cache the new column width.
  294. *
  295. * @private
  296. * @param {MouseEvent} e
  297. */
  298. onMouseMove(event) {
  299. if (this.pressed) {
  300. this.currentWidth = this.startWidth + (pageX(event) - this.startX);
  301. arrayEach(this.selectedCols, (selectedCol) => {
  302. this.newSize = this.setManualSize(selectedCol, this.currentWidth);
  303. });
  304. this.refreshHandlePosition();
  305. this.refreshGuidePosition();
  306. }
  307. }
  308. /**
  309. * 'mouseup' event callback - apply the column resizing.
  310. *
  311. * @private
  312. * @param {MouseEvent} e
  313. */
  314. onMouseUp(event) {
  315. const render = () => {
  316. this.hot.forceFullRender = true;
  317. this.hot.view.render(); // updates all
  318. this.hot.view.wt.wtOverlays.adjustElementsSize(true);
  319. };
  320. const resize = (selectedCol, forceRender) => {
  321. this.hot.runHooks('beforeColumnResize', selectedCol, this.newSize);
  322. if (forceRender) {
  323. render();
  324. }
  325. this.saveManualColumnWidths();
  326. this.hot.runHooks('afterColumnResize', selectedCol, this.newSize);
  327. };
  328. if (this.pressed) {
  329. this.hideHandleAndGuide();
  330. this.pressed = false;
  331. if (this.newSize != this.startWidth) {
  332. let selectedColsLength = this.selectedCols.length;
  333. if (selectedColsLength > 1) {
  334. arrayEach(this.selectedCols, (selectedCol) => {
  335. resize(selectedCol);
  336. });
  337. render();
  338. } else {
  339. arrayEach(this.selectedCols, (selectedCol) => {
  340. resize(selectedCol, true);
  341. });
  342. }
  343. }
  344. this.setupHandlePosition(this.currentTH);
  345. }
  346. }
  347. /**
  348. * Bind the mouse events.
  349. *
  350. * @private
  351. */
  352. bindEvents() {
  353. this.eventManager.addEventListener(this.hot.rootElement, 'mouseover', (e) => this.onMouseOver(e));
  354. this.eventManager.addEventListener(this.hot.rootElement, 'mousedown', (e) => this.onMouseDown(e));
  355. this.eventManager.addEventListener(window, 'mousemove', (e) => this.onMouseMove(e));
  356. this.eventManager.addEventListener(window, 'mouseup', (e) => this.onMouseUp(e));
  357. }
  358. /**
  359. * Cache the current column width.
  360. *
  361. * @param {Number} column Column index.
  362. * @param {Number} width Column width.
  363. * @returns {Number}
  364. */
  365. setManualSize(column, width) {
  366. width = Math.max(width, 20);
  367. /**
  368. * We need to run col through modifyCol hook, in case the order of displayed columns is different than the order
  369. * in data source. For instance, this order can be modified by manualColumnMove plugin.
  370. */
  371. column = this.hot.runHooks('modifyCol', column);
  372. this.manualColumnWidths[column] = width;
  373. return width;
  374. }
  375. /**
  376. * Clear cache for the current column index.
  377. *
  378. * @param {Number} column Column index.
  379. */
  380. clearManualSize(column) {
  381. column = this.hot.runHooks('modifyCol', column);
  382. this.manualColumnWidths[column] = void 0;
  383. }
  384. /**
  385. * Modify the provided column width, based on the plugin settings
  386. *
  387. * @private
  388. * @param {Number} width Column width.
  389. * @param {Number} column Column index.
  390. * @returns {Number}
  391. */
  392. onModifyColWidth(width, column) {
  393. if (this.enabled) {
  394. column = this.hot.runHooks('modifyCol', column);
  395. if (this.hot.getSettings().manualColumnResize && this.manualColumnWidths[column]) {
  396. return this.manualColumnWidths[column];
  397. }
  398. }
  399. return width;
  400. }
  401. /**
  402. * Modify the provided column stretched width. This hook decides if specified column should be stretched or not.
  403. *
  404. * @private
  405. * @param {Number} stretchedWidth Stretched width.
  406. * @param {Number} column Column index.
  407. * @returns {Number}
  408. */
  409. onBeforeStretchingColumnWidth(stretchedWidth, column) {
  410. let width = this.manualColumnWidths[column];
  411. if (width === void 0) {
  412. width = stretchedWidth;
  413. }
  414. return width;
  415. }
  416. /**
  417. * `beforeColumnResize` hook callback.
  418. *
  419. * @private
  420. * @param {Number} currentColumn Index of the resized column.
  421. * @param {Number} newSize Calculated new column width.
  422. * @param {Boolean} isDoubleClick Flag that determines whether there was a double-click.
  423. */
  424. onBeforeColumnResize() {
  425. // clear the header height cache information
  426. this.hot.view.wt.wtViewport.hasOversizedColumnHeadersMarked = {};
  427. }
  428. }
  429. registerPlugin('manualColumnResize', ManualColumnResize);
  430. export default ManualColumnResize;