@deephaven/grid 0.43.0 → 0.44.0

package/dist/GridRenderer.js

@@ -0,0 +1,2038 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import clamp from 'lodash.clamp';
+import { ColorUtils, getOrThrow } from '@deephaven/utils';
+import memoizeClear from "./memoizeClear.js";
+import GridUtils from "./GridUtils.js";
+import GridColorUtils from "./GridColorUtils.js";
+import { isExpandableGridModel } from "./ExpandableGridModel.js";
+import { isEditableGridModel } from "./EditableGridModel.js";
+import GridColumnSeparatorMouseHandler from "./mouse-handlers/GridColumnSeparatorMouseHandler.js";
+import { DEFAULT_FONT_WIDTH } from "./GridRendererTypes.js";
+import DataBarCellRenderer from "./DataBarCellRenderer.js";
+import TextCellRenderer from "./TextCellRenderer.js";
+/* eslint react/destructuring-assignment: "off" */
+/* eslint class-methods-use-this: "off" */
+/* eslint no-param-reassign: "off" */
+/**
+ * A GridRenderer handles rendering the different parts of the grid
+ * This default rendering just renders a basic grid. Extend this class and implement
+ * your own methods to customize drawing of the grid (eg. Draw icons or special features)
+ */
+export class GridRenderer {
+  constructor() {
+    _defineProperty(this, "textCellRenderer", new TextCellRenderer());
+    _defineProperty(this, "dataBarCellRenderer", new DataBarCellRenderer());
+    _defineProperty(this, "getCachedBackgroundColors", memoizeClear((backgroundColors, maxDepth) => backgroundColors.split(' ').map(color => {
+      var colors = [];
+      for (var i = 0; i < maxDepth; i += 1) {
+        colors.push(GridColorUtils.darkenForDepth(color, i, maxDepth));
+      }
+      return colors;
+    }), {
+      max: 1000
+    }));
+    _defineProperty(this, "getCachedColorWithAlpha", memoizeClear((color, alpha) => GridColorUtils.colorWithAlpha(color, alpha), {
+      max: 1000
+    }));
+    _defineProperty(this, "getCachedColorIsDark", memoizeClear(color => ColorUtils.isDark(color), {
+      max: 1000
+    }));
+  }
+  /**
+   * Truncate a string to the specified length and add ellipses if necessary
+   * @param str The string to truncate
+   * @param len The length to truncate the string to. If longer than the actual string, just returns the string
+   * @returns The truncated 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 The drawing context to measure the text in
+   * @param str The string to get the maximum length it can draw
+   * @param width The width to truncate it to
+   * @param start The low boundary to start the search
+   * @param end The high boundary to start the search
+   * @param truncationChar This char will be repeated as the display string if the string is truncated instead of just adding an ellipsis
+   * @returns The truncated string
+   */
+  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;
+    var truncationChar = arguments.length > 5 ? arguments[5] : undefined;
+    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 (truncationChar !== undefined) {
+      var charWidth = context.measureText(truncationChar).width;
+      return truncationChar.repeat(Math.max(1, Math.floor(width / charWidth)));
+    }
+    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 if (mid === 0) {
+        // We already truncated to zero chars and it still doesn't fit, no need to keep looking
+        result = truncatedStr;
+        break;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Truncate a string (if necessary) to fit in the specified width.
+   * First uses the estimated font width to calculate a lower/upper bound
+   * Then uses binary search within those bounds to find the exact max length
+   * @param context The drawing context
+   * @param str The string to calculate max length for
+   * @param width The width to truncate within
+   * @param fontWidth The estimated width of each character
+   * @param truncationChar This char will be repeated as the display string if the string is truncated instead of just adding an ellipsis
+   * @returns The truncated string that fits within the width provided
+   */
+  static truncateToWidth(context, str, width) {
+    var fontWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_FONT_WIDTH;
+    var truncationChar = arguments.length > 4 ? arguments[4] : undefined;
+    if (width <= 0 || str.length <= 0) {
+      return '';
+    }
+
+    // Estimate the possible low and high boundaries for truncating the text
+    // Use the width of the space divided by the estimated width of each character,
+    // and take half that as the low (minus 5 just to be extra safe), and double that as the high.
+    var lo = Math.min(Math.max(0, Math.floor(width / fontWidth / 2) - 5), str.length);
+    var hi = Math.min(Math.ceil(width / fontWidth * 2), str.length);
+    return GridRenderer.binaryTruncateToWidth(context, str, width, lo, hi, truncationChar);
+  }
+
+  /**
+   * Draw the grid canvas with the state provided
+   * @param state The state of the grid
+   */
+  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';
+  }
+  drawBackground(context, state) {
+    var {
+      theme,
+      metrics
+    } = state;
+    var {
+      width,
+      height
+    } = metrics;
+    context.fillStyle = theme.backgroundColor;
+    context.fillRect(0, 0, width, height);
+  }
+  drawGrid(context, state) {
+    var {
+      metrics,
+      draggingRow,
+      draggingColumn
+    } = state;
+    var {
+      gridX,
+      gridY
+    } = metrics;
+    context.translate(gridX, gridY);
+    this.drawGridBackground(context, state, draggingRow == null && draggingColumn == null);
+    this.drawCellContents(context, state);
+    this.drawFloatingRows(context, state);
+    this.drawFloatingColumns(context, state);
+    context.translate(-gridX, -gridY);
+  }
+  drawFloatingRows(context, state) {
+    var {
+      draggingRow,
+      draggingColumn,
+      metrics,
+      theme
+    } = state;
+    var {
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      floatingRows,
+      rowCount,
+      visibleColumns,
+      allRowYs,
+      allRowHeights
+    } = metrics;
+    if (floatingRows.length === 0) {
+      return;
+    }
+    if (theme.floatingRowBackgroundColors) {
+      this.drawRowStripesForRows(context, state, floatingRows, theme.floatingRowBackgroundColors);
+    }
+    if (draggingRow == null && draggingColumn == null) {
+      this.drawFloatingMouseRowHover(context, state);
+    }
+    this.drawGridLinesForItems(context, state, visibleColumns, floatingRows, theme.floatingGridColumnColor, theme.floatingGridRowColor);
+    this.drawCellBackgroundsForItems(context, state, visibleColumns, floatingRows);
+    this.drawFloatingBorders(context, state);
+
+    // Draw the floating row selection...
+    if (floatingTopRowCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        top: 0,
+        bottom: floatingTopRowCount - 1,
+        maxY: getOrThrow(allRowYs, floatingTopRowCount - 1) + getOrThrow(allRowHeights, floatingTopRowCount - 1) - 0.5
+      });
+    }
+    if (floatingBottomRowCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        top: rowCount - floatingBottomRowCount - 1,
+        bottom: rowCount - 1,
+        minY: getOrThrow(allRowYs, rowCount - floatingBottomRowCount) + 0.5,
+        maxY: getOrThrow(allRowYs, rowCount - 1) + getOrThrow(allRowHeights, rowCount - 1) - 0.5
+      });
+    }
+
+    // Draw the cell content...
+    for (var c = 0; c < visibleColumns.length; c += 1) {
+      var column = visibleColumns[c];
+      for (var r = 0; r < floatingRows.length; r += 1) {
+        var row = floatingRows[r];
+        this.drawCellContent(context, state, column, row);
+      }
+    }
+  }
+  drawFloatingColumns(context, state) {
+    var {
+      draggingRow,
+      draggingColumn,
+      metrics,
+      theme
+    } = state;
+    var {
+      floatingLeftColumnCount,
+      floatingRightColumnCount,
+      floatingLeftWidth,
+      floatingRightWidth,
+      floatingColumns,
+      gridX,
+      maxX,
+      columnCount,
+      visibleRows,
+      allColumnXs,
+      allColumnWidths,
+      width,
+      height
+    } = 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 (draggingRow == null && draggingColumn == null) {
+      this.drawFloatingMouseRowHover(context, state);
+    }
+
+    // Clip floated column grid lines.
+    context.save();
+    context.beginPath();
+    context.rect(0, 0, floatingLeftWidth, height);
+    context.clip();
+    this.drawGridLinesForItems(context, state, floatingColumns, visibleRows, theme.floatingGridColumnColor, theme.floatingGridRowColor);
+    context.restore();
+    this.drawCellBackgroundsForItems(context, state, floatingColumns, visibleRows);
+    this.drawFloatingBorders(context, state);
+
+    // Draw the floating column selection...
+    if (floatingLeftColumnCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        left: 0,
+        maxX: getOrThrow(allColumnXs, floatingLeftColumnCount - 1) + getOrThrow(allColumnWidths, floatingLeftColumnCount - 1)
+      });
+    }
+    if (floatingRightColumnCount > 0) {
+      this.drawSelectedRanges(context, state, {
+        left: columnCount - floatingRightColumnCount,
+        right: columnCount - 1,
+        minX: getOrThrow(allColumnXs, columnCount - floatingRightColumnCount) + 0.5,
+        maxX: getOrThrow(allColumnXs, columnCount - 1) + getOrThrow(allColumnWidths, columnCount - 1)
+      });
+    }
+
+    // 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);
+      }
+    }
+  }
+  drawFloatingBorders(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount,
+      rowCount,
+      columnCount,
+      allRowYs,
+      allColumnXs,
+      allRowHeights,
+      allColumnWidths,
+      maxX,
+      maxY
+    } = metrics;
+    var {
+      floatingDividerOuterColor,
+      floatingDividerInnerColor
+    } = theme;
+    context.lineWidth = 3;
+    context.beginPath();
+    context.strokeStyle = floatingDividerOuterColor;
+    if (floatingTopRowCount > 0) {
+      var y = getOrThrow(allRowYs, floatingTopRowCount - 1) + getOrThrow(allRowHeights, floatingTopRowCount - 1) + 0.5;
+      context.moveTo(0, y);
+      context.lineTo(maxX, y);
+    }
+    if (floatingBottomRowCount > 0) {
+      var _y = getOrThrow(allRowYs, rowCount - floatingBottomRowCount) - 0.5;
+      context.moveTo(0, _y);
+      context.lineTo(maxX, _y);
+    }
+    if (floatingLeftColumnCount > 0) {
+      var x = getOrThrow(allColumnXs, floatingLeftColumnCount - 1) + getOrThrow(allColumnWidths, floatingLeftColumnCount - 1) + 0.5;
+      context.moveTo(x, 0);
+      context.lineTo(x, maxY);
+    }
+    if (floatingRightColumnCount > 0) {
+      var _x = getOrThrow(allColumnXs, columnCount - floatingRightColumnCount) - 0.5;
+      context.moveTo(_x, 0);
+      context.lineTo(_x, maxY);
+    }
+    context.stroke();
+    context.beginPath();
+    context.lineWidth = 1;
+    context.strokeStyle = floatingDividerInnerColor;
+    if (floatingTopRowCount > 0) {
+      var _y2 = getOrThrow(allRowYs, floatingTopRowCount - 1) + getOrThrow(allRowHeights, floatingTopRowCount - 1) + 0.5;
+      context.moveTo(0, _y2);
+      context.lineTo(maxX, _y2);
+    }
+    if (floatingBottomRowCount > 0) {
+      var _y3 = getOrThrow(allRowYs, rowCount - floatingBottomRowCount) - 0.5;
+      context.moveTo(0, _y3);
+      context.lineTo(maxX, _y3);
+    }
+    if (floatingLeftColumnCount > 0) {
+      var _x2 = getOrThrow(allColumnXs, floatingLeftColumnCount - 1) + getOrThrow(allColumnWidths, floatingLeftColumnCount - 1) + 0.5;
+      context.moveTo(_x2, 0);
+      context.lineTo(_x2, maxY);
+    }
+    if (floatingRightColumnCount > 0) {
+      var _x3 = getOrThrow(allColumnXs, columnCount - floatingRightColumnCount) - 0.5;
+      context.moveTo(_x3, 0);
+      context.lineTo(_x3, maxY);
+    }
+    context.stroke();
+  }
+  drawGridBackground(context, state) {
+    var drawHover = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    this.drawRowStripes(context, state);
+    if (drawHover) {
+      this.drawMouseColumnHover(context, state);
+      this.drawMouseRowHover(context, state);
+    }
+    this.drawGridLines(context, state);
+    this.drawCellBackgrounds(context, state);
+    var {
+      metrics
+    } = state;
+    var {
+      bottom,
+      right,
+      floatingBottomRowCount,
+      floatingLeftColumnCount,
+      floatingRightColumnCount,
+      floatingTopRowCount,
+      columnCount,
+      rowCount,
+      allRowHeights,
+      allRowYs,
+      allColumnXs,
+      allColumnWidths,
+      width,
+      height
+    } = metrics;
+    this.drawSelectedRanges(context, state, {
+      bottom: Math.min(bottom, rowCount - floatingBottomRowCount - 1),
+      right: Math.min(right, columnCount - floatingRightColumnCount - 1),
+      minX: floatingLeftColumnCount > 0 && allColumnXs.has(floatingLeftColumnCount + 1) ? getOrThrow(allColumnXs, floatingLeftColumnCount + 1) : -10,
+      minY: floatingTopRowCount > 0 && allRowYs.has(floatingTopRowCount + 1) ? getOrThrow(allRowYs, floatingTopRowCount + 1) : -10,
+      maxX: floatingRightColumnCount > 0 && allColumnXs.has(columnCount - floatingRightColumnCount - 1) ? getOrThrow(allColumnXs, columnCount - floatingRightColumnCount - 1) + getOrThrow(allColumnWidths, columnCount - floatingRightColumnCount - 1) - 0.5 : width + 10,
+      maxY: floatingBottomRowCount > 0 && allRowYs.has(rowCount - floatingBottomRowCount - 1) ? getOrThrow(allRowYs, rowCount - floatingBottomRowCount - 1) + getOrThrow(allRowHeights, rowCount - floatingBottomRowCount - 1) - 0.5 : height + 10
+    });
+  }
+  drawRowStripes(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      visibleRows
+    } = metrics;
+    var {
+      rowBackgroundColors
+    } = theme;
+    if (!rowBackgroundColors) {
+      return;
+    }
+    this.drawRowStripesForRows(context, state, visibleRows, rowBackgroundColors);
+  }
+  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 {
+      allRowYs,
+      allRowHeights
+    } = 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 = isExpandableGridModel(model) ? model.depthForRow(row) : 0;
+      var colorSet = colorSets[row % colorSets.length];
+      var color = colorSet[Math.min(depth, colorSet.length - 1)];
+      if (!colorRowMap.has(color)) {
+        colorRowMap.set(color, []);
+      }
+      colorRowMap.get(color).push(row);
+      if (rowAbove != null) {
+        var depthAbove = isExpandableGridModel(model) ? model.depthForRow(rowAbove) : 0;
+        if (depthAbove < depth) {
+          topShadowRows.push(row);
+        } else if (depthAbove > depth) {
+          bottomShadowRows.push(rowAbove);
+        }
+      }
+    };
+
+    // 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] : undefined;
+      addRowToColorMap(row, rowAbove);
+    }
+    colorRowMap.forEach((colorRows, color) => {
+      context.fillStyle = color;
+      context.beginPath();
+      for (var _i = 0; _i < colorRows.length; _i += 1) {
+        var _row = colorRows[_i];
+        var y = getOrThrow(allRowYs, _row);
+        var rowHeight = getOrThrow(allRowHeights, _row);
+        context.rect(minX, y, maxX, rowHeight);
+      }
+      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 = getOrThrow(allRowYs, _row2);
+        // Use a translate so we can reuse the gradient
+        context.translate(0, y);
+        context.fillRect(minX, 0, maxX, shadowBlur);
+        context.translate(0, -y);
+      }
+      context.restore();
+    }
+    if (bottomShadowRows.length > 0) {
+      context.save();
+      var _startColor = this.getCachedColorWithAlpha(shadowColor, 0);
+      var _endColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
+      var _gradient = context.createLinearGradient(0, 0, 0, shadowBlur);
+      _gradient.addColorStop(0, _startColor);
+      _gradient.addColorStop(1, _endColor);
+      context.fillStyle = _gradient;
+      for (var _i3 = 0; _i3 < bottomShadowRows.length; _i3 += 1) {
+        var _row3 = bottomShadowRows[_i3];
+        var _y4 = getOrThrow(allRowYs, _row3);
+        var rowHeight = getOrThrow(allRowHeights, _row3);
+        var gradientY = _y4 + rowHeight - shadowBlur;
+        // Use a translate so we can reuse the gradient
+        context.translate(0, gradientY);
+        context.fillRect(minX, 0, maxX, shadowBlur);
+        context.translate(0, -gradientY);
+      }
+      context.restore();
+    }
+  }
+  drawMouseColumnHover(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics
+    } = state;
+    if (mouseX == null || mouseY == null) return;
+    var mouseColumn = GridUtils.getColumnAtX(mouseX, metrics);
+    if (mouseColumn == null || theme.columnHoverBackgroundColor == null) {
+      return;
+    }
+    var {
+      allColumnWidths,
+      allColumnXs,
+      maxY
+    } = metrics;
+    if (mouseY > maxY) {
+      return;
+    }
+    var x = getOrThrow(allColumnXs, mouseColumn);
+    var columnWidth = getOrThrow(allColumnWidths, mouseColumn);
+    context.fillStyle = theme.columnHoverBackgroundColor;
+    context.fillRect(x, 0, columnWidth, maxY);
+  }
+  drawMouseRowHover(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics
+    } = state;
+    if (mouseX == null || mouseY == null) return;
+    var {
+      maxX
+    } = metrics;
+    if (mouseX > maxX || theme.rowHoverBackgroundColor == null) {
+      return;
+    }
+    var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
+    if (mouseRow == null) {
+      return;
+    }
+    this.drawMouseRowHoverForRow(context, state, mouseRow);
+  }
+  drawFloatingMouseRowHover(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics
+    } = state;
+    var {
+      maxX,
+      floatingTopRowCount,
+      floatingBottomRowCount,
+      rowCount,
+      rowFooterWidth
+    } = metrics;
+    if (mouseX == null || mouseY == null || mouseX > maxX + rowFooterWidth || theme.rowHoverBackgroundColor == null) {
+      return;
+    }
+    var mouseRow = GridUtils.getRowAtY(mouseY, metrics);
+    if (mouseRow != null && (mouseRow < floatingTopRowCount || rowCount - floatingBottomRowCount <= mouseRow)) {
+      this.drawMouseRowHoverForRow(context, state, mouseRow);
+    }
+  }
+  drawMouseRowHoverForRow(context, state, row) {
+    var {
+      metrics,
+      selectedRanges,
+      theme
+    } = state;
+    var {
+      allRowHeights,
+      allRowYs,
+      maxX
+    } = metrics;
+    var y = getOrThrow(allRowYs, row);
+    var rowHeight = getOrThrow(allRowHeights, row);
+    if (theme.rowHoverBackgroundColor != null) {
+      context.fillStyle = theme.rowHoverBackgroundColor;
+    }
+    for (var i = 0; i < selectedRanges.length; i += 1) {
+      var {
+        startRow,
+        endRow
+      } = selectedRanges[i];
+      if (startRow != null && endRow != null && startRow <= row && endRow >= row) {
+        if (theme.selectedRowHoverBackgroundColor != null) {
+          context.fillStyle = theme.selectedRowHoverBackgroundColor;
+        }
+        break;
+      }
+    }
+    context.fillRect(0, y, maxX, rowHeight);
+  }
+  drawGridLines(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      visibleColumns,
+      visibleRows
+    } = metrics;
+    this.drawGridLinesForItems(context, state, visibleColumns, visibleRows, theme.gridColumnColor, theme.gridRowColor);
+  }
+  drawGridLinesForItems(context, state, columns, rows, columnColor, rowColor) {
+    if (columnColor == null && rowColor == null) {
+      return;
+    }
+    context.lineWidth = 1;
+    context.beginPath();
+    if (columnColor != null) {
+      context.strokeStyle = columnColor;
+      this.drawGridLinesForColumns(context, state, columns);
+    }
+    if (rowColor != null) {
+      context.strokeStyle = rowColor;
+      this.drawGridLinesForRows(context, state, rows);
+    }
+    context.stroke();
+  }
+  drawGridLinesForColumns(context, state, columns) {
+    var {
+      metrics
+    } = state;
+    var {
+      allColumnXs,
+      maxY
+    } = metrics;
+    for (var i = 0; i < columns.length; i += 1) {
+      var column = columns[i];
+      var x = getOrThrow(allColumnXs, column) + 0.5;
+      context.moveTo(x, 0);
+      context.lineTo(x, maxY);
+    }
+  }
+  drawGridLinesForRows(context, state, rows) {
+    var {
+      metrics
+    } = state;
+    var {
+      allRowYs,
+      maxX: metricsMaxX
+    } = metrics;
+    var maxX = metricsMaxX;
+
+    // Draw row lines
+    for (var i = 0; i < rows.length; i += 1) {
+      var row = rows[i];
+      var y = getOrThrow(allRowYs, row) + 0.5;
+      context.moveTo(0.5, y);
+      context.lineTo(maxX - 0.5, y);
+    }
+  }
+  drawCellBackgrounds(context, state) {
+    var {
+      metrics
+    } = state;
+    var {
+      visibleColumns,
+      visibleRows
+    } = metrics;
+    this.drawCellBackgroundsForItems(context, state, visibleColumns, visibleRows);
+  }
+  drawCellBackgroundsForItems(context, state, columns, rows) {
+    context.save();
+    for (var i = 0; i < columns.length; i += 1) {
+      var column = columns[i];
+      for (var j = 0; j < rows.length; j += 1) {
+        var row = rows[j];
+        var rowAfter = j + 1 < rows.length ? rows[j + 1] : undefined;
+        this.drawCellBackground(context, state, column, row, rowAfter);
+      }
+    }
+    context.restore();
+  }
+  drawCellBackground(context, state, column, row, rowAfter) {
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      firstColumn,
+      modelColumns,
+      modelRows,
+      allColumnXs,
+      allColumnWidths,
+      allRowYs,
+      allRowHeights
+    } = metrics;
+    var modelRow = getOrThrow(modelRows, row);
+    var modelColumn = getOrThrow(modelColumns, column);
+    var backgroundColor = model.backgroundColorForCell(modelColumn, modelRow, theme);
+    var isFirstColumn = column === firstColumn;
+    var hasExpandableRows = isExpandableGridModel(model) && model.hasExpandableRows;
+    if (backgroundColor != null) {
+      var x = getOrThrow(allColumnXs, column) + 1;
+      var y = getOrThrow(allRowYs, row) + 1;
+      var columnWidth = getOrThrow(allColumnWidths, column) - 1;
+      var rowHeight = getOrThrow(allRowHeights, row) - 1;
+      context.fillStyle = backgroundColor;
+      context.fillRect(x, y, columnWidth, rowHeight);
+    }
+    if (isFirstColumn && hasExpandableRows) {
+      this.drawCellRowTreeDepthLines(context, state, row, rowAfter);
+    }
+  }
+  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);
+    }
+  }
+  drawColumnCellContents(context, state, column) {
+    var {
+      metrics
+    } = state;
+    var {
+      allColumnXs,
+      allColumnWidths,
+      visibleRows,
+      height
+    } = metrics;
+    var x = getOrThrow(allColumnXs, column);
+    var columnWidth = getOrThrow(allColumnWidths, 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);
+    }
+    context.restore();
+  }
+  drawCellContent(context, state, column, row) {
+    var {
+      metrics,
+      model
+    } = state;
+    var {
+      modelColumns,
+      modelRows
+    } = metrics;
+    var modelRow = getOrThrow(modelRows, row);
+    var modelColumn = getOrThrow(modelColumns, column);
+    var renderType = model.renderTypeForCell(modelColumn, modelRow);
+    var cellRenderer = this.getCellRenderer(renderType);
+    cellRenderer.drawCellContent(context, state, column, row);
+  }
+  getCellRenderer(renderType) {
+    switch (renderType) {
+      case 'dataBar':
+        return this.dataBarCellRenderer;
+      default:
+        return this.textCellRenderer;
+    }
+  }
+  drawCellRowTreeDepthLines(context, state, row, rowAfter) {
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    if (!isExpandableGridModel(model)) return;
+    var depth = model.depthForRow(row);
+    if (depth === 0) return;
+    var {
+      firstColumn,
+      allColumnXs,
+      allRowYs,
+      allRowHeights
+    } = metrics;
+    var {
+      treeDepthIndent,
+      treeHorizontalPadding,
+      treeLineColor
+    } = theme;
+    var columnX = getOrThrow(allColumnXs, firstColumn);
+    var rowY = getOrThrow(allRowYs, row);
+    var rowHeight = getOrThrow(allRowHeights, row);
+    var depthRowAfter = rowAfter !== undefined ? model.depthForRow(rowAfter) : 0;
+    var depthDiff = depth > depthRowAfter ? depth - depthRowAfter : 0;
+    context.strokeStyle = treeLineColor;
+    context.lineWidth = 1;
+
+    // draw normal depth lines
+    if (depth - depthDiff > 0) {
+      context.beginPath();
+      for (var i = 0; i < depth - depthDiff; i += 1) {
+        var lineX = columnX + i * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
+        context.moveTo(lineX, rowY);
+        context.lineTo(lineX, rowY + rowHeight);
+      }
+      context.stroke();
+    }
+
+    // draw as hockey stick if last row at depth
+    if (depthDiff > 0) {
+      context.beginPath();
+      for (var _i4 = depth - depthDiff; _i4 < depth; _i4 += 1) {
+        var _lineX = columnX + _i4 * treeDepthIndent + treeDepthIndent * 0.5 + treeHorizontalPadding + 0.5;
+        context.moveTo(_lineX, rowY);
+        context.lineTo(_lineX, rowY + Math.ceil(rowHeight / 2));
+        // extra moveTo prevents halfpixel in corner
+        context.moveTo(_lineX - 0.5, rowY + Math.ceil(rowHeight / 2) + 0.5);
+        context.lineTo(_lineX + treeDepthIndent - 0.5, rowY + Math.ceil(rowHeight / 2) + 0.5);
+      }
+      context.stroke();
+    }
+  }
+  drawHeaders(context, state) {
+    var {
+      theme
+    } = state;
+    context.font = theme.headerFont;
+    this.drawColumnHeaders(context, state);
+    this.drawRowHeaders(context, state);
+  }
+  drawFooters(context, state) {
+    var {
+      theme
+    } = state;
+    context.font = theme.headerFont;
+    this.drawRowFooters(context, state);
+  }
+  drawColumnHeaders(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      theme,
+      metrics,
+      draggingColumnSeparator,
+      isDragging,
+      model
+    } = state;
+    var {
+      columnHeaderHeight,
+      floatingColumns,
+      gridX,
+      width,
+      visibleColumns,
+      allColumnWidths,
+      allColumnXs,
+      floatingLeftColumnCount,
+      floatingLeftWidth,
+      floatingRightWidth,
+      modelColumns,
+      columnHeaderMaxDepth
+    } = metrics;
+    if (columnHeaderHeight <= 0) {
+      return;
+    }
+    var {
+      headerHiddenSeparatorSize,
+      headerHiddenSeparatorHoverColor,
+      headerSeparatorColor,
+      headerSeparatorHoverColor
+    } = theme;
+    var hiddenSeparatorHeight = columnHeaderHeight * 0.5;
+    var hiddenY = columnHeaderHeight * (columnHeaderMaxDepth - 1) + columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
+    var containsFrozenColumns = floatingLeftColumnCount > 0;
+    context.save();
+    this.drawColumnHeadersForRange(context, state, [visibleColumns[0], visibleColumns[visibleColumns.length - 1]], {
+      minX: gridX + floatingLeftWidth,
+      maxX: width - floatingRightWidth
+    });
+    if (containsFrozenColumns) {
+      this.drawColumnHeadersForRange(context, state, [floatingColumns[0], floatingColumns[floatingColumns.length - 1]], {
+        minX: gridX,
+        maxX: gridX + floatingLeftWidth
+      });
+    }
+    if (headerSeparatorColor) {
+      context.strokeStyle = headerSeparatorColor;
+      var hiddenColumns = [...allColumnWidths.entries()].filter(_ref => {
+        var [_, w] = _ref;
+        return w === 0;
+      }).map(_ref2 => {
+        var [index] = _ref2;
+        return index;
+      });
+
+      // Now draw the hidden column separator boxes
+      context.beginPath();
+      context.fillStyle = headerSeparatorColor;
+      for (var i = 0; i < hiddenColumns.length; i += 1) {
+        var column = hiddenColumns[i];
+        var columnX = getOrThrow(allColumnXs, column);
+        var columnWidth = getOrThrow(allColumnWidths, column);
+        var minX = gridX + columnX + columnWidth + 0.5 - headerHiddenSeparatorSize * 0.5;
+        context.rect(minX, hiddenY, headerHiddenSeparatorSize, hiddenSeparatorHeight);
+      }
+      context.fill();
+    }
+    if (headerSeparatorHoverColor) {
+      var {
+        index: highlightedSeparator,
+        depth
+      } = draggingColumnSeparator !== null && draggingColumnSeparator !== void 0 ? draggingColumnSeparator : {};
+      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
+        var separator = GridColumnSeparatorMouseHandler.getColumnSeparator(GridUtils.getGridPointFromXY(mouseX, mouseY, metrics), metrics, model, theme);
+        highlightedSeparator = separator === null || separator === void 0 ? void 0 : separator.index;
+        depth = separator === null || separator === void 0 ? void 0 : separator.depth;
+      }
+      var shouldDrawSeparator;
+      if (highlightedSeparator == null) {
+        shouldDrawSeparator = false;
+      } else {
+        var columnIndex = modelColumns.get(highlightedSeparator);
+        var nextColumnIndex = modelColumns.get(highlightedSeparator + 1);
+        if (columnIndex == null || nextColumnIndex == null) {
+          shouldDrawSeparator = false;
+        } else {
+          shouldDrawSeparator = model.textForColumnHeader(columnIndex, depth) !== model.textForColumnHeader(nextColumnIndex, depth);
+        }
+      }
+      if (shouldDrawSeparator && highlightedSeparator != null && depth != null && (!isDragging || draggingColumnSeparator != null)) {
+        context.strokeStyle = headerSeparatorHoverColor;
+        var _columnX = getOrThrow(allColumnXs, highlightedSeparator);
+        var _columnWidth = getOrThrow(allColumnWidths, highlightedSeparator);
+        var x = gridX + _columnX + _columnWidth + 0.5;
+        var visibleColumnIndex = visibleColumns.indexOf(highlightedSeparator);
+        var nextColumn = visibleColumnIndex < visibleColumns.length - 1 ? visibleColumns[visibleColumnIndex + 1] : null;
+        var nextColumnWidth = nextColumn != null ? allColumnWidths.get(nextColumn) : null;
+        var isColumnHidden = _columnWidth === 0;
+        var isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
+        if (isColumnHidden) {
+          context.strokeStyle = headerHiddenSeparatorHoverColor;
+          context.fillStyle = headerHiddenSeparatorHoverColor;
+          context.fillRect(x, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
+        } else if (isNextColumnHidden) {
+          context.fillStyle = headerSeparatorHoverColor;
+          context.fillRect(x - headerHiddenSeparatorSize * 0.5, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
+        }
+
+        // column seperator hover line
+        context.beginPath();
+        context.moveTo(x, (columnHeaderMaxDepth - depth - 1) * columnHeaderHeight);
+        context.lineTo(x, (columnHeaderMaxDepth - depth) * columnHeaderHeight - 1);
+        context.stroke();
+      }
+    }
+    context.restore();
+  }
+  drawColumnHeadersForRange(context, state, range, bounds) {
+    var {
+      model
+    } = state;
+    var {
+      columnHeaderMaxDepth
+    } = model;
+    if (columnHeaderMaxDepth === 0) {
+      return;
+    }
+    for (var d = 0; d <= columnHeaderMaxDepth; d += 1) {
+      this.drawColumnHeadersAtDepth(context, state, range, bounds, d);
+    }
+  }
+  drawColumnHeadersAtDepth(context, state, range, bounds, depth) {
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      modelColumns,
+      allColumnXs,
+      gridX,
+      userColumnWidths,
+      allColumnWidths,
+      movedColumns
+    } = metrics;
+    var {
+      columnHeaderHeight,
+      columnWidth
+    } = theme;
+    var {
+      columnHeaderMaxDepth
+    } = model;
+    var {
+      minX,
+      maxX
+    } = bounds;
+    var visibleWidth = maxX - minX;
+    if (columnHeaderMaxDepth === 0) {
+      return;
+    }
+    var startIndex = range[0];
+    var endIndex = range[1];
+    context.save();
+    context.translate(0, (columnHeaderMaxDepth - depth - 1) * columnHeaderHeight);
+    if (depth === 0) {
+      // Make sure base column header background always goes to the right edge
+      this.drawColumnHeader(context, state, '', minX, maxX);
+
+      // Draw base column headers
+      for (var i = startIndex; i <= endIndex; i += 1) {
+        this.drawColumnHeaderAtIndex(context, state, i, bounds);
+      }
+    }
+
+    // Draw column header group
+    if (depth > 0) {
+      var columnIndex = startIndex;
+      while (columnIndex <= endIndex) {
+        var {
+          columnCount
+        } = metrics;
+        var modelColumn = getOrThrow(modelColumns, columnIndex);
+        var columnGroupName = model.textForColumnHeader(modelColumn, depth);
+        var columnGroupColor = model.colorForColumnHeader(modelColumn, depth);
+        var columnGroupLeft = getOrThrow(allColumnXs, columnIndex) + gridX;
+        var columnGroupRight = columnGroupLeft + getOrThrow(allColumnWidths, columnIndex);
+        if (columnGroupName != null) {
+          // Need to determine if the column group is at least the width of the bounds
+          // And if the left/right of the group extend past the bounds
+          // The group will be drawn as if it were a column with a max width of the bounds width
+          var prevColumnIndex = columnIndex - 1;
+          while (prevColumnIndex >= 0 && (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupLeft > minX)) {
+            var _modelColumns$get, _ref3, _userColumnWidths$get;
+            var prevModelIndex = (_modelColumns$get = modelColumns.get(prevColumnIndex)) !== null && _modelColumns$get !== void 0 ? _modelColumns$get : GridUtils.getModelIndex(prevColumnIndex, movedColumns);
+            if (prevModelIndex == null || model.textForColumnHeader(prevModelIndex, depth) !== columnGroupName) {
+              // Previous column not in the same group
+              break;
+            }
+            var prevColumnWidth = (_ref3 = (_userColumnWidths$get = userColumnWidths.get(prevModelIndex)) !== null && _userColumnWidths$get !== void 0 ? _userColumnWidths$get : allColumnWidths.get(prevColumnIndex)) !== null && _ref3 !== void 0 ? _ref3 : columnWidth;
+            columnGroupLeft -= prevColumnWidth;
+            prevColumnIndex -= 1;
+          }
+          var nextColumnIndex = columnIndex + 1;
+          while (nextColumnIndex < columnCount && (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupRight < maxX)) {
+            var _modelColumns$get2, _ref4, _userColumnWidths$get2;
+            var nextModelIndex = (_modelColumns$get2 = modelColumns.get(nextColumnIndex)) !== null && _modelColumns$get2 !== void 0 ? _modelColumns$get2 : GridUtils.getModelIndex(nextColumnIndex, movedColumns);
+            if (model.textForColumnHeader(nextModelIndex, depth) !== columnGroupName) {
+              // Next column not in the same group
+              break;
+            }
+            var nextColumnWidth = (_ref4 = (_userColumnWidths$get2 = userColumnWidths.get(nextModelIndex)) !== null && _userColumnWidths$get2 !== void 0 ? _userColumnWidths$get2 : allColumnWidths.get(nextColumnIndex)) !== null && _ref4 !== void 0 ? _ref4 : columnWidth;
+            columnGroupRight += nextColumnWidth;
+            nextColumnIndex += 1;
+          }
+
+          // Set column index to end of the current group
+          columnIndex = nextColumnIndex - 1;
+          var isFullWidth = columnGroupRight - columnGroupLeft >= visibleWidth;
+          var x = columnGroupLeft;
+          if (isFullWidth) {
+            if (columnGroupRight < maxX) {
+              x = columnGroupRight - visibleWidth;
+            } else if (columnGroupLeft < minX) {
+              x = minX;
+            }
+          }
+          this.drawColumnHeader(context, state, columnGroupName, x, Math.min(columnGroupRight - columnGroupLeft, visibleWidth), {
+            backgroundColor: columnGroupColor !== null && columnGroupColor !== void 0 ? columnGroupColor : undefined
+          }, bounds);
+        }
+        columnIndex += 1;
+      }
+    }
+    context.restore();
+  }
+
+  /**
+   * Draws the column header for the given visible index
+   * @param context Canvas context
+   * @param state Grid render state
+   * @param index Visible index of the column header to draw
+   * @param bounds The horizontal bounds the header can be drawn in
+   */
+  drawColumnHeaderAtIndex(context, state, index, bounds) {
+    var _model$colorForColumn;
+    var {
+      metrics,
+      model
+    } = state;
+    var {
+      modelColumns,
+      allColumnWidths,
+      allColumnXs,
+      gridX
+    } = metrics;
+    var width = getOrThrow(allColumnWidths, index);
+    var x = getOrThrow(allColumnXs, index) + gridX;
+    var modelColumn = getOrThrow(modelColumns, index);
+    var text = model.textForColumnHeader(modelColumn);
+    if (text == null) {
+      return;
+    }
+    this.drawColumnHeader(context, state, text, x, width, {
+      backgroundColor: (_model$colorForColumn = model.colorForColumnHeader(modelColumn)) !== null && _model$colorForColumn !== void 0 ? _model$colorForColumn : undefined
+    }, bounds);
+  }
+  drawColumnHeader(context, state, columnText, columnX, columnWidth, style, bounds) {
+    var _fontWidths$get;
+    if (columnWidth <= 0) {
+      return;
+    }
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      headerHorizontalPadding,
+      columnHeaderHeight,
+      headerBackgroundColor,
+      headerColor,
+      headerSeparatorColor,
+      black,
+      white
+    } = theme;
+    var {
+      fontWidths,
+      width
+    } = metrics;
+    var fontWidth = (_fontWidths$get = fontWidths.get(context.font)) !== null && _fontWidths$get !== void 0 ? _fontWidths$get : DEFAULT_FONT_WIDTH;
+    var maxWidth = columnWidth - headerHorizontalPadding * 2;
+    var maxLength = maxWidth / fontWidth;
+    var {
+      backgroundColor = headerBackgroundColor,
+      separatorColor = headerSeparatorColor
+    } = style !== null && style !== void 0 ? style : {};
+    var {
+      textColor = headerColor
+    } = style !== null && style !== void 0 ? style : {};
+    try {
+      var isDarkBackground = this.getCachedColorIsDark(backgroundColor);
+      var isDarkText = this.getCachedColorIsDark(textColor);
+      if (isDarkBackground && isDarkText) {
+        textColor = white;
+      } else if (!isDarkBackground && !isDarkText) {
+        textColor = black;
+      }
+    } catch (_unused) {
+      // Invalid color provided
+      // no-op since we don't use logging in base grid
+    }
+    var {
+      minX = 0,
+      maxX = width
+    } = bounds !== null && bounds !== void 0 ? bounds : {};
+    context.save();
+    context.rect(minX, 0, maxX - minX, columnHeaderHeight);
+    context.clip();
+
+    // Fill background color if specified
+    if (backgroundColor != null) {
+      context.fillStyle = backgroundColor;
+      context.fillRect(columnX, 0, columnWidth, columnHeaderHeight);
+    }
+    if (separatorColor != null) {
+      context.strokeStyle = separatorColor;
+      context.beginPath();
+
+      // Don't draw left separator if column touches the left edge
+      if (columnX > 0) {
+        context.moveTo(columnX + 0.5, 0);
+        context.lineTo(columnX + 0.5, columnHeaderHeight);
+      }
+      context.moveTo(columnX + columnWidth + 0.5, 0);
+      context.lineTo(columnX + columnWidth + 0.5, columnHeaderHeight);
+
+      // Bottom Border, should be interior to the header height
+      context.moveTo(columnX, columnHeaderHeight - 0.5);
+      context.lineTo(columnX + columnWidth, columnHeaderHeight - 0.5);
+      context.stroke();
+    }
+    context.beginPath();
+    context.rect(columnX, 0, columnWidth, columnHeaderHeight);
+    context.clip();
+    context.fillStyle = textColor;
+    var renderText = columnText;
+    if (maxLength <= 0) {
+      renderText = '';
+    } else if (renderText.length > maxLength) {
+      renderText = "".concat(renderText.substring(0, maxLength - 1), "\u2026");
+    }
+    var textWidth = renderText.length * fontWidth;
+    var x = columnX + columnWidth * 0.5;
+    var y = columnHeaderHeight * 0.5;
+    minX += headerHorizontalPadding;
+    maxX -= headerHorizontalPadding;
+    var columnLeft = columnX + headerHorizontalPadding;
+    var visibleLeft = clamp(columnLeft, minX, maxX);
+    var columnRight = columnX + columnWidth - headerHorizontalPadding;
+    var visibleRight = clamp(columnRight, minX, maxX);
+    var visibleWidth = visibleRight - visibleLeft;
+    var isBeyondLeft = x - textWidth * 0.5 < minX;
+    var isBeyondRight = x + textWidth * 0.5 > maxX;
+    if (isBeyondLeft) {
+      // Column name would be off the left side of the canvas
+      if (textWidth < visibleWidth) {
+        // Can render the entire text in the visible space. Stick to left
+        x = minX + textWidth * 0.5;
+      } else {
+        x = columnRight - textWidth * 0.5;
+      }
+    } else if (isBeyondRight) {
+      if (textWidth < visibleWidth) {
+        // Can render the entire text in the visible space. Stick to right
+        x = maxX - textWidth * 0.5;
+      } else {
+        x = columnLeft + textWidth * 0.5;
+      }
+    }
+    context.textAlign = 'center';
+    context.fillText(renderText, x, y);
+    context.restore();
+  }
+  drawRowHeaders(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      metrics,
+      theme,
+      draggingRowSeparator
+    } = state;
+    var {
+      gridY,
+      rowHeaderWidth,
+      height,
+      visibleRows,
+      allRowHeights,
+      allRowYs
+    } = metrics;
+    if (rowHeaderWidth <= 0) {
+      return;
+    }
+    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;
+      for (var i = 0; i < visibleRows.length; i += 1) {
+        var row = visibleRows[i];
+        var rowY = getOrThrow(allRowYs, row);
+        var rowHeight = getOrThrow(allRowHeights, row);
+        if (rowHeight > 0) {
+          var y = gridY + rowY + rowHeight + 0.5;
+          context.moveTo(0, y);
+          context.lineTo(rowHeaderWidth, y);
+          isPreviousRowHidden = false;
+        } else if (!isPreviousRowHidden) {
+          isPreviousRowHidden = true;
+          hiddenRows.push(row);
+        }
+      }
+
+      // border right, interior to the headerWidth
+      context.moveTo(rowHeaderWidth - 0.5, 0);
+      context.lineTo(rowHeaderWidth - 0.5, height);
+      context.stroke();
+
+      // Draw the hidden column separators
+      context.beginPath();
+      context.fillStyle = headerSeparatorColor;
+      for (var _i5 = 0; _i5 < hiddenRows.length; _i5 += 1) {
+        var _row4 = hiddenRows[_i5];
+        var _rowY = getOrThrow(allRowYs, _row4);
+        var _rowHeight = getOrThrow(allRowHeights, _row4);
+        var minY = gridY + _rowY + _rowHeight + 0.5 - headerHiddenSeparatorSize * 0.5;
+        context.rect(hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
+      }
+      context.fill();
+    }
+    if (headerSeparatorHoverColor) {
+      var {
+        index: highlightedSeparator = null
+      } = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {};
+      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
+        highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
+      }
+      if (highlightedSeparator != null) {
+        context.strokeStyle = headerSeparatorHoverColor;
+        var _rowY2 = getOrThrow(allRowYs, highlightedSeparator);
+        var _rowHeight2 = getOrThrow(allRowHeights, highlightedSeparator);
+        var _y5 = gridY + _rowY2 + _rowHeight2 + 0.5;
+        var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
+        var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
+        var nextRowHeight = nextRow != null ? allRowHeights.get(nextRow) : null;
+        var isRowHidden = _rowHeight2 === 0;
+        var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
+        if (isRowHidden) {
+          context.strokeStyle = headerHiddenSeparatorHoverColor;
+          context.fillStyle = headerHiddenSeparatorHoverColor;
+          context.fillRect(hiddenX, _y5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+        } else if (isNextRowHidden) {
+          context.fillStyle = headerSeparatorHoverColor;
+          context.fillRect(hiddenX, _y5 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+        }
+        context.beginPath();
+        context.moveTo(0.5, _y5);
+        context.lineTo(rowHeaderWidth + 0.5, _y5);
+        context.stroke();
+      }
+    }
+
+    // Fill in the text
+    context.beginPath();
+    context.rect(0, gridY, rowHeaderWidth, height);
+    context.clip();
+    context.fillStyle = headerColor;
+    context.textAlign = 'right';
+    for (var _i6 = 0; _i6 < visibleRows.length; _i6 += 1) {
+      var _row5 = visibleRows[_i6];
+      var _rowHeight3 = getOrThrow(allRowHeights, _row5);
+      var _y6 = getOrThrow(allRowYs, _row5) + gridY;
+      this.drawRowHeader(context, state, _row5, _y6, _rowHeight3);
+    }
+    context.restore();
+  }
+  drawRowHeader(context, state, row, rowY, rowHeight) {
+    if (rowHeight <= 0) {
+      return;
+    }
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      modelRows,
+      rowHeaderWidth
+    } = metrics;
+    var modelRow = getOrThrow(modelRows, row);
+    var x = rowHeaderWidth - theme.cellHorizontalPadding;
+    var y = rowY + rowHeight * 0.5;
+    context.fillText(model.textForRowHeader(modelRow), x, y);
+  }
+  drawRowFooters(context, state) {
+    var {
+      mouseX,
+      mouseY,
+      metrics,
+      model,
+      theme,
+      draggingRowSeparator
+    } = state;
+    var {
+      gridY,
+      gridX,
+      maxX,
+      modelRows,
+      rowFooterWidth,
+      height,
+      verticalBarWidth,
+      visibleRows,
+      allRowHeights,
+      allRowYs,
+      width
+    } = metrics;
+    if (rowFooterWidth <= 0) {
+      return;
+    }
+    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;
+      for (var i = 0; i < visibleRows.length; i += 1) {
+        var row = visibleRows[i];
+        var rowY = getOrThrow(allRowYs, row);
+        var rowHeight = getOrThrow(allRowHeights, 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
+      context.beginPath();
+      context.fillStyle = headerSeparatorColor;
+      for (var _i7 = 0; _i7 < hiddenRows.length; _i7 += 1) {
+        var _row6 = hiddenRows[_i7];
+        var _rowY3 = getOrThrow(allRowYs, _row6);
+        var _rowHeight4 = getOrThrow(allRowHeights, _row6);
+        var minY = gridY + _rowY3 + _rowHeight4 + 0.5 - headerHiddenSeparatorSize * 0.5;
+        context.rect(x + hiddenX, minY, hiddenSeparatorWidth, headerHiddenSeparatorSize);
+      }
+      context.fill();
+    }
+    if (headerSeparatorHoverColor) {
+      var {
+        index: highlightedSeparator = null
+      } = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {};
+      if (highlightedSeparator == null && mouseX != null && mouseY != null) {
+        highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
+      }
+      if (highlightedSeparator != null) {
+        context.strokeStyle = headerSeparatorHoverColor;
+        var _rowY4 = getOrThrow(allRowYs, highlightedSeparator);
+        var _rowHeight5 = getOrThrow(allRowHeights, highlightedSeparator);
+        var _y7 = gridY + _rowY4 + _rowHeight5 + 0.5;
+        var visibleRowIndex = visibleRows.indexOf(highlightedSeparator);
+        var nextRow = visibleRowIndex < visibleRows.length - 1 ? visibleRows[visibleRowIndex + 1] : null;
+        var nextRowHeight = nextRow != null ? allRowHeights.get(nextRow) : null;
+        var isRowHidden = _rowHeight5 === 0;
+        var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
+        if (isRowHidden) {
+          context.strokeStyle = headerHiddenSeparatorHoverColor;
+          context.fillStyle = headerHiddenSeparatorHoverColor;
+          context.fillRect(hiddenX, _y7, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+        } else if (isNextRowHidden) {
+          context.fillStyle = headerSeparatorHoverColor;
+          context.fillRect(hiddenX, _y7 - headerHiddenSeparatorSize * 0.5, hiddenSeparatorWidth, headerHiddenSeparatorSize * 0.5);
+        }
+        context.beginPath();
+        context.moveTo(x + 0.5, _y7);
+        context.lineTo(x + rowFooterWidth + 0.5, _y7);
+        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 _i8 = 0; _i8 < visibleRows.length; _i8 += 1) {
+      var _row7 = visibleRows[_i8];
+      var _rowHeight6 = getOrThrow(allRowHeights, _row7);
+      if (_rowHeight6 > 0) {
+        var _rowY5 = getOrThrow(allRowYs, _row7) + gridY;
+        var modelRow = getOrThrow(modelRows, _row7);
+        var textY = _rowY5 + _rowHeight6 * 0.5;
+        context.fillText(model.textForRowFooter(modelRow), textX, textY);
+      }
+    }
+    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 {
+      allColumnWidths,
+      allColumnXs,
+      allRowHeights,
+      allRowYs,
+      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 = isEditableGridModel(model) && model.isEditable && editingCell == null && draggingRow == null && draggingColumn == null && column != null && row != null && allColumnXs.has(column) && allRowYs.has(row);
+    if (isCursorVisible) {
+      // Punch a hole out where the active cell is, it gets styled differently.
+      var x = getOrThrow(allColumnXs, column);
+      var y = getOrThrow(allRowYs, row);
+      var w = getOrThrow(allColumnWidths, column);
+      var h = getOrThrow(allRowHeights, row);
+      context.save();
+      context.beginPath();
+      context.rect(0, 0, width, height);
+      context.rect(x, y, w, h);
+      context.clip('evenodd');
+    }
+
+    // Draw selection ranges
+    context.beginPath();
+    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 _x4 = startColumn >= left && allColumnXs.has(startColumn) ? Math.round(getOrThrow(allColumnXs, startColumn)) + 0.5 : minX;
+        var _y8 = startRow >= top && allRowYs.has(startRow) ? Math.max(Math.round(getOrThrow(allRowYs, startRow)) + 0.5, 0.5) : minY;
+        var endX = endColumn <= right && allColumnXs.has(endColumn) ? Math.round(getOrThrow(allColumnXs, endColumn) + getOrThrow(allColumnWidths, endColumn)) - 0.5 : maxX;
+        var endY = endRow <= bottom && allRowYs.has(endRow) ? Math.round(getOrThrow(allRowYs, endRow) + getOrThrow(allRowHeights, endRow)) - 0.5 : maxY;
+        context.rect(_x4, _y8, endX - _x4, endY - _y8);
+      }
+
+      // 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.strokeStyle = theme.selectionOutlineColor;
+      context.lineWidth = 1;
+      context.stroke();
+    }
+    if (isCursorVisible && column != null && row != null) {
+      context.restore();
+      this.drawActiveCell(context, state, column, row);
+    }
+  }
+  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 {
+      allColumnWidths,
+      allColumnXs,
+      allRowHeights,
+      allRowYs
+    } = metrics;
+    var cellX = getOrThrow(allColumnXs, column);
+    var cellY = getOrThrow(allRowYs, row);
+    var cellW = getOrThrow(allColumnWidths, column);
+    var cellH = getOrThrow(allRowHeights, row);
+
+    // Now get the outline for the active cell
+    var x = cellX - borderWidth * 0.5;
+    var y = cellY - borderWidth * 0.5;
+    var w = cellW + borderWidth;
+    var h = cellH + borderWidth;
+
+    // Make sure the outline is interior on the edge
+    if (x <= 0) {
+      w += x - 1;
+      x = 1;
+    }
+    if (y <= 0) {
+      h += y - 1;
+      y = 1;
+    }
+    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 context The canvas context
+   * @param x coordinate of the left side
+   * @param y coordinate of the top side
+   * @param w width of the rectangle
+   * @param h height of the rectangle
+   * @param 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();
+  }
+  drawDraggingColumn(context, state) {
+    var _modelColumns$get3;
+    var {
+      draggingColumn,
+      metrics,
+      mouseX,
+      theme,
+      model
+    } = state;
+    if (draggingColumn == null || mouseX == null) {
+      return;
+    }
+    var {
+      range: draggingColumnVisibleRange,
+      depth: draggingColumnDepth
+    } = draggingColumn;
+    var {
+      gridX,
+      gridY,
+      allColumnXs,
+      allColumnWidths,
+      height,
+      width,
+      columnHeaderMaxDepth,
+      columnHeaderHeight,
+      movedColumns,
+      modelColumns,
+      floatingLeftWidth
+    } = metrics;
+    var draggingModelIndex = (_modelColumns$get3 = modelColumns.get(draggingColumnVisibleRange[0])) !== null && _modelColumns$get3 !== void 0 ? _modelColumns$get3 : GridUtils.getModelIndex(draggingColumnVisibleRange[0], movedColumns);
+    var draggingGroup = model.getColumnHeaderGroup(draggingModelIndex, draggingColumnDepth);
+    if (draggingColumnDepth > 0 && !draggingGroup) {
+      return;
+    }
+    var [startIndex, endIndex] = draggingColumnVisibleRange;
+    var originalLeft = getOrThrow(allColumnXs, startIndex);
+    var originalRight = getOrThrow(allColumnXs, endIndex) + getOrThrow(allColumnWidths, endIndex);
+    var originalWidth = originalRight - originalLeft;
+    var draggingLeft = draggingColumn.left;
+    var {
+      backgroundColor,
+      font,
+      headerFont,
+      reorderOffset,
+      shadowBlur,
+      shadowColor
+    } = theme;
+    var columnHeaderOffset = (columnHeaderMaxDepth - draggingColumnDepth - 1) * columnHeaderHeight;
+    context.save();
+    context.translate(gridX, 0);
+    context.save();
+    context.beginPath();
+
+    // Don't draw over frozen columns
+    context.rect(floatingLeftWidth, 0, width, height);
+    context.clip();
+
+    // First, we need to draw over where the column is coming from
+    context.fillStyle = backgroundColor;
+    context.fillRect(originalLeft, columnHeaderOffset, originalWidth, height);
+    context.restore();
+
+    // Then draw the shadow of the moving column
+    context.translate(0, reorderOffset);
+    context.save();
+    context.shadowColor = shadowColor;
+    context.shadowBlur = shadowBlur;
+    context.fillStyle = backgroundColor;
+    context.fillRect(draggingColumn.left, columnHeaderOffset + reorderOffset, draggingColumn.width, height);
+    context.restore(); // Reset style
+
+    // Now set the clipping region and pretty much just redraw this column and all it's contents
+    context.beginPath();
+    context.rect(draggingColumn.left, columnHeaderOffset, draggingColumn.width + 1, height);
+    context.clip();
+    context.translate(draggingLeft - originalLeft, 0);
+    context.font = headerFont;
+    var visibleColumns = [];
+    for (var i = draggingColumn.range[0]; i <= draggingColumn.range[1]; i += 1) {
+      visibleColumns.push(i);
+    }
+
+    /**
+     * This will not draw the header text properly, but extensions of Grid
+     * may draw extra things in the header like sorts and filters
+     */
+    this.drawColumnHeaders(context, state);
+
+    // Ensure the column header gets drawn
+    this.drawColumnHeadersForRange(context, state, [visibleColumns[0], visibleColumns[visibleColumns.length - 1]], {
+      minX: originalLeft,
+      maxX: width
+    });
+    context.translate(0, gridY);
+    context.font = font;
+    this.drawGridBackground(context, state);
+    for (var _i9 = startIndex; _i9 <= endIndex; _i9 += 1) {
+      this.drawColumnCellContents(context, state, _i9);
+    }
+    context.restore();
+  }
+  drawDraggingRow(context, state) {
+    var {
+      draggingRow,
+      draggingRowOffset,
+      metrics,
+      mouseY,
+      theme
+    } = state;
+    if (draggingRow == null || mouseY == null) {
+      return;
+    }
+    var {
+      gridX,
+      gridY,
+      allRowYs,
+      allRowHeights,
+      width
+    } = metrics;
+    var y = getOrThrow(allRowYs, draggingRow);
+    var rowHeight = getOrThrow(allRowHeights, 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 !== null && draggingRowOffset !== void 0 ? draggingRowOffset : 0));
+
+    // 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();
+  }
+  drawScrollBars(context, state) {
+    var {
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      isDragging,
+      metrics,
+      mouseX,
+      mouseY,
+      theme
+    } = state;
+    if (theme.scrollBarSize <= 0) {
+      return;
+    }
+    var {
+      width,
+      height,
+      handleHeight,
+      handleWidth,
+      scrollX,
+      scrollY,
+      hasHorizontalBar,
+      hasVerticalBar,
+      barWidth,
+      barHeight,
+      barLeft,
+      barTop
+    } = metrics;
+    var {
+      scrollBarBackgroundColor,
+      scrollBarHoverBackgroundColor,
+      scrollBarCasingColor,
+      scrollBarCornerColor,
+      scrollBarColor,
+      scrollBarHoverColor,
+      scrollBarActiveColor,
+      scrollBarSize,
+      scrollBarHoverSize,
+      scrollBarCasingWidth,
+      scrollBarSelectionTick,
+      scrollBarSelectionTickColor,
+      scrollBarActiveSelectionTickColor,
+      autoSelectRow,
+      autoSelectColumn
+    } = theme;
+    var isInbounds = mouseX != null && mouseY != null && mouseX <= width && mouseY <= height;
+    var isVerticalBarHover = isDraggingVerticalScrollBar || hasVerticalBar && !isDraggingHorizontalScrollBar && !isDragging && mouseX != null && mouseY != null && mouseX >= width - scrollBarHoverSize && mouseY >= barTop && isInbounds;
+    var isHorizontalBarHover = isDraggingHorizontalScrollBar || hasHorizontalBar && !isDraggingVerticalScrollBar && !isDragging && !isVerticalBarHover &&
+    // vert bar gets priorty in overlapped corner hover area
+    mouseX != null && mouseY != null && mouseY >= height - scrollBarHoverSize && mouseX >= barLeft && isInbounds;
+    var hScrollBarSize = isHorizontalBarHover ? scrollBarHoverSize : scrollBarSize;
+    var vScrollBarSize = isVerticalBarHover ? scrollBarHoverSize : scrollBarSize;
+    context.translate(barLeft, barTop);
+    if (hasHorizontalBar && hasVerticalBar) {
+      // That little corner in the bottom right
+      context.fillStyle = scrollBarCasingColor;
+      context.fillRect(width - barLeft - scrollBarSize, height - barTop - scrollBarSize, scrollBarSize, scrollBarSize);
+      context.fillStyle = scrollBarCornerColor;
+      context.fillRect(width - barLeft - scrollBarSize + scrollBarCasingWidth, height - barTop - scrollBarSize + scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth);
+    }
+    if (hasHorizontalBar) {
+      var x = scrollX;
+      var y = height - barTop - hScrollBarSize;
+
+      // scrollbar casing
+      context.fillStyle = scrollBarCasingColor;
+      context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth);
+
+      // scrollbar track
+      context.fillStyle = isHorizontalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
+      context.fillRect(0, y + scrollBarCasingWidth, barWidth, hScrollBarSize - scrollBarCasingWidth);
+
+      // scrollbar thumb
+      if (isDraggingHorizontalScrollBar) {
+        context.fillStyle = scrollBarActiveColor;
+      } else if (isHorizontalBarHover) {
+        context.fillStyle = scrollBarHoverColor;
+      } else {
+        context.fillStyle = scrollBarColor;
+      }
+      context.fillRect(x, y + scrollBarCasingWidth, handleWidth, hScrollBarSize - scrollBarCasingWidth);
+      if (!autoSelectRow && scrollBarSelectionTick && scrollBarSelectionTickColor != null && scrollBarActiveSelectionTickColor != null) {
+        context.fillStyle = scrollBarSelectionTickColor;
+        // Scrollbar Selection Tick
+        var {
+          selectedRanges,
+          cursorColumn
+        } = state;
+        var {
+          lastLeft,
+          columnCount
+        } = metrics;
+        var filteredRanges = [...selectedRanges].filter(value => value.startColumn != null && value.endColumn != null);
+        var sortedRanges = filteredRanges.map(value => [value.startColumn, value.endColumn]).sort(GridUtils.compareRanges);
+        var mergedRanges = GridUtils.mergeSortedRanges(sortedRanges);
+        var getTickX = index => {
+          if (index <= lastLeft) {
+            return index / lastLeft * (barWidth - handleWidth);
+          }
+          return barWidth - handleWidth + (index - lastLeft) / (columnCount - lastLeft) * handleWidth;
+        };
+        for (var i = 0; i < mergedRanges.length; i += 1) {
+          var range = mergedRanges[i];
+          var startColumn = range[0];
+          var endColumn = range[1];
+          if (startColumn != null && endColumn != null && (startColumn !== cursorColumn || endColumn !== cursorColumn)) {
+            var tickX = getTickX(startColumn);
+            var tickWidth = Math.max(1, Math.round(getTickX(endColumn + 1) - tickX));
+            var trackHeight = hScrollBarSize - scrollBarCasingWidth;
+            context.fillRect(tickX, y + scrollBarCasingWidth + Math.round(trackHeight / 3), tickWidth, Math.round(trackHeight / 3));
+          }
+        }
+
+        // Current Active Tick
+        if (cursorColumn != null) {
+          var _tickX = getTickX(cursorColumn);
+          var _tickWidth = 2;
+          var _trackHeight = hScrollBarSize - scrollBarCasingWidth;
+          context.fillStyle = scrollBarActiveSelectionTickColor;
+          context.fillRect(_tickX, y + scrollBarCasingWidth, _tickWidth, _trackHeight);
+        }
+      }
+    }
+    if (hasVerticalBar) {
+      var _x5 = width - barLeft - vScrollBarSize;
+      var _y9 = scrollY;
+
+      // scrollbar casing
+      context.fillStyle = scrollBarCasingColor;
+      context.fillRect(_x5, 0, vScrollBarSize - scrollBarCasingWidth, barHeight);
+
+      // scrollbar track
+      context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
+      context.fillRect(_x5 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight);
+
+      // scrollbar thumb
+      if (isDraggingVerticalScrollBar) {
+        context.fillStyle = scrollBarActiveColor;
+      } else if (isVerticalBarHover) {
+        context.fillStyle = scrollBarHoverColor;
+      } else {
+        context.fillStyle = scrollBarColor;
+      }
+      context.fillRect(_x5 + scrollBarCasingWidth, _y9, vScrollBarSize - scrollBarCasingWidth, handleHeight);
+      if (!autoSelectColumn && scrollBarSelectionTick && scrollBarSelectionTickColor != null && scrollBarActiveSelectionTickColor != null) {
+        // Scrollbar Selection Tick
+        var {
+          selectedRanges: _selectedRanges,
+          cursorRow
+        } = state;
+        var {
+          lastTop,
+          rowCount
+        } = metrics;
+        var getTickY = index => {
+          if (index <= lastTop) {
+            return index / lastTop * (barHeight - handleHeight);
+          }
+          return barHeight - handleHeight + (index - lastTop) / (rowCount - lastTop) * handleHeight;
+        };
+        context.fillStyle = scrollBarSelectionTickColor;
+        var _filteredRanges = [..._selectedRanges].filter(value => value.startRow != null && value.endRow != null);
+        var _sortedRanges = _filteredRanges.map(value => [value.startRow, value.endRow]).sort(GridUtils.compareRanges);
+        var _mergedRanges = GridUtils.mergeSortedRanges(_sortedRanges);
+        for (var _i10 = 0; _i10 < _mergedRanges.length; _i10 += 1) {
+          var _range = _mergedRanges[_i10];
+          var startRow = _range[0];
+          var endRow = _range[1];
+          if (startRow != null && endRow != null && (startRow !== cursorRow || endRow !== cursorRow)) {
+            var tickY = getTickY(startRow);
+            var trackWidth = vScrollBarSize - scrollBarCasingWidth;
+            var tickHeight = Math.max(1, Math.round(getTickY(endRow + 1) - tickY));
+            context.fillRect(_x5 + scrollBarCasingWidth + Math.round(trackWidth / 3), tickY, Math.round(trackWidth / 3), tickHeight);
+          }
+        }
+
+        // Current Active Tick
+        if (cursorRow != null) {
+          var _tickY = Math.round(getTickY(cursorRow));
+          var _trackWidth = vScrollBarSize - scrollBarCasingWidth;
+          var _tickHeight = 2;
+          context.fillStyle = scrollBarActiveSelectionTickColor;
+          context.fillRect(_x5 + scrollBarCasingWidth, _tickY, _trackWidth, _tickHeight);
+        }
+      }
+    }
+    context.translate(-barLeft, -barTop);
+  }
+}
+_defineProperty(GridRenderer, "DEFAULT_EDGE_RADIUS", 2);
+_defineProperty(GridRenderer, "ACTIVE_CELL_BORDER_WIDTH", 2);
+export default GridRenderer;
+//# sourceMappingURL=GridRenderer.js.map