argent-grid 0.1.0 → 0.2.0

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

@@ -4,9 +4,9 @@
  * Handles drawing of individual cells with prep/draw cycle optimization.
  */
 
-import { Column, IRowNode, ColDef, GridApi } from '../../types/ag-grid-types';
-import { CellDrawContext, ColumnPrepResult, GridTheme } from './types';
+import { ColDef, Column, GridApi, IRowNode } from '../../types/ag-grid-types';
 import { getFontFromTheme } from './theme';
+import { CellDrawContext, ColumnPrepResult, GridTheme } from './types';
 
 /**
  * Get value from object using path (e.g. 'pivotData.NY.salary')
@@ -14,8 +14,8 @@ import { getFontFromTheme } from './theme';
 export function getValueByPath(obj: any, path: string): any {
   if (!path || !obj) return undefined;
   if (!path.includes('.')) return obj[path];
-  
-  return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+
+  return path.split('.').reduce((acc, part) => acc?.[part], obj);
 }
 
 // ============================================================================
@@ -75,7 +75,7 @@ export function drawCell<TData = any>(
   prep: ColumnPrepResult<TData>,
   context: CellDrawContext<TData>
 ): void {
-  const { x, y, width, height, value, formattedValue, column, rowNode } = context;
+  const { rowNode } = context;
 
   // Draw cell background
   drawCellBackground(ctx, context);
@@ -113,7 +113,7 @@ export function drawCellBackground<TData = any>(
  */
 export function drawCellContent<TData = any>(
   ctx: CanvasRenderingContext2D,
-  prep: ColumnPrepResult<TData>,
+  _prep: ColumnPrepResult<TData>,
   context: CellDrawContext<TData>
 ): void {
   const { x, y, width, height, formattedValue, theme } = context;
@@ -142,10 +142,10 @@ export function drawCellContent<TData = any>(
  */
 export function drawGroupIndicators<TData = any>(
   ctx: CanvasRenderingContext2D,
-  prep: ColumnPrepResult<TData>,
+  _prep: ColumnPrepResult<TData>,
   context: CellDrawContext<TData>
 ): void {
-  const { x, y, width, height, column, rowNode, theme, isEvenRow } = context;
+  const { x, y, height, column, rowNode, theme } = context;
 
   if (!rowNode) return;
 
@@ -174,7 +174,7 @@ export function drawGroupIndicators<TData = any>(
       const size = theme.groupIndicatorSize;
       const centerX = Math.floor(indicatorX + size / 2);
       const centerY = Math.floor(indicatorY);
-      
+
       // Horizontal line
       ctx.moveTo(Math.floor(indicatorX), centerY);
       ctx.lineTo(Math.floor(indicatorX + size), centerY);
@@ -212,7 +212,7 @@ export function truncateText(
 
   while (start < end) {
     const mid = Math.floor((start + end) / 2);
-    const truncated = text.slice(0, mid) + '...';
+    const truncated = `${text.slice(0, mid)}...`;
 
     if (ctx.measureText(truncated).width <= maxWidth) {
       start = mid + 1;
@@ -221,16 +221,13 @@ export function truncateText(
     }
   }
 
-  return text.slice(0, Math.max(0, start - 1)) + '...';
+  return `${text.slice(0, Math.max(0, start - 1))}...`;
 }
 
 /**
  * Measure text width
  */
-export function measureText(
-  ctx: CanvasRenderingContext2D,
-  text: string
-): number {
+export function measureText(ctx: CanvasRenderingContext2D, text: string): number {
   return ctx.measureText(text).width;
 }
 
@@ -240,7 +237,7 @@ export function measureText(
 export function calculateColumnWidth<TData = any>(
   ctx: CanvasRenderingContext2D,
   column: Column,
-  colDef: ColDef<TData> | null,
+  _colDef: ColDef<TData> | null,
   theme: GridTheme,
   sampleData: any[],
   maxRows: number = 100
@@ -278,6 +275,16 @@ export function calculateColumnWidth<TData = any>(
 /**
  * Get formatted cell value
  */
+/**
+ * Strip HTML tags from string
+ * Supports basic cellRenderer that returns HTML strings
+ * Note: Only plain text is rendered - colors, backgrounds, etc. are NOT supported
+ */
+export function stripHtmlTags(html: string): string {
+  if (!html) return '';
+  return html.replace(/<[^>]*>/g, '');
+}
+
 export function getFormattedValue<TData = any>(
   value: any,
   colDef: ColDef<TData> | null,
@@ -289,6 +296,27 @@ export function getFormattedValue<TData = any>(
     return '';
   }
 
+  // Use custom cellRenderer if provided
+  if (colDef && typeof colDef.cellRenderer === 'function') {
+    try {
+      const result = colDef.cellRenderer({
+        value,
+        data,
+        node: rowNode,
+        colDef,
+        api,
+      });
+      // Handle both string and Promise<string> returns
+      if (typeof result === 'string') {
+        return stripHtmlTags(result);
+      }
+      // For async renderers, return value as string (will be updated on next render)
+      return String(value);
+    } catch (e) {
+      console.warn('Cell renderer error:', e);
+    }
+  }
+
   // Use custom formatter if provided
   if (colDef && typeof colDef.valueFormatter === 'function') {
     try {
@@ -338,13 +366,7 @@ export function renderRow<TData = any>(
 
     const x = getCellX(column);
     const value = column.field ? getValueByPath(rowNode.data, column.field) : undefined;
-    const formattedValue = getFormattedValue(
-      value,
-      prep.colDef,
-      rowNode.data,
-      rowNode,
-      api
-    );
+    const formattedValue = getFormattedValue(value, prep.colDef, rowNode.data, rowNode, api);
 
     const context: CellDrawContext<TData> = {
       ctx,
@@ -366,4 +388,4 @@ export function renderRow<TData = any>(
 
     drawCell(ctx, prep, context);
   }
-}
+}

package/src/lib/rendering/render/column-utils.ts

@@ -0,0 +1,73 @@
+/**
+ * Column Utilities for Canvas Renderer
+ *
+ * Helper functions for column management and definition lookup.
+ */
+
+import { ColDef, Column, GridApi } from '../../types/ag-grid-types';
+
+/**
+ * Find the Column Definition for a given Column
+ */
+export function getColumnDef<TData = any>(
+  column: Column,
+  gridApi: GridApi<TData>
+): ColDef<TData> | null {
+  const allDefs = gridApi.getColumnDefs();
+  if (!allDefs) return null;
+
+  const targetId = column.colId;
+  const targetField = column.field?.toString();
+
+  for (const def of allDefs) {
+    if ('children' in def) {
+      const found = def.children.find((c) => {
+        const cDef = c as ColDef;
+        return (
+          cDef.colId === targetId ||
+          cDef.field?.toString() === targetId ||
+          (targetField && cDef.field?.toString() === targetField)
+        );
+      });
+      if (found) return found as ColDef<TData>;
+    } else {
+      const cDef = def as ColDef;
+      if (
+        cDef.colId === targetId ||
+        cDef.field?.toString() === targetId ||
+        (targetField && cDef.field?.toString() === targetField)
+      ) {
+        return def as ColDef<TData>;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Get X position for a column
+ */
+export function getColumnX(
+  targetCol: Column,
+  columnPositions: Map<string, number>,
+  scrollLeft: number,
+  leftPinnedWidth: number,
+  rightPinnedWidth: number,
+  viewportWidth: number
+): number {
+  // Use cached column position (O(1) lookup)
+  const baseX = columnPositions.get(targetCol.colId) || 0;
+
+  // Adjust for pinned columns and scroll position
+  if (targetCol.pinned === 'left') {
+    return baseX;
+  } else if (targetCol.pinned === 'right') {
+    // When right-pinned, we need to know the offset from the right edge
+    // Our positions are accumulated from left to right.
+    // We need to find where the right-pinned section starts.
+    const rightPinnedStartX = viewportWidth - rightPinnedWidth;
+    return rightPinnedStartX + (baseX - (viewportWidth - rightPinnedWidth));
+  } else {
+    return leftPinnedWidth - scrollLeft + (baseX - leftPinnedWidth);
+  }
+}

package/src/lib/rendering/render/hit-test.ts

@@ -0,0 +1,55 @@
+/**
+ * Hit Testing for Canvas Renderer
+ *
+ * Utilities for detecting which grid element is under a given coordinate.
+ */
+
+import { Column } from '../../types/ag-grid-types';
+import { getColumnAtX, getRowAtY } from './walk';
+
+/**
+ * Result of a grid hit test
+ */
+export interface HitTestResult {
+  rowIndex: number;
+  columnIndex: number;
+  column: Column | null;
+}
+
+/**
+ * Perform a hit test on the grid
+ */
+export function performHitTest(
+  canvasX: number,
+  canvasY: number,
+  rowHeight: number,
+  scrollTop: number,
+  scrollLeft: number,
+  viewportWidth: number,
+  columns: Column[]
+): HitTestResult {
+  // Use walker utility for row detection
+  const rowIndex = getRowAtY(canvasY, rowHeight, scrollTop);
+
+  // Use walker utility for column detection
+  const result = getColumnAtX(columns, canvasX, scrollLeft, viewportWidth);
+
+  return {
+    rowIndex,
+    columnIndex: result.index,
+    column: result.column,
+  };
+}
+
+/**
+ * Get the horizontal offset of a center column
+ */
+export function getCenterColumnOffset(targetCol: Column, columns: Column[]): number {
+  const centerColumns = columns.filter((c) => !c.pinned);
+  let offset = 0;
+  for (const col of centerColumns) {
+    if (col === targetCol) return offset;
+    offset += col.width;
+  }
+  return offset;
+}

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

@@ -4,102 +4,105 @@
  * Exports all rendering-related modules.
  */
 
-// Types (base definitions)
-export {
-  Rectangle,
-  Point,
-  Size,
-  ScrollPosition,
-  PositionedColumn,
-  ColumnWalkCallback,
-  RowWalkCallback,
-  CellWalkCallback,
-  CellDrawContext,
-  ColumnPrepResult,
-  BlitResult,
-  BufferPair,
-  DamageType,
-  DirtyRegions,
-  GridTheme,
-  PartialTheme,
-  RenderState,
-  VisibleRange,
-  HitTestResult,
-  GridMouseEvent,
-} from './types';
-
-// Theme (re-export the DEFAULT_THEME and utilities)
-export {
-  DEFAULT_THEME,
-  DARK_THEME,
-  THEME_PRESETS,
-  mergeTheme,
-  getFontFromTheme,
-  getRowTheme,
-  getCellBackgroundColor,
-  getThemePreset,
-  createTheme,
-} from './theme';
-
-// Walker functions
-export {
-  walkColumns,
-  getPositionedColumns,
-  getPinnedWidths,
-  walkRows,
-  getVisibleRowRange,
-  getRowY,
-  walkCells,
-  getColumnAtX,
-  getColumnIndex,
-  getTotalColumnWidth,
-  getRowAtY,
-  isRowVisible,
-  calculateVisibleRange,
-} from './walk';
-
+// Live data optimizations
+export { LiveDataOptimizations } from '../live-data-optimizations';
+// Rendering primitives
+export { drawCheckbox, drawGroupIndicator, drawSparkline } from './primitives';
+// Hit testing
+export * from './hit-test';
+// Column utilities
+export * from './column-utils';
 // Blitting optimization
 export {
-  MIN_BLIT_DELTA,
-  MAX_BLIT_DELTA_RATIO,
-  shouldBlit,
-  calculateBlit,
+  BlitState,
   blitLastFrame,
+  calculateBlit,
   createBufferPair,
-  swapBuffers,
   displayBuffer,
+  MAX_BLIT_DELTA_RATIO,
+  MIN_BLIT_DELTA,
   resizeBufferPair,
-  BlitState,
+  shouldBlit,
+  swapBuffers,
 } from './blit';
-
 // Cell rendering (explicit exports to avoid conflicts)
 export {
-  prepColumn,
-  prepColumns,
+  calculateColumnWidth,
   drawCell,
   drawCellBackground,
   drawCellContent,
   drawGroupIndicators,
-  truncateText,
-  measureText,
-  calculateColumnWidth,
   getFormattedValue,
   getValueByPath,
+  measureText,
+  prepColumn,
+  prepColumns,
   renderRow,
+  truncateText,
 } from './cells';
-
 // Grid lines
 export {
-  drawCrispLine,
-  drawHorizontalLine,
-  drawVerticalLine,
-  drawRowLines,
-  drawColumnLines,
-  getColumnBorderPositions,
-  drawGridLines,
   drawBorder,
   drawCellSelectionBorder,
-  drawRangeSelectionBorder,
+  drawColumnLines,
+  drawCrispLine,
+  drawGridLines,
+  drawHorizontalLine,
   drawPinnedRegionBorders,
   drawPinnedRegionShadows,
-} from './lines';
+  drawRangeSelectionBorder,
+  drawRowLines,
+  drawVerticalLine,
+  getColumnBorderPositions,
+} from './lines';
+// Theme (re-export the DEFAULT_THEME and utilities)
+export {
+  createTheme,
+  DARK_THEME,
+  DEFAULT_THEME,
+  getCellBackgroundColor,
+  getFontFromTheme,
+  getRowTheme,
+  getThemePreset,
+  mergeTheme,
+  THEME_PRESETS,
+} from './theme';
+// Types (base definitions)
+export {
+  BlitResult,
+  BufferPair,
+  CellDrawContext,
+  CellWalkCallback,
+  ColumnPrepResult,
+  ColumnWalkCallback,
+  DamageType,
+  DirtyRegions,
+  GridMouseEvent,
+  GridTheme,
+  HitTestResult,
+  PartialTheme,
+  Point,
+  PositionedColumn,
+  Rectangle,
+  RenderState,
+  RowWalkCallback,
+  ScrollPosition,
+  Size,
+  VisibleRange,
+} from './types';
+// Walker functions
+export {
+  calculateVisibleRange,
+  getColumnAtX,
+  getColumnIndex,
+  getPinnedWidths,
+  getPositionedColumns,
+  getRowAtY,
+  getRowY,
+  getTotalColumnWidth,
+  getVisibleRowRange,
+  isRowVisible,
+  walkCells,
+  walkColumns,
+  walkRows,
+} from './walk';

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

@@ -4,7 +4,7 @@
  * Draws grid lines (borders) efficiently.
  */
 
-import { Column, IRowNode } from '../../types/ag-grid-types';
+import { Column, GridApi } from '../../types/ag-grid-types';
 import { GridTheme, Rectangle } from './types';
 
 // ============================================================================
@@ -22,9 +22,14 @@ export function drawCrispLine(
   y2: number
 ): void {
   ctx.beginPath();
-  // Add 0.5 to pixel coordinates for crisp 1px lines
-  ctx.moveTo(Math.floor(x1) + 0.5, Math.floor(y1) + 0.5);
-  ctx.lineTo(Math.floor(x2) + 0.5, Math.floor(y2) + 0.5);
+  // For 1px lines, we want the center of the line to be at X.5
+  const snapX1 = Math.floor(x1) + 0.5;
+  const snapY1 = Math.floor(y1) + 0.5;
+  const snapX2 = Math.floor(x2) + 0.5;
+  const snapY2 = Math.floor(y2) + 0.5;
+
+  ctx.moveTo(snapX1, snapY1);
+  ctx.lineTo(snapX2, snapY2);
   ctx.stroke();
 }
 
@@ -66,7 +71,8 @@ export function drawRowLines(
   rowHeight: number,
   scrollTop: number,
   viewportWidth: number,
-  theme: GridTheme
+  theme: GridTheme,
+  api?: GridApi
 ): void {
   ctx.strokeStyle = theme.borderColor || theme.gridLineColor;
   ctx.lineWidth = 1;
@@ -74,9 +80,12 @@ export function drawRowLines(
   ctx.beginPath();
 
   for (let row = startRow; row <= endRow; row++) {
-    const y = Math.floor(row * rowHeight - scrollTop) + 0.5;
-    ctx.moveTo(0, y);
-    ctx.lineTo(viewportWidth, y);
+    const y = Math.floor(api ? api.getRowY(row) - scrollTop : row * rowHeight - scrollTop);
+    // Draw border at the bottom of the row (y-0.5) to match DOM border-bottom
+    const borderY = y - 0.5;
+    if (borderY < 0) continue; // Skip top border if it's outside
+    ctx.moveTo(0, borderY);
+    ctx.lineTo(viewportWidth, borderY);
   }
 
   ctx.stroke();
@@ -97,7 +106,8 @@ export function drawColumnLines(
   theme: GridTheme,
   startRow: number = 0,
   endRow: number = 0,
-  rowHeight: number = 32
+  rowHeight: number = 32,
+  api?: GridApi
 ): void {
   ctx.strokeStyle = theme.borderColor || theme.gridLineColor;
   ctx.lineWidth = 1;
@@ -111,13 +121,15 @@ export function drawColumnLines(
   );
 
   // Calculate Y range for drawing
-  const drawY1 = Math.max(0, Math.floor(startRow * rowHeight - scrollTop));
-  const drawY2 = Math.min(viewportHeight, Math.floor(endRow * rowHeight - scrollTop));
+  const drawY1 = Math.floor(
+    api ? api.getRowY(startRow) - scrollTop : startRow * rowHeight - scrollTop
+  );
+  const drawY2 = Math.floor(api ? api.getRowY(endRow) - scrollTop : endRow * rowHeight - scrollTop);
 
   ctx.beginPath();
 
   for (const x of columnPositions) {
-    const borderX = Math.floor(x) + 0.5;
+    const borderX = Math.floor(x) - 0.5;
     ctx.moveTo(borderX, drawY1);
     ctx.lineTo(borderX, drawY2);
   }
@@ -137,21 +149,21 @@ export function getColumnBorderPositions(
 ): number[] {
   const positions: number[] = [];
 
-  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);
 
   // Left pinned column borders
   let x = 0;
   for (const col of leftPinned) {
-    x += col.width;
+    x += Math.floor(col.width);
     positions.push(x);
   }
 
   // Center column borders
-  x = leftPinnedWidth - scrollX;
+  x = Math.floor(leftPinnedWidth) - scrollX;
   for (const col of centerColumns) {
-    x += col.width;
+    x += Math.floor(col.width);
     // Only include if visible
     if (x > leftPinnedWidth && x < viewportWidth - rightPinnedWidth) {
       positions.push(x);
@@ -159,9 +171,9 @@ export function getColumnBorderPositions(
   }
 
   // Right pinned column borders
-  x = viewportWidth - rightPinnedWidth;
+  x = Math.floor(viewportWidth - rightPinnedWidth);
   for (const col of rightPinned) {
-    x += col.width;
+    x += Math.floor(col.width);
     positions.push(x);
   }
 
@@ -183,10 +195,11 @@ export function drawGridLines(
   viewportHeight: number,
   leftPinnedWidth: number,
   rightPinnedWidth: number,
-  theme: GridTheme
+  theme: GridTheme,
+  api?: GridApi
 ): void {
   // Draw horizontal lines
-  drawRowLines(ctx, startRow, endRow, rowHeight, scrollTop, viewportWidth, theme);
+  drawRowLines(ctx, startRow, endRow, rowHeight, scrollTop, viewportWidth, theme, api);
 
   // Draw vertical lines
   drawColumnLines(
@@ -201,7 +214,8 @@ export function drawGridLines(
     theme,
     startRow,
     endRow,
-    rowHeight
+    rowHeight,
+    api
   );
 }
 
@@ -261,11 +275,7 @@ export function drawRangeSelectionBorder(
     lineWidth?: number;
   } = {}
 ): void {
-  const {
-    color = '#1976d2',
-    fillColor = 'rgba(25, 118, 210, 0.1)',
-    lineWidth = 1
-  } = options;
+  const { color = '#1976d2', fillColor = 'rgba(25, 118, 210, 0.1)', lineWidth = 1 } = options;
 
   // Draw fill
   if (fillColor) {
@@ -304,7 +314,7 @@ export function drawPinnedRegionBorders(
   // Left pinned border
   if (leftPinnedWidth > 0) {
     ctx.beginPath();
-    const x = Math.floor(leftPinnedWidth) + 0.5;
+    const x = Math.floor(leftPinnedWidth) - 0.5;
     ctx.moveTo(x, 0);
     ctx.lineTo(x, viewportHeight);
     ctx.stroke();
@@ -313,7 +323,7 @@ export function drawPinnedRegionBorders(
   // Right pinned border
   if (rightPinnedWidth > 0) {
     ctx.beginPath();
-    const x = Math.floor(viewportWidth - rightPinnedWidth) + 0.5;
+    const x = Math.floor(viewportWidth - rightPinnedWidth) - 0.5;
     ctx.moveTo(x, 0);
     ctx.lineTo(x, viewportHeight);
     ctx.stroke();
@@ -332,12 +342,7 @@ export function drawPinnedRegionShadows(
 ): void {
   // Left shadow (on the right edge of left pinned)
   if (leftPinnedWidth > 0) {
-    const gradient = ctx.createLinearGradient(
-      leftPinnedWidth,
-      0,
-      leftPinnedWidth + 4,
-      0
-    );
+    const gradient = ctx.createLinearGradient(leftPinnedWidth, 0, leftPinnedWidth + 4, 0);
     gradient.addColorStop(0, 'rgba(0, 0, 0, 0.1)');
     gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
 
@@ -348,16 +353,11 @@ export function drawPinnedRegionShadows(
   // Right shadow (on the left edge of right pinned)
   if (rightPinnedWidth > 0) {
     const shadowX = viewportWidth - rightPinnedWidth;
-    const gradient = ctx.createLinearGradient(
-      shadowX - 4,
-      0,
-      shadowX,
-      0
-    );
+    const gradient = ctx.createLinearGradient(shadowX - 4, 0, shadowX, 0);
     gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
     gradient.addColorStop(1, 'rgba(0, 0, 0, 0.1)');
 
     ctx.fillStyle = gradient;
     ctx.fillRect(shadowX - 4, 0, 4, viewportHeight);
   }
-}
+}