handsontable 0.0.0-next-a34a8db-20241121 → 0.0.0-next-a148bc1-20241121

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

@@ -7,21 +7,27 @@ 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;
@@ -30,9 +36,20 @@ export default class NodesPool {
   /**
    * Obtains an element. The returned elements in the feature can be cached.
    *
+   * @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);
+
+    // node.dataset.id = key; // Uncomment for debug purposes
+    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,41 @@ 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.
+     * @type {number[]}
+     */
+    _defineProperty(this, "staleNodeIndexes", []);
+    /**
+     * 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();
   }
 
   /**
@@ -84,6 +96,14 @@ class OrderView {
     return this;
   }
 
+  /**
+   * @param {number} sourceIndex The source index.
+   * @returns {boolean}
+   */
+  hasStaleContent(sourceIndex) {
+    return this.staleNodeIndexes.includes(sourceIndex);
+  }
+
   /**
    * Checks if this instance of the view shares the root node with another instance. This happens only once when
    * a row (TR) as a root node is managed by two OrderView instances. If this happens another DOM injection
@@ -116,30 +136,44 @@ 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);
+
+    // @TODO(perf-tip): Only nodes which are first time rendered (hasn't any inner content) can be marked as stale
+    // e.q `name !== 'none' && !node.firstChild`.
+    if (name !== 'none') {
+      this.staleNodeIndexes.push(nodeIndex);
+    }
+    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 +182,8 @@ 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.staleNodeIndexes.length = 0;
+    this.leads = this.viewDiffer.diff();
   }
 
   /**
@@ -179,28 +191,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;
-    }
-    let node = rootNode.childNodes[visualIndex];
-    if (node.tagName !== this.childNodeType) {
-      const newNode = this.nodesPool();
-      rootNode.replaceChild(newNode, node);
-      node = newNode;
+    if (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
     }
-    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;

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

@@ -3,8 +3,8 @@ import "core-js/modules/es.array.push.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 { WORKING_SPACE_TOP, WORKING_SPACE_BOTTOM } from "./constants.mjs";
-import ViewSizeSet from "./viewSizeSet.mjs";
+import { ViewSizeSet } from "./viewSizeSet.mjs";
+import { ViewDiffer } from "./viewDiffer/index.mjs";
 /**
  * Executive model for each table renderer. It's responsible for injecting DOM nodes in a
  * specified order and adjusting the number of elements in the root node.
@@ -13,8 +13,8 @@ import ViewSizeSet from "./viewSizeSet.mjs";
  *
  * @class {OrderView}
  */
-export default class OrderView {
-  constructor(rootNode, nodesPool, childNodeType) {
+export class OrderView {
+  constructor(rootNode, nodesPool) {
     /**
      * The root node to manage with.
      *
@@ -24,7 +24,7 @@ export default class OrderView {
     /**
      * Factory for newly created DOM elements.
      *
-     * @type {Function}
+     * @type {function(number): HTMLElement}
      */
     _defineProperty(this, "nodesPool", void 0);
     /**
@@ -34,26 +34,39 @@ export default class OrderView {
      */
     _defineProperty(this, "sizeSet", new 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(this.sizeSet));
     /**
-     * The list of DOM elements which are rendered for this render cycle.
+     * @type {number[]}
+     */
+    _defineProperty(this, "staleNodeIndexes", []);
+    /**
+     * 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();
   }
 
   /**
@@ -80,6 +93,14 @@ export default class OrderView {
     return this;
   }
 
+  /**
+   * @param {number} sourceIndex The source index.
+   * @returns {boolean}
+   */
+  hasStaleContent(sourceIndex) {
+    return this.staleNodeIndexes.includes(sourceIndex);
+  }
+
   /**
    * Checks if this instance of the view shares the root node with another instance. This happens only once when
    * a row (TR) as a root node is managed by two OrderView instances. If this happens another DOM injection
@@ -112,30 +133,44 @@ export default 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(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);
+
+    // @TODO(perf-tip): Only nodes which are first time rendered (hasn't any inner content) can be marked as stale
+    // e.q `name !== 'none' && !node.firstChild`.
+    if (name !== 'none') {
+      this.staleNodeIndexes.push(nodeIndex);
+    }
+    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;
   }
 
   /**
@@ -144,30 +179,8 @@ export default 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(WORKING_SPACE_BOTTOM)) {
-        rootNode.appendChild(newNode);
-      } else {
-        rootNode.insertBefore(newNode, rootNode.firstChild);
-      }
-      childElementCount += 1;
-    }
-    const isSharedPlacedOnTop = isShared && sizeSet.isPlaceOn(WORKING_SPACE_TOP);
-    while (childElementCount > nextSize) {
-      rootNode.removeChild(isSharedPlacedOnTop ? rootNode.firstChild : rootNode.lastChild);
-      childElementCount -= 1;
-    }
+    this.staleNodeIndexes.length = 0;
+    this.leads = this.viewDiffer.diff();
   }
 
   /**
@@ -175,27 +188,18 @@ export default 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(WORKING_SPACE_BOTTOM)) {
-      visualIndex += sizeSet.sharedSize.nextSize;
-    }
-    let node = rootNode.childNodes[visualIndex];
-    if (node.tagName !== this.childNodeType) {
-      const newNode = this.nodesPool();
-      rootNode.replaceChild(newNode, node);
-      node = newNode;
+    if (this.leads.length > 0) {
+      this.applyCommand(this.leads.shift());
     }
-    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());
+    }
+  }
 }