argent-grid 0.2.0 → 0.3.0

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

@@ -5,6 +5,14 @@
  */
 
 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';
 
@@ -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>,
   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
@@ -282,7 +359,10 @@ export function calculateColumnWidth<TData = any>(
  */
 export function stripHtmlTags(html: string): string {
   if (!html) return '';
-  return html.replace(/<[^>]*>/g, '');
+  return html
+    .replace(/<[^>]*>/g, '')
+    .replace(/\s+/g, ' ')
+    .trim();
 }
 
 export function getFormattedValue<TData = any>(
@@ -339,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
  */
@@ -365,7 +481,7 @@ export function renderRow<TData = any>(
     if (!prep) continue;
 
     const x = getCellX(column);
-    const value = column.field ? getValueByPath(rowNode.data, column.field) : undefined;
+    const value = getCellValue(column, prep.colDef, rowNode, api);
     const formattedValue = getFormattedValue(value, prep.colDef, rowNode.data, rowNode, api);
 
     const context: CellDrawContext<TData> = {
@@ -384,6 +500,7 @@ 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

@@ -4,7 +4,29 @@
  * Helper functions for column management and definition lookup.
  */
 
-import { ColDef, Column, GridApi } from '../../types/ag-grid-types';
+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
@@ -60,14 +82,14 @@ export function getColumnX(
 
   // Adjust for pinned columns and scroll position
   if (targetCol.pinned === 'left') {
-    return baseX;
+    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 = viewportWidth - rightPinnedWidth;
-    return rightPinnedStartX + (baseX - (viewportWidth - rightPinnedWidth));
+    const rightPinnedStartX = Math.floor(viewportWidth - rightPinnedWidth);
+    return rightPinnedStartX + Math.floor(baseX - (viewportWidth - rightPinnedWidth));
   } else {
-    return leftPinnedWidth - scrollLeft + (baseX - leftPinnedWidth);
+    return Math.floor(leftPinnedWidth - scrollLeft + (baseX - leftPinnedWidth));
   }
 }

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

@@ -5,17 +5,9 @@
  */
 
 import { Column } from '../../types/ag-grid-types';
+import { HitTestResult } from './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
  */
@@ -26,18 +18,21 @@ export function performHitTest(
   scrollTop: number,
   scrollLeft: number,
   viewportWidth: number,
-  columns: Column[]
+  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);
+  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',
   };
 }
 

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

@@ -6,12 +6,6 @@
 
 // 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 {
   BlitState,
@@ -32,6 +26,7 @@ export {
   drawCellBackground,
   drawCellContent,
   drawGroupIndicators,
+  getCellValue,
   getFormattedValue,
   getValueByPath,
   measureText,
@@ -40,6 +35,10 @@ export {
   renderRow,
   truncateText,
 } from './cells';
+// Column utilities
+export * from './column-utils';
+// Hit testing
+export * from './hit-test';
 // Grid lines
 export {
   drawBorder,
@@ -55,6 +54,16 @@ export {
   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,

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

@@ -107,7 +107,8 @@ export function drawColumnLines(
   startRow: number = 0,
   endRow: number = 0,
   rowHeight: number = 32,
-  api?: GridApi
+  api?: GridApi,
+  availableWidth?: number
 ): void {
   ctx.strokeStyle = theme.borderColor || theme.gridLineColor;
   ctx.lineWidth = 1;
@@ -117,7 +118,8 @@ export function drawColumnLines(
     scrollX,
     viewportWidth,
     leftPinnedWidth,
-    rightPinnedWidth
+    rightPinnedWidth,
+    availableWidth
   );
 
   // Calculate Y range for drawing
@@ -145,7 +147,8 @@ export function getColumnBorderPositions(
   scrollX: number,
   viewportWidth: number,
   leftPinnedWidth: number,
-  rightPinnedWidth: number
+  rightPinnedWidth: number,
+  availableWidth?: number
 ): number[] {
   const positions: number[] = [];
 
@@ -153,6 +156,8 @@ export function getColumnBorderPositions(
   const rightPinned = columns.filter((c) => c.pinned === 'right');
   const centerColumns = columns.filter((c) => !c.pinned);
 
+  const effectiveWidth = availableWidth ?? viewportWidth;
+
   // Left pinned column borders
   let x = 0;
   for (const col of leftPinned) {
@@ -162,16 +167,17 @@ export function getColumnBorderPositions(
 
   // Center column borders
   x = Math.floor(leftPinnedWidth) - scrollX;
+  const centerEndX = Math.floor(effectiveWidth - rightPinnedWidth);
   for (const col of centerColumns) {
     x += Math.floor(col.width);
-    // Only include if visible
-    if (x > leftPinnedWidth && x < viewportWidth - rightPinnedWidth) {
+    // Only include if visible in the center area
+    if (x > leftPinnedWidth && x < centerEndX) {
       positions.push(x);
     }
   }
 
   // Right pinned column borders
-  x = Math.floor(viewportWidth - rightPinnedWidth);
+  x = centerEndX;
   for (const col of rightPinned) {
     x += Math.floor(col.width);
     positions.push(x);

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

@@ -7,7 +7,13 @@
  * - Sparklines
  */
 
-import { SparklineOptions } from '../../types/ag-grid-types';
+import {
+  BadgeOptions,
+  ButtonOptions,
+  ProgressOptions,
+  RatingOptions,
+  SparklineOptions,
+} from '../../types/ag-grid-types';
 import { GridTheme } from './types';
 
 /**
@@ -21,15 +27,19 @@ export function drawCheckbox(
   checked: boolean,
   theme: GridTheme
 ): void {
-  // Draw checkbox border
-  ctx.strokeStyle = theme.borderColor;
-  ctx.lineWidth = 1.2;
+  // Draw checkbox border - Use a more obvious color than the standard grid border
+  ctx.strokeStyle = '#94a3b8'; // Slate-400 for better visibility
+  ctx.lineWidth = 1.5;
   ctx.strokeRect(Math.floor(x) + 0.5, Math.floor(y) + 0.5, size, size);
 
   // Draw checkmark if checked
   if (checked) {
-    ctx.strokeStyle = theme.textCell;
-    ctx.lineWidth = 1.2;
+    // Fill background when checked for even better visibility
+    ctx.fillStyle = '#3b82f6'; // Blue-500
+    ctx.fillRect(Math.floor(x) + 0.5, Math.floor(y) + 0.5, size, size);
+
+    ctx.strokeStyle = '#ffffff'; // White checkmark on blue background
+    ctx.lineWidth = 2;
     ctx.beginPath();
     const padding = 3;
     const checkX = x + padding;
@@ -76,6 +86,258 @@ export function drawGroupIndicator(
   ctx.stroke();
 }
 
+/**
+ * Draw a button within a cell.
+ * Returns the bounding box so callers can perform hit-testing.
+ */
+export function drawButton<TData = any>(
+  ctx: CanvasRenderingContext2D,
+  label: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: ButtonOptions<TData> = { label }
+): { bx: number; by: number; bw: number; bh: number } {
+  const variant = options.variant ?? 'primary';
+  const borderRadius = options.borderRadius ?? 4;
+  const paddingX = options.paddingX ?? 12;
+  const fontSize = options.fontSize ?? 12;
+
+  // Variant colour defaults
+  const VARIANTS: Record<string, { fill: string; text: string; border?: string }> = {
+    primary: { fill: '#3b82f6', text: '#ffffff' },
+    secondary: { fill: '#f3f4f6', text: '#374151', border: '#9ca3af' },
+    danger: { fill: '#ef4444', text: '#ffffff' },
+    ghost: { fill: '#f9fafb', text: '#6b7280', border: '#d1d5db' },
+  };
+  const defaults = VARIANTS[variant] ?? VARIANTS.primary;
+  const fillColor = options.fill ?? defaults.fill;
+  const textColor = options.textColor ?? defaults.text;
+  const borderColor = options.borderColor ?? defaults.border;
+
+  ctx.save();
+  ctx.font = `500 ${fontSize}px sans-serif`;
+  const textW = ctx.measureText(label).width;
+  const bw = Math.min(textW + paddingX * 2, width - 8);
+  const bh = fontSize + 10;
+  const bx = Math.floor(x + (width - bw) / 2);
+  const by = Math.floor(y + (height - bh) / 2);
+
+  // Background
+  if (fillColor && fillColor !== 'transparent') {
+    ctx.fillStyle = fillColor;
+    ctx.beginPath();
+    ctx.roundRect(bx, by, bw, bh, borderRadius);
+    ctx.fill();
+  }
+
+  // Border (secondary / ghost)
+  if (borderColor) {
+    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.roundRect(bx + 0.5, by + 0.5, bw - 1, bh - 1, borderRadius);
+    ctx.stroke();
+  }
+
+  // Label
+  ctx.fillStyle = textColor;
+  ctx.textBaseline = 'middle';
+  ctx.textAlign = 'center';
+  ctx.fillText(label, bx + bw / 2, by + bh / 2);
+
+  ctx.restore();
+  return { bx, by, bw, bh };
+}
+
+/**
+ * Draw a badge/pill within a cell
+ */
+export function drawBadge(
+  ctx: CanvasRenderingContext2D,
+  value: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: BadgeOptions = {}
+): void {
+  const colorMap = options.colorMap ?? {};
+  const defaultColors = options.defaultColors ?? { fill: '#f3f4f6', text: '#6b7280' };
+  const { fill: bgColor, text: textColor } = colorMap[value] ?? defaultColors;
+  const borderRadius = options.borderRadius ?? 9999;
+  const paddingX = options.paddingX ?? 8;
+  const fontSize = options.fontSize ?? 11;
+
+  ctx.save();
+  ctx.font = `500 ${fontSize}px sans-serif`;
+  const textWidth = ctx.measureText(value).width;
+  const badgeWidth = textWidth + paddingX * 2;
+  const badgeHeight = fontSize + 8;
+  const bx = Math.floor(x + (width - badgeWidth) / 2);
+  const by = Math.floor(y + (height - badgeHeight) / 2);
+
+  // Draw background pill
+  ctx.fillStyle = bgColor;
+  ctx.beginPath();
+  ctx.roundRect(bx, by, badgeWidth, badgeHeight, Math.min(borderRadius, badgeHeight / 2));
+  ctx.fill();
+
+  // Draw text
+  ctx.fillStyle = textColor;
+  ctx.textBaseline = 'middle';
+  ctx.textAlign = 'center';
+  ctx.fillText(value, bx + badgeWidth / 2, by + badgeHeight / 2);
+
+  ctx.restore();
+}
+
+/**
+ * Draw a progress bar within a cell
+ */
+export function drawProgressBar(
+  ctx: CanvasRenderingContext2D,
+  value: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: ProgressOptions = {}
+): void {
+  const min = options.min ?? 0;
+  const max = options.max ?? 100;
+  const barHeight = options.barHeight ?? 8;
+  const borderRadius = options.borderRadius ?? 4;
+  const trackColor = options.trackColor ?? '#e5e7eb';
+  const showLabel = options.showLabel !== false;
+
+  const pct = Math.min(1, Math.max(0, (value - min) / (max - min)));
+
+  // Layout: bar + optional label
+  const labelWidth = showLabel ? 40 : 0;
+  const labelGap = showLabel ? 8 : 0;
+  const trackWidth = width - labelWidth - labelGap - 8; // 8px left padding
+  const trackX = x + 4;
+  const trackY = Math.floor(y + (height - barHeight) / 2);
+
+  ctx.save();
+
+  // Draw track
+  ctx.fillStyle = trackColor;
+  ctx.beginPath();
+  ctx.roundRect(trackX, trackY, trackWidth, barHeight, borderRadius);
+  ctx.fill();
+
+  // Resolve fill color
+  let fillColor: string;
+  if (typeof options.fill === 'function') {
+    fillColor = options.fill(value);
+  } else if (options.fill) {
+    fillColor = options.fill;
+  } else {
+    // Default traffic-light coloring
+    fillColor = pct >= 0.8 ? '#22c55e' : pct >= 0.6 ? '#eab308' : '#ef4444';
+  }
+
+  // Draw filled portion
+  if (pct > 0) {
+    ctx.fillStyle = fillColor;
+    ctx.beginPath();
+    ctx.roundRect(
+      trackX,
+      trackY,
+      Math.max(borderRadius * 2, trackWidth * pct),
+      barHeight,
+      borderRadius
+    );
+    ctx.fill();
+  }
+
+  // Draw label
+  if (showLabel) {
+    const label = options.labelFormatter ? options.labelFormatter(value) : `${value}%`;
+    ctx.fillStyle = fillColor;
+    ctx.font = 'bold 11px sans-serif';
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    ctx.fillText(label, trackX + trackWidth + labelGap, y + height / 2);
+  }
+
+  ctx.restore();
+}
+
+/**
+ * Draw a rating (stars) within a cell
+ */
+export function drawRating(
+  ctx: CanvasRenderingContext2D,
+  value: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: RatingOptions = {}
+): void {
+  const max = options.max ?? 5;
+  const size = options.size ?? 14;
+  const color = options.color ?? '#ffb400';
+  const emptyColor = options.emptyColor ?? '#e5e7eb';
+  const gap = 2;
+
+  const totalWidth = max * size + (max - 1) * gap;
+  const startX = x + (width - totalWidth) / 2;
+  const centerY = y + height / 2;
+
+  ctx.save();
+
+  for (let i = 0; i < max; i++) {
+    const starX = startX + i * (size + gap);
+    const isFilled = i < Math.round(value);
+
+    ctx.fillStyle = isFilled ? color : emptyColor;
+    drawStar(ctx, starX + size / 2, centerY, 5, size / 2, size / 4);
+    ctx.fill();
+  }
+
+  ctx.restore();
+}
+
+/**
+ * Helper to draw a star shape
+ */
+function drawStar(
+  ctx: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  spikes: number,
+  outerRadius: number,
+  innerRadius: number
+): void {
+  let rot = (Math.PI / 2) * 3;
+  let x = cx;
+  let y = cy;
+  const step = Math.PI / spikes;
+
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - outerRadius);
+
+  for (let i = 0; i < spikes; i++) {
+    x = cx + Math.cos(rot) * outerRadius;
+    y = cy + Math.sin(rot) * outerRadius;
+    ctx.lineTo(x, y);
+    rot += step;
+
+    x = cx + Math.cos(rot) * innerRadius;
+    y = cy + Math.sin(rot) * innerRadius;
+    ctx.lineTo(x, y);
+    rot += step;
+  }
+
+  ctx.lineTo(cx, cy - outerRadius);
+  ctx.closePath();
+}
+
 /**
  * Draw a sparkline within a cell
  */
@@ -141,7 +403,7 @@ export function drawSparkline(
     ctx.lineCap = 'round';
     ctx.stroke();
   } else if (type === 'column' || type === 'bar') {
-    const colOptions = options.column || {};
+    const colOptions = (type === 'bar' ? options.bar || options.column : options.column) || {};
     const colPadding = colOptions.padding || 0.1;
     const colWidth = drawWidth / data.length;
     const barWidth = colWidth * (1 - colPadding);

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

@@ -4,7 +4,7 @@
  * Shared type definitions used across the rendering modules.
  */
 
-import { ColDef, Column, IRowNode } 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>;
 }
 
 /**