handsontable 0.0.0-next-542a54e-20250121 → 0.0.0-next-8d1d868-20250121

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

@@ -3,6 +3,9 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.reduce.js");
 var _element = require("../../../helpers/dom/element");
 var _feature = require("../../../helpers/feature");
 var _array = require("../../../helpers/array");
@@ -22,6 +25,7 @@ function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.h
  * @class Overlays
  */
 var _overlays = /*#__PURE__*/new WeakMap();
+var _hasRenderingStateChanged = /*#__PURE__*/new WeakMap();
 var _containerDomResizeCount = /*#__PURE__*/new WeakMap();
 var _containerDomResizeCountTimeout = /*#__PURE__*/new WeakMap();
 class Overlays {
@@ -96,6 +100,12 @@ class Overlays {
      * @type {Settings}
      */
     _defineProperty(this, "wtSettings", null);
+    /**
+     * Indicates whether the rendering state has changed for one of the overlays.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _hasRenderingStateChanged, false);
     /**
      * The amount of times the ResizeObserver callback was fired in direct succession.
      *
@@ -142,16 +152,32 @@ class Overlays {
     this.domBindings = domBindings;
     this.facadeGetter = facadeGetter;
     this.wtTable = wtTable;
-    this.eventManager = eventManager;
-    this.destroyed = false;
     const {
+      rootDocument,
       rootWindow
     } = this.domBindings;
+
+    // legacy support
+    this.instance = this.wot; // todo refactoring: move to facade
+    this.eventManager = eventManager;
+
+    // TODO refactoring: probably invalid place to this logic
+    this.scrollbarSize = (0, _element.getScrollbarWidth)(rootDocument);
     const isOverflowHidden = rootWindow.getComputedStyle(wtTable.wtRootElement.parentNode).getPropertyValue('overflow') === 'hidden';
     this.scrollableElement = isOverflowHidden ? wtTable.holder : (0, _element.getScrollableElement)(wtTable.TABLE);
     this.initOverlays();
+    this.destroyed = false;
+    this.keyPressed = false;
+    this.spreaderLastSize = {
+      width: null,
+      height: null
+    };
+    this.verticalScrolling = false;
+    this.horizontalScrolling = false;
     this.initBrowserLineHeight();
     this.registerListeners();
+    this.lastScrollX = rootWindow.scrollX;
+    this.lastScrollY = rootWindow.scrollY;
   }
 
   /**
@@ -186,8 +212,8 @@ class Overlays {
      * Https://developer.mozilla.org/pl/docs/Web/CSS/line-height#Values.
      */
     const lineHeight = parseInt(computedStyle.lineHeight, 10);
-    const lineHeightFallback = parseInt(computedStyle.fontSize, 10) * 1.2;
-    this.browserLineHeight = lineHeight || lineHeightFallback;
+    const lineHeightFalback = parseInt(computedStyle.fontSize, 10) * 1.2;
+    this.browserLineHeight = lineHeight || lineHeightFalback;
   }
 
   /**
@@ -197,9 +223,15 @@ class Overlays {
    */
   initOverlays() {
     const args = [this.wot, this.facadeGetter, this.wtSettings, this.domBindings];
+
+    // todo refactoring: IOC, collection or factories.
+    // TODO refactoring, conceive about using generic collection of overlays.
     this.topOverlay = new _overlay.TopOverlay(...args);
     this.bottomOverlay = new _overlay.BottomOverlay(...args);
     this.inlineStartOverlay = new _overlay.InlineStartOverlay(...args);
+
+    // TODO discuss, the controversial here would be removing the lazy creation mechanism for corners.
+    // TODO cond. Has no any visual impact. They're initially hidden in same way like left, top, and bottom overlays.
     this.topInlineStartCornerOverlay = new _overlay.TopInlineStartCornerOverlay(...args, this.topOverlay, this.inlineStartOverlay);
     this.bottomInlineStartCornerOverlay = new _overlay.BottomInlineStartCornerOverlay(...args, this.bottomOverlay, this.inlineStartOverlay);
     _classPrivateFieldSet(_overlays, this, [this.topOverlay, this.bottomOverlay, this.inlineStartOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay]);
@@ -208,20 +240,48 @@ class Overlays {
   /**
    * Runs logic for the overlays before the table is drawn.
    */
-  beforeDraw() {}
+  beforeDraw() {
+    _classPrivateFieldSet(_hasRenderingStateChanged, this, _classPrivateFieldGet(_overlays, this).reduce((acc, overlay) => {
+      return overlay.hasRenderingStateChanged() || acc;
+    }, false));
+    _classPrivateFieldGet(_overlays, this).forEach(overlay => overlay.updateStateOfRendering('before'));
+  }
 
   /**
    * Runs logic for the overlays after the table is drawn.
    */
-  afterDraw() {}
+  afterDraw() {
+    this.syncScrollWithMaster();
+    _classPrivateFieldGet(_overlays, this).forEach(overlay => {
+      const hasRenderingStateChanged = overlay.hasRenderingStateChanged();
+      overlay.updateStateOfRendering('after');
+      if (hasRenderingStateChanged && !overlay.needFullRender) {
+        overlay.reset();
+      }
+    });
+  }
 
   /**
    * Refresh and redraw table.
    */
-  draw(fastDraw) {
-    (0, _array.arrayEach)(_classPrivateFieldGet(_overlays, this), overlay => {
-      overlay.adjustRootElementSize();
-    });
+  refreshAll() {
+    if (!this.wot.drawn) {
+      return;
+    }
+    if (!this.wtTable.holder.parentNode) {
+      // Walkontable was detached from DOM, but this handler was not removed
+      this.destroy();
+      return;
+    }
+    this.wot.draw(true);
+    if (this.verticalScrolling) {
+      this.inlineStartOverlay.onScroll(); // todo the inlineStartOverlay.onScroll() fires hook. Why is it needed there, not in any another place?
+    }
+    if (this.horizontalScrolling) {
+      this.topOverlay.onScroll();
+    }
+    this.verticalScrolling = false;
+    this.horizontalScrolling = false;
   }
 
   /**
@@ -229,22 +289,39 @@ class Overlays {
    */
   registerListeners() {
     const {
+      rootDocument,
       rootWindow
     } = this.domBindings;
+    const {
+      mainTableScrollableElement: topOverlayScrollableElement
+    } = this.topOverlay;
+    const {
+      mainTableScrollableElement: inlineStartOverlayScrollableElement
+    } = this.inlineStartOverlay;
+    this.eventManager.addEventListener(rootDocument.documentElement, 'keydown', event => this.onKeyDown(event));
+    this.eventManager.addEventListener(rootDocument.documentElement, 'keyup', () => this.onKeyUp());
+    this.eventManager.addEventListener(rootDocument, 'visibilitychange', () => this.onKeyUp());
+    this.eventManager.addEventListener(topOverlayScrollableElement, 'scroll', event => this.onTableScroll(event), {
+      passive: true
+    });
+    if (topOverlayScrollableElement !== inlineStartOverlayScrollableElement) {
+      this.eventManager.addEventListener(inlineStartOverlayScrollableElement, 'scroll', event => this.onTableScroll(event), {
+        passive: true
+      });
+    }
     const isHighPixelRatio = rootWindow.devicePixelRatio && rootWindow.devicePixelRatio > 1;
     const isScrollOnWindow = this.scrollableElement === rootWindow;
     const preventWheel = this.wtSettings.getSetting('preventWheel');
     const wheelEventOptions = {
       passive: isScrollOnWindow
     };
-    this.eventManager.addEventListener(this.scrollableElement, 'scroll', event => {
-      this.wot.draw(true);
-    }, {
-      passive: true
-    });
     if (preventWheel || isHighPixelRatio || !(0, _browser.isChrome)()) {
       this.eventManager.addEventListener(this.wtTable.wtRootElement, 'wheel', event => this.onCloneWheel(event, preventWheel), wheelEventOptions);
     }
+    const overlays = [this.topOverlay, this.bottomOverlay, this.inlineStartOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay];
+    overlays.forEach(overlay => {
+      this.eventManager.addEventListener(overlay.clone.wtTable.holder, 'wheel', event => this.onCloneWheel(event, preventWheel), wheelEventOptions);
+    });
     let resizeTimeout;
     this.eventManager.addEventListener(rootWindow, 'resize', () => {
       (0, _feature.requestAnimationFrame)(() => {
@@ -261,6 +338,29 @@ class Overlays {
     }
   }
 
+  /**
+   * Scroll listener.
+   *
+   * @param {Event} event The mouse event object.
+   */
+  onTableScroll(event) {
+    // There was if statement which controlled flow of this function. It avoided the execution of the next lines
+    // on mobile devices. It was changed. Broader description of this case is included within issue #4856.
+    const rootWindow = this.domBindings.rootWindow;
+    const masterHorizontal = this.inlineStartOverlay.mainTableScrollableElement;
+    const masterVertical = this.topOverlay.mainTableScrollableElement;
+    const target = event.target;
+
+    // For key press, sync only master -> overlay position because while pressing Walkontable.render is triggered
+    // by hot.refreshBorder
+    if (this.keyPressed) {
+      if (masterVertical !== rootWindow && target !== rootWindow && !event.target.contains(masterVertical) || masterHorizontal !== rootWindow && target !== rootWindow && !event.target.contains(masterHorizontal)) {
+        return;
+      }
+    }
+    this.syncScrollPositions(event);
+  }
+
   /**
    * Wheel listener for cloned overlays.
    *
@@ -271,12 +371,43 @@ class Overlays {
     const {
       rootWindow
     } = this.domBindings;
+
+    // There was if statement which controlled flow of this function. It avoided the execution of the next lines
+    // on mobile devices. It was changed. Broader description of this case is included within issue #4856.
+
+    const masterHorizontal = this.inlineStartOverlay.mainTableScrollableElement;
+    const masterVertical = this.topOverlay.mainTableScrollableElement;
+    const target = event.target;
+
+    // For key press, sync only master -> overlay position because while pressing Walkontable.render is triggered
+    // by hot.refreshBorder
+    const shouldNotWheelVertically = masterVertical !== rootWindow && target !== rootWindow && !target.contains(masterVertical);
+    const shouldNotWheelHorizontally = masterHorizontal !== rootWindow && target !== rootWindow && !target.contains(masterHorizontal);
+    if (this.keyPressed && (shouldNotWheelVertically || shouldNotWheelHorizontally) || this.scrollableElement === rootWindow) {
+      return;
+    }
     const isScrollPossible = this.translateMouseWheelToScroll(event);
     if (preventDefault || this.scrollableElement !== rootWindow && isScrollPossible) {
       event.preventDefault();
     }
   }
 
+  /**
+   * Key down listener.
+   *
+   * @param {Event} event The keyboard event object.
+   */
+  onKeyDown(event) {
+    this.keyPressed = (0, _unicode.isKey)(event.keyCode, 'ARROW_UP|ARROW_RIGHT|ARROW_DOWN|ARROW_LEFT');
+  }
+
+  /**
+   * Key up listener.
+   */
+  onKeyUp() {
+    this.keyPressed = false;
+  }
+
   /**
    * Translate wheel event into scroll event and sync scroll overlays position.
    *
@@ -319,6 +450,130 @@ class Overlays {
     this.scrollableElement.scrollLeft += delta;
     return previousScroll !== this.scrollableElement.scrollLeft;
   }
+
+  /**
+   * Synchronize scroll position between master table and overlay table.
+   *
+   * @private
+   */
+  syncScrollPositions() {
+    if (this.destroyed) {
+      return;
+    }
+    const {
+      rootWindow
+    } = this.domBindings;
+    const topHolder = this.topOverlay.clone.wtTable.holder; // todo rethink
+    const leftHolder = this.inlineStartOverlay.clone.wtTable.holder; // todo rethink
+
+    const [scrollLeft, scrollTop] = [this.scrollableElement.scrollLeft, this.scrollableElement.scrollTop];
+    this.horizontalScrolling = topHolder.scrollLeft !== scrollLeft || this.lastScrollX !== rootWindow.scrollX;
+    this.verticalScrolling = leftHolder.scrollTop !== scrollTop || this.lastScrollY !== rootWindow.scrollY;
+    this.lastScrollX = rootWindow.scrollX;
+    this.lastScrollY = rootWindow.scrollY;
+    if (this.horizontalScrolling) {
+      topHolder.scrollLeft = scrollLeft;
+      const bottomHolder = this.bottomOverlay.needFullRender ? this.bottomOverlay.clone.wtTable.holder : null; // todo rethink
+
+      if (bottomHolder) {
+        bottomHolder.scrollLeft = scrollLeft;
+      }
+    }
+    if (this.verticalScrolling) {
+      leftHolder.scrollTop = scrollTop;
+    }
+    this.refreshAll();
+  }
+
+  /**
+   * Synchronize overlay scrollbars with the master scrollbar.
+   */
+  syncScrollWithMaster() {
+    if (!_classPrivateFieldGet(_hasRenderingStateChanged, this)) {
+      return;
+    }
+    const master = this.topOverlay.mainTableScrollableElement;
+    const {
+      scrollLeft,
+      scrollTop
+    } = master;
+    if (this.topOverlay.needFullRender) {
+      this.topOverlay.clone.wtTable.holder.scrollLeft = scrollLeft; // todo rethink, *overlay.setScroll*()
+    }
+    if (this.bottomOverlay.needFullRender) {
+      this.bottomOverlay.clone.wtTable.holder.scrollLeft = scrollLeft; // todo rethink, *overlay.setScroll*()
+    }
+    if (this.inlineStartOverlay.needFullRender) {
+      this.inlineStartOverlay.clone.wtTable.holder.scrollTop = scrollTop; // todo rethink, *overlay.setScroll*()
+    }
+    _classPrivateFieldSet(_hasRenderingStateChanged, this, false);
+  }
+
+  /**
+   *
+   */
+  destroy() {
+    this.resizeObserver.disconnect();
+    this.eventManager.destroy();
+    // todo, probably all below `destroy` calls has no sense. To analyze
+    this.topOverlay.destroy();
+    if (this.bottomOverlay.clone) {
+      this.bottomOverlay.destroy();
+    }
+    this.inlineStartOverlay.destroy();
+    if (this.topInlineStartCornerOverlay) {
+      this.topInlineStartCornerOverlay.destroy();
+    }
+    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
+      this.bottomInlineStartCornerOverlay.destroy();
+    }
+    this.destroyed = true;
+  }
+
+  /**
+   * @param {boolean} [fastDraw=false] When `true`, try to refresh only the positions of borders without rerendering
+   *                                   the data. It will only work if Table.draw() does not force
+   *                                   rendering anyway.
+   */
+  refresh() {
+    let fastDraw = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    const wasSpreaderSizeUpdated = this.updateLastSpreaderSize();
+    if (wasSpreaderSizeUpdated) {
+      this.adjustElementsSize();
+    }
+    if (this.bottomOverlay.clone) {
+      this.bottomOverlay.refresh(fastDraw);
+    }
+    this.inlineStartOverlay.refresh(fastDraw);
+    this.topOverlay.refresh(fastDraw);
+    if (this.topInlineStartCornerOverlay) {
+      this.topInlineStartCornerOverlay.refresh(fastDraw);
+    }
+    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
+      this.bottomInlineStartCornerOverlay.refresh(fastDraw);
+    }
+  }
+
+  /**
+   * Update the last cached spreader size with the current size.
+   *
+   * @returns {boolean} `true` if the lastSpreaderSize cache was updated, `false` otherwise.
+   */
+  updateLastSpreaderSize() {
+    const spreader = this.wtTable.spreader;
+    const width = spreader.clientWidth;
+    const height = spreader.clientHeight;
+    const needsUpdating = width !== this.spreaderLastSize.width || height !== this.spreaderLastSize.height;
+    if (needsUpdating) {
+      this.spreaderLastSize.width = width;
+      this.spreaderLastSize.height = height;
+    }
+    return needsUpdating;
+  }
+
+  /**
+   * Adjust overlays elements size and master table size.
+   */
   adjustElementsSize() {
     const {
       wtViewport
@@ -338,44 +593,99 @@ class Overlays {
     const proposedHiderWidth = headerRowSize + this.inlineStartOverlay.sumCellSizes(0, totalColumns);
     const hiderElement = wtTable.hider;
     const hiderStyle = hiderElement.style;
-    hiderStyle.width = `${proposedHiderWidth}px`;
-    hiderStyle.height = `${proposedHiderHeight}px`;
-    const styleProperty = this.wtSettings.getSetting('rtlMode') ? 'right' : 'paddingLeft';
-    if (typeof this.wot.wtViewport.columnsRenderCalculator.startPosition === 'number') {
-      wtTable.spreader.style[styleProperty] = `${this.wot.wtViewport.columnsRenderCalculator.startPosition}px`;
-    } else if (totalColumns === 0) {
-      wtTable.spreader.style[styleProperty] = '0';
-    } else {
-      throw new Error('Incorrect value of the columnsRenderCalculator');
-    }
-    if (typeof this.wot.wtViewport.rowsRenderCalculator.startPosition === 'number') {
-      wtTable.spreader.style.paddingTop = `${this.wot.wtViewport.rowsRenderCalculator.startPosition}px`;
-    } else if (totalRows === 0) {
-      wtTable.spreader.style.paddingTop = '0';
-    } else {
-      throw new Error('Incorrect value of the rowsRenderCalculator');
-    }
+    const isScrolledBeyondHiderHeight = () => {
+      return isWindowScrolled ? false : this.scrollableElement.scrollTop > Math.max(0, proposedHiderHeight - wtTable.holder.clientHeight);
+    };
+    const isScrolledBeyondHiderWidth = () => {
+      return isWindowScrolled ? false : this.scrollableElement.scrollLeft > Math.max(0, proposedHiderWidth - wtTable.holder.clientWidth);
+    };
+    const columnHeaderBorderCompensation = isScrolledBeyondHiderHeight() ? 1 : 0;
+    const rowHeaderBorderCompensation = isScrolledBeyondHiderWidth() ? 1 : 0;
+
+    // If the elements are being adjusted after scrolling the table from the very beginning to the very end,
+    // we need to adjust the hider dimensions by the header border size. (https://github.com/handsontable/dev-handsontable/issues/1772)
+    hiderStyle.width = `${proposedHiderWidth + rowHeaderBorderCompensation}px`;
+    hiderStyle.height = `${proposedHiderHeight + columnHeaderBorderCompensation}px`;
+    this.topOverlay.adjustElementsSize();
+    this.inlineStartOverlay.adjustElementsSize();
+    this.bottomOverlay.adjustElementsSize();
   }
 
   /**
+   * Expand the hider vertically element by the provided delta value.
    *
+   * @param {number} heightDelta The delta value to expand the hider element by.
    */
-  destroy() {
-    this.resizeObserver.disconnect();
-    this.eventManager.destroy();
-    // todo, probably all below `destroy` calls has no sense. To analyze
-    this.topOverlay.destroy();
-    if (this.bottomOverlay.clone) {
-      this.bottomOverlay.destroy();
+  expandHiderVerticallyBy(heightDelta) {
+    const {
+      wtTable
+    } = this;
+    wtTable.hider.style.height = `${parseInt(wtTable.hider.style.height, 10) + heightDelta}px`;
+  }
+
+  /**
+   * Expand the hider horizontally element by the provided delta value.
+   *
+   * @param {number} widthDelta The delta value to expand the hider element by.
+   */
+  expandHiderHorizontallyBy(widthDelta) {
+    const {
+      wtTable
+    } = this;
+    wtTable.hider.style.width = `${parseInt(wtTable.hider.style.width, 10) + widthDelta}px`;
+  }
+
+  /**
+   *
+   */
+  applyToDOM() {
+    if (!this.wtTable.isVisible()) {
+      return;
     }
-    this.inlineStartOverlay.destroy();
-    if (this.topInlineStartCornerOverlay) {
-      this.topInlineStartCornerOverlay.destroy();
+    this.topOverlay.applyToDOM();
+    if (this.bottomOverlay.clone) {
+      this.bottomOverlay.applyToDOM();
     }
-    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
-      this.bottomInlineStartCornerOverlay.destroy();
+    this.inlineStartOverlay.applyToDOM();
+  }
+
+  /**
+   * Get the parent overlay of the provided element.
+   *
+   * @param {HTMLElement} element An element to process.
+   * @returns {object|null}
+   */
+  getParentOverlay(element) {
+    if (!element) {
+      return null;
     }
-    this.destroyed = true;
+    const overlays = [this.topOverlay, this.inlineStartOverlay, this.bottomOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay];
+    let result = null;
+    (0, _array.arrayEach)(overlays, overlay => {
+      if (!overlay) {
+        return;
+      }
+      if (overlay.clone && overlay.clone.wtTable.TABLE.contains(element)) {
+        // todo demeter
+        result = overlay.clone;
+      }
+    });
+    return result;
+  }
+
+  /**
+   * Synchronize the class names between the main overlay table and the tables on the other overlays.
+   *
+   */
+  syncOverlayTableClassNames() {
+    const masterTable = this.wtTable.TABLE;
+    const overlays = [this.topOverlay, this.inlineStartOverlay, this.bottomOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay];
+    (0, _array.arrayEach)(overlays, elem => {
+      if (!elem) {
+        return;
+      }
+      elem.clone.wtTable.TABLE.className = masterTable.className; // todo demeter
+    });
   }
 }
 var _default = exports.default = Overlays;