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

package/selection/highlight/types/column.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createHighlight = createHighlight;
+var _src = require("../../../3rdparty/walkontable/src");
+var _visualSelection = _interopRequireDefault(require("../visualSelection"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Creates the new instance of Selection, responsible for highlighting cells in a columns and
+ * column headers.
+ * This type of selection can occur multiple times.
+ *
+ * @param {object} highlightParams A configuration object to create a highlight.
+ * @param {string} highlightParams.columnClassName Highlighted column' class name.
+ * @returns {Selection}
+ */
+function createHighlight(_ref) {
+  let {
+    columnClassName,
+    ...restOptions
+  } = _ref;
+  return new _visualSelection.default({
+    className: columnClassName,
+    ...restOptions,
+    selectionType: _src.HIGHLIGHT_COLUMN_TYPE
+  });
+}

package/selection/highlight/types/column.mjs

@@ -0,0 +1,22 @@
+import { HIGHLIGHT_COLUMN_TYPE } from "../../../3rdparty/walkontable/src/index.mjs";
+import VisualSelection from "../visualSelection.mjs";
+/**
+ * Creates the new instance of Selection, responsible for highlighting cells in a columns and
+ * column headers.
+ * This type of selection can occur multiple times.
+ *
+ * @param {object} highlightParams A configuration object to create a highlight.
+ * @param {string} highlightParams.columnClassName Highlighted column' class name.
+ * @returns {Selection}
+ */
+export function createHighlight(_ref) {
+  let {
+    columnClassName,
+    ...restOptions
+  } = _ref;
+  return new VisualSelection({
+    className: columnClassName,
+    ...restOptions,
+    selectionType: HIGHLIGHT_COLUMN_TYPE
+  });
+}

package/selection/highlight/types/customSelection.js

@@ -1,12 +1,13 @@
 "use strict";
 
 exports.__esModule = true;
-var _constants = require("../constants");
+exports.createHighlight = createHighlight;
+var _src = require("../../../3rdparty/walkontable/src");
 var _visualSelection = _interopRequireDefault(require("../visualSelection"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * Creates the new instance of Selection responsible for highlighting currently selected cell. This type of selection
- * can present on the table only one at the time.
+ * Creates the new instance of Selection responsible for highlighting currently selected cell.
+ * This type of selection can present on the table only one at the time.
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {object} highlightParams.border Border configuration.
@@ -19,12 +20,9 @@ function createHighlight(_ref) {
     visualCellRange,
     ...restOptions
   } = _ref;
-  const s = new _visualSelection.default({
+  return new _visualSelection.default({
     ...border,
     ...restOptions,
-    selectionType: _constants.CUSTOM_SELECTION_TYPE
+    selectionType: _src.HIGHLIGHT_CUSTOM_SELECTION_TYPE
   }, visualCellRange);
-  return s;
-}
-var _default = createHighlight;
-exports.default = _default;
+}

package/selection/highlight/types/customSelection.mjs

@@ -1,25 +1,23 @@
-import { CUSTOM_SELECTION_TYPE } from "../constants.mjs";
+import { HIGHLIGHT_CUSTOM_SELECTION_TYPE } from "../../../3rdparty/walkontable/src/index.mjs";
 import VisualSelection from "../visualSelection.mjs";
 /**
- * Creates the new instance of Selection responsible for highlighting currently selected cell. This type of selection
- * can present on the table only one at the time.
+ * Creates the new instance of Selection responsible for highlighting currently selected cell.
+ * This type of selection can present on the table only one at the time.
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {object} highlightParams.border Border configuration.
  * @param {object} highlightParams.visualCellRange Function to translate visual to renderable coords.
  * @returns {Selection}
  */
-function createHighlight(_ref) {
+export function createHighlight(_ref) {
   let {
     border,
     visualCellRange,
     ...restOptions
   } = _ref;
-  const s = new VisualSelection({
+  return new VisualSelection({
     ...border,
     ...restOptions,
-    selectionType: CUSTOM_SELECTION_TYPE
+    selectionType: HIGHLIGHT_CUSTOM_SELECTION_TYPE
   }, visualCellRange);
-  return s;
-}
-export default createHighlight;
+}

package/selection/highlight/types/fill.js

@@ -1,7 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-var _constants = require("../constants");
+exports.createHighlight = createHighlight;
+var _src = require("../../../3rdparty/walkontable/src");
 var _visualSelection = _interopRequireDefault(require("../visualSelection"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
@@ -15,16 +16,13 @@ function createHighlight(_ref) {
   let {
     ...restOptions
   } = _ref;
-  const s = new _visualSelection.default({
+  return new _visualSelection.default({
     className: 'fill',
     border: {
       width: 1,
       color: '#ff0000'
     },
     ...restOptions,
-    selectionType: _constants.FILL_TYPE
+    selectionType: _src.HIGHLIGHT_FILL_TYPE
   });
-  return s;
-}
-var _default = createHighlight;
-exports.default = _default;
+}

package/selection/highlight/types/fill.mjs

@@ -1,4 +1,4 @@
-import { FILL_TYPE } from "../constants.mjs";
+import { HIGHLIGHT_FILL_TYPE } from "../../../3rdparty/walkontable/src/index.mjs";
 import VisualSelection from "../visualSelection.mjs";
 /**
  * Creates the new instance of Selection, responsible for highlighting cells which are covered by fill handle
@@ -7,19 +7,17 @@ import VisualSelection from "../visualSelection.mjs";
  * @param {object} highlightParams A configuration object to create a highlight.
  * @returns {Selection}
  */
-function createHighlight(_ref) {
+export function createHighlight(_ref) {
   let {
     ...restOptions
   } = _ref;
-  const s = new VisualSelection({
+  return new VisualSelection({
     className: 'fill',
     border: {
       width: 1,
       color: '#ff0000'
     },
     ...restOptions,
-    selectionType: FILL_TYPE
+    selectionType: HIGHLIGHT_FILL_TYPE
   });
-  return s;
-}
-export default createHighlight;
+}

package/selection/highlight/types/{cell.js → focus.js}

@@ -1,7 +1,8 @@
 "use strict";
 
 exports.__esModule = true;
-var _constants = require("../constants");
+exports.createHighlight = createHighlight;
+var _src = require("../../../3rdparty/walkontable/src");
 var _visualSelection = _interopRequireDefault(require("../visualSelection"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
@@ -17,7 +18,7 @@ function createHighlight(_ref) {
     cellCornerVisible,
     ...restOptions
   } = _ref;
-  const s = new _visualSelection.default({
+  return new _visualSelection.default({
     className: 'current',
     border: {
       width: 2,
@@ -25,9 +26,6 @@ function createHighlight(_ref) {
       cornerVisible: cellCornerVisible
     },
     ...restOptions,
-    selectionType: _constants.CELL_TYPE
+    selectionType: _src.HIGHLIGHT_FOCUS_TYPE
   });
-  return s;
-}
-var _default = createHighlight;
-exports.default = _default;
+}

package/selection/highlight/types/{cell.mjs → focus.mjs}

@@ -1,4 +1,4 @@
-import { CELL_TYPE } from "../constants.mjs";
+import { HIGHLIGHT_FOCUS_TYPE } from "../../../3rdparty/walkontable/src/index.mjs";
 import VisualSelection from "../visualSelection.mjs";
 /**
  * Creates the new instance of Selection responsible for highlighting currently selected cell. This type of selection
@@ -8,12 +8,12 @@ import VisualSelection from "../visualSelection.mjs";
  * @param {Function} highlightParams.cellCornerVisible Function to determine if cell's corner should be visible.
  * @returns {Selection}
  */
-function createHighlight(_ref) {
+export function createHighlight(_ref) {
   let {
     cellCornerVisible,
     ...restOptions
   } = _ref;
-  const s = new VisualSelection({
+  return new VisualSelection({
     className: 'current',
     border: {
       width: 2,
@@ -21,8 +21,6 @@ function createHighlight(_ref) {
       cornerVisible: cellCornerVisible
     },
     ...restOptions,
-    selectionType: CELL_TYPE
+    selectionType: HIGHLIGHT_FOCUS_TYPE
   });
-  return s;
-}
-export default createHighlight;
+}

package/selection/highlight/types/header.js

@@ -1,36 +1,27 @@
 "use strict";
 
 exports.__esModule = true;
-var _constants = require("../constants");
+exports.createHighlight = createHighlight;
+var _src = require("../../../3rdparty/walkontable/src");
 var _visualSelection = _interopRequireDefault(require("../visualSelection"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * Creates the new instance of Selection, responsible for highlighting row and column headers. This type of selection
- * can occur multiple times.
+ * Creates the new instance of Selection, responsible for highlighting column or row headers when
+ * any cell is selected.
+ * This type of selection can occur multiple times.
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {string} highlightParams.headerClassName Highlighted headers' class name.
- * @param {string} highlightParams.rowClassName Highlighted row' class name.
- * @param {string} highlightParams.columnClassName Highlighted column' class name.
  * @returns {Selection}
  */
 function createHighlight(_ref) {
   let {
     headerClassName,
-    rowClassName,
-    columnClassName,
     ...restOptions
   } = _ref;
-  const s = new _visualSelection.default({
-    className: 'highlight',
-    highlightHeaderClassName: headerClassName,
-    highlightRowClassName: rowClassName,
-    highlightColumnClassName: columnClassName,
+  return new _visualSelection.default({
+    className: headerClassName,
     ...restOptions,
-    highlightOnlyClosestHeader: true,
-    selectionType: _constants.HEADER_TYPE
+    selectionType: _src.HIGHLIGHT_HEADER_TYPE
   });
-  return s;
-}
-var _default = createHighlight;
-exports.default = _default;
+}

package/selection/highlight/types/header.mjs

@@ -1,31 +1,22 @@
-import { HEADER_TYPE } from "../constants.mjs";
+import { HIGHLIGHT_HEADER_TYPE } from "../../../3rdparty/walkontable/src/index.mjs";
 import VisualSelection from "../visualSelection.mjs";
 /**
- * Creates the new instance of Selection, responsible for highlighting row and column headers. This type of selection
- * can occur multiple times.
+ * Creates the new instance of Selection, responsible for highlighting column or row headers when
+ * any cell is selected.
+ * This type of selection can occur multiple times.
  *
  * @param {object} highlightParams A configuration object to create a highlight.
  * @param {string} highlightParams.headerClassName Highlighted headers' class name.
- * @param {string} highlightParams.rowClassName Highlighted row' class name.
- * @param {string} highlightParams.columnClassName Highlighted column' class name.
  * @returns {Selection}
  */
-function createHighlight(_ref) {
+export function createHighlight(_ref) {
   let {
     headerClassName,
-    rowClassName,
-    columnClassName,
     ...restOptions
   } = _ref;
-  const s = new VisualSelection({
-    className: 'highlight',
-    highlightHeaderClassName: headerClassName,
-    highlightRowClassName: rowClassName,
-    highlightColumnClassName: columnClassName,
+  return new VisualSelection({
+    className: headerClassName,
     ...restOptions,
-    highlightOnlyClosestHeader: true,
-    selectionType: HEADER_TYPE
+    selectionType: HIGHLIGHT_HEADER_TYPE
   });
-  return s;
-}
-export default createHighlight;
+}

package/selection/highlight/types/row.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createHighlight = createHighlight;
+var _src = require("../../../3rdparty/walkontable/src");
+var _visualSelection = _interopRequireDefault(require("../visualSelection"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Creates the new instance of Selection, responsible for highlighting cells in a rows and
+ * row headers.
+ * This type of selection can occur multiple times.
+ *
+ * @param {object} highlightParams A configuration object to create a highlight.
+ * @param {string} highlightParams.rowClassName Highlighted row' class name.
+ * @returns {Selection}
+ */
+function createHighlight(_ref) {
+  let {
+    rowClassName,
+    ...restOptions
+  } = _ref;
+  return new _visualSelection.default({
+    className: rowClassName,
+    ...restOptions,
+    selectionType: _src.HIGHLIGHT_ROW_TYPE
+  });
+}

package/selection/highlight/types/row.mjs

@@ -0,0 +1,22 @@
+import { HIGHLIGHT_ROW_TYPE } from "../../../3rdparty/walkontable/src/index.mjs";
+import VisualSelection from "../visualSelection.mjs";
+/**
+ * Creates the new instance of Selection, responsible for highlighting cells in a rows and
+ * row headers.
+ * This type of selection can occur multiple times.
+ *
+ * @param {object} highlightParams A configuration object to create a highlight.
+ * @param {string} highlightParams.rowClassName Highlighted row' class name.
+ * @returns {Selection}
+ */
+export function createHighlight(_ref) {
+  let {
+    rowClassName,
+    ...restOptions
+  } = _ref;
+  return new VisualSelection({
+    className: rowClassName,
+    ...restOptions,
+    selectionType: HIGHLIGHT_ROW_TYPE
+  });
+}

package/selection/highlight/visualSelection.js

@@ -62,10 +62,6 @@ class VisualSelection extends _src.Selection {
       return null;
     }
     if (visibleFromCoords.row > visibleToCoords.row || visibleFromCoords.col > visibleToCoords.col) {
-      const isHeaderTypeSelection = this.settings.type === 'header' || this.settings.type === 'active-header';
-      if (!isHeaderTypeSelection) {
-        return null;
-      }
       visibleFromCoords = from;
       visibleToCoords = to;
     }
@@ -85,13 +81,13 @@ class VisualSelection extends _src.Selection {
    */
   getNearestNotHiddenCoords(coords, rowSearchDirection) {
     let columnSearchDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rowSearchDirection;
-    const nextVisibleRow = this.getNearestNotHiddenIndex(this.settings.rowIndexMapper(), coords.row, rowSearchDirection);
+    const nextVisibleRow = this.getNearestNotHiddenIndex(this.settings.rowIndexMapper, coords.row, rowSearchDirection);
 
     // There are no more visual rows in the range.
     if (nextVisibleRow === null) {
       return null;
     }
-    const nextVisibleColumn = this.getNearestNotHiddenIndex(this.settings.columnIndexMapper(), coords.col, columnSearchDirection);
+    const nextVisibleColumn = this.getNearestNotHiddenIndex(this.settings.columnIndexMapper, coords.col, columnSearchDirection);
 
     // There are no more visual columns in the range.
     if (nextVisibleColumn === null) {
@@ -114,12 +110,7 @@ class VisualSelection extends _src.Selection {
     if (visualIndex < 0) {
       return visualIndex;
     }
-    const nearestVisualIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
-    const isHeaderSelectionType = this.settings.type === 'header' || this.settings.type === 'active-header';
-    if (isHeaderSelectionType && nearestVisualIndex === null) {
-      return -1;
-    }
-    return nearestVisualIndex;
+    return indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
   }
 
   /**
@@ -156,24 +147,38 @@ class VisualSelection extends _src.Selection {
    * @returns {VisualSelection}
    */
   syncWith(broaderCellRange) {
+    const coordsFrom = broaderCellRange.from.clone().normalize();
     const rowDirection = broaderCellRange.getVerticalDirection() === 'N-S' ? 1 : -1;
     const columnDirection = broaderCellRange.getHorizontalDirection() === 'W-E' ? 1 : -1;
-    const singleCellRangeVisual = this.getNearestNotHiddenCoords(broaderCellRange.from.clone().normalize(), rowDirection, columnDirection);
-    if (singleCellRangeVisual !== null && broaderCellRange.overlaps(singleCellRangeVisual)) {
-      // We can't show selection visually now, but we found fist visible range in the broader cell range.
+    const renderableHighlight = this.settings.visualToRenderableCoords(this.visualCellRange.highlight);
+    let cellCoordsVisual = null;
+    if (renderableHighlight === null || renderableHighlight.col === null || renderableHighlight.row === null) {
+      cellCoordsVisual = this.getNearestNotHiddenCoords(coordsFrom, rowDirection, columnDirection);
+    }
+    if (cellCoordsVisual !== null && broaderCellRange.overlaps(cellCoordsVisual)) {
+      const currentHighlight = broaderCellRange.highlight.clone();
+      if (currentHighlight.row >= 0) {
+        currentHighlight.row = cellCoordsVisual.row;
+      }
+      if (currentHighlight.col >= 0) {
+        currentHighlight.col = cellCoordsVisual.col;
+      }
+
+      // We can't show selection visually now, but we found first visible range in the broader cell range.
       if (this.cellRange === null) {
-        const singleCellRangeRenderable = this.settings.visualToRenderableCoords(singleCellRangeVisual);
-        this.cellRange = this.settings.createCellRange(singleCellRangeRenderable);
+        const cellCoordsRenderable = this.settings.visualToRenderableCoords(currentHighlight);
+        this.cellRange = this.settings.createCellRange(cellCoordsRenderable);
       }
 
       // We set new highlight as it might change (for example, when showing/hiding some cells from the broader selection range)
       // TODO: It is also handled by the `MergeCells` plugin while adjusting already modified coordinates. Should it?
-      broaderCellRange.setHighlight(singleCellRangeVisual);
-      return this;
+      broaderCellRange.setHighlight(currentHighlight);
     }
 
-    // Fallback to the start of the range. It resets the previous highlight (for example, when all columns have been hidden).
-    broaderCellRange.setHighlight(broaderCellRange.from);
+    // Sync the highlight coords from the visual selection layer with logical coords.
+    if (this.settings.selectionType === 'focus' && renderableHighlight !== null && cellCoordsVisual === null) {
+      broaderCellRange.setHighlight(this.visualCellRange.highlight);
+    }
     return this;
   }
 
@@ -190,11 +195,7 @@ class VisualSelection extends _src.Selection {
       from,
       to
     } = this.cellRange;
-    const isRowUndefined = from.row === null || to.row === null;
-    const isColumnUndefined = from.col === null || to.col === null;
-    const topLeftCorner = this.settings.createCellCoords(isRowUndefined ? null : Math.min(from.row, to.row), isColumnUndefined ? null : Math.min(from.col, to.col));
-    const bottomRightCorner = this.settings.createCellCoords(isRowUndefined ? null : Math.max(from.row, to.row), isColumnUndefined ? null : Math.max(from.col, to.col));
-    return [topLeftCorner.row, topLeftCorner.col, bottomRightCorner.row, bottomRightCorner.col];
+    return [Math.min(from.row, to.row), Math.min(from.col, to.col), Math.max(from.row, to.row), Math.max(from.col, to.col)];
   }
 
   /**
@@ -217,11 +218,14 @@ class VisualSelection extends _src.Selection {
    *                                      points to the beginning of the selection.
    * @param {CellCoords} visualToCoords The CellCoords object which contains coordinates that
    *                                    points to the end of the selection.
-   * @returns {CellRange}
+   * @returns {CellRange|null}
    */
   createRenderableCellRange(visualFromCoords, visualToCoords) {
     const renderableFromCoords = this.settings.visualToRenderableCoords(visualFromCoords);
     const renderableToCoords = this.settings.visualToRenderableCoords(visualToCoords);
+    if (renderableFromCoords.row === null || renderableFromCoords.col === null || renderableToCoords.row === null || renderableToCoords.col === null) {
+      return null;
+    }
     return this.settings.createCellRange(renderableFromCoords, renderableFromCoords, renderableToCoords);
   }
 }

package/selection/highlight/visualSelection.mjs

@@ -59,10 +59,6 @@ class VisualSelection extends Selection {
       return null;
     }
     if (visibleFromCoords.row > visibleToCoords.row || visibleFromCoords.col > visibleToCoords.col) {
-      const isHeaderTypeSelection = this.settings.type === 'header' || this.settings.type === 'active-header';
-      if (!isHeaderTypeSelection) {
-        return null;
-      }
       visibleFromCoords = from;
       visibleToCoords = to;
     }
@@ -82,13 +78,13 @@ class VisualSelection extends Selection {
    */
   getNearestNotHiddenCoords(coords, rowSearchDirection) {
     let columnSearchDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rowSearchDirection;
-    const nextVisibleRow = this.getNearestNotHiddenIndex(this.settings.rowIndexMapper(), coords.row, rowSearchDirection);
+    const nextVisibleRow = this.getNearestNotHiddenIndex(this.settings.rowIndexMapper, coords.row, rowSearchDirection);
 
     // There are no more visual rows in the range.
     if (nextVisibleRow === null) {
       return null;
     }
-    const nextVisibleColumn = this.getNearestNotHiddenIndex(this.settings.columnIndexMapper(), coords.col, columnSearchDirection);
+    const nextVisibleColumn = this.getNearestNotHiddenIndex(this.settings.columnIndexMapper, coords.col, columnSearchDirection);
 
     // There are no more visual columns in the range.
     if (nextVisibleColumn === null) {
@@ -111,12 +107,7 @@ class VisualSelection extends Selection {
     if (visualIndex < 0) {
       return visualIndex;
     }
-    const nearestVisualIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
-    const isHeaderSelectionType = this.settings.type === 'header' || this.settings.type === 'active-header';
-    if (isHeaderSelectionType && nearestVisualIndex === null) {
-      return -1;
-    }
-    return nearestVisualIndex;
+    return indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
   }
 
   /**
@@ -153,24 +144,38 @@ class VisualSelection extends Selection {
    * @returns {VisualSelection}
    */
   syncWith(broaderCellRange) {
+    const coordsFrom = broaderCellRange.from.clone().normalize();
     const rowDirection = broaderCellRange.getVerticalDirection() === 'N-S' ? 1 : -1;
     const columnDirection = broaderCellRange.getHorizontalDirection() === 'W-E' ? 1 : -1;
-    const singleCellRangeVisual = this.getNearestNotHiddenCoords(broaderCellRange.from.clone().normalize(), rowDirection, columnDirection);
-    if (singleCellRangeVisual !== null && broaderCellRange.overlaps(singleCellRangeVisual)) {
-      // We can't show selection visually now, but we found fist visible range in the broader cell range.
+    const renderableHighlight = this.settings.visualToRenderableCoords(this.visualCellRange.highlight);
+    let cellCoordsVisual = null;
+    if (renderableHighlight === null || renderableHighlight.col === null || renderableHighlight.row === null) {
+      cellCoordsVisual = this.getNearestNotHiddenCoords(coordsFrom, rowDirection, columnDirection);
+    }
+    if (cellCoordsVisual !== null && broaderCellRange.overlaps(cellCoordsVisual)) {
+      const currentHighlight = broaderCellRange.highlight.clone();
+      if (currentHighlight.row >= 0) {
+        currentHighlight.row = cellCoordsVisual.row;
+      }
+      if (currentHighlight.col >= 0) {
+        currentHighlight.col = cellCoordsVisual.col;
+      }
+
+      // We can't show selection visually now, but we found first visible range in the broader cell range.
       if (this.cellRange === null) {
-        const singleCellRangeRenderable = this.settings.visualToRenderableCoords(singleCellRangeVisual);
-        this.cellRange = this.settings.createCellRange(singleCellRangeRenderable);
+        const cellCoordsRenderable = this.settings.visualToRenderableCoords(currentHighlight);
+        this.cellRange = this.settings.createCellRange(cellCoordsRenderable);
       }
 
       // We set new highlight as it might change (for example, when showing/hiding some cells from the broader selection range)
       // TODO: It is also handled by the `MergeCells` plugin while adjusting already modified coordinates. Should it?
-      broaderCellRange.setHighlight(singleCellRangeVisual);
-      return this;
+      broaderCellRange.setHighlight(currentHighlight);
     }
 
-    // Fallback to the start of the range. It resets the previous highlight (for example, when all columns have been hidden).
-    broaderCellRange.setHighlight(broaderCellRange.from);
+    // Sync the highlight coords from the visual selection layer with logical coords.
+    if (this.settings.selectionType === 'focus' && renderableHighlight !== null && cellCoordsVisual === null) {
+      broaderCellRange.setHighlight(this.visualCellRange.highlight);
+    }
     return this;
   }
 
@@ -187,11 +192,7 @@ class VisualSelection extends Selection {
       from,
       to
     } = this.cellRange;
-    const isRowUndefined = from.row === null || to.row === null;
-    const isColumnUndefined = from.col === null || to.col === null;
-    const topLeftCorner = this.settings.createCellCoords(isRowUndefined ? null : Math.min(from.row, to.row), isColumnUndefined ? null : Math.min(from.col, to.col));
-    const bottomRightCorner = this.settings.createCellCoords(isRowUndefined ? null : Math.max(from.row, to.row), isColumnUndefined ? null : Math.max(from.col, to.col));
-    return [topLeftCorner.row, topLeftCorner.col, bottomRightCorner.row, bottomRightCorner.col];
+    return [Math.min(from.row, to.row), Math.min(from.col, to.col), Math.max(from.row, to.row), Math.max(from.col, to.col)];
   }
 
   /**
@@ -214,11 +215,14 @@ class VisualSelection extends Selection {
    *                                      points to the beginning of the selection.
    * @param {CellCoords} visualToCoords The CellCoords object which contains coordinates that
    *                                    points to the end of the selection.
-   * @returns {CellRange}
+   * @returns {CellRange|null}
    */
   createRenderableCellRange(visualFromCoords, visualToCoords) {
     const renderableFromCoords = this.settings.visualToRenderableCoords(visualFromCoords);
     const renderableToCoords = this.settings.visualToRenderableCoords(visualToCoords);
+    if (renderableFromCoords.row === null || renderableFromCoords.col === null || renderableToCoords.row === null || renderableToCoords.col === null) {
+      return null;
+    }
     return this.settings.createCellRange(renderableFromCoords, renderableFromCoords, renderableToCoords);
   }
 }

package/selection/index.js

@@ -2,14 +2,11 @@
 
 exports.__esModule = true;
 var _exportNames = {
-  Highlight: true,
   Selection: true,
   handleMouseEvent: true,
   detectSelectionType: true,
   normalizeSelectionFactory: true
 };
-var _highlight = _interopRequireDefault(require("./highlight/highlight"));
-exports.Highlight = _highlight.default;
 var _selection = _interopRequireDefault(require("./selection"));
 exports.Selection = _selection.default;
 var _mouseEventHandler = require("./mouseEventHandler");
@@ -17,11 +14,11 @@ exports.handleMouseEvent = _mouseEventHandler.handleMouseEvent;
 var _utils = require("./utils");
 exports.detectSelectionType = _utils.detectSelectionType;
 exports.normalizeSelectionFactory = _utils.normalizeSelectionFactory;
-var _constants = require("./highlight/constants");
-Object.keys(_constants).forEach(function (key) {
+var _highlight = require("./highlight/highlight");
+Object.keys(_highlight).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _constants[key]) return;
-  exports[key] = _constants[key];
+  if (key in exports && exports[key] === _highlight[key]) return;
+  exports[key] = _highlight[key];
 });
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }