pagyra-js 0.0.1

package/src/pdf/render.ts

@@ -0,0 +1,210 @@
+import { PdfDocument } from "./primitives/pdf-document.js";
+import type { LayoutTree, PageSize, PdfMetadata, RenderBox, RGBA, TextPaintOptions, Run } from "./types.js";
+import {
+  initHeaderFooterContext,
+  layoutHeaderFooterTrees,
+  adjustPageBoxForHf,
+  computeHfTokens,
+} from "./header-footer.js";
+import { paginateTree } from "./pagination.js";
+import { initFontSystem, finalizeFontSubsets, preflightFontsForPdfa } from "./font/font-registry.js";
+import type { FontConfig } from "../types/fonts.js";
+import { paintLayoutPage } from "./renderer/page-paint.js";
+import { loadBuiltinFontConfig } from "./font/builtin-fonts.js";
+import { registerPageResources, type PageResources } from "./utils/page-resource-registrar.js";
+import { FontRegistryResolver } from "../fonts/font-registry-resolver.js";
+import { applyWordSpacingToGlyphRun, computeGlyphRun } from "./utils/node-text-run-factory.js";
+import { log } from "../logging/debug.js";
+import type { Environment } from "../environment/environment.js";
+
+const DEFAULT_PAGE_SIZE: PageSize = { widthPt: 595.28, heightPt: 841.89 }; // A4 in points
+
+export interface PageMargins {
+  readonly top: number;
+  readonly right: number;
+  readonly bottom: number;
+  readonly left: number;
+}
+
+export interface RenderPdfOptions {
+  readonly pageSize?: PageSize;
+  readonly metadata?: PdfMetadata;
+  readonly fontConfig?: FontConfig;
+  /** Page margins in pixels - used for header/footer positioning */
+  readonly margins?: PageMargins;
+  /** CSS for header/footer styling */
+  readonly headerFooterCss?: string;
+  /** Platform environment (Node/browser) for resource loading during paint */
+  readonly environment?: Environment;
+}
+
+export async function renderPdf(layout: LayoutTree, options: RenderPdfOptions = {}): Promise<Uint8Array> {
+  const fontConfig = options.fontConfig ?? (await loadBuiltinFontConfig());
+  const pageSize = options.pageSize ?? derivePageSize(layout);
+  const pxToPt = createPxToPt(layout.dpiAssumption);
+  const ptToPx = createPtToPx(layout.dpiAssumption);
+  const doc = new PdfDocument(options.metadata ?? {});
+  const fontRegistry = initFontSystem(doc, layout.css);
+
+  // Initialize font embedding if fontConfig provided
+  if (fontConfig) {
+    await fontRegistry.initializeEmbedder(fontConfig);
+  }
+
+  preflightFontsForPdfa(fontRegistry);
+
+  const pageHeightPx = ptToPx(pageSize.heightPt) || 1;
+  const pageWidthPx = ptToPx(pageSize.widthPt) || 1;
+
+  // Use provided margins or derive from layout
+  const margins = options.margins ?? {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  };
+
+  const baseContentBox = computeBaseContentBox(layout.root, pageSize, pxToPt);
+  const hfContext = initHeaderFooterContext(layout.hf, pageSize, baseContentBox);
+  const hfLayout = layoutHeaderFooterTrees(hfContext, pxToPt);
+
+  // Adjust content area to exclude header/footer heights
+  // This implements the Word/mPDF behavior where headers and footers
+  // reduce the available content area
+  const adjustedContentBox = adjustPageBoxForHf(baseContentBox, hfLayout);
+
+  // Calculate effective page height for pagination
+  // When headers/footers are present, the content area is reduced
+  const effectiveContentHeightPx = pageHeightPx - hfLayout.headerHeightPx - hfLayout.footerHeightPx;
+  const paginationHeight = effectiveContentHeightPx > 0 ? effectiveContentHeightPx : pageHeightPx;
+
+  const pages = paginateTree(layout.root, { pageHeight: paginationHeight });
+  const totalPages = pages.length;
+  const tokens = computeHfTokens(layout.hf.placeholders ?? {}, totalPages, options.metadata);
+  const pageBackground = resolvePageBackground(layout.root);
+
+  // Create FontResolver and enrich all textRuns with GlyphRun data
+  const fontResolver = new FontRegistryResolver(fontRegistry);
+  await enrichTreeWithGlyphRuns(layout.root, fontResolver);
+
+  const headerFooterTextOptions: TextPaintOptions = { fontSizePt: 10, fontFamily: layout.hf.fontFamily };
+
+  for (let index = 0; index < pages.length; index++) {
+    const pageTree = pages[index];
+    const pageNumber = index + 1;
+
+  const painterResult = await paintLayoutPage({
+    pageTree,
+    pageNumber,
+    totalPages,
+    pageSize,
+    pxToPt,
+    pageWidthPx,
+    pageHeightPx,
+    fontRegistry,
+    headerFooterLayout: hfLayout,
+    tokens,
+    headerFooterTextOptions,
+    pageBackground,
+    margins,
+    headerFooterCss: options.headerFooterCss,
+    environment: options.environment,
+  });
+
+    const resources = registerPageResources(doc, painterResult);
+
+    doc.addPage({
+      width: pageSize.widthPt,
+      height: pageSize.heightPt,
+      contents: painterResult.content,
+      resources,
+      annotations: [],
+    });
+  }
+
+  finalizeFontSubsets(fontRegistry);
+  return doc.finalize();
+}
+
+function resolvePageBackground(root: RenderBox): RGBA | undefined {
+  if (root.background?.color) {
+    return root.background.color;
+  }
+  for (const child of root.children) {
+    if (child.tagName === "body" || child.tagName === "html") {
+      const candidate = child.background?.color;
+      if (candidate) {
+        return candidate;
+      }
+    }
+  }
+  return undefined;
+}
+
+function createPxToPt(dpi: number): (px: number) => number {
+  const safeDpi = dpi > 0 ? dpi : 96;
+  const factor = 72 / safeDpi;
+  return (px: number) => px * factor;
+}
+
+function createPtToPx(dpi: number): (pt: number) => number {
+  const safeDpi = dpi > 0 ? dpi : 96;
+  const factor = safeDpi / 72;
+  return (pt: number) => pt * factor;
+}
+
+function derivePageSize(layout: LayoutTree): PageSize {
+  const widthPt = layout.root.contentBox.width > 0 ? createPxToPt(layout.dpiAssumption)(layout.root.contentBox.width) : DEFAULT_PAGE_SIZE.widthPt;
+  const heightPt =
+    layout.root.contentBox.height > 0 ? createPxToPt(layout.dpiAssumption)(layout.root.contentBox.height) : DEFAULT_PAGE_SIZE.heightPt;
+  return { widthPt, heightPt };
+}
+
+function computeBaseContentBox(root: RenderBox, pageSize: PageSize, pxToPt: (px: number) => number) {
+  const widthPx = root.contentBox.width > 0 ? root.contentBox.width : pageSize.widthPt / pxToPt(1);
+  const heightPx = root.contentBox.height > 0 ? root.contentBox.height : pageSize.heightPt / pxToPt(1);
+  return {
+    x: root.contentBox.x,
+    y: root.contentBox.y,
+    width: widthPx,
+    height: heightPx,
+  };
+}
+
+async function enrichTreeWithGlyphRuns(root: RenderBox, fontResolver: FontRegistryResolver): Promise<void> {
+  async function enrichRun(run: Run): Promise<void> {
+    log('font', 'debug', `Attempting to enrich: "${run.text}", family: ${run.fontFamily}`);
+    if (run.glyphs) {
+      log('font', 'debug', "Already has glyphs, skipping");
+      return;
+    }
+    try {
+      const font = await fontResolver.resolve(run.fontFamily, run.fontWeight, run.fontStyle);
+      log('font', 'debug', "Font resolved for glyph enrichment");
+      const letterSpacing = run.letterSpacing ?? 0;
+      const glyphRun = computeGlyphRun(font, run.text, run.fontSize, letterSpacing);
+      applyWordSpacingToGlyphRun(glyphRun, run.text, run.wordSpacing);
+
+      run.glyphs = glyphRun;
+      log('font', 'debug', `Enriched "${run.text}" with ${glyphRun.glyphIds.length} glyphs:`, glyphRun.glyphIds);
+    } catch (error) {
+      log('font', 'warn', `Failed to enrich "${run.text}":`, error);
+    }
+  }
+
+  async function traverse(box: RenderBox): Promise<void> {
+    if (box.textRuns && box.textRuns.length > 0) {
+      log('font', 'debug', `Found ${box.textRuns.length} text runs in box ${box.tagName || "text"}`);
+      for (const run of box.textRuns) {
+        await enrichRun(run);
+      }
+    }
+    for (const child of box.children) {
+      await traverse(child);
+    }
+  }
+
+  log('font', 'debug', "Starting enrichment of tree");
+  await traverse(root);
+  log('font', 'debug', "Finished enrichment");
+}

package/src/pdf/renderer/box-painter.ts

@@ -0,0 +1,236 @@
+import { log } from "../../logging/debug.js";
+import { paintBoxShadows } from "./paint-box-shadows.js";
+import { shrinkRadius } from "./radius.js";
+import { renderSvgBox } from "../svg/render-svg.js";
+import { NodeKind, type RenderBox, type RGBA, type Rect, type Radius, type BorderStyles } from "../types.js";
+import type { PagePainter } from "../page-painter.js";
+import { computeBackgroundTileRects, intersectRects, rectEquals } from "../utils/background-tiles.js";
+import { computeBorderSideStrokes } from "../utils/border-dashes.js";
+import type { PathCommand } from "../renderers/shape-renderer.js";
+
+export async function paintBoxAtomic(painter: PagePainter, box: RenderBox): Promise<void> {
+  log("paint", "debug", `paintBoxAtomic: ${box.tagName} id:${box.id} opacity:${box.opacity}`, { id: box.id, opacity: box.opacity });
+
+  const hasTransform = box.transform && (box.transform.b !== 0 || box.transform.c !== 0);
+  const hasOpacity = box.opacity < 1;
+
+  if (hasTransform) {
+    painter.beginTransformScope(box.transform!, box.borderBox);
+  }
+
+  if (hasOpacity) {
+    painter.beginOpacityScope(box.opacity);
+  }
+
+  paintBoxShadows(painter, [box], false);
+
+  const clipCommands = buildClipPathCommands(box.clipPath);
+  const hasClip = !!clipCommands;
+  if (hasClip && clipCommands) {
+    painter.beginClipPath(clipCommands);
+  }
+
+  paintBackground(painter, box);
+  paintBorder(painter, box);
+  paintBoxShadows(painter, [box], true);
+
+  if (box.kind === NodeKind.Svg || (box.tagName === "svg" && box.customData?.svg)) {
+    await renderSvgBox(painter, box, painter.environment);
+  } else if (box.image) {
+    painter.drawImage(box.image, box.contentBox);
+  }
+
+  await paintText(painter, box);
+
+  if (hasClip) {
+    painter.endClipPath();
+  }
+
+  if (hasOpacity) {
+    painter.endOpacityScope(box.opacity);
+  }
+
+  if (hasTransform) {
+    painter.endTransformScope();
+  }
+}
+
+export function paintPageBackground(painter: PagePainter, color: RGBA | undefined, widthPx: number, heightPx: number, offsetY: number): void {
+  if (!color) {
+    return;
+  }
+  if (!Number.isFinite(widthPx) || widthPx <= 0 || !Number.isFinite(heightPx) || heightPx <= 0) {
+    return;
+  }
+  const rect: Rect = { x: 0, y: offsetY, width: widthPx, height: heightPx };
+  painter.fillRect(rect, color);
+}
+
+async function paintText(painter: PagePainter, box: RenderBox): Promise<void> {
+  if (!box.textRuns || box.textRuns.length === 0) {
+    return;
+  }
+  for (const run of box.textRuns) {
+    if (box.textShadows && box.textShadows.length > 0) {
+      run.textShadows = [...(box.textShadows ?? []), ...(run.textShadows ?? [])];
+    }
+    await painter.drawTextRun(run);
+  }
+}
+
+function paintBackground(painter: PagePainter, box: RenderBox): void {
+  const background = box.background;
+  if (!background) {
+    return;
+  }
+
+  const paintArea = determineBackgroundPaintArea(box);
+  if (!paintArea) {
+    return;
+  }
+
+  log("paint", "debug", `painting background z:${box.zIndexComputed ?? 0}`, {
+    tagName: box.tagName,
+    zIndex: box.zIndexComputed ?? 0,
+    id: box.id,
+    background: background.color ? "color" : background.gradient ? "gradient" : background.image ? "image" : "none",
+  });
+
+  if (background.color) {
+    painter.fillRoundedRect(paintArea.rect, paintArea.radius, background.color);
+  }
+
+  if (background.gradient) {
+    const gradient = background.gradient;
+    const clipRect = paintArea.rect;
+
+    const gradientRect = gradient.rect ?? clipRect;
+    const repeatMode = gradient.repeat ?? "no-repeat";
+    const tiles = computeBackgroundTileRects(gradientRect, clipRect, repeatMode);
+
+    for (const tile of tiles) {
+      const radius =
+        rectEquals(tile, clipRect) || rectEquals(tile, gradient.originRect)
+          ? paintArea.radius
+          : zeroRadius();
+
+      painter.fillRoundedRect(tile, radius, gradient.gradient as any);
+    }
+  }
+
+  if (background.image) {
+    paintBackgroundImageLayer(painter, background.image, paintArea.rect, paintArea.radius);
+  }
+}
+
+function paintBackgroundImageLayer(
+  painter: PagePainter,
+  layer: RenderBox["background"]["image"],
+  clipRect: Rect,
+  clipRadius: Radius,
+): void {
+  if (!layer || !layer.rect) {
+    return;
+  }
+
+  const repeatMode = layer.repeat ?? "repeat";
+  const tiles = computeBackgroundTileRects(layer.rect, clipRect, repeatMode);
+
+  for (const tile of tiles) {
+    painter.drawBackgroundImage(layer.image, tile, clipRect, clipRadius);
+  }
+}
+
+function paintBorder(painter: PagePainter, box: RenderBox): void {
+  const color = box.borderColor;
+  if (!color) {
+    return;
+  }
+  const { border } = box;
+  if (!hasVisibleBorder(border)) {
+    return;
+  }
+
+  const styles: BorderStyles | undefined = box.borderStyle;
+  const allSolid =
+    !styles ||
+    (styles.top === "solid" && styles.right === "solid" && styles.bottom === "solid" && styles.left === "solid");
+
+  if (allSolid) {
+    const outerRect = box.borderBox;
+    const innerRect = {
+      x: outerRect.x + border.left,
+      y: outerRect.y + border.top,
+      width: Math.max(outerRect.width - border.left - border.right, 0),
+      height: Math.max(outerRect.height - border.top - border.bottom, 0),
+    };
+    const innerRadius = shrinkRadius(box.borderRadius, border.top, border.right, border.bottom, border.left);
+    if (innerRect.width <= 0 || innerRect.height <= 0) {
+      painter.fillRoundedRect(outerRect, box.borderRadius, color);
+    } else {
+      painter.fillRoundedRectDifference(outerRect, box.borderRadius, innerRect, innerRadius, color);
+    }
+    return;
+  }
+
+  const effectiveStyles: BorderStyles = styles ?? {
+    top: "solid",
+    right: "solid",
+    bottom: "solid",
+    left: "solid",
+  };
+
+  const strokes = computeBorderSideStrokes(box.borderBox, border, effectiveStyles, color, box.borderRadius);
+  for (const stroke of strokes) {
+    painter.strokePolyline(stroke.points, stroke.color, {
+      lineWidth: stroke.lineWidth,
+      lineCap: "butt",
+      lineJoin: "miter",
+      dash: stroke.dash,
+    });
+  }
+}
+
+function determineBackgroundPaintArea(box: RenderBox): { rect: Rect; radius: Radius } | null {
+  const rect = box.borderBox ?? box.paddingBox ?? box.contentBox;
+  if (!rect) {
+    return null;
+  }
+
+  if (rect === box.borderBox) {
+    return { rect, radius: box.borderRadius };
+  }
+
+  let radius = shrinkRadius(box.borderRadius, box.border.top, box.border.right, box.border.bottom, box.border.left);
+  if (rect === box.contentBox) {
+    radius = shrinkRadius(radius, box.padding.top, box.padding.right, box.padding.bottom, box.padding.left);
+  }
+
+  return { rect, radius };
+}
+
+function hasVisibleBorder(border: RenderBox["border"]): boolean {
+  return border.top > 0 || border.right > 0 || border.bottom > 0 || border.left > 0;
+}
+
+function zeroRadius(): Radius {
+  return {
+    topLeft: { x: 0, y: 0 },
+    topRight: { x: 0, y: 0 },
+    bottomRight: { x: 0, y: 0 },
+    bottomLeft: { x: 0, y: 0 },
+  };
+}
+
+function buildClipPathCommands(clipPath: RenderBox["clipPath"]): PathCommand[] | null {
+  if (!clipPath || clipPath.type !== "polygon" || clipPath.points.length < 3) {
+    return null;
+  }
+  const [first, ...rest] = clipPath.points;
+  const commands: PathCommand[] = [{ type: "moveTo", x: first.x, y: first.y }];
+  for (const point of rest) {
+    commands.push({ type: "lineTo", x: point.x, y: point.y });
+  }
+  commands.push({ type: "closePath" });
+  return commands;
+}

package/src/pdf/renderer/page-paint.ts

@@ -0,0 +1,102 @@
+import { pickFooterVariant, pickHeaderVariant, paintHeaderFooter, type HeaderFooterLayout } from "../header-footer.js";
+import type { HeaderFooterPaintContext } from "../header-footer-painter.js";
+import { PagePainter, type PainterResult } from "../page-painter.js";
+import type { FontRegistry } from "../font/font-registry.js";
+import { LayerMode } from "../types.js";
+import type { LayoutPageTree, PageSize, RGBA, TextPaintOptions } from "../types.js";
+import { paintBoxAtomic, paintPageBackground } from "./box-painter.js";
+import type { Environment } from "../../environment/environment.js";
+
+export interface PagePaintInput {
+  readonly pageTree: LayoutPageTree;
+  readonly pageNumber: number;
+  readonly totalPages: number;
+  readonly pageSize: PageSize;
+  readonly pxToPt: (px: number) => number;
+  readonly pageWidthPx: number;
+  readonly pageHeightPx: number;
+  readonly fontRegistry: FontRegistry;
+  readonly headerFooterLayout: HeaderFooterLayout;
+  readonly tokens: Map<string, string | ((page: number, total: number) => string)>;
+  readonly headerFooterTextOptions: TextPaintOptions;
+  readonly pageBackground?: RGBA;
+  /** Page margins for header/footer positioning */
+  readonly margins?: { top: number; right: number; bottom: number; left: number };
+  /** CSS for header/footer styling */
+  readonly headerFooterCss?: string;
+  /** Platform environment (Node/browser) for resource loading during paint */
+  readonly environment?: Environment;
+}
+
+export async function paintLayoutPage({
+  pageTree,
+  pageNumber,
+  totalPages,
+  pageSize,
+  pxToPt,
+  pageWidthPx,
+  pageHeightPx,
+  fontRegistry,
+  headerFooterLayout,
+  tokens,
+  headerFooterTextOptions,
+  pageBackground,
+  margins,
+  headerFooterCss,
+  environment,
+}: PagePaintInput): Promise<PainterResult> {
+  const painter = new PagePainter(pageSize.heightPt, pxToPt, fontRegistry, pageTree.pageOffsetY, environment);
+
+  const headerVariant = pickHeaderVariant(headerFooterLayout, pageNumber, totalPages);
+  const footerVariant = pickFooterVariant(headerFooterLayout, pageNumber, totalPages);
+
+  paintPageBackground(painter, pageBackground, pageWidthPx, pageHeightPx, pageTree.pageOffsetY);
+
+  // Build context for HTML-based header/footer rendering
+  const hfContext: HeaderFooterPaintContext | undefined = margins
+    ? {
+        margins,
+        pageWidthPx,
+        pageHeightPx,
+        fontRegistry,
+        pageOffsetY: pageTree.pageOffsetY,
+        css: headerFooterCss,
+        environment,
+      }
+    : undefined;
+
+  if (headerFooterLayout.layerMode === LayerMode.Under) {
+    await paintHeaderFooter(
+      painter,
+      headerVariant,
+      footerVariant,
+      tokens,
+      pageNumber,
+      totalPages,
+      headerFooterTextOptions,
+      true,
+      hfContext,
+    );
+  }
+
+  // Paint each box as an atomic unit in the resolved paint order.
+  for (const box of pageTree.paintOrder) {
+    await paintBoxAtomic(painter, box);
+  }
+
+  if (headerFooterLayout.layerMode === LayerMode.Over) {
+    await paintHeaderFooter(
+      painter,
+      headerVariant,
+      footerVariant,
+      tokens,
+      pageNumber,
+      totalPages,
+      headerFooterTextOptions,
+      false,
+      hfContext,
+    );
+  }
+
+  return painter.result();
+}