@deephaven/grid 0.22.3-beta.18 → 0.22.3-beta.21

package/dist/GridRenderer.js

@@ -1,5 +1,4 @@
 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 clamp from 'lodash.clamp';
 import { ColorUtils } from '@deephaven/utils';
 import memoizeClear from "./memoizeClear.js";
@@ -9,13 +8,9 @@ import { isExpandableGridModel } from "./ExpandableGridModel.js";
 import { getOrThrow } from "./GridMetricCalculator.js";
 import { isEditableGridModel } from "./EditableGridModel.js";
 import GridColumnSeparatorMouseHandler from "./mouse-handlers/GridColumnSeparatorMouseHandler.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
@@ -26,28 +21,22 @@ export class GridRenderer {
     _defineProperty(this, "getCachedTruncatedString", memoizeClear((context, text, width, fontWidth, truncationChar) => GridRenderer.truncateToWidth(context, text, width, fontWidth, truncationChar), {
       max: 10000
     }));
-
     _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
@@ -59,9 +48,9 @@ export class GridRenderer {
       // 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
@@ -72,13 +61,10 @@ export class GridRenderer {
    * @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
@@ -87,27 +73,21 @@ export class GridRenderer {
       // 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
@@ -117,9 +97,9 @@ export class GridRenderer {
         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
@@ -131,29 +111,25 @@ export class GridRenderer {
    * @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] : GridRenderer.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
+    }
+
+    // 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
@@ -169,7 +145,6 @@ export class GridRenderer {
     this.drawScrollBars(context, state);
     context.restore();
   }
-
   configureContext(context, state) {
     var {
       theme
@@ -178,7 +153,6 @@ export class GridRenderer {
     context.textBaseline = 'middle';
     context.lineCap = 'butt';
   }
-
   drawBackground(context, state) {
     var {
       theme,
@@ -191,7 +165,6 @@ export class GridRenderer {
     context.fillStyle = theme.backgroundColor;
     context.fillRect(0, 0, width, height);
   }
-
   drawGrid(context, state) {
     var {
       metrics,
@@ -209,7 +182,6 @@ export class GridRenderer {
     this.drawFloatingColumns(context, state);
     context.translate(-gridX, -gridY);
   }
-
   drawFloatingRows(context, state) {
     var {
       draggingRow,
@@ -226,23 +198,20 @@ export class GridRenderer {
       visibleRowYs,
       visibleRowHeights
     } = 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...
+    this.drawFloatingBorders(context, state);
 
+    // Draw the floating row selection...
     if (floatingTopRowCount > 0) {
       this.drawSelectedRanges(context, state, {
         top: 0,
@@ -250,7 +219,6 @@ export class GridRenderer {
         maxY: getOrThrow(visibleRowYs, floatingTopRowCount - 1) + getOrThrow(visibleRowHeights, floatingTopRowCount - 1) - 0.5
       });
     }
-
     if (floatingBottomRowCount > 0) {
       this.drawSelectedRanges(context, state, {
         top: rowCount - floatingBottomRowCount - 1,
@@ -258,19 +226,17 @@ export class GridRenderer {
         minY: getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount) + 0.5,
         maxY: getOrThrow(visibleRowYs, rowCount - 1) + getOrThrow(visibleRowHeights, rowCount - 1) - 0.5
       });
-    } // Draw the cell content...
-
+    }
 
+    // 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,
@@ -293,21 +259,18 @@ export class GridRenderer {
       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.
-
+    }
 
+    // Clip floated column grid lines.
     context.save();
     context.beginPath();
     context.rect(0, 0, floatingLeftWidth, height);
@@ -315,15 +278,15 @@ export class GridRenderer {
     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...
+    this.drawFloatingBorders(context, state);
 
+    // Draw the floating column selection...
     if (floatingLeftColumnCount > 0) {
       this.drawSelectedRanges(context, state, {
         left: 0,
         maxX: getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1)
       });
     }
-
     if (floatingRightColumnCount > 0) {
       this.drawSelectedRanges(context, state, {
         left: columnCount - floatingRightColumnCount,
@@ -331,19 +294,17 @@ export class GridRenderer {
         minX: getOrThrow(visibleColumnXs, columnCount - floatingRightColumnCount) + 0.5,
         maxX: getOrThrow(visibleColumnXs, columnCount - 1) + getOrThrow(visibleColumnWidths, columnCount - 1)
       });
-    } // Draw the cell content...
-
+    }
 
+    // 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,
@@ -370,78 +331,59 @@ export class GridRenderer {
     context.lineWidth = 3;
     context.beginPath();
     context.strokeStyle = floatingDividerOuterColor;
-
     if (floatingTopRowCount > 0) {
       var y = getOrThrow(visibleRowYs, floatingTopRowCount - 1) + getOrThrow(visibleRowHeights, floatingTopRowCount - 1) + 0.5;
       context.moveTo(0, y);
       context.lineTo(maxX, y);
     }
-
     if (floatingBottomRowCount > 0) {
       var _y = getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount) - 0.5;
-
       context.moveTo(0, _y);
       context.lineTo(maxX, _y);
     }
-
     if (floatingLeftColumnCount > 0) {
       var x = getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1) + 0.5;
       context.moveTo(x, 0);
       context.lineTo(x, maxY);
     }
-
     if (floatingRightColumnCount > 0) {
       var _x = getOrThrow(visibleColumnXs, 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(visibleRowYs, floatingTopRowCount - 1) + getOrThrow(visibleRowHeights, floatingTopRowCount - 1) + 0.5;
-
       context.moveTo(0, _y2);
       context.lineTo(maxX, _y2);
     }
-
     if (floatingBottomRowCount > 0) {
       var _y3 = getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount) - 0.5;
-
       context.moveTo(0, _y3);
       context.lineTo(maxX, _y3);
     }
-
     if (floatingLeftColumnCount > 0) {
       var _x2 = getOrThrow(visibleColumnXs, floatingLeftColumnCount - 1) + getOrThrow(visibleColumnWidths, floatingLeftColumnCount - 1) + 0.5;
-
       context.moveTo(_x2, 0);
       context.lineTo(_x2, maxY);
     }
-
     if (floatingRightColumnCount > 0) {
       var _x3 = getOrThrow(visibleColumnXs, 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 {
@@ -472,7 +414,6 @@ export class GridRenderer {
       maxY: floatingBottomRowCount > 0 && visibleRowYs.has(rowCount - floatingBottomRowCount - 1) ? getOrThrow(visibleRowYs, rowCount - floatingBottomRowCount - 1) + getOrThrow(visibleRowHeights, rowCount - floatingBottomRowCount - 1) - 0.5 : height + 10
     });
   }
-
   drawRowStripes(context, state) {
     var {
       metrics,
@@ -484,14 +425,11 @@ export class GridRenderer {
     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;
@@ -509,56 +447,47 @@ export class GridRenderer {
     var {
       visibleRowYs,
       visibleRowHeights
-    } = metrics; // Optimize by grouping together all rows that end up with the same color
+    } = 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
-
+    };
 
+    // 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(visibleRowYs, _row);
         var rowHeight = getOrThrow(visibleRowHeights, _row);
         context.rect(minX, y, maxX, rowHeight);
       }
-
       context.fill();
     });
-
     if (topShadowRows.length > 0) {
       context.save();
       var startColor = this.getCachedColorWithAlpha(shadowColor, 0.15);
@@ -567,51 +496,37 @@ export class GridRenderer {
       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(visibleRowYs, _row2); // Use a translate so we can reuse the gradient
-
+        var y = getOrThrow(visibleRowYs, _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(visibleRowYs, _row3);
-
         var rowHeight = getOrThrow(visibleRowHeights, _row3);
-        var gradientY = _y4 + rowHeight - shadowBlur; // Use a translate so we can reuse the gradient
-
+        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,
@@ -621,27 +536,22 @@ export class GridRenderer {
     } = state;
     if (mouseX == null || mouseY == null) return;
     var mouseColumn = GridUtils.getColumnAtX(mouseX, metrics);
-
     if (mouseColumn == null || theme.columnHoverBackgroundColor == null) {
       return;
     }
-
     var {
       visibleColumnWidths,
       visibleColumnXs,
       maxY
     } = metrics;
-
     if (mouseY > maxY) {
       return;
     }
-
     var x = getOrThrow(visibleColumnXs, mouseColumn);
     var columnWidth = getOrThrow(visibleColumnWidths, mouseColumn);
     context.fillStyle = theme.columnHoverBackgroundColor;
     context.fillRect(x, 0, columnWidth, maxY);
   }
-
   drawMouseRowHover(context, state) {
     var {
       mouseX,
@@ -653,20 +563,15 @@ export class GridRenderer {
     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,
@@ -681,18 +586,14 @@ export class GridRenderer {
       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,
@@ -706,29 +607,23 @@ export class GridRenderer {
     } = metrics;
     var y = getOrThrow(visibleRowYs, row);
     var rowHeight = getOrThrow(visibleRowHeights, 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,
@@ -740,28 +635,22 @@ export class GridRenderer {
     } = 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
@@ -770,7 +659,6 @@ export class GridRenderer {
       visibleColumnXs,
       maxY
     } = metrics;
-
     for (var i = 0; i < columns.length; i += 1) {
       var column = columns[i];
       var x = getOrThrow(visibleColumnXs, column) + 0.5;
@@ -778,7 +666,6 @@ export class GridRenderer {
       context.lineTo(x, maxY);
     }
   }
-
   drawGridLinesForRows(context, state, rows) {
     var {
       metrics
@@ -787,8 +674,9 @@ export class GridRenderer {
       visibleRowYs,
       maxX: metricsMaxX
     } = metrics;
-    var maxX = metricsMaxX; // Draw row lines
+    var maxX = metricsMaxX;
 
+    // Draw row lines
     for (var i = 0; i < rows.length; i += 1) {
       var row = rows[i];
       var y = getOrThrow(visibleRowYs, row) + 0.5;
@@ -796,7 +684,6 @@ export class GridRenderer {
       context.lineTo(maxX - 0.5, y);
     }
   }
-
   drawCellBackgrounds(context, state) {
     var {
       metrics
@@ -807,23 +694,18 @@ export class GridRenderer {
     } = 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,
@@ -844,7 +726,6 @@ export class GridRenderer {
     var backgroundColor = model.backgroundColorForCell(modelColumn, modelRow, theme);
     var isFirstColumn = column === firstColumn;
     var hasExpandableRows = isExpandableGridModel(model) && model.hasExpandableRows;
-
     if (backgroundColor != null) {
       var x = getOrThrow(visibleColumnXs, column) + 1;
       var y = getOrThrow(visibleRowYs, row) + 1;
@@ -853,12 +734,10 @@ export class GridRenderer {
       context.fillStyle = backgroundColor;
       context.fillRect(x, y, columnWidth, rowHeight);
     }
-
     if (isFirstColumn && hasExpandableRows) {
       this.drawCellRowTreeDepthLines(context, state, row, rowAfter);
     }
   }
-
   drawCellContents(context, state) {
     var {
       metrics
@@ -866,13 +745,11 @@ export class GridRenderer {
     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
@@ -889,14 +766,13 @@ export class GridRenderer {
     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();
   }
+
   /**
    * Gets textWidth and X-Y position for a specific cell
    * The textWidth returned is the width that the text can occupy accounting for any other cell markings
@@ -908,8 +784,6 @@ export class GridRenderer {
    * @param row Row of cell to get text metrics for
    * @returns Object with width, x, and y of the text
    */
-
-
   getTextRenderMetrics(context, state, column, row) {
     var {
       textAlign
@@ -937,21 +811,17 @@ export class GridRenderer {
     var rowHeight = getOrThrow(visibleRowHeights, row);
     var isFirstColumn = column === firstColumn;
     var treeIndent = 0;
-
     if (isExpandableGridModel(model) && model.hasExpandableRows && isFirstColumn) {
       treeIndent = treeDepthIndent * (model.depthForRow(row) + 1) + treeHorizontalPadding;
     }
-
     var textWidth = columnWidth - treeIndent;
     var textX = x + cellHorizontalPadding;
     var textY = y + rowHeight * 0.5;
-
     if (textAlign === 'right') {
       textX = x + textWidth - cellHorizontalPadding;
     } else if (textAlign === 'center') {
       textX = x + textWidth * 0.5;
     }
-
     textX += treeIndent;
     return {
       width: textWidth - cellHorizontalPadding * 2,
@@ -959,7 +829,6 @@ export class GridRenderer {
       y: textY
     };
   }
-
   drawCellContent(context, state, column, row, textOverride) {
     var {
       metrics,
@@ -982,10 +851,8 @@ export class GridRenderer {
     var text = textOverride !== null && textOverride !== void 0 ? textOverride : model.textForCell(modelColumn, modelRow);
     var truncationChar = model.truncationCharForCell(modelColumn, modelRow);
     var isFirstColumn = column === firstColumn;
-
     if (text && rowHeight > 0) {
       var _fontWidths$get;
-
       var textAlign = model.textAlignForCell(modelColumn, modelRow) || 'left';
       context.textAlign = textAlign;
       var color = model.colorForCell(modelColumn, modelRow, theme) || textColor;
@@ -997,17 +864,14 @@ export class GridRenderer {
       } = this.getTextRenderMetrics(context, state, column, row);
       var fontWidth = (_fontWidths$get = fontWidths.get(context.font)) !== null && _fontWidths$get !== void 0 ? _fontWidths$get : GridRenderer.DEFAULT_FONT_WIDTH;
       var truncatedText = this.getCachedTruncatedString(context, text, textWidth, fontWidth, truncationChar);
-
       if (truncatedText) {
         context.fillText(truncatedText, textX, textY);
       }
     }
-
     if (isFirstColumn && isExpandableGridModel(model) && model.hasExpandableRows) {
       this.drawCellRowTreeMarker(context, state, row);
     }
   }
-
   drawCellRowTreeMarker(context, state, row) {
     var {
       metrics,
@@ -1034,16 +898,13 @@ export class GridRenderer {
     var columnWidth = getOrThrow(visibleColumnWidths, firstColumn);
     var rowY = getOrThrow(visibleRowYs, row);
     var rowHeight = getOrThrow(visibleRowHeights, row);
-
     if (!isExpandableGridModel(model) || !model.isRowExpandable(row)) {
       return;
     }
-
     var treeBox = getOrThrow(visibleRowTreeBoxes, row);
     var color = mouseX != null && mouseY != null && mouseX >= gridX + columnX && mouseX <= gridX + columnX + columnWidth && mouseY >= gridY + rowY && mouseY <= gridY + rowY + rowHeight ? treeMarkerHoverColor : treeMarkerColor;
     this.drawTreeMarker(context, state, columnX, rowY, treeBox, color, model.isRowExpanded(row));
   }
-
   drawTreeMarker(context, state, columnX, rowY, treeBox, color, isExpanded) {
     var {
       x1,
@@ -1058,7 +919,6 @@ export class GridRenderer {
     context.textAlign = 'center';
     context.fillText(markerText, textX, textY);
   }
-
   drawCellRowTreeDepthLines(context, state, row, rowAfter) {
     var {
       metrics,
@@ -1085,38 +945,33 @@ export class GridRenderer {
     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
+    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
-
+    }
 
+    // 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.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
@@ -1125,7 +980,6 @@ export class GridRenderer {
     this.drawColumnHeaders(context, state);
     this.drawRowHeaders(context, state);
   }
-
   drawFooters(context, state) {
     var {
       theme
@@ -1133,7 +987,6 @@ export class GridRenderer {
     context.font = theme.headerFont;
     this.drawRowFooters(context, state);
   }
-
   drawColumnHeaders(context, state) {
     var {
       mouseX,
@@ -1158,11 +1011,9 @@ export class GridRenderer {
       modelColumns,
       columnHeaderMaxDepth
     } = metrics;
-
     if (columnHeaderHeight <= 0) {
       return;
     }
-
     var {
       headerHiddenSeparatorSize,
       headerHiddenSeparatorHoverColor,
@@ -1177,14 +1028,12 @@ export class GridRenderer {
       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 = [...visibleColumnWidths.entries()].filter(_ref => {
@@ -1193,11 +1042,11 @@ export class GridRenderer {
       }).map(_ref2 => {
         var [index] = _ref2;
         return index;
-      }); // Now draw the hidden column separator boxes
+      });
 
+      // 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(visibleColumnXs, column);
@@ -1205,51 +1054,40 @@ export class GridRenderer {
         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(visibleColumnXs, highlightedSeparator);
-
         var _columnWidth = getOrThrow(visibleColumnWidths, 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 ? visibleColumnWidths.get(nextColumn) : null;
         var isColumnHidden = _columnWidth === 0;
         var isNextColumnHidden = nextColumnWidth != null && nextColumnWidth === 0;
-
         if (isColumnHidden) {
           context.strokeStyle = headerHiddenSeparatorHoverColor;
           context.fillStyle = headerHiddenSeparatorHoverColor;
@@ -1257,19 +1095,17 @@ export class GridRenderer {
         } else if (isNextColumnHidden) {
           context.fillStyle = headerSeparatorHoverColor;
           context.fillRect(x - headerHiddenSeparatorSize * 0.5, hiddenY, headerHiddenSeparatorSize * 0.5, hiddenSeparatorHeight);
-        } // column seperator hover line
-
+        }
 
+        // 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
@@ -1277,16 +1113,13 @@ export class GridRenderer {
     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,
@@ -1314,29 +1147,26 @@ export class GridRenderer {
       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
+      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
-
+    }
 
+    // Draw column header group
     if (depth > 0) {
       var columnIndex = startIndex;
-
       while (columnIndex <= endIndex) {
         var {
           columnCount
@@ -1346,52 +1176,43 @@ export class GridRenderer {
         var columnGroupColor = model.colorForColumnHeader(modelColumn, depth);
         var columnGroupLeft = getOrThrow(visibleColumnXs, columnIndex) + gridX;
         var columnGroupRight = columnGroupLeft + getOrThrow(visibleColumnWidths, 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;
-            } // Use this instead of visibleColumnWidths b/c the columns may be off screen
-
+            }
 
+            // Use this instead of visibleColumnWidths b/c the columns may be off screen
             var prevColumnWidth = (_ref3 = (_userColumnWidths$get = userColumnWidths.get(prevModelIndex)) !== null && _userColumnWidths$get !== void 0 ? _userColumnWidths$get : calculatedColumnWidths.get(prevModelIndex)) !== 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;
-            } // Use this instead of visibleColumnWidths b/c the columns may be off screen
-
+            }
 
+            // Use this instead of visibleColumnWidths b/c the columns may be off screen
             var nextColumnWidth = (_ref4 = (_userColumnWidths$get2 = userColumnWidths.get(nextModelIndex)) !== null && _userColumnWidths$get2 !== void 0 ? _userColumnWidths$get2 : calculatedColumnWidths.get(nextModelIndex)) !== null && _ref4 !== void 0 ? _ref4 : columnWidth;
             columnGroupRight += nextColumnWidth;
             nextColumnIndex += 1;
-          } // Set column index to end of the current group
-
+          }
 
+          // 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;
@@ -1399,18 +1220,16 @@ export class GridRenderer {
               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
@@ -1418,11 +1237,8 @@ export class GridRenderer {
    * @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
@@ -1437,23 +1253,18 @@ export class GridRenderer {
     var x = getOrThrow(visibleColumnXs, 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$get2;
-
     if (columnWidth <= 0) {
       return;
     }
-
     var {
       metrics,
       theme
@@ -1481,62 +1292,58 @@ export class GridRenderer {
     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
+    } 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
+    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
+      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.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;
@@ -1549,7 +1356,6 @@ export class GridRenderer {
     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) {
@@ -1566,12 +1372,10 @@ export class GridRenderer {
         x = columnLeft + textWidth * 0.5;
       }
     }
-
     context.textAlign = 'center';
     context.fillText(renderText, x, y);
     context.restore();
   }
-
   drawRowHeaders(context, state) {
     var {
       mouseX,
@@ -1588,11 +1392,9 @@ export class GridRenderer {
       visibleRowHeights,
       visibleRowYs
     } = metrics;
-
     if (rowHeaderWidth <= 0) {
       return;
     }
-
     var {
       headerBackgroundColor,
       headerColor,
@@ -1604,11 +1406,13 @@ export class GridRenderer {
     var hiddenSeparatorWidth = rowHeaderWidth * 0.5;
     var hiddenX = rowHeaderWidth * 0.5 - hiddenSeparatorWidth * 0.5;
     context.save();
-    context.beginPath(); // Fill in the background
+    context.beginPath();
 
+    // Fill in the background
     context.fillStyle = headerBackgroundColor;
-    context.fillRect(0, 0, rowHeaderWidth, height); // Draw the separators
+    context.fillRect(0, 0, rowHeaderWidth, height);
 
+    // Draw the separators
     if (headerSeparatorColor) {
       context.strokeStyle = headerSeparatorColor;
       context.beginPath();
@@ -1616,12 +1420,10 @@ export class GridRenderer {
       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(visibleRowYs, row);
         var rowHeight = getOrThrow(visibleRowHeights, row);
-
         if (rowHeight > 0) {
           var y = gridY + rowY + rowHeight + 0.5;
           context.moveTo(0, y);
@@ -1631,54 +1433,42 @@ export class GridRenderer {
           isPreviousRowHidden = true;
           hiddenRows.push(row);
         }
-      } // border right, interior to the headerWidth
-
+      }
 
+      // 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.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(visibleRowYs, _row4);
-
         var _rowHeight = getOrThrow(visibleRowHeights, _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(visibleRowYs, highlightedSeparator);
-
         var _rowHeight2 = getOrThrow(visibleRowHeights, 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 ? visibleRowHeights.get(nextRow) : null;
         var isRowHidden = _rowHeight2 === 0;
         var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
-
         if (isRowHidden) {
           context.strokeStyle = headerHiddenSeparatorHoverColor;
           context.fillStyle = headerHiddenSeparatorHoverColor;
@@ -1687,39 +1477,31 @@ export class GridRenderer {
           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
-
+    }
 
+    // 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(visibleRowHeights, _row5);
-
       var _y6 = getOrThrow(visibleRowYs, _row5) + gridY;
-
       this.drawRowHeader(context, state, _row5, _y6, _rowHeight3);
     }
-
     context.restore();
   }
-
   drawRowHeader(context, state, row, rowY, rowHeight) {
     if (rowHeight <= 0) {
       return;
     }
-
     var {
       metrics,
       model,
@@ -1734,7 +1516,6 @@ export class GridRenderer {
     var y = rowY + rowHeight * 0.5;
     context.fillText(model.textForRowHeader(modelRow), x, y);
   }
-
   drawRowFooters(context, state) {
     var {
       mouseX,
@@ -1757,11 +1538,9 @@ export class GridRenderer {
       visibleRowYs,
       width
     } = metrics;
-
     if (rowFooterWidth <= 0) {
       return;
     }
-
     var {
       cellHorizontalPadding,
       headerBackgroundColor,
@@ -1775,11 +1554,13 @@ export class GridRenderer {
     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.beginPath();
 
+    // Fill in the background
     context.fillStyle = headerBackgroundColor;
-    context.fillRect(x, gridY, rowFooterWidth, height); // Draw the separators
+    context.fillRect(x, gridY, rowFooterWidth, height);
 
+    // Draw the separators
     if (headerSeparatorColor) {
       context.strokeStyle = headerSeparatorColor;
       context.beginPath();
@@ -1787,12 +1568,10 @@ export class GridRenderer {
       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(visibleRowYs, row);
         var rowHeight = getOrThrow(visibleRowHeights, row);
-
         if (rowHeight > 0) {
           var y = gridY + rowY + rowHeight + 0.5;
           context.moveTo(x + 0.5, y);
@@ -1802,54 +1581,42 @@ export class GridRenderer {
           isPreviousRowHidden = true;
           hiddenRows.push(row);
         }
-      } // border left, interior to the headerWidth
-
+      }
 
+      // 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.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(visibleRowYs, _row6);
-
         var _rowHeight4 = getOrThrow(visibleRowHeights, _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(visibleRowYs, highlightedSeparator);
-
         var _rowHeight5 = getOrThrow(visibleRowHeights, 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 ? visibleRowHeights.get(nextRow) : null;
         var isRowHidden = _rowHeight5 === 0;
         var isNextRowHidden = nextRowHeight != null && nextRowHeight === 0;
-
         if (isRowHidden) {
           context.strokeStyle = headerHiddenSeparatorHoverColor;
           context.fillStyle = headerHiddenSeparatorHoverColor;
@@ -1858,39 +1625,32 @@ export class GridRenderer {
           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
-
+    }
 
+    // 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(visibleRowHeights, _row7);
-
       if (_rowHeight6 > 0) {
         var _rowY5 = getOrThrow(visibleRowYs, _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 {
@@ -1922,13 +1682,10 @@ export class GridRenderer {
       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 && visibleColumnXs.has(column) && visibleRowYs.has(row);
-
     if (isCursorVisible) {
       // Punch a hole out where the active cell is, it gets styled differently.
       var x = getOrThrow(visibleColumnXs, column);
@@ -1940,32 +1697,29 @@ export class GridRenderer {
       context.rect(0, 0, width, height);
       context.rect(x, y, w, h);
       context.clip('evenodd');
-    } // Draw selection ranges
-
+    }
 
+    // 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 && visibleColumnXs.has(startColumn) ? Math.round(getOrThrow(visibleColumnXs, startColumn)) + 0.5 : minX;
-
         var _y8 = startRow >= top && visibleRowYs.has(startRow) ? Math.max(Math.round(getOrThrow(visibleRowYs, startRow)) + 0.5, 0.5) : minY;
-
         var endX = endColumn <= right && visibleColumnXs.has(endColumn) ? Math.round(getOrThrow(visibleColumnXs, endColumn) + getOrThrow(visibleColumnWidths, endColumn)) - 0.5 : maxX;
         var endY = endRow <= bottom && visibleRowYs.has(endRow) ? Math.round(getOrThrow(visibleRowYs, endRow) + getOrThrow(visibleRowHeights, endRow)) - 0.5 : maxY;
         context.rect(_x4, _y8, endX - _x4, endY - _y8);
-      } // draw the inner transparent fill
-
+      }
 
+      // 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
@@ -1973,25 +1727,23 @@ export class GridRenderer {
        * 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.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 {
@@ -2007,23 +1759,23 @@ export class GridRenderer {
     var cellX = getOrThrow(visibleColumnXs, column);
     var cellY = getOrThrow(visibleRowYs, row);
     var cellW = getOrThrow(visibleColumnWidths, column);
-    var cellH = getOrThrow(visibleRowHeights, row); // Now get the outline for the active cell
+    var cellH = getOrThrow(visibleRowHeights, 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
+    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;
@@ -2034,6 +1786,7 @@ export class GridRenderer {
     context.stroke();
     context.lineWidth = lineWidth;
   }
+
   /**
    * Draws a rounded rectangle using the current state of the canvas.
    *
@@ -2044,8 +1797,6 @@ export class GridRenderer {
    * @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();
@@ -2060,10 +1811,8 @@ export class GridRenderer {
     context.quadraticCurveTo(x, y, x + r, y);
     context.closePath();
   }
-
   drawDraggingColumn(context, state) {
     var _modelColumns$get3;
-
     var {
       draggingColumn,
       metrics,
@@ -2071,11 +1820,9 @@ export class GridRenderer {
       theme,
       model
     } = state;
-
     if (draggingColumn == null || mouseX == null) {
       return;
     }
-
     var {
       range: draggingColumnVisibleRange,
       depth: draggingColumnDepth
@@ -2095,11 +1842,9 @@ export class GridRenderer {
     } = 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(visibleColumnXs, startIndex);
     var originalRight = getOrThrow(visibleColumnXs, endIndex) + getOrThrow(visibleColumnWidths, endIndex);
@@ -2117,15 +1862,18 @@ export class GridRenderer {
     context.save();
     context.translate(gridX, 0);
     context.save();
-    context.beginPath(); // Don't draw over frozen columns
+    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.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.restore();
 
+    // Then draw the shadow of the moving column
     context.translate(0, reorderOffset);
     context.save();
     context.shadowColor = shadowColor;
@@ -2133,26 +1881,25 @@ export class GridRenderer {
     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
 
+    // 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);
 
-
-    this.drawColumnHeaders(context, state); // Ensure the column header gets drawn
-
+    // Ensure the column header gets drawn
     this.drawColumnHeadersForRange(context, state, [visibleColumns[0], visibleColumns[visibleColumns.length - 1]], {
       minX: originalLeft,
       maxX: width
@@ -2160,14 +1907,11 @@ export class GridRenderer {
     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,
@@ -2176,11 +1920,9 @@ export class GridRenderer {
       mouseY,
       theme
     } = state;
-
     if (draggingRow == null || mouseY == null) {
       return;
     }
-
     var {
       gridX,
       gridY,
@@ -2199,32 +1941,35 @@ export class GridRenderer {
       shadowColor
     } = theme;
     context.save();
-    context.translate(0, gridY); // First, we need to draw over the row stripes where the row is coming from
+    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.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.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
+    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,
@@ -2235,11 +1980,9 @@ export class GridRenderer {
       mouseY,
       theme
     } = state;
-
     if (theme.scrollBarSize <= 0) {
       return;
     }
-
     var {
       rowHeaderWidth,
       columnHeaderHeight,
@@ -2273,12 +2016,12 @@ export class GridRenderer {
     } = 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 <= barHeight + columnHeaderHeight && isInbounds;
-    var isHorizontalBarHover = isDraggingHorizontalScrollBar || hasHorizontalBar && !isDraggingVerticalScrollBar && !isDragging && !isVerticalBarHover && // vert bar gets priorty in overlapped corner hover area
+    var isHorizontalBarHover = isDraggingHorizontalScrollBar || hasHorizontalBar && !isDraggingVerticalScrollBar && !isDragging && !isVerticalBarHover &&
+    // vert bar gets priorty in overlapped corner hover area
     mouseX != null && mouseY != null && 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;
@@ -2286,17 +2029,19 @@ export class GridRenderer {
       context.fillStyle = scrollBarCornerColor;
       context.fillRect(width - rowHeaderWidth - scrollBarSize + scrollBarCasingWidth, height - columnHeaderHeight - scrollBarSize + scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth, scrollBarSize - scrollBarCasingWidth);
     }
-
     if (hasHorizontalBar) {
       var x = scrollX;
-      var y = height - columnHeaderHeight - hScrollBarSize; // scrollbar casing
+      var y = height - columnHeaderHeight - hScrollBarSize;
 
+      // scrollbar casing
       context.fillStyle = scrollBarCasingColor;
-      context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar track
+      context.fillRect(0, y, barWidth, hScrollBarSize - scrollBarCasingWidth);
 
+      // scrollbar track
       context.fillStyle = isHorizontalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-      context.fillRect(0, y + scrollBarCasingWidth, barWidth, hScrollBarSize - scrollBarCasingWidth); // scrollbar thumb
+      context.fillRect(0, y + scrollBarCasingWidth, barWidth, hScrollBarSize - scrollBarCasingWidth);
 
+      // scrollbar thumb
       if (isDraggingHorizontalScrollBar) {
         context.fillStyle = scrollBarActiveColor;
       } else if (isHorizontalBarHover) {
@@ -2304,12 +2049,10 @@ export class GridRenderer {
       } 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
-
+        context.fillStyle = scrollBarSelectionTickColor;
+        // Scrollbar Selection Tick
         var {
           selectedRanges,
           cursorColumn
@@ -2321,53 +2064,47 @@ export class GridRenderer {
         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
-
+        }
 
+        // 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 - rowHeaderWidth - vScrollBarSize;
+      var _y9 = scrollY;
 
-      var _y9 = scrollY; // scrollbar casing
-
+      // scrollbar casing
       context.fillStyle = scrollBarCasingColor;
-      context.fillRect(_x5, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar track
+      context.fillRect(_x5, 0, vScrollBarSize - scrollBarCasingWidth, barHeight);
 
+      // scrollbar track
       context.fillStyle = isVerticalBarHover ? scrollBarHoverBackgroundColor : scrollBarBackgroundColor;
-      context.fillRect(_x5 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight); // scrollbar thumb
+      context.fillRect(_x5 + scrollBarCasingWidth, 0, vScrollBarSize - scrollBarCasingWidth, barHeight);
 
+      // scrollbar thumb
       if (isDraggingVerticalScrollBar) {
         context.fillStyle = scrollBarActiveColor;
       } else if (isVerticalBarHover) {
@@ -2375,9 +2112,7 @@ export class GridRenderer {
       } else {
         context.fillStyle = scrollBarColor;
       }
-
       context.fillRect(_x5 + scrollBarCasingWidth, _y9, vScrollBarSize - scrollBarCasingWidth, handleHeight);
-
       if (!autoSelectColumn && scrollBarSelectionTick && scrollBarSelectionTickColor != null && scrollBarActiveSelectionTickColor != null) {
         // Scrollbar Selection Tick
         var {
@@ -2388,59 +2123,43 @@ export class GridRenderer {
           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
-
+        }
 
+        // 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(-rowHeaderWidth, -columnHeaderHeight);
   }
-
 }
-
 _defineProperty(GridRenderer, "DEFAULT_FONT_WIDTH", 10);
-
 _defineProperty(GridRenderer, "DEFAULT_EDGE_RADIUS", 2);
-
 _defineProperty(GridRenderer, "ACTIVE_CELL_BORDER_WIDTH", 2);
-
 export default GridRenderer;
 //# sourceMappingURL=GridRenderer.js.map