@deephaven/grid 0.5.2-beta.0 → 0.6.1-demo.8

package/dist/GridMetricCalculator.js

@@ -1,24 +1,6 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import GridUtils from './GridUtils';
+import GridUtils from "./GridUtils.js";
 /* eslint class-methods-use-this: "off" */
 
 /* eslint react/destructuring-assignment: "off" */
@@ -29,30 +11,72 @@ import GridUtils from './GridUtils';
  * Override this class and override the individual methods to provide additional functionality.
  */
 
-var GridMetricCalculator = /*#__PURE__*/function () {
-  function GridMetricCalculator() {
-    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        _ref$userColumnWidths = _ref.userColumnWidths,
-        userColumnWidths = _ref$userColumnWidths === void 0 ? new Map() : _ref$userColumnWidths,
-        _ref$userRowHeights = _ref.userRowHeights,
-        userRowHeights = _ref$userRowHeights === void 0 ? new Map() : _ref$userRowHeights,
-        _ref$calculatedRowHei = _ref.calculatedRowHeights,
-        calculatedRowHeights = _ref$calculatedRowHei === void 0 ? new Map() : _ref$calculatedRowHei,
-        _ref$calculatedColumn = _ref.calculatedColumnWidths,
-        calculatedColumnWidths = _ref$calculatedColumn === void 0 ? new Map() : _ref$calculatedColumn,
-        _ref$fontWidths = _ref.fontWidths,
-        fontWidths = _ref$fontWidths === void 0 ? new Map() : _ref$fontWidths,
-        _ref$modelRows = _ref.modelRows,
-        modelRows = _ref$modelRows === void 0 ? new Map() : _ref$modelRows,
-        _ref$modelColumns = _ref.modelColumns,
-        modelColumns = _ref$modelColumns === void 0 ? new Map() : _ref$modelColumns,
-        _ref$movedRows = _ref.movedRows,
-        movedRows = _ref$movedRows === void 0 ? null : _ref$movedRows,
-        _ref$movedColumns = _ref.movedColumns,
-        movedColumns = _ref$movedColumns === void 0 ? null : _ref$movedColumns;
-
-    _classCallCheck(this, GridMetricCalculator);
+class GridMetricCalculator {
+  /** The size of the caches this calculator stores */
+
+  /** The maximum column width as a percentage of the full grid */
+
+  /**
+   * Trim the provided map in place. Trims oldest inserted items down to the target size if the cache size is exceeded.
+   * Instead of trimming one item on every tick, we trim half the items so there isn't a cache clear on every new item.
+   * @param {Map} map The map to trim
+   * @param {number} cacheSize The maximum number of elements to cache
+   * @param {number} targetSize The number of elements to reduce the cache down to if `cacheSize` is exceeded
+   */
+  static trimMap(map) {
+    var cacheSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : GridMetricCalculator.CACHE_SIZE;
+    var targetSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Math.floor(cacheSize / 2);
+
+    if (map.size > cacheSize) {
+      var iter = map.keys();
+
+      while (map.size > targetSize) {
+        map.delete(iter.next().value);
+      }
+    }
+  }
+  /**
+   * Get the coordinates of floating items in one dimension.
+   * Can be used for getting the y coordinates of floating rows, or x coordinates of floating columns, calculated using the `sizeMap` passed in.
+   * @param {number} startCount The number of floating items at the start (ie. `floatingTopRowCount` for rows, `floatingLeftColumnCount` for columns)
+   * @param {number} endCount The number of floating items at the end (ie. `floatingBottomRowCount` for rows, `floatingRightColumnCount` for columns)
+   * @param {number} totalCount Total number of items in this dimension (ie. `rowCount` for rows, `columnCount` for columns)
+   * @param {number} max The max coordinate value (ie. `maxY` for rows, `maxX` for columns)
+   * @param {Map<number, number>} sizeMap Map from index to size of item (ie. `rowHeightMap` for rows, `columnWidthMap` for columns)
+   */
+
+
+  static getFloatingCoordinates(startCount, endCount, totalCount, max, sizeMap) {
+    var coordinates = new Map();
+    var x = 0;
+
+    for (var i = 0; i < startCount && i < totalCount; i += 1) {
+      coordinates.set(i, x);
+      x += sizeMap.get(i);
+    }
+
+    x = max;
+
+    for (var _i = 0; _i < endCount && totalCount - _i - 1 >= 0; _i += 1) {
+      x -= sizeMap.get(totalCount - _i - 1);
+      coordinates.set(totalCount - _i - 1, x);
+    }
+
+    return coordinates;
+  }
 
+  constructor() {
+    var {
+      userColumnWidths = new Map(),
+      userRowHeights = new Map(),
+      calculatedRowHeights = new Map(),
+      calculatedColumnWidths = new Map(),
+      fontWidths = new Map(),
+      modelRows = new Map(),
+      modelColumns = new Map(),
+      movedRows = null,
+      movedColumns = null
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.userColumnWidths = userColumnWidths;
     this.userRowHeights = userRowHeights;
     this.calculatedRowHeights = calculatedRowHeights;
@@ -67,1069 +91,1082 @@ var GridMetricCalculator = /*#__PURE__*/function () {
   /** update the calculated metrics from the model/canvas that are useful for many functions */
 
 
-  _createClass(GridMetricCalculator, [{
-    key: "getMetrics",
-    value: function getMetrics(state) {
-      var left = state.left,
-          top = state.top,
-          leftOffset = state.leftOffset,
-          topOffset = state.topOffset,
-          width = state.width,
-          height = state.height,
-          theme = state.theme,
-          model = state.model,
-          movedRows = state.movedRows,
-          movedColumns = state.movedColumns;
-      var rowHeight = theme.rowHeight,
-          rowHeaderWidth = theme.rowHeaderWidth,
-          rowFooterWidth = theme.rowFooterWidth,
-          columnWidth = theme.columnWidth,
-          columnHeaderHeight = theme.columnHeaderHeight,
-          minScrollHandleSize = theme.minScrollHandleSize,
-          scrollBarSize = theme.scrollBarSize;
-
-      if (movedRows !== this.movedRows) {
-        this.movedRows = movedRows;
-        this.modelRows.clear();
-      }
-
-      if (movedColumns !== this.movedColumns) {
-        this.movedColumns = movedColumns;
-        this.modelColumns.clear();
-      }
+  getMetrics(state) {
+    var {
+      left,
+      top,
+      leftOffset,
+      topOffset,
+      width,
+      height,
+      theme,
+      model,
+      movedRows,
+      movedColumns
+    } = state;
+    var {
+      rowHeight,
+      rowHeaderWidth,
+      rowFooterWidth,
+      columnWidth,
+      columnHeaderHeight,
+      minScrollHandleSize,
+      scrollBarSize
+    } = theme;
+
+    if (movedRows !== this.movedRows) {
+      this.movedRows = movedRows;
+      this.modelRows.clear();
+    }
 
-      var columnCount = model.columnCount,
-          rowCount = model.rowCount,
-          floatingTopRowCount = model.floatingTopRowCount,
-          floatingBottomRowCount = model.floatingBottomRowCount,
-          floatingLeftColumnCount = model.floatingLeftColumnCount,
-          floatingRightColumnCount = model.floatingRightColumnCount; // Get some basic metrics
-
-      var firstRow = this.getFirstRow(state);
-      var firstColumn = this.getFirstColumn(state);
-      var gridX = this.getGridX(state);
-      var gridY = this.getGridY(state);
-      var treePaddingX = model.hasExpandableRows ? this.calculateTreePaddingX(state) : 0;
-      var treePaddingY = 0; // We don't support trees on columns (at least not yet)
-
-      var visibleRowHeights = this.getVisibleRowHeights(state);
-      var visibleColumnWidths = this.getVisibleColumnWidths(state, firstColumn, treePaddingX); // Calculate the metrics for the main grid
-
-      var visibleRows = Array.from(visibleRowHeights.keys());
-      var visibleColumns = Array.from(visibleColumnWidths.keys());
-      var visibleColumnXs = this.getVisibleColumnXs(visibleColumnWidths, visibleColumns, leftOffset);
-      var visibleRowYs = this.getVisibleRowYs(visibleRowHeights, visibleRows, topOffset);
-      var bottom = visibleRows.length > 0 ? visibleRows[visibleRows.length - 1] : top;
-      var right = visibleColumns.length > 0 ? visibleColumns[visibleColumns.length - 1] : left;
-      var bottomViewport = this.getBottomViewport(state, visibleRows, visibleRowYs, visibleRowHeights);
-      var rightViewport = this.getRightViewport(state, visibleColumns, visibleColumnXs, visibleColumnWidths);
-      var columnWidthValues = Array.from(visibleColumnWidths.values());
-      var rowHeightValues = Array.from(visibleRowHeights.values());
-      var maxX = columnWidthValues.reduce(function (x, w) {
-        return x + w;
-      }, 0) - leftOffset;
-      var maxY = rowHeightValues.reduce(function (y, h) {
-        return y + h;
-      }, 0) - topOffset;
-      var lastLeft = this.getLastLeft(state, null, width - gridX - scrollBarSize - rowFooterWidth);
-      var lastTop = this.getLastTop(state, null, height - gridY - scrollBarSize); // Calculate some metrics for the scroll bars
-
-      var hasHorizontalBar = lastLeft > 0;
-      var hasVerticalBar = lastTop > 0;
-      var horizontalBarHeight = hasHorizontalBar ? scrollBarSize : 0;
-      var verticalBarWidth = hasVerticalBar ? scrollBarSize : 0;
-      var barWidth = width - rowHeaderWidth - verticalBarWidth;
-      var barHeight = height - columnHeaderHeight - horizontalBarHeight;
-      var handleWidth = lastLeft > 0 ? Math.min(Math.max(minScrollHandleSize, barWidth * ((columnCount - lastLeft) / columnCount)), barWidth - 1) : 0;
-      var handleHeight = lastTop > 0 ? Math.min(Math.max(minScrollHandleSize, barHeight * ((rowCount - lastTop) / rowCount)), barHeight - 1) : 0;
-      var leftColumnWidth = visibleColumnWidths.get(left);
-      var topRowHeight = visibleRowHeights.get(top);
-      var leftOffsetPercent = leftColumnWidth > 0 ? leftOffset / leftColumnWidth : 0;
-      var topOffsetPercent = topRowHeight > 0 ? topOffset / topRowHeight : 0;
-      var scrollX = lastLeft > 0 ? (left + leftOffsetPercent) / lastLeft * (barWidth - handleWidth) : 0;
-      var scrollY = lastTop > 0 ? (top + topOffsetPercent) / lastTop * (barHeight - handleHeight) : 0; // Now add the floating sections
-
-      var floatingRows = [];
-
-      if (floatingTopRowCount > 0 || floatingBottomRowCount > 0) {
-        floatingRows = [].concat(_toConsumableArray(Array(floatingTopRowCount).keys()), _toConsumableArray(_toConsumableArray(Array(floatingBottomRowCount).keys()).map(function (i) {
-          return rowCount - i - 1;
-        })));
-        visibleRowHeights = new Map([].concat(_toConsumableArray(visibleRowHeights), _toConsumableArray(this.getFloatingRowHeights(state))));
-        visibleRowYs = new Map([].concat(_toConsumableArray(visibleRowYs), _toConsumableArray(this.getFloatingRowYs(state, visibleRowHeights, Math.floor(height - gridY - horizontalBarHeight)))));
-      }
+    if (movedColumns !== this.movedColumns) {
+      this.movedColumns = movedColumns;
+      this.modelColumns.clear();
+    }
 
-      var floatingColumns = [];
+    var {
+      columnCount,
+      rowCount,
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount
+    } = model; // Get some basic metrics
+
+    var firstRow = this.getFirstRow(state);
+    var firstColumn = this.getFirstColumn(state);
+    var gridX = this.getGridX(state);
+    var gridY = this.getGridY(state);
+    var treePaddingX = model.hasExpandableRows ? this.calculateTreePaddingX(state) : 0;
+    var treePaddingY = 0; // We don't support trees on columns (at least not yet)
+
+    var visibleRowHeights = this.getVisibleRowHeights(state);
+    var visibleColumnWidths = this.getVisibleColumnWidths(state, firstColumn, treePaddingX); // Calculate the metrics for the main grid
+
+    var visibleRows = Array.from(visibleRowHeights.keys());
+    var visibleColumns = Array.from(visibleColumnWidths.keys());
+    var visibleColumnXs = this.getVisibleColumnXs(visibleColumnWidths, visibleColumns, leftOffset);
+    var visibleRowYs = this.getVisibleRowYs(visibleRowHeights, visibleRows, topOffset);
+    var bottom = visibleRows.length > 0 ? visibleRows[visibleRows.length - 1] : top;
+    var right = visibleColumns.length > 0 ? visibleColumns[visibleColumns.length - 1] : left;
+    var bottomViewport = this.getBottomViewport(state, visibleRows, visibleRowYs, visibleRowHeights);
+    var rightViewport = this.getRightViewport(state, visibleColumns, visibleColumnXs, visibleColumnWidths);
+    var columnWidthValues = Array.from(visibleColumnWidths.values());
+    var rowHeightValues = Array.from(visibleRowHeights.values());
+    var maxX = columnWidthValues.reduce((x, w) => x + w, 0) - leftOffset;
+    var maxY = rowHeightValues.reduce((y, h) => y + h, 0) - topOffset;
+    var lastLeft = this.getLastLeft(state, null, width - gridX - scrollBarSize - rowFooterWidth);
+    var lastTop = this.getLastTop(state, null, height - gridY - scrollBarSize); // Calculate some metrics for the scroll bars
+
+    var hasHorizontalBar = lastLeft > 0;
+    var hasVerticalBar = lastTop > 0;
+    var horizontalBarHeight = hasHorizontalBar ? scrollBarSize : 0;
+    var verticalBarWidth = hasVerticalBar ? scrollBarSize : 0;
+    var barWidth = width - rowHeaderWidth - verticalBarWidth;
+    var barHeight = height - columnHeaderHeight - horizontalBarHeight;
+    var handleWidth = lastLeft > 0 ? Math.min(Math.max(minScrollHandleSize, barWidth * ((columnCount - lastLeft) / columnCount)), barWidth - 1) : 0;
+    var handleHeight = lastTop > 0 ? Math.min(Math.max(minScrollHandleSize, barHeight * ((rowCount - lastTop) / rowCount)), barHeight - 1) : 0;
+    var leftColumnWidth = visibleColumnWidths.get(left);
+    var topRowHeight = visibleRowHeights.get(top);
+    var leftOffsetPercent = leftColumnWidth > 0 ? leftOffset / leftColumnWidth : 0;
+    var topOffsetPercent = topRowHeight > 0 ? topOffset / topRowHeight : 0;
+    var scrollX = lastLeft > 0 ? (left + leftOffsetPercent) / lastLeft * (barWidth - handleWidth) : 0;
+    var scrollY = lastTop > 0 ? (top + topOffsetPercent) / lastTop * (barHeight - handleHeight) : 0; // Now add the floating sections
+
+    var floatingRows = [];
+
+    if (floatingTopRowCount > 0 || floatingBottomRowCount > 0) {
+      floatingRows = [...Array(floatingTopRowCount).keys(), ...[...Array(floatingBottomRowCount).keys()].map(i => rowCount - i - 1)];
+      visibleRowHeights = new Map([...visibleRowHeights, ...this.getFloatingRowHeights(state)]);
+      visibleRowYs = new Map([...visibleRowYs, ...this.getFloatingRowYs(state, visibleRowHeights, Math.floor(height - gridY - horizontalBarHeight))]);
+    }
 
-      if (floatingLeftColumnCount > 0 || floatingRightColumnCount > 0) {
-        floatingColumns = [].concat(_toConsumableArray(Array(floatingLeftColumnCount).keys()), _toConsumableArray(_toConsumableArray(Array(floatingRightColumnCount).keys()).map(function (i) {
-          return columnCount - i - 1;
-        })));
-        visibleColumnWidths = new Map([].concat(_toConsumableArray(visibleColumnWidths), _toConsumableArray(this.getFloatingColumnWidths(state))));
-        visibleColumnXs = new Map([].concat(_toConsumableArray(visibleColumnXs), _toConsumableArray(this.getFloatingColumnXs(state, visibleColumnWidths, Math.floor(width - gridX - verticalBarWidth)))));
-      }
+    var floatingColumns = [];
 
-      var allRows = visibleRows.concat(floatingRows);
-      var allColumns = visibleColumns.concat(floatingColumns);
-      var modelRows = this.getModelRows(allRows, state);
-      var modelColumns = this.getModelColumns(allColumns, state);
-      var visibleRowTreeBoxes = this.getVisibleRowTreeBoxes(visibleRowHeights, modelRows, state); // Calculate the visible viewport based on scroll position and floating sections
-
-      var topVisible = this.getTopVisible(state, visibleRowYs, visibleRowHeights, visibleRows, gridY);
-      var leftVisible = this.getLeftVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns, gridX);
-      var bottomVisible = lastTop > 0 ? this.getBottomVisible(state, visibleRowYs, visibleRowHeights, visibleRows, gridY) : bottom;
-      var rightVisible = lastLeft > 0 ? this.getRightVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns, gridX) : right;
-      var floatingTopHeight = this.getFloatingTopHeight(state, visibleRowHeights);
-      var floatingBottomHeight = this.getFloatingBottomHeight(state, visibleRowHeights);
-      var floatingLeftWidth = this.getFloatingLeftWidth(state, visibleColumnWidths);
-      var floatingRightWidth = this.getFloatingRightWidth(state, visibleColumnWidths);
-      var fontWidths = this.fontWidths,
-          userColumnWidths = this.userColumnWidths,
-          userRowHeights = this.userRowHeights,
-          calculatedRowHeights = this.calculatedRowHeights,
-          calculatedColumnWidths = this.calculatedColumnWidths;
-      return {
-        // Row/Column metrics from model
-        rowHeight: rowHeight,
-        rowHeaderWidth: rowHeaderWidth,
-        rowFooterWidth: rowFooterWidth,
-        rowCount: rowCount,
-        columnWidth: columnWidth,
-        columnCount: columnCount,
-        columnHeaderHeight: columnHeaderHeight,
-        // Floating row and column counts
-        floatingTopRowCount: floatingTopRowCount,
-        floatingBottomRowCount: floatingBottomRowCount,
-        floatingLeftColumnCount: floatingLeftColumnCount,
-        floatingRightColumnCount: floatingRightColumnCount,
-        // The grid offset from the top left
-        gridX: gridX,
-        gridY: gridY,
-        // Index of non-hidden row/columns
-        firstRow: firstRow,
-        firstColumn: firstColumn,
-        // The amount of padding for tree (if applicable)
-        treePaddingX: treePaddingX,
-        treePaddingY: treePaddingY,
-        // What viewport is currently visible, limited by data size
-        left: left,
-        top: top,
-        bottom: bottom,
-        right: right,
-        topOffset: topOffset,
-        leftOffset: leftOffset,
-        // Bottom and right that are fully visible, not overlapped by scroll bars or anything
-        topVisible: topVisible,
-        leftVisible: leftVisible,
-        bottomVisible: bottomVisible,
-        rightVisible: rightVisible,
-        // Bottom and right of the viewport, not limited by data size
-        bottomViewport: bottomViewport,
-        rightViewport: rightViewport,
-        // Canvas width/height
-        width: width,
-        height: height,
-        // Max x/y coordinate of the grid (does not include headers)
-        maxX: maxX,
-        maxY: maxY,
-        // Last valid column/row that can be the left/top of the grid
-        lastLeft: lastLeft,
-        lastTop: lastTop,
-        // Scroll bar metrics
-        barHeight: barHeight,
-        barWidth: barWidth,
-        handleHeight: handleHeight,
-        handleWidth: handleWidth,
-        hasHorizontalBar: hasHorizontalBar,
-        hasVerticalBar: hasVerticalBar,
-        verticalBarWidth: verticalBarWidth,
-        horizontalBarHeight: horizontalBarHeight,
-        // The vertical x/y scroll amount
-        scrollX: scrollX,
-        scrollY: scrollY,
-        // Array of visible rows/columns, by grid index
-        visibleRows: visibleRows,
-        visibleColumns: visibleColumns,
-        // Array of floating rows/columns, by grid index
-        floatingRows: floatingRows,
-        floatingColumns: floatingColumns,
-        // Array of all rows/columns, visible and floating, by grid index
-        allRows: allRows,
-        allColumns: allColumns,
-        // Map of the height/width of visible rows/columns
-        visibleRowHeights: visibleRowHeights,
-        visibleColumnWidths: visibleColumnWidths,
-        // Floating metrics
-        floatingTopHeight: floatingTopHeight,
-        floatingBottomHeight: floatingBottomHeight,
-        floatingLeftWidth: floatingLeftWidth,
-        floatingRightWidth: floatingRightWidth,
-        // Map of the X/Y coordinates of the rows/columns, from the top left of the grid
-        visibleRowYs: visibleRowYs,
-        visibleColumnXs: visibleColumnXs,
-        // The boxes user can click on for expanding/collapsing tree rows
-        visibleRowTreeBoxes: visibleRowTreeBoxes,
-        // Mapping from visible row indexes to the model row/columns they pull from
-        modelRows: modelRows,
-        modelColumns: modelColumns,
-        // Map of the width of the fonts
-        fontWidths: fontWidths,
-        // Map of user set column/row width/height
-        userColumnWidths: userColumnWidths,
-        userRowHeights: userRowHeights,
-        // Map of calculated row/column height/width
-        calculatedRowHeights: calculatedRowHeights,
-        calculatedColumnWidths: calculatedColumnWidths
-      };
-    }
-  }, {
-    key: "getGridX",
-    value: function getGridX(state) {
-      var theme = state.theme;
-      var rowHeaderWidth = theme.rowHeaderWidth;
-      return rowHeaderWidth;
-    }
-  }, {
-    key: "getGridY",
-    value: function getGridY(state) {
-      var theme = state.theme;
-      var columnHeaderHeight = theme.columnHeaderHeight;
-      return columnHeaderHeight;
+    if (floatingLeftColumnCount > 0 || floatingRightColumnCount > 0) {
+      floatingColumns = [...Array(floatingLeftColumnCount).keys(), ...[...Array(floatingRightColumnCount).keys()].map(i => columnCount - i - 1)];
+      visibleColumnWidths = new Map([...visibleColumnWidths, ...this.getFloatingColumnWidths(state)]);
+      visibleColumnXs = new Map([...visibleColumnXs, ...this.getFloatingColumnXs(state, visibleColumnWidths, Math.floor(width - gridX - verticalBarWidth))]);
     }
-  }, {
-    key: "getVisibleHeight",
-    value: function getVisibleHeight(state) {
-      var visibleRowHeights = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingRowHeights(state);
-      var height = state.height,
-          theme = state.theme;
-      var scrollBarSize = theme.scrollBarSize;
-      var gridY = this.getGridY(state);
-      var floatingBottomHeight = this.getFloatingBottomHeight(state, visibleRowHeights);
-      var floatingTopHeight = this.getFloatingTopHeight(state, visibleRowHeights);
-      return height - floatingBottomHeight - floatingTopHeight - gridY - scrollBarSize;
-    }
-  }, {
-    key: "getVisibleWidth",
-    value: function getVisibleWidth(state) {
-      var visibleColumnWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingColumnWidths(state);
-      var width = state.width,
-          theme = state.theme;
-      var scrollBarSize = theme.scrollBarSize,
-          rowFooterWidth = theme.rowFooterWidth;
-      var gridX = this.getGridX(state);
-      var floatingRightWidth = this.getFloatingRightWidth(state, visibleColumnWidths);
-      var floatingLeftWidth = this.getFloatingLeftWidth(state, visibleColumnWidths);
-      return width - floatingLeftWidth - floatingRightWidth - gridX - scrollBarSize - rowFooterWidth;
-    }
-  }, {
-    key: "getFirstIndex",
-    value: function getFirstIndex(itemSizes, getModelIndex, state) {
-      // We only need to check at the very most the number of items the user has hidden + 1
-      var max = itemSizes.size + 1;
-
-      for (var i = 0; i < max; i += 1) {
-        var modelIndex = getModelIndex(i, state);
 
-        if (itemSizes.get(modelIndex) !== 0) {
-          return i;
-        }
-      }
+    var allRows = visibleRows.concat(floatingRows);
+    var allColumns = visibleColumns.concat(floatingColumns);
+    var modelRows = this.getModelRows(allRows, state);
+    var modelColumns = this.getModelColumns(allColumns, state);
+    var visibleRowTreeBoxes = this.getVisibleRowTreeBoxes(visibleRowHeights, modelRows, state); // Calculate the visible viewport based on scroll position and floating sections
+
+    var topVisible = this.getTopVisible(state, visibleRowYs, visibleRowHeights, visibleRows, gridY);
+    var leftVisible = this.getLeftVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns, gridX);
+    var bottomVisible = lastTop > 0 ? this.getBottomVisible(state, visibleRowYs, visibleRowHeights, visibleRows, gridY) : bottom;
+    var rightVisible = lastLeft > 0 ? this.getRightVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns, gridX) : right;
+    var floatingTopHeight = this.getFloatingTopHeight(state, visibleRowHeights);
+    var floatingBottomHeight = this.getFloatingBottomHeight(state, visibleRowHeights);
+    var floatingLeftWidth = this.getFloatingLeftWidth(state, visibleColumnWidths);
+    var floatingRightWidth = this.getFloatingRightWidth(state, visibleColumnWidths);
+    var {
+      fontWidths,
+      userColumnWidths,
+      userRowHeights,
+      calculatedRowHeights,
+      calculatedColumnWidths
+    } = this;
+    return {
+      // Row/Column metrics from model
+      rowHeight,
+      rowHeaderWidth,
+      rowFooterWidth,
+      rowCount,
+      columnWidth,
+      columnCount,
+      columnHeaderHeight,
+      // Floating row and column counts
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount,
+      // The grid offset from the top left
+      gridX,
+      gridY,
+      // Index of non-hidden row/columns
+      firstRow,
+      firstColumn,
+      // The amount of padding for tree (if applicable)
+      treePaddingX,
+      treePaddingY,
+      // What viewport is currently visible, limited by data size
+      left,
+      top,
+      bottom,
+      right,
+      topOffset,
+      leftOffset,
+      // Bottom and right that are fully visible, not overlapped by scroll bars or anything
+      topVisible,
+      leftVisible,
+      bottomVisible,
+      rightVisible,
+      // Bottom and right of the viewport, not limited by data size
+      bottomViewport,
+      rightViewport,
+      // Canvas width/height
+      width,
+      height,
+      // Max x/y coordinate of the grid (does not include headers)
+      maxX,
+      maxY,
+      // Last valid column/row that can be the left/top of the grid
+      lastLeft,
+      lastTop,
+      // Scroll bar metrics
+      barHeight,
+      barWidth,
+      handleHeight,
+      handleWidth,
+      hasHorizontalBar,
+      hasVerticalBar,
+      verticalBarWidth,
+      horizontalBarHeight,
+      // The vertical x/y scroll amount
+      scrollX,
+      scrollY,
+      // Array of visible rows/columns, by grid index
+      visibleRows,
+      visibleColumns,
+      // Array of floating rows/columns, by grid index
+      floatingRows,
+      floatingColumns,
+      // Array of all rows/columns, visible and floating, by grid index
+      allRows,
+      allColumns,
+      // Map of the height/width of visible rows/columns
+      visibleRowHeights,
+      visibleColumnWidths,
+      // Floating metrics
+      floatingTopHeight,
+      floatingBottomHeight,
+      floatingLeftWidth,
+      floatingRightWidth,
+      // Map of the X/Y coordinates of the rows/columns, from the top left of the grid
+      visibleRowYs,
+      visibleColumnXs,
+      // The boxes user can click on for expanding/collapsing tree rows
+      visibleRowTreeBoxes,
+      // Mapping from visible row indexes to the model row/columns they pull from
+      modelRows,
+      modelColumns,
+      // Map of the width of the fonts
+      fontWidths,
+      // Map of user set column/row width/height
+      userColumnWidths,
+      userRowHeights,
+      // Map of calculated row/column height/width
+      calculatedRowHeights,
+      calculatedColumnWidths
+    };
+  }
 
-      return 0;
-    }
-    /** Get the first column index that isn't hidden */
+  getGridX(state) {
+    var {
+      theme
+    } = state;
+    var {
+      rowHeaderWidth
+    } = theme;
+    return rowHeaderWidth;
+  }
 
-  }, {
-    key: "getFirstColumn",
-    value: function getFirstColumn(state) {
-      return this.getFirstIndex(this.userColumnWidths, this.getModelColumn.bind(this), state);
-    }
-    /** Get the first row index that isn't hidden */
+  getGridY(state) {
+    var {
+      theme
+    } = state;
+    var {
+      columnHeaderHeight
+    } = theme;
+    return columnHeaderHeight;
+  }
 
-  }, {
-    key: "getFirstRow",
-    value: function getFirstRow(state) {
-      return this.getFirstIndex(this.userRowHeights, this.getModelRow.bind(this), state);
-    }
-    /**
-     * Get the last column that can be the left most column (eg. scrolled to the right)
-     * If no right column is provided, then the last column is used.
-     */
-
-  }, {
-    key: "getLastLeft",
-    value: function getLastLeft(state) {
-      var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var visibleWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.getVisibleWidth(state);
-      var model = state.model;
-      var columnCount = model.columnCount;
-      var lastLeft = columnCount - 1;
-
-      if (right != null) {
-        lastLeft = right;
-      }
+  getVisibleHeight(state) {
+    var visibleRowHeights = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingRowHeights(state);
+    var {
+      height,
+      theme
+    } = state;
+    var {
+      scrollBarSize
+    } = theme;
+    var gridY = this.getGridY(state);
+    var floatingBottomHeight = this.getFloatingBottomHeight(state, visibleRowHeights);
+    var floatingTopHeight = this.getFloatingTopHeight(state, visibleRowHeights);
+    return height - floatingBottomHeight - floatingTopHeight - gridY - scrollBarSize;
+  }
 
-      var x = 0;
+  getVisibleWidth(state) {
+    var visibleColumnWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingColumnWidths(state);
+    var {
+      width,
+      theme
+    } = state;
+    var {
+      scrollBarSize,
+      rowFooterWidth
+    } = theme;
+    var gridX = this.getGridX(state);
+    var floatingRightWidth = this.getFloatingRightWidth(state, visibleColumnWidths);
+    var floatingLeftWidth = this.getFloatingLeftWidth(state, visibleColumnWidths);
+    return width - floatingLeftWidth - floatingRightWidth - gridX - scrollBarSize - rowFooterWidth;
+  }
 
-      while (lastLeft >= 0) {
-        var columnWidth = this.getVisibleColumnWidth(lastLeft, state);
-        x += columnWidth;
+  getFirstIndex(itemSizes, getModelIndex, state) {
+    // We only need to check at the very most the number of items the user has hidden + 1
+    var max = itemSizes.size + 1;
 
-        if (x >= visibleWidth) {
-          return Math.min(lastLeft + 1, columnCount - 1);
-        }
+    for (var i = 0; i < max; i += 1) {
+      var modelIndex = getModelIndex(i, state);
 
-        lastLeft -= 1;
+      if (itemSizes.get(modelIndex) !== 0) {
+        return i;
       }
-
-      return 0;
     }
-    /**
-     * The last row that can be the top row (eg. scrolled to the bottom)
-     * If no bottom row is provided, then the last row that is not floating is used
-     */
-
-  }, {
-    key: "getLastTop",
-    value: function getLastTop(state) {
-      var bottom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var visibleHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.getVisibleHeight(state);
-      var model = state.model;
-      var rowCount = model.rowCount,
-          floatingBottomRowCount = model.floatingBottomRowCount;
-      var lastTop = Math.max(0, rowCount - floatingBottomRowCount - 1);
-
-      if (bottom != null) {
-        lastTop = bottom;
-      }
 
-      var y = 0;
+    return 0;
+  }
+  /** Get the first column index that isn't hidden */
 
-      while (lastTop > 0) {
-        var rowHeight = this.getVisibleRowHeight(lastTop, state);
-        y += rowHeight;
 
-        if (y >= visibleHeight) {
-          return Math.min(lastTop + 1, rowCount - 1);
-        }
+  getFirstColumn(state) {
+    return this.getFirstIndex(this.userColumnWidths, this.getModelColumn.bind(this), state);
+  }
+  /** Get the first row index that isn't hidden */
 
-        lastTop -= 1;
-      }
 
-      return 0;
+  getFirstRow(state) {
+    return this.getFirstIndex(this.userRowHeights, this.getModelRow.bind(this), state);
+  }
+  /**
+   * Get the last column that can be the left most column (eg. scrolled to the right)
+   * If no right column is provided, then the last column is used.
+   */
+
+
+  getLastLeft(state) {
+    var right = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var visibleWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.getVisibleWidth(state);
+    var {
+      model
+    } = state;
+    var {
+      columnCount
+    } = model;
+    var lastLeft = columnCount - 1;
+
+    if (right != null) {
+      lastLeft = right;
     }
-  }, {
-    key: "getTopForTopVisible",
-    value: function getTopForTopVisible(state, topVisible) {
-      var floatingTopHeight = this.getFloatingTopHeight(state);
-      var top = topVisible;
-      var y = 0;
-
-      while (top > 0 && y < floatingTopHeight) {
-        top -= 1;
-        y += this.getVisibleRowHeight(top, state);
-      }
 
-      return top;
-    }
-  }, {
-    key: "getTopForBottomVisible",
-    value: function getTopForBottomVisible(state, bottomVisible) {
-      var height = state.height;
-      var gridY = this.getGridY(state);
-      var floatingBottomHeight = this.getFloatingBottomHeight(state);
-      var availableHeight = height - gridY - floatingBottomHeight;
-      return this.getLastTop(state, bottomVisible, availableHeight);
-    }
-  }, {
-    key: "getLeftForLeftVisible",
-    value: function getLeftForLeftVisible(state, leftVisible) {
-      var floatingLeftWidth = this.getFloatingLeftWidth(state);
-      var left = leftVisible;
-      var x = 0;
-
-      while (left > 0 && x < floatingLeftWidth) {
-        left -= 1;
-        x += this.getVisibleColumnWidth(left, state);
-      }
+    var x = 0;
 
-      return left;
-    }
-  }, {
-    key: "getLeftForRightVisible",
-    value: function getLeftForRightVisible(state, rightVisible) {
-      var width = state.width;
-      var gridX = this.getGridX(state);
-      var floatingRightWidth = this.getFloatingRightWidth(state);
-      var availableWidth = width - gridX - floatingRightWidth;
-      return this.getLastLeft(state, rightVisible, availableWidth);
-    }
-  }, {
-    key: "getFloatingRowHeights",
-    value: function getFloatingRowHeights(state) {
-      var model = state.model;
-      var floatingTopRowCount = model.floatingTopRowCount,
-          floatingBottomRowCount = model.floatingBottomRowCount,
-          rowCount = model.rowCount;
-      var rowHeights = new Map();
-
-      for (var i = 0; i < floatingTopRowCount && i < rowCount; i += 1) {
-        rowHeights.set(i, this.getVisibleRowHeight(i, state));
-      }
+    while (lastLeft >= 0) {
+      var columnWidth = this.getVisibleColumnWidth(lastLeft, state);
+      x += columnWidth;
 
-      for (var _i = 0; _i < floatingBottomRowCount && rowCount - _i - 1 >= 0; _i += 1) {
-        var row = rowCount - _i - 1;
-        rowHeights.set(row, this.getVisibleRowHeight(row, state));
+      if (x >= visibleWidth) {
+        return Math.min(lastLeft + 1, columnCount - 1);
       }
 
-      return rowHeights;
+      lastLeft -= 1;
     }
-  }, {
-    key: "getVisibleRowHeights",
-    value: function getVisibleRowHeights(state) {
-      var top = state.top,
-          topOffset = state.topOffset,
-          height = state.height,
-          model = state.model;
-      var y = 0;
-      var row = top;
-      var rowHeights = new Map();
-      var rowCount = model.rowCount;
-
-      while (y < height + topOffset && row < rowCount) {
-        var rowHeight = this.getVisibleRowHeight(row, state);
-        rowHeights.set(row, rowHeight);
-        y += rowHeight;
-        row += 1;
-      }
 
-      return rowHeights;
+    return 0;
+  }
+  /**
+   * The last row that can be the top row (eg. scrolled to the bottom)
+   * If no bottom row is provided, then the last row that is not floating is used
+   */
+
+
+  getLastTop(state) {
+    var bottom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var visibleHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.getVisibleHeight(state);
+    var {
+      model
+    } = state;
+    var {
+      rowCount,
+      floatingBottomRowCount
+    } = model;
+    var lastTop = Math.max(0, rowCount - floatingBottomRowCount - 1);
+
+    if (bottom != null) {
+      lastTop = bottom;
     }
-  }, {
-    key: "getFloatingColumnWidths",
-    value: function getFloatingColumnWidths(state) {
-      var firstColumn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFirstColumn(state);
-      var treePaddingX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.calculateTreePaddingX(state);
-      var model = state.model;
-      var columnCount = model.columnCount,
-          floatingLeftColumnCount = model.floatingLeftColumnCount,
-          floatingRightColumnCount = model.floatingRightColumnCount;
-      var columnWidths = new Map();
-
-      for (var i = 0; i < floatingLeftColumnCount && i < columnCount; i += 1) {
-        columnWidths.set(i, this.getVisibleColumnWidth(i, state, firstColumn, treePaddingX));
-      }
 
-      for (var _i2 = 0; _i2 < floatingRightColumnCount && columnCount - _i2 - 1 >= 0; _i2 += 1) {
-        var column = columnCount - _i2 - 1;
-        columnWidths.set(column, this.getVisibleColumnWidth(column, state, firstColumn, treePaddingX));
-      }
+    var y = 0;
 
-      return columnWidths;
-    }
-  }, {
-    key: "getVisibleColumnWidths",
-    value: function getVisibleColumnWidths(state) {
-      var firstColumn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFirstColumn(state);
-      var treePaddingX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.calculateTreePaddingX(state);
-      var left = state.left,
-          leftOffset = state.leftOffset,
-          width = state.width,
-          model = state.model;
-      var x = 0;
-      var column = left;
-      var columnWidths = new Map();
-      var columnCount = model.columnCount;
-
-      while (x < width + leftOffset && column < columnCount) {
-        var columnWidth = this.getVisibleColumnWidth(column, state, firstColumn, treePaddingX);
-        columnWidths.set(column, columnWidth);
-        x += columnWidth;
-        column += 1;
+    while (lastTop > 0) {
+      var rowHeight = this.getVisibleRowHeight(lastTop, state);
+      y += rowHeight;
+
+      if (y >= visibleHeight) {
+        return Math.min(lastTop + 1, rowCount - 1);
       }
 
-      return columnWidths;
-    }
-  }, {
-    key: "getFloatingColumnXs",
-    value: function getFloatingColumnXs(state, columnWidthMap, maxX) {
-      var model = state.model;
-      var columnCount = model.columnCount,
-          floatingLeftColumnCount = model.floatingLeftColumnCount,
-          floatingRightColumnCount = model.floatingRightColumnCount;
-      return GridMetricCalculator.getFloatingCoordinates(floatingLeftColumnCount, floatingRightColumnCount, columnCount, maxX, columnWidthMap);
+      lastTop -= 1;
     }
-  }, {
-    key: "getVisibleColumnXs",
-    value: function getVisibleColumnXs(visibleColumnWidths, visibleColumns, leftOffset) {
-      var visibleColumnXs = new Map();
-      var x = -leftOffset;
-
-      for (var i = 0; i < visibleColumns.length; i += 1) {
-        var column = visibleColumns[i];
-        var columnWidth = visibleColumnWidths.get(column);
-        visibleColumnXs.set(column, x);
-        x += columnWidth;
-      }
 
-      return visibleColumnXs;
+    return 0;
+  }
+
+  getTopForTopVisible(state, topVisible) {
+    var floatingTopHeight = this.getFloatingTopHeight(state);
+    var top = topVisible;
+    var y = 0;
+
+    while (top > 0 && y < floatingTopHeight) {
+      top -= 1;
+      y += this.getVisibleRowHeight(top, state);
     }
-  }, {
-    key: "getFloatingRowYs",
-    value: function getFloatingRowYs(state, rowHeightMap, maxY) {
-      var model = state.model;
-      var floatingTopRowCount = model.floatingTopRowCount,
-          floatingBottomRowCount = model.floatingBottomRowCount,
-          rowCount = model.rowCount;
-      return GridMetricCalculator.getFloatingCoordinates(floatingTopRowCount, floatingBottomRowCount, rowCount, maxY, rowHeightMap);
+
+    return top;
+  }
+
+  getTopForBottomVisible(state, bottomVisible) {
+    var {
+      height
+    } = state;
+    var gridY = this.getGridY(state);
+    var floatingBottomHeight = this.getFloatingBottomHeight(state);
+    var availableHeight = height - gridY - floatingBottomHeight;
+    return this.getLastTop(state, bottomVisible, availableHeight);
+  }
+
+  getLeftForLeftVisible(state, leftVisible) {
+    var floatingLeftWidth = this.getFloatingLeftWidth(state);
+    var left = leftVisible;
+    var x = 0;
+
+    while (left > 0 && x < floatingLeftWidth) {
+      left -= 1;
+      x += this.getVisibleColumnWidth(left, state);
     }
-  }, {
-    key: "getVisibleRowYs",
-    value: function getVisibleRowYs(visibleRowHeights, visibleRows, topOffset) {
-      var visibleRowYs = new Map();
-      var y = -topOffset;
-
-      for (var i = 0; i < visibleRows.length; i += 1) {
-        var row = visibleRows[i];
-        var rowHeight = visibleRowHeights.get(row);
-        visibleRowYs.set(row, y);
-        y += rowHeight;
-      }
 
-      return visibleRowYs;
+    return left;
+  }
+
+  getLeftForRightVisible(state, rightVisible) {
+    var {
+      width
+    } = state;
+    var gridX = this.getGridX(state);
+    var floatingRightWidth = this.getFloatingRightWidth(state);
+    var availableWidth = width - gridX - floatingRightWidth;
+    return this.getLastLeft(state, rightVisible, availableWidth);
+  }
+
+  getFloatingRowHeights(state) {
+    var {
+      model
+    } = state;
+    var {
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      rowCount
+    } = model;
+    var rowHeights = new Map();
+
+    for (var i = 0; i < floatingTopRowCount && i < rowCount; i += 1) {
+      rowHeights.set(i, this.getVisibleRowHeight(i, state));
     }
-    /** Calculates the tree box click areas that are visible. In relation to the columnX/rowY */
-
-  }, {
-    key: "getVisibleRowTreeBoxes",
-    value: function getVisibleRowTreeBoxes(visibleRowHeights, modelRows, state) {
-      var visibleRowTreeBoxes = new Map();
-      var model = state.model,
-          theme = state.theme;
-      var treeDepthIndent = theme.treeDepthIndent,
-          treeHorizontalPadding = theme.treeHorizontalPadding;
-
-      if (model.hasExpandableRows) {
-        visibleRowHeights.forEach(function (rowHeight, row) {
-          var modelRow = modelRows.get(row);
-
-          if (model.isRowExpandable(modelRow)) {
-            var depth = model.depthForRow(modelRow);
-            var x1 = depth * treeDepthIndent + treeHorizontalPadding;
-            var x2 = (depth + 1) * treeDepthIndent + treeHorizontalPadding;
-            var y1 = 0;
-            var y2 = rowHeight;
-            visibleRowTreeBoxes.set(row, [x1, y1, x2, y2]);
-          }
-        });
-      }
 
-      return visibleRowTreeBoxes;
+    for (var _i2 = 0; _i2 < floatingBottomRowCount && rowCount - _i2 - 1 >= 0; _i2 += 1) {
+      var row = rowCount - _i2 - 1;
+      rowHeights.set(row, this.getVisibleRowHeight(row, state));
     }
-  }, {
-    key: "getFloatingLeftWidth",
-    value: function getFloatingLeftWidth(state) {
-      var columnWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingColumnWidths(state);
-      var model = state.model;
-      var floatingLeftColumnCount = model.floatingLeftColumnCount;
-      var floatingWidth = 0;
-
-      for (var i = 0; i < floatingLeftColumnCount; i += 1) {
-        var _columnWidths$get;
-
-        floatingWidth += (_columnWidths$get = columnWidths.get(i)) !== null && _columnWidths$get !== void 0 ? _columnWidths$get : 0;
-      }
 
-      return floatingWidth;
+    return rowHeights;
+  }
+
+  getVisibleRowHeights(state) {
+    var {
+      top,
+      topOffset,
+      height,
+      model
+    } = state;
+    var y = 0;
+    var row = top;
+    var rowHeights = new Map();
+    var {
+      rowCount
+    } = model;
+
+    while (y < height + topOffset && row < rowCount) {
+      var rowHeight = this.getVisibleRowHeight(row, state);
+      rowHeights.set(row, rowHeight);
+      y += rowHeight;
+      row += 1;
     }
-  }, {
-    key: "getFloatingRightWidth",
-    value: function getFloatingRightWidth(state) {
-      var columnWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingColumnWidths(state);
-      var model = state.model;
-      var floatingRightColumnCount = model.floatingRightColumnCount,
-          columnCount = model.columnCount;
-      var floatingWidth = 0;
-
-      for (var i = 0; i < floatingRightColumnCount; i += 1) {
-        var _columnWidths$get2;
-
-        floatingWidth += (_columnWidths$get2 = columnWidths.get(columnCount - i - 1)) !== null && _columnWidths$get2 !== void 0 ? _columnWidths$get2 : 0;
-      }
 
-      return floatingWidth;
+    return rowHeights;
+  }
+
+  getFloatingColumnWidths(state) {
+    var firstColumn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFirstColumn(state);
+    var treePaddingX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.calculateTreePaddingX(state);
+    var {
+      model
+    } = state;
+    var {
+      columnCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount
+    } = model;
+    var columnWidths = new Map();
+
+    for (var i = 0; i < floatingLeftColumnCount && i < columnCount; i += 1) {
+      columnWidths.set(i, this.getVisibleColumnWidth(i, state, firstColumn, treePaddingX));
     }
-  }, {
-    key: "getFloatingTopHeight",
-    value: function getFloatingTopHeight(state) {
-      var rowHeights = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingRowHeights(state);
-      var model = state.model;
-      var floatingTopRowCount = model.floatingTopRowCount;
-      var floatingHeight = 0;
-
-      for (var i = 0; i < floatingTopRowCount; i += 1) {
-        var _rowHeights$get;
-
-        floatingHeight += (_rowHeights$get = rowHeights.get(i)) !== null && _rowHeights$get !== void 0 ? _rowHeights$get : 0;
-      }
 
-      return floatingHeight;
+    for (var _i3 = 0; _i3 < floatingRightColumnCount && columnCount - _i3 - 1 >= 0; _i3 += 1) {
+      var column = columnCount - _i3 - 1;
+      columnWidths.set(column, this.getVisibleColumnWidth(column, state, firstColumn, treePaddingX));
     }
-  }, {
-    key: "getFloatingBottomHeight",
-    value: function getFloatingBottomHeight(state) {
-      var rowHeights = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingRowHeights(state);
-      var model = state.model;
-      var floatingBottomRowCount = model.floatingBottomRowCount,
-          rowCount = model.rowCount;
-      var floatingHeight = 0;
-
-      for (var i = 0; i < floatingBottomRowCount; i += 1) {
-        var _rowHeights$get2;
-
-        floatingHeight += (_rowHeights$get2 = rowHeights.get(rowCount - i - 1)) !== null && _rowHeights$get2 !== void 0 ? _rowHeights$get2 : 0;
-      }
 
-      return floatingHeight;
+    return columnWidths;
+  }
+
+  getVisibleColumnWidths(state) {
+    var firstColumn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFirstColumn(state);
+    var treePaddingX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.calculateTreePaddingX(state);
+    var {
+      left,
+      leftOffset,
+      width,
+      model
+    } = state;
+    var x = 0;
+    var column = left;
+    var columnWidths = new Map();
+    var {
+      columnCount
+    } = model;
+
+    while (x < width + leftOffset && column < columnCount) {
+      var columnWidth = this.getVisibleColumnWidth(column, state, firstColumn, treePaddingX);
+      columnWidths.set(column, columnWidth);
+      x += columnWidth;
+      column += 1;
     }
-  }, {
-    key: "getTopVisible",
-    value: function getTopVisible(state, visibleRowYs, visibleRowHeights, visibleRows) {
-      var floatingHeight = this.getFloatingTopHeight(state, visibleRowHeights);
 
-      for (var i = 0; i < visibleRows.length; i += 1) {
-        var row = visibleRows[i];
+    return columnWidths;
+  }
 
-        if (visibleRowYs.get(row) >= floatingHeight) {
-          return row;
-        }
-      }
+  getFloatingColumnXs(state, columnWidthMap, maxX) {
+    var {
+      model
+    } = state;
+    var {
+      columnCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount
+    } = model;
+    return GridMetricCalculator.getFloatingCoordinates(floatingLeftColumnCount, floatingRightColumnCount, columnCount, maxX, columnWidthMap);
+  }
+
+  getVisibleColumnXs(visibleColumnWidths, visibleColumns, leftOffset) {
+    var visibleColumnXs = new Map();
+    var x = -leftOffset;
 
-      return 0;
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      var column = visibleColumns[i];
+      var columnWidth = visibleColumnWidths.get(column);
+      visibleColumnXs.set(column, x);
+      x += columnWidth;
     }
-  }, {
-    key: "getLeftVisible",
-    value: function getLeftVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns) {
-      var floatingWidth = this.getFloatingLeftWidth(state, visibleColumnWidths);
 
-      for (var i = 0; i < visibleColumns.length; i += 1) {
-        var column = visibleColumns[i];
+    return visibleColumnXs;
+  }
 
-        if (visibleColumnXs.get(column) >= floatingWidth) {
-          return column;
-        }
-      }
+  getFloatingRowYs(state, rowHeightMap, maxY) {
+    var {
+      model
+    } = state;
+    var {
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      rowCount
+    } = model;
+    return GridMetricCalculator.getFloatingCoordinates(floatingTopRowCount, floatingBottomRowCount, rowCount, maxY, rowHeightMap);
+  }
+
+  getVisibleRowYs(visibleRowHeights, visibleRows, topOffset) {
+    var visibleRowYs = new Map();
+    var y = -topOffset;
 
-      return 0;
+    for (var i = 0; i < visibleRows.length; i += 1) {
+      var row = visibleRows[i];
+      var rowHeight = visibleRowHeights.get(row);
+      visibleRowYs.set(row, y);
+      y += rowHeight;
     }
-  }, {
-    key: "getBottomVisible",
-    value: function getBottomVisible(state, visibleRowYs, visibleRowHeights, visibleRows, gridY) {
-      var height = state.height,
-          theme = state.theme;
-      var scrollBarSize = theme.scrollBarSize;
-      var floatingHeight = this.getFloatingBottomHeight(state, visibleRowHeights);
-      var visibleHeight = height - gridY - scrollBarSize - floatingHeight;
-
-      for (var i = visibleRows.length - 1; i >= 0; i -= 1) {
-        var row = visibleRows[i];
-        var rowY = visibleRowYs.get(row);
-        var rowHeight = visibleRowHeights.get(row);
-
-        if (rowY + rowHeight <= visibleHeight) {
-          return row;
+
+    return visibleRowYs;
+  }
+  /** Calculates the tree box click areas that are visible. In relation to the columnX/rowY */
+
+
+  getVisibleRowTreeBoxes(visibleRowHeights, modelRows, state) {
+    var visibleRowTreeBoxes = new Map();
+    var {
+      model,
+      theme
+    } = state;
+    var {
+      treeDepthIndent,
+      treeHorizontalPadding
+    } = theme;
+
+    if (model.hasExpandableRows) {
+      visibleRowHeights.forEach((rowHeight, row) => {
+        var modelRow = modelRows.get(row);
+
+        if (model.isRowExpandable(modelRow)) {
+          var depth = model.depthForRow(modelRow);
+          var x1 = depth * treeDepthIndent + treeHorizontalPadding;
+          var x2 = (depth + 1) * treeDepthIndent + treeHorizontalPadding;
+          var y1 = 0;
+          var y2 = rowHeight;
+          visibleRowTreeBoxes.set(row, [x1, y1, x2, y2]);
         }
-      }
+      });
+    }
+
+    return visibleRowTreeBoxes;
+  }
+
+  getFloatingLeftWidth(state) {
+    var columnWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingColumnWidths(state);
+    var {
+      model
+    } = state;
+    var {
+      floatingLeftColumnCount
+    } = model;
+    var floatingWidth = 0;
 
-      return 0;
+    for (var i = 0; i < floatingLeftColumnCount; i += 1) {
+      var _columnWidths$get;
+
+      floatingWidth += (_columnWidths$get = columnWidths.get(i)) !== null && _columnWidths$get !== void 0 ? _columnWidths$get : 0;
     }
-  }, {
-    key: "getRightVisible",
-    value: function getRightVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns, gridX) {
-      var width = state.width,
-          theme = state.theme;
-      var scrollBarSize = theme.scrollBarSize;
-      var floatingWidth = this.getFloatingRightWidth(state, visibleColumnWidths);
-      var visibleWidth = width - gridX - scrollBarSize - floatingWidth;
-
-      for (var i = visibleColumns.length - 1; i >= 0; i -= 1) {
-        var column = visibleColumns[i];
-        var columnX = visibleColumnXs.get(column);
-        var columnWidth = visibleColumnWidths.get(column);
-
-        if (columnX + columnWidth <= visibleWidth) {
-          return column;
-        }
-      }
 
-      return 0;
+    return floatingWidth;
+  }
+
+  getFloatingRightWidth(state) {
+    var columnWidths = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingColumnWidths(state);
+    var {
+      model
+    } = state;
+    var {
+      floatingRightColumnCount,
+      columnCount
+    } = model;
+    var floatingWidth = 0;
+
+    for (var i = 0; i < floatingRightColumnCount; i += 1) {
+      var _columnWidths$get2;
+
+      floatingWidth += (_columnWidths$get2 = columnWidths.get(columnCount - i - 1)) !== null && _columnWidths$get2 !== void 0 ? _columnWidths$get2 : 0;
     }
-  }, {
-    key: "getBottomViewport",
-    value: function getBottomViewport(state, visibleRows, visibleRowYs, visibleRowHeights) {
-      var height = state.height,
-          theme = state.theme;
-      var rowHeight = theme.rowHeight;
-      return this.getLastIndexViewport(visibleRows, visibleRowYs, visibleRowHeights, height, rowHeight);
+
+    return floatingWidth;
+  }
+
+  getFloatingTopHeight(state) {
+    var rowHeights = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingRowHeights(state);
+    var {
+      model
+    } = state;
+    var {
+      floatingTopRowCount
+    } = model;
+    var floatingHeight = 0;
+
+    for (var i = 0; i < floatingTopRowCount; i += 1) {
+      var _rowHeights$get;
+
+      floatingHeight += (_rowHeights$get = rowHeights.get(i)) !== null && _rowHeights$get !== void 0 ? _rowHeights$get : 0;
     }
-  }, {
-    key: "getRightViewport",
-    value: function getRightViewport(state, visibleColumns, visibleColumnXs, visibleColumnWidths) {
-      var width = state.width,
-          theme = state.theme;
-      var columnWidth = theme.columnWidth;
-      return this.getLastIndexViewport(visibleColumns, visibleColumnXs, visibleColumnWidths, width, columnWidth);
+
+    return floatingHeight;
+  }
+
+  getFloatingBottomHeight(state) {
+    var rowHeights = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.getFloatingRowHeights(state);
+    var {
+      model
+    } = state;
+    var {
+      floatingBottomRowCount,
+      rowCount
+    } = model;
+    var floatingHeight = 0;
+
+    for (var i = 0; i < floatingBottomRowCount; i += 1) {
+      var _rowHeights$get2;
+
+      floatingHeight += (_rowHeights$get2 = rowHeights.get(rowCount - i - 1)) !== null && _rowHeights$get2 !== void 0 ? _rowHeights$get2 : 0;
     }
-  }, {
-    key: "getLastIndexViewport",
-    value: function getLastIndexViewport(items, itemXs, itemSizes, maxSize, defaultItemSize) {
-      var lastIndex = 0;
-      var dataSize = 0;
-
-      if (items.length > 0) {
-        lastIndex = items[items.length - 1];
-        dataSize = itemXs.get(lastIndex) + itemSizes.get(lastIndex);
-      }
 
-      if (dataSize < maxSize) {
-        lastIndex += Math.ceil((maxSize - dataSize) / defaultItemSize);
+    return floatingHeight;
+  }
+
+  getTopVisible(state, visibleRowYs, visibleRowHeights, visibleRows) {
+    var floatingHeight = this.getFloatingTopHeight(state, visibleRowHeights);
+
+    for (var i = 0; i < visibleRows.length; i += 1) {
+      var row = visibleRows[i];
+
+      if (visibleRowYs.get(row) >= floatingHeight) {
+        return row;
       }
+    }
 
-      return lastIndex;
+    return 0;
+  }
+
+  getLeftVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns) {
+    var floatingWidth = this.getFloatingLeftWidth(state, visibleColumnWidths);
+
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      var column = visibleColumns[i];
+
+      if (visibleColumnXs.get(column) >= floatingWidth) {
+        return column;
+      }
     }
-  }, {
-    key: "getVisibleItemSize",
-    value: function getVisibleItemSize(modelIndex, userSizes, calculateSize) {
-      if (userSizes.has(modelIndex)) {
-        return userSizes.get(modelIndex);
+
+    return 0;
+  }
+
+  getBottomVisible(state, visibleRowYs, visibleRowHeights, visibleRows, gridY) {
+    var {
+      height,
+      theme
+    } = state;
+    var {
+      scrollBarSize
+    } = theme;
+    var floatingHeight = this.getFloatingBottomHeight(state, visibleRowHeights);
+    var visibleHeight = height - gridY - scrollBarSize - floatingHeight;
+
+    for (var i = visibleRows.length - 1; i >= 0; i -= 1) {
+      var row = visibleRows[i];
+      var rowY = visibleRowYs.get(row);
+      var rowHeight = visibleRowHeights.get(row);
+
+      if (rowY + rowHeight <= visibleHeight) {
+        return row;
       }
+    }
+
+    return 0;
+  }
 
-      return calculateSize();
+  getRightVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns, gridX) {
+    var {
+      width,
+      theme
+    } = state;
+    var {
+      scrollBarSize
+    } = theme;
+    var floatingWidth = this.getFloatingRightWidth(state, visibleColumnWidths);
+    var visibleWidth = width - gridX - scrollBarSize - floatingWidth;
+
+    for (var i = visibleColumns.length - 1; i >= 0; i -= 1) {
+      var column = visibleColumns[i];
+      var columnX = visibleColumnXs.get(column);
+      var columnWidth = visibleColumnWidths.get(column);
+
+      if (columnX + columnWidth <= visibleWidth) {
+        return column;
+      }
     }
-  }, {
-    key: "getVisibleRowHeight",
-    value: function getVisibleRowHeight(row, state) {
-      var _this = this;
 
-      var modelRow = this.getModelRow(row, state);
-      return this.getVisibleItemSize(modelRow, this.userRowHeights, function () {
-        return _this.calculateRowHeight(row, modelRow, state);
-      });
+    return 0;
+  }
+
+  getBottomViewport(state, visibleRows, visibleRowYs, visibleRowHeights) {
+    var {
+      height,
+      theme
+    } = state;
+    var {
+      rowHeight
+    } = theme;
+    return this.getLastIndexViewport(visibleRows, visibleRowYs, visibleRowHeights, height, rowHeight);
+  }
+
+  getRightViewport(state, visibleColumns, visibleColumnXs, visibleColumnWidths) {
+    var {
+      width,
+      theme
+    } = state;
+    var {
+      columnWidth
+    } = theme;
+    return this.getLastIndexViewport(visibleColumns, visibleColumnXs, visibleColumnWidths, width, columnWidth);
+  }
+
+  getLastIndexViewport(items, itemXs, itemSizes, maxSize, defaultItemSize) {
+    var lastIndex = 0;
+    var dataSize = 0;
+
+    if (items.length > 0) {
+      lastIndex = items[items.length - 1];
+      dataSize = itemXs.get(lastIndex) + itemSizes.get(lastIndex);
     }
-  }, {
-    key: "getVisibleColumnWidth",
-    value: function getVisibleColumnWidth(column, state) {
-      var _this2 = this;
-
-      var firstColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.getFirstColumn(state);
-      var treePaddingX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.calculateTreePaddingX(state);
-      var modelColumn = this.getModelColumn(column, state);
-      return this.getVisibleItemSize(modelColumn, this.userColumnWidths, function () {
-        return _this2.calculateColumnWidth(column, modelColumn, state, firstColumn, treePaddingX);
-      });
+
+    if (dataSize < maxSize) {
+      lastIndex += Math.ceil((maxSize - dataSize) / defaultItemSize);
     }
-  }, {
-    key: "getModelRows",
-    value: function getModelRows(visibleRows, state) {
-      var modelRows = new Map();
-
-      for (var i = 0; i < visibleRows.length; i += 1) {
-        var visibleRow = visibleRows[i];
-        var modelRow = this.getModelRow(visibleRow, state);
-        modelRows.set(visibleRow, modelRow);
-      }
 
-      return modelRows;
+    return lastIndex;
+  }
+
+  getVisibleItemSize(modelIndex, userSizes, calculateSize) {
+    if (userSizes.has(modelIndex)) {
+      return userSizes.get(modelIndex);
     }
-  }, {
-    key: "getModelRow",
-    value: function getModelRow(visibleRow, state) {
-      if (this.modelRows.has(visibleRow)) {
-        return this.modelRows.get(visibleRow);
-      }
 
-      var movedRows = state.movedRows;
-      var modelRow = GridUtils.getModelIndex(visibleRow, movedRows);
-      this.modelRows.set(visibleRow, modelRow);
-      return modelRow;
+    return calculateSize();
+  }
+
+  getVisibleRowHeight(row, state) {
+    var modelRow = this.getModelRow(row, state);
+    return this.getVisibleItemSize(modelRow, this.userRowHeights, () => this.calculateRowHeight(row, modelRow, state));
+  }
+
+  getVisibleColumnWidth(column, state) {
+    var firstColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.getFirstColumn(state);
+    var treePaddingX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.calculateTreePaddingX(state);
+    var modelColumn = this.getModelColumn(column, state);
+    return this.getVisibleItemSize(modelColumn, this.userColumnWidths, () => this.calculateColumnWidth(column, modelColumn, state, firstColumn, treePaddingX));
+  }
+
+  getModelRows(visibleRows, state) {
+    var modelRows = new Map();
+
+    for (var i = 0; i < visibleRows.length; i += 1) {
+      var visibleRow = visibleRows[i];
+      var modelRow = this.getModelRow(visibleRow, state);
+      modelRows.set(visibleRow, modelRow);
     }
-  }, {
-    key: "getModelColumns",
-    value: function getModelColumns(visibleColumns, state) {
-      var modelColumns = new Map();
-
-      for (var i = 0; i < visibleColumns.length; i += 1) {
-        var visibleColumn = visibleColumns[i];
-        var modelColumn = this.getModelColumn(visibleColumn, state);
-        modelColumns.set(visibleColumn, modelColumn);
-      }
 
-      return modelColumns;
+    return modelRows;
+  }
+
+  getModelRow(visibleRow, state) {
+    if (this.modelRows.has(visibleRow)) {
+      return this.modelRows.get(visibleRow);
     }
-  }, {
-    key: "getModelColumn",
-    value: function getModelColumn(visibleColumn, state) {
-      if (this.modelColumns.has(visibleColumn)) {
-        return this.modelColumns.get(visibleColumn);
-      }
 
-      var movedColumns = state.movedColumns;
-      var modelColumn = GridUtils.getModelIndex(visibleColumn, movedColumns);
-      this.modelColumns.set(visibleColumn, modelColumn);
-      return modelColumn;
+    var {
+      movedRows
+    } = state;
+    var modelRow = GridUtils.getModelIndex(visibleRow, movedRows);
+    this.modelRows.set(visibleRow, modelRow);
+    return modelRow;
+  }
+
+  getModelColumns(visibleColumns, state) {
+    var modelColumns = new Map();
+
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      var visibleColumn = visibleColumns[i];
+      var modelColumn = this.getModelColumn(visibleColumn, state);
+      modelColumns.set(visibleColumn, modelColumn);
     }
-  }, {
-    key: "calculateRowHeight",
-    value: function calculateRowHeight(row, modelRow, state) {
-      var theme = state.theme;
-      var autoSizeRows = theme.autoSizeRows,
-          rowHeight = theme.rowHeight;
-
-      if (!autoSizeRows) {
-        return rowHeight;
-      }
 
-      var cachedValue = this.calculatedRowHeights.get(modelRow);
+    return modelColumns;
+  }
 
-      if (cachedValue != null) {
-        return cachedValue;
-      } // Not sure how to accurately get the height of text. For now just return the theme height.
+  getModelColumn(visibleColumn, state) {
+    if (this.modelColumns.has(visibleColumn)) {
+      return this.modelColumns.get(visibleColumn);
+    }
 
+    var {
+      movedColumns
+    } = state;
+    var modelColumn = GridUtils.getModelIndex(visibleColumn, movedColumns);
+    this.modelColumns.set(visibleColumn, modelColumn);
+    return modelColumn;
+  }
 
-      this.calculatedRowHeights.set(modelRow, Math.ceil(rowHeight));
-      GridMetricCalculator.trimMap(this.calculatedRowHeights);
+  calculateRowHeight(row, modelRow, state) {
+    var {
+      theme
+    } = state;
+    var {
+      autoSizeRows,
+      rowHeight
+    } = theme;
+
+    if (!autoSizeRows) {
       return rowHeight;
     }
-    /** Calculates the column width based on the provided column model index */
-
-  }, {
-    key: "calculateColumnWidth",
-    value: function calculateColumnWidth(column, modelColumn, state) {
-      var firstColumn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.getFirstColumn(state);
-      var treePaddingX = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.calculateTreePaddingX(state);
-      var theme = state.theme;
-      var autoSizeColumns = theme.autoSizeColumns,
-          minColumnWidth = theme.minColumnWidth;
-
-      if (!autoSizeColumns) {
-        var _columnWidth = theme.columnWidth;
-        return _columnWidth;
-      }
 
-      var headerWidth = this.calculateColumnHeaderWidth(modelColumn, state);
-      var dataWidth = this.calculateColumnDataWidth(modelColumn, state);
-      var cachedValue = this.calculatedColumnWidths.get(modelColumn);
-      var columnWidth = Math.ceil(Math.max(headerWidth, dataWidth));
-      columnWidth = Math.max(minColumnWidth, columnWidth);
-
-      if (cachedValue != null && cachedValue > columnWidth) {
-        columnWidth = cachedValue;
-      } else {
-        this.calculatedColumnWidths.set(modelColumn, columnWidth);
-        GridMetricCalculator.trimMap(this.calculatedColumnWidths);
-      }
+    var cachedValue = this.calculatedRowHeights.get(modelRow);
+
+    if (cachedValue != null) {
+      return cachedValue;
+    } // Not sure how to accurately get the height of text. For now just return the theme height.
 
-      if (column === firstColumn) {
-        columnWidth += treePaddingX;
-      }
 
-      return columnWidth;
+    this.calculatedRowHeights.set(modelRow, Math.ceil(rowHeight));
+    GridMetricCalculator.trimMap(this.calculatedRowHeights);
+    return rowHeight;
+  }
+  /** Calculates the column width based on the provided column model index */
+
+
+  calculateColumnWidth(column, modelColumn, state) {
+    var firstColumn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.getFirstColumn(state);
+    var treePaddingX = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.calculateTreePaddingX(state);
+    var {
+      theme
+    } = state;
+    var {
+      autoSizeColumns,
+      minColumnWidth
+    } = theme;
+
+    if (!autoSizeColumns) {
+      var {
+        columnWidth: _columnWidth
+      } = theme;
+      return _columnWidth;
     }
-  }, {
-    key: "calculateColumnHeaderWidth",
-    value: function calculateColumnHeaderWidth(modelColumn, state) {
-      var model = state.model,
-          theme = state.theme;
-      var headerFont = theme.headerFont,
-          headerHorizontalPadding = theme.headerHorizontalPadding;
-      var headerText = model.textForColumnHeader(modelColumn);
-
-      if (headerText) {
-        var headerFontWidth = this.getWidthForFont(headerFont, state);
-        return headerText.length * headerFontWidth + headerHorizontalPadding * 2;
-      }
 
-      return headerHorizontalPadding * 2;
+    var headerWidth = this.calculateColumnHeaderWidth(modelColumn, state);
+    var dataWidth = this.calculateColumnDataWidth(modelColumn, state);
+    var cachedValue = this.calculatedColumnWidths.get(modelColumn);
+    var columnWidth = Math.ceil(Math.max(headerWidth, dataWidth));
+    columnWidth = Math.max(minColumnWidth, columnWidth);
+
+    if (cachedValue != null && cachedValue > columnWidth) {
+      columnWidth = cachedValue;
+    } else {
+      this.calculatedColumnWidths.set(modelColumn, columnWidth);
+      GridMetricCalculator.trimMap(this.calculatedColumnWidths);
     }
-  }, {
-    key: "calculateColumnDataWidth",
-    value: function calculateColumnDataWidth(modelColumn, state) {
-      var _this3 = this;
-
-      var top = state.top,
-          height = state.height,
-          width = state.width,
-          model = state.model,
-          theme = state.theme;
-      var floatingTopRowCount = model.floatingTopRowCount,
-          floatingBottomRowCount = model.floatingBottomRowCount,
-          rowCount = model.rowCount;
-      var font = theme.font,
-          cellHorizontalPadding = theme.cellHorizontalPadding,
-          rowHeight = theme.rowHeight,
-          rowHeaderWidth = theme.rowHeaderWidth,
-          rowFooterWidth = theme.rowFooterWidth,
-          scrollBarSize = theme.scrollBarSize;
-      var columnWidth = 0;
-      var fontWidth = this.getWidthForFont(font, state);
-      var rowsPerPage = height / rowHeight;
-      var bottom = Math.ceil(top + rowsPerPage);
-      GridUtils.iterateAllItems(top, bottom, floatingTopRowCount, floatingBottomRowCount, rowCount, function (row) {
-        var modelRow = _this3.getModelRow(row, state);
-
-        var text = model.textForCell(modelColumn, modelRow);
-
-        if (text) {
-          var cellPadding = cellHorizontalPadding * 2;
-          columnWidth = Math.max(columnWidth, text.length * fontWidth + cellPadding);
-        }
-      });
-      columnWidth = Math.max(Math.min(columnWidth, (width - rowHeaderWidth - scrollBarSize - rowFooterWidth) * GridMetricCalculator.MAX_COLUMN_WIDTH), cellHorizontalPadding * 2);
-      return columnWidth;
+
+    if (column === firstColumn) {
+      columnWidth += treePaddingX;
     }
-  }, {
-    key: "calculateTreePaddingX",
-    value: function calculateTreePaddingX(state) {
-      var top = state.top,
-          height = state.height,
-          model = state.model,
-          theme = state.theme;
-      var rowHeight = theme.rowHeight,
-          treeDepthIndent = theme.treeDepthIndent;
-      var treePadding = 0;
-      var rowsPerPage = height / rowHeight;
-      var bottom = Math.ceil(top + rowsPerPage);
-
-      for (var row = top; row <= bottom; row += 1) {
-        var modelRow = this.getModelRow(row, state);
-        var depth = model.depthForRow(modelRow);
-        treePadding = Math.max(treePadding, treeDepthIndent * (depth + 1));
-      }
 
-      return treePadding;
+    return columnWidth;
+  }
+
+  calculateColumnHeaderWidth(modelColumn, state) {
+    var {
+      model,
+      theme
+    } = state;
+    var {
+      headerFont,
+      headerHorizontalPadding
+    } = theme;
+    var headerText = model.textForColumnHeader(modelColumn);
+
+    if (headerText) {
+      var headerFontWidth = this.getWidthForFont(headerFont, state);
+      return headerText.length * headerFontWidth + headerHorizontalPadding * 2;
     }
-    /** Get the width of the provided font. Exploits the fact that we're using tabular figures so every character is same width */
 
-  }, {
-    key: "getWidthForFont",
-    value: function getWidthForFont(font, state) {
-      if (this.fontWidths.has(font)) {
-        return this.fontWidths.get(font);
-      }
+    return headerHorizontalPadding * 2;
+  }
 
-      var context = state.context;
-      context.font = font;
-      var textMetrics = context.measureText('8');
-      var width = textMetrics.width; // context.font changes the string a little bit, eg. '10px Arial, sans serif' => '10px Arial, "sans serif"'
-      // Rather than require checking with the correct font def (theme, or context font), just key it to both
+  calculateColumnDataWidth(modelColumn, state) {
+    var {
+      top,
+      height,
+      width,
+      model,
+      theme
+    } = state;
+    var {
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      rowCount
+    } = model;
+    var {
+      font,
+      cellHorizontalPadding,
+      rowHeight,
+      rowHeaderWidth,
+      rowFooterWidth,
+      scrollBarSize
+    } = theme;
+    var columnWidth = 0;
+    var fontWidth = this.getWidthForFont(font, state);
+    var rowsPerPage = height / rowHeight;
+    var bottom = Math.ceil(top + rowsPerPage);
+    GridUtils.iterateAllItems(top, bottom, floatingTopRowCount, floatingBottomRowCount, rowCount, row => {
+      var modelRow = this.getModelRow(row, state);
+      var text = model.textForCell(modelColumn, modelRow);
 
-      this.fontWidths.set(font, width);
-      this.fontWidths.set(context.font, width);
-      return width;
-    }
-    /**
-     * Sets the width for the specified column
-     * @param {Number} column The column model index to set
-     * @param {Number} size The size to set it to, or null to reset the column size
-     */
-
-  }, {
-    key: "setColumnWidth",
-    value: function setColumnWidth(column, size) {
-      var userColumnWidths = new Map(this.userColumnWidths);
-
-      if (size != null) {
-        userColumnWidths.set(column, Math.ceil(size));
-        GridMetricCalculator.trimMap(userColumnWidths);
-      } else {
-        userColumnWidths["delete"](column);
+      if (text) {
+        var cellPadding = cellHorizontalPadding * 2;
+        columnWidth = Math.max(columnWidth, text.length * fontWidth + cellPadding);
       }
+    });
+    columnWidth = Math.max(Math.min(columnWidth, (width - rowHeaderWidth - scrollBarSize - rowFooterWidth) * GridMetricCalculator.MAX_COLUMN_WIDTH), cellHorizontalPadding * 2);
+    return columnWidth;
+  }
 
-      this.userColumnWidths = userColumnWidths;
-    }
-    /**
-     * Resets the column width for the specified column to the calculated width
-     * @param {Number} column The column model index to reset
-     */
-
-  }, {
-    key: "resetColumnWidth",
-    value: function resetColumnWidth(column) {
-      this.setColumnWidth(column, null);
-      this.calculatedColumnWidths["delete"](column);
+  calculateTreePaddingX(state) {
+    var {
+      top,
+      height,
+      model,
+      theme
+    } = state;
+    var {
+      rowHeight,
+      treeDepthIndent
+    } = theme;
+    var treePadding = 0;
+    var rowsPerPage = height / rowHeight;
+    var bottom = Math.ceil(top + rowsPerPage);
+
+    for (var row = top; row <= bottom; row += 1) {
+      var modelRow = this.getModelRow(row, state);
+      var depth = model.depthForRow(modelRow);
+      treePadding = Math.max(treePadding, treeDepthIndent * (depth + 1));
     }
-    /**
-     * Sets the width for the specified row
-     * @param {Number} row The row model index to set
-     * @param {Number} size The size to set it to, or null to reset the row size
-     */
-
-  }, {
-    key: "setRowHeight",
-    value: function setRowHeight(row, size) {
-      var userRowHeights = new Map(this.userRowHeights);
-
-      if (size != null) {
-        userRowHeights.set(row, Math.ceil(size));
-        GridMetricCalculator.trimMap(userRowHeights);
-      } else {
-        userRowHeights["delete"](row);
-      }
 
-      this.userRowHeights = userRowHeights;
-    }
-  }, {
-    key: "resetRowHeight",
-    value: function resetRowHeight(row) {
-      this.setRowHeight(row, null);
-      this.calculatedRowHeights["delete"](row);
+    return treePadding;
+  }
+  /** Get the width of the provided font. Exploits the fact that we're using tabular figures so every character is same width */
+
+
+  getWidthForFont(font, state) {
+    if (this.fontWidths.has(font)) {
+      return this.fontWidths.get(font);
     }
-  }], [{
-    key: "trimMap",
-    value:
-    /** The size of the caches this calculator stores */
-
-    /** The maximum column width as a percentage of the full grid */
-    function trimMap(map) {
-      if (map.size > GridMetricCalculator.CACHE_SIZE) {
-        var keys = map.keys();
-        map["delete"](keys[0]);
-      }
+
+    var {
+      context
+    } = state;
+    context.font = font;
+    var textMetrics = context.measureText('8');
+    var {
+      width
+    } = textMetrics; // context.font changes the string a little bit, eg. '10px Arial, sans serif' => '10px Arial, "sans serif"'
+    // Rather than require checking with the correct font def (theme, or context font), just key it to both
+
+    this.fontWidths.set(font, width);
+    this.fontWidths.set(context.font, width);
+    return width;
+  }
+  /**
+   * Sets the width for the specified column
+   * @param {Number} column The column model index to set
+   * @param {Number} size The size to set it to, or null to reset the column size
+   */
+
+
+  setColumnWidth(column, size) {
+    var userColumnWidths = new Map(this.userColumnWidths);
+
+    if (size != null) {
+      userColumnWidths.set(column, Math.ceil(size));
+      GridMetricCalculator.trimMap(userColumnWidths);
+    } else {
+      userColumnWidths.delete(column);
     }
-    /**
-     * Get the coordinates of floating items in one dimension.
-     * Can be used for getting the y coordinates of floating rows, or x coordinates of floating columns, calculated using the `sizeMap` passed in.
-     * @param {number} startCount The number of floating items at the start (ie. `floatingTopRowCount` for rows, `floatingLeftColumnCount` for columns)
-     * @param {number} endCount The number of floating items at the end (ie. `floatingBottomRowCount` for rows, `floatingRightColumnCount` for columns)
-     * @param {number} totalCount Total number of items in this dimension (ie. `rowCount` for rows, `columnCount` for columns)
-     * @param {number} max The max coordinate value (ie. `maxY` for rows, `maxX` for columns)
-     * @param {Map<number, number>} sizeMap Map from index to size of item (ie. `rowHeightMap` for rows, `columnWidthMap` for columns)
-     */
-
-  }, {
-    key: "getFloatingCoordinates",
-    value: function getFloatingCoordinates(startCount, endCount, totalCount, max, sizeMap) {
-      var coordinates = new Map();
-      var x = 0;
-
-      for (var i = 0; i < startCount && i < totalCount; i += 1) {
-        coordinates.set(i, x);
-        x += sizeMap.get(i);
-      }
 
-      x = max;
+    this.userColumnWidths = userColumnWidths;
+  }
+  /**
+   * Resets the column width for the specified column to the calculated width
+   * @param {Number} column The column model index to reset
+   */
+
+
+  resetColumnWidth(column) {
+    this.setColumnWidth(column, null);
+    this.calculatedColumnWidths.delete(column);
+  }
+  /**
+   * Sets the width for the specified row
+   * @param {Number} row The row model index to set
+   * @param {Number} size The size to set it to, or null to reset the row size
+   */
 
-      for (var _i3 = 0; _i3 < endCount && totalCount - _i3 - 1 >= 0; _i3 += 1) {
-        x -= sizeMap.get(totalCount - _i3 - 1);
-        coordinates.set(totalCount - _i3 - 1, x);
-      }
 
-      return coordinates;
+  setRowHeight(row, size) {
+    var userRowHeights = new Map(this.userRowHeights);
+
+    if (size != null) {
+      userRowHeights.set(row, Math.ceil(size));
+      GridMetricCalculator.trimMap(userRowHeights);
+    } else {
+      userRowHeights.delete(row);
     }
-  }]);
 
-  return GridMetricCalculator;
-}();
+    this.userRowHeights = userRowHeights;
+  }
+
+  resetRowHeight(row) {
+    this.setRowHeight(row, null);
+    this.calculatedRowHeights.delete(row);
+  }
+
+}
 
 _defineProperty(GridMetricCalculator, "CACHE_SIZE", 10000);