handsontable 0.0.0-next-8d01ccc-20250117 → 0.0.0-next-f52ab71-20250121

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

@@ -1,8 +1,5 @@
 import "core-js/modules/es.error.cause.js";
 import "core-js/modules/es.array.push.js";
-import "core-js/modules/esnext.iterator.constructor.js";
-import "core-js/modules/esnext.iterator.for-each.js";
-import "core-js/modules/esnext.iterator.reduce.js";
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -22,7 +19,6 @@ import { InlineStartOverlay, TopOverlay, TopInlineStartCornerOverlay, BottomOver
  * @class Overlays
  */
 var _overlays = /*#__PURE__*/new WeakMap();
-var _hasRenderingStateChanged = /*#__PURE__*/new WeakMap();
 var _containerDomResizeCount = /*#__PURE__*/new WeakMap();
 var _containerDomResizeCountTimeout = /*#__PURE__*/new WeakMap();
 class Overlays {
@@ -97,12 +93,6 @@ 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.
      *
@@ -149,32 +139,16 @@ 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 = getScrollbarWidth(rootDocument);
     const isOverflowHidden = rootWindow.getComputedStyle(wtTable.wtRootElement.parentNode).getPropertyValue('overflow') === 'hidden';
     this.scrollableElement = isOverflowHidden ? wtTable.holder : 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;
   }
 
   /**
@@ -209,8 +183,8 @@ class Overlays {
      * Https://developer.mozilla.org/pl/docs/Web/CSS/line-height#Values.
      */
     const lineHeight = parseInt(computedStyle.lineHeight, 10);
-    const lineHeightFalback = parseInt(computedStyle.fontSize, 10) * 1.2;
-    this.browserLineHeight = lineHeight || lineHeightFalback;
+    const lineHeightFallback = parseInt(computedStyle.fontSize, 10) * 1.2;
+    this.browserLineHeight = lineHeight || lineHeightFallback;
   }
 
   /**
@@ -220,15 +194,9 @@ 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 TopOverlay(...args);
     this.bottomOverlay = new BottomOverlay(...args);
     this.inlineStartOverlay = new 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 TopInlineStartCornerOverlay(...args, this.topOverlay, this.inlineStartOverlay);
     this.bottomInlineStartCornerOverlay = new BottomInlineStartCornerOverlay(...args, this.bottomOverlay, this.inlineStartOverlay);
     _classPrivateFieldSet(_overlays, this, [this.topOverlay, this.bottomOverlay, this.inlineStartOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay]);
@@ -237,48 +205,20 @@ class Overlays {
   /**
    * Runs logic for the overlays before the table is drawn.
    */
-  beforeDraw() {
-    _classPrivateFieldSet(_hasRenderingStateChanged, this, _classPrivateFieldGet(_overlays, this).reduce((acc, overlay) => {
-      return overlay.hasRenderingStateChanged() || acc;
-    }, false));
-    _classPrivateFieldGet(_overlays, this).forEach(overlay => overlay.updateStateOfRendering('before'));
-  }
+  beforeDraw() {}
 
   /**
    * Runs logic for the overlays after the table is drawn.
    */
-  afterDraw() {
-    this.syncScrollWithMaster();
-    _classPrivateFieldGet(_overlays, this).forEach(overlay => {
-      const hasRenderingStateChanged = overlay.hasRenderingStateChanged();
-      overlay.updateStateOfRendering('after');
-      if (hasRenderingStateChanged && !overlay.needFullRender) {
-        overlay.reset();
-      }
-    });
-  }
+  afterDraw() {}
 
   /**
    * Refresh and redraw table.
    */
-  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;
+  draw(fastDraw) {
+    arrayEach(_classPrivateFieldGet(_overlays, this), overlay => {
+      overlay.adjustRootElementSize();
+    });
   }
 
   /**
@@ -286,39 +226,22 @@ 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 || !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', () => {
       requestAnimationFrame(() => {
@@ -335,29 +258,6 @@ 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.
    *
@@ -368,43 +268,12 @@ 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 = 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.
    *
@@ -447,130 +316,6 @@ 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
@@ -590,99 +335,44 @@ class Overlays {
     const proposedHiderWidth = headerRowSize + this.inlineStartOverlay.sumCellSizes(0, totalColumns);
     const hiderElement = wtTable.hider;
     const hiderStyle = hiderElement.style;
-    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.
-   */
-  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;
+    hiderStyle.width = `${proposedHiderWidth}px`;
+    hiderStyle.height = `${proposedHiderHeight}px`;
+    const styleProperty = this.wtSettings.getSetting('rtlMode') ? 'right' : 'left';
+    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');
     }
-    this.topOverlay.applyToDOM();
-    if (this.bottomOverlay.clone) {
-      this.bottomOverlay.applyToDOM();
+    if (typeof this.wot.wtViewport.rowsRenderCalculator.startPosition === 'number') {
+      wtTable.spreader.style.top = `${this.wot.wtViewport.rowsRenderCalculator.startPosition}px`;
+    } else if (totalRows === 0) {
+      wtTable.spreader.style.top = '0';
+    } else {
+      throw new Error('Incorrect value of the rowsRenderCalculator');
     }
-    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;
+  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();
     }
-    const overlays = [this.topOverlay, this.inlineStartOverlay, this.bottomOverlay, this.topInlineStartCornerOverlay, this.bottomInlineStartCornerOverlay];
-    let result = null;
-    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];
-    arrayEach(overlays, elem => {
-      if (!elem) {
-        return;
-      }
-      elem.clone.wtTable.TABLE.className = masterTable.className; // todo demeter
-    });
+    this.inlineStartOverlay.destroy();
+    if (this.topInlineStartCornerOverlay) {
+      this.topInlineStartCornerOverlay.destroy();
+    }
+    if (this.bottomInlineStartCornerOverlay && this.bottomInlineStartCornerOverlay.clone) {
+      this.bottomInlineStartCornerOverlay.destroy();
+    }
+    this.destroyed = true;
   }
 }
 export default Overlays;