handsontable 11.1.0 → 12.1.0

package/plugins/manualColumnMove/manualColumnMove.js

@@ -59,13 +59,13 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -75,7 +75,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 _pluginHooks.default.getSingleton().register('beforeColumnMove');
 
@@ -90,6 +90,8 @@ var CSS_PLUGIN = 'ht__manualColumnMove';
 var CSS_SHOW_UI = 'show-ui';
 var CSS_ON_MOVING = 'on-moving--columns';
 var CSS_AFTER_SELECTION = 'after-selection--columns';
+/* eslint-disable jsdoc/require-description-complete-sentence */
+
 /**
  * @plugin ManualColumnMove
  * @class ManualColumnMove
@@ -216,7 +218,10 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
       _get(_getPrototypeOf(ManualColumnMove.prototype), "enablePlugin", this).call(this);
     }
     /**
-     * Updates the plugin state. This method is executed when {@link Core#updateSettings} is invoked.
+     * Updates the plugin's state.
+     *
+     * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the following configuration options:
+     *  - [`manualColumnMove`](@/api/options.md#manualcolumnmove)
      */
 
   }, {
@@ -414,9 +419,9 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
         var renderableIndex = columnMapper.getRenderableFromVisualIndex(visualColumnIndex);
 
         if (visualColumnIndex < 0) {
-          columnsWidth += this.hot.view.wt.wtViewport.getRowHeaderWidth() || 0;
+          columnsWidth += this.hot.view._wt.wtViewport.getRowHeaderWidth() || 0;
         } else if (renderableIndex !== null) {
-          columnsWidth += this.hot.view.wt.wtTable.getStretchedColumnWidth(renderableIndex) || 0;
+          columnsWidth += this.hot.view._wt.wtTable.getStretchedColumnWidth(renderableIndex) || 0;
         }
       }
 
@@ -452,9 +457,9 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
      */
 
   }, {
-    key: "isFixedColumnsLeft",
-    value: function isFixedColumnsLeft(column) {
-      return column < this.hot.getSettings().fixedColumnsLeft;
+    key: "isFixedColumnsStart",
+    value: function isFixedColumnsStart(column) {
+      return column < this.hot.getSettings().fixedColumnsStart;
     }
     /**
      * Saves the manual column positions to the persistent state (the {@link Options#persistentState} option has to be enabled).
@@ -511,89 +516,83 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
     key: "refreshPositions",
     value: function refreshPositions() {
       var priv = privatePool.get(this);
-      var firstVisible = this.hot.view.wt.wtTable.getFirstVisibleColumn();
-      var lastVisible = this.hot.view.wt.wtTable.getLastVisibleColumn();
-      var wtTable = this.hot.view.wt.wtTable;
-      var scrollableElement = this.hot.view.wt.wtOverlays.scrollableElement;
-      var scrollLeft = typeof scrollableElement.scrollX === 'number' ? scrollableElement.scrollX : scrollableElement.scrollLeft;
-      var tdOffsetLeft = this.hot.view.THEAD.offsetLeft + this.getColumnsWidth(0, priv.coords - 1);
-      var mouseOffsetLeft = priv.target.eventPageX - (priv.rootElementOffset - (scrollableElement.scrollX === void 0 ? scrollLeft : 0)); // eslint-disable-line max-len
+      var firstVisible = this.hot.view.getFirstFullyVisibleColumn();
+
+      if (this.isFixedColumnsStart(priv.hoveredColumn) && firstVisible > 0) {
+        this.hot.scrollViewportTo(void 0, this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1));
+      }
 
+      var wtTable = this.hot.view._wt.wtTable;
+      var scrollableElement = this.hot.view._wt.wtOverlays.scrollableElement;
+      var scrollStart = typeof scrollableElement.scrollX === 'number' ? scrollableElement.scrollX : scrollableElement.scrollLeft;
+      var tdOffsetStart = this.hot.view.THEAD.offsetLeft + this.getColumnsWidth(0, priv.hoveredColumn - 1);
       var hiderWidth = wtTable.hider.offsetWidth;
       var tbodyOffsetLeft = wtTable.TBODY.offsetLeft;
-      var backlightElemMarginLeft = this.backlight.getOffset().left;
+      var backlightElemMarginStart = this.backlight.getOffset().start;
       var backlightElemWidth = this.backlight.getSize().width;
       var rowHeaderWidth = 0;
+      var mouseOffsetStart = 0;
 
-      if (priv.rootElementOffset + wtTable.holder.offsetWidth + scrollLeft < priv.target.eventPageX) {
-        if (priv.coords < priv.countCols) {
-          priv.coords += 1;
-        }
+      if (this.hot.isRtl()) {
+        var rootWindow = this.hot.rootWindow;
+        var containerWidth = (0, _element.outerWidth)(this.hot.rootElement);
+        var gridMostRightPos = rootWindow.innerWidth - priv.rootElementOffset - containerWidth;
+        mouseOffsetStart = rootWindow.innerWidth - priv.target.eventPageX - gridMostRightPos - (scrollableElement.scrollX === void 0 ? scrollStart : 0);
+      } else {
+        mouseOffsetStart = priv.target.eventPageX - (priv.rootElementOffset - (scrollableElement.scrollX === void 0 ? scrollStart : 0));
       }
 
       if (priv.hasRowHeaders) {
-        rowHeaderWidth = this.hot.view.wt.wtOverlays.leftOverlay.clone.wtTable.getColumnHeader(-1).offsetWidth;
+        rowHeaderWidth = this.hot.view._wt.wtOverlays.inlineStartOverlay.clone.wtTable.getColumnHeader(-1).offsetWidth;
       }
 
-      if (this.isFixedColumnsLeft(priv.coords)) {
-        tdOffsetLeft += scrollLeft;
+      if (this.isFixedColumnsStart(priv.hoveredColumn)) {
+        tdOffsetStart += scrollStart;
       }
 
-      tdOffsetLeft += rowHeaderWidth;
+      tdOffsetStart += rowHeaderWidth;
 
-      if (priv.coords < 0) {
+      if (priv.hoveredColumn < 0) {
         // if hover on rowHeader
-        if (priv.fixedColumns > 0) {
+        if (priv.fixedColumnsStart > 0) {
           priv.target.col = 0;
         } else {
           priv.target.col = firstVisible > 0 ? firstVisible - 1 : firstVisible;
         }
-      } else if (priv.target.TD.offsetWidth / 2 + tdOffsetLeft <= mouseOffsetLeft) {
-        var newCoordsCol = priv.coords >= priv.countCols ? priv.countCols - 1 : priv.coords; // if hover on right part of TD
+      } else if (priv.target.TD.offsetWidth / 2 + tdOffsetStart <= mouseOffsetStart) {
+        var newCoordsCol = priv.hoveredColumn >= priv.countCols ? priv.countCols - 1 : priv.hoveredColumn; // if hover on right part of TD
 
         priv.target.col = newCoordsCol + 1; // unfortunately first column is bigger than rest
 
-        tdOffsetLeft += priv.target.TD.offsetWidth;
-
-        if (priv.target.col > lastVisible && lastVisible < priv.countCols) {
-          this.hot.scrollViewportTo(void 0, lastVisible + 1, void 0, true);
-        }
+        tdOffsetStart += priv.target.TD.offsetWidth;
       } else {
         // elsewhere on table
-        priv.target.col = priv.coords;
-
-        if (priv.target.col <= firstVisible && priv.target.col >= priv.fixedColumns && firstVisible > 0) {
-          this.hot.scrollViewportTo(void 0, firstVisible - 1);
-        }
-      }
-
-      if (priv.target.col <= firstVisible && priv.target.col >= priv.fixedColumns && firstVisible > 0) {
-        this.hot.scrollViewportTo(void 0, firstVisible - 1);
+        priv.target.col = priv.hoveredColumn;
       }
 
-      var backlightLeft = mouseOffsetLeft;
-      var guidelineLeft = tdOffsetLeft;
+      var backlightStart = mouseOffsetStart;
+      var guidelineStart = tdOffsetStart;
 
-      if (mouseOffsetLeft + backlightElemWidth + backlightElemMarginLeft >= hiderWidth) {
+      if (mouseOffsetStart + backlightElemWidth + backlightElemMarginStart >= hiderWidth) {
         // prevent display backlight on the right side of the table
-        backlightLeft = hiderWidth - backlightElemWidth - backlightElemMarginLeft;
-      } else if (mouseOffsetLeft + backlightElemMarginLeft < tbodyOffsetLeft + rowHeaderWidth) {
+        backlightStart = hiderWidth - backlightElemWidth - backlightElemMarginStart;
+      } else if (mouseOffsetStart + backlightElemMarginStart < tbodyOffsetLeft + rowHeaderWidth) {
         // prevent display backlight on the left side of the table
-        backlightLeft = tbodyOffsetLeft + rowHeaderWidth + Math.abs(backlightElemMarginLeft);
+        backlightStart = tbodyOffsetLeft + rowHeaderWidth + Math.abs(backlightElemMarginStart);
       }
 
-      if (tdOffsetLeft >= hiderWidth - 1) {
+      if (tdOffsetStart >= hiderWidth - 1) {
         // prevent display guideline outside the table
-        guidelineLeft = hiderWidth - 1;
-      } else if (guidelineLeft === 0) {
+        guidelineStart = hiderWidth - 1;
+      } else if (guidelineStart === 0) {
         // guideline has got `margin-left: -1px` as default
-        guidelineLeft = 1;
-      } else if (scrollableElement.scrollX !== void 0 && priv.coords < priv.fixedColumns) {
-        guidelineLeft -= priv.rootElementOffset <= scrollableElement.scrollX ? priv.rootElementOffset : 0;
+        guidelineStart = 1;
+      } else if (scrollableElement.scrollX !== void 0 && priv.hoveredColumn < priv.fixedColumnsStart) {
+        guidelineStart -= priv.rootElementOffset <= scrollableElement.scrollX ? priv.rootElementOffset : 0;
       }
 
-      this.backlight.setPosition(null, backlightLeft);
-      this.guideline.setPosition(null, guidelineLeft);
+      this.backlight.setPosition(null, backlightStart);
+      this.guideline.setPosition(null, guidelineStart);
     }
     /**
      * Binds the events used by the plugin.
@@ -639,7 +638,7 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onBeforeOnCellMouseDown",
     value: function onBeforeOnCellMouseDown(event, coords, TD, controller) {
-      var wtTable = this.hot.view.wt.wtTable;
+      var wtTable = this.hot.view._wt.wtTable;
       var isHeaderSelection = this.hot.selection.isSelectedByColumnHeader();
       var selection = this.hot.getSelectedRangeLast();
       var priv = privatePool.get(this); // This block action shouldn't be handled below.
@@ -670,24 +669,25 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
         controller.column = true;
         priv.pressed = true;
         priv.target.eventPageX = event.pageX;
-        priv.coords = coords.col;
+        priv.target.eventOffsetX = event.offsetX;
+        priv.hoveredColumn = coords.col;
         priv.target.TD = TD;
         priv.target.col = coords.col;
         priv.columnsToMove = this.prepareColumnsToMoving(start, end);
         priv.hasRowHeaders = !!this.hot.getSettings().rowHeaders;
         priv.countCols = this.hot.countCols();
-        priv.fixedColumns = this.hot.getSettings().fixedColumnsLeft;
+        priv.fixedColumnsStart = this.hot.getSettings().fixedColumnsStart;
         priv.rootElementOffset = (0, _element.offset)(this.hot.rootElement).left;
         var countColumnsFrom = priv.hasRowHeaders ? -1 : 0;
         var topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
-        var fixedColumns = coords.col < priv.fixedColumns;
-        var scrollableElement = this.hot.view.wt.wtOverlays.scrollableElement;
-        var wrapperIsWindow = scrollableElement.scrollX ? scrollableElement.scrollX - priv.rootElementOffset : 0;
-        var mouseOffset = event.offsetX - (fixedColumns ? wrapperIsWindow : 0);
-        var leftOffset = Math.abs(this.getColumnsWidth(start, coords.col - 1) + mouseOffset);
-        this.backlight.setPosition(topPos, this.getColumnsWidth(countColumnsFrom, start - 1) + leftOffset);
+        var fixedColumnsStart = coords.col < priv.fixedColumnsStart;
+        var horizontalScrollPosition = Math.abs(this.hot.view._wt.wtOverlays.inlineStartOverlay.getScrollPosition());
+        var offsetX = Math.abs(event.offsetX - (this.hot.isRtl() ? event.target.offsetWidth : 0));
+        var inlineOffset = this.getColumnsWidth(start, coords.col - 1) + offsetX;
+        var inlinePos = this.getColumnsWidth(countColumnsFrom, start - 1) + (fixedColumnsStart ? horizontalScrollPosition : 0) + inlineOffset;
+        this.backlight.setPosition(topPos, inlinePos);
         this.backlight.setSize(this.getColumnsWidth(start, end), wtTable.hider.offsetHeight - topPos);
-        this.backlight.setOffset(null, leftOffset * -1);
+        this.backlight.setOffset(null, -inlineOffset);
         (0, _element.addClass)(this.hot.rootElement, CSS_ON_MOVING);
       } else {
         (0, _element.removeClass)(this.hot.rootElement, CSS_AFTER_SELECTION);
@@ -753,7 +753,7 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
       controller.row = true;
       controller.column = true;
       controller.cell = true;
-      priv.coords = coords.col;
+      priv.hoveredColumn = coords.col;
       priv.target.TD = TD;
     }
     /**
@@ -768,7 +768,7 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
       var priv = privatePool.get(this);
       var target = priv.target.col;
       var columnsLen = priv.columnsToMove.length;
-      priv.coords = void 0;
+      priv.hoveredColumn = void 0;
       priv.pressed = false;
       priv.backlightWidth = 0;
       (0, _element.removeClass)(this.hot.rootElement, [CSS_ON_MOVING, CSS_SHOW_UI, CSS_AFTER_SELECTION]);
@@ -804,7 +804,7 @@ var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onAfterScrollVertically",
     value: function onAfterScrollVertically() {
-      var wtTable = this.hot.view.wt.wtTable;
+      var wtTable = this.hot.view._wt.wtTable;
       var headerHeight = wtTable.getColumnHeaderHeight(0) + 1;
       var scrollTop = wtTable.holder.scrollTop;
       var posTop = headerHeight + scrollTop;

package/plugins/manualColumnMove/manualColumnMove.mjs

@@ -6,13 +6,13 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -22,7 +22,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.object.to-string.js";
@@ -42,7 +42,7 @@ import "core-js/modules/es.symbol.iterator.js";
 import { BasePlugin } from "../base/index.mjs";
 import Hooks from "../../pluginHooks.mjs";
 import { arrayReduce } from "../../helpers/array.mjs";
-import { addClass, removeClass, offset, hasClass } from "../../helpers/dom/element.mjs";
+import { addClass, removeClass, offset, hasClass, outerWidth } from "../../helpers/dom/element.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
 import EventManager from "../../eventManager.mjs";
 import BacklightUI from "./ui/backlight.mjs";
@@ -56,6 +56,8 @@ var CSS_PLUGIN = 'ht__manualColumnMove';
 var CSS_SHOW_UI = 'show-ui';
 var CSS_ON_MOVING = 'on-moving--columns';
 var CSS_AFTER_SELECTION = 'after-selection--columns';
+/* eslint-disable jsdoc/require-description-complete-sentence */
+
 /**
  * @plugin ManualColumnMove
  * @class ManualColumnMove
@@ -182,7 +184,10 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
       _get(_getPrototypeOf(ManualColumnMove.prototype), "enablePlugin", this).call(this);
     }
     /**
-     * Updates the plugin state. This method is executed when {@link Core#updateSettings} is invoked.
+     * Updates the plugin's state.
+     *
+     * This method is executed when [`updateSettings()`](@/api/core.md#updatesettings) is invoked with any of the following configuration options:
+     *  - [`manualColumnMove`](@/api/options.md#manualcolumnmove)
      */
 
   }, {
@@ -380,9 +385,9 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
         var renderableIndex = columnMapper.getRenderableFromVisualIndex(visualColumnIndex);
 
         if (visualColumnIndex < 0) {
-          columnsWidth += this.hot.view.wt.wtViewport.getRowHeaderWidth() || 0;
+          columnsWidth += this.hot.view._wt.wtViewport.getRowHeaderWidth() || 0;
         } else if (renderableIndex !== null) {
-          columnsWidth += this.hot.view.wt.wtTable.getStretchedColumnWidth(renderableIndex) || 0;
+          columnsWidth += this.hot.view._wt.wtTable.getStretchedColumnWidth(renderableIndex) || 0;
         }
       }
 
@@ -418,9 +423,9 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
      */
 
   }, {
-    key: "isFixedColumnsLeft",
-    value: function isFixedColumnsLeft(column) {
-      return column < this.hot.getSettings().fixedColumnsLeft;
+    key: "isFixedColumnsStart",
+    value: function isFixedColumnsStart(column) {
+      return column < this.hot.getSettings().fixedColumnsStart;
     }
     /**
      * Saves the manual column positions to the persistent state (the {@link Options#persistentState} option has to be enabled).
@@ -477,89 +482,83 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
     key: "refreshPositions",
     value: function refreshPositions() {
       var priv = privatePool.get(this);
-      var firstVisible = this.hot.view.wt.wtTable.getFirstVisibleColumn();
-      var lastVisible = this.hot.view.wt.wtTable.getLastVisibleColumn();
-      var wtTable = this.hot.view.wt.wtTable;
-      var scrollableElement = this.hot.view.wt.wtOverlays.scrollableElement;
-      var scrollLeft = typeof scrollableElement.scrollX === 'number' ? scrollableElement.scrollX : scrollableElement.scrollLeft;
-      var tdOffsetLeft = this.hot.view.THEAD.offsetLeft + this.getColumnsWidth(0, priv.coords - 1);
-      var mouseOffsetLeft = priv.target.eventPageX - (priv.rootElementOffset - (scrollableElement.scrollX === void 0 ? scrollLeft : 0)); // eslint-disable-line max-len
+      var firstVisible = this.hot.view.getFirstFullyVisibleColumn();
+
+      if (this.isFixedColumnsStart(priv.hoveredColumn) && firstVisible > 0) {
+        this.hot.scrollViewportTo(void 0, this.hot.columnIndexMapper.getNearestNotHiddenIndex(firstVisible - 1, -1));
+      }
 
+      var wtTable = this.hot.view._wt.wtTable;
+      var scrollableElement = this.hot.view._wt.wtOverlays.scrollableElement;
+      var scrollStart = typeof scrollableElement.scrollX === 'number' ? scrollableElement.scrollX : scrollableElement.scrollLeft;
+      var tdOffsetStart = this.hot.view.THEAD.offsetLeft + this.getColumnsWidth(0, priv.hoveredColumn - 1);
       var hiderWidth = wtTable.hider.offsetWidth;
       var tbodyOffsetLeft = wtTable.TBODY.offsetLeft;
-      var backlightElemMarginLeft = this.backlight.getOffset().left;
+      var backlightElemMarginStart = this.backlight.getOffset().start;
       var backlightElemWidth = this.backlight.getSize().width;
       var rowHeaderWidth = 0;
+      var mouseOffsetStart = 0;
 
-      if (priv.rootElementOffset + wtTable.holder.offsetWidth + scrollLeft < priv.target.eventPageX) {
-        if (priv.coords < priv.countCols) {
-          priv.coords += 1;
-        }
+      if (this.hot.isRtl()) {
+        var rootWindow = this.hot.rootWindow;
+        var containerWidth = outerWidth(this.hot.rootElement);
+        var gridMostRightPos = rootWindow.innerWidth - priv.rootElementOffset - containerWidth;
+        mouseOffsetStart = rootWindow.innerWidth - priv.target.eventPageX - gridMostRightPos - (scrollableElement.scrollX === void 0 ? scrollStart : 0);
+      } else {
+        mouseOffsetStart = priv.target.eventPageX - (priv.rootElementOffset - (scrollableElement.scrollX === void 0 ? scrollStart : 0));
       }
 
       if (priv.hasRowHeaders) {
-        rowHeaderWidth = this.hot.view.wt.wtOverlays.leftOverlay.clone.wtTable.getColumnHeader(-1).offsetWidth;
+        rowHeaderWidth = this.hot.view._wt.wtOverlays.inlineStartOverlay.clone.wtTable.getColumnHeader(-1).offsetWidth;
       }
 
-      if (this.isFixedColumnsLeft(priv.coords)) {
-        tdOffsetLeft += scrollLeft;
+      if (this.isFixedColumnsStart(priv.hoveredColumn)) {
+        tdOffsetStart += scrollStart;
       }
 
-      tdOffsetLeft += rowHeaderWidth;
+      tdOffsetStart += rowHeaderWidth;
 
-      if (priv.coords < 0) {
+      if (priv.hoveredColumn < 0) {
         // if hover on rowHeader
-        if (priv.fixedColumns > 0) {
+        if (priv.fixedColumnsStart > 0) {
           priv.target.col = 0;
         } else {
           priv.target.col = firstVisible > 0 ? firstVisible - 1 : firstVisible;
         }
-      } else if (priv.target.TD.offsetWidth / 2 + tdOffsetLeft <= mouseOffsetLeft) {
-        var newCoordsCol = priv.coords >= priv.countCols ? priv.countCols - 1 : priv.coords; // if hover on right part of TD
+      } else if (priv.target.TD.offsetWidth / 2 + tdOffsetStart <= mouseOffsetStart) {
+        var newCoordsCol = priv.hoveredColumn >= priv.countCols ? priv.countCols - 1 : priv.hoveredColumn; // if hover on right part of TD
 
         priv.target.col = newCoordsCol + 1; // unfortunately first column is bigger than rest
 
-        tdOffsetLeft += priv.target.TD.offsetWidth;
-
-        if (priv.target.col > lastVisible && lastVisible < priv.countCols) {
-          this.hot.scrollViewportTo(void 0, lastVisible + 1, void 0, true);
-        }
+        tdOffsetStart += priv.target.TD.offsetWidth;
       } else {
         // elsewhere on table
-        priv.target.col = priv.coords;
-
-        if (priv.target.col <= firstVisible && priv.target.col >= priv.fixedColumns && firstVisible > 0) {
-          this.hot.scrollViewportTo(void 0, firstVisible - 1);
-        }
-      }
-
-      if (priv.target.col <= firstVisible && priv.target.col >= priv.fixedColumns && firstVisible > 0) {
-        this.hot.scrollViewportTo(void 0, firstVisible - 1);
+        priv.target.col = priv.hoveredColumn;
       }
 
-      var backlightLeft = mouseOffsetLeft;
-      var guidelineLeft = tdOffsetLeft;
+      var backlightStart = mouseOffsetStart;
+      var guidelineStart = tdOffsetStart;
 
-      if (mouseOffsetLeft + backlightElemWidth + backlightElemMarginLeft >= hiderWidth) {
+      if (mouseOffsetStart + backlightElemWidth + backlightElemMarginStart >= hiderWidth) {
         // prevent display backlight on the right side of the table
-        backlightLeft = hiderWidth - backlightElemWidth - backlightElemMarginLeft;
-      } else if (mouseOffsetLeft + backlightElemMarginLeft < tbodyOffsetLeft + rowHeaderWidth) {
+        backlightStart = hiderWidth - backlightElemWidth - backlightElemMarginStart;
+      } else if (mouseOffsetStart + backlightElemMarginStart < tbodyOffsetLeft + rowHeaderWidth) {
         // prevent display backlight on the left side of the table
-        backlightLeft = tbodyOffsetLeft + rowHeaderWidth + Math.abs(backlightElemMarginLeft);
+        backlightStart = tbodyOffsetLeft + rowHeaderWidth + Math.abs(backlightElemMarginStart);
       }
 
-      if (tdOffsetLeft >= hiderWidth - 1) {
+      if (tdOffsetStart >= hiderWidth - 1) {
         // prevent display guideline outside the table
-        guidelineLeft = hiderWidth - 1;
-      } else if (guidelineLeft === 0) {
+        guidelineStart = hiderWidth - 1;
+      } else if (guidelineStart === 0) {
         // guideline has got `margin-left: -1px` as default
-        guidelineLeft = 1;
-      } else if (scrollableElement.scrollX !== void 0 && priv.coords < priv.fixedColumns) {
-        guidelineLeft -= priv.rootElementOffset <= scrollableElement.scrollX ? priv.rootElementOffset : 0;
+        guidelineStart = 1;
+      } else if (scrollableElement.scrollX !== void 0 && priv.hoveredColumn < priv.fixedColumnsStart) {
+        guidelineStart -= priv.rootElementOffset <= scrollableElement.scrollX ? priv.rootElementOffset : 0;
       }
 
-      this.backlight.setPosition(null, backlightLeft);
-      this.guideline.setPosition(null, guidelineLeft);
+      this.backlight.setPosition(null, backlightStart);
+      this.guideline.setPosition(null, guidelineStart);
     }
     /**
      * Binds the events used by the plugin.
@@ -605,7 +604,7 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onBeforeOnCellMouseDown",
     value: function onBeforeOnCellMouseDown(event, coords, TD, controller) {
-      var wtTable = this.hot.view.wt.wtTable;
+      var wtTable = this.hot.view._wt.wtTable;
       var isHeaderSelection = this.hot.selection.isSelectedByColumnHeader();
       var selection = this.hot.getSelectedRangeLast();
       var priv = privatePool.get(this); // This block action shouldn't be handled below.
@@ -636,24 +635,25 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
         controller.column = true;
         priv.pressed = true;
         priv.target.eventPageX = event.pageX;
-        priv.coords = coords.col;
+        priv.target.eventOffsetX = event.offsetX;
+        priv.hoveredColumn = coords.col;
         priv.target.TD = TD;
         priv.target.col = coords.col;
         priv.columnsToMove = this.prepareColumnsToMoving(start, end);
         priv.hasRowHeaders = !!this.hot.getSettings().rowHeaders;
         priv.countCols = this.hot.countCols();
-        priv.fixedColumns = this.hot.getSettings().fixedColumnsLeft;
+        priv.fixedColumnsStart = this.hot.getSettings().fixedColumnsStart;
         priv.rootElementOffset = offset(this.hot.rootElement).left;
         var countColumnsFrom = priv.hasRowHeaders ? -1 : 0;
         var topPos = wtTable.holder.scrollTop + wtTable.getColumnHeaderHeight(0) + 1;
-        var fixedColumns = coords.col < priv.fixedColumns;
-        var scrollableElement = this.hot.view.wt.wtOverlays.scrollableElement;
-        var wrapperIsWindow = scrollableElement.scrollX ? scrollableElement.scrollX - priv.rootElementOffset : 0;
-        var mouseOffset = event.offsetX - (fixedColumns ? wrapperIsWindow : 0);
-        var leftOffset = Math.abs(this.getColumnsWidth(start, coords.col - 1) + mouseOffset);
-        this.backlight.setPosition(topPos, this.getColumnsWidth(countColumnsFrom, start - 1) + leftOffset);
+        var fixedColumnsStart = coords.col < priv.fixedColumnsStart;
+        var horizontalScrollPosition = Math.abs(this.hot.view._wt.wtOverlays.inlineStartOverlay.getScrollPosition());
+        var offsetX = Math.abs(event.offsetX - (this.hot.isRtl() ? event.target.offsetWidth : 0));
+        var inlineOffset = this.getColumnsWidth(start, coords.col - 1) + offsetX;
+        var inlinePos = this.getColumnsWidth(countColumnsFrom, start - 1) + (fixedColumnsStart ? horizontalScrollPosition : 0) + inlineOffset;
+        this.backlight.setPosition(topPos, inlinePos);
         this.backlight.setSize(this.getColumnsWidth(start, end), wtTable.hider.offsetHeight - topPos);
-        this.backlight.setOffset(null, leftOffset * -1);
+        this.backlight.setOffset(null, -inlineOffset);
         addClass(this.hot.rootElement, CSS_ON_MOVING);
       } else {
         removeClass(this.hot.rootElement, CSS_AFTER_SELECTION);
@@ -719,7 +719,7 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
       controller.row = true;
       controller.column = true;
       controller.cell = true;
-      priv.coords = coords.col;
+      priv.hoveredColumn = coords.col;
       priv.target.TD = TD;
     }
     /**
@@ -734,7 +734,7 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
       var priv = privatePool.get(this);
       var target = priv.target.col;
       var columnsLen = priv.columnsToMove.length;
-      priv.coords = void 0;
+      priv.hoveredColumn = void 0;
       priv.pressed = false;
       priv.backlightWidth = 0;
       removeClass(this.hot.rootElement, [CSS_ON_MOVING, CSS_SHOW_UI, CSS_AFTER_SELECTION]);
@@ -770,7 +770,7 @@ export var ManualColumnMove = /*#__PURE__*/function (_BasePlugin) {
   }, {
     key: "onAfterScrollVertically",
     value: function onAfterScrollVertically() {
-      var wtTable = this.hot.view.wt.wtTable;
+      var wtTable = this.hot.view._wt.wtTable;
       var headerHeight = wtTable.getColumnHeaderHeight(0) + 1;
       var scrollTop = wtTable.holder.scrollTop;
       var posTop = headerHeight + scrollTop;