handsontable 15.0.0 → 15.1.0-next-dfdf994-20250206

package/3rdparty/walkontable/src/renderer/rows.mjs

@@ -2,11 +2,11 @@ import "core-js/modules/es.error.cause.js";
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import BaseRenderer from "./_base.mjs";
-import { warn } from "./../../../../helpers/console.mjs";
-import { toSingleLine } from "./../../../../helpers/templateLiteralTag.mjs";
-import { OrderView } from "./../utils/orderView/index.mjs";
-import { addClass, removeClass, setAttribute } from "../../../../helpers/dom/element.mjs";
+import { BaseRenderer } from "./_base.mjs";
+import { warn } from "../../../../helpers/console.mjs";
+import { toSingleLine } from "../../../../helpers/templateLiteralTag.mjs";
+import { OrderView } from "../utils/orderView/index.mjs";
+import { addClass, hasClass, removeClass, setAttribute } from "../../../../helpers/dom/element.mjs";
 import { A11Y_ROW, A11Y_ROWGROUP, A11Y_ROWINDEX } from "../../../../helpers/a11y.mjs";
 const ROW_CLASSNAMES = {
   rowEven: 'ht__row_even',
@@ -26,7 +26,7 @@ let performanceWarningAppeared = false;
  *
  * @class {RowsRenderer}
  */
-export default class RowsRenderer extends BaseRenderer {
+export class RowsRenderer extends BaseRenderer {
   constructor(rootNode) {
     super('TR', rootNode);
     /**
@@ -35,7 +35,7 @@ export default class RowsRenderer extends BaseRenderer {
      * @type {WeakMap}
      */
     _defineProperty(this, "orderView", void 0);
-    this.orderView = new OrderView(rootNode, sourceRowIndex => this.nodesPool.obtain(sourceRowIndex), this.nodeType);
+    this.orderView = new OrderView(rootNode, sourceRowIndex => this.nodesPool.obtain(sourceRowIndex));
   }
 
   /**
@@ -48,6 +48,16 @@ export default class RowsRenderer extends BaseRenderer {
     return this.orderView.getNode(visualIndex);
   }
 
+  /**
+   * Checks if the the row is marked as "stale" and has to be rerendered.
+   *
+   * @param {number} visualIndex Visual index of the rendered node (it always goeas from 0 to N).
+   * @returns {boolean}
+   */
+  hasStaleContent(visualIndex) {
+    return this.orderView.hasStaleContent(visualIndex);
+  }
+
   /**
    * Renders the cells.
    */
@@ -75,10 +85,13 @@ export default class RowsRenderer extends BaseRenderer {
         // `aria-rowindex` is incremented by both tbody and thead rows.
         A11Y_ROWINDEX(sourceRowIndex + ((_this$table$rowUtils$ = (_this$table$rowUtils = this.table.rowUtils) === null || _this$table$rowUtils === void 0 || (_this$table$rowUtils = _this$table$rowUtils.dataAccessObject) === null || _this$table$rowUtils === void 0 ? void 0 : _this$table$rowUtils.columnHeaders.length) !== null && _this$table$rowUtils$ !== void 0 ? _this$table$rowUtils$ : 0) + 1)]);
       }
-      removeClass(TR, [ROW_CLASSNAMES.rowEven, ROW_CLASSNAMES.rowOdd]);
       if ((sourceRowIndex + 1) % 2 === 0) {
-        addClass(TR, ROW_CLASSNAMES.rowEven);
-      } else {
+        if (!hasClass(TR, ROW_CLASSNAMES.rowEven)) {
+          removeClass(TR, ROW_CLASSNAMES.rowOdd);
+          addClass(TR, ROW_CLASSNAMES.rowEven);
+        }
+      } else if (!hasClass(TR, ROW_CLASSNAMES.rowOdd)) {
+        removeClass(TR, ROW_CLASSNAMES.rowEven);
         addClass(TR, ROW_CLASSNAMES.rowOdd);
       }
     }

package/3rdparty/walkontable/src/renderer/table.js

@@ -335,4 +335,4 @@ class TableRenderer {
     }
   }
 }
-exports.default = TableRenderer;
+exports.TableRenderer = TableRenderer;

package/3rdparty/walkontable/src/renderer/table.mjs

@@ -46,7 +46,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  *
  * @class {RowsRenderer}
  */
-export default class TableRenderer {
+export class TableRenderer {
   constructor(rootNode) {
     let {
       cellRenderer,

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

@@ -477,9 +477,17 @@ class Border {
         const toTdOffsetTop = trimToWindow ? toTD.getBoundingClientRect().top : toTD.offsetTop;
         const cornerBottomEdge = toTdOffsetTop + (0, _element.outerHeight)(toTD) + parseInt(this.cornerDefaultStyle.height, 10) / 2;
         const cornerOverlappingContainer = cornerBottomEdge >= (0, _element.innerHeight)(trimmingContainer);
+        const isClassicTheme = this.wot.stylesHandler.isClassicTheme();
         if (cornerOverlappingContainer) {
-          this.cornerStyle.top = `${Math.floor(top + height + this.cornerCenterPointOffset - cornerHalfHeight - cornerBorderCompensation)}px`;
-          this.cornerStyle.borderBottomWidth = 0;
+          const cornerTopPosition = Math.floor(top + height + this.cornerCenterPointOffset - cornerHalfHeight - cornerBorderCompensation);
+          if (isClassicTheme) {
+            // styles for classic theme
+            this.cornerStyle.top = `${cornerTopPosition}px`;
+            this.cornerStyle.borderBottomWidth = 0;
+          } else {
+            // styles for ht-theme
+            this.cornerStyle.top = `${cornerTopPosition - 1}px`;
+          }
         }
       }
       this.cornerStyle.display = 'block';

package/3rdparty/walkontable/src/selection/border/border.mjs

@@ -474,9 +474,17 @@ class Border {
         const toTdOffsetTop = trimToWindow ? toTD.getBoundingClientRect().top : toTD.offsetTop;
         const cornerBottomEdge = toTdOffsetTop + outerHeight(toTD) + parseInt(this.cornerDefaultStyle.height, 10) / 2;
         const cornerOverlappingContainer = cornerBottomEdge >= innerHeight(trimmingContainer);
+        const isClassicTheme = this.wot.stylesHandler.isClassicTheme();
         if (cornerOverlappingContainer) {
-          this.cornerStyle.top = `${Math.floor(top + height + this.cornerCenterPointOffset - cornerHalfHeight - cornerBorderCompensation)}px`;
-          this.cornerStyle.borderBottomWidth = 0;
+          const cornerTopPosition = Math.floor(top + height + this.cornerCenterPointOffset - cornerHalfHeight - cornerBorderCompensation);
+          if (isClassicTheme) {
+            // styles for classic theme
+            this.cornerStyle.top = `${cornerTopPosition}px`;
+            this.cornerStyle.borderBottomWidth = 0;
+          } else {
+            // styles for ht-theme
+            this.cornerStyle.top = `${cornerTopPosition - 1}px`;
+          }
         }
       }
       this.cornerStyle.display = 'block';

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

@@ -13,30 +13,45 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 class NodesPool {
   constructor(nodeType) {
     /**
-     * Node type to generate (ew 'th', 'td').
+     * Node type to generate (e.g. 'TH', 'TD').
      *
      * @type {string}
      */
     _defineProperty(this, "nodeType", void 0);
+    /**
+     * The holder for all created DOM nodes (THs, TDs).
+     *
+     * @type {Map<string, HTMLElement>}
+     */
+    _defineProperty(this, "pool", new Map());
     this.nodeType = nodeType.toUpperCase();
   }
 
   /**
    * Set document owner for this instance.
    *
-   * @param {HTMLDocument} rootDocument The document window owner.
+   * @param {Document} rootDocument The document window owner.
    */
   setRootDocument(rootDocument) {
     this.rootDocument = rootDocument;
   }
 
   /**
-   * Obtains an element. The returned elements in the feature can be cached.
+   * Obtains an element.
    *
+   * @param {number} rowIndex The row index.
+   * @param {number} [columnIndex] The column index.
    * @returns {HTMLElement}
    */
-  obtain() {
-    return this.rootDocument.createElement(this.nodeType);
+  obtain(rowIndex, columnIndex) {
+    const hasColumnIndex = typeof columnIndex === 'number';
+    const key = hasColumnIndex ? `${rowIndex}x${columnIndex}` : rowIndex.toString();
+    if (this.pool.has(key)) {
+      return this.pool.get(key);
+    }
+    const node = this.rootDocument.createElement(this.nodeType);
+    this.pool.set(key, node);
+    return node;
   }
 }
-exports.default = NodesPool;
+exports.NodesPool = NodesPool;

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

@@ -7,32 +7,47 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  *
  * @class {NodesPool}
  */
-export default class NodesPool {
+export class NodesPool {
   constructor(nodeType) {
     /**
-     * Node type to generate (ew 'th', 'td').
+     * Node type to generate (e.g. 'TH', 'TD').
      *
      * @type {string}
      */
     _defineProperty(this, "nodeType", void 0);
+    /**
+     * The holder for all created DOM nodes (THs, TDs).
+     *
+     * @type {Map<string, HTMLElement>}
+     */
+    _defineProperty(this, "pool", new Map());
     this.nodeType = nodeType.toUpperCase();
   }
 
   /**
    * Set document owner for this instance.
    *
-   * @param {HTMLDocument} rootDocument The document window owner.
+   * @param {Document} rootDocument The document window owner.
    */
   setRootDocument(rootDocument) {
     this.rootDocument = rootDocument;
   }
 
   /**
-   * Obtains an element. The returned elements in the feature can be cached.
+   * Obtains an element.
    *
+   * @param {number} rowIndex The row index.
+   * @param {number} [columnIndex] The column index.
    * @returns {HTMLElement}
    */
-  obtain() {
-    return this.rootDocument.createElement(this.nodeType);
+  obtain(rowIndex, columnIndex) {
+    const hasColumnIndex = typeof columnIndex === 'number';
+    const key = hasColumnIndex ? `${rowIndex}x${columnIndex}` : rowIndex.toString();
+    if (this.pool.has(key)) {
+      return this.pool.get(key);
+    }
+    const node = this.rootDocument.createElement(this.nodeType);
+    this.pool.set(key, node);
+    return node;
   }
 }

package/3rdparty/walkontable/src/utils/orderView/index.js

@@ -1,8 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-var _view = _interopRequireDefault(require("./view"));
-exports.OrderView = _view.default;
-var _sharedView = _interopRequireDefault(require("./sharedView"));
-exports.SharedOrderView = _sharedView.default;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _view = require("./view");
+exports.OrderView = _view.OrderView;
+var _sharedView = require("./sharedView");
+exports.SharedOrderView = _sharedView.SharedOrderView;

package/3rdparty/walkontable/src/utils/orderView/index.mjs

@@ -1,3 +1,3 @@
-import OrderView from "./view.mjs";
-import SharedOrderView from "./sharedView.mjs";
+import { OrderView } from "./view.mjs";
+import { SharedOrderView } from "./sharedView.mjs";
 export { OrderView, SharedOrderView };

package/3rdparty/walkontable/src/utils/orderView/sharedView.js

@@ -1,14 +1,13 @@
 "use strict";
 
 exports.__esModule = true;
-var _view = _interopRequireDefault(require("./view"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _view = require("./view");
 /**
  * Executive model for TR root nodes.
  *
  * @class {SharedOrderView}
  */
-class SharedOrderView extends _view.default {
+class SharedOrderView extends _view.OrderView {
   /**
    * The method results in merging external order view into the current order. This happens only for order views which
    * operate on the same root node.
@@ -43,4 +42,4 @@ class SharedOrderView extends _view.default {
     return this;
   }
 }
-exports.default = SharedOrderView;
+exports.SharedOrderView = SharedOrderView;

package/3rdparty/walkontable/src/utils/orderView/sharedView.mjs

@@ -1,10 +1,10 @@
-import OrderView from "./view.mjs";
+import { OrderView } from "./view.mjs";
 /**
  * Executive model for TR root nodes.
  *
  * @class {SharedOrderView}
  */
-export default class SharedOrderView extends OrderView {
+export class SharedOrderView extends OrderView {
   /**
    * The method results in merging external order view into the current order. This happens only for order views which
    * operate on the same root node.

package/3rdparty/walkontable/src/utils/orderView/view.js

@@ -3,9 +3,8 @@
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.array.push.js");
-var _constants = require("./constants");
-var _viewSizeSet = _interopRequireDefault(require("./viewSizeSet"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _viewSizeSet = require("./viewSizeSet");
+var _viewDiffer = require("./viewDiffer");
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -18,7 +17,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @class {OrderView}
  */
 class OrderView {
-  constructor(rootNode, nodesPool, childNodeType) {
+  constructor(rootNode, nodesPool) {
     /**
      * The root node to manage with.
      *
@@ -28,7 +27,7 @@ class OrderView {
     /**
      * Factory for newly created DOM elements.
      *
-     * @type {Function}
+     * @type {function(number): HTMLElement}
      */
     _defineProperty(this, "nodesPool", void 0);
     /**
@@ -36,28 +35,37 @@ class OrderView {
      *
      * @type {ViewSizeSet}
      */
-    _defineProperty(this, "sizeSet", new _viewSizeSet.default());
+    _defineProperty(this, "sizeSet", new _viewSizeSet.ViewSizeSet());
     /**
-     * Node type which the order view will manage while rendering the DOM elements.
+     * The list of DOM elements which are rendered for this render cycle.
      *
-     * @type {string}
+     * @type {HTMLElement[]}
      */
-    _defineProperty(this, "childNodeType", void 0);
+    _defineProperty(this, "collectedNodes", []);
     /**
-     * The visual index of currently processed row.
+     * The differ which calculates the differences between current and next view. It generates
+     * commands that are processed by the OrderView (see `applyCommand` method).
      *
-     * @type {number}
+     * @type {ViewDiffer}
      */
-    _defineProperty(this, "visualIndex", 0);
+    _defineProperty(this, "viewDiffer", new _viewDiffer.ViewDiffer(this.sizeSet));
     /**
-     * The list of DOM elements which are rendered for this render cycle.
+     * The list of render commands to execute. The command is an array with the following
+     * structure: [
+     *   [
+     *     'prepend' | 'append' | 'insert_before' | 'replace' | 'remove', // command name
+     *     10, // processed node index
+     *     9,  // previous node index (only for 'insert_before' and 'replace' commands)
+     *     8   // node index to remove (only for 'insert_before' command)
+     *   ],
+     *   ...
+     * ].
      *
-     * @type {HTMLElement[]}
+     * @type {Array[]}
      */
-    _defineProperty(this, "collectedNodes", []);
+    _defineProperty(this, "leads", []);
     this.rootNode = rootNode;
     this.nodesPool = nodesPool;
-    this.childNodeType = childNodeType.toUpperCase();
   }
 
   /**
@@ -116,30 +124,38 @@ class OrderView {
   }
 
   /**
-   * Returns rendered child count for this instance.
+   * Applies the commands generated by the differ into the specific DOM operations.
    *
-   * @returns {number}
+   * @param {Array} command The command to apply.
    */
-  getRenderedChildCount() {
+  applyCommand(command) {
     const {
-      rootNode,
-      sizeSet
+      rootNode
     } = this;
-    let childElementCount = 0;
-    if (this.isSharedViewSet()) {
-      let element = rootNode.firstElementChild;
-      while (element) {
-        if (element.tagName === this.childNodeType) {
-          childElementCount += 1;
-        } else if (sizeSet.isPlaceOn(_constants.WORKING_SPACE_TOP)) {
-          break;
-        }
-        element = element.nextElementSibling;
-      }
-    } else {
-      childElementCount = rootNode.childElementCount;
+    const [name, nodeIndex, nodePrevIndex, nodeIndexToRemove] = command;
+    const node = this.nodesPool(nodeIndex);
+    this.collectedNodes.push(node);
+    switch (name) {
+      case 'prepend':
+        rootNode.insertBefore(node, rootNode.firstChild);
+        break;
+      case 'append':
+        rootNode.appendChild(node);
+        break;
+      case 'insert_before':
+        rootNode.insertBefore(node, this.nodesPool(nodePrevIndex));
+        // To keep the constant length of child nodes (after inserting a node) remove the last child.
+        rootNode.removeChild(this.nodesPool(nodeIndexToRemove));
+        break;
+      case 'replace':
+        rootNode.replaceChild(node, this.nodesPool(nodePrevIndex));
+        break;
+      case 'remove':
+        rootNode.removeChild(node);
+        break;
+      default:
+        break;
     }
-    return childElementCount;
   }
 
   /**
@@ -148,30 +164,7 @@ class OrderView {
    */
   start() {
     this.collectedNodes.length = 0;
-    this.visualIndex = 0;
-    const {
-      rootNode,
-      sizeSet
-    } = this;
-    const isShared = this.isSharedViewSet();
-    const {
-      nextSize
-    } = sizeSet.getViewSize();
-    let childElementCount = this.getRenderedChildCount();
-    while (childElementCount < nextSize) {
-      const newNode = this.nodesPool();
-      if (!isShared || isShared && sizeSet.isPlaceOn(_constants.WORKING_SPACE_BOTTOM)) {
-        rootNode.appendChild(newNode);
-      } else {
-        rootNode.insertBefore(newNode, rootNode.firstChild);
-      }
-      childElementCount += 1;
-    }
-    const isSharedPlacedOnTop = isShared && sizeSet.isPlaceOn(_constants.WORKING_SPACE_TOP);
-    while (childElementCount > nextSize) {
-      rootNode.removeChild(isSharedPlacedOnTop ? rootNode.firstChild : rootNode.lastChild);
-      childElementCount -= 1;
-    }
+    this.leads = this.viewDiffer.diff();
   }
 
   /**
@@ -179,28 +172,19 @@ class OrderView {
    * This method has to be called as many times as the size count is met (to cover all previously rendered DOM elements).
    */
   render() {
-    const {
-      rootNode,
-      sizeSet
-    } = this;
-    let visualIndex = this.visualIndex;
-    if (this.isSharedViewSet() && sizeSet.isPlaceOn(_constants.WORKING_SPACE_BOTTOM)) {
-      visualIndex += sizeSet.sharedSize.nextSize;
+    if (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
     }
-    let node = rootNode.childNodes[visualIndex];
-    if (node.tagName !== this.childNodeType) {
-      const newNode = this.nodesPool();
-      rootNode.replaceChild(newNode, node);
-      node = newNode;
-    }
-    this.collectedNodes.push(node);
-    this.visualIndex += 1;
   }
 
   /**
    * Ends the render process.
    * This method has to be called only once (at the end) for the render cycle.
    */
-  end() {}
+  end() {
+    while (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
+    }
+  }
 }
-exports.default = OrderView;
+exports.OrderView = OrderView;