argent-grid 0.1.0 → 0.3.0

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

@@ -4,9 +4,17 @@
  * 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 {
+  drawBadge,
+  drawButton,
+  drawCheckbox,
+  drawProgressBar,
+  drawRating,
+  drawSparkline,
+} from './primitives';
 import { getFontFromTheme } from './theme';
+import { CellDrawContext, ColumnPrepResult, GridTheme } from './types';
 
 /**
  * Get value from object using path (e.g. 'pivotData.NY.salary')
@@ -14,8 +22,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 +83,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);
@@ -109,23 +117,92 @@ export function drawCellBackground<TData = any>(
 }
 
 /**
- * Draw cell content (text)
+ * Draw cell content (text or specialized renderer)
  */
 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;
+  const { x, y, width, height, value, formattedValue, theme, colDef, rowNode, api } = context;
+
+  // 1. Check for dedicated checkbox renderer or internal selection column
+  if (colDef?.cellRenderer === 'checkbox' || context.column.colId === 'ag-Grid-SelectionColumn') {
+    const isChecked = colDef?.cellRenderer === 'checkbox' ? !!value : !!rowNode?.selected;
+    const size = 14;
+    const bx = Math.floor(x + (width - size) / 2);
+    const by = Math.floor(y + (height - size) / 2);
+
+    drawCheckbox(ctx, bx, by, size, isChecked, theme);
+    return; // Dedicated checkbox column only shows checkbox
+  }
+
+  // 2. Check for sparkline
+  if (colDef?.sparklineOptions) {
+    drawSparkline(ctx, value, x, y, width, height, colDef.sparklineOptions);
+    return;
+  }
+
+  // 3. Check for progress bar
+  if (colDef?.progressOptions) {
+    drawProgressBar(ctx, Number(value), x, y, width, height, colDef.progressOptions);
+    return;
+  }
+
+  // 4. Check for badge
+  if (colDef?.badgeOptions) {
+    drawBadge(ctx, String(value ?? ''), x, y, width, height, colDef.badgeOptions);
+    return;
+  }
+
+  // 5. Check for button
+  if (colDef?.buttonOptions) {
+    const opts = colDef.buttonOptions;
+    const label =
+      typeof opts.label === 'function'
+        ? opts.label({
+            value,
+            data: rowNode?.data,
+            node: rowNode!,
+            colDef: colDef!,
+            api: api!,
+          })
+        : opts.label;
+    drawButton(ctx, label, x, y, width, height, opts);
+    return;
+  }
 
+  // 6. Check for rating
+  if (colDef?.cellRenderer === 'rating' || colDef?.ratingOptions) {
+    drawRating(ctx, Number(value), x, y, width, height, colDef?.ratingOptions);
+    return;
+  }
+
+  // 7. Default: Text rendering
   if (!formattedValue) return;
 
   // Calculate text position with padding
   const textX = x + theme.cellPadding;
   const textY = y + height / 2; // Centered vertically
 
+  // Handle cellStyle color
+  let textColor = theme.textCell;
+  if (colDef?.cellStyle) {
+    const style =
+      typeof colDef.cellStyle === 'function'
+        ? colDef.cellStyle({
+            value,
+            data: rowNode?.data,
+            node: rowNode!,
+            column: context.column,
+            api: api!,
+          })
+        : colDef.cellStyle;
+    if (style?.color) textColor = style.color;
+  }
+
   // Set text properties
-  ctx.fillStyle = theme.textCell;
+  ctx.fillStyle = textColor;
   ctx.textBaseline = 'middle';
 
   // Truncate text if needed
@@ -142,10 +219,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 +251,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 +289,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 +298,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 +314,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 +352,19 @@ 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, '')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
 export function getFormattedValue<TData = any>(
   value: any,
   colDef: ColDef<TData> | null,
@@ -289,6 +376,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 {
@@ -311,6 +419,42 @@ export function getFormattedValue<TData = any>(
 // BATCH CELL RENDERING
 // ============================================================================
 
+/**
+ * Get the value for a cell, respecting valueGetter if present
+ */
+export function getCellValue<TData = any>(
+  column: Column,
+  colDef: ColDef<TData> | null,
+  rowNode: IRowNode<TData>,
+  api: GridApi<TData>
+): any {
+  // 1. Prioritize valueGetter
+  if (colDef?.valueGetter) {
+    if (typeof colDef.valueGetter === 'function') {
+      try {
+        return colDef.valueGetter({
+          data: rowNode.data,
+          node: rowNode,
+          colDef,
+          api,
+          column,
+          context: api.getGridOption('context'),
+        } as any);
+      } catch (e) {
+        console.warn('Value getter error:', e);
+      }
+    }
+    // Note: String expressions for valueGetter are not supported in the canvas renderer yet
+  }
+
+  // 2. Fallback to field
+  if (column.field) {
+    return getValueByPath(rowNode.data, column.field);
+  }
+
+  return undefined;
+}
+
 /**
  * Render all cells in a row
  */
@@ -337,14 +481,8 @@ export function renderRow<TData = any>(
     if (!prep) continue;
 
     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 value = getCellValue(column, prep.colDef, rowNode, api);
+    const formattedValue = getFormattedValue(value, prep.colDef, rowNode.data, rowNode, api);
 
     const context: CellDrawContext<TData> = {
       ctx,
@@ -362,8 +500,9 @@ export function renderRow<TData = any>(
       isSelected: options.isSelected || rowNode.selected,
       isHovered: options.isHovered || false,
       isEvenRow,
+      api,
     };
 
     drawCell(ctx, prep, context);
   }
-}
+}

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

@@ -0,0 +1,95 @@
+/**
+ * Column Utilities for Canvas Renderer
+ *
+ * Helper functions for column management and definition lookup.
+ */
+
+import { ColDef, Column, ColumnGroup, GridApi } from '../../types/ag-grid-types';
+
+/**
+ * Check if a column or column group is visible, respecting columnGroupShow
+ */
+export function isColumnVisible(item: Column | ColumnGroup): boolean {
+  if (item.columnGroupShow) {
+    const parent = item.parent;
+    if (parent) {
+      if (item.columnGroupShow === 'open') {
+        return parent.expanded;
+      }
+      if (item.columnGroupShow === 'closed') {
+        return !parent.expanded;
+      }
+    }
+  }
+
+  if ('children' in item) {
+    return item.children.some((child) => isColumnVisible(child));
+  }
+  return item.visible;
+}
+
+/**
+ * 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 Math.floor(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 = Math.floor(viewportWidth - rightPinnedWidth);
+    return rightPinnedStartX + Math.floor(baseX - (viewportWidth - rightPinnedWidth));
+  } else {
+    return Math.floor(leftPinnedWidth - scrollLeft + (baseX - leftPinnedWidth));
+  }
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Hit Testing for Canvas Renderer
+ *
+ * Utilities for detecting which grid element is under a given coordinate.
+ */
+
+import { Column } from '../../types/ag-grid-types';
+import { HitTestResult } from './types';
+import { getColumnAtX, getRowAtY } from './walk';
+
+/**
+ * Perform a hit test on the grid
+ */
+export function performHitTest(
+  canvasX: number,
+  canvasY: number,
+  rowHeight: number,
+  scrollTop: number,
+  scrollLeft: number,
+  viewportWidth: number,
+  columns: Column[],
+  availableWidth?: number
+): 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, availableWidth);
+
+  return {
+    rowIndex,
+    columnIndex: result.index,
+    column: result.column,
+    rowNode: null, // Should be populated by caller if needed
+    hitArea: result.column ? 'cell' : 'empty',
+  };
+}
+
+/**
+ * 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,114 @@
  * 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';
 // 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,
+  getCellValue,
   getFormattedValue,
   getValueByPath,
+  measureText,
+  prepColumn,
+  prepColumns,
   renderRow,
+  truncateText,
 } from './cells';
-
+// Column utilities
+export * from './column-utils';
+// Hit testing
+export * from './hit-test';
 // 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';
+// Rendering primitives
+export {
+  drawBadge,
+  drawButton,
+  drawCheckbox,
+  drawGroupIndicator,
+  drawProgressBar,
+  drawRating,
+  drawSparkline,
+} from './primitives';
+// 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';