argent-grid 0.1.0

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

@@ -0,0 +1,363 @@
+/**
+ * Grid Lines Rendering for Canvas Renderer
+ *
+ * Draws grid lines (borders) efficiently.
+ */
+
+import { Column, IRowNode } from '../../types/ag-grid-types';
+import { GridTheme, Rectangle } from './types';
+
+// ============================================================================
+// LINE DRAWING UTILITIES
+// ============================================================================
+
+/**
+ * Draw a crisp 1px line (accounts for sub-pixel rendering)
+ */
+export function drawCrispLine(
+  ctx: CanvasRenderingContext2D,
+  x1: number,
+  y1: number,
+  x2: number,
+  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);
+  ctx.stroke();
+}
+
+/**
+ * Draw a horizontal line
+ */
+export function drawHorizontalLine(
+  ctx: CanvasRenderingContext2D,
+  y: number,
+  x1: number,
+  x2: number
+): void {
+  drawCrispLine(ctx, x1, y, x2, y);
+}
+
+/**
+ * Draw a vertical line
+ */
+export function drawVerticalLine(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y1: number,
+  y2: number
+): void {
+  drawCrispLine(ctx, x, y1, x, y2);
+}
+
+// ============================================================================
+// GRID LINE RENDERING
+// ============================================================================
+
+/**
+ * Draw all horizontal row lines
+ */
+export function drawRowLines(
+  ctx: CanvasRenderingContext2D,
+  startRow: number,
+  endRow: number,
+  rowHeight: number,
+  scrollTop: number,
+  viewportWidth: number,
+  theme: GridTheme
+): void {
+  ctx.strokeStyle = theme.borderColor || theme.gridLineColor;
+  ctx.lineWidth = 1;
+
+  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);
+  }
+
+  ctx.stroke();
+}
+
+/**
+ * Draw all vertical column lines
+ */
+export function drawColumnLines(
+  ctx: CanvasRenderingContext2D,
+  columns: Column[],
+  scrollX: number,
+  scrollTop: number,
+  viewportWidth: number,
+  viewportHeight: number,
+  leftPinnedWidth: number,
+  rightPinnedWidth: number,
+  theme: GridTheme,
+  startRow: number = 0,
+  endRow: number = 0,
+  rowHeight: number = 32
+): void {
+  ctx.strokeStyle = theme.borderColor || theme.gridLineColor;
+  ctx.lineWidth = 1;
+
+  const columnPositions = getColumnBorderPositions(
+    columns,
+    scrollX,
+    viewportWidth,
+    leftPinnedWidth,
+    rightPinnedWidth
+  );
+
+  // 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));
+
+  ctx.beginPath();
+
+  for (const x of columnPositions) {
+    const borderX = Math.floor(x) + 0.5;
+    ctx.moveTo(borderX, drawY1);
+    ctx.lineTo(borderX, drawY2);
+  }
+
+  ctx.stroke();
+}
+
+/**
+ * Get column border X positions
+ */
+export function getColumnBorderPositions(
+  columns: Column[],
+  scrollX: number,
+  viewportWidth: number,
+  leftPinnedWidth: number,
+  rightPinnedWidth: number
+): 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);
+
+  // Left pinned column borders
+  let x = 0;
+  for (const col of leftPinned) {
+    x += col.width;
+    positions.push(x);
+  }
+
+  // Center column borders
+  x = leftPinnedWidth - scrollX;
+  for (const col of centerColumns) {
+    x += col.width;
+    // Only include if visible
+    if (x > leftPinnedWidth && x < viewportWidth - rightPinnedWidth) {
+      positions.push(x);
+    }
+  }
+
+  // Right pinned column borders
+  x = viewportWidth - rightPinnedWidth;
+  for (const col of rightPinned) {
+    x += col.width;
+    positions.push(x);
+  }
+
+  return positions;
+}
+
+/**
+ * Draw grid lines for a region
+ */
+export function drawGridLines(
+  ctx: CanvasRenderingContext2D,
+  columns: Column[],
+  startRow: number,
+  endRow: number,
+  rowHeight: number,
+  scrollX: number,
+  scrollTop: number,
+  viewportWidth: number,
+  viewportHeight: number,
+  leftPinnedWidth: number,
+  rightPinnedWidth: number,
+  theme: GridTheme
+): void {
+  // Draw horizontal lines
+  drawRowLines(ctx, startRow, endRow, rowHeight, scrollTop, viewportWidth, theme);
+
+  // Draw vertical lines
+  drawColumnLines(
+    ctx,
+    columns,
+    scrollX,
+    scrollTop,
+    viewportWidth,
+    viewportHeight,
+    leftPinnedWidth,
+    rightPinnedWidth,
+    theme,
+    startRow,
+    endRow,
+    rowHeight
+  );
+}
+
+// ============================================================================
+// BORDER RENDERING
+// ============================================================================
+
+/**
+ * Draw border around a region
+ */
+export function drawBorder(
+  ctx: CanvasRenderingContext2D,
+  rect: Rectangle,
+  color: string,
+  lineWidth: number = 1
+): void {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.strokeRect(
+    Math.floor(rect.x) + 0.5,
+    Math.floor(rect.y) + 0.5,
+    Math.floor(rect.width),
+    Math.floor(rect.height)
+  );
+}
+
+/**
+ * Draw selection border around a cell
+ */
+export function drawCellSelectionBorder(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  color: string = '#1976d2'
+): void {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  ctx.strokeRect(
+    Math.floor(x) + 1,
+    Math.floor(y) + 1,
+    Math.floor(width) - 2,
+    Math.floor(height) - 2
+  );
+}
+
+/**
+ * Draw range selection border
+ */
+export function drawRangeSelectionBorder(
+  ctx: CanvasRenderingContext2D,
+  rect: Rectangle,
+  options: {
+    color?: string;
+    fillColor?: string;
+    lineWidth?: number;
+  } = {}
+): void {
+  const {
+    color = '#1976d2',
+    fillColor = 'rgba(25, 118, 210, 0.1)',
+    lineWidth = 1
+  } = options;
+
+  // Draw fill
+  if (fillColor) {
+    ctx.fillStyle = fillColor;
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+  }
+
+  // Draw border
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lineWidth;
+  ctx.strokeRect(
+    Math.floor(rect.x) + 0.5,
+    Math.floor(rect.y) + 0.5,
+    Math.floor(rect.width),
+    Math.floor(rect.height)
+  );
+}
+
+// ============================================================================
+// PINNED REGION BORDERS
+// ============================================================================
+
+/**
+ * Draw shadow/border for pinned regions
+ */
+export function drawPinnedRegionBorders(
+  ctx: CanvasRenderingContext2D,
+  viewportWidth: number,
+  viewportHeight: number,
+  leftPinnedWidth: number,
+  rightPinnedWidth: number,
+  theme: GridTheme
+): void {
+  ctx.strokeStyle = theme.headerBorderColor;
+
+  // Left pinned border
+  if (leftPinnedWidth > 0) {
+    ctx.beginPath();
+    const x = Math.floor(leftPinnedWidth) + 0.5;
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, viewportHeight);
+    ctx.stroke();
+  }
+
+  // Right pinned border
+  if (rightPinnedWidth > 0) {
+    ctx.beginPath();
+    const x = Math.floor(viewportWidth - rightPinnedWidth) + 0.5;
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, viewportHeight);
+    ctx.stroke();
+  }
+}
+
+/**
+ * Draw pinned region shadows (subtle depth effect)
+ */
+export function drawPinnedRegionShadows(
+  ctx: CanvasRenderingContext2D,
+  viewportWidth: number,
+  viewportHeight: number,
+  leftPinnedWidth: number,
+  rightPinnedWidth: number
+): void {
+  // Left shadow (on the right edge of left pinned)
+  if (leftPinnedWidth > 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)');
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(leftPinnedWidth, 0, 4, viewportHeight);
+  }
+
+  // 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
+    );
+    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);
+  }
+}

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

@@ -0,0 +1,282 @@
+/**
+ * Unit tests for Theme System
+ *
+ * Tests for theme definitions, merging, and utilities.
+ */
+
+import {
+  DEFAULT_THEME,
+  DARK_THEME,
+  THEME_PRESETS,
+  mergeTheme,
+  getFontFromTheme,
+  getRowTheme,
+  getCellBackgroundColor,
+  getThemePreset,
+  createTheme,
+} from './theme';
+import { GridTheme, PartialTheme } from './types';
+
+describe('Theme System', () => {
+  describe('DEFAULT_THEME', () => {
+    it('should have all required properties', () => {
+      expect(DEFAULT_THEME.bgCell).toBeDefined();
+      expect(DEFAULT_THEME.bgCellEven).toBeDefined();
+      expect(DEFAULT_THEME.bgHeader).toBeDefined();
+      expect(DEFAULT_THEME.bgSelection).toBeDefined();
+      expect(DEFAULT_THEME.textCell).toBeDefined();
+      expect(DEFAULT_THEME.textHeader).toBeDefined();
+      expect(DEFAULT_THEME.fontFamily).toBeDefined();
+      expect(DEFAULT_THEME.fontSize).toBeDefined();
+      expect(DEFAULT_THEME.borderColor).toBeDefined();
+      expect(DEFAULT_THEME.cellPadding).toBeDefined();
+      expect(DEFAULT_THEME.headerHeight).toBeDefined();
+      expect(DEFAULT_THEME.rowHeight).toBeDefined();
+    });
+
+    it('should have valid color values', () => {
+      // Colors should be valid hex or rgba
+      const colorPattern = /^(#[0-9a-fA-F]{6}|rgba?\([^)]+\))$/;
+      expect(DEFAULT_THEME.bgCell).toMatch(colorPattern);
+      expect(DEFAULT_THEME.textCell).toMatch(colorPattern);
+    });
+
+    it('should have sensible defaults', () => {
+      expect(DEFAULT_THEME.fontSize).toBeGreaterThan(10);
+      expect(DEFAULT_THEME.fontSize).toBeLessThan(20);
+      expect(DEFAULT_THEME.rowHeight).toBeGreaterThanOrEqual(24);
+      expect(DEFAULT_THEME.cellPadding).toBeGreaterThan(0);
+    });
+  });
+
+  describe('DARK_THEME', () => {
+    it('should be a valid partial theme', () => {
+      expect(DARK_THEME.bgCell).toBeDefined();
+      expect(DARK_THEME.textCell).toBeDefined();
+    });
+
+    it('should have darker background colors', () => {
+      // Dark theme should have darker backgrounds than default
+      expect(DARK_THEME.bgCell).not.toBe(DEFAULT_THEME.bgCell);
+    });
+  });
+
+  describe('mergeTheme', () => {
+    it('should return base theme when no overrides', () => {
+      const result = mergeTheme(DEFAULT_THEME);
+      expect(result).toEqual(DEFAULT_THEME);
+    });
+
+    it('should override single property', () => {
+      const result = mergeTheme(DEFAULT_THEME, { bgCell: '#ff0000' });
+      expect(result.bgCell).toBe('#ff0000');
+      expect(result.textCell).toBe(DEFAULT_THEME.textCell);
+    });
+
+    it('should override multiple properties', () => {
+      const result = mergeTheme(DEFAULT_THEME, {
+        bgCell: '#ff0000',
+        textCell: '#00ff00',
+        fontSize: 16,
+      });
+
+      expect(result.bgCell).toBe('#ff0000');
+      expect(result.textCell).toBe('#00ff00');
+      expect(result.fontSize).toBe(16);
+    });
+
+    it('should apply multiple overrides in order', () => {
+      const result = mergeTheme(
+        DEFAULT_THEME,
+        { bgCell: '#ff0000' },
+        { bgCell: '#00ff00' }
+      );
+
+      expect(result.bgCell).toBe('#00ff00');
+    });
+
+    it('should ignore undefined overrides', () => {
+      const result = mergeTheme(DEFAULT_THEME, undefined as any, { bgCell: '#ff0000' });
+      expect(result.bgCell).toBe('#ff0000');
+    });
+
+    it('should not mutate base theme', () => {
+      const original = { ...DEFAULT_THEME };
+      mergeTheme(DEFAULT_THEME, { bgCell: '#ff0000' });
+      expect(DEFAULT_THEME.bgCell).toBe(original.bgCell);
+    });
+  });
+
+  describe('getFontFromTheme', () => {
+    it('should create font string from theme', () => {
+      const font = getFontFromTheme(DEFAULT_THEME);
+      expect(font).toContain(`${DEFAULT_THEME.fontSize}px`);
+      expect(font).toContain(DEFAULT_THEME.fontFamily);
+    });
+
+    it('should include font weight when specified', () => {
+      const theme: GridTheme = {
+        ...DEFAULT_THEME,
+        fontWeight: 'bold',
+      };
+      const font = getFontFromTheme(theme);
+      expect(font).toContain('bold');
+    });
+  });
+
+  describe('getRowTheme', () => {
+    it('should return selection theme when selected', () => {
+      const result = getRowTheme(DEFAULT_THEME, { isSelected: true });
+      expect(result.bgCell).toBe(DEFAULT_THEME.bgSelection);
+    });
+
+    it('should return hover theme when hovered', () => {
+      const result = getRowTheme(DEFAULT_THEME, { isHovered: true });
+      expect(result.bgCell).toBe(DEFAULT_THEME.bgHover);
+    });
+
+    it('should return group theme for group rows', () => {
+      const result = getRowTheme(DEFAULT_THEME, { isGroup: true });
+      expect(result.bgCell).toBe(DEFAULT_THEME.bgGroupRow || DEFAULT_THEME.bgHeader);
+    });
+
+    it('should return even row theme for even rows', () => {
+      const result = getRowTheme(DEFAULT_THEME, { isEvenRow: true });
+      expect(result.bgCell).toBe(DEFAULT_THEME.bgCellEven);
+    });
+
+    it('should return default cell color for odd rows', () => {
+      const result = getRowTheme(DEFAULT_THEME, { isEvenRow: false });
+      expect(result.bgCell).toBe(DEFAULT_THEME.bgCell);
+    });
+
+    it('should prioritize selection over other states', () => {
+      const result = getRowTheme(DEFAULT_THEME, {
+        isSelected: true,
+        isHovered: true,
+        isEvenRow: true,
+      });
+      expect(result.bgCell).toBe(DEFAULT_THEME.bgSelection);
+    });
+  });
+
+  describe('getCellBackgroundColor', () => {
+    it('should return selection color when selected', () => {
+      const color = getCellBackgroundColor(DEFAULT_THEME, { isSelected: true });
+      expect(color).toBe(DEFAULT_THEME.bgSelection);
+    });
+
+    it('should return hover color when hovered', () => {
+      const color = getCellBackgroundColor(DEFAULT_THEME, { isHovered: true });
+      expect(color).toBe(DEFAULT_THEME.bgHover);
+    });
+
+    it('should return group color for groups', () => {
+      const color = getCellBackgroundColor(DEFAULT_THEME, { isGroup: true });
+      expect(color).toBe(DEFAULT_THEME.bgGroupRow || DEFAULT_THEME.bgHeader);
+    });
+
+    it('should return even row color for even rows', () => {
+      const color = getCellBackgroundColor(DEFAULT_THEME, { isEvenRow: true });
+      expect(color).toBe(DEFAULT_THEME.bgCellEven);
+    });
+
+    it('should return default color for regular cells', () => {
+      const color = getCellBackgroundColor(DEFAULT_THEME, {});
+      expect(color).toBe(DEFAULT_THEME.bgCell);
+    });
+
+    it('should prioritize selection over hover', () => {
+      const color = getCellBackgroundColor(DEFAULT_THEME, {
+        isSelected: true,
+        isHovered: true,
+      });
+      expect(color).toBe(DEFAULT_THEME.bgSelection);
+    });
+  });
+
+  describe('THEME_PRESETS', () => {
+    it('should have default preset', () => {
+      expect(THEME_PRESETS.default).toBeDefined();
+      expect(Object.keys(THEME_PRESETS.default).length).toBe(0);
+    });
+
+    it('should have dark preset', () => {
+      expect(THEME_PRESETS.dark).toBeDefined();
+      expect(THEME_PRESETS.dark.bgCell).toBeDefined();
+    });
+
+    it('should have compact preset', () => {
+      expect(THEME_PRESETS.compact).toBeDefined();
+      expect(THEME_PRESETS.compact.rowHeight).toBeLessThan(DEFAULT_THEME.rowHeight);
+    });
+
+    it('should have comfortable preset', () => {
+      expect(THEME_PRESETS.comfortable).toBeDefined();
+      expect(THEME_PRESETS.comfortable.rowHeight).toBeGreaterThan(DEFAULT_THEME.rowHeight);
+    });
+  });
+
+  describe('getThemePreset', () => {
+    it('should return preset by name', () => {
+      expect(getThemePreset('dark')).toBe(THEME_PRESETS.dark);
+      expect(getThemePreset('compact')).toBe(THEME_PRESETS.compact);
+    });
+
+    it('should return empty object for unknown preset', () => {
+      expect(getThemePreset('nonexistent')).toEqual({});
+    });
+  });
+
+  describe('createTheme', () => {
+    it('should create default theme with no arguments', () => {
+      const theme = createTheme();
+      expect(theme).toEqual(DEFAULT_THEME);
+    });
+
+    it('should create theme from preset', () => {
+      const theme = createTheme('dark');
+      expect(theme.bgCell).toBe(DARK_THEME.bgCell);
+    });
+
+    it('should create theme from preset with overrides', () => {
+      const theme = createTheme('dark', { bgCell: '#custom' });
+      expect(theme.bgCell).toBe('#custom');
+      expect(theme.textCell).toBe(DARK_THEME.textCell);
+    });
+
+    it('should create theme with custom overrides only', () => {
+      const theme = createTheme('default', { rowHeight: 40 });
+      expect(theme.rowHeight).toBe(40);
+      expect(theme.bgCell).toBe(DEFAULT_THEME.bgCell);
+    });
+  });
+
+  describe('Theme consistency', () => {
+    it('dark theme should have all colors defined', () => {
+      const darkFull = mergeTheme(DEFAULT_THEME, DARK_THEME);
+
+      expect(darkFull.bgCell).toBeDefined();
+      expect(darkFull.bgCellEven).toBeDefined();
+      expect(darkFull.bgHeader).toBeDefined();
+      expect(darkFull.bgSelection).toBeDefined();
+      expect(darkFull.textCell).toBeDefined();
+      expect(darkFull.textHeader).toBeDefined();
+      expect(darkFull.borderColor).toBeDefined();
+    });
+
+    it('compact theme should have smaller dimensions', () => {
+      const compactFull = mergeTheme(DEFAULT_THEME, THEME_PRESETS.compact);
+
+      expect(compactFull.rowHeight).toBeLessThan(DEFAULT_THEME.rowHeight);
+      expect(compactFull.fontSize).toBeLessThan(DEFAULT_THEME.fontSize);
+    });
+
+    it('comfortable theme should have larger dimensions', () => {
+      const comfortableFull = mergeTheme(DEFAULT_THEME, THEME_PRESETS.comfortable);
+
+      expect(comfortableFull.rowHeight).toBeGreaterThan(DEFAULT_THEME.rowHeight);
+      expect(comfortableFull.fontSize).toBeGreaterThan(DEFAULT_THEME.fontSize);
+    });
+  });
+});