manualRowMove.js 27 KB

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