@deephaven/grid 0.4.1-modules.0 → 0.5.2-beta.0

package/dist/GridMetricCalculator.js

@@ -1,6 +1,24 @@
+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.js";
+import GridUtils from './GridUtils';
 /* eslint class-methods-use-this: "off" */
 
 /* eslint react/destructuring-assignment: "off" */
@@ -11,58 +29,30 @@ import GridUtils from "./GridUtils.js";
  * Override this class and override the individual methods to provide additional functionality.
  */
 
-class GridMetricCalculator {
-  /** The size of the caches this calculator stores */
-
-  /** The maximum column width as a percentage of the full grid */
-  static trimMap(map) {
-    if (map.size > GridMetricCalculator.CACHE_SIZE) {
-      var keys = map.keys();
-      map.delete(keys[0]);
-    }
-  }
-  /**
-   * 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;
+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);
 
-    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;
@@ -77,1082 +67,1069 @@ class GridMetricCalculator {
   /** update the calculated metrics from the model/canvas that are useful for many functions */
 
 
-  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();
-    }
-
-    if (movedColumns !== this.movedColumns) {
-      this.movedColumns = movedColumns;
-      this.modelColumns.clear();
-    }
-
-    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))]);
-    }
+  _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();
+      }
 
-    var floatingColumns = [];
+      if (movedColumns !== this.movedColumns) {
+        this.movedColumns = movedColumns;
+        this.modelColumns.clear();
+      }
 
-    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))]);
-    }
+      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)))));
+      }
 
-    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
-    };
-  }
+      var floatingColumns = [];
 
-  getGridX(state) {
-    var {
-      theme
-    } = state;
-    var {
-      rowHeaderWidth
-    } = theme;
-    return rowHeaderWidth;
-  }
+      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)))));
+      }
 
-  getGridY(state) {
-    var {
-      theme
-    } = state;
-    var {
-      columnHeaderHeight
-    } = theme;
-    return columnHeaderHeight;
-  }
+      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;
+    }
+  }, {
+    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;
 
-  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;
-  }
+      for (var i = 0; i < max; i += 1) {
+        var modelIndex = getModelIndex(i, state);
 
-  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;
-  }
+        if (itemSizes.get(modelIndex) !== 0) {
+          return i;
+        }
+      }
 
-  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;
+      return 0;
+    }
+    /** Get the first column index that isn't hidden */
 
-    for (var i = 0; i < max; i += 1) {
-      var modelIndex = getModelIndex(i, state);
+  }, {
+    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 */
 
-      if (itemSizes.get(modelIndex) !== 0) {
-        return i;
-      }
+  }, {
+    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;
+      }
 
-    return 0;
-  }
-  /** Get the first column index that isn't hidden */
+      var x = 0;
 
+      while (lastLeft >= 0) {
+        var columnWidth = this.getVisibleColumnWidth(lastLeft, state);
+        x += columnWidth;
 
-  getFirstColumn(state) {
-    return this.getFirstIndex(this.userColumnWidths, this.getModelColumn.bind(this), state);
-  }
-  /** Get the first row index that isn't hidden */
+        if (x >= visibleWidth) {
+          return Math.min(lastLeft + 1, columnCount - 1);
+        }
 
+        lastLeft -= 1;
+      }
 
-  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;
+      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;
 
-    var x = 0;
+      while (lastTop > 0) {
+        var rowHeight = this.getVisibleRowHeight(lastTop, state);
+        y += rowHeight;
 
-    while (lastLeft >= 0) {
-      var columnWidth = this.getVisibleColumnWidth(lastLeft, state);
-      x += columnWidth;
+        if (y >= visibleHeight) {
+          return Math.min(lastTop + 1, rowCount - 1);
+        }
 
-      if (x >= visibleWidth) {
-        return Math.min(lastLeft + 1, columnCount - 1);
+        lastTop -= 1;
       }
 
-      lastLeft -= 1;
+      return 0;
     }
+  }, {
+    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 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;
+      return top;
     }
-
-    var y = 0;
-
-    while (lastTop > 0) {
-      var rowHeight = this.getVisibleRowHeight(lastTop, state);
-      y += rowHeight;
-
-      if (y >= visibleHeight) {
-        return Math.min(lastTop + 1, rowCount - 1);
+  }, {
+    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);
       }
 
-      lastTop -= 1;
+      return left;
     }
-
-    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: "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));
+      }
 
-    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;
+      for (var _i = 0; _i < floatingBottomRowCount && rowCount - _i - 1 >= 0; _i += 1) {
+        var row = rowCount - _i - 1;
+        rowHeights.set(row, this.getVisibleRowHeight(row, state));
+      }
 
-    while (left > 0 && x < floatingLeftWidth) {
-      left -= 1;
-      x += this.getVisibleColumnWidth(left, state);
+      return rowHeights;
     }
+  }, {
+    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 left;
-  }
+      return rowHeights;
+    }
+  }, {
+    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));
+      }
 
-  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);
-  }
+      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));
+      }
 
-  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));
+      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;
+      }
 
-    for (var _i2 = 0; _i2 < floatingBottomRowCount && rowCount - _i2 - 1 >= 0; _i2 += 1) {
-      var row = rowCount - _i2 - 1;
-      rowHeights.set(row, this.getVisibleRowHeight(row, state));
+      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);
+    }
+  }, {
+    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 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;
+      return visibleColumnXs;
+    }
+  }, {
+    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);
     }
+  }, {
+    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 rowHeights;
-  }
+      return visibleRowYs;
+    }
+    /** 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]);
+          }
+        });
+      }
 
-  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));
+      return visibleRowTreeBoxes;
     }
+  }, {
+    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;
+      }
 
-    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));
+      return floatingWidth;
     }
+  }, {
+    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 columnWidths;
-  }
+      return floatingWidth;
+    }
+  }, {
+    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;
+      }
 
-  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;
+      return floatingHeight;
     }
+  }, {
+    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 columnWidths;
-  }
+      return floatingHeight;
+    }
+  }, {
+    key: "getTopVisible",
+    value: function getTopVisible(state, visibleRowYs, visibleRowHeights, visibleRows) {
+      var floatingHeight = this.getFloatingTopHeight(state, visibleRowHeights);
 
-  getFloatingColumnXs(state, columnWidthMap, maxX) {
-    var {
-      model
-    } = state;
-    var {
-      columnCount,
-      floatingLeftColumnCount,
-      floatingRightColumnCount
-    } = model;
-    return GridMetricCalculator.getFloatingCoordinates(floatingLeftColumnCount, floatingRightColumnCount, columnCount, maxX, columnWidthMap);
-  }
+      for (var i = 0; i < visibleRows.length; i += 1) {
+        var row = visibleRows[i];
 
-  getVisibleColumnXs(visibleColumnWidths, visibleColumns, leftOffset) {
-    var visibleColumnXs = new Map();
-    var x = -leftOffset;
+        if (visibleRowYs.get(row) >= floatingHeight) {
+          return row;
+        }
+      }
 
-    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 0;
     }
+  }, {
+    key: "getLeftVisible",
+    value: function getLeftVisible(state, visibleColumnXs, visibleColumnWidths, visibleColumns) {
+      var floatingWidth = this.getFloatingLeftWidth(state, visibleColumnWidths);
 
-    return visibleColumnXs;
-  }
-
-  getFloatingRowYs(state, rowHeightMap, maxY) {
-    var {
-      model
-    } = state;
-    var {
-      floatingTopRowCount,
-      floatingBottomRowCount,
-      rowCount
-    } = model;
-    return GridMetricCalculator.getFloatingCoordinates(floatingTopRowCount, floatingBottomRowCount, rowCount, maxY, rowHeightMap);
-  }
+      for (var i = 0; i < visibleColumns.length; i += 1) {
+        var column = visibleColumns[i];
 
-  getVisibleRowYs(visibleRowHeights, visibleRows, topOffset) {
-    var visibleRowYs = new Map();
-    var y = -topOffset;
+        if (visibleColumnXs.get(column) >= floatingWidth) {
+          return column;
+        }
+      }
 
-    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 0;
     }
-
-    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]);
+  }, {
+    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 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;
-
-    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 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 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;
+      return 0;
     }
-
-    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: "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 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: "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;
-  }
-
-  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;
+  }, {
+    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);
       }
-    }
-
-    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;
+      if (dataSize < maxSize) {
+        lastIndex += Math.ceil((maxSize - dataSize) / defaultItemSize);
       }
-    }
 
-    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 lastIndex;
     }
-
-    return 0;
-  }
-
-  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: "getVisibleItemSize",
+    value: function getVisibleItemSize(modelIndex, userSizes, calculateSize) {
+      if (userSizes.has(modelIndex)) {
+        return userSizes.get(modelIndex);
       }
-    }
-
-    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);
+      return calculateSize();
     }
+  }, {
+    key: "getVisibleRowHeight",
+    value: function getVisibleRowHeight(row, state) {
+      var _this = this;
 
-    if (dataSize < maxSize) {
-      lastIndex += Math.ceil((maxSize - dataSize) / defaultItemSize);
+      var modelRow = this.getModelRow(row, state);
+      return this.getVisibleItemSize(modelRow, this.userRowHeights, function () {
+        return _this.calculateRowHeight(row, modelRow, state);
+      });
     }
-
-    return lastIndex;
-  }
-
-  getVisibleItemSize(modelIndex, userSizes, calculateSize) {
-    if (userSizes.has(modelIndex)) {
-      return userSizes.get(modelIndex);
+  }, {
+    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);
+      });
     }
+  }, {
+    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 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);
+      return modelRows;
     }
+  }, {
+    key: "getModelRow",
+    value: function getModelRow(visibleRow, state) {
+      if (this.modelRows.has(visibleRow)) {
+        return this.modelRows.get(visibleRow);
+      }
 
-    return modelRows;
-  }
-
-  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;
     }
+  }, {
+    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);
+      }
 
-    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);
+      return modelColumns;
     }
+  }, {
+    key: "getModelColumn",
+    value: function getModelColumn(visibleColumn, state) {
+      if (this.modelColumns.has(visibleColumn)) {
+        return this.modelColumns.get(visibleColumn);
+      }
 
-    return modelColumns;
-  }
-
-  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;
     }
+  }, {
+    key: "calculateRowHeight",
+    value: function calculateRowHeight(row, modelRow, state) {
+      var theme = state.theme;
+      var autoSizeRows = theme.autoSizeRows,
+          rowHeight = theme.rowHeight;
+
+      if (!autoSizeRows) {
+        return rowHeight;
+      }
 
-    var {
-      movedColumns
-    } = state;
-    var modelColumn = GridUtils.getModelIndex(visibleColumn, movedColumns);
-    this.modelColumns.set(visibleColumn, modelColumn);
-    return modelColumn;
-  }
+      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.
 
-  calculateRowHeight(row, modelRow, state) {
-    var {
-      theme
-    } = state;
-    var {
-      autoSizeRows,
-      rowHeight
-    } = theme;
 
-    if (!autoSizeRows) {
+      this.calculatedRowHeights.set(modelRow, Math.ceil(rowHeight));
+      GridMetricCalculator.trimMap(this.calculatedRowHeights);
       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 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.
+      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);
+      }
 
+      if (column === firstColumn) {
+        columnWidth += treePaddingX;
+      }
 
-    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;
+      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;
+      }
 
-    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);
+      return headerHorizontalPadding * 2;
     }
-
-    if (column === firstColumn) {
-      columnWidth += treePaddingX;
+  }, {
+    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;
     }
+  }, {
+    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 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;
+      return treePadding;
     }
+    /** Get the width of the provided font. Exploits the fact that we're using tabular figures so every character is same width */
 
-    return headerHorizontalPadding * 2;
-  }
+  }, {
+    key: "getWidthForFont",
+    value: function getWidthForFont(font, state) {
+      if (this.fontWidths.has(font)) {
+        return this.fontWidths.get(font);
+      }
 
-  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);
+      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
 
-      if (text) {
-        var cellPadding = cellHorizontalPadding * 2;
-        columnWidth = Math.max(columnWidth, text.length * fontWidth + cellPadding);
+      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);
       }
-    });
-    columnWidth = Math.max(Math.min(columnWidth, (width - rowHeaderWidth - scrollBarSize - rowFooterWidth) * GridMetricCalculator.MAX_COLUMN_WIDTH), cellHorizontalPadding * 2);
-    return columnWidth;
-  }
 
-  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));
+      this.userColumnWidths = userColumnWidths;
     }
-
-    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);
+    /**
+     * 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);
     }
+    /**
+     * 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);
+      }
 
-    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);
+      this.userRowHeights = userRowHeights;
     }
+  }, {
+    key: "resetRowHeight",
+    value: function resetRowHeight(row) {
+      this.setRowHeight(row, null);
+      this.calculatedRowHeights["delete"](row);
+    }
+  }], [{
+    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]);
+      }
+    }
+    /**
+     * 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);
+      }
 
-    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
-   */
-
+      x = max;
 
-  setRowHeight(row, size) {
-    var userRowHeights = new Map(this.userRowHeights);
+      for (var _i3 = 0; _i3 < endCount && totalCount - _i3 - 1 >= 0; _i3 += 1) {
+        x -= sizeMap.get(totalCount - _i3 - 1);
+        coordinates.set(totalCount - _i3 - 1, x);
+      }
 
-    if (size != null) {
-      userRowHeights.set(row, Math.ceil(size));
-      GridMetricCalculator.trimMap(userRowHeights);
-    } else {
-      userRowHeights.delete(row);
+      return coordinates;
     }
+  }]);
 
-    this.userRowHeights = userRowHeights;
-  }
-
-  resetRowHeight(row) {
-    this.setRowHeight(row, null);
-    this.calculatedRowHeights.delete(row);
-  }
-
-}
+  return GridMetricCalculator;
+}();
 
 _defineProperty(GridMetricCalculator, "CACHE_SIZE", 10000);