manualColumnMove.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873
  1. 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; }; }();
  2. var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
  3. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  5. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  6. import BasePlugin from './../_base.js';
  7. import Hooks from './../../pluginHooks';
  8. import { arrayEach } from './../../helpers/array';
  9. import { addClass, removeClass, offset } from './../../helpers/dom/element';
  10. import { rangeEach } from './../../helpers/number';
  11. import EventManager from './../../eventManager';
  12. import { registerPlugin } from './../../plugins';
  13. import ColumnsMapper from './columnsMapper';
  14. import BacklightUI from './ui/backlight';
  15. import GuidelineUI from './ui/guideline';
  16. import { CellCoords } from './../../3rdparty/walkontable/src';
  17. Hooks.getSingleton().register('beforeColumnMove');
  18. Hooks.getSingleton().register('afterColumnMove');
  19. Hooks.getSingleton().register('unmodifyCol');
  20. var privatePool = new WeakMap();
  21. var CSS_PLUGIN = 'ht__manualColumnMove';
  22. var CSS_SHOW_UI = 'show-ui';
  23. var CSS_ON_MOVING = 'on-moving--columns';
  24. var CSS_AFTER_SELECTION = 'after-selection--columns';
  25. /**
  26. * @plugin ManualColumnMove
  27. *
  28. * @description
  29. * This plugin allows to change columns order.
  30. *
  31. * API:
  32. * - moveColumn - move single column to the new position.
  33. * - moveColumns - move many columns (as an array of indexes) to the new position.
  34. *
  35. * If you want apply visual changes, you have to call manually the render() method on the instance of Handsontable.
  36. *
  37. * UI components:
  38. * - backlight - highlight of selected columns.
  39. * - guideline - line which shows where rows has been moved.
  40. *
  41. * @class ManualColumnMove
  42. * @plugin ManualColumnMove
  43. */
  44. var ManualColumnMove = function (_BasePlugin) {
  45. _inherits(ManualColumnMove, _BasePlugin);
  46. function ManualColumnMove(hotInstance) {
  47. _classCallCheck(this, ManualColumnMove);
  48. /**
  49. * Set up WeakMap of plugin to sharing private parameters;
  50. */
  51. var _this = _possibleConstructorReturn(this, (ManualColumnMove.__proto__ || Object.getPrototypeOf(ManualColumnMove)).call(this, hotInstance));
  52. privatePool.set(_this, {
  53. columnsToMove: [],
  54. countCols: 0,
  55. fixedColumns: 0,
  56. pressed: void 0,
  57. disallowMoving: void 0,
  58. target: {
  59. eventPageX: void 0,
  60. coords: void 0,
  61. TD: void 0,
  62. col: void 0
  63. }
  64. });
  65. /**
  66. * List of last removed row indexes.
  67. *
  68. * @type {Array}
  69. */
  70. _this.removedColumns = [];
  71. /**
  72. * Object containing visual row indexes mapped to data source indexes.
  73. *
  74. * @type {RowsMapper}
  75. */
  76. _this.columnsMapper = new ColumnsMapper(_this);
  77. /**
  78. * Event Manager object.
  79. *
  80. * @type {Object}
  81. */
  82. _this.eventManager = new EventManager(_this);
  83. /**
  84. * Backlight UI object.
  85. *
  86. * @type {Object}
  87. */
  88. _this.backlight = new BacklightUI(hotInstance);
  89. /**
  90. * Guideline UI object.
  91. *
  92. * @type {Object}
  93. */
  94. _this.guideline = new GuidelineUI(hotInstance);
  95. return _this;
  96. }
  97. /**
  98. * Check if plugin is enabled.
  99. *
  100. * @returns {Boolean}
  101. */
  102. _createClass(ManualColumnMove, [{
  103. key: 'isEnabled',
  104. value: function isEnabled() {
  105. return !!this.hot.getSettings().manualColumnMove;
  106. }
  107. /**
  108. * Enable the plugin.
  109. */
  110. }, {
  111. key: 'enablePlugin',
  112. value: function enablePlugin() {
  113. var _this2 = this;
  114. if (this.enabled) {
  115. return;
  116. }
  117. this.addHook('beforeOnCellMouseDown', function (event, coords, TD, blockCalculations) {
  118. return _this2.onBeforeOnCellMouseDown(event, coords, TD, blockCalculations);
  119. });
  120. this.addHook('beforeOnCellMouseOver', function (event, coords, TD, blockCalculations) {
  121. return _this2.onBeforeOnCellMouseOver(event, coords, TD, blockCalculations);
  122. });
  123. this.addHook('afterScrollVertically', function () {
  124. return _this2.onAfterScrollVertically();
  125. });
  126. this.addHook('modifyCol', function (row, source) {
  127. return _this2.onModifyCol(row, source);
  128. });
  129. this.addHook('beforeRemoveCol', function (index, amount) {
  130. return _this2.onBeforeRemoveCol(index, amount);
  131. });
  132. this.addHook('afterRemoveCol', function (index, amount) {
  133. return _this2.onAfterRemoveCol(index, amount);
  134. });
  135. this.addHook('afterCreateCol', function (index, amount) {
  136. return _this2.onAfterCreateCol(index, amount);
  137. });
  138. this.addHook('afterLoadData', function (firstTime) {
  139. return _this2.onAfterLoadData(firstTime);
  140. });
  141. this.addHook('unmodifyCol', function (column) {
  142. return _this2.onUnmodifyCol(column);
  143. });
  144. this.registerEvents();
  145. // TODO: move adding plugin classname to BasePlugin.
  146. addClass(this.hot.rootElement, CSS_PLUGIN);
  147. _get(ManualColumnMove.prototype.__proto__ || Object.getPrototypeOf(ManualColumnMove.prototype), 'enablePlugin', this).call(this);
  148. }
  149. /**
  150. * Updates the plugin to use the latest options you have specified.
  151. */
  152. }, {
  153. key: 'updatePlugin',
  154. value: function updatePlugin() {
  155. this.disablePlugin();
  156. this.enablePlugin();
  157. this.onAfterPluginsInitialized();
  158. _get(ManualColumnMove.prototype.__proto__ || Object.getPrototypeOf(ManualColumnMove.prototype), 'updatePlugin', this).call(this);
  159. }
  160. /**
  161. * Disable plugin for this Handsontable instance.
  162. */
  163. }, {
  164. key: 'disablePlugin',
  165. value: function disablePlugin() {
  166. var pluginSettings = this.hot.getSettings().manualColumnMove;
  167. if (Array.isArray(pluginSettings)) {
  168. this.columnsMapper.clearMap();
  169. }
  170. removeClass(this.hot.rootElement, CSS_PLUGIN);
  171. this.unregisterEvents();
  172. this.backlight.destroy();
  173. this.guideline.destroy();
  174. _get(ManualColumnMove.prototype.__proto__ || Object.getPrototypeOf(ManualColumnMove.prototype), 'disablePlugin', this).call(this);
  175. }
  176. /**
  177. * Move a single column.
  178. *
  179. * @param {Number} column Visual column index to be moved.
  180. * @param {Number} target Visual column index being a target for the moved column.
  181. */
  182. }, {
  183. key: 'moveColumn',
  184. value: function moveColumn(column, target) {
  185. this.moveColumns([column], target);
  186. }
  187. /**
  188. * Move multiple columns.
  189. *
  190. * @param {Array} columns Array of visual column indexes to be moved.
  191. * @param {Number} target Visual column index being a target for the moved columns.
  192. */
  193. }, {
  194. key: 'moveColumns',
  195. value: function moveColumns(columns, target) {
  196. var _this3 = this;
  197. var priv = privatePool.get(this);
  198. var beforeColumnHook = this.hot.runHooks('beforeColumnMove', columns, target);
  199. priv.disallowMoving = !beforeColumnHook;
  200. if (beforeColumnHook !== false) {
  201. // first we need to rewrite an visual indexes to logical for save reference after move
  202. arrayEach(columns, function (column, index, array) {
  203. array[index] = _this3.columnsMapper.getValueByIndex(column);
  204. });
  205. // next, when we have got an logical indexes, we can move columns
  206. arrayEach(columns, function (column, index) {
  207. var actualPosition = _this3.columnsMapper.getIndexByValue(column);
  208. if (actualPosition !== target) {
  209. _this3.columnsMapper.moveColumn(actualPosition, target + index);
  210. }
  211. });
  212. // after moving we have to clear columnsMapper from null entries
  213. this.columnsMapper.clearNull();
  214. }
  215. this.hot.runHooks('afterColumnMove', columns, target);
  216. }
  217. /**
  218. * Correct the cell selection after the move action. Fired only when action was made with a mouse.
  219. * That means that changing the column order using the API won't correct the selection.
  220. *
  221. * @private
  222. * @param {Number} startColumn Visual column index for the start of the selection.
  223. * @param {Number} endColumn Visual column index for the end of the selection.
  224. */
  225. }, {
  226. key: 'changeSelection',
  227. value: function changeSelection(startColumn, endColumn) {
  228. var selection = this.hot.selection;
  229. var lastRowIndex = this.hot.countRows() - 1;
  230. selection.setRangeStartOnly(new CellCoords(0, startColumn));
  231. selection.setRangeEnd(new CellCoords(lastRowIndex, endColumn), false);
  232. }
  233. /**
  234. * Get the sum of the widths of columns in the provided range.
  235. *
  236. * @private
  237. * @param {Number} from Visual column index.
  238. * @param {Number} to Visual column index.
  239. * @returns {Number}
  240. */
  241. }, {
  242. key: 'getColumnsWidth',
  243. value: function getColumnsWidth(from, to) {
  244. var width = 0;
  245. for (var i = from; i < to; i++) {
  246. var columnWidth = 0;
  247. if (i < 0) {
  248. columnWidth = this.hot.view.wt.wtTable.getColumnWidth(i) || 0;
  249. } else {
  250. columnWidth = this.hot.view.wt.wtTable.getStretchedColumnWidth(i) || 0;
  251. }
  252. width += columnWidth;
  253. }
  254. return width;
  255. }
  256. /**
  257. * Load initial settings when persistent state is saved or when plugin was initialized as an array.
  258. *
  259. * @private
  260. */
  261. }, {
  262. key: 'initialSettings',
  263. value: function initialSettings() {
  264. var pluginSettings = this.hot.getSettings().manualColumnMove;
  265. if (Array.isArray(pluginSettings)) {
  266. this.moveColumns(pluginSettings, 0);
  267. } else if (pluginSettings !== void 0) {
  268. this.persistentStateLoad();
  269. }
  270. }
  271. /**
  272. * Check if the provided column is in the fixedColumnsLeft section.
  273. *
  274. * @private
  275. * @param {Number} column Visual column index to check.
  276. * @returns {Boolean}
  277. */
  278. }, {
  279. key: 'isFixedColumnsLeft',
  280. value: function isFixedColumnsLeft(column) {
  281. return column < this.hot.getSettings().fixedColumnsLeft;
  282. }
  283. /**
  284. * Save the manual column positions to the persistent state.
  285. *
  286. * @private
  287. */
  288. }, {
  289. key: 'persistentStateSave',
  290. value: function persistentStateSave() {
  291. this.hot.runHooks('persistentStateSave', 'manualColumnMove', this.columnsMapper._arrayMap);
  292. }
  293. /**
  294. * Load the manual column positions from the persistent state.
  295. *
  296. * @private
  297. */
  298. }, {
  299. key: 'persistentStateLoad',
  300. value: function persistentStateLoad() {
  301. var storedState = {};
  302. this.hot.runHooks('persistentStateLoad', 'manualColumnMove', storedState);
  303. if (storedState.value) {
  304. this.columnsMapper._arrayMap = storedState.value;
  305. }
  306. }
  307. /**
  308. * Prepare array of indexes based on actual selection.
  309. *
  310. * @private
  311. * @returns {Array}
  312. */
  313. }, {
  314. key: 'prepareColumnsToMoving',
  315. value: function prepareColumnsToMoving(start, end) {
  316. var selectedColumns = [];
  317. rangeEach(start, end, function (i) {
  318. selectedColumns.push(i);
  319. });
  320. return selectedColumns;
  321. }
  322. /**
  323. * Update the UI visual position.
  324. *
  325. * @private
  326. */
  327. }, {
  328. key: 'refreshPositions',
  329. value: function refreshPositions() {
  330. var priv = privatePool.get(this);
  331. var firstVisible = this.hot.view.wt.wtTable.getFirstVisibleColumn();
  332. var lastVisible = this.hot.view.wt.wtTable.getLastVisibleColumn();
  333. var wtTable = this.hot.view.wt.wtTable;
  334. var scrollableElement = this.hot.view.wt.wtOverlays.scrollableElement;
  335. var scrollLeft = typeof scrollableElement.scrollX === 'number' ? scrollableElement.scrollX : scrollableElement.scrollLeft;
  336. var tdOffsetLeft = this.hot.view.THEAD.offsetLeft + this.getColumnsWidth(0, priv.coordsColumn);
  337. var mouseOffsetLeft = priv.target.eventPageX - (priv.rootElementOffset - (scrollableElement.scrollX === void 0 ? scrollLeft : 0));
  338. var hiderWidth = wtTable.hider.offsetWidth;
  339. var tbodyOffsetLeft = wtTable.TBODY.offsetLeft;
  340. var backlightElemMarginLeft = this.backlight.getOffset().left;
  341. var backlightElemWidth = this.backlight.getSize().width;
  342. var rowHeaderWidth = 0;
  343. if (priv.rootElementOffset + wtTable.holder.offsetWidth + scrollLeft < priv.target.eventPageX) {
  344. if (priv.coordsColumn < priv.countCols) {
  345. priv.coordsColumn++;
  346. }
  347. }
  348. if (priv.hasRowHeaders) {
  349. rowHeaderWidth = this.hot.view.wt.wtOverlays.leftOverlay.clone.wtTable.getColumnHeader(-1).offsetWidth;
  350. }
  351. if (this.isFixedColumnsLeft(priv.coordsColumn)) {
  352. tdOffsetLeft += scrollLeft;
  353. }
  354. tdOffsetLeft += rowHeaderWidth;
  355. if (priv.coordsColumn < 0) {
  356. // if hover on rowHeader
  357. if (priv.fixedColumns > 0) {
  358. priv.target.col = 0;
  359. } else {
  360. priv.target.col = firstVisible > 0 ? firstVisible - 1 : firstVisible;
  361. }
  362. } else if (priv.target.TD.offsetWidth / 2 + tdOffsetLeft <= mouseOffsetLeft) {
  363. var newCoordsCol = priv.coordsColumn >= priv.countCols ? priv.countCols - 1 : priv.coordsColumn;
  364. // if hover on right part of TD
  365. priv.target.col = newCoordsCol + 1;
  366. // unfortunately first column is bigger than rest
  367. tdOffsetLeft += priv.target.TD.offsetWidth;
  368. if (priv.target.col > lastVisible) {
  369. this.hot.scrollViewportTo(void 0, lastVisible + 1, void 0, true);
  370. }
  371. } else {
  372. // elsewhere on table
  373. priv.target.col = priv.coordsColumn;
  374. if (priv.target.col <= firstVisible && priv.target.col >= priv.fixedColumns) {
  375. this.hot.scrollViewportTo(void 0, firstVisible - 1);
  376. }
  377. }
  378. if (priv.target.col <= firstVisible && priv.target.col >= priv.fixedColumns) {
  379. this.hot.scrollViewportTo(void 0, firstVisible - 1);
  380. }
  381. var backlightLeft = mouseOffsetLeft;
  382. var guidelineLeft = tdOffsetLeft;
  383. if (mouseOffsetLeft + backlightElemWidth + backlightElemMarginLeft >= hiderWidth) {
  384. // prevent display backlight on the right side of the table
  385. backlightLeft = hiderWidth - backlightElemWidth - backlightElemMarginLeft;
  386. } else if (mouseOffsetLeft + backlightElemMarginLeft < tbodyOffsetLeft + rowHeaderWidth) {
  387. // prevent display backlight on the left side of the table
  388. backlightLeft = tbodyOffsetLeft + rowHeaderWidth + Math.abs(backlightElemMarginLeft);
  389. }
  390. if (tdOffsetLeft >= hiderWidth - 1) {
  391. // prevent display guideline outside the table
  392. guidelineLeft = hiderWidth - 1;
  393. } else if (guidelineLeft === 0) {
  394. // guideline has got `margin-left: -1px` as default
  395. guidelineLeft = 1;
  396. } else if (scrollableElement.scrollX !== void 0 && priv.coordsColumn < priv.fixedColumns) {
  397. guidelineLeft -= priv.rootElementOffset <= scrollableElement.scrollX ? priv.rootElementOffset : 0;
  398. }
  399. this.backlight.setPosition(null, backlightLeft);
  400. this.guideline.setPosition(null, guidelineLeft);
  401. }
  402. /**
  403. * This method checks arrayMap from columnsMapper and updates the columnsMapper if it's necessary.
  404. *
  405. * @private
  406. */
  407. }, {
  408. key: 'updateColumnsMapper',
  409. value: function updateColumnsMapper() {
  410. var countCols = this.hot.countSourceCols();
  411. var columnsMapperLen = this.columnsMapper._arrayMap.length;
  412. if (columnsMapperLen === 0) {
  413. this.columnsMapper.createMap(countCols || this.hot.getSettings().startCols);
  414. } else if (columnsMapperLen < countCols) {
  415. var diff = countCols - columnsMapperLen;
  416. this.columnsMapper.insertItems(columnsMapperLen, diff);
  417. } else if (columnsMapperLen > countCols) {
  418. var maxIndex = countCols - 1;
  419. var columnsToRemove = [];
  420. arrayEach(this.columnsMapper._arrayMap, function (value, index, array) {
  421. if (value > maxIndex) {
  422. columnsToRemove.push(index);
  423. }
  424. });
  425. this.columnsMapper.removeItems(columnsToRemove);
  426. }
  427. }
  428. /**
  429. * Bind the events used by the plugin.
  430. *
  431. * @private
  432. */
  433. }, {
  434. key: 'registerEvents',
  435. value: function registerEvents() {
  436. var _this4 = this;
  437. this.eventManager.addEventListener(document.documentElement, 'mousemove', function (event) {
  438. return _this4.onMouseMove(event);
  439. });
  440. this.eventManager.addEventListener(document.documentElement, 'mouseup', function () {
  441. return _this4.onMouseUp();
  442. });
  443. }
  444. /**
  445. * Unbind the events used by the plugin.
  446. *
  447. * @private
  448. */
  449. }, {
  450. key: 'unregisterEvents',
  451. value: function unregisterEvents() {
  452. this.eventManager.clear();
  453. }
  454. /**
  455. * Change the behavior of selection / dragging.
  456. *
  457. * @private
  458. * @param {MouseEvent} event
  459. * @param {CellCoords} coords
  460. * @param {HTMLElement} TD
  461. * @param {Object} blockCalculations
  462. */
  463. }, {
  464. key: 'onBeforeOnCellMouseDown',
  465. value: function onBeforeOnCellMouseDown(event, coords, TD, blockCalculations) {
  466. var wtTable = this.hot.view.wt.wtTable;
  467. var isHeaderSelection = this.hot.selection.selectedHeader.cols;
  468. var selection = this.hot.getSelectedRange();
  469. var priv = privatePool.get(this);
  470. var isSortingElement = event.realTarget.className.indexOf('columnSorting') > -1;
  471. if (!selection || !isHeaderSelection || priv.pressed || event.button !== 0 || isSortingElement) {
  472. priv.pressed = false;
  473. priv.columnsToMove.length = 0;
  474. removeClass(this.hot.rootElement, [CSS_ON_MOVING, CSS_SHOW_UI]);
  475. return;
  476. }
  477. var guidelineIsNotReady = this.guideline.isBuilt() && !this.guideline.isAppended();
  478. var backlightIsNotReady = this.backlight.isBuilt() && !this.backlight.isAppended();
  479. if (guidelineIsNotReady && backlightIsNotReady) {
  480. this.guideline.appendTo(wtTable.hider);
  481. this.backlight.appendTo(wtTable.hider);
  482. }
  483. var from = selection.from,
  484. to = selection.to;
  485. var start = Math.min(from.col, to.col);
  486. var end = Math.max(from.col, to.col);
  487. if (coords.row < 0 && coords.col >= start && coords.col <= end) {
  488. blockCalculations.column = true;
  489. priv.pressed = true;
  490. priv.target.eventPageX = event.pageX;
  491. priv.coordsColumn = coords.col;
  492. priv.target.TD = TD;
  493. priv.target.col = coords.col;
  494. priv.columnsToMove = this.prepareColumnsToMoving(start, end);
  495. priv.hasRowHeaders = !!this.hot.getSettings().rowHeaders;
  496. priv.countCols = this.hot.countCols();
  497. priv.fixedColumns = this.hot.getSettings().fixedColumnsLeft;
  498. priv.rootElementOffset = offset(this.hot.rootElement).left;
  499. var countColumnsFrom = priv.hasRowHeaders ? -1 : 0;
  500. var topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
  501. var fixedColumns = coords.col < priv.fixedColumns;
  502. var scrollableElement = this.hot.view.wt.wtOverlays.scrollableElement;
  503. var wrapperIsWindow = scrollableElement.scrollX ? scrollableElement.scrollX - priv.rootElementOffset : 0;
  504. var mouseOffset = event.layerX - (fixedColumns ? wrapperIsWindow : 0);
  505. var leftOffset = Math.abs(this.getColumnsWidth(start, coords.col) + mouseOffset);
  506. this.backlight.setPosition(topPos, this.getColumnsWidth(countColumnsFrom, start) + leftOffset);
  507. this.backlight.setSize(this.getColumnsWidth(start, end + 1), wtTable.hider.offsetHeight - topPos);
  508. this.backlight.setOffset(null, leftOffset * -1);
  509. addClass(this.hot.rootElement, CSS_ON_MOVING);
  510. } else {
  511. removeClass(this.hot.rootElement, CSS_AFTER_SELECTION);
  512. priv.pressed = false;
  513. priv.columnsToMove.length = 0;
  514. }
  515. }
  516. /**
  517. * 'mouseMove' event callback. Fired when pointer move on document.documentElement.
  518. *
  519. * @private
  520. * @param {MouseEvent} event `mousemove` event properties.
  521. */
  522. }, {
  523. key: 'onMouseMove',
  524. value: function onMouseMove(event) {
  525. var priv = privatePool.get(this);
  526. if (!priv.pressed) {
  527. return;
  528. }
  529. // callback for browser which doesn't supports CSS pointer-event: none
  530. if (event.realTarget === this.backlight.element) {
  531. var width = this.backlight.getSize().width;
  532. this.backlight.setSize(0);
  533. setTimeout(function () {
  534. this.backlight.setPosition(width);
  535. });
  536. }
  537. priv.target.eventPageX = event.pageX;
  538. this.refreshPositions();
  539. }
  540. /**
  541. * 'beforeOnCellMouseOver' hook callback. Fired when pointer was over cell.
  542. *
  543. * @private
  544. * @param {MouseEvent} event `mouseover` event properties.
  545. * @param {CellCoords} coords Cell coordinates where was fired event.
  546. * @param {HTMLElement} TD Cell represented as HTMLElement.
  547. * @param {Object} blockCalculations Object which contains information about blockCalculation for row, column or cells.
  548. */
  549. }, {
  550. key: 'onBeforeOnCellMouseOver',
  551. value: function onBeforeOnCellMouseOver(event, coords, TD, blockCalculations) {
  552. var selectedRange = this.hot.getSelectedRange();
  553. var priv = privatePool.get(this);
  554. if (!selectedRange || !priv.pressed) {
  555. return;
  556. }
  557. if (priv.columnsToMove.indexOf(coords.col) > -1) {
  558. removeClass(this.hot.rootElement, CSS_SHOW_UI);
  559. } else {
  560. addClass(this.hot.rootElement, CSS_SHOW_UI);
  561. }
  562. blockCalculations.row = true;
  563. blockCalculations.column = true;
  564. blockCalculations.cell = true;
  565. priv.coordsColumn = coords.col;
  566. priv.target.TD = TD;
  567. }
  568. /**
  569. * `onMouseUp` hook callback.
  570. *
  571. * @private
  572. */
  573. }, {
  574. key: 'onMouseUp',
  575. value: function onMouseUp() {
  576. var priv = privatePool.get(this);
  577. priv.coordsColumn = void 0;
  578. priv.pressed = false;
  579. priv.backlightWidth = 0;
  580. removeClass(this.hot.rootElement, [CSS_ON_MOVING, CSS_SHOW_UI, CSS_AFTER_SELECTION]);
  581. if (this.hot.selection.selectedHeader.cols) {
  582. addClass(this.hot.rootElement, CSS_AFTER_SELECTION);
  583. }
  584. if (priv.columnsToMove.length < 1 || priv.target.col === void 0 || priv.columnsToMove.indexOf(priv.target.col) > -1) {
  585. return;
  586. }
  587. this.moveColumns(priv.columnsToMove, priv.target.col);
  588. this.persistentStateSave();
  589. this.hot.render();
  590. this.hot.view.wt.wtOverlays.adjustElementsSize(true);
  591. if (!priv.disallowMoving) {
  592. var selectionStart = this.columnsMapper.getIndexByValue(priv.columnsToMove[0]);
  593. var selectionEnd = this.columnsMapper.getIndexByValue(priv.columnsToMove[priv.columnsToMove.length - 1]);
  594. this.changeSelection(selectionStart, selectionEnd);
  595. }
  596. priv.columnsToMove.length = 0;
  597. }
  598. /**
  599. * `afterScrollHorizontally` hook callback. Fired the table was scrolled horizontally.
  600. *
  601. * @private
  602. */
  603. }, {
  604. key: 'onAfterScrollVertically',
  605. value: function onAfterScrollVertically() {
  606. var wtTable = this.hot.view.wt.wtTable;
  607. var headerHeight = wtTable.getColumnHeaderHeight(0) + 1;
  608. var scrollTop = wtTable.holder.scrollTop;
  609. var posTop = headerHeight + scrollTop;
  610. this.backlight.setPosition(posTop);
  611. this.backlight.setSize(null, wtTable.hider.offsetHeight - posTop);
  612. }
  613. /**
  614. * `afterCreateCol` hook callback.
  615. *
  616. * @private
  617. * @param {Number} index Index of the created column.
  618. * @param {Number} amount Amount of created columns.
  619. */
  620. }, {
  621. key: 'onAfterCreateCol',
  622. value: function onAfterCreateCol(index, amount) {
  623. this.columnsMapper.shiftItems(index, amount);
  624. }
  625. /**
  626. * On before remove column listener.
  627. *
  628. * @private
  629. * @param {Number} index Column index.
  630. * @param {Number} amount Defines how many columns removed.
  631. */
  632. }, {
  633. key: 'onBeforeRemoveCol',
  634. value: function onBeforeRemoveCol(index, amount) {
  635. var _this5 = this;
  636. this.removedColumns.length = 0;
  637. if (index !== false) {
  638. // Collect physical row index.
  639. rangeEach(index, index + amount - 1, function (removedIndex) {
  640. _this5.removedColumns.push(_this5.hot.runHooks('modifyCol', removedIndex, _this5.pluginName));
  641. });
  642. }
  643. }
  644. /**
  645. * `afterRemoveCol` hook callback.
  646. *
  647. * @private
  648. * @param {Number} index Index of the removed column.
  649. * @param {Number} amount Amount of removed columns.
  650. */
  651. }, {
  652. key: 'onAfterRemoveCol',
  653. value: function onAfterRemoveCol(index, amount) {
  654. this.columnsMapper.unshiftItems(this.removedColumns);
  655. }
  656. /**
  657. * `afterLoadData` hook callback.
  658. *
  659. * @private
  660. * @param {Boolean} firstTime True if that was loading data during the initialization.
  661. */
  662. }, {
  663. key: 'onAfterLoadData',
  664. value: function onAfterLoadData(firstTime) {
  665. this.updateColumnsMapper();
  666. }
  667. /**
  668. * 'modifyRow' hook callback.
  669. *
  670. * @private
  671. * @param {Number} column Visual column index.
  672. * @returns {Number} Modified column index.
  673. */
  674. }, {
  675. key: 'onModifyCol',
  676. value: function onModifyCol(column, source) {
  677. if (source !== this.pluginName) {
  678. // ugly fix for try to insert new, needed columns after pasting data
  679. var columnInMapper = this.columnsMapper.getValueByIndex(column);
  680. column = columnInMapper === null ? column : columnInMapper;
  681. }
  682. return column;
  683. }
  684. /**
  685. * 'unmodifyCol' hook callback.
  686. *
  687. * @private
  688. * @param {Number} column Visual column index.
  689. * @returns {Number} Logical column index.
  690. */
  691. }, {
  692. key: 'onUnmodifyCol',
  693. value: function onUnmodifyCol(column) {
  694. var indexInMapper = this.columnsMapper.getIndexByValue(column);
  695. return indexInMapper === null ? column : indexInMapper;
  696. }
  697. /**
  698. * `afterPluginsInitialized` hook callback.
  699. *
  700. * @private
  701. */
  702. }, {
  703. key: 'onAfterPluginsInitialized',
  704. value: function onAfterPluginsInitialized() {
  705. this.updateColumnsMapper();
  706. this.initialSettings();
  707. this.backlight.build();
  708. this.guideline.build();
  709. }
  710. /**
  711. * Destroy plugin instance.
  712. */
  713. }, {
  714. key: 'destroy',
  715. value: function destroy() {
  716. this.backlight.destroy();
  717. this.guideline.destroy();
  718. _get(ManualColumnMove.prototype.__proto__ || Object.getPrototypeOf(ManualColumnMove.prototype), 'destroy', this).call(this);
  719. }
  720. }]);
  721. return ManualColumnMove;
  722. }(BasePlugin);
  723. registerPlugin('ManualColumnMove', ManualColumnMove);
  724. export default ManualColumnMove;