handsontable 17.1.0 → 18.0.0-rc2

package/plugins/manualColumnMove/manualColumnMove.js

@@ -90,15 +90,7 @@ const CSS_PLUGIN = 'ht__manualColumnMove';
 const CSS_SHOW_UI = 'show-ui';
 const CSS_ON_MOVING = 'on-moving--columns';
 const CSS_AFTER_SELECTION = 'after-selection--columns';
-var /**
-   * Backlight UI object.
-   *
-   * @type {object}
-   */ _backlight1 = /*#__PURE__*/ new WeakMap(), /**
-   * Guideline UI object.
-   *
-   * @type {object}
-   */ _guideline1 = /*#__PURE__*/ new WeakMap(), /**
+var _backlight1 = /*#__PURE__*/ new WeakMap(), _guideline1 = /*#__PURE__*/ new WeakMap(), /**
    * @type {number[]}
    */ _columnsToMove = /*#__PURE__*/ new WeakMap(), /**
    * @type {number}
@@ -117,6 +109,23 @@ var /**
    */ _hasRowHeaders = /*#__PURE__*/ new WeakMap(), /**
    * @type {number}
    */ _fixedColumnsStart = /*#__PURE__*/ new WeakMap(), /**
+   * Calculates the mouse offset from the start of the grid, accounting for RTL direction.
+   *
+   * @param {Window | HTMLElement} scrollableElement The scrollable container element.
+   * @param {number} scrollStart The current scroll position.
+   * @param {number} rootElementOffset The offset of the root element.
+   * @returns {number}
+   */ _calculateMouseOffsetStart = /*#__PURE__*/ new WeakSet(), /**
+   * Calculates the target column based on hover position and updates `#target.col`.
+   * Returns the updated tdOffsetStart value.
+   *
+   * @param {number} hoveredColumn The currently hovered column index.
+   * @param {number} tdOffsetStart The current TD offset from the start.
+   * @param {number} mouseOffsetStart The current mouse offset from the start.
+   * @param {number} firstVisible The first fully visible column index.
+   * @param {number} fixedColumnsStart The number of fixed columns at the start.
+   * @returns {number}
+   */ _calculateTargetCol = /*#__PURE__*/ new WeakSet(), /**
    * Change the behavior of selection / dragging.
    *
    * @param {MouseEvent} event `mousedown` event properties.
@@ -124,7 +133,7 @@ var /**
    * @param {HTMLElement} TD Cell represented as HTMLElement.
    * @param {object} controller An object with properties `row`, `column` and `cell`. Each property contains
    *                            a boolean value that allows or disallows changing the selection for that particular area.
-   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakSet(), /**
+   */ _onBeforeOnCellMouseDown = /*#__PURE__*/ new WeakMap(), /**
    * 'mouseMove' event callback. Fired when pointer move on document.documentElement.
    *
    * @param {MouseEvent} event `mousemove` event properties.
@@ -136,20 +145,29 @@ var /**
    * @param {HTMLElement} TD Cell represented as HTMLElement.
    * @param {object} controller An object with properties `row`, `column` and `cell`. Each property contains
    *                            a boolean value that allows or disallows changing the selection for that particular area.
-   */ _onBeforeOnCellMouseOver = /*#__PURE__*/ new WeakSet(), /**
+   */ _onBeforeOnCellMouseOver = /*#__PURE__*/ new WeakMap(), /**
+   * Suppresses selection changes during a column move drag when the mouse
+   * is outside the data viewport (e.g. over column headers during scroll).
+   *
+   * @param {object} controller The controller object.
+   */ _onBeforeOnCellMouseOverOutside = /*#__PURE__*/ new WeakSet(), /**
    * `onMouseUp` hook callback.
    */ _onMouseUp = /*#__PURE__*/ new WeakSet(), /**
    * `afterScrollHorizontally` hook callback. Fired the table was scrolled horizontally.
-   */ _onAfterScrollVertically = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterScrollVertically = /*#__PURE__*/ new WeakMap(), /**
    * Callback for the `afterLoadData` hook.
    *
    * @private
-   */ _onAfterLoadData = /*#__PURE__*/ new WeakSet();
+   */ _onAfterLoadData = /*#__PURE__*/ new WeakMap();
 class ManualColumnMove extends _base.BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
     /**
@@ -167,10 +185,11 @@ class ManualColumnMove extends _base.BasePlugin {
         if (this.enabled) {
             return;
         }
-        this.addHook('beforeOnCellMouseDown', (...args)=>_class_private_method_get(this, _onBeforeOnCellMouseDown, onBeforeOnCellMouseDown).call(this, ...args));
-        this.addHook('beforeOnCellMouseOver', (...args)=>_class_private_method_get(this, _onBeforeOnCellMouseOver, onBeforeOnCellMouseOver).call(this, ...args));
-        this.addHook('afterScrollVertically', ()=>_class_private_method_get(this, _onAfterScrollVertically, onAfterScrollVertically).call(this));
-        this.addHook('afterLoadData', (...args)=>_class_private_method_get(this, _onAfterLoadData, onAfterLoadData).call(this, ...args));
+        this.addHook('beforeOnCellMouseDown', _class_private_field_get(this, _onBeforeOnCellMouseDown));
+        this.addHook('beforeOnCellMouseOver', _class_private_field_get(this, _onBeforeOnCellMouseOver));
+        this.addHook('beforeOnCellMouseOverOutside', (event, coords, TD, controller)=>_class_private_method_get(this, _onBeforeOnCellMouseOverOutside, onBeforeOnCellMouseOverOutside).call(this, controller));
+        this.addHook('afterScrollVertically', _class_private_field_get(this, _onAfterScrollVertically));
+        this.addHook('afterLoadData', _class_private_field_get(this, _onAfterLoadData));
         this.buildPluginUI();
         this.registerEvents();
         // TODO: move adding plugin classname to BasePlugin.
@@ -226,7 +245,7 @@ class ManualColumnMove extends _base.BasePlugin {
         const beforeMoveHook = this.hot.runHooks('beforeColumnMove', columns, finalIndex, dropIndex, movePossible);
         _class_private_field_set(this, _cachedDropIndex, undefined);
         if (beforeMoveHook === false) {
-            return;
+            return false;
         }
         if (movePossible) {
             this.hot.columnIndexMapper.moveIndexes(columns, finalIndex);
@@ -304,7 +323,7 @@ class ManualColumnMove extends _base.BasePlugin {
    */ countFinalIndex(movedColumns, dropIndex) {
         const numberOfColumnsLowerThanDropIndex = (0, _array.arrayReduce)(movedColumns, (numberOfColumns, currentColumnIndex)=>{
             if (currentColumnIndex < dropIndex) {
-                numberOfColumns += 1;
+                return numberOfColumns + 1;
             }
             return numberOfColumns;
         }, 0);
@@ -347,7 +366,7 @@ class ManualColumnMove extends _base.BasePlugin {
    * @param {number} column Visual column index to check.
    * @returns {boolean}
    */ isFixedColumnsStart(column) {
-        return column < this.hot.getSettings().fixedColumnsStart;
+        return column < (this.hot.getSettings().fixedColumnsStart ?? 0);
     }
     /**
    * Prepares an array of indexes based on actual selection.
@@ -368,54 +387,34 @@ class ManualColumnMove extends _base.BasePlugin {
    *
    * @private
    */ refreshPositions() {
-        const firstVisible = this.hot.view.getFirstFullyVisibleColumn();
-        if (this.isFixedColumnsStart(_class_private_field_get(this, _hoveredColumn)) && firstVisible > 0) {
+        const firstVisible = this.hot.view.getFirstFullyVisibleColumn() ?? 0;
+        const hoveredColumn = _class_private_field_get(this, _hoveredColumn) ?? 0;
+        const fixedColumnsStart = _class_private_field_get(this, _fixedColumnsStart) ?? 0;
+        const rootElementOffset = _class_private_field_get(this, _rootElementOffset) ?? 0;
+        if (this.isFixedColumnsStart(hoveredColumn) && firstVisible > 0) {
             this.hot.scrollViewportTo({
-                col: this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1)
+                col: this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1) ?? undefined
             });
         }
         const wtTable = this.hot.view._wt.wtTable;
         const scrollableElement = this.hot.view._wt.wtOverlays.scrollableElement;
-        const scrollStart = typeof scrollableElement.scrollX === 'number' ? scrollableElement.scrollX : scrollableElement.scrollLeft;
-        let tdOffsetStart = this.hot.view.THEAD.offsetLeft + this.getColumnsWidth(0, _class_private_field_get(this, _hoveredColumn) - 1);
+        const scrollStart = scrollableElement instanceof Window ? scrollableElement.scrollX : scrollableElement.scrollLeft;
+        let tdOffsetStart = this.hot.view.THEAD.offsetLeft + this.getColumnsWidth(0, hoveredColumn - 1);
         const hiderWidth = wtTable.hider.offsetWidth;
-        const tbodyOffsetLeft = wtTable.TBODY.offsetLeft;
+        const tbodyOffsetLeft = wtTable.TBODY?.offsetLeft ?? 0;
         const backlightElemMarginStart = _class_private_field_get(this, _backlight1).getOffset().start;
         const backlightElemWidth = _class_private_field_get(this, _backlight1).getSize().width;
         let rowHeaderWidth = 0;
-        let mouseOffsetStart = 0;
-        if (this.hot.isRtl()) {
-            const rootWindow = this.hot.rootWindow;
-            const containerWidth = (0, _element.outerWidth)(this.hot.rootElement);
-            const gridMostRightPos = rootWindow.innerWidth - _class_private_field_get(this, _rootElementOffset) - containerWidth;
-            mouseOffsetStart = rootWindow.innerWidth - _class_private_field_get(this, _target).eventPageX - gridMostRightPos - (scrollableElement.scrollX === undefined ? scrollStart : 0);
-        } else {
-            mouseOffsetStart = _class_private_field_get(this, _target).eventPageX - (_class_private_field_get(this, _rootElementOffset) - (scrollableElement.scrollX === undefined ? scrollStart : 0));
-        }
+        const mouseOffsetStart = _class_private_method_get(this, _calculateMouseOffsetStart, calculateMouseOffsetStart).call(this, scrollableElement, scrollStart, rootElementOffset);
         if (_class_private_field_get(this, _hasRowHeaders)) {
-            rowHeaderWidth = this.hot.view._wt.wtOverlays.inlineStartOverlay.clone.wtTable.getColumnHeader(-1).offsetWidth;
+            const inlineClone = this.hot.view._wt.wtOverlays.inlineStartOverlay.clone;
+            rowHeaderWidth = inlineClone?.wtTable.getColumnHeader(-1)?.offsetWidth ?? 0;
         }
-        if (this.isFixedColumnsStart(_class_private_field_get(this, _hoveredColumn))) {
+        if (this.isFixedColumnsStart(hoveredColumn)) {
             tdOffsetStart += scrollStart;
         }
         tdOffsetStart += rowHeaderWidth;
-        if (_class_private_field_get(this, _hoveredColumn) < 0) {
-            // if hover on rowHeader
-            if (_class_private_field_get(this, _fixedColumnsStart) > 0) {
-                _class_private_field_get(this, _target).col = 0;
-            } else {
-                _class_private_field_get(this, _target).col = firstVisible > 0 ? firstVisible - 1 : firstVisible;
-            }
-        } else if (_class_private_field_get(this, _target).TD.offsetWidth / 2 + tdOffsetStart <= mouseOffsetStart) {
-            const newCoordsCol = _class_private_field_get(this, _hoveredColumn) >= _class_private_field_get(this, _countCols) ? _class_private_field_get(this, _countCols) - 1 : _class_private_field_get(this, _hoveredColumn);
-            // if hover on right part of TD
-            _class_private_field_get(this, _target).col = newCoordsCol + 1;
-            // unfortunately first column is bigger than rest
-            tdOffsetStart += _class_private_field_get(this, _target).TD.offsetWidth;
-        } else {
-            // elsewhere on table
-            _class_private_field_get(this, _target).col = _class_private_field_get(this, _hoveredColumn);
-        }
+        tdOffsetStart = _class_private_method_get(this, _calculateTargetCol, calculateTargetCol).call(this, hoveredColumn, tdOffsetStart, mouseOffsetStart, firstVisible, fixedColumnsStart);
         let backlightStart = mouseOffsetStart;
         let guidelineStart = tdOffsetStart;
         if (mouseOffsetStart + backlightElemWidth + backlightElemMarginStart >= hiderWidth) {
@@ -431,11 +430,11 @@ class ManualColumnMove extends _base.BasePlugin {
         } else if (guidelineStart === 0) {
             // guideline has got `margin-left: -1px` as default
             guidelineStart = 1;
-        } else if (scrollableElement.scrollX !== undefined && _class_private_field_get(this, _hoveredColumn) < _class_private_field_get(this, _fixedColumnsStart)) {
-            guidelineStart -= _class_private_field_get(this, _rootElementOffset) <= scrollableElement.scrollX ? _class_private_field_get(this, _rootElementOffset) : 0;
+        } else if (scrollableElement instanceof Window && hoveredColumn < fixedColumnsStart) {
+            guidelineStart -= rootElementOffset <= scrollableElement.scrollX ? rootElementOffset : 0;
         }
-        _class_private_field_get(this, _backlight1).setPosition(null, backlightStart);
-        _class_private_field_get(this, _guideline1).setPosition(null, guidelineStart);
+        _class_private_field_get(this, _backlight1).setPosition(undefined, backlightStart);
+        _class_private_field_get(this, _guideline1).setPosition(undefined, guidelineStart);
     }
     /**
    * Binds the events used by the plugin.
@@ -469,10 +468,18 @@ class ManualColumnMove extends _base.BasePlugin {
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _onBeforeOnCellMouseDown), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _onBeforeOnCellMouseOver), _class_private_method_init(this, _onMouseUp), _class_private_method_init(this, _onAfterScrollVertically), _class_private_method_init(this, _onAfterLoadData), _class_private_field_init(this, _backlight1, {
+        super(...args), _class_private_method_init(this, _calculateMouseOffsetStart), _class_private_method_init(this, _calculateTargetCol), _class_private_method_init(this, _onMouseMove), _class_private_method_init(this, _onBeforeOnCellMouseOverOutside), _class_private_method_init(this, _onMouseUp), /**
+   * Backlight UI object.
+   *
+   * @type {object}
+   */ _class_private_field_init(this, _backlight1, {
             writable: true,
             value: void 0
-        }), _class_private_field_init(this, _guideline1, {
+        }), /**
+   * Guideline UI object.
+   *
+   * @type {object}
+   */ _class_private_field_init(this, _guideline1, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _columnsToMove, {
@@ -502,62 +509,126 @@ class ManualColumnMove extends _base.BasePlugin {
         }), _class_private_field_init(this, _fixedColumnsStart, {
             writable: true,
             value: void 0
-        }), _class_private_field_set(this, _backlight1, new _backlight.default(this.hot)), _class_private_field_set(this, _guideline1, new _guideline.default(this.hot)), _class_private_field_set(this, _columnsToMove, []), _class_private_field_set(this, _countCols, 0), _class_private_field_set(this, _pressed, false), _class_private_field_set(this, _target, {});
+        }), _class_private_field_init(this, _onBeforeOnCellMouseDown, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeOnCellMouseOver, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterScrollVertically, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterLoadData, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_set(this, _backlight1, new _backlight.default(this.hot)), _class_private_field_set(this, _guideline1, new _guideline.default(this.hot)), _class_private_field_set(this, _columnsToMove, []), _class_private_field_set(this, _countCols, 0), _class_private_field_set(this, _pressed, false), _class_private_field_set(this, _target, {}), _class_private_field_set(this, _onBeforeOnCellMouseDown, (event, coords, TD, controller)=>{
+            const wtTable = this.hot.view._wt.wtTable;
+            const isHeaderSelection = this.hot.selection.isSelectedByColumnHeader();
+            const selection = this.hot.getSelectedRangeActive();
+            // This block action shouldn't be handled below.
+            const isSortingElement = (0, _element.hasClass)((0, _element.eventTargetEl)(event), 'sortAction');
+            if (!selection || !isHeaderSelection || _class_private_field_get(this, _pressed) || event.button !== 0 || isSortingElement) {
+                _class_private_field_set(this, _pressed, false);
+                _class_private_field_get(this, _columnsToMove).length = 0;
+                (0, _element.removeClass)(this.hot.rootElement, [
+                    CSS_ON_MOVING,
+                    CSS_SHOW_UI
+                ]);
+                return;
+            }
+            const guidelineIsNotReady = _class_private_field_get(this, _guideline1).isBuilt() && !_class_private_field_get(this, _guideline1).isAppended();
+            const backlightIsNotReady = _class_private_field_get(this, _backlight1).isBuilt() && !_class_private_field_get(this, _backlight1).isAppended();
+            if (guidelineIsNotReady && backlightIsNotReady) {
+                _class_private_field_get(this, _guideline1).appendTo(wtTable.hider);
+                _class_private_field_get(this, _backlight1).appendTo(wtTable.hider);
+            }
+            const { from, to } = selection;
+            const start = Math.min(from.col ?? 0, to.col ?? 0);
+            const end = Math.max(from.col ?? 0, to.col ?? 0);
+            if (coords.row < 0 && coords.col >= start && coords.col <= end) {
+                controller.column = true;
+                _class_private_field_set(this, _pressed, true);
+                const eventOffsetX = TD.firstChild ? (0, _event.offsetRelativeTo)(event, TD.firstChild).x : event.offsetX;
+                _class_private_field_get(this, _target).eventPageX = event.pageX;
+                _class_private_field_set(this, _hoveredColumn, coords.col);
+                _class_private_field_get(this, _target).TD = TD;
+                _class_private_field_get(this, _target).col = coords.col;
+                _class_private_field_set(this, _columnsToMove, this.prepareColumnsToMoving(start, end));
+                _class_private_field_set(this, _hasRowHeaders, !!this.hot.getSettings().rowHeaders);
+                _class_private_field_set(this, _countCols, this.hot.countCols());
+                _class_private_field_set(this, _fixedColumnsStart, this.hot.getSettings().fixedColumnsStart);
+                _class_private_field_set(this, _rootElementOffset, (0, _element.offset)(this.hot.rootElement).left);
+                const countColumnsFrom = _class_private_field_get(this, _hasRowHeaders) ? -1 : 0;
+                const topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
+                const fixedColumnsStart = coords.col < (_class_private_field_get(this, _fixedColumnsStart) ?? 0);
+                const horizontalScrollPosition = this.hot.view._wt.wtOverlays.inlineStartOverlay.getOverlayOffset();
+                const offsetX = Math.abs(eventOffsetX - (this.hot.isRtl() ? TD.offsetWidth : 0));
+                const inlineOffset = this.getColumnsWidth(start, coords.col - 1) + offsetX;
+                const inlinePos = this.getColumnsWidth(countColumnsFrom, start - 1) + (fixedColumnsStart ? horizontalScrollPosition : 0) + inlineOffset;
+                _class_private_field_get(this, _backlight1).setPosition(topPos, inlinePos);
+                _class_private_field_get(this, _backlight1).setSize(this.getColumnsWidth(start, end), wtTable.hider.offsetHeight - topPos);
+                _class_private_field_get(this, _backlight1).setOffset(0, -inlineOffset);
+                (0, _element.addClass)(this.hot.rootElement, CSS_ON_MOVING);
+            } else {
+                (0, _element.removeClass)(this.hot.rootElement, CSS_AFTER_SELECTION);
+                _class_private_field_set(this, _pressed, false);
+                _class_private_field_get(this, _columnsToMove).length = 0;
+            }
+        }), _class_private_field_set(this, _onBeforeOnCellMouseOver, (event, coords, TD, controller)=>{
+            const selectedRange = this.hot.getSelectedRangeActive();
+            if (!selectedRange || !_class_private_field_get(this, _pressed)) {
+                return;
+            }
+            if (_class_private_field_get(this, _columnsToMove).indexOf(coords.col) > -1) {
+                (0, _element.removeClass)(this.hot.rootElement, CSS_SHOW_UI);
+            } else {
+                (0, _element.addClass)(this.hot.rootElement, CSS_SHOW_UI);
+            }
+            controller.row = true;
+            controller.column = true;
+            controller.cell = true;
+            _class_private_field_set(this, _hoveredColumn, coords.col);
+            _class_private_field_get(this, _target).TD = TD;
+        }), _class_private_field_set(this, _onAfterScrollVertically, ()=>{
+            const wtTable = this.hot.view._wt.wtTable;
+            const headerHeight = wtTable.getColumnHeaderHeight(0) + 1;
+            const scrollTop = wtTable.holder.scrollTop;
+            const posTop = headerHeight + scrollTop;
+            _class_private_field_get(this, _backlight1).setPosition(posTop);
+            _class_private_field_get(this, _backlight1).setSize(undefined, wtTable.hider.offsetHeight - posTop);
+        }), _class_private_field_set(this, _onAfterLoadData, ()=>{
+            this.moveBySettingsOrLoad();
+        });
     }
 }
-function onBeforeOnCellMouseDown(event, coords, TD, controller) {
-    const wtTable = this.hot.view._wt.wtTable;
-    const isHeaderSelection = this.hot.selection.isSelectedByColumnHeader();
-    const selection = this.hot.getSelectedRangeActive();
-    // This block action shouldn't be handled below.
-    const isSortingElement = (0, _element.hasClass)(event.target, 'sortAction');
-    if (!selection || !isHeaderSelection || _class_private_field_get(this, _pressed) || event.button !== 0 || isSortingElement) {
-        _class_private_field_set(this, _pressed, false);
-        _class_private_field_get(this, _columnsToMove).length = 0;
-        (0, _element.removeClass)(this.hot.rootElement, [
-            CSS_ON_MOVING,
-            CSS_SHOW_UI
-        ]);
-        return;
-    }
-    const guidelineIsNotReady = _class_private_field_get(this, _guideline1).isBuilt() && !_class_private_field_get(this, _guideline1).isAppended();
-    const backlightIsNotReady = _class_private_field_get(this, _backlight1).isBuilt() && !_class_private_field_get(this, _backlight1).isAppended();
-    if (guidelineIsNotReady && backlightIsNotReady) {
-        _class_private_field_get(this, _guideline1).appendTo(wtTable.hider);
-        _class_private_field_get(this, _backlight1).appendTo(wtTable.hider);
-    }
-    const { from, to } = selection;
-    const start = Math.min(from.col, to.col);
-    const end = Math.max(from.col, to.col);
-    if (coords.row < 0 && coords.col >= start && coords.col <= end) {
-        controller.column = true;
-        _class_private_field_set(this, _pressed, true);
-        const eventOffsetX = TD.firstChild ? (0, _event.offsetRelativeTo)(event, TD.firstChild).x : event.offsetX;
-        _class_private_field_get(this, _target).eventPageX = event.pageX;
-        _class_private_field_set(this, _hoveredColumn, coords.col);
-        _class_private_field_get(this, _target).TD = TD;
-        _class_private_field_get(this, _target).col = coords.col;
-        _class_private_field_set(this, _columnsToMove, this.prepareColumnsToMoving(start, end));
-        _class_private_field_set(this, _hasRowHeaders, !!this.hot.getSettings().rowHeaders);
-        _class_private_field_set(this, _countCols, this.hot.countCols());
-        _class_private_field_set(this, _fixedColumnsStart, this.hot.getSettings().fixedColumnsStart);
-        _class_private_field_set(this, _rootElementOffset, (0, _element.offset)(this.hot.rootElement).left);
-        const countColumnsFrom = _class_private_field_get(this, _hasRowHeaders) ? -1 : 0;
-        const topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
-        const fixedColumnsStart = coords.col < _class_private_field_get(this, _fixedColumnsStart);
-        const horizontalScrollPosition = this.hot.view._wt.wtOverlays.inlineStartOverlay.getOverlayOffset();
-        const offsetX = Math.abs(eventOffsetX - (this.hot.isRtl() ? TD.offsetWidth : 0));
-        const inlineOffset = this.getColumnsWidth(start, coords.col - 1) + offsetX;
-        const inlinePos = this.getColumnsWidth(countColumnsFrom, start - 1) + (fixedColumnsStart ? horizontalScrollPosition : 0) + inlineOffset;
-        _class_private_field_get(this, _backlight1).setPosition(topPos, inlinePos);
-        _class_private_field_get(this, _backlight1).setSize(this.getColumnsWidth(start, end), wtTable.hider.offsetHeight - topPos);
-        _class_private_field_get(this, _backlight1).setOffset(null, -inlineOffset);
-        (0, _element.addClass)(this.hot.rootElement, CSS_ON_MOVING);
+function calculateMouseOffsetStart(scrollableElement, scrollStart, rootElementOffset) {
+    if (this.hot.isRtl()) {
+        const rootWindow = this.hot.rootWindow;
+        const containerWidth = (0, _element.outerWidth)(this.hot.rootElement);
+        const gridMostRightPos = rootWindow.innerWidth - rootElementOffset - containerWidth;
+        return rootWindow.innerWidth - _class_private_field_get(this, _target).eventPageX - gridMostRightPos - (!(scrollableElement instanceof Window) ? scrollStart : 0);
+    }
+    return _class_private_field_get(this, _target).eventPageX - (rootElementOffset - (!(scrollableElement instanceof Window) ? scrollStart : 0));
+}
+function calculateTargetCol(hoveredColumn, tdOffsetStart, mouseOffsetStart, firstVisible, fixedColumnsStart) {
+    if (hoveredColumn < 0) {
+        // if hover on rowHeader
+        if (fixedColumnsStart > 0) {
+            _class_private_field_get(this, _target).col = 0;
+        } else {
+            _class_private_field_get(this, _target).col = firstVisible > 0 ? firstVisible - 1 : firstVisible;
+        }
+    } else if (_class_private_field_get(this, _target).TD.offsetWidth / 2 + tdOffsetStart <= mouseOffsetStart) {
+        const newCoordsCol = hoveredColumn >= _class_private_field_get(this, _countCols) ? _class_private_field_get(this, _countCols) - 1 : hoveredColumn;
+        // if hover on right part of TD
+        _class_private_field_get(this, _target).col = newCoordsCol + 1;
+        // unfortunately first column is bigger than rest
+        tdOffsetStart += _class_private_field_get(this, _target).TD.offsetWidth;
     } else {
-        (0, _element.removeClass)(this.hot.rootElement, CSS_AFTER_SELECTION);
-        _class_private_field_set(this, _pressed, false);
-        _class_private_field_get(this, _columnsToMove).length = 0;
+        // elsewhere on table
+        _class_private_field_get(this, _target).col = hoveredColumn;
     }
+    return tdOffsetStart;
 }
 function onMouseMove(event) {
     if (!_class_private_field_get(this, _pressed)) {
@@ -566,21 +637,13 @@ function onMouseMove(event) {
     _class_private_field_get(this, _target).eventPageX = event.pageX;
     this.refreshPositions();
 }
-function onBeforeOnCellMouseOver(event, coords, TD, controller) {
-    const selectedRange = this.hot.getSelectedRangeActive();
-    if (!selectedRange || !_class_private_field_get(this, _pressed)) {
+function onBeforeOnCellMouseOverOutside(controller) {
+    if (!_class_private_field_get(this, _pressed)) {
         return;
     }
-    if (_class_private_field_get(this, _columnsToMove).indexOf(coords.col) > -1) {
-        (0, _element.removeClass)(this.hot.rootElement, CSS_SHOW_UI);
-    } else {
-        (0, _element.addClass)(this.hot.rootElement, CSS_SHOW_UI);
-    }
     controller.row = true;
     controller.column = true;
     controller.cell = true;
-    _class_private_field_set(this, _hoveredColumn, coords.col);
-    _class_private_field_get(this, _target).TD = TD;
 }
 function onMouseUp() {
     const target = _class_private_field_get(this, _target).col;
@@ -610,14 +673,3 @@ function onMouseUp() {
         this.hot.selectColumns(selectionStart, selectionEnd);
     }
 }
-function onAfterScrollVertically() {
-    const wtTable = this.hot.view._wt.wtTable;
-    const headerHeight = wtTable.getColumnHeaderHeight(0) + 1;
-    const scrollTop = wtTable.holder.scrollTop;
-    const posTop = headerHeight + scrollTop;
-    _class_private_field_get(this, _backlight1).setPosition(posTop);
-    _class_private_field_get(this, _backlight1).setSize(null, wtTable.hider.offsetHeight - posTop);
-}
-function onAfterLoadData() {
-    this.moveBySettingsOrLoad();
-}