handsontable 0.0.0-next-802f59c-20241024 → 0.0.0-next-627918e-20241025

package/3rdparty/walkontable/src/utils/stylesHandler.js

@@ -0,0 +1,179 @@
+"use strict";
+
+exports.__esModule = true;
+require("core-js/modules/es.error.cause.js");
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+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 _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
+
+/**
+ * Handles the theme-related style operations.
+ */
+var _rootElement = /*#__PURE__*/new WeakMap();
+var _rootComputedStyle = /*#__PURE__*/new WeakMap();
+var _rootDocument = /*#__PURE__*/new WeakMap();
+var _isClassicTheme = /*#__PURE__*/new WeakMap();
+var _cssVars = /*#__PURE__*/new WeakMap();
+var _computedStyles = /*#__PURE__*/new WeakMap();
+var _StylesHandler_brand = /*#__PURE__*/new WeakSet();
+class StylesHandler {
+  /**
+   * Initializes a new instance of the `StylesHandler` class.
+   *
+   * @param {string} themeName - The name of the theme.
+   * @param {object} domBindings - The DOM bindings for the instance.
+   */
+  constructor(themeName, domBindings) {
+    /**
+     * Retrieves and processes the computed styles for a `td` element.
+     *
+     * This method creates a temporary table structure, appends it to the root element,
+     * retrieves the computed styles for the `td` element, and then removes the table
+     * from the DOM. The computed styles are passed to the provided callback function.
+     *
+     * @param {Array} cssProps - An array of CSS properties to retrieve.
+     * @returns {object} An object containing the requested computed styles for the `td` element.
+     * @private
+     */
+    _classPrivateMethodInitSpec(this, _StylesHandler_brand);
+    /**
+     * The instance's root element.
+     *
+     * @type {HTMLElement}
+     */
+    _classPrivateFieldInitSpec(this, _rootElement, void 0);
+    /**
+     * The computed style of the root element.
+     *
+     * @type {CSSStyleDeclaration}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _rootComputedStyle, void 0);
+    /**
+     * The root document of the instance.
+     *
+     * @type {Document}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _rootDocument, void 0);
+    /**
+     * `true` if the classic theme is enabled, `false` otherwise.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isClassicTheme, false);
+    /**
+     * An object to store CSS variable values.
+     *
+     * @type {object}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _cssVars, {});
+    /**
+     * Stores the computed styles for various elements.
+     *
+     * @type {object} - An object containing the computed styles if a nested structore of `element: { [element type]: {property: value} }`.
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _computedStyles, {});
+    _classPrivateFieldSet(_rootElement, this, domBindings.rootTable.parentElement);
+    _classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
+    _classPrivateFieldSet(_rootDocument, this, domBindings.rootDocument);
+    if (!themeName) {
+      _classPrivateFieldSet(_isClassicTheme, this, true);
+    }
+    const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing']);
+    _classPrivateFieldGet(_computedStyles, this).td = {
+      ..._classPrivateFieldGet(_computedStyles, this).td,
+      ...{
+        'box-sizing': stylesForTD['box-sizing']
+      }
+    };
+  }
+
+  /**
+   * Gets the value indicating whether the classic theme is enabled.
+   *
+   * @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
+   */
+  isClassicTheme() {
+    return _classPrivateFieldGet(_isClassicTheme, this);
+  }
+
+  /**
+   * Retrieves the value of a specified CSS variable.
+   *
+   * @param {string} variableName - The name of the CSS variable to retrieve.
+   * @returns {number|undefined} The value of the specified CSS variable, or `undefined` if not found.
+   */
+  getCSSVariableValue(variableName) {
+    if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
+      return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
+    }
+    const acquiredValue = _assertClassBrand(_StylesHandler_brand, this, _getParsedCSSValue).call(this, `--ht-${variableName}`);
+    if (acquiredValue !== null) {
+      _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`] = acquiredValue;
+      return acquiredValue;
+    }
+  }
+
+  /**
+   * Retrieves the computed style value for a specified CSS property of a `td` element.
+   *
+   * @param {string} cssProperty - The CSS property to retrieve the value for.
+   * @returns {number|string|undefined} The value of the specified CSS property, or `undefined` if not found.
+   */
+  getStyleForTD(cssProperty) {
+    var _classPrivateFieldGet2;
+    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
+  }
+
+  /**
+   * Calculates the row height based on the current theme and CSS variables.
+   *
+   * @returns {number} The calculated row height.
+   */
+  getDefaultRowHeight() {
+    if (_classPrivateFieldGet(_isClassicTheme, this)) {
+      return CLASSIC_THEME_DEFAULT_HEIGHT;
+    }
+    return this.getCSSVariableValue('row-height');
+  }
+}
+exports.StylesHandler = StylesHandler;
+function _getStylesForTD(cssProps) {
+  const rootDocument = _classPrivateFieldGet(_rootDocument, this);
+  const rootElement = _classPrivateFieldGet(_rootElement, this);
+  const table = rootDocument.createElement('table');
+  const tbody = rootDocument.createElement('tbody');
+  const tr = rootDocument.createElement('tr');
+  // This needs not to be the first row in order to get "regular" vaules.
+  const tr2 = rootDocument.createElement('tr');
+  const td = rootDocument.createElement('td');
+  tr2.appendChild(td);
+  tbody.appendChild(tr);
+  tbody.appendChild(tr2);
+  table.appendChild(tbody);
+  rootElement.appendChild(table);
+  const computedStyle = getComputedStyle(td);
+  const returnObject = {};
+  cssProps.forEach(prop => {
+    returnObject[prop] = computedStyle.getPropertyValue(prop);
+  });
+  rootElement.removeChild(table);
+  return returnObject;
+}
+/**
+ * Parses the value of a specified CSS property from the root element's computed style.
+ *
+ * @param {string} property - The CSS property to retrieve and parse.
+ * @returns {number|null} The parsed value of the CSS property.
+ */
+function _getParsedCSSValue(property) {
+  const parsedValue = parseInt(_classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property), 10);
+  return Number.isNaN(parsedValue) ? null : parsedValue;
+}

package/3rdparty/walkontable/src/utils/stylesHandler.mjs

@@ -0,0 +1,175 @@
+import "core-js/modules/es.error.cause.js";
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+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 _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
+
+/**
+ * Handles the theme-related style operations.
+ */
+var _rootElement = /*#__PURE__*/new WeakMap();
+var _rootComputedStyle = /*#__PURE__*/new WeakMap();
+var _rootDocument = /*#__PURE__*/new WeakMap();
+var _isClassicTheme = /*#__PURE__*/new WeakMap();
+var _cssVars = /*#__PURE__*/new WeakMap();
+var _computedStyles = /*#__PURE__*/new WeakMap();
+var _StylesHandler_brand = /*#__PURE__*/new WeakSet();
+export class StylesHandler {
+  /**
+   * Initializes a new instance of the `StylesHandler` class.
+   *
+   * @param {string} themeName - The name of the theme.
+   * @param {object} domBindings - The DOM bindings for the instance.
+   */
+  constructor(themeName, domBindings) {
+    /**
+     * Retrieves and processes the computed styles for a `td` element.
+     *
+     * This method creates a temporary table structure, appends it to the root element,
+     * retrieves the computed styles for the `td` element, and then removes the table
+     * from the DOM. The computed styles are passed to the provided callback function.
+     *
+     * @param {Array} cssProps - An array of CSS properties to retrieve.
+     * @returns {object} An object containing the requested computed styles for the `td` element.
+     * @private
+     */
+    _classPrivateMethodInitSpec(this, _StylesHandler_brand);
+    /**
+     * The instance's root element.
+     *
+     * @type {HTMLElement}
+     */
+    _classPrivateFieldInitSpec(this, _rootElement, void 0);
+    /**
+     * The computed style of the root element.
+     *
+     * @type {CSSStyleDeclaration}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _rootComputedStyle, void 0);
+    /**
+     * The root document of the instance.
+     *
+     * @type {Document}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _rootDocument, void 0);
+    /**
+     * `true` if the classic theme is enabled, `false` otherwise.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isClassicTheme, false);
+    /**
+     * An object to store CSS variable values.
+     *
+     * @type {object}
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _cssVars, {});
+    /**
+     * Stores the computed styles for various elements.
+     *
+     * @type {object} - An object containing the computed styles if a nested structore of `element: { [element type]: {property: value} }`.
+     * @private
+     */
+    _classPrivateFieldInitSpec(this, _computedStyles, {});
+    _classPrivateFieldSet(_rootElement, this, domBindings.rootTable.parentElement);
+    _classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
+    _classPrivateFieldSet(_rootDocument, this, domBindings.rootDocument);
+    if (!themeName) {
+      _classPrivateFieldSet(_isClassicTheme, this, true);
+    }
+    const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing']);
+    _classPrivateFieldGet(_computedStyles, this).td = {
+      ..._classPrivateFieldGet(_computedStyles, this).td,
+      ...{
+        'box-sizing': stylesForTD['box-sizing']
+      }
+    };
+  }
+
+  /**
+   * Gets the value indicating whether the classic theme is enabled.
+   *
+   * @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
+   */
+  isClassicTheme() {
+    return _classPrivateFieldGet(_isClassicTheme, this);
+  }
+
+  /**
+   * Retrieves the value of a specified CSS variable.
+   *
+   * @param {string} variableName - The name of the CSS variable to retrieve.
+   * @returns {number|undefined} The value of the specified CSS variable, or `undefined` if not found.
+   */
+  getCSSVariableValue(variableName) {
+    if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
+      return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
+    }
+    const acquiredValue = _assertClassBrand(_StylesHandler_brand, this, _getParsedCSSValue).call(this, `--ht-${variableName}`);
+    if (acquiredValue !== null) {
+      _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`] = acquiredValue;
+      return acquiredValue;
+    }
+  }
+
+  /**
+   * Retrieves the computed style value for a specified CSS property of a `td` element.
+   *
+   * @param {string} cssProperty - The CSS property to retrieve the value for.
+   * @returns {number|string|undefined} The value of the specified CSS property, or `undefined` if not found.
+   */
+  getStyleForTD(cssProperty) {
+    var _classPrivateFieldGet2;
+    return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
+  }
+
+  /**
+   * Calculates the row height based on the current theme and CSS variables.
+   *
+   * @returns {number} The calculated row height.
+   */
+  getDefaultRowHeight() {
+    if (_classPrivateFieldGet(_isClassicTheme, this)) {
+      return CLASSIC_THEME_DEFAULT_HEIGHT;
+    }
+    return this.getCSSVariableValue('row-height');
+  }
+}
+function _getStylesForTD(cssProps) {
+  const rootDocument = _classPrivateFieldGet(_rootDocument, this);
+  const rootElement = _classPrivateFieldGet(_rootElement, this);
+  const table = rootDocument.createElement('table');
+  const tbody = rootDocument.createElement('tbody');
+  const tr = rootDocument.createElement('tr');
+  // This needs not to be the first row in order to get "regular" vaules.
+  const tr2 = rootDocument.createElement('tr');
+  const td = rootDocument.createElement('td');
+  tr2.appendChild(td);
+  tbody.appendChild(tr);
+  tbody.appendChild(tr2);
+  table.appendChild(tbody);
+  rootElement.appendChild(table);
+  const computedStyle = getComputedStyle(td);
+  const returnObject = {};
+  cssProps.forEach(prop => {
+    returnObject[prop] = computedStyle.getPropertyValue(prop);
+  });
+  rootElement.removeChild(table);
+  return returnObject;
+}
+/**
+ * Parses the value of a specified CSS property from the root element's computed style.
+ *
+ * @param {string} property - The CSS property to retrieve and parse.
+ * @returns {number|null} The parsed value of the CSS property.
+ */
+function _getParsedCSSValue(property) {
+  const parsedValue = parseInt(_classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property), 10);
+  return Number.isNaN(parsedValue) ? null : parsedValue;
+}

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

@@ -27,6 +27,7 @@ class Viewport {
     this.oversizedColumnHeaders = [];
     this.hasOversizedColumnHeadersMarked = {};
     this.clientHeight = 0;
+    this.containerWidth = NaN;
     this.rowHeaderWidth = NaN;
     this.rowsVisibleCalculator = null;
     this.columnsVisibleCalculator = null;
@@ -55,65 +56,55 @@ class Viewport {
     }
     return height;
   }
-
-  /**
-   * @returns {number}
-   */
-  getViewportHeight() {
-    let containerHeight = this.getWorkspaceHeight();
-    if (containerHeight === Infinity) {
-      return containerHeight;
-    }
-    const columnHeaderHeight = this.getColumnHeaderHeight();
-    if (columnHeaderHeight > 0) {
-      containerHeight -= columnHeaderHeight;
-    }
-    return containerHeight;
-  }
-
-  /**
-   * Gets the width of the table workspace (in pixels). The workspace size in the current
-   * implementation returns the width of the table holder element including scrollbar width when
-   * the table has defined size and the width of the window excluding scrollbar width when
-   * the table has no defined size (the window is a scrollable container).
-   *
-   * This is a bug, as the method should always return stable values, always without scrollbar width.
-   * Changing this behavior would break the column calculators, which would also need to be adjusted.
-   *
-   * @returns {number}
-   */
   getWorkspaceWidth() {
+    const {
+      wtSettings
+    } = this;
     const {
       rootDocument,
       rootWindow
     } = this.domBindings;
     const trimmingContainer = this.dataAccessObject.inlineStartOverlayTrimmingContainer;
+    const docOffsetWidth = rootDocument.documentElement.offsetWidth;
+    const totalColumns = wtSettings.getSetting('totalColumns');
+    const preventOverflow = wtSettings.getSetting('preventOverflow');
+    const isRtl = wtSettings.getSetting('rtlMode');
+    const tableRect = this.wtTable.TABLE.getBoundingClientRect();
+    const inlineStart = isRtl ? tableRect.right - docOffsetWidth : tableRect.left;
+    const tableOffset = docOffsetWidth - inlineStart;
     let width;
-    if (trimmingContainer === rootWindow) {
-      const totalColumns = this.wtSettings.getSetting('totalColumns');
-      width = this.wtTable.holder.offsetWidth;
-      if (this.getRowHeaderWidth() + this.sumColumnWidths(0, totalColumns) > width) {
-        width = rootDocument.documentElement.clientWidth;
-      }
+    let overflow;
+    if (preventOverflow) {
+      return (0, _element.outerWidth)(this.wtTable.wtRootElement);
+    }
+    if (wtSettings.getSetting('freezeOverlays')) {
+      width = Math.min(tableOffset, docOffsetWidth);
     } else {
-      width = trimmingContainer.clientWidth;
+      width = Math.min(this.getContainerFillWidth(), tableOffset, docOffsetWidth);
     }
-    return width;
-  }
-
-  /**
-   * @returns {number}
-   */
-  getViewportWidth() {
-    const containerWidth = this.getWorkspaceWidth();
-    if (containerWidth === Infinity) {
-      return containerWidth;
+    if (trimmingContainer === rootWindow && totalColumns > 0 && this.sumColumnWidths(0, totalColumns - 1) > width) {
+      // in case sum of column widths is higher than available stylesheet width, let's assume using the whole window
+      // otherwise continue below, which will allow stretching
+      // this is used in `scroll_window.html`
+      // TODO test me
+      return rootDocument.documentElement.clientWidth;
     }
-    const rowHeaderWidth = this.getRowHeaderWidth();
-    if (rowHeaderWidth > 0) {
-      return containerWidth - rowHeaderWidth;
+    if (trimmingContainer !== rootWindow) {
+      overflow = (0, _element.getStyle)(this.dataAccessObject.inlineStartOverlayTrimmingContainer, 'overflow', rootWindow);
+      if (overflow === 'scroll' || overflow === 'hidden' || overflow === 'auto') {
+        // this is used in `scroll.html`
+        // TODO test me
+        return Math.max(width, trimmingContainer.clientWidth);
+      }
     }
-    return containerWidth;
+    const stretchSetting = wtSettings.getSetting('stretchH');
+    if (stretchSetting === 'none' || !stretchSetting) {
+      // if no stretching is used, return the maximum used workspace width
+      return Math.max(width, (0, _element.outerWidth)(this.wtTable.TABLE));
+    }
+
+    // if stretching is used, return the actual container width, so the columns can fit inside it
+    return width;
   }
 
   /**
@@ -134,24 +125,6 @@ class Viewport {
     return this.wtTable.hider.offsetWidth > this.getWorkspaceWidth();
   }
 
-  /**
-   * Checks if the table uses the window as a viewport and if there is a vertical scrollbar.
-   *
-   * @returns {boolean}
-   */
-  isVerticallyScrollableByWindow() {
-    return this.dataAccessObject.topOverlayTrimmingContainer === this.domBindings.rootWindow;
-  }
-
-  /**
-   * Checks if the table uses the window as a viewport and if there is a horizontal scrollbar.
-   *
-   * @returns {boolean}
-   */
-  isHorizontallyScrollableByWindow() {
-    return this.dataAccessObject.inlineStartOverlayTrimmingContainer === this.domBindings.rootWindow;
-  }
-
   /**
    * @param {number} from The visual column index from the width sum is start calculated.
    * @param {number} length The length of the column to traverse.
@@ -167,6 +140,24 @@ class Viewport {
     return sum;
   }
 
+  /**
+   * @returns {number}
+   */
+  getContainerFillWidth() {
+    if (this.containerWidth) {
+      return this.containerWidth;
+    }
+    const mainContainer = this.wtTable.holder;
+    const dummyElement = this.domBindings.rootDocument.createElement('div');
+    dummyElement.style.width = '100%';
+    dummyElement.style.height = '1px';
+    mainContainer.appendChild(dummyElement);
+    const fillWidth = dummyElement.offsetWidth;
+    this.containerWidth = fillWidth;
+    mainContainer.removeChild(dummyElement);
+    return fillWidth;
+  }
+
   /**
    * @returns {number}
    */
@@ -187,6 +178,21 @@ class Viewport {
     return this.columnHeaderHeight;
   }
 
+  /**
+   * @returns {number}
+   */
+  getViewportHeight() {
+    let containerHeight = this.getWorkspaceHeight();
+    if (containerHeight === Infinity) {
+      return containerHeight;
+    }
+    const columnHeaderHeight = this.getColumnHeaderHeight();
+    if (columnHeaderHeight > 0) {
+      containerHeight -= columnHeaderHeight;
+    }
+    return containerHeight;
+  }
+
   /**
    * @returns {number}
    */
@@ -221,6 +227,21 @@ class Viewport {
     return this.rowHeaderWidth;
   }
 
+  /**
+   * @returns {number}
+   */
+  getViewportWidth() {
+    const containerWidth = this.getWorkspaceWidth();
+    if (containerWidth === Infinity) {
+      return containerWidth;
+    }
+    const rowHeaderWidth = this.getRowHeaderWidth();
+    if (rowHeaderWidth > 0) {
+      return containerWidth - rowHeaderWidth;
+    }
+    return containerWidth;
+  }
+
   /**
    * Creates rows calculators. The type of the calculations can be chosen from the list:
    *  - 'rendered' Calculates rows that should be rendered within the current table's viewport;
@@ -263,6 +284,7 @@ class Viewport {
       viewportHeight: height,
       scrollOffset: pos,
       totalRows: wtSettings.getSetting('totalRows'),
+      defaultRowHeight: this.instance.stylesHandler.getDefaultRowHeight(),
       rowHeightFn: sourceRow => wtTable.getRowHeight(sourceRow),
       overrideFn: wtSettings.getSettingPure('viewportRowCalculatorOverride'),
       horizontalScrollbarHeight: scrollbarHeight