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

package/dist/GridRenderer.js

@@ -1,8 +1,26 @@
+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.js";
-import GridUtils from "./GridUtils.js";
-import GridColorUtils from "./GridColorUtils.js";
+import memoizeClear from './memoizeClear';
+import GridUtils from './GridUtils';
+import GridColorUtils from './GridColorUtils';
 /* eslint react/destructuring-assignment: "off" */
 
 /* eslint class-methods-use-this: "off" */
@@ -15,1930 +33,1826 @@ import GridColorUtils from "./GridColorUtils.js";
  * your own methods to customize drawing of the grid (eg. Draw icons or special features)
  */
 
-class GridRenderer {
-  constructor() {
-    _defineProperty(this, "getCachedTruncatedString", memoizeClear((context, text, width, fontWidth) => GridRenderer.truncateToWidth(context, text, width, fontWidth), {
+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);
+    }, {
       max: 10000
     }));
 
-    _defineProperty(this, "getCachedBackgroundColors", memoizeClear((backgroundColors, maxDepth) => backgroundColors.split(' ').map(color => {
-      var colors = [];
+    _defineProperty(this, "getCachedBackgroundColors", memoizeClear(function (backgroundColors, maxDepth) {
+      return backgroundColors.split(' ').map(function (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((color, alpha) => GridColorUtils.colorWithAlpha(color, alpha), {
+    _defineProperty(this, "getCachedColorWithAlpha", memoizeClear(function (color, alpha) {
+      return GridColorUtils.colorWithAlpha(color, alpha);
+    }, {
       max: 1000
     }));
   }
 
-  /**
-   * 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) + '…';
-    }
-
-    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;
+  _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();
     }
-
-    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);
-
-      if (context.measureText(truncatedStr).width <= width) {
-        result = truncatedStr;
-
-        if (lo === mid) {
-          break;
-        }
-
-        lo = mid;
-      } else {
-        hi = mid - 1;
+  }, {
+    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;
       }
-    }
-
-    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;
-    }
 
-    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();
-  }
-
-  configureContext(context, state) {
-    var {
-      theme
-    } = state;
-    context.font = theme.font;
-    context.textBaseline = 'middle';
-    context.lineCap = 'butt';
-  }
+      if (theme.floatingRowBackgroundColors) {
+        this.drawRowStripesForRows(context, state, floatingRows, theme.floatingRowBackgroundColors);
+      }
 
-  drawBackground(context, state) {
-    var {
-      theme,
-      metrics
-    } = state;
-    var {
-      width,
-      height
-    } = metrics;
-    context.fillStyle = theme.backgroundColor;
-    context.fillRect(0, 0, width, height);
-  }
+      if (draggingRow == null && draggingColumn == null) {
+        this.drawFloatingMouseRowHover(context, state);
+      }
 
-  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);
-  }
+      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...
 
-  drawFloatingRows(context, state) {
-    var {
-      metrics,
-      theme
-    } = state;
-    var {
-      draggingRow,
-      draggingColumn,
-      floatingTopRowCount,
-      floatingBottomRowCount,
-      floatingRows,
-      rowCount,
-      visibleColumns,
-      visibleRowYs,
-      visibleRowHeights
-    } = metrics;
-
-    if (floatingRows.length === 0) {
-      return;
-    }
+      if (floatingTopRowCount > 0) {
+        this.drawSelectedRanges(context, state, {
+          top: 0,
+          bottom: floatingTopRowCount - 1,
+          maxY: visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) - 0.5
+        }, true);
+      }
 
-    if (theme.floatingRowBackgroundColors) {
-      this.drawRowStripesForRows(context, state, floatingRows, theme.floatingRowBackgroundColors);
-    }
+      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 (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...
+      for (var c = 0; c < visibleColumns.length; c += 1) {
+        var column = visibleColumns[c];
 
-    if (floatingTopRowCount > 0) {
-      this.drawSelectedRanges(context, state, {
-        top: 0,
-        bottom: floatingTopRowCount - 1,
-        maxY: visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) - 0.5
-      }, true);
+        for (var r = 0; r < floatingRows.length; r += 1) {
+          var row = floatingRows[r];
+          this.drawCellContent(context, state, column, row);
+        }
+      }
     }
+  }, {
+    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 (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 (theme.floatingRowBackgroundColors) {
+        this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, 0, floatingLeftWidth);
+        this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, width - gridX - floatingRightWidth, maxX);
+      }
 
+      if (draggingRow == null && draggingColumn == null) {
+        this.drawFloatingMouseRowHover(context, state);
+      }
 
-    for (var c = 0; c < visibleColumns.length; c += 1) {
-      var column = visibleColumns[c];
+      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...
 
-      for (var r = 0; r < floatingRows.length; r += 1) {
-        var row = floatingRows[r];
-        this.drawCellContent(context, state, column, row);
+      if (floatingLeftColumnCount > 0) {
+        this.drawSelectedRanges(context, state, {
+          left: 0,
+          right: floatingLeftColumnCount,
+          maxX: visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1)
+        }, true);
       }
-    }
-  }
-
-  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 (theme.floatingRowBackgroundColors) {
-      this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, 0, floatingLeftWidth);
-      this.drawRowStripesForRows(context, state, visibleRows, theme.floatingRowBackgroundColors, width - gridX - floatingRightWidth, maxX);
-    }
+      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...
 
-    if (draggingRow == null && draggingColumn == null) {
-      this.drawFloatingMouseRowHover(context, state);
-    }
 
-    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...
+      for (var c = 0; c < floatingColumns.length; c += 1) {
+        var column = floatingColumns[c];
 
-    if (floatingLeftColumnCount > 0) {
-      this.drawSelectedRanges(context, state, {
-        left: 0,
-        right: floatingLeftColumnCount,
-        maxX: visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1)
-      }, true);
+        for (var r = 0; r < visibleRows.length; r += 1) {
+          var row = visibleRows[r];
+          this.drawCellContent(context, state, column, row);
+        }
+      }
     }
+  }, {
+    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 (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...
-
-
-    for (var c = 0; c < floatingColumns.length; c += 1) {
-      var column = floatingColumns[c];
-
-      for (var r = 0; r < visibleRows.length; r += 1) {
-        var row = visibleRows[r];
-        this.drawCellContent(context, state, column, row);
+      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);
       }
-    }
-  }
 
-  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);
-    }
+      if (floatingBottomRowCount > 0) {
+        var _y = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
 
-    if (floatingBottomRowCount > 0) {
-      var _y = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
+        context.moveTo(0.5, _y);
+        context.lineTo(maxX - 0.5, _y);
+      }
 
-      context.moveTo(0.5, _y);
-      context.lineTo(maxX - 0.5, _y);
-    }
+      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 (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;
 
-    if (floatingRightColumnCount > 0) {
-      var _x = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
+        context.moveTo(_x, 0.5);
+        context.lineTo(_x, maxY - 0.5);
+      }
 
-      context.moveTo(_x, 0.5);
-      context.lineTo(_x, maxY - 0.5);
-    }
+      context.stroke();
+      context.beginPath();
+      context.lineWidth = 1;
+      context.strokeStyle = floatingDividerInnerColor;
 
-    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;
 
-    if (floatingTopRowCount > 0) {
-      var _y2 = visibleRowYs.get(floatingTopRowCount - 1) + visibleRowHeights.get(floatingTopRowCount - 1) + 0.5;
+        context.moveTo(0.5, _y2);
+        context.lineTo(maxX - 0.5, _y2);
+      }
 
-      context.moveTo(0.5, _y2);
-      context.lineTo(maxX - 0.5, _y2);
-    }
+      if (floatingBottomRowCount > 0) {
+        var _y3 = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
 
-    if (floatingBottomRowCount > 0) {
-      var _y3 = visibleRowYs.get(rowCount - floatingBottomRowCount) - 0.5;
+        context.moveTo(0.5, _y3);
+        context.lineTo(maxX - 0.5, _y3);
+      }
 
-      context.moveTo(0.5, _y3);
-      context.lineTo(maxX - 0.5, _y3);
-    }
+      if (floatingLeftColumnCount > 0) {
+        var _x2 = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
 
-    if (floatingLeftColumnCount > 0) {
-      var _x2 = visibleColumnXs.get(floatingLeftColumnCount - 1) + visibleColumnWidths.get(floatingLeftColumnCount - 1) + 0.5;
+        context.moveTo(_x2, 0.5);
+        context.lineTo(_x2, maxY - 0.5);
+      }
 
-      context.moveTo(_x2, 0.5);
-      context.lineTo(_x2, maxY - 0.5);
-    }
+      if (floatingRightColumnCount > 0) {
+        var _x3 = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
 
-    if (floatingRightColumnCount > 0) {
-      var _x3 = visibleColumnXs.get(columnCount - floatingRightColumnCount) - 0.5;
+        context.moveTo(_x3, 0.5);
+        context.lineTo(_x3, maxY - 0.5);
+      }
 
-      context.moveTo(_x3, 0.5);
-      context.lineTo(_x3, maxY - 0.5);
+      context.stroke();
     }
+  }, {
+    key: "drawGridBackground",
+    value: function drawGridBackground(context, state) {
+      var drawHover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      this.drawRowStripes(context, state);
 
-    context.stroke();
-  }
+      if (drawHover) {
+        this.drawMouseColumnHover(context, state);
+        this.drawMouseRowHover(context, state);
+      }
 
-  drawGridBackground(context, state) {
-    var drawHover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    this.drawRowStripes(context, state);
+      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;
+      }
 
-    if (drawHover) {
-      this.drawMouseColumnHover(context, state);
-      this.drawMouseRowHover(context, state);
-    }
+      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, []);
+        }
 
-    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
-    });
-  }
+        colorRowMap.get(color).push(row);
 
-  drawRowStripes(context, state) {
-    var {
-      metrics,
-      theme
-    } = state;
-    var {
-      visibleRows
-    } = metrics;
-    var {
-      rowBackgroundColors
-    } = theme;
-
-    if (!rowBackgroundColors) {
-      return;
-    }
+        if (rowAbove != null) {
+          var depthAbove = model.depthForRow(rowAbove);
 
-    this.drawRowStripesForRows(context, state, visibleRows, rowBackgroundColors);
-  }
+          if (depthAbove < depth) {
+            topShadowRows.push(row);
+          } else if (depthAbove > depth) {
+            bottomShadowRows.push(rowAbove);
+          }
+        }
+      }; // Add all the regular row stripes
 
-  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)];
 
-      if (!colorRowMap.has(color)) {
-        colorRowMap.set(color, []);
+      for (var i = 0; i < rows.length; i += 1) {
+        var row = rows[i];
+        var rowAbove = i > 0 ? rows[i - 1] : null;
+        addRowToColorMap(row, rowAbove);
       }
 
-      colorRowMap.get(color).push(row);
-
-      if (rowAbove != null) {
-        var depthAbove = model.depthForRow(rowAbove);
+      colorRowMap.forEach(function (colorRows, color) {
+        context.fillStyle = color;
+        context.beginPath();
 
-        if (depthAbove < depth) {
-          topShadowRows.push(row);
-        } else if (depthAbove > depth) {
-          bottomShadowRows.push(rowAbove);
+        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);
         }
-      }
-    }; // 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);
-    }
 
-    colorRowMap.forEach((colorRows, color) => {
-      context.fillStyle = color;
-      context.beginPath();
+        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);
+        }
 
-      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.restore();
       }
 
-      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
+      if (bottomShadowRows.length > 0) {
+        context.save();
 
-        context.translate(0, y);
-        context.fillRect(minX, 0, maxX, shadowBlur);
-        context.translate(0, -y);
-      }
+        var _startColor = this.getCachedColorWithAlpha(shadowColor, 0);
 
-      context.restore();
-    }
+        var _endColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
 
-    if (bottomShadowRows.length > 0) {
-      context.save();
+        var _gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
 
-      var _startColor = this.getCachedColorWithAlpha(shadowColor, 0);
+        _gradient.addColorStop(0, _startColor);
 
-      var _endColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
+        _gradient.addColorStop(1, _endColor);
 
-      var _gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
+        context.fillStyle = _gradient;
 
-      _gradient.addColorStop(0, _startColor);
+        for (var _i3 = 0; _i3 < bottomShadowRows.length; _i3 += 1) {
+          var _row3 = bottomShadowRows[_i3];
 
-      _gradient.addColorStop(1, _endColor);
+          var _y4 = visibleRowYs.get(_row3);
 
-      context.fillStyle = _gradient;
+          var rowHeight = visibleRowHeights.get(_row3);
+          var gradientY = _y4 + rowHeight - shadowBlur; // Use a translate so we can reuse the gradient
 
-      for (var _i3 = 0; _i3 < bottomShadowRows.length; _i3 += 1) {
-        var _row3 = bottomShadowRows[_i3];
+          context.translate(0, gradientY);
+          context.fillRect(minX, 0, maxX, shadowBlur);
+          context.translate(0, -gradientY);
+        }
 
-        var _y4 = visibleRowYs.get(_row3);
+        context.restore();
+      }
+    }
+  }, {
+    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 rowHeight = visibleRowHeights.get(_row3);
-        var gradientY = _y4 + rowHeight - shadowBlur; // Use a translate so we can reuse the gradient
+      var visibleColumnWidths = metrics.visibleColumnWidths,
+          visibleColumnXs = metrics.visibleColumnXs,
+          maxY = metrics.maxY;
 
-        context.translate(0, gradientY);
-        context.fillRect(minX, 0, maxX, shadowBlur);
-        context.translate(0, -gradientY);
+      if (mouseY > maxY) {
+        return;
       }
 
-      context.restore();
-    }
-  }
+      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;
+      }
 
-  drawMouseColumnHover(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      theme,
-      metrics
-    } = state;
-    var mouseColumn = GridUtils.getColumnAtX(mouseX, metrics);
-
-    if (mouseColumn == null || !theme.columnHoverBackgroundColor) {
-      return;
-    }
+      var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
 
-    var {
-      visibleColumnWidths,
-      visibleColumnXs,
-      maxY
-    } = metrics;
+      if (mouseRow == null) {
+        return;
+      }
 
-    if (mouseY > maxY) {
-      return;
+      this.drawMouseRowHoverForRow(context, state, mouseRow);
     }
+  }, {
+    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 x = visibleColumnXs.get(mouseColumn);
-    var columnWidth = visibleColumnWidths.get(mouseColumn);
-    context.fillStyle = theme.columnHoverBackgroundColor;
-    context.fillRect(x, 0, columnWidth, maxY);
-  }
+      var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
 
-  drawMouseRowHover(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      theme,
-      metrics
-    } = state;
-    var {
-      maxX
-    } = metrics;
-
-    if (mouseX > maxX || !theme.rowHoverBackgroundColor) {
-      return;
+      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 mouseRow = GridUtils.getRowAtY(mouseY, metrics);
+      for (var i = 0; i < selectedRanges.length; i += 1) {
+        if (selectedRanges[i].startRow <= row && selectedRanges[i].endRow >= row) {
+          context.fillStyle = theme.selectedRowHoverBackgroundColor;
+          break;
+        }
+      }
 
-    if (mouseRow == null) {
-      return;
-    }
+      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;
+      }
 
-    this.drawMouseRowHoverForRow(context, state, mouseRow);
-  }
+      context.lineWidth = 1;
+      context.beginPath();
 
-  drawFloatingMouseRowHover(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      theme,
-      metrics
-    } = state;
-    var {
-      maxX,
-      floatingTopRowCount,
-      floatingBottomRowCount,
-      rowCount,
-      rowFooterWidth
-    } = metrics;
-
-    if (mouseX > maxX + rowFooterWidth || !theme.rowHoverBackgroundColor) {
-      return;
-    }
+      if (columnColor) {
+        context.strokeStyle = columnColor;
+        this.drawGridLinesForColumns(context, state, columns);
+      }
 
-    var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
+      if (rowColor) {
+        context.strokeStyle = rowColor;
+        this.drawGridLinesForRows(context, state, rows);
+      }
 
-    if (mouseRow != null && (mouseRow < floatingTopRowCount || rowCount - floatingBottomRowCount <= mouseRow)) {
-      this.drawMouseRowHoverForRow(context, state, mouseRow);
+      context.stroke();
     }
-  }
-
-  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: "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();
 
-    context.fillRect(0, y, maxX, rowHeight);
-  }
+      for (var i = 0; i < columns.length; i += 1) {
+        var column = columns[i];
 
-  drawGridLines(context, state) {
-    var {
-      metrics,
-      theme
-    } = state;
-    var {
-      visibleColumns,
-      visibleRows
-    } = metrics;
-    this.drawGridLinesForItems(context, state, visibleColumns, visibleRows, theme.gridColumnColor, theme.gridRowColor);
-  }
+        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);
+        }
+      }
 
-  drawGridLinesForItems(context, state, columns, rows, columnColor, rowColor) {
-    if (!columnColor && !rowColor) {
-      return;
+      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);
+      }
 
-    context.lineWidth = 1;
-    context.beginPath();
-
-    if (columnColor) {
-      context.strokeStyle = columnColor;
-      this.drawGridLinesForColumns(context, state, columns);
+      if (isFirstColumn && hasExpandableRows) {
+        this.drawCellRowTreeDepthLines(context, state, row, rowAfter);
+      }
     }
+  }, {
+    key: "drawCellContents",
+    value: function drawCellContents(context, state) {
+      var metrics = state.metrics;
+      var visibleColumns = metrics.visibleColumns;
 
-    if (rowColor) {
-      context.strokeStyle = rowColor;
-      this.drawGridLinesForRows(context, state, rows);
+      for (var i = 0; i < visibleColumns.length; i += 1) {
+        var column = visibleColumns[i];
+        this.drawColumnCellContents(context, state, column);
+      }
     }
+  }, {
+    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();
 
-    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);
-    }
-  }
+      for (var i = 0; i < visibleRows.length; i += 1) {
+        var row = visibleRows[i];
+        this.drawCellContent(context, state, column, row);
+      }
 
-  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.restore();
     }
-  }
+  }, {
+    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;
+        }
 
-  drawCellBackgrounds(context, state) {
-    var {
-      metrics
-    } = state;
-    var {
-      visibleColumns,
-      visibleRows
-    } = metrics;
-    this.drawCellBackgroundsForItems(context, state, visibleColumns, visibleRows);
-  }
+        var textWidth = columnWidth - treeIndent;
+        var textX = x + cellHorizontalPadding;
+        var textY = y + rowHeight * 0.5;
 
-  drawCellBackgroundsForItems(context, state, columns, rows) {
-    context.save();
+        if (textAlign === 'right') {
+          textX = x + textWidth - cellHorizontalPadding;
+        } else if (textAlign === 'center') {
+          textX = x + textWidth * 0.5;
+        } else {
+          textX = x + cellHorizontalPadding;
+        }
 
-    for (var i = 0; i < columns.length; i += 1) {
-      var column = columns[i];
+        textX += treeIndent;
+        var fontWidth = fontWidths.get(context.font);
+        var truncatedText = this.getCachedTruncatedString(context, text, textWidth - cellHorizontalPadding * 2, fontWidth);
 
-      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);
+        if (truncatedText != null) {
+          context.fillText(truncatedText, textX, textY);
+        }
       }
-    }
 
-    context.restore();
-  }
-
-  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);
-    }
-
-    if (isFirstColumn && hasExpandableRows) {
-      this.drawCellRowTreeDepthLines(context, state, row, rowAfter);
+      if (isFirstColumn && hasExpandableRows) {
+        this.drawCellRowTreeMarker(context, state, row);
+      }
     }
-  }
-
-  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);
+  }, {
+    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);
+      }
     }
-  }
+  }, {
+    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();
 
-  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);
-    }
+        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.restore();
-  }
+        context.stroke();
+      } // draw as hockey stick if last row at depth
 
-  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 (hasExpandableRows && isFirstColumn) {
-        treeIndent = treeDepthIndent * (model.depthForRow(row) + 1) + treeHorizontalPadding;
-      }
+      if (depthDiff > 0) {
+        context.beginPath();
 
-      var textWidth = columnWidth - treeIndent;
-      var textX = x + cellHorizontalPadding;
-      var textY = y + rowHeight * 0.5;
+        for (var _i4 = depth - depthDiff; _i4 < depth; _i4 += 1) {
+          var _lineX = columnX + _i4 * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
 
-      if (textAlign === 'right') {
-        textX = x + textWidth - cellHorizontalPadding;
-      } else if (textAlign === 'center') {
-        textX = x + textWidth * 0.5;
-      } else {
-        textX = x + cellHorizontalPadding;
-      }
+          context.moveTo(_lineX, rowY);
+          context.lineTo(_lineX, rowY + Math.ceil(rowHeight / 2)); // extra moveTo prevents halfpixel in corner
 
-      textX += treeIndent;
-      var fontWidth = fontWidths.get(context.font);
-      var truncatedText = this.getCachedTruncatedString(context, text, textWidth - cellHorizontalPadding * 2, fontWidth);
+          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);
+        }
 
-      if (truncatedText != null) {
-        context.fillText(truncatedText, textX, textY);
+        context.stroke();
       }
     }
+  }, {
+    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;
+      }
 
-    if (isFirstColumn && hasExpandableRows) {
-      this.drawCellRowTreeMarker(context, state, row);
-    }
-  }
+      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
 
-  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.fillStyle = headerBackgroundColor;
+      context.fillRect(0, 0, width, columnHeaderHeight); // Draw the separators
 
-  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);
-  }
+      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
 
-  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();
+        context.beginPath();
+        context.fillStyle = headerSeparatorColor;
 
-      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);
-      }
+        for (var _i5 = 0; _i5 < hiddenColumns.length; _i5 += 1) {
+          var _column = hiddenColumns[_i5];
 
-      context.stroke();
-    } // draw as hockey stick if last row at depth
+          var _columnX = visibleColumnXs.get(_column);
 
+          var _columnWidth = visibleColumnWidths.get(_column);
 
-    if (depthDiff > 0) {
-      context.beginPath();
+          var minX = gridX + _columnX + _columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
+          context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
+        }
 
-      for (var _i4 = depth - depthDiff; _i4 < depth; _i4 += 1) {
-        var _lineX = columnX + _i4 * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
+        context.fill();
+      }
 
-        context.moveTo(_lineX, rowY);
-        context.lineTo(_lineX, rowY + Math.ceil(rowHeight / 2)); // extra moveTo prevents halfpixel in corner
+      if (headerSeparatorHoverColor) {
+        var highlightedSeparator = draggingColumnSeparator;
 
-        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);
-      }
+        if (highlightedSeparator == null) {
+          highlightedSeparator = GridUtils.getColumnSeparatorIndex(mouseX, mouseY, metrics, theme);
+        }
 
-      context.stroke();
-    }
-  }
+        if (highlightedSeparator != null && (!isDragging || draggingColumnSeparator != null)) {
+          context.strokeStyle = headerSeparatorHoverColor;
 
-  drawHeaders(context, state) {
-    var {
-      theme
-    } = state;
-    context.font = theme.headerFont;
-    this.drawColumnHeaders(context, state);
-    this.drawRowHeaders(context, state);
-  }
+          var _columnX2 = visibleColumnXs.get(highlightedSeparator);
 
-  drawFooters(context, state) {
-    var {
-      theme
-    } = state;
-    context.font = theme.headerFont;
-    this.drawRowFooters(context, state);
-  }
+          var _columnWidth2 = visibleColumnWidths.get(highlightedSeparator);
 
-  drawColumnHeaders(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      theme,
-      metrics,
-      draggingColumnSeparator,
-      isDragging
-    } = state;
-    var {
-      columnHeaderHeight,
-      gridX,
-      width,
-      visibleColumns,
-      visibleColumnWidths,
-      visibleColumnXs
-    } = metrics;
-
-    if (columnHeaderHeight <= 0) {
-      return;
-    }
+          var _x4 = gridX + _columnX2 + _columnWidth2 + 0.5;
 
-    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;
+          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;
 
-      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
+          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
 
 
-      context.moveTo(0, columnHeaderHeight - 0.5);
-      context.lineTo(width, columnHeaderHeight - 0.5);
-      context.stroke(); // Now draw the hidden column separator boxes
+          context.beginPath();
+          context.moveTo(_x4, 0);
+          context.lineTo(_x4, columnHeaderHeight - 1);
+          context.stroke();
+        }
+      }
 
-      context.beginPath();
-      context.fillStyle = headerSeparatorColor;
+      context.fillStyle = headerColor;
 
-      for (var _i5 = 0; _i5 < hiddenColumns.length; _i5 += 1) {
-        var _column = hiddenColumns[_i5];
+      for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
+        var _column2 = visibleColumns[_i6];
 
-        var _columnX = visibleColumnXs.get(_column);
+        var _columnWidth3 = visibleColumnWidths.get(_column2);
 
-        var _columnWidth = visibleColumnWidths.get(_column);
+        var _x5 = visibleColumnXs.get(_column2) + gridX;
 
-        var minX = gridX + _columnX + _columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
-        context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
+        this.drawColumnHeader(context, state, _column2, _x5, _columnWidth3);
       }
 
-      context.fill();
+      context.restore();
     }
-
-    if (headerSeparatorHoverColor) {
-      var highlightedSeparator = draggingColumnSeparator;
-
-      if (highlightedSeparator == null) {
-        highlightedSeparator = GridUtils.getColumnSeparatorIndex(mouseX, mouseY, metrics, theme);
+  }, {
+    key: "drawColumnHeader",
+    value: function drawColumnHeader(context, state, column, columnX, columnWidth) {
+      if (columnWidth <= 0) {
+        return;
       }
 
-      if (highlightedSeparator != null && (!isDragging || draggingColumnSeparator != null)) {
-        context.strokeStyle = headerSeparatorHoverColor;
+      var metrics = state.metrics,
+          model = state.model,
+          theme = state.theme;
+      var modelColumns = metrics.modelColumns;
+      var modelColumn = modelColumns.get(column);
+      var text = model.textForColumnHeader(modelColumn);
 
-        var _columnX2 = visibleColumnXs.get(highlightedSeparator);
+      if (!text) {
+        return;
+      }
 
-        var _columnWidth2 = visibleColumnWidths.get(highlightedSeparator);
+      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;
 
-        var _x4 = gridX + _columnX2 + _columnWidth2 + 0.5;
+      if (maxLength <= 0) {
+        return;
+      }
 
-        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;
+      context.save();
+      context.beginPath();
+      context.rect(columnX, 0, columnWidth, columnHeaderHeight);
+      context.clip();
 
-        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 (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;
 
-        context.beginPath();
-        context.moveTo(_x4, 0);
-        context.lineTo(_x4, columnHeaderHeight - 1);
-        context.stroke();
+        context.textAlign = 'center';
+        context.fillText(text, _x6, _y5);
       }
+
+      context.restore();
     }
+  }, {
+    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;
+      }
 
-    context.fillStyle = headerColor;
+      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
 
-    for (var _i6 = 0; _i6 < visibleColumns.length; _i6 += 1) {
-      var _column2 = visibleColumns[_i6];
+      context.fillStyle = headerBackgroundColor;
+      context.fillRect(0, 0, rowHeaderWidth, height); // Draw the separators
 
-      var _columnWidth3 = visibleColumnWidths.get(_column2);
+      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
 
-      var _x5 = visibleColumnXs.get(_column2) + gridX;
+        context.beginPath();
+        context.fillStyle = headerSeparatorColor;
 
-      this.drawColumnHeader(context, state, _column2, _x5, _columnWidth3);
-    }
+        for (var _i7 = 0; _i7 < hiddenRows.length; _i7 += 1) {
+          var _row4 = hiddenRows[_i7];
 
-    context.restore();
-  }
+          var _rowY = visibleRowYs.get(_row4);
 
-  drawColumnHeader(context, state, column, columnX, columnWidth) {
-    if (columnWidth <= 0) {
-      return;
-    }
+          var _rowHeight = visibleRowHeights.get(_row4);
 
-    var {
-      metrics,
-      model,
-      theme
-    } = state;
-    var {
-      modelColumns
-    } = metrics;
-    var modelColumn = modelColumns.get(column);
-    var text = model.textForColumnHeader(modelColumn);
-
-    if (!text) {
-      return;
-    }
+          var minY = gridY + _rowY + _rowHeight + 0.5 - headerHiddenSeparatorSize * 0.5;
+          context.rect(hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
+        }
 
-    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;
-    }
+        context.fill();
+      }
 
-    context.save();
-    context.beginPath();
-    context.rect(columnX, 0, columnWidth, columnHeaderHeight);
-    context.clip();
+      if (headerSeparatorHoverColor) {
+        var highlightedSeparator = draggingRowSeparator;
 
-    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;
+        if (highlightedSeparator == null) {
+          highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
+        }
 
-      var _y5 = columnHeaderHeight * 0.5;
+        if (highlightedSeparator != null) {
+          context.strokeStyle = headerSeparatorHoverColor;
 
-      context.textAlign = 'center';
-      context.fillText(text, _x6, _y5);
-    }
+          var _rowY2 = visibleRowYs.get(highlightedSeparator);
 
-    context.restore();
-  }
+          var _rowHeight2 = visibleRowHeights.get(highlightedSeparator);
 
-  drawRowHeaders(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      metrics,
-      theme,
-      draggingRowSeparator
-    } = state;
-    var {
-      gridY,
-      rowHeaderWidth,
-      height,
-      visibleRows,
-      visibleRowHeights,
-      visibleRowYs
-    } = metrics;
-
-    if (rowHeaderWidth <= 0) {
-      return;
-    }
+          var _y6 = gridY + _rowY2 + _rowHeight2 + 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;
+          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;
 
-      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
+          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.beginPath();
+          context.moveTo(0.5, _y6);
+          context.lineTo(rowHeaderWidth + 0.5, _y6);
+          context.stroke();
+        }
+      } // Fill in the text
 
-      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.rect(0, gridY, rowHeaderWidth, height);
+      context.clip();
+      context.fillStyle = headerColor;
+      context.textAlign = 'right';
 
-      for (var _i7 = 0; _i7 < hiddenRows.length; _i7 += 1) {
-        var _row4 = hiddenRows[_i7];
+      for (var _i8 = 0; _i8 < visibleRows.length; _i8 += 1) {
+        var _row5 = visibleRows[_i8];
 
-        var _rowY = visibleRowYs.get(_row4);
+        var _rowHeight3 = visibleRowHeights.get(_row5);
 
-        var _rowHeight = visibleRowHeights.get(_row4);
+        var _y7 = visibleRowYs.get(_row5) + gridY;
 
-        var minY = gridY + _rowY + _rowHeight + 0.5 - headerHiddenSeparatorSize * 0.5;
-        context.rect(hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
+        this.drawRowHeader(context, state, _row5, _y7, _rowHeight3);
       }
 
-      context.fill();
+      context.restore();
     }
-
-    if (headerSeparatorHoverColor) {
-      var highlightedSeparator = draggingRowSeparator;
-
-      if (highlightedSeparator == null) {
-        highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
+  }, {
+    key: "drawRowHeader",
+    value: function drawRowHeader(context, state, row, rowY, rowHeight) {
+      if (rowHeight <= 0) {
+        return;
       }
 
-      if (highlightedSeparator != null) {
-        context.strokeStyle = headerSeparatorHoverColor;
+      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;
+      }
 
-        var _rowY2 = visibleRowYs.get(highlightedSeparator);
+      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
 
-        var _rowHeight2 = visibleRowHeights.get(highlightedSeparator);
+      context.fillStyle = headerBackgroundColor;
+      context.fillRect(x, gridY, rowFooterWidth, height); // Draw the separators
 
-        var _y6 = gridY + _rowY2 + _rowHeight2 + 0.5;
+      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 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;
+        context.beginPath();
+        context.fillStyle = headerSeparatorColor;
 
-        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);
-        }
+        for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
+          var _row6 = hiddenRows[_i9];
 
-        context.beginPath();
-        context.moveTo(0.5, _y6);
-        context.lineTo(rowHeaderWidth + 0.5, _y6);
-        context.stroke();
-      }
-    } // Fill in the text
+          var _rowY3 = visibleRowYs.get(_row6);
 
+          var _rowHeight4 = visibleRowHeights.get(_row6);
 
-    context.beginPath();
-    context.rect(0, gridY, rowHeaderWidth, height);
-    context.clip();
-    context.fillStyle = headerColor;
-    context.textAlign = 'right';
+          var minY = gridY + _rowY3 + _rowHeight4 + 0.5 - headerHiddenSeparatorSize * 0.5;
+          context.rect(x + hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
+        }
 
-    for (var _i8 = 0; _i8 < visibleRows.length; _i8 += 1) {
-      var _row5 = visibleRows[_i8];
+        context.fill();
+      }
 
-      var _rowHeight3 = visibleRowHeights.get(_row5);
+      if (headerSeparatorHoverColor) {
+        var highlightedSeparator = draggingRowSeparator;
 
-      var _y7 = visibleRowYs.get(_row5) + gridY;
+        if (highlightedSeparator == null) {
+          highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
+        }
 
-      this.drawRowHeader(context, state, _row5, _y7, _rowHeight3);
-    }
+        if (highlightedSeparator != null) {
+          context.strokeStyle = headerSeparatorHoverColor;
 
-    context.restore();
-  }
+          var _rowY4 = visibleRowYs.get(highlightedSeparator);
 
-  drawRowHeader(context, state, row, rowY, rowHeight) {
-    if (rowHeight <= 0) {
-      return;
-    }
+          var _rowHeight5 = visibleRowHeights.get(highlightedSeparator);
 
-    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 _y8 = gridY + _rowY4 + _rowHeight5 + 0.5;
 
-  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;
-    }
+          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;
 
-    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;
+          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);
+          }
 
-      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);
+          context.beginPath();
+          context.moveTo(x + 0.5, _y8);
+          context.lineTo(x + rowFooterWidth + 0.5, _y8);
+          context.stroke();
         }
-      } // border left, interior to the headerWidth
-
+      } // Fill in the text
 
-      context.moveTo(x + 0.5, gridY);
-      context.lineTo(x + 0.5, height);
-      context.stroke(); // Draw the hidden column separators
 
       context.beginPath();
-      context.fillStyle = headerSeparatorColor;
+      context.rect(x, gridY, rowFooterWidth, height);
+      context.clip();
+      context.fillStyle = headerColor;
+      context.textAlign = 'left';
+      var textX = x + cellHorizontalPadding;
 
-      for (var _i9 = 0; _i9 < hiddenRows.length; _i9 += 1) {
-        var _row6 = hiddenRows[_i9];
+      for (var _i10 = 0; _i10 < visibleRows.length; _i10 += 1) {
+        var _row7 = visibleRows[_i10];
 
-        var _rowY3 = visibleRowYs.get(_row6);
+        var _rowHeight6 = visibleRowHeights.get(_row7);
 
-        var _rowHeight4 = visibleRowHeights.get(_row6);
+        if (_rowHeight6 > 0) {
+          var _rowY5 = visibleRowYs.get(_row7) + gridY;
 
-        var minY = gridY + _rowY3 + _rowHeight4 + 0.5 - headerHiddenSeparatorSize * 0.5;
-        context.rect(x + hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
+          var modelRow = modelRows.get(_row7);
+          var textY = _rowY5 + _rowHeight6 * 0.5;
+          context.fillText(model.textForRowFooter(modelRow), textX, textY);
+        }
       }
 
-      context.fill();
+      context.restore();
     }
-
-    if (headerSeparatorHoverColor) {
-      var highlightedSeparator = draggingRowSeparator;
-
-      if (highlightedSeparator == null) {
-        highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
+  }, {
+    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 (highlightedSeparator != null) {
-        context.strokeStyle = headerSeparatorHoverColor;
+      var isCursorVisible = model.isEditable && editingCell == null && draggingRow == null && draggingColumn == null && visibleColumnXs.has(column) && visibleRowYs.has(row);
 
-        var _rowY4 = visibleRowYs.get(highlightedSeparator);
-
-        var _rowHeight5 = visibleRowHeights.get(highlightedSeparator);
+      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 _y8 = gridY + _rowY4 + _rowHeight5 + 0.5;
 
-        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.beginPath();
 
-        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);
-        }
+      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
 
-        context.beginPath();
-        context.moveTo(x + 0.5, _y8);
-        context.lineTo(x + rowFooterWidth + 0.5, _y8);
+        context.strokeStyle = theme.selectionOutlineColor;
+        context.lineWidth = 1;
         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];
 
-      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);
+      if (isCursorVisible) {
+        context.restore();
+        this.drawActiveCell(context, state, column, row);
       }
     }
+  }, {
+    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;
+      }
 
-    context.restore();
-  }
-
-  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);
+      if (y <= 0) {
+        h += y - 1;
+        y = 1;
+      }
 
-    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();
+      var lineWidth = context.lineWidth;
       context.beginPath();
-      context.rect(0, 0, width, height);
-      context.rect(x, y, w, h);
-      context.clip('evenodd');
-    } // Draw selection ranges
-
+      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;
+      }
 
-    context.beginPath();
+      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;
+      context.save();
+      context.translate(gridX, 0); // First, we need to draw over the row stripes where the column is coming from
 
-    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.fillStyle = backgroundColor;
+      context.fillRect(x, 0, columnWidth, height);
+      context.translate(mouseX - x - gridX - draggingColumnOffset, gridY + reorderOffset); // Then draw the shadow of the moving column
 
-      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;
+      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
 
-        var _y9 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(visibleRowYs.get(startRow)) + 0.5, 0.5) : minY;
+      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
 
-        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.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;
+      }
 
+      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
 
-      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.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.clip();
-      context.strokeStyle = theme.selectionOutlineCasingColor;
-      context.lineWidth = 3;
-      context.stroke();
-      context.restore(); // draw the outerstroke border on top of the inner stroke
+      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.strokeStyle = theme.selectionOutlineColor;
-      context.lineWidth = 1;
-      context.stroke();
-    }
+      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
 
-    if (isCursorVisible) {
+      context.translate(-gridX, -gridY);
+      context.font = headerFont;
+      this.drawRowHeaders(context, state);
       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;
+      }
 
-  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;
-    }
+      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);
+      }
 
-    if (y <= 0) {
-      h += y - 1;
-      y = 1;
-    }
+      if (hasHorizontalBar) {
+        var x = scrollX;
+        var y = height - columnHeaderHeight - hScrollBarSize; // scrollbar casing
 
-    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 = scrollBarCasingColor;
+        context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar track
 
-  drawDraggingColumn(context, state) {
-    var {
-      draggingColumn,
-      draggingColumnOffset,
-      metrics,
-      mouseX,
-      theme
-    } = state;
-
-    if (draggingColumn == null) {
-      return;
-    }
+        context.fillStyle = isHorizontalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
+        context.fillRect(0, y + scrollBarCasingWidth, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar thumb
 
-    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();
-  }
+        if (isDraggingHorizontalScrollBar) {
+          context.fillStyle = scrollBarActiveColor;
+        } else if (isHorizontalBarHover) {
+          context.fillStyle = scrollBarHoverColor;
+        } else {
+          context.fillStyle = scrollBarColor;
+        }
 
-  drawDraggingRow(context, state) {
-    var {
-      draggingRow,
-      draggingRowOffset,
-      metrics,
-      mouseY,
-      theme
-    } = state;
-
-    if (draggingRow == null) {
-      return;
-    }
+        context.fillRect(x, y + scrollBarCasingWidth, handleWidth, hScrollBarSize - scrollBarCasingWidth);
+      }
 
-    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();
-  }
+      if (hasVerticalBar) {
+        var _x8 = width - rowHeaderWidth - vScrollBarSize;
 
-  drawScrollBars(context, state) {
-    var {
-      isDraggingHorizontalScrollBar,
-      isDraggingVerticalScrollBar,
-      isDragging,
-      metrics,
-      mouseX,
-      mouseY,
-      theme
-    } = state;
-
-    if (theme.scrollBarSize <= 0) {
-      return;
-    }
+        var _y10 = scrollY; // scrollbar casing
 
-    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 || !isDraggingHorizontalScrollBar && !isDragging && mouseX >= width - scrollBarHoverSize && mouseY <= barHeight + columnHeaderHeight && isInbounds;
-    var isHorizontalBarHover = isDraggingHorizontalScrollBar || !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 = scrollBarCasingColor;
+        context.fillRect(_x8, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
 
-    if (hasHorizontalBar) {
-      var x = scrollX;
-      var y = height - columnHeaderHeight - hScrollBarSize; // scrollbar casing
+        context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
+        context.fillRect(_x8 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
 
-      context.fillStyle = scrollBarCasingColor;
-      context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar track
+        if (isDraggingVerticalScrollBar) {
+          context.fillStyle = scrollBarActiveColor;
+        } else if (isVerticalBarHover) {
+          context.fillStyle = scrollBarHoverColor;
+        } else {
+          context.fillStyle = scrollBarColor;
+        }
 
-      context.fillStyle = isHorizontalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-      context.fillRect(0, y + scrollBarCasingWidth, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar thumb
+        context.fillRect(_x8 + scrollBarCasingWidth, _y10, vScrollBarSize - scrollBarCasingWidth, handleHeight);
+      }
 
-      if (isDraggingHorizontalScrollBar) {
-        context.fillStyle = scrollBarActiveColor;
-      } else if (isHorizontalBarHover) {
-        context.fillStyle = scrollBarHoverColor;
-      } else {
-        context.fillStyle = scrollBarColor;
+      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) + '…';
       }
 
-      context.fillRect(x, y + scrollBarCasingWidth, handleWidth, hScrollBarSize - scrollBarCasingWidth);
+      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
+     */
+
+  }, {
+    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;
+      }
 
-    if (hasVerticalBar) {
-      var _x8 = width - rowHeaderWidth - vScrollBarSize;
+      var lo = start;
+      var hi = Math.min(str.length - 1, end);
+      var result = str;
 
-      var _y10 = scrollY; // scrollbar casing
+      while (hi > lo) {
+        var mid = Math.ceil((hi + lo) / 2);
+        var truncatedStr = GridRenderer.truncate(str, mid);
 
-      context.fillStyle = scrollBarCasingColor;
-      context.fillRect(_x8, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
+        if (context.measureText(truncatedStr).width <= width) {
+          result = truncatedStr;
 
-      context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-      context.fillRect(_x8 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
+          if (lo === mid) {
+            break;
+          }
 
-      if (isDraggingVerticalScrollBar) {
-        context.fillStyle = scrollBarActiveColor;
-      } else if (isVerticalBarHover) {
-        context.fillStyle = scrollBarHoverColor;
-      } else {
-        context.fillStyle = scrollBarColor;
+          lo = mid;
+        } else {
+          hi = mid - 1;
+        }
       }
 
-      context.fillRect(_x8 + scrollBarCasingWidth, _y10, vScrollBarSize - scrollBarCasingWidth, handleHeight);
-    }
+      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;
+      }
 
-    context.translate(-rowHeaderWidth, -columnHeaderHeight);
-  }
+      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);
+    }
+  }]);
 
-}
+  return GridRenderer;
+}();
 
 _defineProperty(GridRenderer, "DEFAULT_FONT_WIDTH", 10);