argent-grid 0.2.0 → 0.3.0

package/src/lib/rendering/render/walk.ts

@@ -25,15 +25,18 @@ import {
 export function walkColumns(
   columns: Column[],
   scrollX: number,
-  viewportWidth: number,
+  viewportWidth: number, // Total width of the container
   leftPinnedWidth: number,
   rightPinnedWidth: number,
-  callback: ColumnWalkCallback
+  callback: ColumnWalkCallback,
+  availableWidth?: number // Width excluding vertical scrollbar
 ): void {
   const leftPinned = columns.filter((c) => c.pinned === 'left');
   const rightPinned = columns.filter((c) => c.pinned === 'right');
   const centerColumns = columns.filter((c) => !c.pinned);
 
+  const effectiveWidth = availableWidth ?? viewportWidth;
+
   // 1. Left pinned columns (no scroll offset)
   let x = 0;
   for (const col of leftPinned) {
@@ -44,7 +47,7 @@ export function walkColumns(
 
   // 2. Center columns (with scroll offset and clipping)
   const centerStartX = Math.floor(leftPinnedWidth);
-  const centerEndX = Math.floor(viewportWidth - rightPinnedWidth);
+  const centerEndX = Math.floor(effectiveWidth - rightPinnedWidth);
 
   x = centerStartX - scrollX;
   for (const col of centerColumns) {
@@ -79,7 +82,8 @@ export function getPositionedColumns(
   scrollX: number,
   viewportWidth: number,
   leftPinnedWidth: number,
-  rightPinnedWidth: number
+  rightPinnedWidth: number,
+  availableWidth?: number
 ): PositionedColumn[] {
   const result: PositionedColumn[] = [];
 
@@ -91,7 +95,8 @@ export function getPositionedColumns(
     rightPinnedWidth,
     (column, x, width, isPinned, pinSide) => {
       result.push({ column, x, width, isPinned, pinSide });
-    }
+    },
+    availableWidth
   );
 
   return result;
@@ -148,9 +153,15 @@ export function getVisibleRowRange(
   api?: GridApi
 ): { startRow: number; endRow: number } {
   if (api) {
-    const startRow = Math.max(0, api.getRowAtY(scrollTop) - buffer);
-    const endRow = Math.min(totalRowCount, api.getRowAtY(scrollTop + viewportHeight) + buffer + 1);
-    return { startRow, endRow };
+    const startRow = Math.max(0, Math.min(totalRowCount - 1, api.getRowAtY(scrollTop)) - buffer);
+    const endRow = Math.min(
+      totalRowCount,
+      api.getRowAtY(Math.max(0, scrollTop + viewportHeight)) + buffer + 1
+    );
+    return {
+      startRow: Math.max(0, startRow),
+      endRow: Math.max(0, Math.min(totalRowCount, endRow)),
+    };
   }
 
   const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
@@ -214,9 +225,11 @@ export function getColumnAtX(
   columns: Column[],
   x: number,
   scrollX: number,
-  viewportWidth: number
+  viewportWidth: number,
+  availableWidth?: number
 ): { column: Column | null; index: number; localX: number } {
   const { left: leftPinnedWidth, right: rightPinnedWidth } = getPinnedWidths(columns);
+  const effectiveWidth = availableWidth ?? viewportWidth;
 
   const leftPinned = columns.filter((c) => c.pinned === 'left');
   const rightPinned = columns.filter((c) => c.pinned === 'right');
@@ -235,8 +248,9 @@ export function getColumnAtX(
   }
 
   // Check right pinned
-  if (x > viewportWidth - rightPinnedWidth) {
-    let colX = viewportWidth - rightPinnedWidth;
+  const centerEndX = Math.floor(effectiveWidth - rightPinnedWidth);
+  if (x > centerEndX) {
+    let colX = centerEndX;
     for (let i = 0; i < rightPinned.length; i++) {
       const col = rightPinned[i];
       if (x < colX + col.width) {
@@ -271,7 +285,7 @@ export function getColumnIndex(columns: Column[], colId: string): number {
  * Calculate total width of columns
  */
 export function getTotalColumnWidth(columns: Column[]): number {
-  return columns.reduce((sum, col) => sum + col.width, 0);
+  return columns.reduce((sum, col) => sum + Math.floor(col.width), 0);
 }
 
 // ============================================================================
@@ -316,7 +330,8 @@ export function calculateVisibleRange(
   viewportHeight: number,
   rowHeight: number,
   totalRowCount: number,
-  rowBuffer: number = 5
+  rowBuffer: number = 5,
+  availableWidth?: number
 ): VisibleRange {
   const { startRow, endRow } = getVisibleRowRange(
     scrollTop,
@@ -326,13 +341,15 @@ export function calculateVisibleRange(
     rowBuffer
   );
 
+  const effectiveWidth = availableWidth ?? viewportWidth;
+
   // For columns, we just track indices
   const centerColumns = columns.filter((c) => !c.pinned);
   const leftPinned = columns.filter((c) => c.pinned === 'left');
   const rightPinned = columns.filter((c) => c.pinned === 'right');
 
-  const leftPinnedWidth = leftPinned.reduce((sum, c) => sum + c.width, 0);
-  const rightPinnedWidth = rightPinned.reduce((sum, c) => sum + c.width, 0);
+  const leftPinnedWidth = leftPinned.reduce((sum, c) => sum + Math.floor(c.width), 0);
+  const rightPinnedWidth = rightPinned.reduce((sum, c) => sum + Math.floor(c.width), 0);
 
   // Find first and last visible center column
   let startColumnIndex = leftPinned.length;
@@ -341,21 +358,24 @@ export function calculateVisibleRange(
   let x = leftPinnedWidth - scrollLeft;
   for (let i = 0; i < centerColumns.length; i++) {
     const col = centerColumns[i];
-    if (x + col.width > leftPinnedWidth) {
+    const width = Math.floor(col.width);
+    if (x + width > leftPinnedWidth) {
       startColumnIndex = leftPinned.length + i;
       break;
     }
-    x += col.width;
+    x += width;
   }
 
   x = leftPinnedWidth - scrollLeft;
+  const centerEndX = Math.floor(effectiveWidth - rightPinnedWidth);
   for (let i = 0; i < centerColumns.length; i++) {
     const col = centerColumns[i];
-    if (x > viewportWidth - rightPinnedWidth) {
+    const width = Math.floor(col.width);
+    if (x > centerEndX) {
       endColumnIndex = leftPinned.length + i;
       break;
     }
-    x += col.width;
+    x += width;
   }
 
   // Add right pinned columns

package/src/lib/services/grid.service.spec.ts

@@ -2000,4 +2000,80 @@ describe('GridService', () => {
       });
     });
   });
+
+  describe('Bug Fixes & Regression Protection', () => {
+    it('should only emit optionChanged if the value actually changed', () => {
+      const stateChangeSpy = vi.fn();
+      api.setGridOption('rowHeight', 40); // Initial set
+      service.gridStateChanged$.subscribe(stateChangeSpy);
+
+      api.setGridOption('rowHeight', 40); // Same value
+      expect(stateChangeSpy).not.toHaveBeenCalled();
+
+      api.setGridOption('rowHeight', 50); // Different value
+      expect(stateChangeSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'optionChanged',
+          key: 'rowHeight',
+          value: 50,
+        })
+      );
+    });
+
+    it('should respect groupDefaultExpanded option', () => {
+      const groupingApi = service.createApi(
+        [{ field: 'name', rowGroup: true }, { field: 'age' }],
+        testRowData,
+        { groupDefaultExpanded: 1 }
+      );
+
+      const rowCount = groupingApi.getDisplayedRowCount();
+      // 2 groups (John, Jane, Bob are unique in testRowData name field) + 3 rows = 6 rows total if all expanded
+      // Wait, testRowData has 3 unique names. So 3 groups + 3 rows = 6.
+      expect(rowCount).toBe(6);
+
+      const firstNode = groupingApi.getDisplayedRowAtIndex(0);
+      expect(firstNode?.group).toBe(true);
+      expect(firstNode?.expanded).toBe(true);
+    });
+
+    it('should allow collapsing a group even when groupDefaultExpanded is set', () => {
+      const groupingApi = service.createApi(
+        [{ field: 'name', rowGroup: true }, { field: 'age' }],
+        testRowData,
+        { groupDefaultExpanded: 1 }
+      );
+
+      expect(groupingApi.getDisplayedRowCount()).toBe(6);
+
+      const firstGroup = groupingApi.getDisplayedRowAtIndex(0);
+      expect(firstGroup?.group).toBe(true);
+      expect(firstGroup?.expanded).toBe(true);
+
+      // Collapse it
+      groupingApi.setRowNodeExpanded(firstGroup!, false);
+
+      expect(firstGroup?.expanded).toBe(false);
+      // 3 groups + 3 rows - 1 child of first group = 5
+      expect(groupingApi.getDisplayedRowCount()).toBe(5);
+    });
+
+    it('should remove ag-Grid-AutoColumn when grouping is disabled', () => {
+      api.addRowGroupColumn('name');
+      expect(api.getAllColumns().find((c) => c.colId === 'ag-Grid-AutoColumn')).toBeDefined();
+
+      api.removeRowGroupColumn('name');
+      expect(api.getAllColumns().find((c) => c.colId === 'ag-Grid-AutoColumn')).toBeUndefined();
+    });
+
+    it('should remove ag-Grid-SelectionColumn when checkbox selection is disabled', () => {
+      api.setColumnDefs([{ field: 'id', checkboxSelection: true }, { field: 'name' }]);
+      expect(api.getAllColumns().find((c) => c.colId === 'ag-Grid-SelectionColumn')).toBeDefined();
+
+      api.setColumnDefs([{ field: 'id', checkboxSelection: false }, { field: 'name' }]);
+      expect(
+        api.getAllColumns().find((c) => c.colId === 'ag-Grid-SelectionColumn')
+      ).toBeUndefined();
+    });
+  });
 });