handsontable 0.0.0-next-2ae8e35-20240613 → 0.0.0-next-fd8b2aa-20240614

package/plugins/mergeCells/mergeCells.mjs

@@ -24,13 +24,13 @@ import AutofillCalculations from "./calculations/autofill.mjs";
 import SelectionCalculations from "./calculations/selection.mjs";
 import toggleMergeItem from "./contextMenuItem/toggleMerge.mjs";
 import { arrayEach } from "../../helpers/array.mjs";
-import { isObject, clone } from "../../helpers/object.mjs";
+import { isObject } from "../../helpers/object.mjs";
 import { warn } from "../../helpers/console.mjs";
 import { rangeEach } from "../../helpers/number.mjs";
-import { applySpanProperties } from "./utils.mjs";
 import { getStyle } from "../../helpers/dom/element.mjs";
 import { isChrome } from "../../helpers/browser.mjs";
 import { FocusOrder } from "./focusOrder.mjs";
+import { createMergeCellRenderer } from "./renderer.mjs";
 Hooks.getSingleton().register('beforeMergeCells');
 Hooks.getSingleton().register('afterMergeCells');
 Hooks.getSingleton().register('beforeUnmergeCells');
@@ -79,6 +79,7 @@ const SHORTCUTS_GROUP = PLUGIN_KEY;
 var _lastSelectedFocus = /*#__PURE__*/new WeakMap();
 var _lastFocusDelta = /*#__PURE__*/new WeakMap();
 var _focusOrder = /*#__PURE__*/new WeakMap();
+var _cellRenderer = /*#__PURE__*/new WeakMap();
 var _MergeCells_brand = /*#__PURE__*/new WeakSet();
 export class MergeCells extends BasePlugin {
   constructor() {
@@ -135,6 +136,12 @@ export class MergeCells extends BasePlugin {
       rowIndexMapper: this.hot.rowIndexMapper,
       columnIndexMapper: this.hot.columnIndexMapper
     }));
+    /**
+     * The cell renderer responsible for rendering the merged cells.
+     *
+     * @type {{before: Function, after: Function}}
+     */
+    _classPrivateFieldInitSpec(this, _cellRenderer, createMergeCellRenderer(this));
   }
   static get PLUGIN_KEY() {
     return PLUGIN_KEY;
@@ -236,94 +243,97 @@ export class MergeCells extends BasePlugin {
       return _assertClassBrand(_MergeCells_brand, _this, _onAfterIsMultipleSelection).call(_this, ...args);
     });
     this.addHook('afterRenderer', function () {
+      return _classPrivateFieldGet(_cellRenderer, _this).after(...arguments);
+    });
+    this.addHook('afterContextMenuDefaultOptions', function () {
       for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
         args[_key13] = arguments[_key13];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRenderer).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _addMergeActionsToContextMenu).call(_this, ...args);
     });
-    this.addHook('afterContextMenuDefaultOptions', function () {
+    this.addHook('afterGetCellMeta', function () {
       for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
         args[_key14] = arguments[_key14];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _addMergeActionsToContextMenu).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterGetCellMeta).call(_this, ...args);
     });
-    this.addHook('afterGetCellMeta', function () {
+    this.addHook('afterViewportRowCalculatorOverride', function () {
       for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
         args[_key15] = arguments[_key15];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterGetCellMeta).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportRowCalculatorOverride).call(_this, ...args);
     });
-    this.addHook('afterViewportRowCalculatorOverride', function () {
+    this.addHook('afterViewportColumnCalculatorOverride', function () {
       for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
         args[_key16] = arguments[_key16];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportRowCalculatorOverride).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportColumnCalculatorOverride).call(_this, ...args);
     });
-    this.addHook('afterViewportColumnCalculatorOverride', function () {
+    this.addHook('modifyAutofillRange', function () {
       for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
         args[_key17] = arguments[_key17];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterViewportColumnCalculatorOverride).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onModifyAutofillRange).call(_this, ...args);
     });
-    this.addHook('modifyAutofillRange', function () {
+    this.addHook('afterCreateCol', function () {
       for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
         args[_key18] = arguments[_key18];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onModifyAutofillRange).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateCol).call(_this, ...args);
     });
-    this.addHook('afterCreateCol', function () {
+    this.addHook('afterRemoveCol', function () {
       for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
         args[_key19] = arguments[_key19];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateCol).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveCol).call(_this, ...args);
     });
-    this.addHook('afterRemoveCol', function () {
+    this.addHook('afterCreateRow', function () {
       for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
         args[_key20] = arguments[_key20];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveCol).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateRow).call(_this, ...args);
     });
-    this.addHook('afterCreateRow', function () {
+    this.addHook('afterRemoveRow', function () {
       for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
         args[_key21] = arguments[_key21];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterCreateRow).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveRow).call(_this, ...args);
     });
-    this.addHook('afterRemoveRow', function () {
+    this.addHook('afterChange', function () {
       for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
         args[_key22] = arguments[_key22];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterRemoveRow).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterChange).call(_this, ...args);
     });
-    this.addHook('afterChange', function () {
+    this.addHook('beforeDrawBorders', function () {
       for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
         args[_key23] = arguments[_key23];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterChange).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeDrawAreaBorders).call(_this, ...args);
     });
-    this.addHook('beforeDrawBorders', function () {
+    this.addHook('afterDrawSelection', function () {
       for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
         args[_key24] = arguments[_key24];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeDrawAreaBorders).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onAfterDrawSelection).call(_this, ...args);
     });
-    this.addHook('afterDrawSelection', function () {
+    this.addHook('beforeRemoveCellClassNames', function () {
       for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
         args[_key25] = arguments[_key25];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onAfterDrawSelection).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeRemoveCellClassNames).call(_this, ...args);
     });
-    this.addHook('beforeRemoveCellClassNames', function () {
+    this.addHook('beforeBeginEditing', function () {
       for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
         args[_key26] = arguments[_key26];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeRemoveCellClassNames).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeBeginEditing).call(_this, ...args);
     });
-    this.addHook('beforeBeginEditing', function () {
+    this.addHook('modifyRowHeightByOverlayName', function () {
       for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
         args[_key27] = arguments[_key27];
       }
-      return _assertClassBrand(_MergeCells_brand, _this, _onBeforeBeginEditing).call(_this, ...args);
+      return _assertClassBrand(_MergeCells_brand, _this, _onModifyRowHeightByOverlayName).call(_this, ...args);
     });
     this.addHook('beforeUndoStackChange', (action, source) => {
       if (source === 'MergeCells') {
@@ -414,24 +424,26 @@ export class MergeCells extends BasePlugin {
    * @returns {boolean}
    */
   validateSetting(setting) {
-    let valid = true;
     if (!setting) {
       return false;
     }
     if (MergedCellCoords.containsNegativeValues(setting)) {
       warn(MergedCellCoords.NEGATIVE_VALUES_WARNING(setting));
-      valid = false;
-    } else if (MergedCellCoords.isOutOfBounds(setting, this.hot.countRows(), this.hot.countCols())) {
+      return false;
+    }
+    if (MergedCellCoords.isOutOfBounds(setting, this.hot.countRows(), this.hot.countCols())) {
       warn(MergedCellCoords.IS_OUT_OF_BOUNDS_WARNING(setting));
-      valid = false;
-    } else if (MergedCellCoords.isSingleCell(setting)) {
+      return false;
+    }
+    if (MergedCellCoords.isSingleCell(setting)) {
       warn(MergedCellCoords.IS_SINGLE_CELL(setting));
-      valid = false;
-    } else if (MergedCellCoords.containsZeroSpan(setting)) {
+      return false;
+    }
+    if (MergedCellCoords.containsZeroSpan(setting)) {
       warn(MergedCellCoords.ZERO_SPAN_WARNING(setting));
-      valid = false;
+      return false;
     }
-    return valid;
+    return true;
   }
 
   /**
@@ -612,7 +624,7 @@ export class MergeCells extends BasePlugin {
   unmergeRange(cellRange) {
     let auto = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     const mergedCells = this.mergedCellsCollection.getWithinRange(cellRange);
-    if (!mergedCells) {
+    if (mergedCells.length === 0) {
       return;
     }
     this.hot.runHooks('beforeUnmergeCells', cellRange, auto);
@@ -1116,47 +1128,6 @@ function _addMergeActionsToContextMenu(defaultOptions) {
     name: '---------'
   }, toggleMergeItem(this));
 }
-/**
- * `afterRenderer` hook callback.
- *
- * @param {HTMLElement} TD The cell to be modified.
- * @param {number} row Row index.
- * @param {number} col Visual column index.
- */
-function _onAfterRenderer(TD, row, col) {
-  const mergedCell = this.mergedCellsCollection.get(row, col);
-  if (isObject(mergedCell)) {
-    // We shouldn't override data in the collection.
-    const mergedCellCopy = clone(mergedCell);
-    const {
-      rowIndexMapper: rowMapper,
-      columnIndexMapper: columnMapper
-    } = this.hot;
-    const {
-      row: mergeRow,
-      col: mergeColumn,
-      colspan,
-      rowspan
-    } = mergedCellCopy;
-    const [lastMergedRowIndex, lastMergedColumnIndex] = this.translateMergedCellToRenderable(mergeRow, rowspan, mergeColumn, colspan);
-    const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
-    const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
-    const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.
-    const maxColSpan = lastMergedColumnIndex - renderedColumnIndex + 1; // Number of rendered columns.
-
-    // We just try to determine some values basing on the actual number of rendered indexes (some columns may be hidden).
-    mergedCellCopy.row = rowMapper.getNearestNotHiddenIndex(mergedCellCopy.row, 1);
-    // We just try to determine some values basing on the actual number of rendered indexes (some columns may be hidden).
-    mergedCellCopy.col = columnMapper.getNearestNotHiddenIndex(mergedCellCopy.col, 1);
-    // The `rowSpan` property for a `TD` element should be at most equal to number of rendered rows in the merge area.
-    mergedCellCopy.rowspan = Math.min(mergedCellCopy.rowspan, maxRowSpan);
-    // The `colSpan` property for a `TD` element should be at most equal to number of rendered columns in the merge area.
-    mergedCellCopy.colspan = Math.min(mergedCellCopy.colspan, maxColSpan);
-    applySpanProperties(TD, mergedCellCopy, row, col);
-  } else {
-    applySpanProperties(TD, null, row, col);
-  }
-}
 /**
  * Clears the last selected coordinates before setting a new selection range.
  */
@@ -1298,17 +1269,11 @@ function _onModifyAutofillRange(drag, select) {
     dragArea = select;
     return dragArea;
   }
-  const mergedCellsWithinSelectionArea = this.mergedCellsCollection.getWithinRange({
-    from: {
-      row: select[0],
-      col: select[1]
-    },
-    to: {
-      row: select[2],
-      col: select[3]
-    }
-  });
-  if (!mergedCellsWithinSelectionArea) {
+  const from = this.hot._createCellCoords(select[0], select[1]);
+  const to = this.hot._createCellCoords(select[2], select[3]);
+  const range = this.hot._createCellRange(from, from, to);
+  const mergedCellsWithinSelectionArea = this.mergedCellsCollection.getWithinRange(range);
+  if (mergedCellsWithinSelectionArea.length === 0) {
     return dragArea;
   }
   dragArea = this.autofillCalculations.snapDragArea(select, dragArea, dragDirection, mergedCellsWithinSelectionArea);
@@ -1432,4 +1397,80 @@ function _onBeforeBeginEditing(row, column, initialValue, event) {
   const from = this.hot._createCellCoords(mergeCell.row, mergeCell.col);
   const to = this.hot._createCellCoords(mergeCell.row + mergeCell.rowspan - 1, mergeCell.col + mergeCell.colspan - 1);
   return this.hot.selection.getLayerLevel() === 0 && selection.isEqual(this.hot._createCellRange(from, from, to));
+}
+/**
+ * Hook used to modify the row height depends on the merged cells in the row.
+ *
+ * @param {number} height The row height value provided by the Core.
+ * @param {number} row The visual row index.
+ * @param {string} overlayType The overlay type that is currently rendered.
+ * @returns {number}
+ */
+function _onModifyRowHeightByOverlayName(height, row, overlayType) {
+  if (this.hot.getSettings().rowHeaders ||
+  // merged cells do not work with the bottom overlays
+  overlayType === 'bottom' || overlayType === 'bottom_inline_start_corner') {
+    return height;
+  }
+  let firstColumn;
+  let lastColumn;
+  if (overlayType === 'master') {
+    firstColumn = this.hot.view.getFirstRenderedVisibleColumn();
+    lastColumn = this.hot.view.getLastRenderedVisibleColumn();
+  } else {
+    const activeOverlay = this.hot.view.getOverlayByName(overlayType);
+    firstColumn = this.hot.columnIndexMapper.getVisualFromRenderableIndex(activeOverlay.clone.wtTable.getFirstRenderedColumn());
+    lastColumn = this.hot.columnIndexMapper.getVisualFromRenderableIndex(activeOverlay.clone.wtTable.getLastRenderedColumn());
+  }
+  const firstMergedCellInRow = this.mergedCellsCollection.get(row, firstColumn);
+  if (!firstMergedCellInRow) {
+    return height;
+  }
+  const from = this.hot._createCellCoords(row, firstColumn);
+  const to = this.hot._createCellCoords(row, lastColumn);
+  const viewportRange = this.hot._createCellRange(from, from, to);
+  const mergedCellsWithinRange = this.mergedCellsCollection.getWithinRange(viewportRange);
+  const maxRowspan = mergedCellsWithinRange.reduce((acc, _ref) => {
+    let {
+      rowspan
+    } = _ref;
+    return Math.max(acc, rowspan);
+  }, 1);
+  let rowspanCorrection = 0;
+  if (mergedCellsWithinRange.length > 1 && mergedCellsWithinRange[0].rowspan < maxRowspan) {
+    rowspanCorrection = maxRowspan - mergedCellsWithinRange[0].rowspan;
+  }
+  mergedCellsWithinRange.forEach(_ref2 => {
+    var _height;
+    let {
+      rowspan
+    } = _ref2;
+    let rowspanAfterCorrection = 0;
+    if (overlayType === 'top' || overlayType === 'top_inline_start_corner') {
+      rowspanAfterCorrection = Math.min(maxRowspan, this.hot.view.countNotHiddenFixedRowsTop() - row);
+    } else {
+      rowspanAfterCorrection = rowspan - rowspanCorrection;
+    }
+    height = Math.max((_height = height) !== null && _height !== void 0 ? _height : 0, _assertClassBrand(_MergeCells_brand, this, _sumCellsHeights).call(this, row, rowspanAfterCorrection));
+  });
+  return height;
+}
+/**
+ * Sums the heights of the all cells that the merge cell consists of.
+ *
+ * @param {number} row The visual row index of the merged cell.
+ * @param {number} rowspan The rowspan value of the merged cell.
+ * @returns {number}
+ */
+function _sumCellsHeights(row, rowspan) {
+  const defaultHeight = this.hot.view._wt.wtSettings.getSettingPure('defaultRowHeight');
+  const autoRowSizePlugin = this.hot.getPlugin('autoRowSize');
+  let height = 0;
+  for (let i = row; i < row + rowspan; i++) {
+    if (!this.hot.rowIndexMapper.isHidden(i)) {
+      var _autoRowSizePlugin$ge;
+      height += (_autoRowSizePlugin$ge = autoRowSizePlugin === null || autoRowSizePlugin === void 0 ? void 0 : autoRowSizePlugin.getRowHeight(i)) !== null && _autoRowSizePlugin$ge !== void 0 ? _autoRowSizePlugin$ge : defaultHeight;
+    }
+  }
+  return height;
 }

package/plugins/mergeCells/renderer.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createMergeCellRenderer = createMergeCellRenderer;
+var _object = require("../../helpers/object");
+/**
+ * Creates a renderer object for the `MergeCells` plugin.
+ *
+ * @param {MergeCells} plugin The `MergeCells` plugin instance.
+ * @returns {{before: Function, after: Function}}
+ */
+function createMergeCellRenderer(plugin) {
+  const {
+    hot
+  } = plugin;
+  const {
+    rowIndexMapper: rowMapper,
+    columnIndexMapper: columnMapper
+  } = hot;
+
+  /**
+   * Runs before the cell is rendered.
+   */
+  function before() {}
+
+  /**
+   * Runs after the cell is rendered.
+   *
+   * @param {HTMLElement} TD The cell to be modified.
+   * @param {number} row Row index.
+   * @param {number} col Visual column index.
+   */
+  function after(TD, row, col) {
+    const mergedCell = plugin.mergedCellsCollection.get(row, col);
+    if (!(0, _object.isObject)(mergedCell)) {
+      TD.removeAttribute('rowspan');
+      TD.removeAttribute('colspan');
+      TD.style.display = '';
+      return;
+    }
+    const {
+      row: origRow,
+      col: origColumn,
+      colspan: origColspan,
+      rowspan: origRowspan
+    } = mergedCell;
+    const [lastMergedRowIndex, lastMergedColumnIndex] = plugin.translateMergedCellToRenderable(origRow, origRowspan, origColumn, origColspan);
+    const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
+    const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
+    const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.
+    const maxColSpan = lastMergedColumnIndex - renderedColumnIndex + 1; // Number of rendered columns.
+
+    const notHiddenRow = rowMapper.getNearestNotHiddenIndex(origRow, 1);
+    const notHiddenColumn = columnMapper.getNearestNotHiddenIndex(origColumn, 1);
+    const notHiddenRowspan = Math.min(origRowspan, maxRowSpan);
+    const notHiddenColspan = Math.min(origColspan, maxColSpan);
+    if (notHiddenRow === row && notHiddenColumn === col) {
+      TD.setAttribute('rowspan', notHiddenRowspan);
+      TD.setAttribute('colspan', notHiddenColspan);
+    } else {
+      TD.removeAttribute('rowspan');
+      TD.removeAttribute('colspan');
+      TD.style.display = 'none';
+    }
+  }
+  return {
+    before,
+    after
+  };
+}

package/plugins/mergeCells/renderer.mjs

@@ -0,0 +1,66 @@
+import { isObject } from "../../helpers/object.mjs";
+/**
+ * Creates a renderer object for the `MergeCells` plugin.
+ *
+ * @param {MergeCells} plugin The `MergeCells` plugin instance.
+ * @returns {{before: Function, after: Function}}
+ */
+export function createMergeCellRenderer(plugin) {
+  const {
+    hot
+  } = plugin;
+  const {
+    rowIndexMapper: rowMapper,
+    columnIndexMapper: columnMapper
+  } = hot;
+
+  /**
+   * Runs before the cell is rendered.
+   */
+  function before() {}
+
+  /**
+   * Runs after the cell is rendered.
+   *
+   * @param {HTMLElement} TD The cell to be modified.
+   * @param {number} row Row index.
+   * @param {number} col Visual column index.
+   */
+  function after(TD, row, col) {
+    const mergedCell = plugin.mergedCellsCollection.get(row, col);
+    if (!isObject(mergedCell)) {
+      TD.removeAttribute('rowspan');
+      TD.removeAttribute('colspan');
+      TD.style.display = '';
+      return;
+    }
+    const {
+      row: origRow,
+      col: origColumn,
+      colspan: origColspan,
+      rowspan: origRowspan
+    } = mergedCell;
+    const [lastMergedRowIndex, lastMergedColumnIndex] = plugin.translateMergedCellToRenderable(origRow, origRowspan, origColumn, origColspan);
+    const renderedRowIndex = rowMapper.getRenderableFromVisualIndex(row);
+    const renderedColumnIndex = columnMapper.getRenderableFromVisualIndex(col);
+    const maxRowSpan = lastMergedRowIndex - renderedRowIndex + 1; // Number of rendered columns.
+    const maxColSpan = lastMergedColumnIndex - renderedColumnIndex + 1; // Number of rendered columns.
+
+    const notHiddenRow = rowMapper.getNearestNotHiddenIndex(origRow, 1);
+    const notHiddenColumn = columnMapper.getNearestNotHiddenIndex(origColumn, 1);
+    const notHiddenRowspan = Math.min(origRowspan, maxRowSpan);
+    const notHiddenColspan = Math.min(origColspan, maxColSpan);
+    if (notHiddenRow === row && notHiddenColumn === col) {
+      TD.setAttribute('rowspan', notHiddenRowspan);
+      TD.setAttribute('colspan', notHiddenColspan);
+    } else {
+      TD.removeAttribute('rowspan');
+      TD.removeAttribute('colspan');
+      TD.style.display = 'none';
+    }
+  }
+  return {
+    before,
+    after
+  };
+}