argent-grid 0.1.0 → 0.3.0

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

@@ -18,7 +18,7 @@ export const DEFAULT_THEME: GridTheme = {
   bgCell: '#ffffff',
   bgCellEven: '#f8f9fa',
   bgHeader: '#f8f9fa',
-  bgSelection: '#e3f2fd',
+  bgSelection: '#d1e9ff', // Clearer blue for selection
   bgHover: '#f0f2f5',
   bgGroupRow: '#f5f5f5',
 
@@ -61,7 +61,7 @@ export const DARK_THEME: PartialTheme = {
 
   textCell: '#cccccc',
   textHeader: '#ffffff',
-  
+
   borderColor: '#3c3c3c',
   headerBorderColor: '#3c3c3c',
   gridLineColor: '#3c3c3c',
@@ -78,13 +78,13 @@ export function mergeTheme(base: GridTheme, ...overrides: PartialTheme[]): GridT
   if (overrides.length === 0) return base;
 
   let result = { ...base };
-  
+
   for (const override of overrides) {
     if (override) {
       result = { ...result, ...override };
     }
   }
-  
+
   return result;
 }
 
@@ -113,7 +113,7 @@ export function getRowTheme(
   if (isSelected) {
     return { bgCell: baseTheme.bgSelection };
   }
-  
+
   if (isHovered) {
     return { bgCell: baseTheme.bgHover };
   }
@@ -192,10 +192,7 @@ export function getThemePreset(name: string): PartialTheme {
 /**
  * Create a complete theme from a preset name and optional overrides
  */
-export function createTheme(
-  presetName: string = 'default',
-  overrides?: PartialTheme
-): GridTheme {
+export function createTheme(presetName: string = 'default', overrides?: PartialTheme): GridTheme {
   const preset = getThemePreset(presetName);
   return mergeTheme(DEFAULT_THEME, preset, overrides || {});
-}
+}

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

@@ -4,7 +4,7 @@
  * Shared type definitions used across the rendering modules.
  */
 
-import { Column, IRowNode, ColDef, GridApi } from '../../types/ag-grid-types';
+import { ColDef, Column, GridApi, IRowNode } from '../../types/ag-grid-types';
 
 // ============================================================================
 // CORE RENDERING TYPES
@@ -116,6 +116,7 @@ export interface CellDrawContext<TData = any> {
   isSelected: boolean;
   isHovered: boolean;
   isEvenRow: boolean;
+  api: GridApi<TData>;
 }
 
 /**
@@ -276,4 +277,4 @@ export interface GridMouseEvent {
   hitTest: HitTestResult;
   canvasX: number;
   canvasY: number;
-}
+}

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

@@ -4,22 +4,21 @@
  * Tests for walkColumns, walkRows, walkCells, and related utilities.
  */
 
+import { Column } from '../../types/ag-grid-types';
 import {
-  walkColumns,
-  getPositionedColumns,
-  getPinnedWidths,
-  walkRows,
-  getVisibleRowRange,
-  getRowY,
-  walkCells,
+  calculateVisibleRange,
   getColumnAtX,
   getColumnIndex,
-  getTotalColumnWidth,
+  getPinnedWidths,
+  getPositionedColumns,
   getRowAtY,
+  getRowY,
+  getTotalColumnWidth,
+  getVisibleRowRange,
   isRowVisible,
-  calculateVisibleRange,
+  walkColumns,
+  walkRows,
 } from './walk';
-import { Column } from '../../types/ag-grid-types';
 
 // Helper to create mock columns
 function createMockColumn(overrides: Partial<Column> = {}): Column {
@@ -66,11 +65,11 @@ describe('Walker Functions', () => {
   describe('getVisibleRowRange', () => {
     it('should calculate visible row range with buffer', () => {
       const result = getVisibleRowRange(
-        100,  // scrollTop
-        400,  // viewportHeight
-        32,   // rowHeight
+        100, // scrollTop
+        400, // viewportHeight
+        32, // rowHeight
         1000, // totalRowCount
-        5     // buffer
+        5 // buffer
       );
 
       // Starting row: floor(100/32) = 3, minus buffer = -2 -> clamped to 0
@@ -82,11 +81,11 @@ describe('Walker Functions', () => {
 
     it('should clamp start row to 0', () => {
       const result = getVisibleRowRange(
-        0,    // scrollTop
-        400,  // viewportHeight
-        32,   // rowHeight
+        0, // scrollTop
+        400, // viewportHeight
+        32, // rowHeight
         1000, // totalRowCount
-        5     // buffer
+        5 // buffer
       );
 
       expect(result.startRow).toBe(0);
@@ -94,11 +93,11 @@ describe('Walker Functions', () => {
 
     it('should clamp end row to total row count', () => {
       const result = getVisibleRowRange(
-        0,    // scrollTop
-        400,  // viewportHeight
-        32,   // rowHeight
-        10,   // totalRowCount (small)
-        5     // buffer
+        0, // scrollTop
+        400, // viewportHeight
+        32, // rowHeight
+        10, // totalRowCount (small)
+        5 // buffer
       );
 
       expect(result.endRow).toBeLessThanOrEqual(10);
@@ -116,7 +115,7 @@ describe('Walker Functions', () => {
       const visited: string[] = [];
       const xPositions: number[] = [];
 
-      walkColumns(columns, 0, 400, 50, 75, (col, x, width, isPinned, pinSide) => {
+      walkColumns(columns, 0, 400, 50, 75, (col, x, _width, _isPinned, _pinSide) => {
         visited.push(col.colId);
         xPositions.push(x);
       });
@@ -141,7 +140,7 @@ describe('Walker Functions', () => {
 
       // Scroll so center1 and part of center2 are hidden
       const visited: string[] = [];
-      walkColumns(columns, 150, 400, 50, 75, (col, x, width, isPinned) => {
+      walkColumns(columns, 150, 400, 50, 75, (col, _x, _width, _isPinned) => {
         visited.push(col.colId);
       });
 
@@ -156,7 +155,7 @@ describe('Walker Functions', () => {
       const visited: { row: number; y: number }[] = [];
       const getRowNode = (index: number) => ({ data: { id: index } }) as any;
 
-      walkRows(0, 5, 0, 32, getRowNode, (rowIndex, y, height, rowNode) => {
+      walkRows(0, 5, 0, 32, getRowNode, (rowIndex, y, _height, _rowNode) => {
         visited.push({ row: rowIndex, y });
       });
 
@@ -170,7 +169,7 @@ describe('Walker Functions', () => {
       const visited: { row: number; y: number }[] = [];
       const getRowNode = (index: number) => ({ data: { id: index } }) as any;
 
-      walkRows(10, 15, 320, 32, getRowNode, (rowIndex, y, height, rowNode) => {
+      walkRows(10, 15, 320, 32, getRowNode, (rowIndex, y, _height, _rowNode) => {
         visited.push({ row: rowIndex, y });
       });
 
@@ -255,9 +254,7 @@ describe('Walker Functions', () => {
     });
 
     it('should return null for position outside columns', () => {
-      const columns: Column[] = [
-        createMockColumn({ colId: 'col1', width: 100 }),
-      ];
+      const columns: Column[] = [createMockColumn({ colId: 'col1', width: 100 })];
 
       const result = getColumnAtX(columns, 200, 0, 400);
       expect(result.column).toBeNull();
@@ -311,13 +308,13 @@ describe('Walker Functions', () => {
 
       const range = calculateVisibleRange(
         columns,
-        0,    // scrollTop
-        0,    // scrollLeft
-        400,  // viewportWidth
-        400,  // viewportHeight
-        32,   // rowHeight
-        100,  // totalRowCount
-        5     // buffer
+        0, // scrollTop
+        0, // scrollLeft
+        400, // viewportWidth
+        400, // viewportHeight
+        32, // rowHeight
+        100, // totalRowCount
+        5 // buffer
       );
 
       expect(range.startRow).toBe(0);
@@ -357,4 +354,4 @@ describe('Walker Functions', () => {
       expect(getColumnIndex(columns, 'notfound')).toBe(-1);
     });
   });
-});
+});

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

@@ -5,13 +5,13 @@
  * Based on Glide Data Grid's walker architecture.
  */
 
-import { Column, IRowNode, GridApi } from '../../types/ag-grid-types';
-import { 
-  ColumnWalkCallback, 
-  RowWalkCallback, 
+import { Column, GridApi, IRowNode } from '../../types/ag-grid-types';
+import {
   CellWalkCallback,
+  ColumnWalkCallback,
   PositionedColumn,
-  VisibleRange 
+  RowWalkCallback,
+  VisibleRange,
 } from './types';
 
 // ============================================================================
@@ -25,47 +25,52 @@ 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 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) {
-    callback(col, x, col.width, true, 'left');
-    x += col.width;
+    const width = Math.floor(col.width);
+    callback(col, x, width, true, 'left');
+    x += width;
   }
 
   // 2. Center columns (with scroll offset and clipping)
-  const centerStartX = leftPinnedWidth;
-  const centerEndX = viewportWidth - rightPinnedWidth;
-  const centerWidth = centerEndX - centerStartX;
+  const centerStartX = Math.floor(leftPinnedWidth);
+  const centerEndX = Math.floor(effectiveWidth - rightPinnedWidth);
 
-  x = leftPinnedWidth - scrollX;
+  x = centerStartX - scrollX;
   for (const col of centerColumns) {
+    const width = Math.floor(col.width);
     // Skip columns completely outside viewport
-    if (x + col.width < centerStartX) {
-      x += col.width;
+    if (x + width < centerStartX) {
+      x += width;
       continue;
     }
     if (x > centerEndX) {
       break; // Rest of columns are off-screen
     }
 
-    callback(col, x, col.width, false);
-    x += col.width;
+    callback(col, x, width, false);
+    x += width;
   }
 
   // 3. Right pinned columns (no scroll offset)
-  x = viewportWidth - rightPinnedWidth;
+  x = centerEndX;
   for (const col of rightPinned) {
-    callback(col, x, col.width, true, 'right');
-    x += col.width;
+    const width = Math.floor(col.width);
+    callback(col, x, width, true, 'right');
+    x += width;
   }
 }
 
@@ -77,14 +82,21 @@ export function getPositionedColumns(
   scrollX: number,
   viewportWidth: number,
   leftPinnedWidth: number,
-  rightPinnedWidth: number
+  rightPinnedWidth: number,
+  availableWidth?: number
 ): PositionedColumn[] {
   const result: PositionedColumn[] = [];
 
-  walkColumns(columns, scrollX, viewportWidth, leftPinnedWidth, rightPinnedWidth, 
+  walkColumns(
+    columns,
+    scrollX,
+    viewportWidth,
+    leftPinnedWidth,
+    rightPinnedWidth,
     (column, x, width, isPinned, pinSide) => {
       result.push({ column, x, width, isPinned, pinSide });
-    }
+    },
+    availableWidth
   );
 
   return result;
@@ -95,12 +107,12 @@ export function getPositionedColumns(
  */
 export function getPinnedWidths(columns: Column[]): { left: number; right: number } {
   const left = columns
-    .filter(c => c.pinned === 'left')
-    .reduce((sum, c) => sum + c.width, 0);
-  
+    .filter((c) => c.pinned === 'left')
+    .reduce((sum, c) => sum + Math.floor(c.width), 0);
+
   const right = columns
-    .filter(c => c.pinned === 'right')
-    .reduce((sum, c) => sum + c.width, 0);
+    .filter((c) => c.pinned === 'right')
+    .reduce((sum, c) => sum + Math.floor(c.width), 0);
 
   return { left, right };
 }
@@ -124,7 +136,7 @@ export function walkRows(
   for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
     const y = api ? api.getRowY(rowIndex) - scrollTop : rowIndex * rowHeight - scrollTop;
     const rowNode = getRowNode(rowIndex);
-    const height = (api && rowNode) ? (rowNode.rowHeight || rowHeight) : rowHeight;
+    const height = api && rowNode ? rowNode.rowHeight || rowHeight : rowHeight;
     callback(rowIndex, y, height, rowNode);
   }
 }
@@ -141,20 +153,20 @@ export function getVisibleRowRange(
   api?: GridApi
 ): { startRow: number; endRow: number } {
   if (api) {
-    const startRow = Math.max(0, api.getRowAtY(scrollTop) - buffer);
+    const startRow = Math.max(0, Math.min(totalRowCount - 1, api.getRowAtY(scrollTop)) - buffer);
     const endRow = Math.min(
       totalRowCount,
-      api.getRowAtY(scrollTop + viewportHeight) + buffer + 1
+      api.getRowAtY(Math.max(0, scrollTop + viewportHeight)) + buffer + 1
     );
-    return { startRow, endRow };
+    return {
+      startRow: Math.max(0, startRow),
+      endRow: Math.max(0, Math.min(totalRowCount, endRow)),
+    };
   }
 
   const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
   const visibleRowCount = Math.ceil(viewportHeight / rowHeight);
-  const endRow = Math.min(
-    totalRowCount,
-    startRow + visibleRowCount + buffer * 2
-  );
+  const endRow = Math.min(totalRowCount, startRow + visibleRowCount + buffer * 2);
 
   return { startRow, endRow };
 }
@@ -180,7 +192,7 @@ export function walkCells(
   scrollX: number,
   scrollTop: number,
   viewportWidth: number,
-  viewportHeight: number,
+  _viewportHeight: number,
   rowHeight: number,
   getRowNode: (index: number) => IRowNode | null,
   callback: CellWalkCallback
@@ -189,8 +201,13 @@ export function walkCells(
 
   // Walk columns for each row
   walkRows(startRow, endRow, scrollTop, rowHeight, getRowNode, (rowIndex, y, height, rowNode) => {
-    walkColumns(columns, scrollX, viewportWidth, leftPinnedWidth, rightPinnedWidth, 
-      (column, x, width, isPinned) => {
+    walkColumns(
+      columns,
+      scrollX,
+      viewportWidth,
+      leftPinnedWidth,
+      rightPinnedWidth,
+      (column, x, width, _isPinned) => {
         callback(column, rowIndex, x, y, width, height, rowNode);
       }
     );
@@ -208,13 +225,15 @@ 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');
-  const centerColumns = columns.filter(c => !c.pinned);
+  const leftPinned = columns.filter((c) => c.pinned === 'left');
+  const rightPinned = columns.filter((c) => c.pinned === 'right');
+  const centerColumns = columns.filter((c) => !c.pinned);
 
   // Check left pinned
   if (x < leftPinnedWidth) {
@@ -229,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) {
@@ -258,18 +278,18 @@ export function getColumnAtX(
  * Get column index in visible columns array
  */
 export function getColumnIndex(columns: Column[], colId: string): number {
-  return columns.findIndex(c => c.colId === colId);
+  return columns.findIndex((c) => c.colId === colId);
 }
 
 /**
  * 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);
 }
 
 // ============================================================================
-// ROW UTILITIES  
+// ROW UTILITIES
 // ============================================================================
 
 /**
@@ -291,7 +311,7 @@ export function isRowVisible(
   const y = rowIndex * rowHeight;
   const rowBottom = y + rowHeight;
   const viewportBottom = scrollTop + viewportHeight;
-  
+
   return y < viewportBottom && rowBottom > scrollTop;
 }
 
@@ -310,19 +330,26 @@ export function calculateVisibleRange(
   viewportHeight: number,
   rowHeight: number,
   totalRowCount: number,
-  rowBuffer: number = 5
+  rowBuffer: number = 5,
+  availableWidth?: number
 ): VisibleRange {
   const { startRow, endRow } = getVisibleRowRange(
-    scrollTop, viewportHeight, rowHeight, totalRowCount, rowBuffer
+    scrollTop,
+    viewportHeight,
+    rowHeight,
+    totalRowCount,
+    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 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;
@@ -331,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
@@ -357,4 +387,4 @@ export function calculateVisibleRange(
     startColumnIndex,
     endColumnIndex,
   };
-}
+}

package/src/lib/rendering/utils/damage-tracker.spec.ts

@@ -4,12 +4,8 @@
  * Tests for DamageTracker class and related utilities.
  */
 
-import {
-  DamageTracker,
-  getDirtyBounds,
-  mergeRectangles,
-} from './damage-tracker';
 import { DirtyRegions, Rectangle } from '../render/types';
+import { DamageTracker, getDirtyBounds, mergeRectangles } from './damage-tracker';
 
 describe('DamageTracker', () => {
   let tracker: DamageTracker;
@@ -221,7 +217,12 @@ describe('DamageTracker', () => {
         [3, 4],
       ]);
       const cells = tracker.getDirtyCells();
-      expect(cells).toEqual(expect.arrayContaining([[1, 2], [3, 4]]));
+      expect(cells).toEqual(
+        expect.arrayContaining([
+          [1, 2],
+          [3, 4],
+        ])
+      );
     });
   });
 
@@ -441,4 +442,4 @@ describe('mergeRectangles', () => {
   it('should handle empty array', () => {
     expect(mergeRectangles([])).toEqual([]);
   });
-});
+});

package/src/lib/rendering/utils/damage-tracker.ts

@@ -86,10 +86,7 @@ export class DamageTracker {
   /**
    * Mark dirty based on selection change
    */
-  markSelectionChanged(
-    oldSelection: Set<number>,
-    newSelection: Set<number>
-  ): void {
+  markSelectionChanged(oldSelection: Set<number>, newSelection: Set<number>): void {
     // Mark rows that changed selection state
     for (const row of oldSelection) {
       if (!newSelection.has(row)) {
@@ -186,7 +183,7 @@ export class DamageTracker {
    * Get dirty cells
    */
   getDirtyCells(): Array<[number, number]> {
-    return Array.from(this.damagedCells).map(key => {
+    return Array.from(this.damagedCells).map((key) => {
       const [col, row] = key.split(',').map(Number);
       return [col, row];
     });
@@ -201,16 +198,8 @@ export class DamageTracker {
    * - If too many individual cells, promote to row/column
    * - If too many rows/columns, promote to full redraw
    */
-  optimize(thresholds: {
-    maxCells?: number;
-    maxRows?: number;
-    maxColumns?: number;
-  } = {}): void {
-    const {
-      maxCells = 50,
-      maxRows = 100,
-      maxColumns = 20,
-    } = thresholds;
+  optimize(thresholds: { maxCells?: number; maxRows?: number; maxColumns?: number } = {}): void {
+    const { maxCells = 50, maxRows = 100, maxColumns = 20 } = thresholds;
 
     // If too many cells, check if we should promote to rows
     if (this.damagedCells.size > maxCells) {
@@ -361,8 +350,7 @@ export function getDirtyBounds(
 
     const width = columnWidths[col] || 0;
 
-    if (x + width >= 0 && x <= viewportWidth &&
-        y + rowHeight >= 0 && y <= viewportHeight) {
+    if (x + width >= 0 && x <= viewportWidth && y + rowHeight >= 0 && y <= viewportHeight) {
       rects.push({
         x: Math.max(0, x),
         y: Math.max(0, y),
@@ -420,4 +408,4 @@ export function mergeRectangles(rects: Rectangle[]): Rectangle[] {
   }
 
   return merged;
-}
+}

package/src/lib/rendering/utils/index.ts

@@ -4,4 +4,4 @@
  * Exports all utility modules.
  */
 
-export * from './damage-tracker';
+export * from './damage-tracker';