@pagent-libs/core 0.1.0

package/src/canvas/cell-renderer.ts

@@ -0,0 +1,181 @@
+// Cell Renderer - Handles cell content rendering
+
+import type { CanvasTheme, Rect, TextStyle, CellBorders } from './types';
+import type { Cell, CellStyle, CellFormat } from '../types';
+import { TextRenderer } from './text-renderer';
+import { GridRenderer } from './grid-renderer';
+import { formatNumber } from '../utils/format-utils';
+
+/**
+ * Renders cell content including backgrounds, text, and borders
+ */
+export class CellRenderer {
+  private theme: CanvasTheme;
+  private textRenderer: TextRenderer;
+  private gridRenderer: GridRenderer;
+  
+  constructor(theme: CanvasTheme, textRenderer: TextRenderer) {
+    this.theme = theme;
+    this.textRenderer = textRenderer;
+    this.gridRenderer = new GridRenderer(theme);
+  }
+  
+  /**
+   * Render a cell with all its content
+   */
+  renderCell(
+    ctx: CanvasRenderingContext2D,
+    cell: Cell | undefined,
+    bounds: Rect,
+    style: CellStyle | undefined,
+    format: CellFormat | undefined
+  ): void {
+    // 1. Render background
+    this.renderBackground(ctx, bounds, style);
+    
+    // 2. Render cell content (text/value)
+    if (cell) {
+      const displayValue = this.formatCellValue(cell, format);
+      if (displayValue) {
+        const textStyle = this.cellStyleToTextStyle(style);
+        
+        // Check if text wrapping is enabled
+        if (style?.textWrap) {
+          this.textRenderer.renderWrappedText(ctx, displayValue, bounds, textStyle);
+        } else {
+          this.textRenderer.renderText(ctx, displayValue, bounds, textStyle);
+        }
+      }
+    }
+    
+    // 3. Render borders (if any)
+    if (style) {
+      const borders = this.cellStyleToBorders(style);
+      if (borders.top || borders.right || borders.bottom || borders.left) {
+        this.gridRenderer.renderCellBorders(ctx, bounds, borders);
+      }
+    }
+  }
+  
+  /**
+   * Render an empty cell (just background)
+   */
+  renderEmptyCell(ctx: CanvasRenderingContext2D, bounds: Rect): void {
+    this.renderBackground(ctx, bounds, undefined);
+  }
+  
+  /**
+   * Render cell background
+   */
+  private renderBackground(
+    ctx: CanvasRenderingContext2D,
+    bounds: Rect,
+    style: CellStyle | undefined
+  ): void {
+    const bgColor = style?.backgroundColor ?? this.theme.cellBackgroundColor;
+    
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
+  }
+  
+  /**
+   * Format cell value for display
+   */
+  private formatCellValue(cell: Cell, format: CellFormat | undefined): string {
+    const value = cell.value;
+
+    if (value === null || value === undefined) {
+      return '';
+    }
+
+    // If there's a formula, show the computed value (not the formula)
+    // The formula is shown in the formula bar, not in the cell
+    
+    if (typeof value === 'number') {
+      return this.formatNumber(value, format);
+    }
+    
+    if (typeof value === 'boolean') {
+      return value ? 'TRUE' : 'FALSE';
+    }
+    
+    return String(value);
+  }
+  
+  /**
+   * Format a number according to the cell format
+   */
+  private formatNumber(value: number, format: CellFormat | undefined): string {
+    // Use the comprehensive formatNumber function from format-utils
+    // Pass an empty format object if none is provided
+    return formatNumber(value, format || {});
+  }
+  
+  
+  /**
+   * Convert CellStyle to TextStyle for rendering
+   */
+  private cellStyleToTextStyle(style: CellStyle | undefined): Partial<TextStyle> {
+    if (!style) {
+      return {};
+    }
+    
+    return {
+      fontFamily: style.fontFamily,
+      fontSize: style.fontSize,
+      fontWeight: style.bold ? 'bold' : 'normal',
+      fontStyle: style.italic ? 'italic' : 'normal',
+      color: style.fontColor,
+      textAlign: style.textAlign,
+      verticalAlign: style.verticalAlign,
+      textDecoration: style.textDecoration,
+    };
+  }
+  
+  /**
+   * Convert CellStyle borders to CellBorders
+   */
+  private cellStyleToBorders(style: CellStyle): CellBorders {
+    return {
+      top: this.gridRenderer.parseBorderString(style.borderTop),
+      right: this.gridRenderer.parseBorderString(style.borderRight),
+      bottom: this.gridRenderer.parseBorderString(style.borderBottom),
+      left: this.gridRenderer.parseBorderString(style.borderLeft),
+    };
+  }
+  
+  /**
+   * Render a hyperlink cell (with special styling)
+   */
+  renderHyperlinkCell(
+    ctx: CanvasRenderingContext2D,
+    cell: Cell,
+    bounds: Rect,
+    style: CellStyle | undefined,
+    format: CellFormat | undefined
+  ): void {
+    // Render background
+    this.renderBackground(ctx, bounds, style);
+    
+    // Render text with hyperlink styling
+    const displayValue = this.formatCellValue(cell, format);
+    if (displayValue) {
+      const textStyle: Partial<TextStyle> = {
+        ...this.cellStyleToTextStyle(style),
+        color: '#1a73e8', // Blue color for hyperlinks
+        textDecoration: 'underline',
+      };
+      
+      this.textRenderer.renderText(ctx, displayValue, bounds, textStyle);
+    }
+    
+    // Render borders
+    if (style) {
+      const borders = this.cellStyleToBorders(style);
+      if (borders.top || borders.right || borders.bottom || borders.left) {
+        this.gridRenderer.renderCellBorders(ctx, bounds, borders);
+      }
+    }
+  }
+}
+

package/src/canvas/grid-renderer.ts

@@ -0,0 +1,238 @@
+// Grid Renderer - Handles grid lines and cell borders
+
+import type { CanvasTheme, Viewport, BorderStyle, CellBorders, Rect } from './types';
+
+/**
+ * Renders grid lines and cell borders
+ */
+export class GridRenderer {
+  private theme: CanvasTheme;
+  
+  constructor(theme: CanvasTheme) {
+    this.theme = theme;
+  }
+  
+  /**
+   * Render grid lines for the visible area
+   */
+  renderGridLines(
+    ctx: CanvasRenderingContext2D,
+    viewport: Viewport,
+    rowHeights: Map<number, number>,
+    colWidths: Map<number, number>,
+    defaultRowHeight: number,
+    defaultColWidth: number,
+    headerWidth: number,
+    headerHeight: number,
+    startRow: number,
+    endRow: number,
+    startCol: number,
+    endCol: number,
+    hiddenRows?: Set<number>,
+    hiddenCols?: Set<number>
+  ): void {
+    const { scrollTop, scrollLeft, width, height } = viewport;
+    const hidRows = hiddenRows ?? new Set<number>();
+    const hidCols = hiddenCols ?? new Set<number>();
+    
+    ctx.strokeStyle = this.theme.gridLineColor;
+    ctx.lineWidth = this.theme.gridLineWidth;
+    
+    // Calculate starting positions (skip hidden rows/cols)
+    let startY = headerHeight;
+    for (let r = 0; r < startRow; r++) {
+      if (!hidRows.has(r)) {
+        startY += rowHeights.get(r) ?? defaultRowHeight;
+      }
+    }
+    startY -= scrollTop;
+    
+    let startX = headerWidth;
+    for (let c = 0; c < startCol; c++) {
+      if (!hidCols.has(c)) {
+        startX += colWidths.get(c) ?? defaultColWidth;
+      }
+    }
+    startX -= scrollLeft;
+    
+    ctx.beginPath();
+    
+    // Draw horizontal lines (row separators) - skip hidden rows
+    let y = startY;
+    for (let row = startRow; row <= endRow; row++) {
+      if (hidRows.has(row)) continue;
+      // Snap to pixel grid for crisp lines
+      const lineY = Math.round(y) + 0.5;
+      ctx.moveTo(headerWidth, lineY);
+      ctx.lineTo(width, lineY);
+      y += rowHeights.get(row) ?? defaultRowHeight;
+    }
+    
+    // Draw vertical lines (column separators) - skip hidden columns
+    let x = startX;
+    for (let col = startCol; col <= endCol; col++) {
+      if (hidCols.has(col)) continue;
+      // Snap to pixel grid for crisp lines
+      const lineX = Math.round(x) + 0.5;
+      ctx.moveTo(lineX, headerHeight);
+      ctx.lineTo(lineX, height);
+      x += colWidths.get(col) ?? defaultColWidth;
+    }
+    
+    ctx.stroke();
+  }
+  
+  /**
+   * Parse a CSS border string into a BorderStyle object
+   */
+  parseBorderString(border: string | undefined): BorderStyle | undefined {
+    if (!border || border === 'none') {
+      return undefined;
+    }
+    
+    // Parse formats like "1px solid #000000" or "2px dashed red"
+    const parts = border.split(' ');
+    if (parts.length < 2) {
+      return undefined;
+    }
+    
+    const widthStr = parts[0];
+    const style = parts[1] as 'solid' | 'dashed' | 'dotted';
+    const color = parts[2] ?? '#000000';
+    
+    const width = parseInt(widthStr, 10);
+    if (isNaN(width)) {
+      return undefined;
+    }
+    
+    return { width, style, color };
+  }
+  
+  /**
+   * Render borders for a single cell
+   */
+  renderCellBorders(
+    ctx: CanvasRenderingContext2D,
+    bounds: Rect,
+    borders: CellBorders
+  ): void {
+    const { x, y, width, height } = bounds;
+    
+    // Render each border if specified
+    if (borders.top) {
+      this.renderBorderLine(ctx, x, y, x + width, y, borders.top);
+    }
+    
+    if (borders.right) {
+      this.renderBorderLine(ctx, x + width, y, x + width, y + height, borders.right);
+    }
+    
+    if (borders.bottom) {
+      this.renderBorderLine(ctx, x, y + height, x + width, y + height, borders.bottom);
+    }
+    
+    if (borders.left) {
+      this.renderBorderLine(ctx, x, y, x, y + height, borders.left);
+    }
+  }
+  
+  /**
+   * Render a single border line with the specified style
+   */
+  private renderBorderLine(
+    ctx: CanvasRenderingContext2D,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    style: BorderStyle
+  ): void {
+    ctx.strokeStyle = style.color;
+    ctx.lineWidth = style.width;
+    
+    // Set line dash pattern based on style
+    switch (style.style) {
+      case 'dashed':
+        ctx.setLineDash([4, 2]);
+        break;
+      case 'dotted':
+        ctx.setLineDash([1, 1]);
+        break;
+      case 'solid':
+      default:
+        ctx.setLineDash([]);
+        break;
+    }
+    
+    ctx.beginPath();
+    
+    // Snap to pixel grid for crisp lines
+    const snapX1 = Math.round(x1) + 0.5;
+    const snapY1 = Math.round(y1) + 0.5;
+    const snapX2 = Math.round(x2) + 0.5;
+    const snapY2 = Math.round(y2) + 0.5;
+    
+    ctx.moveTo(snapX1, snapY1);
+    ctx.lineTo(snapX2, snapY2);
+    ctx.stroke();
+    
+    // Reset line dash
+    ctx.setLineDash([]);
+  }
+  
+  /**
+   * Render borders for all visible cells that have custom borders
+   */
+  renderAllCellBorders(
+    ctx: CanvasRenderingContext2D,
+    cellBorders: Map<string, CellBorders>,
+    viewport: Viewport,
+    rowHeights: Map<number, number>,
+    colWidths: Map<number, number>,
+    defaultRowHeight: number,
+    defaultColWidth: number,
+    headerWidth: number,
+    headerHeight: number,
+    startRow: number,
+    endRow: number,
+    startCol: number,
+    endCol: number
+  ): void {
+    const { scrollTop, scrollLeft } = viewport;
+    
+    // Calculate starting positions
+    let startY = headerHeight;
+    for (let r = 0; r < startRow; r++) {
+      startY += rowHeights.get(r) ?? defaultRowHeight;
+    }
+    startY -= scrollTop;
+    
+    let startX = headerWidth;
+    for (let c = 0; c < startCol; c++) {
+      startX += colWidths.get(c) ?? defaultColWidth;
+    }
+    startX -= scrollLeft;
+    
+    // Iterate through visible cells and render borders
+    let y = startY;
+    for (let row = startRow; row < endRow; row++) {
+      const rowHeight = rowHeights.get(row) ?? defaultRowHeight;
+      let x = startX;
+      
+      for (let col = startCol; col < endCol; col++) {
+        const colWidth = colWidths.get(col) ?? defaultColWidth;
+        const cellKey = `${row}:${col}`;
+        const borders = cellBorders.get(cellKey);
+        
+        if (borders) {
+          this.renderCellBorders(ctx, { x, y, width: colWidth, height: rowHeight }, borders);
+        }
+        
+        x += colWidth;
+      }
+      
+      y += rowHeight;
+    }
+  }
+}
+