@deephaven/grid 1.22.1-alpha-pivot-builder.0 → 1.22.2-alpha-pivot-builder.0

package/dist/GridRenderer.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -127,9 +133,7 @@ export class GridRenderer {
    * @param state The state of the grid
    */
   drawCanvas(state) {
-    var {
-      context
-    } = state;
+    var context = state.context;
     context.save();
     this.configureContext(context, state);
     this.drawBackground(context, state);
@@ -142,35 +146,25 @@ export class GridRenderer {
     context.restore();
   }
   configureContext(context, state) {
-    var {
-      theme
-    } = state;
+    var theme = state.theme;
     context.font = theme.font;
     context.textBaseline = 'middle';
     context.lineCap = 'butt';
   }
   drawBackground(context, state) {
-    var {
-      theme,
-      metrics
-    } = state;
-    var {
-      width,
-      height
-    } = metrics;
+    var theme = state.theme,
+      metrics = state.metrics;
+    var width = metrics.width,
+      height = metrics.height;
     context.fillStyle = theme.backgroundColor;
     context.fillRect(0, 0, width, height);
   }
   drawGrid(context, state) {
-    var {
-      metrics,
-      draggingRow,
-      draggingColumn
-    } = state;
-    var {
-      gridX,
-      gridY
-    } = metrics;
+    var metrics = state.metrics,
+      draggingRow = state.draggingRow,
+      draggingColumn = state.draggingColumn;
+    var gridX = metrics.gridX,
+      gridY = metrics.gridY;
     context.translate(gridX, gridY);
     this.drawGridBackground(context, state, draggingRow == null && draggingColumn == null);
     this.drawCellContents(context, state);
@@ -179,21 +173,17 @@ export class GridRenderer {
     context.translate(-gridX, -gridY);
   }
   drawFloatingRows(context, state) {
-    var {
-      draggingRow,
-      draggingColumn,
-      metrics,
-      theme
-    } = state;
-    var {
-      floatingTopRowCount,
-      floatingBottomRowCount,
-      floatingRows,
-      rowCount,
-      columnsForRender,
-      allRowYs,
-      allRowHeights
-    } = metrics;
+    var draggingRow = state.draggingRow,
+      draggingColumn = state.draggingColumn,
+      metrics = state.metrics,
+      theme = state.theme;
+    var floatingTopRowCount = metrics.floatingTopRowCount,
+      floatingBottomRowCount = metrics.floatingBottomRowCount,
+      floatingRows = metrics.floatingRows,
+      rowCount = metrics.rowCount,
+      columnsForRender = metrics.columnsForRender,
+      allRowYs = metrics.allRowYs,
+      allRowHeights = metrics.allRowHeights;
     if (floatingRows.length === 0) {
       return;
     }
@@ -234,27 +224,23 @@ export class GridRenderer {
     }
   }
   drawFloatingColumns(context, state) {
-    var {
-      draggingRow,
-      draggingColumn,
-      metrics,
-      theme
-    } = state;
-    var {
-      floatingLeftColumnCount,
-      floatingRightColumnCount,
-      floatingLeftWidth,
-      floatingRightWidth,
-      floatingColumns,
-      gridX,
-      maxX,
-      columnCount,
-      visibleRows,
-      allColumnXs,
-      allColumnWidths,
-      width,
-      height
-    } = metrics;
+    var draggingRow = state.draggingRow,
+      draggingColumn = state.draggingColumn,
+      metrics = state.metrics,
+      theme = state.theme;
+    var floatingLeftColumnCount = metrics.floatingLeftColumnCount,
+      floatingRightColumnCount = metrics.floatingRightColumnCount,
+      floatingLeftWidth = metrics.floatingLeftWidth,
+      floatingRightWidth = metrics.floatingRightWidth,
+      floatingColumns = metrics.floatingColumns,
+      gridX = metrics.gridX,
+      maxX = metrics.maxX,
+      columnCount = metrics.columnCount,
+      visibleRows = metrics.visibleRows,
+      allColumnXs = metrics.allColumnXs,
+      allColumnWidths = metrics.allColumnWidths,
+      width = metrics.width,
+      height = metrics.height;
     if (floatingColumns.length === 0) {
       return;
     }
@@ -302,28 +288,22 @@ export class GridRenderer {
     }
   }
   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;
+    var metrics = state.metrics,
+      theme = state.theme;
+    var floatingTopRowCount = metrics.floatingTopRowCount,
+      floatingBottomRowCount = metrics.floatingBottomRowCount,
+      floatingLeftColumnCount = metrics.floatingLeftColumnCount,
+      floatingRightColumnCount = metrics.floatingRightColumnCount,
+      rowCount = metrics.rowCount,
+      columnCount = metrics.columnCount,
+      allRowYs = metrics.allRowYs,
+      allColumnXs = metrics.allColumnXs,
+      allRowHeights = metrics.allRowHeights,
+      allColumnWidths = metrics.allColumnWidths,
+      maxX = metrics.maxX,
+      maxY = metrics.maxY;
+    var floatingDividerOuterColor = theme.floatingDividerOuterColor,
+      floatingDividerInnerColor = theme.floatingDividerInnerColor;
     context.lineWidth = 3;
     context.beginPath();
     context.strokeStyle = floatingDividerOuterColor;
@@ -382,25 +362,21 @@ export class GridRenderer {
     }
     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;
+    var metrics = state.metrics;
+    var bottom = metrics.bottom,
+      right = metrics.right,
+      floatingBottomRowCount = metrics.floatingBottomRowCount,
+      floatingLeftColumnCount = metrics.floatingLeftColumnCount,
+      floatingRightColumnCount = metrics.floatingRightColumnCount,
+      floatingTopRowCount = metrics.floatingTopRowCount,
+      columnCount = metrics.columnCount,
+      rowCount = metrics.rowCount,
+      allRowHeights = metrics.allRowHeights,
+      allRowYs = metrics.allRowYs,
+      allColumnXs = metrics.allColumnXs,
+      allColumnWidths = metrics.allColumnWidths,
+      width = metrics.width,
+      height = metrics.height;
     this.drawSelectedRanges(context, state, {
       bottom: Math.min(bottom, rowCount - floatingBottomRowCount - 1),
       right: Math.min(right, columnCount - floatingRightColumnCount - 1),
@@ -411,16 +387,10 @@ export class GridRenderer {
     });
   }
   drawRowStripes(context, state) {
-    var {
-      metrics,
-      theme
-    } = state;
-    var {
-      visibleRows
-    } = metrics;
-    var {
-      rowBackgroundColors
-    } = theme;
+    var metrics = state.metrics,
+      theme = state.theme;
+    var visibleRows = metrics.visibleRows;
+    var rowBackgroundColors = theme.rowBackgroundColors;
     if (!rowBackgroundColors) {
       return;
     }
@@ -429,22 +399,16 @@ export class GridRenderer {
   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,
-      shadowAlpha
-    } = theme;
+    var theme = state.theme,
+      metrics = state.metrics,
+      model = state.model;
+    var maxDepth = theme.maxDepth,
+      shadowBlur = theme.shadowBlur,
+      shadowColor = theme.shadowColor,
+      shadowAlpha = theme.shadowAlpha;
     var colorSets = GridRenderer.getCachedBackgroundColors(rowBackgroundColors, maxDepth);
-    var {
-      allRowYs,
-      allRowHeights
-    } = metrics;
+    var allRowYs = metrics.allRowYs,
+      allRowHeights = metrics.allRowHeights;
 
     // Optimize by grouping together all rows that end up with the same color
     var colorRowMap = new Map();
@@ -525,22 +489,18 @@ export class GridRenderer {
     }
   }
   drawMouseColumnHover(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      theme,
-      metrics
-    } = state;
+    var mouseX = state.mouseX,
+      mouseY = state.mouseY,
+      theme = state.theme,
+      metrics = state.metrics;
     if (mouseX == null || mouseY == null) return;
     var mouseColumn = GridUtils.getColumnAtX(mouseX, metrics);
     if (mouseColumn == null || theme.columnHoverBackgroundColor == null) {
       return;
     }
-    var {
-      allColumnWidths,
-      allColumnXs,
-      maxY
-    } = metrics;
+    var allColumnWidths = metrics.allColumnWidths,
+      allColumnXs = metrics.allColumnXs,
+      maxY = metrics.maxY;
     if (mouseY > maxY) {
       return;
     }
@@ -550,16 +510,12 @@ export class GridRenderer {
     context.fillRect(x, 0, columnWidth, maxY);
   }
   drawMouseRowHover(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      theme,
-      metrics
-    } = state;
+    var mouseX = state.mouseX,
+      mouseY = state.mouseY,
+      theme = state.theme,
+      metrics = state.metrics;
     if (mouseX == null || mouseY == null) return;
-    var {
-      maxX
-    } = metrics;
+    var maxX = metrics.maxX;
     if (mouseX > maxX || theme.rowHoverBackgroundColor == null) {
       return;
     }
@@ -570,19 +526,15 @@ export class GridRenderer {
     this.drawMouseRowHoverForRow(context, state, mouseRow);
   }
   drawFloatingMouseRowHover(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      theme,
-      metrics
-    } = state;
-    var {
-      maxX,
-      floatingTopRowCount,
-      floatingBottomRowCount,
-      rowCount,
-      rowFooterWidth
-    } = metrics;
+    var mouseX = state.mouseX,
+      mouseY = state.mouseY,
+      theme = state.theme,
+      metrics = state.metrics;
+    var maxX = metrics.maxX,
+      floatingTopRowCount = metrics.floatingTopRowCount,
+      floatingBottomRowCount = metrics.floatingBottomRowCount,
+      rowCount = metrics.rowCount,
+      rowFooterWidth = metrics.rowFooterWidth;
     if (mouseX == null || mouseY == null || mouseX > maxX + rowFooterWidth || theme.rowHoverBackgroundColor == null) {
       return;
     }
@@ -592,26 +544,21 @@ export class GridRenderer {
     }
   }
   drawMouseRowHoverForRow(context, state, row) {
-    var {
-      metrics,
-      selectedRanges,
-      theme
-    } = state;
-    var {
-      allRowHeights,
-      allRowYs,
-      maxX
-    } = metrics;
+    var metrics = state.metrics,
+      selectedRanges = state.selectedRanges,
+      theme = state.theme;
+    var allRowHeights = metrics.allRowHeights,
+      allRowYs = metrics.allRowYs,
+      maxX = metrics.maxX;
     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];
+      var _selectedRanges$i = selectedRanges[i],
+        startRow = _selectedRanges$i.startRow,
+        endRow = _selectedRanges$i.endRow;
       if (startRow != null && endRow != null && startRow <= row && endRow >= row) {
         if (theme.selectedRowHoverBackgroundColor != null) {
           context.fillStyle = theme.selectedRowHoverBackgroundColor;
@@ -622,14 +569,10 @@ export class GridRenderer {
     context.fillRect(0, y, maxX, rowHeight);
   }
   drawGridLines(context, state) {
-    var {
-      metrics,
-      theme
-    } = state;
-    var {
-      columnsForRender,
-      visibleRows
-    } = metrics;
+    var metrics = state.metrics,
+      theme = state.theme;
+    var columnsForRender = metrics.columnsForRender,
+      visibleRows = metrics.visibleRows;
     this.drawGridLinesForItems(context, state, columnsForRender, visibleRows, theme.gridColumnColor, theme.gridRowColor);
   }
   drawGridLinesForItems(context, state, columns, rows, columnColor, rowColor) {
@@ -649,13 +592,9 @@ export class GridRenderer {
     context.stroke();
   }
   drawGridLinesForColumns(context, state, columns) {
-    var {
-      metrics
-    } = state;
-    var {
-      allColumnXs,
-      maxY
-    } = metrics;
+    var metrics = state.metrics;
+    var allColumnXs = metrics.allColumnXs,
+      maxY = metrics.maxY;
     for (var i = 0; i < columns.length; i += 1) {
       var column = columns[i];
       var x = getOrThrow(allColumnXs, column) + 0.5;
@@ -664,13 +603,9 @@ export class GridRenderer {
     }
   }
   drawGridLinesForRows(context, state, rows) {
-    var {
-      metrics
-    } = state;
-    var {
-      allRowYs,
-      maxX: metricsMaxX
-    } = metrics;
+    var metrics = state.metrics;
+    var allRowYs = metrics.allRowYs,
+      metricsMaxX = metrics.maxX;
     var maxX = metricsMaxX;
 
     // Draw row lines
@@ -682,13 +617,9 @@ export class GridRenderer {
     }
   }
   drawCellBackgrounds(context, state) {
-    var {
-      metrics
-    } = state;
-    var {
-      columnsForRender,
-      visibleRows
-    } = metrics;
+    var metrics = state.metrics;
+    var columnsForRender = metrics.columnsForRender,
+      visibleRows = metrics.visibleRows;
     this.drawCellBackgroundsForItems(context, state, columnsForRender, visibleRows);
   }
   drawCellBackgroundsForItems(context, state, columns, rows) {
@@ -704,20 +635,16 @@ export class GridRenderer {
     context.restore();
   }
   drawCellBackground(context, state, column, row, rowAfter) {
-    var {
-      metrics,
-      model,
-      theme
-    } = state;
-    var {
-      firstColumn,
-      modelColumns,
-      modelRows,
-      allColumnXs,
-      allColumnWidths,
-      allRowYs,
-      allRowHeights
-    } = metrics;
+    var metrics = state.metrics,
+      model = state.model,
+      theme = state.theme;
+    var firstColumn = metrics.firstColumn,
+      modelColumns = metrics.modelColumns,
+      modelRows = metrics.modelRows,
+      allColumnXs = metrics.allColumnXs,
+      allColumnWidths = metrics.allColumnWidths,
+      allRowYs = metrics.allRowYs,
+      allRowHeights = metrics.allRowHeights;
     var modelRow = getOrThrow(modelRows, row);
     var modelColumn = getOrThrow(modelColumns, column);
     var backgroundColor = model.backgroundColorForCell(modelColumn, modelRow, theme);
@@ -736,27 +663,19 @@ export class GridRenderer {
     }
   }
   drawCellContents(context, state) {
-    var {
-      metrics
-    } = state;
-    var {
-      columnsForRender
-    } = metrics;
+    var metrics = state.metrics;
+    var columnsForRender = metrics.columnsForRender;
     for (var i = 0; i < columnsForRender.length; i += 1) {
       var column = columnsForRender[i];
       this.drawColumnCellContents(context, state, column);
     }
   }
   drawColumnCellContents(context, state, column) {
-    var {
-      metrics
-    } = state;
-    var {
-      allColumnXs,
-      allColumnWidths,
-      visibleRows,
-      height
-    } = metrics;
+    var metrics = state.metrics;
+    var allColumnXs = metrics.allColumnXs,
+      allColumnWidths = metrics.allColumnWidths,
+      visibleRows = metrics.visibleRows,
+      height = metrics.height;
     var x = getOrThrow(allColumnXs, column);
     var columnWidth = getOrThrow(allColumnWidths, column);
     context.save();
@@ -770,14 +689,10 @@ export class GridRenderer {
     context.restore();
   }
   drawCellContent(context, state, column, row) {
-    var {
-      metrics,
-      model
-    } = state;
-    var {
-      modelColumns,
-      modelRows
-    } = metrics;
+    var metrics = state.metrics,
+      model = state.model;
+    var modelColumns = metrics.modelColumns,
+      modelRows = metrics.modelRows;
     var modelRow = getOrThrow(modelRows, row);
     var modelColumn = getOrThrow(modelColumns, column);
     var renderType = model.renderTypeForCell(modelColumn, modelRow);
@@ -793,25 +708,19 @@ export class GridRenderer {
     }
   }
   drawCellRowTreeDepthLines(context, state, row, rowAfter) {
-    var {
-      metrics,
-      model,
-      theme
-    } = state;
+    var metrics = state.metrics,
+      model = state.model,
+      theme = state.theme;
     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 firstColumn = metrics.firstColumn,
+      allColumnXs = metrics.allColumnXs,
+      allRowYs = metrics.allRowYs,
+      allRowHeights = metrics.allRowHeights;
+    var treeDepthIndent = theme.treeDepthIndent,
+      treeHorizontalPadding = theme.treeHorizontalPadding,
+      treeLineColor = theme.treeLineColor;
     var columnX = getOrThrow(allColumnXs, firstColumn);
     var rowY = getOrThrow(allRowYs, row);
     var rowHeight = getOrThrow(allRowHeights, row);
@@ -846,53 +755,44 @@ export class GridRenderer {
     }
   }
   drawHeaders(context, state) {
-    var {
-      theme
-    } = state;
+    var theme = state.theme;
     context.font = theme.headerFont;
     this.drawColumnHeaders(context, state);
     this.drawRowHeaders(context, state);
   }
   drawFooters(context, state) {
-    var {
-      theme
-    } = state;
+    var theme = state.theme;
     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;
+    var mouseX = state.mouseX,
+      mouseY = state.mouseY,
+      theme = state.theme,
+      metrics = state.metrics,
+      draggingColumnSeparator = state.draggingColumnSeparator,
+      isDragging = state.isDragging,
+      model = state.model;
+    var columnHeaderHeight = metrics.columnHeaderHeight,
+      floatingColumns = metrics.floatingColumns,
+      gridX = metrics.gridX,
+      width = metrics.width,
+      visibleColumns = metrics.visibleColumns,
+      allColumnWidths = metrics.allColumnWidths,
+      allColumnXs = metrics.allColumnXs,
+      floatingLeftColumnCount = metrics.floatingLeftColumnCount,
+      floatingLeftWidth = metrics.floatingLeftWidth,
+      floatingRightWidth = metrics.floatingRightWidth,
+      movedColumns = metrics.movedColumns,
+      columnCount = metrics.columnCount,
+      columnHeaderMaxDepth = metrics.columnHeaderMaxDepth;
     if (columnHeaderHeight <= 0) {
       return;
     }
-    var {
-      headerHiddenSeparatorSize,
-      headerHiddenSeparatorHoverColor,
-      headerSeparatorColor,
-      headerSeparatorHoverColor
-    } = theme;
+    var headerHiddenSeparatorSize = theme.headerHiddenSeparatorSize,
+      headerHiddenSeparatorHoverColor = theme.headerHiddenSeparatorHoverColor,
+      headerSeparatorColor = theme.headerSeparatorColor,
+      headerSeparatorHoverColor = theme.headerSeparatorHoverColor;
     var hiddenSeparatorHeight = columnHeaderHeight * 0.5;
     var hiddenY = columnHeaderHeight * (columnHeaderMaxDepth - 1) + columnHeaderHeight * 0.5 - hiddenSeparatorHeight * 0.5;
     var containsFrozenColumns = floatingLeftColumnCount > 0;
@@ -910,10 +810,13 @@ export class GridRenderer {
     if (headerSeparatorColor) {
       context.strokeStyle = headerSeparatorColor;
       var hiddenColumns = [...allColumnWidths.entries()].filter(_ref => {
-        var [_, w] = _ref;
+        var _ref2 = _slicedToArray(_ref, 2),
+          _ = _ref2[0],
+          w = _ref2[1];
         return w === 0;
-      }).map(_ref2 => {
-        var [index] = _ref2;
+      }).map(_ref3 => {
+        var _ref4 = _slicedToArray(_ref3, 1),
+          index = _ref4[0];
         return index;
       });
 
@@ -930,10 +833,9 @@ export class GridRenderer {
       context.fill();
     }
     if (headerSeparatorHoverColor) {
-      var {
-        index: highlightedSeparator,
-        depth
-      } = draggingColumnSeparator !== null && draggingColumnSeparator !== void 0 ? draggingColumnSeparator : {};
+      var _ref5 = draggingColumnSeparator !== null && draggingColumnSeparator !== void 0 ? draggingColumnSeparator : {},
+        highlightedSeparator = _ref5.index,
+        depth = _ref5.depth;
       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;
@@ -943,9 +845,7 @@ export class GridRenderer {
       if (highlightedSeparator == null) {
         shouldDrawSeparator = false;
       } else {
-        var columnIndex = modelColumns.get(highlightedSeparator);
-        var nextColumnIndex = modelColumns.get(highlightedSeparator + 1);
-        shouldDrawSeparator = GridUtils.hasColumnSeparatorAtDepth(model, depth, columnIndex, nextColumnIndex);
+        shouldDrawSeparator = GridUtils.hasColumnSeparatorAtDepth(model, depth, highlightedSeparator, columnCount, movedColumns);
       }
       if (shouldDrawSeparator && highlightedSeparator != null && depth != null && (!isDragging || draggingColumnSeparator != null)) {
         context.strokeStyle = headerSeparatorHoverColor;
@@ -976,12 +876,8 @@ export class GridRenderer {
     context.restore();
   }
   drawColumnHeadersForRange(context, state, range, bounds) {
-    var {
-      model
-    } = state;
-    var {
-      columnHeaderMaxDepth
-    } = model;
+    var model = state.model;
+    var columnHeaderMaxDepth = model.columnHeaderMaxDepth;
     if (columnHeaderMaxDepth === 0) {
       return;
     }
@@ -990,30 +886,20 @@ export class GridRenderer {
     }
   }
   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 metrics = state.metrics,
+      model = state.model,
+      theme = state.theme;
+    var modelColumns = metrics.modelColumns,
+      allColumnXs = metrics.allColumnXs,
+      gridX = metrics.gridX,
+      userColumnWidths = metrics.userColumnWidths,
+      allColumnWidths = metrics.allColumnWidths,
+      movedColumns = metrics.movedColumns;
+    var columnHeaderHeight = theme.columnHeaderHeight,
+      columnWidth = theme.columnWidth;
+    var columnHeaderMaxDepth = model.columnHeaderMaxDepth;
+    var minX = bounds.minX,
+      maxX = bounds.maxX;
     var visibleWidth = maxX - minX;
     if (columnHeaderMaxDepth === 0) {
       return;
@@ -1036,10 +922,8 @@ export class GridRenderer {
     if (depth > 0) {
       var columnIndex = startIndex;
       while (columnIndex <= endIndex) {
-        var {
-          columnCount,
-          calculatedColumnWidths
-        } = metrics;
+        var columnCount = metrics.columnCount,
+          calculatedColumnWidths = metrics.calculatedColumnWidths;
         var modelColumn = getOrThrow(modelColumns, columnIndex);
         var columnGroupName = model.textForColumnHeader(modelColumn, depth);
         var columnGroupColor = model.colorForColumnHeader(modelColumn, depth);
@@ -1051,25 +935,25 @@ export class GridRenderer {
           // 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, _ref4, _userColumnWidths$get;
+            var _modelColumns$get, _ref6, _ref7, _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) {
+            if (prevModelIndex == null || !GridUtils.isSameColumnGroupAtDepth(model, depth, modelColumn, prevModelIndex)) {
               // Previous column not in the same group
               break;
             }
-            var prevColumnWidth = (_ref3 = (_ref4 = (_userColumnWidths$get = userColumnWidths.get(prevModelIndex)) !== null && _userColumnWidths$get !== void 0 ? _userColumnWidths$get : allColumnWidths.get(prevColumnIndex)) !== null && _ref4 !== void 0 ? _ref4 : calculatedColumnWidths.get(prevModelIndex)) !== null && _ref3 !== void 0 ? _ref3 : columnWidth;
+            var prevColumnWidth = (_ref6 = (_ref7 = (_userColumnWidths$get = userColumnWidths.get(prevModelIndex)) !== null && _userColumnWidths$get !== void 0 ? _userColumnWidths$get : allColumnWidths.get(prevColumnIndex)) !== null && _ref7 !== void 0 ? _ref7 : calculatedColumnWidths.get(prevModelIndex)) !== null && _ref6 !== void 0 ? _ref6 : columnWidth;
             columnGroupLeft -= prevColumnWidth;
             prevColumnIndex -= 1;
           }
           var nextColumnIndex = columnIndex + 1;
           while (nextColumnIndex < columnCount && (columnGroupRight - columnGroupLeft < visibleWidth || columnGroupRight < maxX)) {
-            var _modelColumns$get2, _ref5, _userColumnWidths$get2;
+            var _modelColumns$get2, _ref8, _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) {
+            if (!GridUtils.isSameColumnGroupAtDepth(model, depth, modelColumn, nextModelIndex)) {
               // Next column not in the same group
               break;
             }
-            var nextColumnWidth = (_ref5 = (_userColumnWidths$get2 = userColumnWidths.get(nextModelIndex)) !== null && _userColumnWidths$get2 !== void 0 ? _userColumnWidths$get2 : allColumnWidths.get(nextColumnIndex)) !== null && _ref5 !== void 0 ? _ref5 : columnWidth;
+            var nextColumnWidth = (_ref8 = (_userColumnWidths$get2 = userColumnWidths.get(nextModelIndex)) !== null && _userColumnWidths$get2 !== void 0 ? _userColumnWidths$get2 : allColumnWidths.get(nextColumnIndex)) !== null && _ref8 !== void 0 ? _ref8 : columnWidth;
             columnGroupRight += nextColumnWidth;
             nextColumnIndex += 1;
           }
@@ -1104,16 +988,12 @@ export class GridRenderer {
    */
   drawColumnHeaderAtIndex(context, state, index, bounds) {
     var _model$colorForColumn;
-    var {
-      metrics,
-      model
-    } = state;
-    var {
-      modelColumns,
-      allColumnWidths,
-      allColumnXs,
-      gridX
-    } = metrics;
+    var metrics = state.metrics,
+      model = state.model;
+    var modelColumns = metrics.modelColumns,
+      allColumnWidths = metrics.allColumnWidths,
+      allColumnXs = metrics.allColumnXs,
+      gridX = metrics.gridX;
     var width = getOrThrow(allColumnWidths, index);
     var x = getOrThrow(allColumnXs, index) + gridX;
     var modelColumn = getOrThrow(modelColumns, index);
@@ -1129,32 +1009,27 @@ export class GridRenderer {
     if (columnWidth <= 0) {
       return;
     }
-    var {
-      metrics,
-      theme
-    } = state;
-    var {
-      headerHorizontalPadding,
-      columnHeaderHeight,
-      headerBackgroundColor,
-      headerColor,
-      headerSeparatorColor,
-      black,
-      white
-    } = theme;
-    var {
-      fontWidthsLower,
-      fontWidthsUpper,
-      width
-    } = metrics;
+    var metrics = state.metrics,
+      theme = state.theme;
+    var headerHorizontalPadding = theme.headerHorizontalPadding,
+      columnHeaderHeight = theme.columnHeaderHeight,
+      headerBackgroundColor = theme.headerBackgroundColor,
+      headerColor = theme.headerColor,
+      headerSeparatorColor = theme.headerSeparatorColor,
+      black = theme.black,
+      white = theme.white;
+    var fontWidthsLower = metrics.fontWidthsLower,
+      fontWidthsUpper = metrics.fontWidthsUpper,
+      width = metrics.width;
     var maxWidth = columnWidth - headerHorizontalPadding * 2;
-    var {
-      backgroundColor = headerBackgroundColor,
-      separatorColor = headerSeparatorColor
-    } = style !== null && style !== void 0 ? style : {};
-    var {
-      textColor = headerColor
-    } = style !== null && style !== void 0 ? style : {};
+    var _ref9 = style !== null && style !== void 0 ? style : {},
+      _ref9$backgroundColor = _ref9.backgroundColor,
+      backgroundColor = _ref9$backgroundColor === void 0 ? headerBackgroundColor : _ref9$backgroundColor,
+      _ref9$separatorColor = _ref9.separatorColor,
+      separatorColor = _ref9$separatorColor === void 0 ? headerSeparatorColor : _ref9$separatorColor;
+    var _ref0 = style !== null && style !== void 0 ? style : {},
+      _ref0$textColor = _ref0.textColor,
+      textColor = _ref0$textColor === void 0 ? headerColor : _ref0$textColor;
     try {
       var isDarkBackground = GridRenderer.getCachedColorIsDark(backgroundColor);
       var isDarkText = GridRenderer.getCachedColorIsDark(textColor);
@@ -1167,10 +1042,11 @@ export class GridRenderer {
       // 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 : {};
+    var _ref1 = bounds !== null && bounds !== void 0 ? bounds : {},
+      _ref1$minX = _ref1.minX,
+      minX = _ref1$minX === void 0 ? 0 : _ref1$minX,
+      _ref1$maxX = _ref1.maxX,
+      maxX = _ref1$maxX === void 0 ? width : _ref1$maxX;
     context.save();
     context.rect(minX, 0, maxX - minX, columnHeaderHeight);
     context.clip();
@@ -1237,32 +1113,26 @@ export class GridRenderer {
     context.restore();
   }
   drawRowHeaders(context, state) {
-    var {
-      mouseX,
-      mouseY,
-      metrics,
-      theme,
-      draggingRowSeparator
-    } = state;
-    var {
-      gridY,
-      rowHeaderWidth,
-      height,
-      visibleRows,
-      allRowHeights,
-      allRowYs
-    } = metrics;
+    var mouseX = state.mouseX,
+      mouseY = state.mouseY,
+      metrics = state.metrics,
+      theme = state.theme,
+      draggingRowSeparator = state.draggingRowSeparator;
+    var gridY = metrics.gridY,
+      rowHeaderWidth = metrics.rowHeaderWidth,
+      height = metrics.height,
+      visibleRows = metrics.visibleRows,
+      allRowHeights = metrics.allRowHeights,
+      allRowYs = metrics.allRowYs;
     if (rowHeaderWidth <= 0) {
       return;
     }
-    var {
-      headerBackgroundColor,
-      headerColor,
-      headerHiddenSeparatorSize,
-      headerHiddenSeparatorHoverColor,
-      headerSeparatorColor,
-      headerSeparatorHoverColor
-    } = theme;
+    var headerBackgroundColor = theme.headerBackgroundColor,
+      headerColor = theme.headerColor,
+      headerHiddenSeparatorSize = theme.headerHiddenSeparatorSize,
+      headerHiddenSeparatorHoverColor = theme.headerHiddenSeparatorHoverColor,
+      headerSeparatorColor = theme.headerSeparatorColor,
+      headerSeparatorHoverColor = theme.headerSeparatorHoverColor;
     var hiddenSeparatorWidth = rowHeaderWidth * 0.5;
     var hiddenX = rowHeaderWidth * 0.5 - hiddenSeparatorWidth * 0.5;
     context.save();
@@ -1313,9 +1183,9 @@ export class GridRenderer {
       context.fill();
     }
     if (headerSeparatorHoverColor) {
-      var {
-        index: highlightedSeparator = null
-      } = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {};
+      var _ref10 = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {},
+        _ref10$index = _ref10.index,
+        highlightedSeparator = _ref10$index === void 0 ? null : _ref10$index;
       if (highlightedSeparator == null && mouseX != null && mouseY != null) {
         highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
       }
@@ -1362,54 +1232,44 @@ export class GridRenderer {
     if (rowHeight <= 0) {
       return;
     }
-    var {
-      metrics,
-      model,
-      theme
-    } = state;
-    var {
-      modelRows,
-      rowHeaderWidth
-    } = metrics;
+    var metrics = state.metrics,
+      model = state.model,
+      theme = state.theme;
+    var modelRows = metrics.modelRows,
+      rowHeaderWidth = metrics.rowHeaderWidth;
     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;
+    var mouseX = state.mouseX,
+      mouseY = state.mouseY,
+      metrics = state.metrics,
+      model = state.model,
+      theme = state.theme,
+      draggingRowSeparator = state.draggingRowSeparator;
+    var gridY = metrics.gridY,
+      gridX = metrics.gridX,
+      maxX = metrics.maxX,
+      modelRows = metrics.modelRows,
+      rowFooterWidth = metrics.rowFooterWidth,
+      height = metrics.height,
+      verticalBarWidth = metrics.verticalBarWidth,
+      visibleRows = metrics.visibleRows,
+      allRowHeights = metrics.allRowHeights,
+      allRowYs = metrics.allRowYs,
+      width = metrics.width;
     if (rowFooterWidth <= 0) {
       return;
     }
-    var {
-      cellHorizontalPadding,
-      headerBackgroundColor,
-      headerColor,
-      headerHiddenSeparatorSize,
-      headerHiddenSeparatorHoverColor,
-      headerSeparatorColor,
-      headerSeparatorHoverColor
-    } = theme;
+    var cellHorizontalPadding = theme.cellHorizontalPadding,
+      headerBackgroundColor = theme.headerBackgroundColor,
+      headerColor = theme.headerColor,
+      headerHiddenSeparatorSize = theme.headerHiddenSeparatorSize,
+      headerHiddenSeparatorHoverColor = theme.headerHiddenSeparatorHoverColor,
+      headerSeparatorColor = theme.headerSeparatorColor,
+      headerSeparatorHoverColor = theme.headerSeparatorHoverColor;
     var hiddenSeparatorWidth = rowFooterWidth * 0.5;
     var hiddenX = rowFooterWidth * 0.5 - hiddenSeparatorWidth * 0.5;
     var x = Math.min(gridX + maxX, width - rowFooterWidth - verticalBarWidth);
@@ -1461,9 +1321,9 @@ export class GridRenderer {
       context.fill();
     }
     if (headerSeparatorHoverColor) {
-      var {
-        index: highlightedSeparator = null
-      } = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {};
+      var _ref11 = draggingRowSeparator !== null && draggingRowSeparator !== void 0 ? draggingRowSeparator : {},
+        _ref11$index = _ref11.index,
+        highlightedSeparator = _ref11$index === void 0 ? null : _ref11$index;
       if (highlightedSeparator == null && mouseX != null && mouseY != null) {
         highlightedSeparator = GridUtils.getRowSeparatorIndex(mouseX, mouseY, metrics, theme);
       }
@@ -1513,35 +1373,37 @@ export class GridRenderer {
   }
   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;
+    var column = state.cursorColumn,
+      row = state.cursorRow,
+      draggingRow = state.draggingRow,
+      draggingColumn = state.draggingColumn,
+      editingCell = state.editingCell,
+      metrics = state.metrics,
+      model = state.model,
+      selectedRanges = state.selectedRanges,
+      theme = state.theme;
+    var allColumnWidths = metrics.allColumnWidths,
+      allColumnXs = metrics.allColumnXs,
+      allRowHeights = metrics.allRowHeights,
+      allRowYs = metrics.allRowYs,
+      width = metrics.width,
+      height = metrics.height;
+    var _viewport$left = viewport.left,
+      left = _viewport$left === void 0 ? metrics.left : _viewport$left,
+      _viewport$top = viewport.top,
+      top = _viewport$top === void 0 ? metrics.top : _viewport$top,
+      _viewport$right = viewport.right,
+      right = _viewport$right === void 0 ? metrics.right : _viewport$right,
+      _viewport$bottom = viewport.bottom,
+      bottom = _viewport$bottom === void 0 ? metrics.bottom : _viewport$bottom,
+      _viewport$minY = viewport.minY,
+      minY = _viewport$minY === void 0 ? -10 : _viewport$minY,
+      _viewport$maxY = viewport.maxY,
+      maxY = _viewport$maxY === void 0 ? height + 10 : _viewport$maxY,
+      _viewport$minX = viewport.minX,
+      minX = _viewport$minX === void 0 ? -10 : _viewport$minX,
+      _viewport$maxX = viewport.maxX,
+      maxX = _viewport$maxX === void 0 ? width + 10 : _viewport$maxX;
     if (selectedRanges.length === 0) {
       return;
     }
@@ -1611,21 +1473,15 @@ export class GridRenderer {
     }
   }
   drawActiveCell(context, state, column, row) {
-    var {
-      metrics,
-      theme
-    } = state;
-    var {
-      scrollX,
-      scrollY,
-      allColumnWidths,
-      allColumnXs,
-      allRowHeights,
-      allRowYs
-    } = metrics;
-    var {
-      activeCellSelectionBorderWidth: borderWidth
-    } = theme;
+    var metrics = state.metrics,
+      theme = state.theme;
+    var scrollX = metrics.scrollX,
+      scrollY = metrics.scrollY,
+      allColumnWidths = metrics.allColumnWidths,
+      allColumnXs = metrics.allColumnXs,
+      allRowHeights = metrics.allRowHeights,
+      allRowYs = metrics.allRowYs;
+    var borderWidth = theme.activeCellSelectionBorderWidth;
     var cellX = getOrThrow(allColumnXs, column);
     var cellY = getOrThrow(allRowYs, row);
     var cellW = getOrThrow(allColumnWidths, column);
@@ -1646,9 +1502,7 @@ export class GridRenderer {
       h -= borderWidth - y;
       y = borderWidth * 0.5;
     }
-    var {
-      lineWidth
-    } = context;
+    var lineWidth = context.lineWidth;
     context.beginPath();
     context.lineWidth = borderWidth;
     context.strokeStyle = theme.selectionOutlineColor;
@@ -1683,51 +1537,45 @@ export class GridRenderer {
   }
   drawDraggingColumn(context, state) {
     var _modelColumns$get3;
-    var {
-      draggingColumn,
-      metrics,
-      mouseX,
-      theme,
-      model
-    } = state;
+    var draggingColumn = state.draggingColumn,
+      metrics = state.metrics,
+      mouseX = state.mouseX,
+      theme = state.theme,
+      model = state.model;
     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 draggingColumnVisibleRange = draggingColumn.range,
+      draggingColumnDepth = draggingColumn.depth;
+    var gridX = metrics.gridX,
+      gridY = metrics.gridY,
+      allColumnXs = metrics.allColumnXs,
+      allColumnWidths = metrics.allColumnWidths,
+      height = metrics.height,
+      width = metrics.width,
+      columnHeaderMaxDepth = metrics.columnHeaderMaxDepth,
+      columnHeaderHeight = metrics.columnHeaderHeight,
+      movedColumns = metrics.movedColumns,
+      modelColumns = metrics.modelColumns,
+      floatingLeftWidth = metrics.floatingLeftWidth;
     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 _draggingColumnVisibl = _slicedToArray(draggingColumnVisibleRange, 2),
+      startIndex = _draggingColumnVisibl[0],
+      endIndex = _draggingColumnVisibl[1];
     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 backgroundColor = theme.backgroundColor,
+      font = theme.font,
+      headerFont = theme.headerFont,
+      reorderOffset = theme.reorderOffset,
+      shadowBlur = theme.shadowBlur,
+      shadowColor = theme.shadowColor;
     var columnHeaderOffset = (columnHeaderMaxDepth - draggingColumnDepth - 1) * columnHeaderHeight;
     context.save();
     context.translate(gridX, 0);
@@ -1791,33 +1639,27 @@ export class GridRenderer {
     context.restore();
   }
   drawDraggingRow(context, state) {
-    var {
-      draggingRow,
-      draggingRowOffset,
-      metrics,
-      mouseY,
-      theme
-    } = state;
+    var draggingRow = state.draggingRow,
+      draggingRowOffset = state.draggingRowOffset,
+      metrics = state.metrics,
+      mouseY = state.mouseY,
+      theme = state.theme;
     if (draggingRow == null || mouseY == null) {
       return;
     }
-    var {
-      gridX,
-      gridY,
-      allRowYs,
-      allRowHeights,
-      width
-    } = metrics;
+    var gridX = metrics.gridX,
+      gridY = metrics.gridY,
+      allRowYs = metrics.allRowYs,
+      allRowHeights = metrics.allRowHeights,
+      width = metrics.width;
     var y = getOrThrow(allRowYs, draggingRow);
     var rowHeight = getOrThrow(allRowHeights, draggingRow) + 1;
-    var {
-      backgroundColor,
-      font,
-      headerFont,
-      reorderOffset,
-      shadowBlur,
-      shadowColor
-    } = theme;
+    var backgroundColor = theme.backgroundColor,
+      font = theme.font,
+      headerFont = theme.headerFont,
+      reorderOffset = theme.reorderOffset,
+      shadowBlur = theme.shadowBlur,
+      shadowColor = theme.shadowColor;
     context.save();
     context.translate(0, gridY);
 
@@ -1849,49 +1691,43 @@ export class GridRenderer {
     context.restore();
   }
   drawScrollBars(context, state) {
-    var {
-      isDraggingHorizontalScrollBar,
-      isDraggingVerticalScrollBar,
-      isDragging,
-      metrics,
-      mouseX,
-      mouseY,
-      theme
-    } = state;
+    var isDraggingHorizontalScrollBar = state.isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar = state.isDraggingVerticalScrollBar,
+      isDragging = state.isDragging,
+      metrics = state.metrics,
+      mouseX = state.mouseX,
+      mouseY = state.mouseY,
+      theme = state.theme;
     if (theme.scrollBarSize <= 0) {
       return;
     }
-    var {
-      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 width = metrics.width,
+      height = metrics.height,
+      handleHeight = metrics.handleHeight,
+      handleWidth = metrics.handleWidth,
+      scrollX = metrics.scrollX,
+      scrollY = metrics.scrollY,
+      hasHorizontalBar = metrics.hasHorizontalBar,
+      hasVerticalBar = metrics.hasVerticalBar,
+      barWidth = metrics.barWidth,
+      barHeight = metrics.barHeight,
+      barLeft = metrics.barLeft,
+      barTop = metrics.barTop;
+    var scrollBarBackgroundColor = theme.scrollBarBackgroundColor,
+      scrollBarHoverBackgroundColor = theme.scrollBarHoverBackgroundColor,
+      scrollBarCasingColor = theme.scrollBarCasingColor,
+      scrollBarCornerColor = theme.scrollBarCornerColor,
+      scrollBarColor = theme.scrollBarColor,
+      scrollBarHoverColor = theme.scrollBarHoverColor,
+      scrollBarActiveColor = theme.scrollBarActiveColor,
+      scrollBarSize = theme.scrollBarSize,
+      scrollBarHoverSize = theme.scrollBarHoverSize,
+      scrollBarCasingWidth = theme.scrollBarCasingWidth,
+      scrollBarSelectionTick = theme.scrollBarSelectionTick,
+      scrollBarSelectionTickColor = theme.scrollBarSelectionTickColor,
+      scrollBarActiveSelectionTickColor = theme.scrollBarActiveSelectionTickColor,
+      autoSelectRow = theme.autoSelectRow,
+      autoSelectColumn = theme.autoSelectColumn;
     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 &&
@@ -1931,14 +1767,10 @@ export class GridRenderer {
       if (!autoSelectRow && scrollBarSelectionTick && scrollBarSelectionTickColor != null && scrollBarActiveSelectionTickColor != null) {
         context.fillStyle = scrollBarSelectionTickColor;
         // Scrollbar Selection Tick
-        var {
-          selectedRanges,
-          cursorColumn
-        } = state;
-        var {
-          lastLeft,
-          columnCount
-        } = metrics;
+        var selectedRanges = state.selectedRanges,
+          cursorColumn = state.cursorColumn;
+        var lastLeft = metrics.lastLeft,
+          columnCount = metrics.columnCount;
         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);
@@ -1993,14 +1825,10 @@ export class GridRenderer {
       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 _selectedRanges = state.selectedRanges,
+          cursorRow = state.cursorRow;
+        var lastTop = metrics.lastTop,
+          rowCount = metrics.rowCount;
         var getTickY = index => {
           if (index <= lastTop) {
             return index / lastTop * (barHeight - handleHeight);