handsontable 0.0.0-next-baf2fcf-20230809 → 0.0.0-next-be16baf-20230809

package/shortcuts/recorder.js

@@ -86,7 +86,7 @@ function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, call
     if (event.keyCode === 229 || result === false || (0, _event.isImmediatePropagationStopped)(event)) {
       return;
     }
-    const pressedKey = (0, _utils.normalizeEventKey)(event.key);
+    const pressedKey = (0, _utils.normalizeEventKey)(event);
     let extraModifierKeys = [];
     if (isModifierKey(pressedKey)) {
       modifierKeysObserver.press(pressedKey);
@@ -112,7 +112,7 @@ function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, call
     if (handleEvent(event) === false) {
       return;
     }
-    const pressedKey = (0, _utils.normalizeEventKey)(event.key);
+    const pressedKey = (0, _utils.normalizeEventKey)(event);
     if (isModifierKey(pressedKey) === false) {
       return;
     }

package/shortcuts/recorder.mjs

@@ -82,7 +82,7 @@ export function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDow
     if (event.keyCode === 229 || result === false || isImmediatePropagationStopped(event)) {
       return;
     }
-    const pressedKey = normalizeEventKey(event.key);
+    const pressedKey = normalizeEventKey(event);
     let extraModifierKeys = [];
     if (isModifierKey(pressedKey)) {
       modifierKeysObserver.press(pressedKey);
@@ -108,7 +108,7 @@ export function useRecorder(ownerWindow, handleEvent, beforeKeyDown, afterKeyDow
     if (handleEvent(event) === false) {
       return;
     }
-    const pressedKey = normalizeEventKey(event.key);
+    const pressedKey = normalizeEventKey(event);
     if (isModifierKey(pressedKey) === false) {
       return;
     }

package/shortcuts/utils.js

@@ -37,13 +37,27 @@ const getKeysList = normalizedKeys => {
 };
 
 /**
- * Normalize a `KeyboardEvent.key` property, to use it for keyboard shortcuts.
+ * The regex tests if the event.code matches to the pattern and it's used to extract letters and digits from
+ * the string.
+ */
+exports.getKeysList = getKeysList;
+const codeToKeyRegExp = new RegExp('^(?:Key|Digit)([A-Z0-9])$');
+
+/**
+ * Normalizes a keyboard event key value to a key before its modification. When the keyboard event
+ * is triggered with Alt, Control or Shift keys the `key` property contains modified key e.g. for Alt+L
+ * it will be `ł`. But that value is only valid for polish keyboard layout. To fix that limitations, for
+ * letters and digits the value is taken from the `code` property which holds original value before
+ * transformation.
  *
- * @param {string} key KeyboardEvent's key property.
+ * @param {Event} event The KeyboardEvent object.
  * @returns {string}
  */
-exports.getKeysList = getKeysList;
-const normalizeEventKey = key => {
-  return key.toLowerCase();
+const normalizeEventKey = _ref => {
+  let {
+    key,
+    code
+  } = _ref;
+  return (codeToKeyRegExp.test(code) ? code.replace(codeToKeyRegExp, '$1') : key).toLowerCase();
 };
 exports.normalizeEventKey = normalizeEventKey;

package/shortcuts/utils.mjs

@@ -33,11 +33,25 @@ export const getKeysList = normalizedKeys => {
 };
 
 /**
- * Normalize a `KeyboardEvent.key` property, to use it for keyboard shortcuts.
+ * The regex tests if the event.code matches to the pattern and it's used to extract letters and digits from
+ * the string.
+ */
+const codeToKeyRegExp = new RegExp('^(?:Key|Digit)([A-Z0-9])$');
+
+/**
+ * Normalizes a keyboard event key value to a key before its modification. When the keyboard event
+ * is triggered with Alt, Control or Shift keys the `key` property contains modified key e.g. for Alt+L
+ * it will be `ł`. But that value is only valid for polish keyboard layout. To fix that limitations, for
+ * letters and digits the value is taken from the `code` property which holds original value before
+ * transformation.
  *
- * @param {string} key KeyboardEvent's key property.
+ * @param {Event} event The KeyboardEvent object.
  * @returns {string}
  */
-export const normalizeEventKey = key => {
-  return key.toLowerCase();
+export const normalizeEventKey = _ref => {
+  let {
+    key,
+    code
+  } = _ref;
+  return (codeToKeyRegExp.test(code) ? code.replace(codeToKeyRegExp, '$1') : key).toLowerCase();
 };

package/tableView.js

@@ -312,11 +312,14 @@ class TableView {
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
       if (selection.isInProgress() && (0, _event.isLeftClick)(event)) {
-        // is left mouse button
         selection.finish();
       }
       priv.mouseDown = false;
-      if ((0, _element.isOutsideInput)(rootDocument.activeElement) || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
+      const isOutsideInputElement = (0, _element.isOutsideInput)(rootDocument.activeElement);
+      if (!isOutsideInputElement) {
+        return;
+      }
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
         this.instance.unlisten();
       }
     });
@@ -550,6 +553,40 @@ class TableView {
     return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
   }
 
+  /**
+   * The function returns the number of renderable column indexes within the passed range of the visual indexes.
+   *
+   * @param {number} columnStart The column visual start index.
+   * @param {number} columnEnd The column visual end index.
+   * @returns {number}
+   */
+  countRenderableColumnsInRange(columnStart, columnEnd) {
+    let count = 0;
+    for (let column = columnStart; column <= columnEnd; column++) {
+      if (this.instance.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * The function returns the number of renderable row indexes within the passed range of the visual indexes.
+   *
+   * @param {number} rowStart The row visual start index.
+   * @param {number} rowEnd The row visual end index.
+   * @returns {number}
+   */
+  countRenderableRowsInRange(rowStart, rowEnd) {
+    let count = 0;
+    for (let row = rowStart; row <= rowEnd; row++) {
+      if (this.instance.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -769,20 +806,40 @@ class TableView {
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
-      onScrollVertically: () => this.instance.runHooks('afterScrollVertically'),
-      onScrollHorizontally: () => this.instance.runHooks('afterScrollHorizontally'),
+      onScrollVertically: () => {
+        this.instance.runHooks('afterScrollVertically');
+        this.instance.runHooks('afterScroll');
+      },
+      onScrollHorizontally: () => {
+        this.instance.runHooks('afterScrollHorizontally');
+        this.instance.runHooks('afterScroll');
+      },
       onBeforeRemoveCellClassNames: () => this.instance.runHooks('beforeRemoveCellClassNames'),
       onBeforeHighlightingRowHeader: (renderableRow, headerLevel, highlightMeta) => {
         const rowMapper = this.instance.rowIndexMapper;
-        const visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        }
         const newVisualRow = this.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
-        return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        }
+        return newVisualRow;
       },
       onBeforeHighlightingColumnHeader: (renderableColumn, headerLevel, highlightMeta) => {
         const columnMapper = this.instance.columnIndexMapper;
-        const visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        }
         const newVisualColumn = this.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
-        return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        }
+        return newVisualColumn;
       },
       onAfterDrawSelection: (currentRow, currentColumn, layerLevel) => {
         let cornersOfSelection;
@@ -790,10 +847,7 @@ class TableView {
         const selectedRange = this.instance.selection.getSelectedRange();
         const selectionRangeSize = selectedRange.size();
         if (selectionRangeSize > 0) {
-          // Selection layers are stored from the "oldest" to the "newest". We should calculate the offset.
-          // Please look at the `SelectedRange` class and it's method for getting selection's layer for more information.
-          const selectionOffset = (layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0) + 1 - selectionRangeSize;
-          const selectionForLayer = selectedRange.peekByIndex(selectionOffset);
+          const selectionForLayer = selectedRange.peekByIndex(layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0);
           cornersOfSelection = [selectionForLayer.from.row, selectionForLayer.from.col, selectionForLayer.to.row, selectionForLayer.to.col];
         }
         return this.instance.runHooks('afterDrawSelection', visualRowIndex, visualColumnIndex, cornersOfSelection, layerLevel);
@@ -946,7 +1000,7 @@ class TableView {
    */
   isSelectedOnlyCell() {
     var _this$instance$getSel, _this$instance$getSel2;
-    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingle()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
+    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingleCell()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
   }
 
   /**

package/tableView.mjs

@@ -308,11 +308,14 @@ class TableView {
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
       if (selection.isInProgress() && isLeftClick(event)) {
-        // is left mouse button
         selection.finish();
       }
       priv.mouseDown = false;
-      if (isOutsideInput(rootDocument.activeElement) || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
+      const isOutsideInputElement = isOutsideInput(rootDocument.activeElement);
+      if (!isOutsideInputElement) {
+        return;
+      }
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
         this.instance.unlisten();
       }
     });
@@ -546,6 +549,40 @@ class TableView {
     return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
   }
 
+  /**
+   * The function returns the number of renderable column indexes within the passed range of the visual indexes.
+   *
+   * @param {number} columnStart The column visual start index.
+   * @param {number} columnEnd The column visual end index.
+   * @returns {number}
+   */
+  countRenderableColumnsInRange(columnStart, columnEnd) {
+    let count = 0;
+    for (let column = columnStart; column <= columnEnd; column++) {
+      if (this.instance.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * The function returns the number of renderable row indexes within the passed range of the visual indexes.
+   *
+   * @param {number} rowStart The row visual start index.
+   * @param {number} rowEnd The row visual end index.
+   * @returns {number}
+   */
+  countRenderableRowsInRange(rowStart, rowEnd) {
+    let count = 0;
+    for (let row = rowStart; row <= rowEnd; row++) {
+      if (this.instance.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -765,20 +802,40 @@ class TableView {
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
-      onScrollVertically: () => this.instance.runHooks('afterScrollVertically'),
-      onScrollHorizontally: () => this.instance.runHooks('afterScrollHorizontally'),
+      onScrollVertically: () => {
+        this.instance.runHooks('afterScrollVertically');
+        this.instance.runHooks('afterScroll');
+      },
+      onScrollHorizontally: () => {
+        this.instance.runHooks('afterScrollHorizontally');
+        this.instance.runHooks('afterScroll');
+      },
       onBeforeRemoveCellClassNames: () => this.instance.runHooks('beforeRemoveCellClassNames'),
       onBeforeHighlightingRowHeader: (renderableRow, headerLevel, highlightMeta) => {
         const rowMapper = this.instance.rowIndexMapper;
-        const visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        }
         const newVisualRow = this.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
-        return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        }
+        return newVisualRow;
       },
       onBeforeHighlightingColumnHeader: (renderableColumn, headerLevel, highlightMeta) => {
         const columnMapper = this.instance.columnIndexMapper;
-        const visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        }
         const newVisualColumn = this.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
-        return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        }
+        return newVisualColumn;
       },
       onAfterDrawSelection: (currentRow, currentColumn, layerLevel) => {
         let cornersOfSelection;
@@ -786,10 +843,7 @@ class TableView {
         const selectedRange = this.instance.selection.getSelectedRange();
         const selectionRangeSize = selectedRange.size();
         if (selectionRangeSize > 0) {
-          // Selection layers are stored from the "oldest" to the "newest". We should calculate the offset.
-          // Please look at the `SelectedRange` class and it's method for getting selection's layer for more information.
-          const selectionOffset = (layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0) + 1 - selectionRangeSize;
-          const selectionForLayer = selectedRange.peekByIndex(selectionOffset);
+          const selectionForLayer = selectedRange.peekByIndex(layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0);
           cornersOfSelection = [selectionForLayer.from.row, selectionForLayer.from.col, selectionForLayer.to.row, selectionForLayer.to.col];
         }
         return this.instance.runHooks('afterDrawSelection', visualRowIndex, visualColumnIndex, cornersOfSelection, layerLevel);
@@ -942,7 +996,7 @@ class TableView {
    */
   isSelectedOnlyCell() {
     var _this$instance$getSel, _this$instance$getSel2;
-    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingle()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
+    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingleCell()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
   }
 
   /**

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

@@ -1,295 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-require("core-js/modules/es.array.push.js");
-var _element = require("./../../../helpers/dom/element");
-var _border = _interopRequireDefault(require("./border"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * @class Selection
- */
-class Selection {
-  /**
-   * @param {object} settings The selection settings object. @todo type.
-   * @param {CellRange} cellRange The cell range instance.
-   */
-  constructor(settings, cellRange) {
-    this.settings = settings;
-    this.cellRange = cellRange || null;
-    this.instanceBorders = {};
-    this.classNames = [this.settings.className];
-    this.classNameGenerator = this.linearClassNameGenerator(this.settings.className, this.settings.layerLevel);
-  }
-
-  /**
-   * Each Walkontable clone requires it's own border for every selection. This method creates and returns selection
-   * borders per instance.
-   *
-   * @param {WalkontableFacade} wotInstance The Walkontable instance.
-   * @returns {Border}
-   */
-  getBorder(wotInstance) {
-    if (!this.instanceBorders[wotInstance.guid]) {
-      this.instanceBorders[wotInstance.guid] = new _border.default(wotInstance, this.settings);
-    }
-    return this.instanceBorders[wotInstance.guid];
-  }
-
-  /**
-   * Checks if selection is empty.
-   *
-   * @returns {boolean}
-   */
-  isEmpty() {
-    return this.cellRange === null;
-  }
-
-  /**
-   * Adds a cell coords to the selection.
-   *
-   * @param {CellCoords} coords The cell coordinates to add.
-   * @returns {Selection}
-   */
-  add(coords) {
-    if (this.isEmpty()) {
-      this.cellRange = this.settings.createCellRange(coords);
-    } else {
-      this.cellRange.expand(coords);
-    }
-    return this;
-  }
-
-  /**
-   * If selection range from or to property equals oldCoords, replace it with newCoords. Return boolean
-   * information about success.
-   *
-   * @param {CellCoords} oldCoords An old cell coordinates to replace.
-   * @param {CellCoords} newCoords The new cell coordinates.
-   * @returns {boolean}
-   */
-  replace(oldCoords, newCoords) {
-    if (!this.isEmpty()) {
-      if (this.cellRange.from.isEqual(oldCoords)) {
-        this.cellRange.from = newCoords;
-        return true;
-      }
-      if (this.cellRange.to.isEqual(oldCoords)) {
-        this.cellRange.to = newCoords;
-        return true;
-      }
-    }
-    return false;
-  }
-
-  /**
-   * Clears selection.
-   *
-   * @returns {Selection}
-   */
-  clear() {
-    this.cellRange = null;
-    return this;
-  }
-
-  /**
-   * Returns the top left (or top right in RTL) and bottom right (or bottom left in RTL) selection coordinates.
-   *
-   * @returns {Array} Returns array of coordinates for example `[1, 1, 5, 5]`.
-   */
-  getCorners() {
-    const topStart = this.cellRange.getOuterTopStartCorner();
-    const bottomEnd = this.cellRange.getOuterBottomEndCorner();
-    return [topStart.row, topStart.col, bottomEnd.row, bottomEnd.col];
-  }
-
-  /**
-   * Adds class name to cell element at given coords.
-   *
-   * @param {WalkontableFacade} wotInstance Walkontable instance.
-   * @param {number} sourceRow Cell row coord.
-   * @param {number} sourceColumn Cell column coord.
-   * @param {string} className Class name.
-   * @param {boolean} [markIntersections=false] If `true`, linear className generator will be used to add CSS classes
-   *                                            in a continuous way.
-   * @returns {Selection}
-   */
-  addClassAtCoords(wotInstance, sourceRow, sourceColumn, className) {
-    let markIntersections = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-    const TD = wotInstance.wtTable.getCell(this.settings.createCellCoords(sourceRow, sourceColumn));
-    if (typeof TD === 'object') {
-      let cellClassName = className;
-      if (markIntersections) {
-        cellClassName = this.classNameGenerator(TD);
-        if (!this.classNames.includes(cellClassName)) {
-          this.classNames.push(cellClassName);
-        }
-      }
-      (0, _element.addClass)(TD, cellClassName);
-    }
-    return this;
-  }
-
-  /**
-   * Generate helper for calculating classNames based on previously added base className.
-   * The generated className is always generated as a continuation of the previous className. For example, when
-   * the currently checked element has 'area-2' className the generated new className will be 'area-3'. When
-   * the element doesn't have any classNames than the base className will be returned ('area');.
-   *
-   * @param {string} baseClassName Base className to be used.
-   * @param {number} layerLevelOwner Layer level which the instance of the Selection belongs to.
-   * @returns {Function}
-   */
-  linearClassNameGenerator(baseClassName, layerLevelOwner) {
-    // TODO: Make this recursive function Proper Tail Calls (TCO/PTC) friendly.
-    return function calcClassName(element) {
-      let previousIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
-      if (layerLevelOwner === 0 || previousIndex === 0) {
-        return baseClassName;
-      }
-      let index = previousIndex >= 0 ? previousIndex : layerLevelOwner;
-      let className = baseClassName;
-      index -= 1;
-      const previousClassName = index === 0 ? baseClassName : `${baseClassName}-${index}`;
-      if ((0, _element.hasClass)(element, previousClassName)) {
-        const currentLayer = index + 1;
-        className = `${baseClassName}-${currentLayer}`;
-      } else {
-        className = calcClassName(element, index);
-      }
-      return className;
-    };
-  }
-
-  /**
-   * @param {WalkontableFacade} wotInstance The Walkontable instance.
-   */
-  draw(wotInstance) {
-    if (this.isEmpty()) {
-      if (this.settings.border) {
-        this.getBorder(wotInstance).disappear();
-      }
-      return;
-    }
-    const renderedRows = wotInstance.wtTable.getRenderedRowsCount();
-    const renderedColumns = wotInstance.wtTable.getRenderedColumnsCount();
-    const corners = this.getCorners();
-    const [topRow, topColumn, bottomRow, bottomColumn] = corners;
-    const {
-      highlightHeaderClassName,
-      highlightColumnClassName,
-      highlightRowClassName,
-      highlightOnlyClosestHeader,
-      selectionType
-    } = this.settings;
-    const isHeaderSelectionType = selectionType === void 0 || ['active-header', 'header'].includes(selectionType);
-    if (isHeaderSelectionType && topColumn !== null && bottomColumn !== null) {
-      let selectionColumnCursor = 0;
-      for (let column = 0; column < renderedColumns; column += 1) {
-        const sourceCol = wotInstance.wtTable.columnFilter.renderedToSource(column);
-        if (sourceCol >= topColumn && sourceCol <= bottomColumn) {
-          let THs = wotInstance.wtTable.getColumnHeaders(sourceCol);
-          const closestHeaderLevel = THs.length - 1;
-          if (highlightOnlyClosestHeader && THs.length > 1) {
-            THs = [THs[closestHeaderLevel]];
-          }
-          for (let headerLevel = 0; headerLevel < THs.length; headerLevel += 1) {
-            const newClasses = [];
-            let TH = THs[headerLevel];
-            if (highlightHeaderClassName) {
-              newClasses.push(highlightHeaderClassName);
-            }
-            if (highlightColumnClassName) {
-              newClasses.push(highlightColumnClassName);
-            }
-            headerLevel = highlightOnlyClosestHeader ? closestHeaderLevel : headerLevel;
-            const newSourceCol = wotInstance.getSetting('onBeforeHighlightingColumnHeader', sourceCol, headerLevel, {
-              selectionType,
-              columnCursor: selectionColumnCursor,
-              selectionWidth: bottomColumn - topColumn + 1,
-              classNames: newClasses
-            });
-            if (newSourceCol !== sourceCol) {
-              TH = wotInstance.wtTable.getColumnHeader(newSourceCol, headerLevel);
-            }
-            (0, _element.addClass)(TH, newClasses);
-          }
-          selectionColumnCursor += 1;
-        }
-      }
-    }
-    if (topRow !== null && bottomRow !== null) {
-      let selectionRowCursor = 0;
-      for (let row = 0; row < renderedRows; row += 1) {
-        const sourceRow = wotInstance.wtTable.rowFilter.renderedToSource(row);
-        if (isHeaderSelectionType && sourceRow >= topRow && sourceRow <= bottomRow) {
-          let THs = wotInstance.wtTable.getRowHeaders(sourceRow);
-          const closestHeaderLevel = THs.length - 1;
-          if (highlightOnlyClosestHeader && THs.length > 1) {
-            THs = [THs[closestHeaderLevel]];
-          }
-          for (let headerLevel = 0; headerLevel < THs.length; headerLevel += 1) {
-            const newClasses = [];
-            let TH = THs[headerLevel];
-            if (highlightHeaderClassName) {
-              newClasses.push(highlightHeaderClassName);
-            }
-            if (highlightRowClassName) {
-              newClasses.push(highlightRowClassName);
-            }
-            headerLevel = highlightOnlyClosestHeader ? closestHeaderLevel : headerLevel;
-            const newSourceRow = wotInstance.getSetting('onBeforeHighlightingRowHeader', sourceRow, headerLevel, {
-              selectionType,
-              rowCursor: selectionRowCursor,
-              selectionHeight: bottomRow - topRow + 1,
-              classNames: newClasses
-            });
-            if (newSourceRow !== sourceRow) {
-              TH = wotInstance.wtTable.getRowHeader(newSourceRow, headerLevel);
-            }
-            (0, _element.addClass)(TH, newClasses);
-          }
-          selectionRowCursor += 1;
-        }
-        if (topColumn !== null && bottomColumn !== null) {
-          for (let column = 0; column < renderedColumns; column += 1) {
-            const sourceCol = wotInstance.wtTable.columnFilter.renderedToSource(column);
-            if (sourceRow >= topRow && sourceRow <= bottomRow && sourceCol >= topColumn && sourceCol <= bottomColumn) {
-              // selected cell
-              if (this.settings.className) {
-                this.addClassAtCoords(wotInstance, sourceRow, sourceCol, this.settings.className, this.settings.markIntersections);
-              }
-            } else if (sourceRow >= topRow && sourceRow <= bottomRow) {
-              // selection is in this row
-              if (highlightRowClassName) {
-                this.addClassAtCoords(wotInstance, sourceRow, sourceCol, highlightRowClassName);
-              }
-            } else if (sourceCol >= topColumn && sourceCol <= bottomColumn) {
-              // selection is in this column
-              if (highlightColumnClassName) {
-                this.addClassAtCoords(wotInstance, sourceRow, sourceCol, highlightColumnClassName);
-              }
-            }
-            const additionalSelectionClass = wotInstance.getSetting('onAfterDrawSelection', sourceRow, sourceCol, this.settings.layerLevel);
-            if (typeof additionalSelectionClass === 'string') {
-              this.addClassAtCoords(wotInstance, sourceRow, sourceCol, additionalSelectionClass);
-            }
-          }
-        }
-      }
-    }
-    wotInstance.getSetting('onBeforeDrawBorders', corners, this.settings.className);
-    if (this.settings.border) {
-      // warning! border.appear modifies corners!
-      this.getBorder(wotInstance).appear(corners);
-    }
-  }
-
-  /**
-   * Cleans up all the DOM state related to a Selection instance. Call this prior to deleting a Selection instance.
-   */
-  destroy() {
-    Object.values(this.instanceBorders).forEach(border => border.destroy());
-  }
-}
-var _default = Selection;
-exports.default = _default;