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

package/dist/GridRenderer.js

@@ -1,26 +1,8 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-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 memoizeClear from './memoizeClear';
-import GridUtils from './GridUtils';
-import GridColorUtils from './GridColorUtils';
+import memoizeClear from "./memoizeClear.js";
+import GridUtils from "./GridUtils.js";
+import GridColorUtils from "./GridColorUtils.js";
 /* eslint react/destructuring-assignment: "off" */
 
 /* eslint class-methods-use-this: "off" */
@@ -33,1826 +15,1930 @@ import GridColorUtils from './GridColorUtils';
  * your own methods to customize drawing of the grid (eg. Draw icons or special features)
  */
 
-var GridRenderer = /*#__PURE__*/function () {
-  function GridRenderer() {
-    _classCallCheck(this, GridRenderer);
-
-    _defineProperty(this, "getCachedTruncatedString", memoizeClear(function (context, text, width, fontWidth) {
-      return GridRenderer.truncateToWidth(context, text, width, fontWidth);
-    }, {
+class GridRenderer {
+  constructor() {
+    _defineProperty(this, "getCachedTruncatedString", memoizeClear((context, text, width, fontWidth) => GridRenderer.truncateToWidth(context, text, width, fontWidth), {
       max: 10000
     }));
 
-    _defineProperty(this, "getCachedBackgroundColors", memoizeClear(function (backgroundColors, maxDepth) {
-      return backgroundColors.split(' ').map(function (color) {
-        var colors = [];
+    _defineProperty(this, "getCachedBackgroundColors", memoizeClear((backgroundColors, maxDepth) => backgroundColors.split(' ').map(color => {
+      var colors = [];
 
-        for (var i = 0; i < maxDepth; i += 1) {
-          colors.push(GridColorUtils.darkenForDepth(color, i, maxDepth));
-        }
+      for (var i = 0; i < maxDepth; i += 1) {
+        colors.push(GridColorUtils.darkenForDepth(color, i, maxDepth));
+      }
 
-        return colors;
-      });
-    }, {
+      return colors;
+    }), {
       max: 1000
     }));
 
-    _defineProperty(this, "getCachedColorWithAlpha", memoizeClear(function (color, alpha) {
-      return GridColorUtils.colorWithAlpha(color, alpha);
-    }, {
+    _defineProperty(this, "getCachedColorWithAlpha", memoizeClear((color, alpha) => GridColorUtils.colorWithAlpha(color, alpha), {
       max: 1000
     }));
   }
 
-  _createClass(GridRenderer, [{
-    key: "drawCanvas",
-    value:
-    /**
-     *
-     * @param {CanvasRenderingContext2D} context The context to draw the grid in
-     * @param {GridState} state State of the grid, { left, top, mouseX, mouseY, selectedRanges, theme, model, metrics }
-     */
-    function drawCanvas(state) {
-      var context = state.context;
-      context.save();
-      this.configureContext(context, state);
-      this.drawBackground(context, state);
-      this.drawGrid(context, state);
-      this.drawHeaders(context, state);
-      this.drawFooters(context, state);
-      this.drawDraggingColumn(context, state);
-      this.drawDraggingRow(context, state);
-      this.drawScrollBars(context, state);
-      context.restore();
+  /**
+   * Truncate a string and add ellipses if necessary
+   * @param {string} str The string to truncate
+   * @param {number} len The length to truncate the string to. If longer than the actual string, just returns the string
+   */
+  static truncate(str, len) {
+    if (len < str.length) {
+      // eslint-disable-next-line prefer-template
+      return str.substr(0, len) + '…';
     }
-  }, {
-    key: "configureContext",
-    value: function configureContext(context, state) {
-      var theme = state.theme;
-      context.font = theme.font;
-      context.textBaseline = 'middle';
-      context.lineCap = 'butt';
-    }
-  }, {
-    key: "drawBackground",
-    value: function drawBackground(context, state) {
-      var theme = state.theme,
-          metrics = state.metrics;
-      var width = metrics.width,
-          height = metrics.height;
-      context.fillStyle = theme.backgroundColor;
-      context.fillRect(0, 0, width, height);
-    }
-  }, {
-    key: "drawGrid",
-    value: function drawGrid(context, state) {
-      var metrics = state.metrics,
-          draggingRow = state.draggingRow,
-          draggingColumn = state.draggingColumn;
-      var gridX = metrics.gridX,
-          gridY = metrics.gridY;
-      context.translate(gridX, gridY);
-      this.drawGridBackground(context, state, draggingRow == null && draggingColumn == null);
-      this.drawCellContents(context, state);
-      this.drawFloatingRows(context, state);
-      this.drawFloatingColumns(context, state);
-      context.translate(-gridX, -gridY);
-    }
-  }, {
-    key: "drawFloatingRows",
-    value: function drawFloatingRows(context, state) {
-      var metrics = state.metrics,
-          theme = state.theme;
-      var draggingRow = metrics.draggingRow,
-          draggingColumn = metrics.draggingColumn,
-          floatingTopRowCount = metrics.floatingTopRowCount,
-          floatingBottomRowCount = metrics.floatingBottomRowCount,
-          floatingRows = metrics.floatingRows,
-          rowCount = metrics.rowCount,
-          visibleColumns = metrics.visibleColumns,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleRowHeights = metrics.visibleRowHeights;
-
-      if (floatingRows.length === 0) {
-        return;
-      }
-
-      if (theme.floatingRowBackgroundColors) {
-        this.drawRowStripesForRows(context, state, floatingRows, theme.floatingRowBackgroundColors);
-      }
-
-      if (draggingRow == null && draggingColumn == null) {
-        this.drawFloatingMouseRowHover(context, state);
-      }
-
-      this.drawGridLinesForItems(context, state, visibleColumns, floatingRows, theme.floatingGridColumnColor, theme.floatingGridRowColor);
-      this.drawCellBackgroundsForItems(context, state, visibleColumns, floatingRows);
-      this.drawFloatingBorders(context, state); // Draw the floating row selection...
 
-      if (floatingTopRowCount > 0) {
-        this.drawSelectedRanges(context, state, {
-          top: 0,
-          bottom: floatingTopRowCount - 1,
-          maxY: visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) - 0.5
-        }, true);
-      }
+    return str;
+  }
+  /**
+   * Uses binary search to truncate a string to fit in the provided width
+   * @param {Context} context The drawing context to measure the text in
+   * @param {string} str The string to get the maximum length it can draw
+   * @param {number} width The width to truncate it to
+   * @param {number} start The low boundary to start the search
+   * @param {number} end The high boundary to start the search
+   */
+
+
+  static binaryTruncateToWidth(context, str, width) {
+    var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : str.length;
+
+    if (end >= str.length && context.measureText(str).width <= width) {
+      // IDS-6069 If the whole string can fit, don't bother checking for truncation
+      // The ellipses are actually slightly wider than other chars, and it's possible
+      // that the "truncation" ends up being slightly longer, which messes up the search
+      // algorithm below.
+      // Besides, if we already fit, it's just faster to not bother checking other truncations.
+      return str;
+    }
 
-      if (floatingBottomRowCount > 0) {
-        this.drawSelectedRanges(context, state, {
-          top: rowCount - floatingBottomRowCount - 1,
-          bottom: rowCount - 1,
-          minY: visibleRowYs.get(rowCount - floatingBottomRowCount) + 0.5,
-          maxY: visibleRowYs.get(rowCount - 1) + visibleRowHeights.get(rowCount - 1) - 0.5
-        }, true);
-      } // Draw the cell content...
+    var lo = start;
+    var hi = Math.min(str.length - 1, end);
+    var result = str;
 
+    while (hi > lo) {
+      var mid = Math.ceil((hi + lo) / 2);
+      var truncatedStr = GridRenderer.truncate(str, mid);
 
-      for (var c = 0; c < visibleColumns.length; c += 1) {
-        var column = visibleColumns[c];
+      if (context.measureText(truncatedStr).width <= width) {
+        result = truncatedStr;
 
-        for (var r = 0; r < floatingRows.length; r += 1) {
-          var row = floatingRows[r];
-          this.drawCellContent(context, state, column, row);
+        if (lo === mid) {
+          break;
         }
+
+        lo = mid;
+      } else {
+        hi = mid - 1;
       }
     }
-  }, {
-    key: "drawFloatingColumns",
-    value: function drawFloatingColumns(context, state) {
-      var metrics = state.metrics,
-          theme = state.theme;
-      var draggingRow = metrics.draggingRow,
-          draggingColumn = metrics.draggingColumn,
-          floatingLeftColumnCount = metrics.floatingLeftColumnCount,
-          floatingRightColumnCount = metrics.floatingRightColumnCount,
-          floatingLeftWidth = metrics.floatingLeftWidth,
-          floatingRightWidth = metrics.floatingRightWidth,
-          floatingColumns = metrics.floatingColumns,
-          gridX = metrics.gridX,
-          maxX = metrics.maxX,
-          columnCount = metrics.columnCount,
-          visibleRows = metrics.visibleRows,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          width = metrics.width;
-
-      if (floatingColumns.length === 0) {
-        return;
-      }
 
-      if (theme.floatingRowBackgroundColors) {
-        this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, 0, floatingLeftWidth);
-        this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, width - gridX - floatingRightWidth, maxX);
-      }
+    return result;
+  }
+  /**
+   * Truncate a string (if necessary) to fit in the specified width.
+   * First uses the estimated font width to calculate a lower/upper bound
+   * Then uses binary search within those bounds to find the exact max length
+   * @param {Context} context The drawing context
+   * @param {string} str The string to calculate max length for
+   * @param {number} width The width to truncate within
+   * @param {number} fontWidth The estimated width of each character
+   */
+
+
+  static truncateToWidth(context, str, width) {
+    var fontWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : GridRenderer.DEFAULT_FONT_WIDTH;
+
+    if (width <= 0 || str.length <= 0) {
+      return null;
+    }
 
-      if (draggingRow == null && draggingColumn == null) {
-        this.drawFloatingMouseRowHover(context, state);
-      }
+    var lo = Math.min(Math.floor(width / fontWidth / 2), str.length);
+    var hi = Math.min(Math.ceil(width / fontWidth * 2), str.length);
+    return GridRenderer.binaryTruncateToWidth(context, str, width, lo, hi);
+  }
+  /**
+   *
+   * @param {CanvasRenderingContext2D} context The context to draw the grid in
+   * @param {GridState} state State of the grid, { left, top, mouseX, mouseY, selectedRanges, theme, model, metrics }
+   */
+
+
+  drawCanvas(state) {
+    var {
+      context
+    } = state;
+    context.save();
+    this.configureContext(context, state);
+    this.drawBackground(context, state);
+    this.drawGrid(context, state);
+    this.drawHeaders(context, state);
+    this.drawFooters(context, state);
+    this.drawDraggingColumn(context, state);
+    this.drawDraggingRow(context, state);
+    this.drawScrollBars(context, state);
+    context.restore();
+  }
 
-      this.drawGridLinesForItems(context, state, floatingColumns, visibleRows, theme.floatingGridColumnColor, theme.floatingGridRowColor);
-      this.drawCellBackgroundsForItems(context, state, floatingColumns, visibleRows);
-      this.drawFloatingBorders(context, state); // Draw the floating column selection...
+  configureContext(context, state) {
+    var {
+      theme
+    } = state;
+    context.font = theme.font;
+    context.textBaseline = 'middle';
+    context.lineCap = 'butt';
+  }
 
-      if (floatingLeftColumnCount > 0) {
-        this.drawSelectedRanges(context, state, {
-          left: 0,
-          right: floatingLeftColumnCount,
-          maxX: visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1)
-        }, true);
-      }
+  drawBackground(context, state) {
+    var {
+      theme,
+      metrics
+    } = state;
+    var {
+      width,
+      height
+    } = metrics;
+    context.fillStyle = theme.backgroundColor;
+    context.fillRect(0, 0, width, height);
+  }
 
-      if (floatingRightColumnCount > 0) {
-        this.drawSelectedRanges(context, state, {
-          left: columnCount - floatingRightColumnCount,
-          right: columnCount - 1,
-          minX: visibleColumnXs.get(columnCount - floatingRightColumnCount) + 0.5,
-          maxX: visibleColumnXs.get(columnCount - 1) + visibleColumnWidths.get(columnCount - 1)
-        }, true);
-      } // Draw the cell content...
+  drawGrid(context, state) {
+    var {
+      metrics,
+      draggingRow,
+      draggingColumn
+    } = state;
+    var {
+      gridX,
+      gridY
+    } = metrics;
+    context.translate(gridX, gridY);
+    this.drawGridBackground(context, state, draggingRow == null && draggingColumn == null);
+    this.drawCellContents(context, state);
+    this.drawFloatingRows(context, state);
+    this.drawFloatingColumns(context, state);
+    context.translate(-gridX, -gridY);
+  }
 
+  drawFloatingRows(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      draggingRow,
+      draggingColumn,
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      floatingRows,
+      rowCount,
+      visibleColumns,
+      visibleRowYs,
+      visibleRowHeights
+    } = metrics;
+
+    if (floatingRows.length === 0) {
+      return;
+    }
 
-      for (var c = 0; c < floatingColumns.length; c += 1) {
-        var column = floatingColumns[c];
+    if (theme.floatingRowBackgroundColors) {
+      this.drawRowStripesForRows(context, state, floatingRows, theme.floatingRowBackgroundColors);
+    }
 
-        for (var r = 0; r < visibleRows.length; r += 1) {
-          var row = visibleRows[r];
-          this.drawCellContent(context, state, column, row);
-        }
-      }
+    if (draggingRow == null && draggingColumn == null) {
+      this.drawFloatingMouseRowHover(context, state);
     }
-  }, {
-    key: "drawFloatingBorders",
-    value: function drawFloatingBorders(context, state) {
-      var metrics = state.metrics,
-          theme = state.theme;
-      var floatingTopRowCount = metrics.floatingTopRowCount,
-          floatingBottomRowCount = metrics.floatingBottomRowCount,
-          floatingLeftColumnCount = metrics.floatingLeftColumnCount,
-          floatingRightColumnCount = metrics.floatingRightColumnCount,
-          rowCount = metrics.rowCount,
-          columnCount = metrics.columnCount,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleRowHeights = metrics.visibleRowHeights,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          maxX = metrics.maxX,
-          maxY = metrics.maxY;
-      var floatingDividerOuterColor = theme.floatingDividerOuterColor,
-          floatingDividerInnerColor = theme.floatingDividerInnerColor;
-      context.lineWidth = 3;
-      context.beginPath();
-      context.strokeStyle = floatingDividerOuterColor;
 
-      if (floatingTopRowCount > 0) {
-        var y = visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) + 0.5;
-        context.moveTo(0.5, y);
-        context.lineTo(maxX - 0.5, y);
-      }
+    this.drawGridLinesForItems(context, state, visibleColumns, floatingRows, theme.floatingGridColumnColor, theme.floatingGridRowColor);
+    this.drawCellBackgroundsForItems(context, state, visibleColumns, floatingRows);
+    this.drawFloatingBorders(context, state); // Draw the floating row selection...
 
-      if (floatingBottomRowCount > 0) {
-        var _y = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
+    if (floatingTopRowCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        top: 0,
+        bottom: floatingTopRowCount - 1,
+        maxY: visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) - 0.5
+      }, true);
+    }
 
-        context.moveTo(0.5, _y);
-        context.lineTo(maxX - 0.5, _y);
-      }
+    if (floatingBottomRowCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        top: rowCount - floatingBottomRowCount - 1,
+        bottom: rowCount - 1,
+        minY: visibleRowYs.get(rowCount - floatingBottomRowCount) + 0.5,
+        maxY: visibleRowYs.get(rowCount - 1) + visibleRowHeights.get(rowCount - 1) - 0.5
+      }, true);
+    } // Draw the cell content...
 
-      if (floatingLeftColumnCount > 0) {
-        var x = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
-        context.moveTo(x, 0.5);
-        context.lineTo(x, maxY - 0.5);
-      }
 
-      if (floatingRightColumnCount > 0) {
-        var _x = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
+    for (var c = 0; c < visibleColumns.length; c += 1) {
+      var column = visibleColumns[c];
 
-        context.moveTo(_x, 0.5);
-        context.lineTo(_x, maxY - 0.5);
+      for (var r = 0; r < floatingRows.length; r += 1) {
+        var row = floatingRows[r];
+        this.drawCellContent(context, state, column, row);
       }
+    }
+  }
 
-      context.stroke();
-      context.beginPath();
-      context.lineWidth = 1;
-      context.strokeStyle = floatingDividerInnerColor;
+  drawFloatingColumns(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      draggingRow,
+      draggingColumn,
+      floatingLeftColumnCount,
+      floatingRightColumnCount,
+      floatingLeftWidth,
+      floatingRightWidth,
+      floatingColumns,
+      gridX,
+      maxX,
+      columnCount,
+      visibleRows,
+      visibleColumnXs,
+      visibleColumnWidths,
+      width
+    } = metrics;
+
+    if (floatingColumns.length === 0) {
+      return;
+    }
 
-      if (floatingTopRowCount > 0) {
-        var _y2 = visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) + 0.5;
+    if (theme.floatingRowBackgroundColors) {
+      this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, 0, floatingLeftWidth);
+      this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, width - gridX - floatingRightWidth, maxX);
+    }
 
-        context.moveTo(0.5, _y2);
-        context.lineTo(maxX - 0.5, _y2);
-      }
+    if (draggingRow == null && draggingColumn == null) {
+      this.drawFloatingMouseRowHover(context, state);
+    }
 
-      if (floatingBottomRowCount > 0) {
-        var _y3 = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
+    this.drawGridLinesForItems(context, state, floatingColumns, visibleRows, theme.floatingGridColumnColor, theme.floatingGridRowColor);
+    this.drawCellBackgroundsForItems(context, state, floatingColumns, visibleRows);
+    this.drawFloatingBorders(context, state); // Draw the floating column selection...
 
-        context.moveTo(0.5, _y3);
-        context.lineTo(maxX - 0.5, _y3);
-      }
+    if (floatingLeftColumnCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        left: 0,
+        right: floatingLeftColumnCount,
+        maxX: visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1)
+      }, true);
+    }
 
-      if (floatingLeftColumnCount > 0) {
-        var _x2 = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
+    if (floatingRightColumnCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        left: columnCount - floatingRightColumnCount,
+        right: columnCount - 1,
+        minX: visibleColumnXs.get(columnCount - floatingRightColumnCount) + 0.5,
+        maxX: visibleColumnXs.get(columnCount - 1) + visibleColumnWidths.get(columnCount - 1)
+      }, true);
+    } // Draw the cell content...
 
-        context.moveTo(_x2, 0.5);
-        context.lineTo(_x2, maxY - 0.5);
-      }
 
-      if (floatingRightColumnCount > 0) {
-        var _x3 = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
+    for (var c = 0; c < floatingColumns.length; c += 1) {
+      var column = floatingColumns[c];
 
-        context.moveTo(_x3, 0.5);
-        context.lineTo(_x3, maxY - 0.5);
+      for (var r = 0; r < visibleRows.length; r += 1) {
+        var row = visibleRows[r];
+        this.drawCellContent(context, state, column, row);
       }
+    }
+  }
 
-      context.stroke();
+  drawFloatingBorders(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount,
+      rowCount,
+      columnCount,
+      visibleRowYs,
+      visibleColumnXs,
+      visibleRowHeights,
+      visibleColumnWidths,
+      maxX,
+      maxY
+    } = metrics;
+    var {
+      floatingDividerOuterColor,
+      floatingDividerInnerColor
+    } = theme;
+    context.lineWidth = 3;
+    context.beginPath();
+    context.strokeStyle = floatingDividerOuterColor;
+
+    if (floatingTopRowCount > 0) {
+      var y = visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) + 0.5;
+      context.moveTo(0.5, y);
+      context.lineTo(maxX - 0.5, y);
     }
-  }, {
-    key: "drawGridBackground",
-    value: function drawGridBackground(context, state) {
-      var drawHover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      this.drawRowStripes(context, state);
 
-      if (drawHover) {
-        this.drawMouseColumnHover(context, state);
-        this.drawMouseRowHover(context, state);
-      }
+    if (floatingBottomRowCount > 0) {
+      var _y = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
 
-      this.drawGridLines(context, state);
-      this.drawCellBackgrounds(context, state);
-      var metrics = state.metrics;
-      var bottom = metrics.bottom,
-          right = metrics.right,
-          floatingBottomRowCount = metrics.floatingBottomRowCount,
-          floatingLeftColumnCount = metrics.floatingLeftColumnCount,
-          floatingRightColumnCount = metrics.floatingRightColumnCount,
-          floatingTopColumnCount = metrics.floatingTopColumnCount,
-          columnCount = metrics.columnCount,
-          rowCount = metrics.rowCount,
-          visibleRowHeights = metrics.visibleRowHeights,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          width = metrics.width,
-          height = metrics.height;
-      this.drawSelectedRanges(context, state, {
-        bottom: Math.min(bottom, rowCount - floatingBottomRowCount - 1),
-        right: Math.min(right, columnCount - floatingRightColumnCount - 1),
-        minX: floatingLeftColumnCount > 0 && visibleColumnXs.has(floatingLeftColumnCount + 1) ? visibleColumnXs.get(floatingLeftColumnCount + 1) : -10,
-        minY: floatingTopColumnCount > 0 && visibleRowYs.has(floatingTopColumnCount + 1) ? visibleRowYs.get(floatingTopColumnCount + 1) : -10,
-        maxX: floatingRightColumnCount > 0 && visibleColumnXs.has(columnCount - floatingRightColumnCount - 1) ? visibleColumnXs.get(columnCount - floatingRightColumnCount - 1) + visibleColumnWidths.get(columnCount - floatingRightColumnCount - 1) - 0.5 : width + 10,
-        maxY: floatingBottomRowCount > 0 && visibleRowYs.has(rowCount - floatingBottomRowCount - 1) ? visibleRowYs.get(rowCount - floatingBottomRowCount - 1) + visibleRowHeights.get(rowCount - floatingBottomRowCount - 1) - 0.5 : height + 10
-      });
-    }
-  }, {
-    key: "drawRowStripes",
-    value: function drawRowStripes(context, state) {
-      var metrics = state.metrics,
-          theme = state.theme;
-      var visibleRows = metrics.visibleRows;
-      var rowBackgroundColors = theme.rowBackgroundColors;
-
-      if (!rowBackgroundColors) {
-        return;
-      }
+      context.moveTo(0.5, _y);
+      context.lineTo(maxX - 0.5, _y);
+    }
 
-      this.drawRowStripesForRows(context, state, visibleRows, rowBackgroundColors);
-    }
-  }, {
-    key: "drawRowStripesForRows",
-    value: function drawRowStripesForRows(context, state, rows, rowBackgroundColors) {
-      var minX = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-      var maxX = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : state.metrics.maxX;
-      var theme = state.theme,
-          metrics = state.metrics,
-          model = state.model;
-      var maxDepth = theme.maxDepth,
-          shadowBlur = theme.shadowBlur,
-          shadowColor = theme.shadowColor;
-      var colorSets = this.getCachedBackgroundColors(rowBackgroundColors, maxDepth);
-      var visibleRowYs = metrics.visibleRowYs,
-          visibleRowHeights = metrics.visibleRowHeights; // Optimize by grouping together all rows that end up with the same color
-
-      var colorRowMap = new Map();
-      var topShadowRows = []; // Rows that are deeper than the row above them
-
-      var bottomShadowRows = [];
-
-      var addRowToColorMap = function addRowToColorMap(row, rowAbove) {
-        var depth = model.depthForRow(row);
-        var colorSet = colorSets[row % colorSets.length];
-        var color = colorSet[Math.min(depth, colorSet.length - 1)];
-
-        if (!colorRowMap.has(color)) {
-          colorRowMap.set(color, []);
-        }
+    if (floatingLeftColumnCount > 0) {
+      var x = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
+      context.moveTo(x, 0.5);
+      context.lineTo(x, maxY - 0.5);
+    }
 
-        colorRowMap.get(color).push(row);
+    if (floatingRightColumnCount > 0) {
+      var _x = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
 
-        if (rowAbove != null) {
-          var depthAbove = model.depthForRow(rowAbove);
+      context.moveTo(_x, 0.5);
+      context.lineTo(_x, maxY - 0.5);
+    }
 
-          if (depthAbove < depth) {
-            topShadowRows.push(row);
-          } else if (depthAbove > depth) {
-            bottomShadowRows.push(rowAbove);
-          }
-        }
-      }; // Add all the regular row stripes
+    context.stroke();
+    context.beginPath();
+    context.lineWidth = 1;
+    context.strokeStyle = floatingDividerInnerColor;
 
+    if (floatingTopRowCount > 0) {
+      var _y2 = visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) + 0.5;
 
-      for (var i = 0; i < rows.length; i += 1) {
-        var row = rows[i];
-        var rowAbove = i > 0 ? rows[i - 1] : null;
-        addRowToColorMap(row, rowAbove);
-      }
+      context.moveTo(0.5, _y2);
+      context.lineTo(maxX - 0.5, _y2);
+    }
 
-      colorRowMap.forEach(function (colorRows, color) {
-        context.fillStyle = color;
-        context.beginPath();
+    if (floatingBottomRowCount > 0) {
+      var _y3 = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
 
-        for (var _i = 0; _i < colorRows.length; _i += 1) {
-          var _row = colorRows[_i];
-          var y = visibleRowYs.get(_row);
-          var rowHeight = visibleRowHeights.get(_row);
-          context.rect(minX, y, maxX, rowHeight);
-        }
+      context.moveTo(0.5, _y3);
+      context.lineTo(maxX - 0.5, _y3);
+    }
 
-        context.fill();
-      });
-
-      if (topShadowRows.length > 0) {
-        context.save();
-        var startColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
-        var endColor = this.getCachedColorWithAlpha(shadowColor, 0);
-        var gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
-        gradient.addColorStop(0, startColor);
-        gradient.addColorStop(1, endColor);
-        context.fillStyle = gradient;
-
-        for (var _i2 = 0; _i2 < topShadowRows.length; _i2 += 1) {
-          var _row2 = topShadowRows[_i2];
-          var y = visibleRowYs.get(_row2); // Use a translate so we can reuse the gradient
-
-          context.translate(0, y);
-          context.fillRect(minX, 0, maxX, shadowBlur);
-          context.translate(0, -y);
-        }
+    if (floatingLeftColumnCount > 0) {
+      var _x2 = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
 
-        context.restore();
-      }
+      context.moveTo(_x2, 0.5);
+      context.lineTo(_x2, maxY - 0.5);
+    }
 
-      if (bottomShadowRows.length > 0) {
-        context.save();
+    if (floatingRightColumnCount > 0) {
+      var _x3 = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
 
-        var _startColor = this.getCachedColorWithAlpha(shadowColor, 0);
+      context.moveTo(_x3, 0.5);
+      context.lineTo(_x3, maxY - 0.5);
+    }
 
-        var _endColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
+    context.stroke();
+  }
 
-        var _gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
+  drawGridBackground(context, state) {
+    var drawHover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    this.drawRowStripes(context, state);
 
-        _gradient.addColorStop(0, _startColor);
+    if (drawHover) {
+      this.drawMouseColumnHover(context, state);
+      this.drawMouseRowHover(context, state);
+    }
 
-        _gradient.addColorStop(1, _endColor);
+    this.drawGridLines(context, state);
+    this.drawCellBackgrounds(context, state);
+    var {
+      metrics
+    } = state;
+    var {
+      bottom,
+      right,
+      floatingBottomRowCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount,
+      floatingTopColumnCount,
+      columnCount,
+      rowCount,
+      visibleRowHeights,
+      visibleRowYs,
+      visibleColumnXs,
+      visibleColumnWidths,
+      width,
+      height
+    } = metrics;
+    this.drawSelectedRanges(context, state, {
+      bottom: Math.min(bottom, rowCount - floatingBottomRowCount - 1),
+      right: Math.min(right, columnCount - floatingRightColumnCount - 1),
+      minX: floatingLeftColumnCount > 0 && visibleColumnXs.has(floatingLeftColumnCount + 1) ? visibleColumnXs.get(floatingLeftColumnCount + 1) : -10,
+      minY: floatingTopColumnCount > 0 && visibleRowYs.has(floatingTopColumnCount + 1) ? visibleRowYs.get(floatingTopColumnCount + 1) : -10,
+      maxX: floatingRightColumnCount > 0 && visibleColumnXs.has(columnCount - floatingRightColumnCount - 1) ? visibleColumnXs.get(columnCount - floatingRightColumnCount - 1) + visibleColumnWidths.get(columnCount - floatingRightColumnCount - 1) - 0.5 : width + 10,
+      maxY: floatingBottomRowCount > 0 && visibleRowYs.has(rowCount - floatingBottomRowCount - 1) ? visibleRowYs.get(rowCount - floatingBottomRowCount - 1) + visibleRowHeights.get(rowCount - floatingBottomRowCount - 1) - 0.5 : height + 10
+    });
+  }
+
+  drawRowStripes(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      visibleRows
+    } = metrics;
+    var {
+      rowBackgroundColors
+    } = theme;
+
+    if (!rowBackgroundColors) {
+      return;
+    }
+
+    this.drawRowStripesForRows(context, state, visibleRows, rowBackgroundColors);
+  }
 
-        context.fillStyle = _gradient;
+  drawRowStripesForRows(context, state, rows, rowBackgroundColors) {
+    var minX = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    var maxX = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : state.metrics.maxX;
+    var {
+      theme,
+      metrics,
+      model
+    } = state;
+    var {
+      maxDepth,
+      shadowBlur,
+      shadowColor
+    } = theme;
+    var colorSets = this.getCachedBackgroundColors(rowBackgroundColors, maxDepth);
+    var {
+      visibleRowYs,
+      visibleRowHeights
+    } = metrics; // Optimize by grouping together all rows that end up with the same color
+
+    var colorRowMap = new Map();
+    var topShadowRows = []; // Rows that are deeper than the row above them
+
+    var bottomShadowRows = [];
+
+    var addRowToColorMap = (row, rowAbove) => {
+      var depth = model.depthForRow(row);
+      var colorSet = colorSets[row % colorSets.length];
+      var color = colorSet[Math.min(depth, colorSet.length - 1)];
 
-        for (var _i3 = 0; _i3 < bottomShadowRows.length; _i3 += 1) {
-          var _row3 = bottomShadowRows[_i3];
+      if (!colorRowMap.has(color)) {
+        colorRowMap.set(color, []);
+      }
 
-          var _y4 = visibleRowYs.get(_row3);
+      colorRowMap.get(color).push(row);
 
-          var rowHeight = visibleRowHeights.get(_row3);
-          var gradientY = _y4 + rowHeight - shadowBlur; // Use a translate so we can reuse the gradient
+      if (rowAbove != null) {
+        var depthAbove = model.depthForRow(rowAbove);
 
-          context.translate(0, gradientY);
-          context.fillRect(minX, 0, maxX, shadowBlur);
-          context.translate(0, -gradientY);
+        if (depthAbove < depth) {
+          topShadowRows.push(row);
+        } else if (depthAbove > depth) {
+          bottomShadowRows.push(rowAbove);
         }
-
-        context.restore();
       }
+    }; // Add all the regular row stripes
+
+
+    for (var i = 0; i < rows.length; i += 1) {
+      var row = rows[i];
+      var rowAbove = i > 0 ? rows[i - 1] : null;
+      addRowToColorMap(row, rowAbove);
     }
-  }, {
-    key: "drawMouseColumnHover",
-    value: function drawMouseColumnHover(context, state) {
-      var mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          theme = state.theme,
-          metrics = state.metrics;
-      var mouseColumn = GridUtils.getColumnAtX(mouseX, metrics);
-
-      if (mouseColumn == null || !theme.columnHoverBackgroundColor) {
-        return;
-      }
 
-      var visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleColumnXs = metrics.visibleColumnXs,
-          maxY = metrics.maxY;
+    colorRowMap.forEach((colorRows, color) => {
+      context.fillStyle = color;
+      context.beginPath();
 
-      if (mouseY > maxY) {
-        return;
+      for (var _i = 0; _i < colorRows.length; _i += 1) {
+        var _row = colorRows[_i];
+        var y = visibleRowYs.get(_row);
+        var rowHeight = visibleRowHeights.get(_row);
+        context.rect(minX, y, maxX, rowHeight);
       }
 
-      var x = visibleColumnXs.get(mouseColumn);
-      var columnWidth = visibleColumnWidths.get(mouseColumn);
-      context.fillStyle = theme.columnHoverBackgroundColor;
-      context.fillRect(x, 0, columnWidth, maxY);
-    }
-  }, {
-    key: "drawMouseRowHover",
-    value: function drawMouseRowHover(context, state) {
-      var mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          theme = state.theme,
-          metrics = state.metrics;
-      var maxX = metrics.maxX;
-
-      if (mouseX > maxX || !theme.rowHoverBackgroundColor) {
-        return;
-      }
+      context.fill();
+    });
 
-      var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
+    if (topShadowRows.length > 0) {
+      context.save();
+      var startColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
+      var endColor = this.getCachedColorWithAlpha(shadowColor, 0);
+      var gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
+      gradient.addColorStop(0, startColor);
+      gradient.addColorStop(1, endColor);
+      context.fillStyle = gradient;
+
+      for (var _i2 = 0; _i2 < topShadowRows.length; _i2 += 1) {
+        var _row2 = topShadowRows[_i2];
+        var y = visibleRowYs.get(_row2); // Use a translate so we can reuse the gradient
 
-      if (mouseRow == null) {
-        return;
+        context.translate(0, y);
+        context.fillRect(minX, 0, maxX, shadowBlur);
+        context.translate(0, -y);
       }
 
-      this.drawMouseRowHoverForRow(context, state, mouseRow);
+      context.restore();
     }
-  }, {
-    key: "drawFloatingMouseRowHover",
-    value: function drawFloatingMouseRowHover(context, state) {
-      var mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          theme = state.theme,
-          metrics = state.metrics;
-      var maxX = metrics.maxX,
-          floatingTopRowCount = metrics.floatingTopRowCount,
-          floatingBottomRowCount = metrics.floatingBottomRowCount,
-          rowCount = metrics.rowCount,
-          rowFooterWidth = metrics.rowFooterWidth;
-
-      if (mouseX > maxX + rowFooterWidth || !theme.rowHoverBackgroundColor) {
-        return;
-      }
 
-      var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
+    if (bottomShadowRows.length > 0) {
+      context.save();
 
-      if (mouseRow != null && (mouseRow < floatingTopRowCount || rowCount - floatingBottomRowCount <= mouseRow)) {
-        this.drawMouseRowHoverForRow(context, state, mouseRow);
-      }
-    }
-  }, {
-    key: "drawMouseRowHoverForRow",
-    value: function drawMouseRowHoverForRow(context, state, row) {
-      var metrics = state.metrics,
-          selectedRanges = state.selectedRanges,
-          theme = state.theme;
-      var visibleRowHeights = metrics.visibleRowHeights,
-          visibleRowYs = metrics.visibleRowYs,
-          maxX = metrics.maxX;
-      var y = visibleRowYs.get(row);
-      var rowHeight = visibleRowHeights.get(row);
-      context.fillStyle = theme.rowHoverBackgroundColor;
+      var _startColor = this.getCachedColorWithAlpha(shadowColor, 0);
 
-      for (var i = 0; i < selectedRanges.length; i += 1) {
-        if (selectedRanges[i].startRow <= row && selectedRanges[i].endRow >= row) {
-          context.fillStyle = theme.selectedRowHoverBackgroundColor;
-          break;
-        }
-      }
+      var _endColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
 
-      context.fillRect(0, y, maxX, rowHeight);
-    }
-  }, {
-    key: "drawGridLines",
-    value: function drawGridLines(context, state) {
-      var metrics = state.metrics,
-          theme = state.theme;
-      var visibleColumns = metrics.visibleColumns,
-          visibleRows = metrics.visibleRows;
-      this.drawGridLinesForItems(context, state, visibleColumns, visibleRows, theme.gridColumnColor, theme.gridRowColor);
-    }
-  }, {
-    key: "drawGridLinesForItems",
-    value: function drawGridLinesForItems(context, state, columns, rows, columnColor, rowColor) {
-      if (!columnColor && !rowColor) {
-        return;
-      }
+      var _gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
 
-      context.lineWidth = 1;
-      context.beginPath();
+      _gradient.addColorStop(0, _startColor);
 
-      if (columnColor) {
-        context.strokeStyle = columnColor;
-        this.drawGridLinesForColumns(context, state, columns);
-      }
+      _gradient.addColorStop(1, _endColor);
 
-      if (rowColor) {
-        context.strokeStyle = rowColor;
-        this.drawGridLinesForRows(context, state, rows);
-      }
+      context.fillStyle = _gradient;
 
-      context.stroke();
-    }
-  }, {
-    key: "drawGridLinesForColumns",
-    value: function drawGridLinesForColumns(context, state, columns) {
-      var metrics = state.metrics;
-      var visibleColumnXs = metrics.visibleColumnXs,
-          maxY = metrics.maxY;
-
-      for (var i = 0; i < columns.length; i += 1) {
-        var column = columns[i];
-        var x = visibleColumnXs.get(column) + 0.5;
-        context.moveTo(x, 0);
-        context.lineTo(x, maxY);
-      }
-    }
-  }, {
-    key: "drawGridLinesForRows",
-    value: function drawGridLinesForRows(context, state, rows) {
-      var metrics = state.metrics;
-      var visibleRowYs = metrics.visibleRowYs,
-          maxX = metrics.maxX; // Draw row lines
-
-      for (var i = 0; i < rows.length; i += 1) {
-        var row = rows[i];
-        var y = visibleRowYs.get(row) + 0.5;
-        context.moveTo(0.5, y);
-        context.lineTo(maxX - 0.5, y);
-      }
-    }
-  }, {
-    key: "drawCellBackgrounds",
-    value: function drawCellBackgrounds(context, state) {
-      var metrics = state.metrics;
-      var visibleColumns = metrics.visibleColumns,
-          visibleRows = metrics.visibleRows;
-      this.drawCellBackgroundsForItems(context, state, visibleColumns, visibleRows);
-    }
-  }, {
-    key: "drawCellBackgroundsForItems",
-    value: function drawCellBackgroundsForItems(context, state, columns, rows) {
-      context.save();
+      for (var _i3 = 0; _i3 < bottomShadowRows.length; _i3 += 1) {
+        var _row3 = bottomShadowRows[_i3];
 
-      for (var i = 0; i < columns.length; i += 1) {
-        var column = columns[i];
+        var _y4 = visibleRowYs.get(_row3);
 
-        for (var j = 0; j < rows.length; j += 1) {
-          var row = rows[j];
-          var rowAfter = j + 1 < rows.length ? rows[j + 1] : null;
-          this.drawCellBackground(context, state, column, row, rowAfter);
-        }
+        var rowHeight = visibleRowHeights.get(_row3);
+        var gradientY = _y4 + rowHeight - shadowBlur; // Use a translate so we can reuse the gradient
+
+        context.translate(0, gradientY);
+        context.fillRect(minX, 0, maxX, shadowBlur);
+        context.translate(0, -gradientY);
       }
 
       context.restore();
     }
-  }, {
-    key: "drawCellBackground",
-    value: function drawCellBackground(context, state, column, row, rowAfter) {
-      var metrics = state.metrics,
-          model = state.model,
-          hasExpandableRows = state.model.hasExpandableRows,
-          theme = state.theme;
-      var firstColumn = metrics.firstColumn,
-          modelColumns = metrics.modelColumns,
-          modelRows = metrics.modelRows,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleRowHeights = metrics.visibleRowHeights;
-      var modelRow = modelRows.get(row);
-      var modelColumn = modelColumns.get(column);
-      var backgroundColor = model.backgroundColorForCell(modelColumn, modelRow, theme);
-      var isFirstColumn = column === firstColumn;
-
-      if (backgroundColor) {
-        var x = visibleColumnXs.get(column) + 1;
-        var y = visibleRowYs.get(row) + 1;
-        var columnWidth = visibleColumnWidths.get(column) - 1;
-        var rowHeight = visibleRowHeights.get(row) - 1;
-        context.fillStyle = backgroundColor;
-        context.fillRect(x, y, columnWidth, rowHeight);
-      }
+  }
 
-      if (isFirstColumn && hasExpandableRows) {
-        this.drawCellRowTreeDepthLines(context, state, row, rowAfter);
-      }
+  drawMouseColumnHover(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics
+    } = state;
+    var mouseColumn = GridUtils.getColumnAtX(mouseX, metrics);
+
+    if (mouseColumn == null || !theme.columnHoverBackgroundColor) {
+      return;
     }
-  }, {
-    key: "drawCellContents",
-    value: function drawCellContents(context, state) {
-      var metrics = state.metrics;
-      var visibleColumns = metrics.visibleColumns;
 
-      for (var i = 0; i < visibleColumns.length; i += 1) {
-        var column = visibleColumns[i];
-        this.drawColumnCellContents(context, state, column);
-      }
+    var {
+      visibleColumnWidths,
+      visibleColumnXs,
+      maxY
+    } = metrics;
+
+    if (mouseY > maxY) {
+      return;
     }
-  }, {
-    key: "drawColumnCellContents",
-    value: function drawColumnCellContents(context, state, column) {
-      var metrics = state.metrics;
-      var visibleColumnXs = metrics.visibleColumnXs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleRows = metrics.visibleRows,
-          height = metrics.height;
-      var x = visibleColumnXs.get(column);
-      var columnWidth = visibleColumnWidths.get(column);
-      context.save();
-      context.beginPath();
-      context.rect(x, 0, columnWidth, height);
-      context.clip();
 
-      for (var i = 0; i < visibleRows.length; i += 1) {
-        var row = visibleRows[i];
-        this.drawCellContent(context, state, column, row);
-      }
+    var x = visibleColumnXs.get(mouseColumn);
+    var columnWidth = visibleColumnWidths.get(mouseColumn);
+    context.fillStyle = theme.columnHoverBackgroundColor;
+    context.fillRect(x, 0, columnWidth, maxY);
+  }
 
-      context.restore();
+  drawMouseRowHover(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics
+    } = state;
+    var {
+      maxX
+    } = metrics;
+
+    if (mouseX > maxX || !theme.rowHoverBackgroundColor) {
+      return;
     }
-  }, {
-    key: "drawCellContent",
-    value: function drawCellContent(context, state, column, row) {
-      var metrics = state.metrics,
-          model = state.model,
-          hasExpandableRows = state.model.hasExpandableRows,
-          theme = state.theme;
-      var firstColumn = metrics.firstColumn,
-          fontWidths = metrics.fontWidths,
-          modelColumns = metrics.modelColumns,
-          modelRows = metrics.modelRows,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleRowHeights = metrics.visibleRowHeights;
-      var cellHorizontalPadding = theme.cellHorizontalPadding,
-          treeDepthIndent = theme.treeDepthIndent,
-          treeHorizontalPadding = theme.treeHorizontalPadding,
-          textColor = theme.textColor;
-      var x = visibleColumnXs.get(column);
-      var y = visibleRowYs.get(row);
-      var columnWidth = visibleColumnWidths.get(column);
-      var rowHeight = visibleRowHeights.get(row);
-      var modelRow = modelRows.get(row);
-      var modelColumn = modelColumns.get(column);
-      var text = model.textForCell(modelColumn, modelRow);
-      var isFirstColumn = column === firstColumn;
-
-      if (text && rowHeight > 0) {
-        var textAlign = model.textAlignForCell(modelColumn, modelRow) || 'left';
-        context.textAlign = textAlign;
-        var color = model.colorForCell(modelColumn, modelRow, theme) || textColor;
-        context.fillStyle = color;
-        var treeIndent = 0;
-
-        if (hasExpandableRows && isFirstColumn) {
-          treeIndent = treeDepthIndent * (model.depthForRow(row) + 1) + treeHorizontalPadding;
-        }
 
-        var textWidth = columnWidth - treeIndent;
-        var textX = x + cellHorizontalPadding;
-        var textY = y + rowHeight * 0.5;
+    var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
 
-        if (textAlign === 'right') {
-          textX = x + textWidth - cellHorizontalPadding;
-        } else if (textAlign === 'center') {
-          textX = x + textWidth * 0.5;
-        } else {
-          textX = x + cellHorizontalPadding;
-        }
+    if (mouseRow == null) {
+      return;
+    }
 
-        textX += treeIndent;
-        var fontWidth = fontWidths.get(context.font);
-        var truncatedText = this.getCachedTruncatedString(context, text, textWidth - cellHorizontalPadding * 2, fontWidth);
+    this.drawMouseRowHoverForRow(context, state, mouseRow);
+  }
 
-        if (truncatedText != null) {
-          context.fillText(truncatedText, textX, textY);
-        }
-      }
+  drawFloatingMouseRowHover(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics
+    } = state;
+    var {
+      maxX,
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      rowCount,
+      rowFooterWidth
+    } = metrics;
+
+    if (mouseX > maxX + rowFooterWidth || !theme.rowHoverBackgroundColor) {
+      return;
+    }
 
-      if (isFirstColumn && hasExpandableRows) {
-        this.drawCellRowTreeMarker(context, state, row);
-      }
+    var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
+
+    if (mouseRow != null && (mouseRow < floatingTopRowCount || rowCount - floatingBottomRowCount <= mouseRow)) {
+      this.drawMouseRowHoverForRow(context, state, mouseRow);
     }
-  }, {
-    key: "drawCellRowTreeMarker",
-    value: function drawCellRowTreeMarker(context, state, row) {
-      var metrics = state.metrics,
-          model = state.model,
-          mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          theme = state.theme;
-      var firstColumn = metrics.firstColumn,
-          gridX = metrics.gridX,
-          gridY = metrics.gridY,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleRowHeights = metrics.visibleRowHeights,
-          visibleRowTreeBoxes = metrics.visibleRowTreeBoxes;
-      var treeMarkerColor = theme.treeMarkerColor,
-          treeMarkerHoverColor = theme.treeMarkerHoverColor;
-      var columnX = visibleColumnXs.get(firstColumn);
-      var columnWidth = visibleColumnWidths.get(firstColumn);
-      var rowY = visibleRowYs.get(row);
-      var rowHeight = visibleRowHeights.get(row);
-      var isExpandable = model.isRowExpandable(row);
-      var isExpanded = model.isRowExpanded(row);
-
-      if (isExpandable) {
-        var treeBox = visibleRowTreeBoxes.get(row);
-        var color = mouseX >= gridX + columnX && mouseX <= gridX + columnX + columnWidth && mouseY >= gridY + rowY && mouseY <= gridY + rowY + rowHeight ? treeMarkerHoverColor : treeMarkerColor;
-        this.drawTreeMarker(context, state, columnX, rowY, treeBox, color, isExpanded);
+  }
+
+  drawMouseRowHoverForRow(context, state, row) {
+    var {
+      metrics,
+      selectedRanges,
+      theme
+    } = state;
+    var {
+      visibleRowHeights,
+      visibleRowYs,
+      maxX
+    } = metrics;
+    var y = visibleRowYs.get(row);
+    var rowHeight = visibleRowHeights.get(row);
+    context.fillStyle = theme.rowHoverBackgroundColor;
+
+    for (var i = 0; i < selectedRanges.length; i += 1) {
+      if (selectedRanges[i].startRow <= row && selectedRanges[i].endRow >= row) {
+        context.fillStyle = theme.selectedRowHoverBackgroundColor;
+        break;
       }
     }
-  }, {
-    key: "drawTreeMarker",
-    value: function drawTreeMarker(context, state, columnX, rowY, treeBox, color, isExpanded) {
-      var _treeBox = _slicedToArray(treeBox, 4),
-          x1 = _treeBox[0],
-          y1 = _treeBox[1],
-          x2 = _treeBox[2],
-          y2 = _treeBox[3];
-
-      var markerText = isExpanded ? '⊟' : '⊞';
-      var textX = columnX + (x1 + x2) * 0.5 + 0.5;
-      var textY = rowY + (y1 + y2) * 0.5 + 0.5;
-      context.fillStyle = color;
-      context.textAlign = 'center';
-      context.fillText(markerText, textX, textY);
-    }
-  }, {
-    key: "drawCellRowTreeDepthLines",
-    value: function drawCellRowTreeDepthLines(context, state, row, rowAfter) {
-      var metrics = state.metrics,
-          model = state.model,
-          theme = state.theme;
-      var depth = model.depthForRow(row);
-      if (depth === 0) return;
-      var firstColumn = metrics.firstColumn,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleRowHeights = metrics.visibleRowHeights;
-      var treeDepthIndent = theme.treeDepthIndent,
-          treeHorizontalPadding = theme.treeHorizontalPadding,
-          treeLineColor = theme.treeLineColor;
-      var columnX = visibleColumnXs.get(firstColumn);
-      var rowY = visibleRowYs.get(row);
-      var rowHeight = visibleRowHeights.get(row);
-      var depthRowAfter = model.depthForRow(rowAfter);
-      var depthDiff = depth > depthRowAfter ? depth - depthRowAfter : 0;
-      context.strokeStyle = treeLineColor;
-      context.lineWidth = 1; // draw normal depth lines
-
-      if (depth - depthDiff > 0) {
-        context.beginPath();
 
-        for (var i = 0; i < depth - depthDiff; i += 1) {
-          var lineX = columnX + i * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
-          context.moveTo(lineX, rowY);
-          context.lineTo(lineX, rowY + rowHeight);
-        }
+    context.fillRect(0, y, maxX, rowHeight);
+  }
 
-        context.stroke();
-      } // draw as hockey stick if last row at depth
+  drawGridLines(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      visibleColumns,
+      visibleRows
+    } = metrics;
+    this.drawGridLinesForItems(context, state, visibleColumns, visibleRows, theme.gridColumnColor, theme.gridRowColor);
+  }
 
+  drawGridLinesForItems(context, state, columns, rows, columnColor, rowColor) {
+    if (!columnColor && !rowColor) {
+      return;
+    }
 
-      if (depthDiff > 0) {
-        context.beginPath();
+    context.lineWidth = 1;
+    context.beginPath();
 
-        for (var _i4 = depth - depthDiff; _i4 < depth; _i4 += 1) {
-          var _lineX = columnX + _i4 * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
+    if (columnColor) {
+      context.strokeStyle = columnColor;
+      this.drawGridLinesForColumns(context, state, columns);
+    }
 
-          context.moveTo(_lineX, rowY);
-          context.lineTo(_lineX, rowY + Math.ceil(rowHeight / 2)); // extra moveTo prevents halfpixel in corner
+    if (rowColor) {
+      context.strokeStyle = rowColor;
+      this.drawGridLinesForRows(context, state, rows);
+    }
 
-          context.moveTo(_lineX - 0.5, rowY + Math.ceil(rowHeight / 2) + 0.5);
-          context.lineTo(_lineX + treeDepthIndent - 0.5, rowY + Math.ceil(rowHeight / 2) + 0.5);
-        }
+    context.stroke();
+  }
 
-        context.stroke();
-      }
+  drawGridLinesForColumns(context, state, columns) {
+    var {
+      metrics
+    } = state;
+    var {
+      visibleColumnXs,
+      maxY
+    } = metrics;
+
+    for (var i = 0; i < columns.length; i += 1) {
+      var column = columns[i];
+      var x = visibleColumnXs.get(column) + 0.5;
+      context.moveTo(x, 0);
+      context.lineTo(x, maxY);
     }
-  }, {
-    key: "drawHeaders",
-    value: function drawHeaders(context, state) {
-      var theme = state.theme;
-      context.font = theme.headerFont;
-      this.drawColumnHeaders(context, state);
-      this.drawRowHeaders(context, state);
-    }
-  }, {
-    key: "drawFooters",
-    value: function drawFooters(context, state) {
-      var theme = state.theme;
-      context.font = theme.headerFont;
-      this.drawRowFooters(context, state);
-    }
-  }, {
-    key: "drawColumnHeaders",
-    value: function drawColumnHeaders(context, state) {
-      var mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          theme = state.theme,
-          metrics = state.metrics,
-          draggingColumnSeparator = state.draggingColumnSeparator,
-          isDragging = state.isDragging;
-      var columnHeaderHeight = metrics.columnHeaderHeight,
-          gridX = metrics.gridX,
-          width = metrics.width,
-          visibleColumns = metrics.visibleColumns,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleColumnXs = metrics.visibleColumnXs;
-
-      if (columnHeaderHeight <= 0) {
-        return;
-      }
+  }
 
-      var headerBackgroundColor = theme.headerBackgroundColor,
-          headerColor = theme.headerColor,
-          headerHiddenSeparatorSize = theme.headerHiddenSeparatorSize,
-          headerHiddenSeparatorHoverColor = theme.headerHiddenSeparatorHoverColor,
-          headerSeparatorColor = theme.headerSeparatorColor,
-          headerSeparatorHoverColor = theme.headerSeparatorHoverColor;
-      var hiddenSeparatorHeight = columnHeaderHeight * 0.5;
-      var hiddenY = columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
-      context.save();
-      context.beginPath(); // Fill in the background
+  drawGridLinesForRows(context, state, rows) {
+    var {
+      metrics
+    } = state;
+    var {
+      visibleRowYs,
+      maxX
+    } = metrics; // Draw row lines
+
+    for (var i = 0; i < rows.length; i += 1) {
+      var row = rows[i];
+      var y = visibleRowYs.get(row) + 0.5;
+      context.moveTo(0.5, y);
+      context.lineTo(maxX - 0.5, y);
+    }
+  }
 
-      context.fillStyle = headerBackgroundColor;
-      context.fillRect(0, 0, width, columnHeaderHeight); // Draw the separators
+  drawCellBackgrounds(context, state) {
+    var {
+      metrics
+    } = state;
+    var {
+      visibleColumns,
+      visibleRows
+    } = metrics;
+    this.drawCellBackgroundsForItems(context, state, visibleColumns, visibleRows);
+  }
 
-      if (headerSeparatorColor) {
-        context.strokeStyle = headerSeparatorColor;
-        context.beginPath();
-        var hiddenColumns = [];
-        var isPreviousColumnHidden = false;
-
-        for (var i = 0; i < visibleColumns.length; i += 1) {
-          var column = visibleColumns[i];
-          var columnX = visibleColumnXs.get(column);
-          var columnWidth = visibleColumnWidths.get(column);
-
-          if (columnWidth > 0) {
-            var x = gridX + columnX + columnWidth + 0.5;
-            context.moveTo(x, 0);
-            context.lineTo(x, columnHeaderHeight - 0.5);
-            isPreviousColumnHidden = false;
-          } else if (!isPreviousColumnHidden) {
-            isPreviousColumnHidden = true;
-            hiddenColumns.push(column);
-          }
-        } // Bottom Border, should be interior to the header height
-
-
-        context.moveTo(0, columnHeaderHeight - 0.5);
-        context.lineTo(width, columnHeaderHeight - 0.5);
-        context.stroke(); // Now draw the hidden column separator boxes
+  drawCellBackgroundsForItems(context, state, columns, rows) {
+    context.save();
 
-        context.beginPath();
-        context.fillStyle = headerSeparatorColor;
+    for (var i = 0; i < columns.length; i += 1) {
+      var column = columns[i];
+
+      for (var j = 0; j < rows.length; j += 1) {
+        var row = rows[j];
+        var rowAfter = j + 1 < rows.length ? rows[j + 1] : null;
+        this.drawCellBackground(context, state, column, row, rowAfter);
+      }
+    }
 
-        for (var _i5 = 0; _i5 < hiddenColumns.length; _i5 += 1) {
-          var _column = hiddenColumns[_i5];
+    context.restore();
+  }
 
-          var _columnX = visibleColumnXs.get(_column);
+  drawCellBackground(context, state, column, row, rowAfter) {
+    var {
+      metrics,
+      model,
+      model: {
+        hasExpandableRows
+      },
+      theme
+    } = state;
+    var {
+      firstColumn,
+      modelColumns,
+      modelRows,
+      visibleColumnXs,
+      visibleColumnWidths,
+      visibleRowYs,
+      visibleRowHeights
+    } = metrics;
+    var modelRow = modelRows.get(row);
+    var modelColumn = modelColumns.get(column);
+    var backgroundColor = model.backgroundColorForCell(modelColumn, modelRow, theme);
+    var isFirstColumn = column === firstColumn;
+
+    if (backgroundColor) {
+      var x = visibleColumnXs.get(column) + 1;
+      var y = visibleRowYs.get(row) + 1;
+      var columnWidth = visibleColumnWidths.get(column) - 1;
+      var rowHeight = visibleRowHeights.get(row) - 1;
+      context.fillStyle = backgroundColor;
+      context.fillRect(x, y, columnWidth, rowHeight);
+    }
 
-          var _columnWidth = visibleColumnWidths.get(_column);
+    if (isFirstColumn && hasExpandableRows) {
+      this.drawCellRowTreeDepthLines(context, state, row, rowAfter);
+    }
+  }
 
-          var minX = gridX + _columnX + _columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
-          context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
-        }
+  drawCellContents(context, state) {
+    var {
+      metrics
+    } = state;
+    var {
+      visibleColumns
+    } = metrics;
+
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      var column = visibleColumns[i];
+      this.drawColumnCellContents(context, state, column);
+    }
+  }
 
-        context.fill();
-      }
+  drawColumnCellContents(context, state, column) {
+    var {
+      metrics
+    } = state;
+    var {
+      visibleColumnXs,
+      visibleColumnWidths,
+      visibleRows,
+      height
+    } = metrics;
+    var x = visibleColumnXs.get(column);
+    var columnWidth = visibleColumnWidths.get(column);
+    context.save();
+    context.beginPath();
+    context.rect(x, 0, columnWidth, height);
+    context.clip();
+
+    for (var i = 0; i < visibleRows.length; i += 1) {
+      var row = visibleRows[i];
+      this.drawCellContent(context, state, column, row);
+    }
 
-      if (headerSeparatorHoverColor) {
-        var highlightedSeparator = draggingColumnSeparator;
+    context.restore();
+  }
 
-        if (highlightedSeparator == null) {
-          highlightedSeparator = GridUtils.getColumnSeparatorIndex(mouseX, mouseY, metrics, theme);
-        }
+  drawCellContent(context, state, column, row) {
+    var {
+      metrics,
+      model,
+      model: {
+        hasExpandableRows
+      },
+      theme
+    } = state;
+    var {
+      firstColumn,
+      fontWidths,
+      modelColumns,
+      modelRows,
+      visibleColumnXs,
+      visibleColumnWidths,
+      visibleRowYs,
+      visibleRowHeights
+    } = metrics;
+    var {
+      cellHorizontalPadding,
+      treeDepthIndent,
+      treeHorizontalPadding,
+      textColor
+    } = theme;
+    var x = visibleColumnXs.get(column);
+    var y = visibleRowYs.get(row);
+    var columnWidth = visibleColumnWidths.get(column);
+    var rowHeight = visibleRowHeights.get(row);
+    var modelRow = modelRows.get(row);
+    var modelColumn = modelColumns.get(column);
+    var text = model.textForCell(modelColumn, modelRow);
+    var isFirstColumn = column === firstColumn;
+
+    if (text && rowHeight > 0) {
+      var textAlign = model.textAlignForCell(modelColumn, modelRow) || 'left';
+      context.textAlign = textAlign;
+      var color = model.colorForCell(modelColumn, modelRow, theme) || textColor;
+      context.fillStyle = color;
+      var treeIndent = 0;
 
-        if (highlightedSeparator != null && (!isDragging || draggingColumnSeparator != null)) {
-          context.strokeStyle = headerSeparatorHoverColor;
+      if (hasExpandableRows && isFirstColumn) {
+        treeIndent = treeDepthIndent * (model.depthForRow(row) + 1) + treeHorizontalPadding;
+      }
 
-          var _columnX2 = visibleColumnXs.get(highlightedSeparator);
+      var textWidth = columnWidth - treeIndent;
+      var textX = x + cellHorizontalPadding;
+      var textY = y + rowHeight * 0.5;
 
-          var _columnWidth2 = visibleColumnWidths.get(highlightedSeparator);
+      if (textAlign === 'right') {
+        textX = x + textWidth - cellHorizontalPadding;
+      } else if (textAlign === 'center') {
+        textX = x + textWidth * 0.5;
+      } else {
+        textX = x + cellHorizontalPadding;
+      }
 
-          var _x4 = gridX + _columnX2 + _columnWidth2 + 0.5;
+      textX += treeIndent;
+      var fontWidth = fontWidths.get(context.font);
+      var truncatedText = this.getCachedTruncatedString(context, text, textWidth - cellHorizontalPadding * 2, fontWidth);
 
-          var visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
-          var nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
-          var nextColumnWidth = nextColumn != null ? visibleColumnWidths.get(nextColumn) : null;
-          var isColumnHidden = _columnWidth2 === 0;
-          var isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
+      if (truncatedText != null) {
+        context.fillText(truncatedText, textX, textY);
+      }
+    }
 
-          if (isColumnHidden) {
-            context.strokeStyle = headerHiddenSeparatorHoverColor;
-            context.fillStyle = headerHiddenSeparatorHoverColor;
-            context.fillRect(_x4, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
-          } else if (isNextColumnHidden) {
-            context.fillStyle = headerSeparatorHoverColor;
-            context.fillRect(_x4 - headerHiddenSeparatorSize * 0.5, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
-          } // column seperator hover line
+    if (isFirstColumn && hasExpandableRows) {
+      this.drawCellRowTreeMarker(context, state, row);
+    }
+  }
 
+  drawCellRowTreeMarker(context, state, row) {
+    var {
+      metrics,
+      model,
+      mouseX,
+      mouseY,
+      theme
+    } = state;
+    var {
+      firstColumn,
+      gridX,
+      gridY,
+      visibleColumnXs,
+      visibleColumnWidths,
+      visibleRowYs,
+      visibleRowHeights,
+      visibleRowTreeBoxes
+    } = metrics;
+    var {
+      treeMarkerColor,
+      treeMarkerHoverColor
+    } = theme;
+    var columnX = visibleColumnXs.get(firstColumn);
+    var columnWidth = visibleColumnWidths.get(firstColumn);
+    var rowY = visibleRowYs.get(row);
+    var rowHeight = visibleRowHeights.get(row);
+    var isExpandable = model.isRowExpandable(row);
+    var isExpanded = model.isRowExpanded(row);
+
+    if (isExpandable) {
+      var treeBox = visibleRowTreeBoxes.get(row);
+      var color = mouseX >= gridX + columnX && mouseX <= gridX + columnX + columnWidth && mouseY >= gridY + rowY && mouseY <= gridY + rowY + rowHeight ? treeMarkerHoverColor : treeMarkerColor;
+      this.drawTreeMarker(context, state, columnX, rowY, treeBox, color, isExpanded);
+    }
+  }
 
-          context.beginPath();
-          context.moveTo(_x4, 0);
-          context.lineTo(_x4, columnHeaderHeight - 1);
-          context.stroke();
-        }
+  drawTreeMarker(context, state, columnX, rowY, treeBox, color, isExpanded) {
+    var [x1, y1, x2, y2] = treeBox;
+    var markerText = isExpanded ? '⊟' : '⊞';
+    var textX = columnX + (x1 + x2) * 0.5 + 0.5;
+    var textY = rowY + (y1 + y2) * 0.5 + 0.5;
+    context.fillStyle = color;
+    context.textAlign = 'center';
+    context.fillText(markerText, textX, textY);
+  }
+
+  drawCellRowTreeDepthLines(context, state, row, rowAfter) {
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var depth = model.depthForRow(row);
+    if (depth === 0) return;
+    var {
+      firstColumn,
+      visibleColumnXs,
+      visibleRowYs,
+      visibleRowHeights
+    } = metrics;
+    var {
+      treeDepthIndent,
+      treeHorizontalPadding,
+      treeLineColor
+    } = theme;
+    var columnX = visibleColumnXs.get(firstColumn);
+    var rowY = visibleRowYs.get(row);
+    var rowHeight = visibleRowHeights.get(row);
+    var depthRowAfter = model.depthForRow(rowAfter);
+    var depthDiff = depth > depthRowAfter ? depth - depthRowAfter : 0;
+    context.strokeStyle = treeLineColor;
+    context.lineWidth = 1; // draw normal depth lines
+
+    if (depth - depthDiff > 0) {
+      context.beginPath();
+
+      for (var i = 0; i < depth - depthDiff; i += 1) {
+        var lineX = columnX + i * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
+        context.moveTo(lineX, rowY);
+        context.lineTo(lineX, rowY + rowHeight);
       }
 
-      context.fillStyle = headerColor;
+      context.stroke();
+    } // draw as hockey stick if last row at depth
+
 
-      for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
-        var _column2 = visibleColumns[_i6];
+    if (depthDiff > 0) {
+      context.beginPath();
 
-        var _columnWidth3 = visibleColumnWidths.get(_column2);
+      for (var _i4 = depth - depthDiff; _i4 < depth; _i4 += 1) {
+        var _lineX = columnX + _i4 * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
 
-        var _x5 = visibleColumnXs.get(_column2) + gridX;
+        context.moveTo(_lineX, rowY);
+        context.lineTo(_lineX, rowY + Math.ceil(rowHeight / 2)); // extra moveTo prevents halfpixel in corner
 
-        this.drawColumnHeader(context, state, _column2, _x5, _columnWidth3);
+        context.moveTo(_lineX - 0.5, rowY + Math.ceil(rowHeight / 2) + 0.5);
+        context.lineTo(_lineX + treeDepthIndent - 0.5, rowY + Math.ceil(rowHeight / 2) + 0.5);
       }
 
-      context.restore();
+      context.stroke();
     }
-  }, {
-    key: "drawColumnHeader",
-    value: function drawColumnHeader(context, state, column, columnX, columnWidth) {
-      if (columnWidth <= 0) {
-        return;
-      }
+  }
 
-      var metrics = state.metrics,
-          model = state.model,
-          theme = state.theme;
-      var modelColumns = metrics.modelColumns;
-      var modelColumn = modelColumns.get(column);
-      var text = model.textForColumnHeader(modelColumn);
+  drawHeaders(context, state) {
+    var {
+      theme
+    } = state;
+    context.font = theme.headerFont;
+    this.drawColumnHeaders(context, state);
+    this.drawRowHeaders(context, state);
+  }
 
-      if (!text) {
-        return;
-      }
+  drawFooters(context, state) {
+    var {
+      theme
+    } = state;
+    context.font = theme.headerFont;
+    this.drawRowFooters(context, state);
+  }
 
-      var headerHorizontalPadding = theme.headerHorizontalPadding;
-      var columnHeaderHeight = metrics.columnHeaderHeight,
-          fontWidths = metrics.fontWidths;
-      var fontWidth = fontWidths.get(context.font) || GridRenderer.DEFAULT_FONT_WIDTH;
-      var maxLength = (columnWidth - headerHorizontalPadding * 2) / fontWidth;
+  drawColumnHeaders(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics,
+      draggingColumnSeparator,
+      isDragging
+    } = state;
+    var {
+      columnHeaderHeight,
+      gridX,
+      width,
+      visibleColumns,
+      visibleColumnWidths,
+      visibleColumnXs
+    } = metrics;
+
+    if (columnHeaderHeight <= 0) {
+      return;
+    }
 
-      if (maxLength <= 0) {
-        return;
-      }
+    var {
+      headerBackgroundColor,
+      headerColor,
+      headerHiddenSeparatorSize,
+      headerHiddenSeparatorHoverColor,
+      headerSeparatorColor,
+      headerSeparatorHoverColor
+    } = theme;
+    var hiddenSeparatorHeight = columnHeaderHeight * 0.5;
+    var hiddenY = columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
+    context.save();
+    context.beginPath(); // Fill in the background
+
+    context.fillStyle = headerBackgroundColor;
+    context.fillRect(0, 0, width, columnHeaderHeight); // Draw the separators
+
+    if (headerSeparatorColor) {
+      context.strokeStyle = headerSeparatorColor;
+      context.beginPath();
+      var hiddenColumns = [];
+      var isPreviousColumnHidden = false;
+
+      for (var i = 0; i < visibleColumns.length; i += 1) {
+        var column = visibleColumns[i];
+        var columnX = visibleColumnXs.get(column);
+        var columnWidth = visibleColumnWidths.get(column);
+
+        if (columnWidth > 0) {
+          var x = gridX + columnX + columnWidth + 0.5;
+          context.moveTo(x, 0);
+          context.lineTo(x, columnHeaderHeight - 0.5);
+          isPreviousColumnHidden = false;
+        } else if (!isPreviousColumnHidden) {
+          isPreviousColumnHidden = true;
+          hiddenColumns.push(column);
+        }
+      } // Bottom Border, should be interior to the header height
+
+
+      context.moveTo(0, columnHeaderHeight - 0.5);
+      context.lineTo(width, columnHeaderHeight - 0.5);
+      context.stroke(); // Now draw the hidden column separator boxes
 
-      context.save();
       context.beginPath();
-      context.rect(columnX, 0, columnWidth, columnHeaderHeight);
-      context.clip();
+      context.fillStyle = headerSeparatorColor;
 
-      if (text.length > maxLength) {
-        text = "".concat(text.substring(0, maxLength - 1), "\u2026");
-        var x = columnX + headerHorizontalPadding;
-        var y = columnHeaderHeight * 0.5;
-        context.textAlign = 'left';
-        context.fillText(text, x, y);
-      } else {
-        var _x6 = columnX + columnWidth * 0.5;
+      for (var _i5 = 0; _i5 < hiddenColumns.length; _i5 += 1) {
+        var _column = hiddenColumns[_i5];
 
-        var _y5 = columnHeaderHeight * 0.5;
+        var _columnX = visibleColumnXs.get(_column);
 
-        context.textAlign = 'center';
-        context.fillText(text, _x6, _y5);
+        var _columnWidth = visibleColumnWidths.get(_column);
+
+        var minX = gridX + _columnX + _columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
+        context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
       }
 
-      context.restore();
+      context.fill();
     }
-  }, {
-    key: "drawRowHeaders",
-    value: function drawRowHeaders(context, state) {
-      var mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          metrics = state.metrics,
-          theme = state.theme,
-          draggingRowSeparator = state.draggingRowSeparator;
-      var gridY = metrics.gridY,
-          rowHeaderWidth = metrics.rowHeaderWidth,
-          height = metrics.height,
-          visibleRows = metrics.visibleRows,
-          visibleRowHeights = metrics.visibleRowHeights,
-          visibleRowYs = metrics.visibleRowYs;
-
-      if (rowHeaderWidth <= 0) {
-        return;
+
+    if (headerSeparatorHoverColor) {
+      var highlightedSeparator = draggingColumnSeparator;
+
+      if (highlightedSeparator == null) {
+        highlightedSeparator = GridUtils.getColumnSeparatorIndex(mouseX, mouseY, metrics, theme);
       }
 
-      var headerBackgroundColor = theme.headerBackgroundColor,
-          headerColor = theme.headerColor,
-          headerHiddenSeparatorSize = theme.headerHiddenSeparatorSize,
-          headerHiddenSeparatorHoverColor = theme.headerHiddenSeparatorHoverColor,
-          headerSeparatorColor = theme.headerSeparatorColor,
-          headerSeparatorHoverColor = theme.headerSeparatorHoverColor;
-      var hiddenSeparatorWidth = rowHeaderWidth * 0.5;
-      var hiddenX = rowHeaderWidth * 0.5 - hiddenSeparatorWidth * 0.5;
-      context.save();
-      context.beginPath(); // Fill in the background
+      if (highlightedSeparator != null && (!isDragging || draggingColumnSeparator != null)) {
+        context.strokeStyle = headerSeparatorHoverColor;
 
-      context.fillStyle = headerBackgroundColor;
-      context.fillRect(0, 0, rowHeaderWidth, height); // Draw the separators
+        var _columnX2 = visibleColumnXs.get(highlightedSeparator);
+
+        var _columnWidth2 = visibleColumnWidths.get(highlightedSeparator);
+
+        var _x4 = gridX + _columnX2 + _columnWidth2 + 0.5;
+
+        var visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
+        var nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
+        var nextColumnWidth = nextColumn != null ? visibleColumnWidths.get(nextColumn) : null;
+        var isColumnHidden = _columnWidth2 === 0;
+        var isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
+
+        if (isColumnHidden) {
+          context.strokeStyle = headerHiddenSeparatorHoverColor;
+          context.fillStyle = headerHiddenSeparatorHoverColor;
+          context.fillRect(_x4, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
+        } else if (isNextColumnHidden) {
+          context.fillStyle = headerSeparatorHoverColor;
+          context.fillRect(_x4 - headerHiddenSeparatorSize * 0.5, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
+        } // column seperator hover line
 
-      if (headerSeparatorColor) {
-        context.strokeStyle = headerSeparatorColor;
-        context.beginPath();
-        context.moveTo(0, gridY + 0.5);
-        context.lineTo(rowHeaderWidth, gridY + 0.5);
-        var hiddenRows = [];
-        var isPreviousRowHidden = false;
-
-        for (var i = 0; i < visibleRows.length; i += 1) {
-          var row = visibleRows[i];
-          var rowY = visibleRowYs.get(row);
-          var rowHeight = visibleRowHeights.get(row);
-
-          if (rowHeight > 0) {
-            var y = gridY + rowY + rowHeight + 0.5;
-            context.moveTo(0, y);
-            context.lineTo(rowHeaderWidth, y);
-            isPreviousRowHidden = false;
-          } else if (!isPreviousRowHidden) {
-            isPreviousRowHidden = true;
-            hiddenRows.push(row);
-          }
-        } // border right, interior to the headerWidth
-
-
-        context.moveTo(rowHeaderWidth - 0.5, 0);
-        context.lineTo(rowHeaderWidth - 0.5, height);
-        context.stroke(); // Draw the hidden column separators
 
         context.beginPath();
-        context.fillStyle = headerSeparatorColor;
+        context.moveTo(_x4, 0);
+        context.lineTo(_x4, columnHeaderHeight - 1);
+        context.stroke();
+      }
+    }
 
-        for (var _i7 = 0; _i7 < hiddenRows.length; _i7 += 1) {
-          var _row4 = hiddenRows[_i7];
+    context.fillStyle = headerColor;
 
-          var _rowY = visibleRowYs.get(_row4);
+    for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
+      var _column2 = visibleColumns[_i6];
 
-          var _rowHeight = visibleRowHeights.get(_row4);
+      var _columnWidth3 = visibleColumnWidths.get(_column2);
 
-          var minY = gridY + _rowY + _rowHeight + 0.5 - headerHiddenSeparatorSize * 0.5;
-          context.rect(hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
-        }
+      var _x5 = visibleColumnXs.get(_column2) + gridX;
 
-        context.fill();
-      }
+      this.drawColumnHeader(context, state, _column2, _x5, _columnWidth3);
+    }
 
-      if (headerSeparatorHoverColor) {
-        var highlightedSeparator = draggingRowSeparator;
+    context.restore();
+  }
 
-        if (highlightedSeparator == null) {
-          highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
-        }
+  drawColumnHeader(context, state, column, columnX, columnWidth) {
+    if (columnWidth <= 0) {
+      return;
+    }
+
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      modelColumns
+    } = metrics;
+    var modelColumn = modelColumns.get(column);
+    var text = model.textForColumnHeader(modelColumn);
+
+    if (!text) {
+      return;
+    }
+
+    var {
+      headerHorizontalPadding
+    } = theme;
+    var {
+      columnHeaderHeight,
+      fontWidths
+    } = metrics;
+    var fontWidth = fontWidths.get(context.font) || GridRenderer.DEFAULT_FONT_WIDTH;
+    var maxLength = (columnWidth - headerHorizontalPadding * 2) / fontWidth;
+
+    if (maxLength <= 0) {
+      return;
+    }
 
-        if (highlightedSeparator != null) {
-          context.strokeStyle = headerSeparatorHoverColor;
+    context.save();
+    context.beginPath();
+    context.rect(columnX, 0, columnWidth, columnHeaderHeight);
+    context.clip();
 
-          var _rowY2 = visibleRowYs.get(highlightedSeparator);
+    if (text.length > maxLength) {
+      text = "".concat(text.substring(0, maxLength - 1), "\u2026");
+      var x = columnX + headerHorizontalPadding;
+      var y = columnHeaderHeight * 0.5;
+      context.textAlign = 'left';
+      context.fillText(text, x, y);
+    } else {
+      var _x6 = columnX + columnWidth * 0.5;
+
+      var _y5 = columnHeaderHeight * 0.5;
 
-          var _rowHeight2 = visibleRowHeights.get(highlightedSeparator);
+      context.textAlign = 'center';
+      context.fillText(text, _x6, _y5);
+    }
 
-          var _y6 = gridY + _rowY2 + _rowHeight2 + 0.5;
+    context.restore();
+  }
 
-          var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
-          var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
-          var nextRowHeight = nextRow != null ? visibleRowHeights.get(nextRow) : null;
-          var isRowHidden = _rowHeight2 === 0;
-          var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
+  drawRowHeaders(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      metrics,
+      theme,
+      draggingRowSeparator
+    } = state;
+    var {
+      gridY,
+      rowHeaderWidth,
+      height,
+      visibleRows,
+      visibleRowHeights,
+      visibleRowYs
+    } = metrics;
+
+    if (rowHeaderWidth <= 0) {
+      return;
+    }
 
-          if (isRowHidden) {
-            context.strokeStyle = headerHiddenSeparatorHoverColor;
-            context.fillStyle = headerHiddenSeparatorHoverColor;
-            context.fillRect(hiddenX, _y6, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
-          } else if (isNextRowHidden) {
-            context.fillStyle = headerSeparatorHoverColor;
-            context.fillRect(hiddenX, _y6 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
-          }
+    var {
+      headerBackgroundColor,
+      headerColor,
+      headerHiddenSeparatorSize,
+      headerHiddenSeparatorHoverColor,
+      headerSeparatorColor,
+      headerSeparatorHoverColor
+    } = theme;
+    var hiddenSeparatorWidth = rowHeaderWidth * 0.5;
+    var hiddenX = rowHeaderWidth * 0.5 - hiddenSeparatorWidth * 0.5;
+    context.save();
+    context.beginPath(); // Fill in the background
+
+    context.fillStyle = headerBackgroundColor;
+    context.fillRect(0, 0, rowHeaderWidth, height); // Draw the separators
+
+    if (headerSeparatorColor) {
+      context.strokeStyle = headerSeparatorColor;
+      context.beginPath();
+      context.moveTo(0, gridY + 0.5);
+      context.lineTo(rowHeaderWidth, gridY + 0.5);
+      var hiddenRows = [];
+      var isPreviousRowHidden = false;
 
-          context.beginPath();
-          context.moveTo(0.5, _y6);
-          context.lineTo(rowHeaderWidth + 0.5, _y6);
-          context.stroke();
+      for (var i = 0; i < visibleRows.length; i += 1) {
+        var row = visibleRows[i];
+        var rowY = visibleRowYs.get(row);
+        var rowHeight = visibleRowHeights.get(row);
+
+        if (rowHeight > 0) {
+          var y = gridY + rowY + rowHeight + 0.5;
+          context.moveTo(0, y);
+          context.lineTo(rowHeaderWidth, y);
+          isPreviousRowHidden = false;
+        } else if (!isPreviousRowHidden) {
+          isPreviousRowHidden = true;
+          hiddenRows.push(row);
         }
-      } // Fill in the text
+      } // border right, interior to the headerWidth
 
 
+      context.moveTo(rowHeaderWidth - 0.5, 0);
+      context.lineTo(rowHeaderWidth - 0.5, height);
+      context.stroke(); // Draw the hidden column separators
+
       context.beginPath();
-      context.rect(0, gridY, rowHeaderWidth, height);
-      context.clip();
-      context.fillStyle = headerColor;
-      context.textAlign = 'right';
+      context.fillStyle = headerSeparatorColor;
 
-      for (var _i8 = 0; _i8 < visibleRows.length; _i8 += 1) {
-        var _row5 = visibleRows[_i8];
+      for (var _i7 = 0; _i7 < hiddenRows.length; _i7 += 1) {
+        var _row4 = hiddenRows[_i7];
 
-        var _rowHeight3 = visibleRowHeights.get(_row5);
+        var _rowY = visibleRowYs.get(_row4);
 
-        var _y7 = visibleRowYs.get(_row5) + gridY;
+        var _rowHeight = visibleRowHeights.get(_row4);
 
-        this.drawRowHeader(context, state, _row5, _y7, _rowHeight3);
+        var minY = gridY + _rowY + _rowHeight + 0.5 - headerHiddenSeparatorSize * 0.5;
+        context.rect(hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
       }
 
-      context.restore();
+      context.fill();
     }
-  }, {
-    key: "drawRowHeader",
-    value: function drawRowHeader(context, state, row, rowY, rowHeight) {
-      if (rowHeight <= 0) {
-        return;
-      }
 
-      var metrics = state.metrics,
-          model = state.model,
-          theme = state.theme;
-      var modelRows = metrics.modelRows,
-          rowHeaderWidth = metrics.rowHeaderWidth;
-      var modelRow = modelRows.get(row);
-      var x = rowHeaderWidth - theme.cellHorizontalPadding;
-      var y = rowY + rowHeight * 0.5;
-      context.fillText(model.textForRowHeader(modelRow), x, y);
-    }
-  }, {
-    key: "drawRowFooters",
-    value: function drawRowFooters(context, state) {
-      var mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          metrics = state.metrics,
-          model = state.model,
-          theme = state.theme,
-          draggingRowSeparator = state.draggingRowSeparator;
-      var gridY = metrics.gridY,
-          gridX = metrics.gridX,
-          maxX = metrics.maxX,
-          modelRows = metrics.modelRows,
-          rowFooterWidth = metrics.rowFooterWidth,
-          height = metrics.height,
-          verticalBarWidth = metrics.verticalBarWidth,
-          visibleRows = metrics.visibleRows,
-          visibleRowHeights = metrics.visibleRowHeights,
-          visibleRowYs = metrics.visibleRowYs,
-          width = metrics.width;
-
-      if (rowFooterWidth <= 0) {
-        return;
-      }
+    if (headerSeparatorHoverColor) {
+      var highlightedSeparator = draggingRowSeparator;
 
-      var cellHorizontalPadding = theme.cellHorizontalPadding,
-          headerBackgroundColor = theme.headerBackgroundColor,
-          headerColor = theme.headerColor,
-          headerHiddenSeparatorSize = theme.headerHiddenSeparatorSize,
-          headerHiddenSeparatorHoverColor = theme.headerHiddenSeparatorHoverColor,
-          headerSeparatorColor = theme.headerSeparatorColor,
-          headerSeparatorHoverColor = theme.headerSeparatorHoverColor;
-      var hiddenSeparatorWidth = rowFooterWidth * 0.5;
-      var hiddenX = rowFooterWidth * 0.5 - hiddenSeparatorWidth * 0.5;
-      var x = Math.min(gridX + maxX, width - rowFooterWidth - verticalBarWidth);
-      context.save();
-      context.beginPath(); // Fill in the background
+      if (highlightedSeparator == null) {
+        highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
+      }
 
-      context.fillStyle = headerBackgroundColor;
-      context.fillRect(x, gridY, rowFooterWidth, height); // Draw the separators
+      if (highlightedSeparator != null) {
+        context.strokeStyle = headerSeparatorHoverColor;
 
-      if (headerSeparatorColor) {
-        context.strokeStyle = headerSeparatorColor;
-        context.beginPath();
-        context.moveTo(x, gridY + 0.5);
-        context.lineTo(rowFooterWidth, gridY + 0.5);
-        var hiddenRows = [];
-        var isPreviousRowHidden = false;
-
-        for (var i = 0; i < visibleRows.length; i += 1) {
-          var row = visibleRows[i];
-          var rowY = visibleRowYs.get(row);
-          var rowHeight = visibleRowHeights.get(row);
-
-          if (rowHeight > 0) {
-            var y = gridY + rowY + rowHeight + 0.5;
-            context.moveTo(x + 0.5, y);
-            context.lineTo(x + rowFooterWidth - 0.5, y);
-            isPreviousRowHidden = false;
-          } else if (!isPreviousRowHidden) {
-            isPreviousRowHidden = true;
-            hiddenRows.push(row);
-          }
-        } // border left, interior to the headerWidth
-
-
-        context.moveTo(x + 0.5, gridY);
-        context.lineTo(x + 0.5, height);
-        context.stroke(); // Draw the hidden column separators
+        var _rowY2 = visibleRowYs.get(highlightedSeparator);
 
-        context.beginPath();
-        context.fillStyle = headerSeparatorColor;
+        var _rowHeight2 = visibleRowHeights.get(highlightedSeparator);
 
-        for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
-          var _row6 = hiddenRows[_i9];
+        var _y6 = gridY + _rowY2 + _rowHeight2 + 0.5;
 
-          var _rowY3 = visibleRowYs.get(_row6);
+        var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
+        var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
+        var nextRowHeight = nextRow != null ? visibleRowHeights.get(nextRow) : null;
+        var isRowHidden = _rowHeight2 === 0;
+        var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
 
-          var _rowHeight4 = visibleRowHeights.get(_row6);
-
-          var minY = gridY + _rowY3 + _rowHeight4 + 0.5 - headerHiddenSeparatorSize * 0.5;
-          context.rect(x + hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
+        if (isRowHidden) {
+          context.strokeStyle = headerHiddenSeparatorHoverColor;
+          context.fillStyle = headerHiddenSeparatorHoverColor;
+          context.fillRect(hiddenX, _y6, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+        } else if (isNextRowHidden) {
+          context.fillStyle = headerSeparatorHoverColor;
+          context.fillRect(hiddenX, _y6 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
         }
 
-        context.fill();
+        context.beginPath();
+        context.moveTo(0.5, _y6);
+        context.lineTo(rowHeaderWidth + 0.5, _y6);
+        context.stroke();
       }
+    } // Fill in the text
 
-      if (headerSeparatorHoverColor) {
-        var highlightedSeparator = draggingRowSeparator;
 
-        if (highlightedSeparator == null) {
-          highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
-        }
+    context.beginPath();
+    context.rect(0, gridY, rowHeaderWidth, height);
+    context.clip();
+    context.fillStyle = headerColor;
+    context.textAlign = 'right';
+
+    for (var _i8 = 0; _i8 < visibleRows.length; _i8 += 1) {
+      var _row5 = visibleRows[_i8];
 
-        if (highlightedSeparator != null) {
-          context.strokeStyle = headerSeparatorHoverColor;
+      var _rowHeight3 = visibleRowHeights.get(_row5);
+
+      var _y7 = visibleRowYs.get(_row5) + gridY;
+
+      this.drawRowHeader(context, state, _row5, _y7, _rowHeight3);
+    }
 
-          var _rowY4 = visibleRowYs.get(highlightedSeparator);
+    context.restore();
+  }
 
-          var _rowHeight5 = visibleRowHeights.get(highlightedSeparator);
+  drawRowHeader(context, state, row, rowY, rowHeight) {
+    if (rowHeight <= 0) {
+      return;
+    }
 
-          var _y8 = gridY + _rowY4 + _rowHeight5 + 0.5;
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      modelRows,
+      rowHeaderWidth
+    } = metrics;
+    var modelRow = modelRows.get(row);
+    var x = rowHeaderWidth - theme.cellHorizontalPadding;
+    var y = rowY + rowHeight * 0.5;
+    context.fillText(model.textForRowHeader(modelRow), x, y);
+  }
 
-          var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
-          var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
-          var nextRowHeight = nextRow != null ? visibleRowHeights.get(nextRow) : null;
-          var isRowHidden = _rowHeight5 === 0;
-          var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
+  drawRowFooters(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      metrics,
+      model,
+      theme,
+      draggingRowSeparator
+    } = state;
+    var {
+      gridY,
+      gridX,
+      maxX,
+      modelRows,
+      rowFooterWidth,
+      height,
+      verticalBarWidth,
+      visibleRows,
+      visibleRowHeights,
+      visibleRowYs,
+      width
+    } = metrics;
+
+    if (rowFooterWidth <= 0) {
+      return;
+    }
 
-          if (isRowHidden) {
-            context.strokeStyle = headerHiddenSeparatorHoverColor;
-            context.fillStyle = headerHiddenSeparatorHoverColor;
-            context.fillRect(hiddenX, _y8, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
-          } else if (isNextRowHidden) {
-            context.fillStyle = headerSeparatorHoverColor;
-            context.fillRect(hiddenX, _y8 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
-          }
+    var {
+      cellHorizontalPadding,
+      headerBackgroundColor,
+      headerColor,
+      headerHiddenSeparatorSize,
+      headerHiddenSeparatorHoverColor,
+      headerSeparatorColor,
+      headerSeparatorHoverColor
+    } = theme;
+    var hiddenSeparatorWidth = rowFooterWidth * 0.5;
+    var hiddenX = rowFooterWidth * 0.5 - hiddenSeparatorWidth * 0.5;
+    var x = Math.min(gridX + maxX, width - rowFooterWidth - verticalBarWidth);
+    context.save();
+    context.beginPath(); // Fill in the background
+
+    context.fillStyle = headerBackgroundColor;
+    context.fillRect(x, gridY, rowFooterWidth, height); // Draw the separators
+
+    if (headerSeparatorColor) {
+      context.strokeStyle = headerSeparatorColor;
+      context.beginPath();
+      context.moveTo(x, gridY + 0.5);
+      context.lineTo(rowFooterWidth, gridY + 0.5);
+      var hiddenRows = [];
+      var isPreviousRowHidden = false;
 
-          context.beginPath();
-          context.moveTo(x + 0.5, _y8);
-          context.lineTo(x + rowFooterWidth + 0.5, _y8);
-          context.stroke();
+      for (var i = 0; i < visibleRows.length; i += 1) {
+        var row = visibleRows[i];
+        var rowY = visibleRowYs.get(row);
+        var rowHeight = visibleRowHeights.get(row);
+
+        if (rowHeight > 0) {
+          var y = gridY + rowY + rowHeight + 0.5;
+          context.moveTo(x + 0.5, y);
+          context.lineTo(x + rowFooterWidth - 0.5, y);
+          isPreviousRowHidden = false;
+        } else if (!isPreviousRowHidden) {
+          isPreviousRowHidden = true;
+          hiddenRows.push(row);
         }
-      } // Fill in the text
+      } // border left, interior to the headerWidth
+
 
+      context.moveTo(x + 0.5, gridY);
+      context.lineTo(x + 0.5, height);
+      context.stroke(); // Draw the hidden column separators
 
       context.beginPath();
-      context.rect(x, gridY, rowFooterWidth, height);
-      context.clip();
-      context.fillStyle = headerColor;
-      context.textAlign = 'left';
-      var textX = x + cellHorizontalPadding;
+      context.fillStyle = headerSeparatorColor;
 
-      for (var _i10 = 0; _i10 < visibleRows.length; _i10 += 1) {
-        var _row7 = visibleRows[_i10];
+      for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
+        var _row6 = hiddenRows[_i9];
 
-        var _rowHeight6 = visibleRowHeights.get(_row7);
+        var _rowY3 = visibleRowYs.get(_row6);
 
-        if (_rowHeight6 > 0) {
-          var _rowY5 = visibleRowYs.get(_row7) + gridY;
+        var _rowHeight4 = visibleRowHeights.get(_row6);
 
-          var modelRow = modelRows.get(_row7);
-          var textY = _rowY5 + _rowHeight6 * 0.5;
-          context.fillText(model.textForRowFooter(modelRow), textX, textY);
-        }
+        var minY = gridY + _rowY3 + _rowHeight4 + 0.5 - headerHiddenSeparatorSize * 0.5;
+        context.rect(x + hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
       }
 
-      context.restore();
+      context.fill();
     }
-  }, {
-    key: "drawSelectedRanges",
-    value: function drawSelectedRanges(context, state) {
-      var viewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      var column = state.cursorColumn,
-          row = state.cursorRow,
-          draggingRow = state.draggingRow,
-          draggingColumn = state.draggingColumn,
-          editingCell = state.editingCell,
-          metrics = state.metrics,
-          model = state.model,
-          selectedRanges = state.selectedRanges,
-          theme = state.theme;
-      var visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleRowHeights = metrics.visibleRowHeights,
-          visibleRowYs = metrics.visibleRowYs,
-          width = metrics.width,
-          height = metrics.height;
-      var _viewport$left = viewport.left,
-          left = _viewport$left === void 0 ? metrics.left : _viewport$left,
-          _viewport$top = viewport.top,
-          top = _viewport$top === void 0 ? metrics.top : _viewport$top,
-          _viewport$right = viewport.right,
-          right = _viewport$right === void 0 ? metrics.right : _viewport$right,
-          _viewport$bottom = viewport.bottom,
-          bottom = _viewport$bottom === void 0 ? metrics.bottom : _viewport$bottom,
-          _viewport$minY = viewport.minY,
-          minY = _viewport$minY === void 0 ? -10 : _viewport$minY,
-          _viewport$maxY = viewport.maxY,
-          maxY = _viewport$maxY === void 0 ? height + 10 : _viewport$maxY,
-          _viewport$minX = viewport.minX,
-          minX = _viewport$minX === void 0 ? -10 : _viewport$minX,
-          _viewport$maxX = viewport.maxX,
-          maxX = _viewport$maxX === void 0 ? width + 10 : _viewport$maxX;
-
-      if (selectedRanges.length === 0) {
-        return;
+
+    if (headerSeparatorHoverColor) {
+      var highlightedSeparator = draggingRowSeparator;
+
+      if (highlightedSeparator == null) {
+        highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
       }
 
-      var isCursorVisible = model.isEditable && editingCell == null && draggingRow == null && draggingColumn == null && visibleColumnXs.has(column) && visibleRowYs.has(row);
+      if (highlightedSeparator != null) {
+        context.strokeStyle = headerSeparatorHoverColor;
 
-      if (isCursorVisible) {
-        // Punch a hole out where the active cell is, it gets styled differently.
-        var x = visibleColumnXs.get(column);
-        var y = visibleRowYs.get(row);
-        var w = visibleColumnWidths.get(column);
-        var h = visibleRowHeights.get(row);
-        context.save();
-        context.beginPath();
-        context.rect(0, 0, width, height);
-        context.rect(x, y, w, h);
-        context.clip('evenodd');
-      } // Draw selection ranges
+        var _rowY4 = visibleRowYs.get(highlightedSeparator);
 
+        var _rowHeight5 = visibleRowHeights.get(highlightedSeparator);
 
-      context.beginPath();
+        var _y8 = gridY + _rowY4 + _rowHeight5 + 0.5;
 
-      for (var i = 0; i < selectedRanges.length; i += 1) {
-        var selectedRange = selectedRanges[i];
-        var startColumn = selectedRange.startColumn !== null ? selectedRange.startColumn : left;
-        var startRow = selectedRange.startRow !== null ? selectedRange.startRow : top;
-        var endColumn = selectedRange.endColumn !== null ? selectedRange.endColumn : right;
-        var endRow = selectedRange.endRow !== null ? selectedRange.endRow : bottom;
-
-        if (endRow >= top && bottom >= startRow && endColumn >= left && right >= startColumn) {
-          // Need to offset the x/y coordinates so that the line draws nice and crisp
-          var _x7 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(visibleColumnXs.get(startColumn)) + 0.5 : minX;
-
-          var _y9 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(visibleRowYs.get(startRow)) + 0.5, 0.5) : minY;
-
-          var endX = endColumn <= right && visibleColumnXs.has(endColumn) ? Math.round(visibleColumnXs.get(endColumn) + visibleColumnWidths.get(endColumn)) - 0.5 : maxX;
-          var endY = endRow <= bottom && visibleRowYs.has(endRow) ? Math.round(visibleRowYs.get(endRow) + visibleRowHeights.get(endRow)) - 0.5 : maxY;
-          context.rect(_x7, _y9, endX - _x7, endY - _y9);
-        } // draw the inner transparent fill
-
-
-        context.fillStyle = theme.selectionColor;
-        context.fill();
-        /* 
-        draw an "inner stroke" that's clipped to just inside of the rects
-        to act as a casing to the outer stroke. 3px width because 1px is outside
-        the rect (but clipped), 1px is "on" the rect (technically this pixel is
-        a half pixel clip as well due to rects offset, but we are immediately painting
-        over it), and then the 1px inside (which is the desired pixel).
-        */
-
-        context.save();
-        context.clip();
-        context.strokeStyle = theme.selectionOutlineCasingColor;
-        context.lineWidth = 3;
-        context.stroke();
-        context.restore(); // draw the outerstroke border on top of the inner stroke
+        var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
+        var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
+        var nextRowHeight = nextRow != null ? visibleRowHeights.get(nextRow) : null;
+        var isRowHidden = _rowHeight5 === 0;
+        var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
 
-        context.strokeStyle = theme.selectionOutlineColor;
-        context.lineWidth = 1;
+        if (isRowHidden) {
+          context.strokeStyle = headerHiddenSeparatorHoverColor;
+          context.fillStyle = headerHiddenSeparatorHoverColor;
+          context.fillRect(hiddenX, _y8, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+        } else if (isNextRowHidden) {
+          context.fillStyle = headerSeparatorHoverColor;
+          context.fillRect(hiddenX, _y8 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+        }
+
+        context.beginPath();
+        context.moveTo(x + 0.5, _y8);
+        context.lineTo(x + rowFooterWidth + 0.5, _y8);
         context.stroke();
       }
+    } // Fill in the text
+
+
+    context.beginPath();
+    context.rect(x, gridY, rowFooterWidth, height);
+    context.clip();
+    context.fillStyle = headerColor;
+    context.textAlign = 'left';
+    var textX = x + cellHorizontalPadding;
+
+    for (var _i10 = 0; _i10 < visibleRows.length; _i10 += 1) {
+      var _row7 = visibleRows[_i10];
 
-      if (isCursorVisible) {
-        context.restore();
-        this.drawActiveCell(context, state, column, row);
+      var _rowHeight6 = visibleRowHeights.get(_row7);
+
+      if (_rowHeight6 > 0) {
+        var _rowY5 = visibleRowYs.get(_row7) + gridY;
+
+        var modelRow = modelRows.get(_row7);
+        var textY = _rowY5 + _rowHeight6 * 0.5;
+        context.fillText(model.textForRowFooter(modelRow), textX, textY);
       }
     }
-  }, {
-    key: "drawActiveCell",
-    value: function drawActiveCell(context, state, column, row) {
-      var borderWidth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : GridRenderer.ACTIVE_CELL_BORDER_WIDTH;
-      var metrics = state.metrics,
-          theme = state.theme;
-      var visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleRowHeights = metrics.visibleRowHeights,
-          visibleRowYs = metrics.visibleRowYs;
-      var cellX = visibleColumnXs.get(column);
-      var cellY = visibleRowYs.get(row);
-      var cellW = visibleColumnWidths.get(column);
-      var cellH = visibleRowHeights.get(row); // Now get the outline for the active cell
-
-      var x = cellX - borderWidth * 0.5;
-      var y = cellY - borderWidth * 0.5;
-      var w = cellW + borderWidth;
-      var h = cellH + borderWidth; // Make sure the outline is interior on the edge
-
-      if (x <= 0) {
-        w += x - 1;
-        x = 1;
-      }
 
-      if (y <= 0) {
-        h += y - 1;
-        y = 1;
-      }
+    context.restore();
+  }
 
-      var lineWidth = context.lineWidth;
-      context.beginPath();
-      context.lineWidth = borderWidth;
-      context.strokeStyle = theme.selectionOutlineColor;
-      this.drawRoundedRect(context, x, y, w, h);
-      context.stroke();
-      context.lineWidth = lineWidth;
-    }
-    /**
-     * Draws a rounded rectangle using the current state of the canvas.
-     *
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {number} x coordinate of the left side
-     * @param {number} y coordinate of the top side
-     * @param {number} w width of the rectangle
-     * @param {number} h height of the rectangle
-     * @param {number} r corner radius of the rectangle
-     */
-
-  }, {
-    key: "drawRoundedRect",
-    value: function drawRoundedRect(context, x, y, w, h) {
-      var r = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : GridRenderer.DEFAULT_EDGE_RADIUS;
-      context.beginPath();
-      context.moveTo(x + r, y);
-      context.lineTo(x + w - r, y);
-      context.quadraticCurveTo(x + w, y, x + w, y + r);
-      context.lineTo(x + w, y + h - r);
-      context.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-      context.lineTo(x + r, y + h);
-      context.quadraticCurveTo(x, y + h, x, y + h - r);
-      context.lineTo(x, y + r);
-      context.quadraticCurveTo(x, y, x + r, y);
-      context.closePath();
-    }
-  }, {
-    key: "drawDraggingColumn",
-    value: function drawDraggingColumn(context, state) {
-      var draggingColumn = state.draggingColumn,
-          draggingColumnOffset = state.draggingColumnOffset,
-          metrics = state.metrics,
-          mouseX = state.mouseX,
-          theme = state.theme;
-
-      if (draggingColumn == null) {
-        return;
-      }
+  drawSelectedRanges(context, state) {
+    var viewport = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var {
+      cursorColumn: column,
+      cursorRow: row,
+      draggingRow,
+      draggingColumn,
+      editingCell,
+      metrics,
+      model,
+      selectedRanges,
+      theme
+    } = state;
+    var {
+      visibleColumnWidths,
+      visibleColumnXs,
+      visibleRowHeights,
+      visibleRowYs,
+      width,
+      height
+    } = metrics;
+    var {
+      left = metrics.left,
+      top = metrics.top,
+      right = metrics.right,
+      bottom = metrics.bottom,
+      minY = -10,
+      maxY = height + 10,
+      minX = -10,
+      maxX = width + 10
+    } = viewport;
+
+    if (selectedRanges.length === 0) {
+      return;
+    }
+
+    var isCursorVisible = model.isEditable && editingCell == null && draggingRow == null && draggingColumn == null && visibleColumnXs.has(column) && visibleRowYs.has(row);
 
-      var gridX = metrics.gridX,
-          gridY = metrics.gridY,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          height = metrics.height;
-      var x = visibleColumnXs.get(draggingColumn);
-      var columnWidth = visibleColumnWidths.get(draggingColumn) + 1;
-      var backgroundColor = theme.backgroundColor,
-          font = theme.font,
-          headerFont = theme.headerFont,
-          reorderOffset = theme.reorderOffset,
-          shadowBlur = theme.shadowBlur,
-          shadowColor = theme.shadowColor;
+    if (isCursorVisible) {
+      // Punch a hole out where the active cell is, it gets styled differently.
+      var x = visibleColumnXs.get(column);
+      var y = visibleRowYs.get(row);
+      var w = visibleColumnWidths.get(column);
+      var h = visibleRowHeights.get(row);
       context.save();
-      context.translate(gridX, 0); // First, we need to draw over the row stripes where the column is coming from
+      context.beginPath();
+      context.rect(0, 0, width, height);
+      context.rect(x, y, w, h);
+      context.clip('evenodd');
+    } // Draw selection ranges
 
-      context.fillStyle = backgroundColor;
-      context.fillRect(x, 0, columnWidth, height);
-      context.translate(mouseX - x - gridX - draggingColumnOffset, gridY + reorderOffset); // Then draw the shadow of the moving column
 
-      context.save();
-      context.shadowColor = shadowColor;
-      context.shadowBlur = shadowBlur;
-      context.fillStyle = backgroundColor;
-      context.fillRect(x, -gridY, columnWidth, height);
-      context.restore(); // Now set the clipping region and pretty much just redraw this column and all it's contents
+    context.beginPath();
 
-      context.beginPath();
-      context.rect(x, -gridY, columnWidth, height);
-      context.clip();
-      context.font = font;
-      this.drawGridBackground(context, state);
-      this.drawColumnCellContents(context, state, draggingColumn); // Now translate it back up and draw the header
+    for (var i = 0; i < selectedRanges.length; i += 1) {
+      var selectedRange = selectedRanges[i];
+      var startColumn = selectedRange.startColumn !== null ? selectedRange.startColumn : left;
+      var startRow = selectedRange.startRow !== null ? selectedRange.startRow : top;
+      var endColumn = selectedRange.endColumn !== null ? selectedRange.endColumn : right;
+      var endRow = selectedRange.endRow !== null ? selectedRange.endRow : bottom;
 
-      context.translate(-gridX, -gridY);
-      context.font = headerFont;
-      this.drawColumnHeaders(context, state);
-      context.restore();
-    }
-  }, {
-    key: "drawDraggingRow",
-    value: function drawDraggingRow(context, state) {
-      var draggingRow = state.draggingRow,
-          draggingRowOffset = state.draggingRowOffset,
-          metrics = state.metrics,
-          mouseY = state.mouseY,
-          theme = state.theme;
-
-      if (draggingRow == null) {
-        return;
-      }
+      if (endRow >= top && bottom >= startRow && endColumn >= left && right >= startColumn) {
+        // Need to offset the x/y coordinates so that the line draws nice and crisp
+        var _x7 = startColumn >= left && visibleColumnXs.has(startColumn) ? Math.round(visibleColumnXs.get(startColumn)) + 0.5 : minX;
 
-      var gridX = metrics.gridX,
-          gridY = metrics.gridY,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleRowHeights = metrics.visibleRowHeights,
-          width = metrics.width;
-      var y = visibleRowYs.get(draggingRow);
-      var rowHeight = visibleRowHeights.get(draggingRow) + 1;
-      var backgroundColor = theme.backgroundColor,
-          font = theme.font,
-          headerFont = theme.headerFont,
-          reorderOffset = theme.reorderOffset,
-          shadowBlur = theme.shadowBlur,
-          shadowColor = theme.shadowColor;
-      context.save();
-      context.translate(0, gridY); // First, we need to draw over the row stripes where the row is coming from
+        var _y9 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(visibleRowYs.get(startRow)) + 0.5, 0.5) : minY;
 
-      context.fillStyle = backgroundColor;
-      context.fillRect(0, y, width, rowHeight);
-      context.translate(gridX + reorderOffset, mouseY - y - gridY - draggingRowOffset); // Then draw the shadow of the moving row
+        var endX = endColumn <= right && visibleColumnXs.has(endColumn) ? Math.round(visibleColumnXs.get(endColumn) + visibleColumnWidths.get(endColumn)) - 0.5 : maxX;
+        var endY = endRow <= bottom && visibleRowYs.has(endRow) ? Math.round(visibleRowYs.get(endRow) + visibleRowHeights.get(endRow)) - 0.5 : maxY;
+        context.rect(_x7, _y9, endX - _x7, endY - _y9);
+      } // draw the inner transparent fill
 
-      context.save();
-      context.shadowColor = shadowColor;
-      context.shadowBlur = shadowBlur;
-      context.fillStyle = backgroundColor;
-      context.fillRect(-gridX, y, width, rowHeight);
-      context.restore(); // Now set the clipping region and pretty much just redraw this row and all it's contents
 
-      context.beginPath();
-      context.rect(-gridX, y, width, rowHeight);
+      context.fillStyle = theme.selectionColor;
+      context.fill();
+      /* 
+      draw an "inner stroke" that's clipped to just inside of the rects
+      to act as a casing to the outer stroke. 3px width because 1px is outside
+      the rect (but clipped), 1px is "on" the rect (technically this pixel is
+      a half pixel clip as well due to rects offset, but we are immediately painting
+      over it), and then the 1px inside (which is the desired pixel).
+      */
+
+      context.save();
       context.clip();
-      context.font = font;
-      this.drawGridBackground(context, state);
-      this.drawCellContents(context, state); // Now translate it back up and draw the header
+      context.strokeStyle = theme.selectionOutlineCasingColor;
+      context.lineWidth = 3;
+      context.stroke();
+      context.restore(); // draw the outerstroke border on top of the inner stroke
 
-      context.translate(-gridX, -gridY);
-      context.font = headerFont;
-      this.drawRowHeaders(context, state);
+      context.strokeStyle = theme.selectionOutlineColor;
+      context.lineWidth = 1;
+      context.stroke();
+    }
+
+    if (isCursorVisible) {
       context.restore();
+      this.drawActiveCell(context, state, column, row);
     }
-  }, {
-    key: "drawScrollBars",
-    value: function drawScrollBars(context, state) {
-      var isDraggingHorizontalScrollBar = state.isDraggingHorizontalScrollBar,
-          isDraggingVerticalScrollBar = state.isDraggingVerticalScrollBar,
-          isDragging = state.isDragging,
-          metrics = state.metrics,
-          mouseX = state.mouseX,
-          mouseY = state.mouseY,
-          theme = state.theme;
-
-      if (theme.scrollBarSize <= 0) {
-        return;
-      }
+  }
 
-      var rowHeaderWidth = metrics.rowHeaderWidth,
-          columnHeaderHeight = metrics.columnHeaderHeight,
-          width = metrics.width,
-          height = metrics.height,
-          handleHeight = metrics.handleHeight,
-          handleWidth = metrics.handleWidth,
-          scrollX = metrics.scrollX,
-          scrollY = metrics.scrollY,
-          hasHorizontalBar = metrics.hasHorizontalBar,
-          hasVerticalBar = metrics.hasVerticalBar,
-          barWidth = metrics.barWidth,
-          barHeight = metrics.barHeight;
-      var scrollBarBackgroundColor = theme.scrollBarBackgroundColor,
-          scrollBarHoverBackgroundColor = theme.scrollBarHoverBackgroundColor,
-          scrollBarCasingColor = theme.scrollBarCasingColor,
-          scrollBarCornerColor = theme.scrollBarCornerColor,
-          scrollBarColor = theme.scrollBarColor,
-          scrollBarHoverColor = theme.scrollBarHoverColor,
-          scrollBarActiveColor = theme.scrollBarActiveColor,
-          scrollBarSize = theme.scrollBarSize,
-          scrollBarHoverSize = theme.scrollBarHoverSize,
-          scrollBarCasingWidth = theme.scrollBarCasingWidth;
-      var isInbounds = mouseX <= width && mouseY <= height;
-      var isVerticalBarHover = isDraggingVerticalScrollBar || hasVerticalBar && !isDraggingHorizontalScrollBar && !isDragging && mouseX >= width - scrollBarHoverSize && mouseY <= barHeight + columnHeaderHeight && isInbounds;
-      var isHorizontalBarHover = isDraggingHorizontalScrollBar || hasHorizontalBar && !isDraggingVerticalScrollBar && !isDragging && !isVerticalBarHover && // vert bar gets priorty in overlapped corner hover area
-      mouseY >= height - scrollBarHoverSize && mouseX <= barWidth - rowHeaderWidth && isInbounds;
-      var hScrollBarSize = isHorizontalBarHover ? scrollBarHoverSize : scrollBarSize;
-      var vScrollBarSize = isVerticalBarHover ? scrollBarHoverSize : scrollBarSize;
-      context.translate(rowHeaderWidth, columnHeaderHeight);
-
-      if (hasHorizontalBar && hasVerticalBar) {
-        // That little corner in the bottom right
-        context.fillStyle = scrollBarCasingColor;
-        context.fillRect(width - rowHeaderWidth - scrollBarSize, height - columnHeaderHeight - scrollBarSize, scrollBarSize, scrollBarSize);
-        context.fillStyle = scrollBarCornerColor;
-        context.fillRect(width - rowHeaderWidth - scrollBarSize + scrollBarCasingWidth, height - columnHeaderHeight - scrollBarSize + scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth);
-      }
+  drawActiveCell(context, state, column, row) {
+    var borderWidth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : GridRenderer.ACTIVE_CELL_BORDER_WIDTH;
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      visibleColumnWidths,
+      visibleColumnXs,
+      visibleRowHeights,
+      visibleRowYs
+    } = metrics;
+    var cellX = visibleColumnXs.get(column);
+    var cellY = visibleRowYs.get(row);
+    var cellW = visibleColumnWidths.get(column);
+    var cellH = visibleRowHeights.get(row); // Now get the outline for the active cell
+
+    var x = cellX - borderWidth * 0.5;
+    var y = cellY - borderWidth * 0.5;
+    var w = cellW + borderWidth;
+    var h = cellH + borderWidth; // Make sure the outline is interior on the edge
+
+    if (x <= 0) {
+      w += x - 1;
+      x = 1;
+    }
 
-      if (hasHorizontalBar) {
-        var x = scrollX;
-        var y = height - columnHeaderHeight - hScrollBarSize; // scrollbar casing
+    if (y <= 0) {
+      h += y - 1;
+      y = 1;
+    }
 
-        context.fillStyle = scrollBarCasingColor;
-        context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar track
+    var {
+      lineWidth
+    } = context;
+    context.beginPath();
+    context.lineWidth = borderWidth;
+    context.strokeStyle = theme.selectionOutlineColor;
+    this.drawRoundedRect(context, x, y, w, h);
+    context.stroke();
+    context.lineWidth = lineWidth;
+  }
+  /**
+   * Draws a rounded rectangle using the current state of the canvas.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} x coordinate of the left side
+   * @param {number} y coordinate of the top side
+   * @param {number} w width of the rectangle
+   * @param {number} h height of the rectangle
+   * @param {number} r corner radius of the rectangle
+   */
+
+
+  drawRoundedRect(context, x, y, w, h) {
+    var r = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : GridRenderer.DEFAULT_EDGE_RADIUS;
+    context.beginPath();
+    context.moveTo(x + r, y);
+    context.lineTo(x + w - r, y);
+    context.quadraticCurveTo(x + w, y, x + w, y + r);
+    context.lineTo(x + w, y + h - r);
+    context.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    context.lineTo(x + r, y + h);
+    context.quadraticCurveTo(x, y + h, x, y + h - r);
+    context.lineTo(x, y + r);
+    context.quadraticCurveTo(x, y, x + r, y);
+    context.closePath();
+  }
 
-        context.fillStyle = isHorizontalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-        context.fillRect(0, y + scrollBarCasingWidth, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar thumb
+  drawDraggingColumn(context, state) {
+    var {
+      draggingColumn,
+      draggingColumnOffset,
+      metrics,
+      mouseX,
+      theme
+    } = state;
+
+    if (draggingColumn == null) {
+      return;
+    }
 
-        if (isDraggingHorizontalScrollBar) {
-          context.fillStyle = scrollBarActiveColor;
-        } else if (isHorizontalBarHover) {
-          context.fillStyle = scrollBarHoverColor;
-        } else {
-          context.fillStyle = scrollBarColor;
-        }
+    var {
+      gridX,
+      gridY,
+      visibleColumnXs,
+      visibleColumnWidths,
+      height
+    } = metrics;
+    var x = visibleColumnXs.get(draggingColumn);
+    var columnWidth = visibleColumnWidths.get(draggingColumn) + 1;
+    var {
+      backgroundColor,
+      font,
+      headerFont,
+      reorderOffset,
+      shadowBlur,
+      shadowColor
+    } = theme;
+    context.save();
+    context.translate(gridX, 0); // First, we need to draw over the row stripes where the column is coming from
+
+    context.fillStyle = backgroundColor;
+    context.fillRect(x, 0, columnWidth, height);
+    context.translate(mouseX - x - gridX - draggingColumnOffset, gridY + reorderOffset); // Then draw the shadow of the moving column
+
+    context.save();
+    context.shadowColor = shadowColor;
+    context.shadowBlur = shadowBlur;
+    context.fillStyle = backgroundColor;
+    context.fillRect(x, -gridY, columnWidth, height);
+    context.restore(); // Now set the clipping region and pretty much just redraw this column and all it's contents
+
+    context.beginPath();
+    context.rect(x, -gridY, columnWidth, height);
+    context.clip();
+    context.font = font;
+    this.drawGridBackground(context, state);
+    this.drawColumnCellContents(context, state, draggingColumn); // Now translate it back up and draw the header
+
+    context.translate(-gridX, -gridY);
+    context.font = headerFont;
+    this.drawColumnHeaders(context, state);
+    context.restore();
+  }
 
-        context.fillRect(x, y + scrollBarCasingWidth, handleWidth, hScrollBarSize - scrollBarCasingWidth);
-      }
+  drawDraggingRow(context, state) {
+    var {
+      draggingRow,
+      draggingRowOffset,
+      metrics,
+      mouseY,
+      theme
+    } = state;
+
+    if (draggingRow == null) {
+      return;
+    }
 
-      if (hasVerticalBar) {
-        var _x8 = width - rowHeaderWidth - vScrollBarSize;
+    var {
+      gridX,
+      gridY,
+      visibleRowYs,
+      visibleRowHeights,
+      width
+    } = metrics;
+    var y = visibleRowYs.get(draggingRow);
+    var rowHeight = visibleRowHeights.get(draggingRow) + 1;
+    var {
+      backgroundColor,
+      font,
+      headerFont,
+      reorderOffset,
+      shadowBlur,
+      shadowColor
+    } = theme;
+    context.save();
+    context.translate(0, gridY); // First, we need to draw over the row stripes where the row is coming from
+
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, y, width, rowHeight);
+    context.translate(gridX + reorderOffset, mouseY - y - gridY - draggingRowOffset); // Then draw the shadow of the moving row
+
+    context.save();
+    context.shadowColor = shadowColor;
+    context.shadowBlur = shadowBlur;
+    context.fillStyle = backgroundColor;
+    context.fillRect(-gridX, y, width, rowHeight);
+    context.restore(); // Now set the clipping region and pretty much just redraw this row and all it's contents
+
+    context.beginPath();
+    context.rect(-gridX, y, width, rowHeight);
+    context.clip();
+    context.font = font;
+    this.drawGridBackground(context, state);
+    this.drawCellContents(context, state); // Now translate it back up and draw the header
+
+    context.translate(-gridX, -gridY);
+    context.font = headerFont;
+    this.drawRowHeaders(context, state);
+    context.restore();
+  }
 
-        var _y10 = scrollY; // scrollbar casing
+  drawScrollBars(context, state) {
+    var {
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      isDragging,
+      metrics,
+      mouseX,
+      mouseY,
+      theme
+    } = state;
+
+    if (theme.scrollBarSize <= 0) {
+      return;
+    }
 
-        context.fillStyle = scrollBarCasingColor;
-        context.fillRect(_x8, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
+    var {
+      rowHeaderWidth,
+      columnHeaderHeight,
+      width,
+      height,
+      handleHeight,
+      handleWidth,
+      scrollX,
+      scrollY,
+      hasHorizontalBar,
+      hasVerticalBar,
+      barWidth,
+      barHeight
+    } = metrics;
+    var {
+      scrollBarBackgroundColor,
+      scrollBarHoverBackgroundColor,
+      scrollBarCasingColor,
+      scrollBarCornerColor,
+      scrollBarColor,
+      scrollBarHoverColor,
+      scrollBarActiveColor,
+      scrollBarSize,
+      scrollBarHoverSize,
+      scrollBarCasingWidth
+    } = theme;
+    var isInbounds = mouseX <= width && mouseY <= height;
+    var isVerticalBarHover = isDraggingVerticalScrollBar || hasVerticalBar && !isDraggingHorizontalScrollBar && !isDragging && mouseX >= width - scrollBarHoverSize && mouseY <= barHeight + columnHeaderHeight && isInbounds;
+    var isHorizontalBarHover = isDraggingHorizontalScrollBar || hasHorizontalBar && !isDraggingVerticalScrollBar && !isDragging && !isVerticalBarHover && // vert bar gets priorty in overlapped corner hover area
+    mouseY >= height - scrollBarHoverSize && mouseX <= barWidth - rowHeaderWidth && isInbounds;
+    var hScrollBarSize = isHorizontalBarHover ? scrollBarHoverSize : scrollBarSize;
+    var vScrollBarSize = isVerticalBarHover ? scrollBarHoverSize : scrollBarSize;
+    context.translate(rowHeaderWidth, columnHeaderHeight);
+
+    if (hasHorizontalBar && hasVerticalBar) {
+      // That little corner in the bottom right
+      context.fillStyle = scrollBarCasingColor;
+      context.fillRect(width - rowHeaderWidth - scrollBarSize, height - columnHeaderHeight - scrollBarSize, scrollBarSize, scrollBarSize);
+      context.fillStyle = scrollBarCornerColor;
+      context.fillRect(width - rowHeaderWidth - scrollBarSize + scrollBarCasingWidth, height - columnHeaderHeight - scrollBarSize + scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth);
+    }
 
-        context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-        context.fillRect(_x8 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
+    if (hasHorizontalBar) {
+      var x = scrollX;
+      var y = height - columnHeaderHeight - hScrollBarSize; // scrollbar casing
 
-        if (isDraggingVerticalScrollBar) {
-          context.fillStyle = scrollBarActiveColor;
-        } else if (isVerticalBarHover) {
-          context.fillStyle = scrollBarHoverColor;
-        } else {
-          context.fillStyle = scrollBarColor;
-        }
+      context.fillStyle = scrollBarCasingColor;
+      context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar track
 
-        context.fillRect(_x8 + scrollBarCasingWidth, _y10, vScrollBarSize - scrollBarCasingWidth, handleHeight);
-      }
+      context.fillStyle = isHorizontalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
+      context.fillRect(0, y + scrollBarCasingWidth, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar thumb
 
-      context.translate(-rowHeaderWidth, -columnHeaderHeight);
-    }
-  }], [{
-    key: "truncate",
-    value:
-    /**
-     * Truncate a string and add ellipses if necessary
-     * @param {string} str The string to truncate
-     * @param {number} len The length to truncate the string to. If longer than the actual string, just returns the string
-     */
-    function truncate(str, len) {
-      if (len < str.length) {
-        // eslint-disable-next-line prefer-template
-        return str.substr(0, len) + '…';
+      if (isDraggingHorizontalScrollBar) {
+        context.fillStyle = scrollBarActiveColor;
+      } else if (isHorizontalBarHover) {
+        context.fillStyle = scrollBarHoverColor;
+      } else {
+        context.fillStyle = scrollBarColor;
       }
 
-      return str;
+      context.fillRect(x, y + scrollBarCasingWidth, handleWidth, hScrollBarSize - scrollBarCasingWidth);
     }
-    /**
-     * Uses binary search to truncate a string to fit in the provided width
-     * @param {Context} context The drawing context to measure the text in
-     * @param {string} str The string to get the maximum length it can draw
-     * @param {number} width The width to truncate it to
-     * @param {number} start The low boundary to start the search
-     * @param {number} end The high boundary to start the search
-     */
-
-  }, {
-    key: "binaryTruncateToWidth",
-    value: function binaryTruncateToWidth(context, str, width) {
-      var start = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      var end = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : str.length;
-
-      if (end >= str.length && context.measureText(str).width <= width) {
-        // IDS-6069 If the whole string can fit, don't bother checking for truncation
-        // The ellipses are actually slightly wider than other chars, and it's possible
-        // that the "truncation" ends up being slightly longer, which messes up the search
-        // algorithm below.
-        // Besides, if we already fit, it's just faster to not bother checking other truncations.
-        return str;
-      }
 
-      var lo = start;
-      var hi = Math.min(str.length - 1, end);
-      var result = str;
+    if (hasVerticalBar) {
+      var _x8 = width - rowHeaderWidth - vScrollBarSize;
 
-      while (hi > lo) {
-        var mid = Math.ceil((hi + lo) / 2);
-        var truncatedStr = GridRenderer.truncate(str, mid);
+      var _y10 = scrollY; // scrollbar casing
 
-        if (context.measureText(truncatedStr).width <= width) {
-          result = truncatedStr;
+      context.fillStyle = scrollBarCasingColor;
+      context.fillRect(_x8, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
 
-          if (lo === mid) {
-            break;
-          }
+      context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
+      context.fillRect(_x8 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
 
-          lo = mid;
-        } else {
-          hi = mid - 1;
-        }
-      }
-
-      return result;
-    }
-    /**
-     * Truncate a string (if necessary) to fit in the specified width.
-     * First uses the estimated font width to calculate a lower/upper bound
-     * Then uses binary search within those bounds to find the exact max length
-     * @param {Context} context The drawing context
-     * @param {string} str The string to calculate max length for
-     * @param {number} width The width to truncate within
-     * @param {number} fontWidth The estimated width of each character
-     */
-
-  }, {
-    key: "truncateToWidth",
-    value: function truncateToWidth(context, str, width) {
-      var fontWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : GridRenderer.DEFAULT_FONT_WIDTH;
-
-      if (width <= 0 || str.length <= 0) {
-        return null;
+      if (isDraggingVerticalScrollBar) {
+        context.fillStyle = scrollBarActiveColor;
+      } else if (isVerticalBarHover) {
+        context.fillStyle = scrollBarHoverColor;
+      } else {
+        context.fillStyle = scrollBarColor;
       }
 
-      var lo = Math.min(Math.floor(width / fontWidth / 2), str.length);
-      var hi = Math.min(Math.ceil(width / fontWidth * 2), str.length);
-      return GridRenderer.binaryTruncateToWidth(context, str, width, lo, hi);
+      context.fillRect(_x8 + scrollBarCasingWidth, _y10, vScrollBarSize - scrollBarCasingWidth, handleHeight);
     }
-  }]);
 
-  return GridRenderer;
-}();
+    context.translate(-rowHeaderWidth, -columnHeaderHeight);
+  }
+
+}
 
 _defineProperty(GridRenderer, "DEFAULT_FONT_WIDTH", 10);