@lotics/xlsx 0.1.0

package/src/canvas_text.ts

@@ -0,0 +1,454 @@
+// =============================================================================
+// Canvas Text Layout
+// =============================================================================
+//
+// Advanced text rendering for the spreadsheet canvas:
+// - Word wrap using ctx.measureText()
+// - Shrink to fit (reduce font size until text fits cell width)
+// - Text rotation (angled and stacked vertical)
+// - Rich text (per-run font changes)
+// - Indent support
+// - Superscript/subscript
+// - Text overflow into adjacent empty cells
+// =============================================================================
+
+import type { CellStyle, RichTextPart } from "./types";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface TextLayoutInput {
+  text: string;
+  richText?: RichTextPart[];
+  style: CellStyle;
+  cellX: number;
+  cellY: number;
+  cellW: number;
+  cellH: number;
+  /** Callback to check if adjacent cell to the right is empty (for overflow). */
+  isAdjacentEmpty?: (colOffset: number) => boolean;
+  /** Adjacent column widths for overflow calculation. */
+  getAdjacentWidth?: (colOffset: number) => number;
+}
+
+// =============================================================================
+// Main draw function
+// =============================================================================
+
+export function drawCellTextAdvanced(
+  ctx: CanvasRenderingContext2D,
+  input: TextLayoutInput,
+): void {
+  const { text, richText, style, cellX, cellY, cellW, cellH } = input;
+  if (!text && !richText) return;
+
+  const padding = 4;
+  const indentPx = (style.indent ?? 0) * 8;
+  const availW = cellW - padding * 2 - indentPx;
+  const availH = cellH - 4;
+
+  if (availW <= 0 || availH <= 0) return;
+
+  // Handle text rotation
+  const rotation = style.textRotation;
+  if (rotation === "vertical") {
+    drawVerticalText(ctx, text, style, cellX, cellY, cellW, cellH, padding);
+    return;
+  }
+  if (typeof rotation === "number" && rotation !== 0) {
+    drawRotatedText(ctx, text, style, cellX, cellY, cellW, cellH, padding, rotation);
+    return;
+  }
+
+  // Build font string
+  let fontSize = style.fontSize ?? 11;
+  const fontName = style.fontName ?? "Calibri, sans-serif";
+  const bold = style.fontBold ? "bold " : "";
+  const italic = style.fontItalic ? "italic " : "";
+
+  // Rich text rendering
+  if (richText && richText.length > 0) {
+    drawRichText(ctx, richText, style, cellX, cellY, cellW, cellH, padding, indentPx);
+    return;
+  }
+
+  let font = `${italic}${bold}${fontSize}px ${fontName}`;
+  ctx.font = font;
+
+  const textWidth = ctx.measureText(text).width;
+
+  // Shrink to fit
+  if (style.shrinkToFit && textWidth > availW) {
+    const scale = availW / textWidth;
+    fontSize = Math.max(6, Math.floor(fontSize * scale));
+    font = `${italic}${bold}${fontSize}px ${fontName}`;
+    ctx.font = font;
+  }
+
+  // Word wrap
+  if (style.wrapText) {
+    const lines = wrapText(ctx, text, availW);
+    drawWrappedLines(ctx, lines, style, cellX, cellY, cellW, cellH, padding, indentPx, fontSize);
+    return;
+  }
+
+  // Single line — check overflow
+  const finalWidth = ctx.measureText(text).width;
+  let drawWidth = cellW;
+  if (finalWidth > availW && input.isAdjacentEmpty && input.getAdjacentWidth) {
+    // Overflow into adjacent empty cells
+    let extra = 0;
+    for (let offset = 1; offset <= 10; offset++) {
+      if (!input.isAdjacentEmpty(offset)) break;
+      extra += input.getAdjacentWidth(offset);
+      if (availW + extra >= finalWidth) break;
+    }
+    drawWidth = cellW + extra;
+  }
+
+  // Clip and draw
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(cellX + 1, cellY + 1, drawWidth - 2, cellH - 2);
+  ctx.clip();
+
+  // RTL support: readingOrder 2 = right-to-left
+  const isRtl = style.readingOrder === 2;
+  if (isRtl) ctx.direction = "rtl";
+
+  ctx.fillStyle = style.fontColor ?? "#000000";
+  ctx.textBaseline = "alphabetic";
+
+  const effectiveStyle = isRtl ? rtlAlignStyle(style) : style;
+  const { x: textX, align } = computeHAlign(effectiveStyle, text, cellX, cellW, padding, indentPx);
+  const textY = computeVAlign(style, cellY, cellH, fontSize);
+  ctx.textAlign = align;
+  ctx.fillText(text, textX, textY);
+
+  drawDecorations(ctx, style, text, textX, textY, align, fontSize);
+
+  if (isRtl) ctx.direction = "ltr";
+  ctx.restore();
+}
+
+// =============================================================================
+// Word wrap
+// =============================================================================
+
+function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {
+  if (maxWidth <= 0) return [text];
+
+  const words = text.split(/(\s+)/);
+  const lines: string[] = [];
+  let currentLine = "";
+
+  for (const word of words) {
+    const testLine = currentLine + word;
+    if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+      lines.push(currentLine);
+      currentLine = word.trimStart();
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  return lines.length > 0 ? lines : [text];
+}
+
+function drawWrappedLines(
+  ctx: CanvasRenderingContext2D,
+  lines: string[],
+  style: CellStyle,
+  cellX: number,
+  cellY: number,
+  cellW: number,
+  cellH: number,
+  padding: number,
+  indentPx: number,
+  fontSize: number,
+): void {
+  const lineHeight = fontSize * 1.2;
+  const totalHeight = lines.length * lineHeight;
+  const vAlign = style.verticalAlign;
+
+  let startY: number;
+  if (vAlign === "top") {
+    startY = cellY + fontSize + 2;
+  } else if (vAlign === "middle") {
+    startY = cellY + (cellH - totalHeight) / 2 + fontSize;
+  } else {
+    startY = cellY + cellH - totalHeight + fontSize - 2;
+  }
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(cellX + 1, cellY + 1, cellW - 2, cellH - 2);
+  ctx.clip();
+
+  ctx.fillStyle = style.fontColor ?? "#000000";
+  ctx.textBaseline = "alphabetic";
+
+  for (let i = 0; i < lines.length; i++) {
+    const y = startY + i * lineHeight;
+    if (y - fontSize > cellY + cellH) break;
+    if (y < cellY) continue;
+
+    const { x: textX, align } = computeHAlign(style, lines[i], cellX, cellW, padding, indentPx);
+    ctx.textAlign = align;
+    ctx.fillText(lines[i], textX, y);
+  }
+
+  ctx.restore();
+}
+
+// =============================================================================
+// Rich text
+// =============================================================================
+
+function drawRichText(
+  ctx: CanvasRenderingContext2D,
+  parts: RichTextPart[],
+  style: CellStyle,
+  cellX: number,
+  cellY: number,
+  cellW: number,
+  cellH: number,
+  padding: number,
+  indentPx: number,
+): void {
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(cellX + 1, cellY + 1, cellW - 2, cellH - 2);
+  ctx.clip();
+
+  const baseFontSize = style.fontSize ?? 11;
+  const textY = computeVAlign(style, cellY, cellH, baseFontSize);
+
+  // Compute total width for alignment
+  let totalWidth = 0;
+  const runs: { text: string; font: string; color: string; width: number; yOffset: number; fontSize: number }[] = [];
+  for (const part of parts) {
+    const f = part.font;
+    const size = f?.size ?? baseFontSize;
+    const name = f?.name ?? style.fontName ?? "Calibri, sans-serif";
+    const b = (f?.bold ?? style.fontBold) ? "bold " : "";
+    const it = (f?.italic ?? style.fontItalic) ? "italic " : "";
+    const font = `${it}${b}${size}px ${name}`;
+    ctx.font = font;
+    const width = ctx.measureText(part.text).width;
+    let yOffset = 0;
+    if (f?.vertAlign === "superscript") yOffset = -size * 0.35;
+    else if (f?.vertAlign === "subscript") yOffset = size * 0.2;
+    runs.push({ text: part.text, font, color: f?.color ?? style.fontColor ?? "#000000", width, yOffset, fontSize: size });
+    totalWidth += width;
+  }
+
+  // Compute starting X based on alignment
+  const align = style.horizontalAlign;
+  let x: number;
+  if (align === "center") {
+    x = cellX + (cellW - totalWidth) / 2;
+  } else if (align === "right") {
+    x = cellX + cellW - padding - totalWidth;
+  } else {
+    x = cellX + padding + indentPx;
+  }
+
+  ctx.textAlign = "left";
+  ctx.textBaseline = "alphabetic";
+
+  for (const run of runs) {
+    ctx.font = run.font;
+    ctx.fillStyle = run.color;
+    ctx.fillText(run.text, x, textY + run.yOffset);
+    x += run.width;
+  }
+
+  ctx.restore();
+}
+
+// =============================================================================
+// Rotation
+// =============================================================================
+
+function drawRotatedText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  style: CellStyle,
+  cellX: number,
+  cellY: number,
+  cellW: number,
+  cellH: number,
+  padding: number,
+  degrees: number,
+): void {
+  const fontSize = style.fontSize ?? 11;
+  const fontName = style.fontName ?? "Calibri, sans-serif";
+  const bold = style.fontBold ? "bold " : "";
+  const italic = style.fontItalic ? "italic " : "";
+  ctx.font = `${italic}${bold}${fontSize}px ${fontName}`;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(cellX + 1, cellY + 1, cellW - 2, cellH - 2);
+  ctx.clip();
+
+  const cx = cellX + cellW / 2;
+  const cy = cellY + cellH / 2;
+
+  // Excel rotation: 0-90 counterclockwise, 91-180 maps to -1 to -90
+  let radians: number;
+  if (degrees <= 90) {
+    radians = -(degrees * Math.PI) / 180;
+  } else {
+    radians = ((degrees - 90) * Math.PI) / 180;
+  }
+
+  ctx.translate(cx, cy);
+  ctx.rotate(radians);
+
+  ctx.fillStyle = style.fontColor ?? "#000000";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(text, 0, 0);
+
+  ctx.restore();
+}
+
+function drawVerticalText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  style: CellStyle,
+  cellX: number,
+  cellY: number,
+  cellW: number,
+  cellH: number,
+  padding: number,
+): void {
+  const fontSize = style.fontSize ?? 11;
+  const fontName = style.fontName ?? "Calibri, sans-serif";
+  const bold = style.fontBold ? "bold " : "";
+  const italic = style.fontItalic ? "italic " : "";
+  ctx.font = `${italic}${bold}${fontSize}px ${fontName}`;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(cellX + 1, cellY + 1, cellW - 2, cellH - 2);
+  ctx.clip();
+
+  ctx.fillStyle = style.fontColor ?? "#000000";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+
+  const charHeight = fontSize * 1.3;
+  const totalHeight = text.length * charHeight;
+  const startY = cellY + Math.max(padding, (cellH - totalHeight) / 2) + charHeight / 2;
+  const cx = cellX + cellW / 2;
+
+  for (let i = 0; i < text.length; i++) {
+    const y = startY + i * charHeight;
+    if (y > cellY + cellH - padding) break;
+    ctx.fillText(text[i], cx, y);
+  }
+
+  ctx.restore();
+}
+
+// =============================================================================
+// Alignment helpers
+// =============================================================================
+
+function computeHAlign(
+  style: CellStyle,
+  text: string,
+  cellX: number,
+  cellW: number,
+  padding: number,
+  indentPx: number,
+): { x: number; align: CanvasTextAlign } {
+  const align = style.horizontalAlign;
+  if (align === "center") {
+    return { x: cellX + cellW / 2, align: "center" };
+  }
+  if (align === "right") {
+    return { x: cellX + cellW - padding, align: "right" };
+  }
+  // Default: numbers right, text left
+  if (!align) {
+    const isNum = text !== "" && !isNaN(Number(text));
+    if (isNum) return { x: cellX + cellW - padding, align: "right" };
+  }
+  return { x: cellX + padding + indentPx, align: "left" };
+}
+
+function computeVAlign(
+  style: CellStyle,
+  cellY: number,
+  cellH: number,
+  fontSize: number,
+): number {
+  const vAlign = style.verticalAlign;
+  if (vAlign === "top") return cellY + fontSize + 2;
+  if (vAlign === "middle") return cellY + cellH / 2 + fontSize / 3;
+  return cellY + cellH - 4; // bottom (default)
+}
+
+// =============================================================================
+// RTL helper
+// =============================================================================
+
+/** Reverse horizontal alignment for RTL text. */
+function rtlAlignStyle(style: CellStyle): CellStyle {
+  const align = style.horizontalAlign;
+  if (align === "left") return { ...style, horizontalAlign: "right" };
+  if (align === "right") return { ...style, horizontalAlign: "left" };
+  return style;
+}
+
+// =============================================================================
+// Text decorations (underline, strikethrough)
+// =============================================================================
+
+function drawDecorations(
+  ctx: CanvasRenderingContext2D,
+  style: CellStyle,
+  text: string,
+  textX: number,
+  textY: number,
+  textAlign: CanvasTextAlign,
+  fontSize: number,
+): void {
+  if (!style.fontUnderline && !style.fontStrike) return;
+
+  const metrics = ctx.measureText(text);
+  const startX = textAlign === "right" ? textX - metrics.width
+    : textAlign === "center" ? textX - metrics.width / 2
+    : textX;
+
+  ctx.strokeStyle = style.fontColor ?? "#000000";
+
+  if (style.fontUnderline) {
+    ctx.lineWidth = style.fontUnderline === "double" ? 0.5 : 1;
+    const underY = textY + 2;
+    ctx.beginPath();
+    ctx.moveTo(startX, underY);
+    ctx.lineTo(startX + metrics.width, underY);
+    ctx.stroke();
+    if (style.fontUnderline === "double") {
+      ctx.beginPath();
+      ctx.moveTo(startX, underY + 2);
+      ctx.lineTo(startX + metrics.width, underY + 2);
+      ctx.stroke();
+    }
+  }
+
+  if (style.fontStrike) {
+    ctx.lineWidth = 1;
+    const strikeY = textY - fontSize / 3;
+    ctx.beginPath();
+    ctx.moveTo(startX, strikeY);
+    ctx.lineTo(startX + metrics.width, strikeY);
+    ctx.stroke();
+  }
+}