manualRowMove.js 27 KB

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