fix: DH-21658: Fix grid rendering hidden columns

Author: dgodinez-dh

packages/grid/src/GridMetricCalculator.ts

@@ -262,11 +262,8 @@ export class GridMetricCalculator {
     const treePaddingY = 0; // We don't support trees on columns (at least not yet)
 
     const visibleRowHeights = this.getVisibleRowHeights(state);
-    const visibleColumnWidths = this.getVisibleColumnWidths(
-      state,
-      firstColumn,
-      treePaddingX
-    );
+    const [visibleColumnWidths, visibleNonHiddenColumns] =
+      this.getVisibleColumnWidths(state, firstColumn, treePaddingX);
 
     // Calculate the metrics for the main grid
     const visibleRows = Array.from(visibleRowHeights.keys());
@@ -616,6 +613,9 @@ export class GridMetricCalculator {
       visibleRows,
       visibleColumns,
 
+      // Array of visible, non-hidden columns, by grid index
+      visibleNonHiddenColumns,
+
       // Map of the height/width of columns in the viewport (excluding floating columns)
       visibleRowHeights,
       visibleColumnWidths,
@@ -1060,18 +1060,19 @@ export class GridMetricCalculator {
   /**
    * Retrieve a map of the width of all the visible columns (non-floating)
    * @param state The grid metric state
-   * @returns The widths of all the visible columns
+   * @returns The widths of all the visible columns and an array of visible, non-hidden columns
    */
   getVisibleColumnWidths(
     state: GridMetricState,
     firstColumn: VisibleIndex = this.getFirstColumn(state),
     treePaddingX: number = this.calculateTreePaddingX(state)
-  ): SizeMap {
+  ): [SizeMap, VisibleIndex[]] {
     const { left, leftOffset, width, model } = state;
 
     let x = 0;
     let column = left;
     const columnWidths = new Map();
+    const visibleNonHiddenColumns: VisibleIndex[] = [];
     const { columnCount, floatingRightColumnCount } = model;
     while (
       x < width + leftOffset &&
@@ -1084,11 +1085,14 @@ export class GridMetricCalculator {
         treePaddingX
       );
       columnWidths.set(column, columnWidth);
+      if (columnWidth > 0) {
+        visibleNonHiddenColumns.push(column);
+      }
       x += columnWidth;
       column += 1;
     }
 
-    return columnWidths;
+    return [columnWidths, visibleNonHiddenColumns];
   }
 
   /**

packages/grid/src/GridMetrics.ts

@@ -133,6 +133,9 @@ export type GridMetrics = {
   visibleRows: readonly VisibleIndex[];
   visibleColumns: readonly VisibleIndex[];
 
+  // Array of visible, non-hidden columns, by grid index
+  visibleNonHiddenColumns: readonly VisibleIndex[];
+
   // Map of the height/width of visible rows/columns
   visibleRowHeights: SizeMap;
   visibleColumnWidths: SizeMap;

packages/grid/src/GridRenderer.ts

@@ -259,7 +259,7 @@ export class GridRenderer {
       floatingBottomRowCount,
       floatingRows,
       rowCount,
-      visibleColumns,
+      visibleNonHiddenColumns,
       allRowYs,
       allRowHeights,
     } = metrics;
@@ -284,7 +284,7 @@ export class GridRenderer {
     this.drawGridLinesForItems(
       context,
       state,
-      visibleColumns,
+      visibleNonHiddenColumns,
       floatingRows,
       theme.floatingGridColumnColor,
       theme.floatingGridRowColor
@@ -293,7 +293,7 @@ export class GridRenderer {
     this.drawCellBackgroundsForItems(
       context,
       state,
-      visibleColumns,
+      visibleNonHiddenColumns,
       floatingRows
     );
 
@@ -323,8 +323,8 @@ export class GridRenderer {
     }
 
     // Draw the cell content...
-    for (let c = 0; c < visibleColumns.length; c += 1) {
-      const column = visibleColumns[c];
+    for (let c = 0; c < visibleNonHiddenColumns.length; c += 1) {
+      const column = visibleNonHiddenColumns[c];
       for (let r = 0; r < floatingRows.length; r += 1) {
         const row = floatingRows[r];
         this.drawCellContent(context, state, column, row);
@@ -850,12 +850,12 @@ export class GridRenderer {
     state: GridRenderState
   ): void {
     const { metrics, theme } = state;
-    const { visibleColumns, visibleRows } = metrics;
+    const { visibleNonHiddenColumns, visibleRows } = metrics;
 
     this.drawGridLinesForItems(
       context,
       state,
-      visibleColumns,
+      visibleNonHiddenColumns,
       visibleRows,
       theme.gridColumnColor,
       theme.gridRowColor
@@ -927,11 +927,11 @@ export class GridRenderer {
     state: GridRenderState
   ): void {
     const { metrics } = state;
-    const { visibleColumns, visibleRows } = metrics;
+    const { visibleNonHiddenColumns, visibleRows } = metrics;
     this.drawCellBackgroundsForItems(
       context,
       state,
-      visibleColumns,
+      visibleNonHiddenColumns,
       visibleRows
     );
   }
@@ -1004,10 +1004,10 @@ export class GridRenderer {
     state: GridRenderState
   ): void {
     const { metrics } = state;
-    const { visibleColumns } = metrics;
+    const { visibleNonHiddenColumns } = metrics;
 
-    for (let i = 0; i < visibleColumns.length; i += 1) {
-      const column = visibleColumns[i];
+    for (let i = 0; i < visibleNonHiddenColumns.length; i += 1) {
+      const column = visibleNonHiddenColumns[i];
       this.drawColumnCellContents(context, state, column);
     }
   }