handsontable 11.1.0 → 12.1.0

package/3rdparty/walkontable/src/border.js

@@ -27,19 +27,13 @@ exports.default = void 0;
 
 require("core-js/modules/es.array.join.js");
 
-var _element = require("./../../../helpers/dom/element");
+var _element = require("../../../helpers/dom/element");
 
-var _event = require("./../../../helpers/dom/event");
+var _event = require("../../../helpers/dom/event");
 
-var _object = require("./../../../helpers/object");
+var _object = require("../../../helpers/object");
 
-var _browser = require("./../../../helpers/browser");
-
-var _eventManager = _interopRequireDefault(require("./../../../eventManager"));
-
-var _coords = _interopRequireDefault(require("./cell/coords"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _browser = require("../../../helpers/browser");
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -63,8 +57,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  *
  */
 var Border = /*#__PURE__*/function () {
+  // TODO As this is an internal class, should be designed for using {Walkontable}. It uses the facade,
+  // TODO Con. Because the class is created on place where the instance reference comes from external origin.
+  // TODO Imho, the discrimination for handling both, facade and non-facade should be handled.
+
   /**
-   * @param {Walkontable} wotInstance The Walkontable instance.
+   * @param {WalkontableFacade} wotInstance The Walkontable instance.
    * @param {object} settings The border settings.
    */
   function Border(wotInstance, settings) {
@@ -74,20 +72,20 @@ var Border = /*#__PURE__*/function () {
       return;
     }
 
-    this.eventManager = new _eventManager.default(wotInstance);
+    this.eventManager = wotInstance.eventManager;
     this.instance = wotInstance;
     this.wot = wotInstance;
     this.settings = settings;
     this.mouseDown = false;
     this.main = null;
     this.top = null;
-    this.left = null;
     this.bottom = null;
-    this.right = null;
+    this.start = null;
+    this.end = null;
     this.topStyle = null;
-    this.leftStyle = null;
     this.bottomStyle = null;
-    this.rightStyle = null;
+    this.startStyle = null;
+    this.endStyle = null;
     this.cornerDefaultStyle = {
       width: '6px',
       height: '6px',
@@ -226,7 +224,7 @@ var Border = /*#__PURE__*/function () {
     value: function createBorders(settings) {
       var rootDocument = this.wot.rootDocument;
       this.main = rootDocument.createElement('div');
-      var borderDivs = ['top', 'left', 'bottom', 'right', 'corner'];
+      var borderDivs = ['top', 'start', 'bottom', 'end', 'corner'];
       var style = this.main.style;
       style.position = 'absolute';
       style.top = 0;
@@ -249,13 +247,13 @@ var Border = /*#__PURE__*/function () {
       }
 
       this.top = this.main.childNodes[0];
-      this.left = this.main.childNodes[1];
+      this.start = this.main.childNodes[1];
       this.bottom = this.main.childNodes[2];
-      this.right = this.main.childNodes[3];
+      this.end = this.main.childNodes[3];
       this.topStyle = this.top.style;
-      this.leftStyle = this.left.style;
+      this.startStyle = this.start.style;
       this.bottomStyle = this.bottom.style;
-      this.rightStyle = this.right.style;
+      this.endStyle = this.end.style;
       this.corner = this.main.childNodes[4];
       this.corner.className += ' corner';
       this.cornerStyle = this.corner.style;
@@ -291,22 +289,22 @@ var Border = /*#__PURE__*/function () {
 
       var rootDocument = this.wot.rootDocument;
       this.selectionHandles = {
-        topLeft: rootDocument.createElement('DIV'),
-        topLeftHitArea: rootDocument.createElement('DIV'),
-        bottomRight: rootDocument.createElement('DIV'),
-        bottomRightHitArea: rootDocument.createElement('DIV')
+        top: rootDocument.createElement('DIV'),
+        topHitArea: rootDocument.createElement('DIV'),
+        bottom: rootDocument.createElement('DIV'),
+        bottomHitArea: rootDocument.createElement('DIV')
       };
       var width = 10;
       var hitAreaWidth = 40;
-      this.selectionHandles.topLeft.className = 'topLeftSelectionHandle';
-      this.selectionHandles.topLeftHitArea.className = 'topLeftSelectionHandle-HitArea';
-      this.selectionHandles.bottomRight.className = 'bottomRightSelectionHandle';
-      this.selectionHandles.bottomRightHitArea.className = 'bottomRightSelectionHandle-HitArea';
+      this.selectionHandles.top.className = 'topSelectionHandle topLeftSelectionHandle';
+      this.selectionHandles.topHitArea.className = 'topSelectionHandle-HitArea topLeftSelectionHandle-HitArea';
+      this.selectionHandles.bottom.className = 'bottomSelectionHandle bottomRightSelectionHandle';
+      this.selectionHandles.bottomHitArea.className = 'bottomSelectionHandle-HitArea bottomRightSelectionHandle-HitArea';
       this.selectionHandles.styles = {
-        topLeft: this.selectionHandles.topLeft.style,
-        topLeftHitArea: this.selectionHandles.topLeftHitArea.style,
-        bottomRight: this.selectionHandles.bottomRight.style,
-        bottomRightHitArea: this.selectionHandles.bottomRightHitArea.style
+        top: this.selectionHandles.top.style,
+        topHitArea: this.selectionHandles.topHitArea.style,
+        bottom: this.selectionHandles.bottom.style,
+        bottomHitArea: this.selectionHandles.bottomHitArea.style
       };
       var hitAreaStyle = {
         position: 'absolute',
@@ -315,8 +313,8 @@ var Border = /*#__PURE__*/function () {
         'border-radius': "".concat(parseInt(hitAreaWidth / 1.5, 10), "px")
       };
       (0, _object.objectEach)(hitAreaStyle, function (value, key) {
-        _this3.selectionHandles.styles.bottomRightHitArea[key] = value;
-        _this3.selectionHandles.styles.topLeftHitArea[key] = value;
+        _this3.selectionHandles.styles.bottomHitArea[key] = value;
+        _this3.selectionHandles.styles.topHitArea[key] = value;
       });
       var handleStyle = {
         position: 'absolute',
@@ -327,13 +325,13 @@ var Border = /*#__PURE__*/function () {
         border: '1px solid #4285c8'
       };
       (0, _object.objectEach)(handleStyle, function (value, key) {
-        _this3.selectionHandles.styles.bottomRight[key] = value;
-        _this3.selectionHandles.styles.topLeft[key] = value;
+        _this3.selectionHandles.styles.bottom[key] = value;
+        _this3.selectionHandles.styles.top[key] = value;
       });
-      this.main.appendChild(this.selectionHandles.topLeft);
-      this.main.appendChild(this.selectionHandles.bottomRight);
-      this.main.appendChild(this.selectionHandles.topLeftHitArea);
-      this.main.appendChild(this.selectionHandles.bottomRightHitArea);
+      this.main.appendChild(this.selectionHandles.top);
+      this.main.appendChild(this.selectionHandles.bottom);
+      this.main.appendChild(this.selectionHandles.topHitArea);
+      this.main.appendChild(this.selectionHandles.bottomHitArea);
     }
     /**
      * @param {number} row The visual row index.
@@ -366,41 +364,43 @@ var Border = /*#__PURE__*/function () {
   }, {
     key: "updateMultipleSelectionHandlesPosition",
     value: function updateMultipleSelectionHandlesPosition(row, col, top, left, width, height) {
-      var handleWidth = parseInt(this.selectionHandles.styles.topLeft.width, 10);
-      var hitAreaWidth = parseInt(this.selectionHandles.styles.topLeftHitArea.width, 10);
-      this.selectionHandles.styles.topLeft.top = "".concat(parseInt(top - handleWidth, 10), "px");
-      this.selectionHandles.styles.topLeft.left = "".concat(parseInt(left - handleWidth, 10), "px");
-      this.selectionHandles.styles.topLeftHitArea.top = "".concat(parseInt(top - hitAreaWidth / 4 * 3, 10), "px");
-      this.selectionHandles.styles.topLeftHitArea.left = "".concat(parseInt(left - hitAreaWidth / 4 * 3, 10), "px");
-      this.selectionHandles.styles.bottomRight.top = "".concat(parseInt(top + height, 10), "px");
-      this.selectionHandles.styles.bottomRight.left = "".concat(parseInt(left + width, 10), "px");
-      this.selectionHandles.styles.bottomRightHitArea.top = "".concat(parseInt(top + height - hitAreaWidth / 4, 10), "px");
-      this.selectionHandles.styles.bottomRightHitArea.left = "".concat(parseInt(left + width - hitAreaWidth / 4, 10), "px");
+      var isRtl = this.wot.wtSettings.getSetting('rtlMode');
+      var inlinePosProperty = isRtl ? 'right' : 'left';
+      var handleWidth = parseInt(this.selectionHandles.styles.top.width, 10);
+      var hitAreaWidth = parseInt(this.selectionHandles.styles.topHitArea.width, 10);
+      this.selectionHandles.styles.top.top = "".concat(parseInt(top - handleWidth - 1, 10), "px");
+      this.selectionHandles.styles.top[inlinePosProperty] = "".concat(parseInt(left - handleWidth - 1, 10), "px");
+      this.selectionHandles.styles.topHitArea.top = "".concat(parseInt(top - hitAreaWidth / 4 * 3, 10), "px");
+      this.selectionHandles.styles.topHitArea[inlinePosProperty] = "".concat(parseInt(left - hitAreaWidth / 4 * 3, 10), "px");
+      this.selectionHandles.styles.bottom.top = "".concat(parseInt(top + height, 10), "px");
+      this.selectionHandles.styles.bottom[inlinePosProperty] = "".concat(parseInt(left + width, 10), "px");
+      this.selectionHandles.styles.bottomHitArea.top = "".concat(parseInt(top + height - hitAreaWidth / 4, 10), "px");
+      this.selectionHandles.styles.bottomHitArea[inlinePosProperty] = "".concat(parseInt(left + width - hitAreaWidth / 4, 10), "px");
 
       if (this.settings.border.cornerVisible && this.settings.border.cornerVisible()) {
-        this.selectionHandles.styles.topLeft.display = 'block';
-        this.selectionHandles.styles.topLeftHitArea.display = 'block';
+        this.selectionHandles.styles.top.display = 'block';
+        this.selectionHandles.styles.topHitArea.display = 'block';
 
         if (this.isPartRange(row, col)) {
-          this.selectionHandles.styles.bottomRight.display = 'none';
-          this.selectionHandles.styles.bottomRightHitArea.display = 'none';
+          this.selectionHandles.styles.bottom.display = 'none';
+          this.selectionHandles.styles.bottomHitArea.display = 'none';
         } else {
-          this.selectionHandles.styles.bottomRight.display = 'block';
-          this.selectionHandles.styles.bottomRightHitArea.display = 'block';
+          this.selectionHandles.styles.bottom.display = 'block';
+          this.selectionHandles.styles.bottomHitArea.display = 'block';
         }
       } else {
-        this.selectionHandles.styles.topLeft.display = 'none';
-        this.selectionHandles.styles.bottomRight.display = 'none';
-        this.selectionHandles.styles.topLeftHitArea.display = 'none';
-        this.selectionHandles.styles.bottomRightHitArea.display = 'none';
+        this.selectionHandles.styles.top.display = 'none';
+        this.selectionHandles.styles.bottom.display = 'none';
+        this.selectionHandles.styles.topHitArea.display = 'none';
+        this.selectionHandles.styles.bottomHitArea.display = 'none';
       }
 
-      if (row === this.wot.wtSettings.getSetting('fixedRowsTop') || col === this.wot.wtSettings.getSetting('fixedColumnsLeft')) {
-        this.selectionHandles.styles.topLeft.zIndex = '9999';
-        this.selectionHandles.styles.topLeftHitArea.zIndex = '9999';
+      if (row === this.wot.wtSettings.getSetting('fixedRowsTop') || col === this.wot.wtSettings.getSetting('fixedColumnsStart')) {
+        this.selectionHandles.styles.top.zIndex = '9999';
+        this.selectionHandles.styles.topHitArea.zIndex = '9999';
       } else {
-        this.selectionHandles.styles.topLeft.zIndex = '';
-        this.selectionHandles.styles.topLeftHitArea.zIndex = '';
+        this.selectionHandles.styles.top.zIndex = '';
+        this.selectionHandles.styles.topHitArea.zIndex = '';
       }
     }
     /**
@@ -419,7 +419,8 @@ var Border = /*#__PURE__*/function () {
       var _this$wot = this.wot,
           wtTable = _this$wot.wtTable,
           rootDocument = _this$wot.rootDocument,
-          rootWindow = _this$wot.rootWindow;
+          rootWindow = _this$wot.rootWindow; // todo refactoring: consider about using internal facade (it is given by external code)
+
       var fromRow;
       var toRow;
       var fromColumn;
@@ -473,16 +474,28 @@ var Border = /*#__PURE__*/function () {
         return;
       }
 
-      var fromTD = wtTable.getCell(new _coords.default(fromRow, fromColumn));
+      var fromTD = wtTable.getCell(this.wot.createCellCoords(fromRow, fromColumn));
       var isMultiple = fromRow !== toRow || fromColumn !== toColumn;
-      var toTD = isMultiple ? wtTable.getCell(new _coords.default(toRow, toColumn)) : fromTD;
+      var toTD = isMultiple ? wtTable.getCell(this.wot.createCellCoords(toRow, toColumn)) : fromTD;
       var fromOffset = (0, _element.offset)(fromTD);
       var toOffset = isMultiple ? (0, _element.offset)(toTD) : fromOffset;
       var containerOffset = (0, _element.offset)(wtTable.TABLE);
+      var containerWidth = (0, _element.outerWidth)(wtTable.TABLE);
       var minTop = fromOffset.top;
       var minLeft = fromOffset.left;
-      var left = minLeft - containerOffset.left - 1;
-      var width = toOffset.left + (0, _element.outerWidth)(toTD) - minLeft;
+      var isRtl = this.wot.wtSettings.getSetting('rtlMode');
+      var inlineStartPos = 0;
+      var width = 0;
+
+      if (isRtl) {
+        var fromWidth = (0, _element.outerWidth)(fromTD);
+        var gridRightPos = rootWindow.innerWidth - containerOffset.left - containerWidth;
+        width = minLeft + fromWidth - toOffset.left;
+        inlineStartPos = rootWindow.innerWidth - minLeft - fromWidth - gridRightPos - 1;
+      } else {
+        width = toOffset.left + (0, _element.outerWidth)(toTD) - minLeft;
+        inlineStartPos = minLeft - containerOffset.left - 1;
+      }
 
       if (this.isEntireColumnSelected(fromRow, toRow)) {
         var modifiedValues = this.getDimensionsFromHeader('columns', fromColumn, toColumn, rowHeader, containerOffset);
@@ -492,7 +505,7 @@ var Border = /*#__PURE__*/function () {
           var _modifiedValues = _slicedToArray(modifiedValues, 3);
 
           fromTH = _modifiedValues[0];
-          left = _modifiedValues[1];
+          inlineStartPos = _modifiedValues[1];
           width = _modifiedValues[2];
         }
 
@@ -529,28 +542,29 @@ var Border = /*#__PURE__*/function () {
         height = height > 0 ? height - 1 : 0;
       }
 
-      if (parseInt(style.borderLeftWidth, 10) > 0) {
-        left += 1;
+      if (parseInt(style[isRtl ? 'borderRightWidth' : 'borderLeftWidth'], 10) > 0) {
+        inlineStartPos += 1;
         width = width > 0 ? width - 1 : 0;
       }
 
+      var inlinePosProperty = isRtl ? 'right' : 'left';
       this.topStyle.top = "".concat(top, "px");
-      this.topStyle.left = "".concat(left, "px");
+      this.topStyle[inlinePosProperty] = "".concat(inlineStartPos, "px");
       this.topStyle.width = "".concat(width, "px");
       this.topStyle.display = 'block';
-      this.leftStyle.top = "".concat(top, "px");
-      this.leftStyle.left = "".concat(left, "px");
-      this.leftStyle.height = "".concat(height, "px");
-      this.leftStyle.display = 'block';
+      this.startStyle.top = "".concat(top, "px");
+      this.startStyle[inlinePosProperty] = "".concat(inlineStartPos, "px");
+      this.startStyle.height = "".concat(height, "px");
+      this.startStyle.display = 'block';
       var delta = Math.floor(this.settings.border.width / 2);
       this.bottomStyle.top = "".concat(top + height - delta, "px");
-      this.bottomStyle.left = "".concat(left, "px");
+      this.bottomStyle[inlinePosProperty] = "".concat(inlineStartPos, "px");
       this.bottomStyle.width = "".concat(width, "px");
       this.bottomStyle.display = 'block';
-      this.rightStyle.top = "".concat(top, "px");
-      this.rightStyle.left = "".concat(left + width - delta, "px");
-      this.rightStyle.height = "".concat(height + 1, "px");
-      this.rightStyle.display = 'block';
+      this.endStyle.top = "".concat(top, "px");
+      this.endStyle[inlinePosProperty] = "".concat(inlineStartPos + width - delta, "px");
+      this.endStyle.height = "".concat(height + 1, "px");
+      this.endStyle.display = 'block';
       var cornerVisibleSetting = this.settings.border.cornerVisible;
       cornerVisibleSetting = typeof cornerVisibleSetting === 'function' ? cornerVisibleSetting(this.settings.layerLevel) : cornerVisibleSetting;
       var hookResult = this.wot.getSetting('onModifyGetCellCoords', toRow, toColumn);
@@ -568,7 +582,7 @@ var Border = /*#__PURE__*/function () {
         this.cornerStyle.display = 'none';
       } else {
         this.cornerStyle.top = "".concat(top + height + this.cornerCenterPointOffset - 1, "px");
-        this.cornerStyle.left = "".concat(left + width + this.cornerCenterPointOffset - 1, "px");
+        this.cornerStyle[inlinePosProperty] = "".concat(inlineStartPos + width + this.cornerCenterPointOffset - 1, "px");
         this.cornerStyle.borderRightWidth = this.cornerDefaultStyle.borderWidth;
         this.cornerStyle.width = this.cornerDefaultStyle.width; // Hide the fill handle, so the possible further adjustments won't force unneeded scrollbars.
 
@@ -582,13 +596,21 @@ var Border = /*#__PURE__*/function () {
 
         if (toColumn === this.wot.getSetting('totalColumns') - 1) {
           var toTdOffsetLeft = trimToWindow ? toTD.getBoundingClientRect().left : toTD.offsetLeft;
-          var cornerRightEdge = toTdOffsetLeft + (0, _element.outerWidth)(toTD) + parseInt(this.cornerDefaultStyle.width, 10) / 2;
-          var cornerOverlappingContainer = cornerRightEdge >= (0, _element.innerWidth)(trimmingContainer);
+          var cornerOverlappingContainer = false;
+          var cornerEdge = 0;
+
+          if (isRtl) {
+            cornerEdge = toTdOffsetLeft - parseInt(this.cornerDefaultStyle.width, 10) / 2;
+            cornerOverlappingContainer = cornerEdge < 0;
+          } else {
+            cornerEdge = toTdOffsetLeft + (0, _element.outerWidth)(toTD) + parseInt(this.cornerDefaultStyle.width, 10) / 2;
+            cornerOverlappingContainer = cornerEdge >= (0, _element.innerWidth)(trimmingContainer);
+          }
 
           if (cornerOverlappingContainer) {
-            this.cornerStyle.left = "".concat(Math.floor(left + width + this.cornerCenterPointOffset - parseInt(this.cornerDefaultStyle.width, 10) / 2), "px"); // eslint-disable-line max-len
+            this.cornerStyle[inlinePosProperty] = "".concat(Math.floor(inlineStartPos + width + this.cornerCenterPointOffset - parseInt(this.cornerDefaultStyle.width, 10) / 2), "px"); // eslint-disable-line max-len
 
-            this.cornerStyle.borderRightWidth = 0;
+            this.cornerStyle[isRtl ? 'borderLeftWidth' : 'borderRightWidth'] = 0;
           }
         }
 
@@ -609,7 +631,7 @@ var Border = /*#__PURE__*/function () {
       }
 
       if ((0, _browser.isMobileBrowser)()) {
-        this.updateMultipleSelectionHandlesPosition(toRow, toColumn, top, left, width, height);
+        this.updateMultipleSelectionHandlesPosition(toRow, toColumn, top, inlineStartPos, width, height);
       }
     }
     /**
@@ -722,7 +744,7 @@ var Border = /*#__PURE__*/function () {
      * Change border style.
      *
      * @private
-     * @param {string} borderElement Coordinate where add/remove border: top, right, bottom, left.
+     * @param {string} borderElement Coordinate where add/remove border: top, bottom, start, end.
      * @param {object} border The border object descriptor.
      */
 
@@ -745,7 +767,7 @@ var Border = /*#__PURE__*/function () {
           style.height = "".concat(borderStyle.width, "px");
         }
 
-        if (borderElement === 'right' || borderElement === 'left') {
+        if (borderElement === 'start' || borderElement === 'end') {
           style.width = "".concat(borderStyle.width, "px");
         }
       }
@@ -754,7 +776,7 @@ var Border = /*#__PURE__*/function () {
      * Change border style to default.
      *
      * @private
-     * @param {string} position The position type ("top", "bottom", "left", "right") to change.
+     * @param {string} position The position type ("top", "bottom", "start", "end") to change.
      */
 
   }, {
@@ -773,7 +795,7 @@ var Border = /*#__PURE__*/function () {
      * Toggle class 'hidden' to element.
      *
      * @private
-     * @param {string} borderElement Coordinate where add/remove border: top, right, bottom, left.
+     * @param {string} borderElement Coordinate where add/remove border: top, bottom, start, end.
      * @param {boolean} [remove] Defines type of the action to perform.
      */
 
@@ -796,14 +818,14 @@ var Border = /*#__PURE__*/function () {
     key: "disappear",
     value: function disappear() {
       this.topStyle.display = 'none';
-      this.leftStyle.display = 'none';
       this.bottomStyle.display = 'none';
-      this.rightStyle.display = 'none';
+      this.startStyle.display = 'none';
+      this.endStyle.display = 'none';
       this.cornerStyle.display = 'none';
 
       if ((0, _browser.isMobileBrowser)()) {
-        this.selectionHandles.styles.topLeft.display = 'none';
-        this.selectionHandles.styles.bottomRight.display = 'none';
+        this.selectionHandles.styles.top.display = 'none';
+        this.selectionHandles.styles.bottom.display = 'none';
       }
     }
     /**