handsontable 11.0.0 → 12.0.0

package/3rdparty/walkontable/src/overlay/_base.mjs

@@ -4,40 +4,61 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 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); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-import { getScrollableElement, getTrimmingContainer } from "./../../../../helpers/dom/element.mjs";
-import { defineGetter } from "./../../../../helpers/object.mjs";
-import { arrayEach } from "./../../../../helpers/array.mjs";
-import { warn } from "./../../../../helpers/console.mjs";
-import EventManager from "./../../../../eventManager.mjs";
-import { CLONE_TYPES, CLONE_TOP, CLONE_LEFT } from "./constants.mjs";
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { getScrollableElement, getTrimmingContainer, getScrollbarWidth } from "../../../../helpers/dom/element.mjs";
+import { defineGetter } from "../../../../helpers/object.mjs";
+import { arrayEach } from "../../../../helpers/array.mjs";
+import { warn } from "../../../../helpers/console.mjs";
+import { CLONE_TYPES, CLONE_CLASS_NAMES, CLONE_TOP, CLONE_INLINE_START } from "./constants.mjs";
+import Clone from "../core/clone.mjs";
 /**
  * Creates an overlay over the original Walkontable instance. The overlay renders the clone of the original Walkontable
  * and (optionally) implements behavior needed for native horizontal and vertical scrolling.
  *
+ * @abstract
  * @class Overlay
+ * @property {Walkontable} wot The Walkontable instance.
  */
 
 export var Overlay = /*#__PURE__*/function () {
   /**
-   * @param {Walkontable} wotInstance The Walkontable instance.
+   *  The Walkontable settings.
+   *
+   * @private
+   * @type {Settings}
    */
-  function Overlay(wotInstance) {
+
+  /**
+   * @param {Walkontable} wotInstance The Walkontable instance. @TODO refactoring: check if can be deleted.
+   * @param {FacadeGetter} facadeGetter Function which return proper facade.
+   * @param {CLONE_TYPES_ENUM} type The overlay type name (clone name).
+   * @param {Settings} wtSettings The Walkontable settings.
+   * @param {DomBindings} domBindings Dom elements bound to the current instance.
+   */
+  function Overlay(wotInstance, facadeGetter, type, wtSettings, domBindings) {
     _classCallCheck(this, Overlay);
 
+    _defineProperty(this, "wtSettings", null);
+
     defineGetter(this, 'wot', wotInstance, {
       writable: false
     });
+    this.domBindings = domBindings;
+    this.facadeGetter = facadeGetter;
+    this.wtSettings = wtSettings;
     var _this$wot$wtTable = this.wot.wtTable,
         TABLE = _this$wot$wtTable.TABLE,
         hider = _this$wot$wtTable.hider,
         spreader = _this$wot$wtTable.spreader,
         holder = _this$wot$wtTable.holder,
-        wtRootElement = _this$wot$wtTable.wtRootElement; // legacy support, deprecated in the future
+        wtRootElement = _this$wot$wtTable.wtRootElement; // todo ioc
+    // legacy support, deprecated in the future
 
     this.instance = this.wot;
-    this.type = '';
+    this.type = type;
     this.mainTableScrollableElement = null;
     this.TABLE = TABLE;
     this.hider = hider;
@@ -46,6 +67,7 @@ export var Overlay = /*#__PURE__*/function () {
     this.wtRootElement = wtRootElement;
     this.trimmingContainer = getTrimmingContainer(this.hider.parentNode.parentNode);
     this.updateStateOfRendering();
+    this.clone = this.makeClone();
   }
   /**
    * Update internal state of object with an information about the need of full rendering of the overlay.
@@ -57,6 +79,7 @@ export var Overlay = /*#__PURE__*/function () {
   _createClass(Overlay, [{
     key: "updateStateOfRendering",
     value: function updateStateOfRendering() {
+      // todo refactoring: conceive introducing final state machine, normal -> changed (once) -> needs-full-render -> ...? -> normal
       var previousState = this.needFullRender;
       this.needFullRender = this.shouldBeRendered();
       var changed = previousState !== this.needFullRender;
@@ -94,9 +117,8 @@ export var Overlay = /*#__PURE__*/function () {
   }, {
     key: "updateMainScrollableElement",
     value: function updateMainScrollableElement() {
-      var _this$wot = this.wot,
-          wtTable = _this$wot.wtTable,
-          rootWindow = _this$wot.rootWindow;
+      var wtTable = this.wot.wtTable;
+      var rootWindow = this.domBindings.rootWindow;
 
       if (rootWindow.getComputedStyle(wtTable.wtRootElement.parentNode).getPropertyValue('overflow') === 'hidden') {
         this.mainTableScrollableElement = this.wot.wtTable.holder;
@@ -111,7 +133,7 @@ export var Overlay = /*#__PURE__*/function () {
      * @param {HTMLElement} element The cell element to calculate the position for.
      * @param {number} rowIndex Visual row index.
      * @param {number} columnIndex Visual column index.
-     * @returns {{top: number, left: number}|undefined}
+     * @returns {{top: number, start: number}|undefined}
      */
 
   }, {
@@ -122,28 +144,41 @@ export var Overlay = /*#__PURE__*/function () {
         return;
       }
 
-      var windowScroll = this.mainTableScrollableElement === this.wot.rootWindow;
-      var fixedColumn = columnIndex < this.wot.getSetting('fixedColumnsLeft');
-      var fixedRowTop = rowIndex < this.wot.getSetting('fixedRowsTop');
-      var fixedRowBottom = rowIndex >= this.wot.getSetting('totalRows') - this.wot.getSetting('fixedRowsBottom');
+      var windowScroll = this.mainTableScrollableElement === this.domBindings.rootWindow;
+      var fixedColumnStart = columnIndex < this.wtSettings.getSetting('fixedColumnsStart');
+      var fixedRowTop = rowIndex < this.wtSettings.getSetting('fixedRowsTop');
+      var fixedRowBottom = rowIndex >= this.wtSettings.getSetting('totalRows') - this.wtSettings.getSetting('fixedRowsBottom');
+      var spreader = this.clone.wtTable.spreader;
       var spreaderOffset = {
-        left: this.clone.wtTable.spreader.offsetLeft,
-        top: this.clone.wtTable.spreader.offsetTop
+        start: this.getRelativeStartPosition(spreader),
+        top: spreader.offsetTop
       };
       var elementOffset = {
-        left: element.offsetLeft,
+        start: this.getRelativeStartPosition(element),
         top: element.offsetTop
       };
       var offsetObject = null;
 
       if (windowScroll) {
-        offsetObject = this.getRelativeCellPositionWithinWindow(fixedRowTop, fixedColumn, elementOffset, spreaderOffset);
+        offsetObject = this.getRelativeCellPositionWithinWindow(fixedRowTop, fixedColumnStart, elementOffset, spreaderOffset);
       } else {
-        offsetObject = this.getRelativeCellPositionWithinHolder(fixedRowTop, fixedRowBottom, fixedColumn, elementOffset, spreaderOffset);
+        offsetObject = this.getRelativeCellPositionWithinHolder(fixedRowTop, fixedRowBottom, fixedColumnStart, elementOffset, spreaderOffset);
       }
 
       return offsetObject;
     }
+    /**
+     * Get inline start value depending of direction.
+     *
+     * @param {HTMLElement} el Element.
+     * @returns {number}
+     */
+
+  }, {
+    key: "getRelativeStartPosition",
+    value: function getRelativeStartPosition(el) {
+      return this.isRtl() ? el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth : el.offsetLeft;
+    }
     /**
      * Calculates coordinates of the provided element, relative to the root Handsontable element within a table with window
      * as a scrollable element.
@@ -159,14 +194,21 @@ export var Overlay = /*#__PURE__*/function () {
   }, {
     key: "getRelativeCellPositionWithinWindow",
     value: function getRelativeCellPositionWithinWindow(onFixedRowTop, onFixedColumn, elementOffset, spreaderOffset) {
-      var absoluteRootElementPosition = this.wot.wtTable.wtRootElement.getBoundingClientRect();
+      var absoluteRootElementPosition = this.wot.wtTable.wtRootElement.getBoundingClientRect(); // todo refactoring: DEMETER
+
       var horizontalOffset = 0;
       var verticalOffset = 0;
 
       if (!onFixedColumn) {
-        horizontalOffset = spreaderOffset.left;
+        horizontalOffset = spreaderOffset.start;
       } else {
-        horizontalOffset = absoluteRootElementPosition.left <= 0 ? -1 * absoluteRootElementPosition.left : 0;
+        var absoluteRootElementStartPosition = absoluteRootElementPosition.left;
+
+        if (this.isRtl()) {
+          absoluteRootElementStartPosition = this.domBindings.rootWindow.innerWidth - (absoluteRootElementPosition.left + absoluteRootElementPosition.width + getScrollbarWidth());
+        }
+
+        horizontalOffset = absoluteRootElementStartPosition <= 0 ? -1 * absoluteRootElementStartPosition : 0;
       }
 
       if (onFixedRowTop) {
@@ -177,7 +219,7 @@ export var Overlay = /*#__PURE__*/function () {
       }
 
       return {
-        left: elementOffset.left + horizontalOffset,
+        start: elementOffset.start + horizontalOffset,
         top: elementOffset.top + verticalOffset
       };
     }
@@ -198,63 +240,69 @@ export var Overlay = /*#__PURE__*/function () {
     key: "getRelativeCellPositionWithinHolder",
     value: function getRelativeCellPositionWithinHolder(onFixedRowTop, onFixedRowBottom, onFixedColumn, elementOffset, spreaderOffset) {
       var tableScrollPosition = {
-        horizontal: this.clone.cloneSource.wtOverlays.leftOverlay.getScrollPosition(),
-        vertical: this.clone.cloneSource.wtOverlays.topOverlay.getScrollPosition()
+        horizontal: this.wot.wtOverlays.inlineStartOverlay.getScrollPosition(),
+        vertical: this.wot.wtOverlays.topOverlay.getScrollPosition()
       };
       var horizontalOffset = 0;
       var verticalOffset = 0;
 
       if (!onFixedColumn) {
-        horizontalOffset = tableScrollPosition.horizontal - spreaderOffset.left;
+        horizontalOffset = tableScrollPosition.horizontal - spreaderOffset.start;
       }
 
       if (onFixedRowBottom) {
-        var absoluteRootElementPosition = this.wot.wtTable.wtRootElement.getBoundingClientRect();
-        var absoluteOverlayPosition = this.clone.wtTable.TABLE.getBoundingClientRect();
+        var absoluteRootElementPosition = this.wot.wtTable.wtRootElement.getBoundingClientRect(); // todo refactoring: DEMETER
+
+        var absoluteOverlayPosition = this.clone.wtTable.TABLE.getBoundingClientRect(); // todo refactoring: DEMETER
+
         verticalOffset = absoluteOverlayPosition.top * -1 + absoluteRootElementPosition.top;
       } else if (!onFixedRowTop) {
         verticalOffset = tableScrollPosition.vertical - spreaderOffset.top;
       }
 
       return {
-        left: elementOffset.left - horizontalOffset,
+        start: elementOffset.start - horizontalOffset,
         top: elementOffset.top - verticalOffset
       };
     }
     /**
      * Make a clone of table for overlay.
      *
-     * @param {string} direction Can be `Overlay.CLONE_TOP`, `Overlay.CLONE_LEFT`,
-     *                           `Overlay.CLONE_TOP_LEFT_CORNER`.
-     * @returns {Walkontable}
+     * @returns {Clone}
      */
 
   }, {
     key: "makeClone",
-    value: function makeClone(direction) {
-      if (CLONE_TYPES.indexOf(direction) === -1) {
-        throw new Error("Clone type \"".concat(direction, "\" is not supported."));
+    value: function makeClone() {
+      if (CLONE_TYPES.indexOf(this.type) === -1) {
+        throw new Error("Clone type \"".concat(this.type, "\" is not supported."));
       }
 
-      var _this$wot2 = this.wot,
-          wtTable = _this$wot2.wtTable,
-          rootDocument = _this$wot2.rootDocument,
-          rootWindow = _this$wot2.rootWindow;
+      var wtTable = this.wot.wtTable;
+      var _this$domBindings = this.domBindings,
+          rootDocument = _this$domBindings.rootDocument,
+          rootWindow = _this$domBindings.rootWindow;
       var clone = rootDocument.createElement('DIV');
       var clonedTable = rootDocument.createElement('TABLE');
       var tableParent = wtTable.wtRootElement.parentNode;
-      clone.className = "ht_clone_".concat(direction, " handsontable");
+      clone.className = "".concat(CLONE_CLASS_NAMES.get(this.type), " handsontable");
+      clone.setAttribute('dir', this.isRtl() ? 'rtl' : 'ltr');
       clone.style.position = 'absolute';
       clone.style.top = 0;
-      clone.style.left = 0;
       clone.style.overflow = 'visible';
+
+      if (this.isRtl()) {
+        clone.style.right = 0;
+      } else {
+        clone.style.left = 0;
+      }
+
       clonedTable.className = wtTable.TABLE.className;
       clone.appendChild(clonedTable);
-      this.type = direction;
       tableParent.appendChild(clone);
-      var preventOverflow = this.wot.getSetting('preventOverflow');
+      var preventOverflow = this.wtSettings.getSetting('preventOverflow');
 
-      if (preventOverflow === true || preventOverflow === 'horizontal' && this.type === CLONE_TOP || preventOverflow === 'vertical' && this.type === CLONE_LEFT) {
+      if (preventOverflow === true || preventOverflow === 'horizontal' && this.type === CLONE_TOP || preventOverflow === 'vertical' && this.type === CLONE_INLINE_START) {
         this.mainTableScrollableElement = rootWindow;
       } else if (rootWindow.getComputedStyle(tableParent).getPropertyValue('overflow') === 'hidden') {
         this.mainTableScrollableElement = wtTable.holder;
@@ -263,10 +311,16 @@ export var Overlay = /*#__PURE__*/function () {
       } // Create a new instance of the Walkontable class
 
 
-      return new this.wot.constructor({
-        cloneSource: this.wot,
-        cloneOverlay: this,
-        table: clonedTable
+      return new Clone(clonedTable, this.wtSettings, {
+        // todo ioc factory
+        source: this.wot,
+        overlay: this,
+        viewport: this.wot.wtViewport,
+        // todo ioc , or factor func if used only here
+        event: this.wot.wtEvent,
+        // todo ioc , or factory func if used only here
+        selections: this.wot.selections // todo ioc , or factory func if used only here
+
       });
     }
     /**
@@ -301,16 +355,29 @@ export var Overlay = /*#__PURE__*/function () {
         return;
       }
 
-      var holder = this.clone.wtTable.holder;
-      var hider = this.clone.wtTable.hider;
+      var holder = this.clone.wtTable.holder; // todo refactoring: DEMETER
+
+      var hider = this.clone.wtTable.hider; // todo refactoring: DEMETER
+
       var holderStyle = holder.style;
-      var hidderStyle = hider.style;
+      var hiderStyle = hider.style;
       var rootStyle = holder.parentNode.style;
-      arrayEach([holderStyle, hidderStyle, rootStyle], function (style) {
+      arrayEach([holderStyle, hiderStyle, rootStyle], function (style) {
         style.width = '';
         style.height = '';
       });
     }
+    /**
+     * Determine if Walkontable is running in RTL mode.
+     *
+     * @returns {boolean}
+     */
+
+  }, {
+    key: "isRtl",
+    value: function isRtl() {
+      return this.wtSettings.getSetting('rtlMode');
+    }
     /**
      * Destroy overlay instance.
      */
@@ -318,7 +385,7 @@ export var Overlay = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      new EventManager(this.clone).destroy();
+      this.clone.eventManager.destroy(); // todo check if it is good place for that operation
     }
   }]);