pagyra-js 0.0.1

package/src/pdf/utils/list-utils.ts

@@ -0,0 +1,194 @@
+import { estimateLineWidth } from "../../layout/utils/text-metrics.js";
+import type { LayoutNode } from "../../dom/node.js";
+import type { RenderBox, Run, RGBA, Rect } from "../types.js";
+
+export function createListMarkerRun(
+  node: LayoutNode,
+  contentBox: Rect,
+  children: RenderBox[],
+  fallbackColor: RGBA,
+): Run | undefined {
+  const styleType = resolveListStyleType(node);
+  if (!styleType || styleType === "none") {
+    return undefined;
+  }
+  const markerIndex = computeListItemIndex(node);
+  const markerText = formatListMarker(styleType, markerIndex);
+  if (!markerText) {
+    return undefined;
+  }
+
+  const firstRun = findFirstDescendantTextRun(children);
+  const fontFamily = node.style.fontFamily ?? "sans-serif";
+  const fontSize = node.style.fontSize;
+  const fontWeight = node.style.fontWeight;
+  const color = fallbackColor ?? { r: 0, g: 0, b: 0, a: 1 };
+
+  const baseline =
+    firstRun?.lineMatrix.f ??
+    (node.box.baseline > 0 ? node.box.baseline : contentBox.y + fontSize);
+  const textStartX = firstRun?.lineMatrix.e ?? contentBox.x;
+  const markerWidth = Math.max(estimateLineWidth(markerText, node.style), 0);
+  const gap = Math.max(fontSize * 0.5, 6);
+  const markerX = textStartX - gap - markerWidth;
+
+  return {
+    text: markerText,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    fill: color,
+    lineMatrix: { a: 1, b: 0, c: 0, d: 1, e: markerX, f: baseline },
+    advanceWidth: markerWidth + gap,
+  };
+}
+
+export function findFirstDescendantTextRun(children: RenderBox[]): Run | undefined {
+  for (const child of children) {
+    if (child.textRuns.length > 0) {
+      return child.textRuns[0];
+    }
+    const nested = findFirstDescendantTextRun(child.children);
+    if (nested) {
+      return nested;
+    }
+  }
+  return undefined;
+}
+
+export function computeListItemIndex(node: LayoutNode): number {
+  const parent = node.parent;
+  if (!parent) {
+    return 1;
+  }
+  let index = 0;
+  for (const sibling of parent.children) {
+    if (sibling.tagName === "li") {
+      index += 1;
+    }
+    if (sibling === node) {
+      break;
+    }
+  }
+  return Math.max(index, 1);
+}
+
+export const LIST_STYLE_MARKERS: Record<"disc" | "circle" | "square", string> = {
+  disc: "\u2022", // • BULLET
+  circle: "\u25E6", // ◦ WHITE BULLET
+  square: "\u25AA", // ▪ BLACK SMALL SQUARE
+};
+
+const DEFAULT_MARKER = LIST_STYLE_MARKERS.disc;
+
+export function formatListMarker(styleType: string, index: number): string | undefined {
+  const normalized = styleType.trim().toLowerCase();
+  switch (normalized) {
+    case "none":
+      return undefined;
+    case "decimal":
+      return `${index}.`;
+    case "decimal-leading-zero":
+      return `${String(index).padStart(2, "0")}.`;
+    case "lower-alpha":
+      return `${toAlphaSequence(index).toLowerCase()}.`;
+    case "upper-alpha":
+      return `${toAlphaSequence(index).toUpperCase()}.`;
+    case "lower-roman": {
+      const roman = toRomanNumeral(index);
+      return roman ? `${roman.toLowerCase()}.` : `${index}.`;
+    }
+    case "upper-roman": {
+      const roman = toRomanNumeral(index);
+      return roman ? `${roman.toUpperCase()}.` : `${index}.`;
+    }
+    case "disc":
+    case "circle":
+    case "square":
+      return LIST_STYLE_MARKERS[normalized];
+    default:
+      return DEFAULT_MARKER;
+  }
+}
+
+function toAlphaSequence(index: number): string {
+  let n = Math.max(1, Math.floor(index));
+  let result = "";
+  while (n > 0) {
+    n -= 1;
+    const charCode = 65 + (n % 26);
+    result = String.fromCharCode(charCode) + result;
+    n = Math.floor(n / 26);
+  }
+  return result;
+}
+
+function toRomanNumeral(index: number): string | undefined {
+  if (!Number.isFinite(index) || index <= 0 || index >= 4000) {
+    return undefined;
+  }
+  const romanPairs: Array<[number, string]> = [
+    [1000, "M"],
+    [900, "CM"],
+    [500, "D"],
+    [400, "CD"],
+    [100, "C"],
+    [90, "XC"],
+    [50, "L"],
+    [40, "XL"],
+    [10, "X"],
+    [9, "IX"],
+    [5, "V"],
+    [4, "IV"],
+    [1, "I"],
+  ];
+  let remainder = Math.floor(index);
+  let result = "";
+  for (const [value, numeral] of romanPairs) {
+    while (remainder >= value) {
+      result += numeral;
+      remainder -= value;
+    }
+    if (remainder === 0) {
+      break;
+    }
+  }
+  return result;
+}
+
+export function resolveListStyleType(node: LayoutNode): string | undefined {
+  const own = normalizeListStyleType(node.style.listStyleType);
+  if (own === "none") {
+    return "none";
+  }
+  if (own && own !== "disc") {
+    return own;
+  }
+
+  const parent = node.parent;
+  if (parent) {
+    const parentStyle = normalizeListStyleType(parent.style.listStyleType);
+    if (parentStyle === "none") {
+      return "none";
+    }
+    if (parentStyle) {
+      return parentStyle;
+    }
+    if (parent.tagName === "ol") {
+      return "decimal";
+    }
+    if (parent.tagName === "ul") {
+      return "disc";
+    }
+  }
+
+  return own ?? "disc";
+}
+
+export function normalizeListStyleType(value: string | undefined): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+  const normalized = value.trim().toLowerCase();
+  return normalized.length > 0 ? normalized : undefined;
+}

package/src/pdf/utils/node-text-run-factory.ts

@@ -0,0 +1,202 @@
+import type { LayoutNode } from "../../dom/node.js";
+import type { RenderBox, Rect, RGBA, Run, Decorations, GradientBackground } from "../types.js";
+import type { Matrix } from "../../geometry/matrix.js";
+import { createTextRuns } from "./text-utils.js";
+import { createListMarkerRun } from "./list-utils.js";
+import { multiplyMatrices } from "../../geometry/matrix.js";
+import type { FontResolver } from "../../fonts/types.js";
+import type { GlyphRun } from "../../layout/text-run.js";
+import type { UnifiedFont } from "../../fonts/types.js";
+import type { KerningMap } from "../../types/fonts.js";
+
+export interface NodeTextRunContext {
+  node: LayoutNode;
+  children: RenderBox[];
+  borderBox: Rect;
+  contentBox: Rect;
+  textColor?: RGBA;
+  decorations?: Decorations;
+  transform?: Matrix;
+  fallbackColor: RGBA;
+  fontResolver?: FontResolver;
+  textGradient?: GradientBackground;
+}
+
+export function buildNodeTextRuns(context: NodeTextRunContext): Run[] {
+  const { node, children, borderBox, contentBox, textColor, decorations, transform, fallbackColor, fontResolver, textGradient } = context;
+  const textRuns = createTextRuns(node, textColor, decorations);
+
+  // If we have a fontResolver, enhance text runs with GlyphRun data
+  if (fontResolver) {
+    enrichTextRunsWithGlyphs(textRuns, fontResolver);
+  }
+
+  if (node.tagName === "li") {
+    const markerRun = createListMarkerRun(node, contentBox, children, textColor ?? fallbackColor);
+    if (markerRun) {
+      textRuns.unshift(markerRun);
+    }
+  }
+
+  if (textGradient) {
+    for (const run of textRuns) {
+      run.textGradient = textGradient;
+    }
+  }
+
+  if (transform && textRuns.length > 0) {
+    applyTransformToTextRuns(textRuns, transform, borderBox);
+  }
+
+  return textRuns;
+}
+
+function applyTransformToTextRuns(runs: Run[], cssMatrix: Matrix, originBox: Rect): void {
+  if (runs.length === 0) {
+    return;
+  }
+  const baseOriginX = Number.isFinite(originBox.x) ? originBox.x : 0;
+  const baseOriginY = Number.isFinite(originBox.y) ? originBox.y : 0;
+  const originWidth = Number.isFinite(originBox.width) ? originBox.width : 0;
+  const originHeight = Number.isFinite(originBox.height) ? originBox.height : 0;
+  const originX = baseOriginX + originWidth / 2;
+  const originY = baseOriginY + originHeight / 2;
+  const toOrigin = translationMatrix(-originX, -originY);
+  const fromOrigin = translationMatrix(originX, originY);
+  for (const run of runs) {
+    const baseMatrix = run.lineMatrix ?? { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+    const localMatrix = multiplyMatrices(toOrigin, baseMatrix);
+    const transformedLocal = multiplyMatrices(cssMatrix, localMatrix);
+    run.lineMatrix = multiplyMatrices(fromOrigin, transformedLocal);
+  }
+}
+
+function translationMatrix(tx: number, ty: number): Matrix {
+  return { a: 1, b: 0, c: 0, d: 1, e: tx, f: ty };
+}
+
+/**
+ * Enriches text runs with GlyphRun data for TTF-based rendering.
+ * For each run, resolves the font, maps text to glyph IDs, and computes positions.
+ */
+function enrichTextRunsWithGlyphs(runs: Run[], fontResolver: FontResolver): void {
+  for (const run of runs) {
+    try {
+      // Resolve the font synchronously if possible
+      const font = fontResolver.resolveSync
+        ? fontResolver.resolveSync(run.fontFamily, run.fontWeight, run.fontStyle)
+        : undefined;
+
+      if (!font) {
+        // If we can't resolve synchronously, skip glyph enrichment for now
+        continue;
+      }
+
+      // Map Unicode text to glyph IDs
+      const glyphRun = computeGlyphRun(font, run.text, run.fontSize, run.letterSpacing ?? 0);
+      // Carry through any word spacing for justified lines so glyph positioning can reflect it.
+      if (run.wordSpacing !== undefined && glyphRun.positions.length > 0) {
+        applyWordSpacingToGlyphRun(glyphRun, run.text, run.wordSpacing);
+      }
+
+      run.glyphs = glyphRun;
+    } catch (error) {
+      // If font resolution or glyph mapping fails, continue without glyph data
+      console.warn(`Failed to create GlyphRun for text "${run.text}": ${error}`);
+    }
+  }
+}
+
+/**
+ * Map text to glyph IDs and compute positions with optional letter spacing.
+ * Letter spacing is added between glyphs (not after the last glyph) in CSS px units.
+ */
+export function computeGlyphRun(font: UnifiedFont, text: string, fontSize: number, letterSpacing: number): GlyphRun {
+  const glyphIds: number[] = [];
+  const positions: { x: number; y: number }[] = [];
+  let currentX = 0;
+  const kerning = font.metrics.kerning;
+  const unitsPerEm = font.metrics.metrics.unitsPerEm;
+  let prevGid: number | null = null;
+
+  for (let i = 0; i < text.length; i++) {
+    const codePoint = text.codePointAt(i) ?? 0;
+    const glyphId = font.metrics.cmap.getGlyphId(codePoint);
+
+    glyphIds.push(glyphId);
+
+    // Get advance width for this glyph
+    const glyphMetric = font.metrics.glyphMetrics.get(glyphId);
+    const advanceWidth = glyphMetric?.advanceWidth ?? 0;
+
+    // Apply kerning adjustment from previous glyph if present
+    if (prevGid !== null && kerning) {
+      const kernAdjust = getKerningAdjustment(kerning, prevGid, glyphId);
+      if (kernAdjust !== 0) {
+        currentX += (kernAdjust / unitsPerEm) * fontSize;
+      }
+    }
+
+    // Scale advance width to font size
+    const scaledAdvance = (advanceWidth / unitsPerEm) * fontSize;
+
+    positions.push({ x: currentX, y: 0 });
+    currentX += scaledAdvance;
+
+    // Apply letter-spacing between glyphs
+    if (i < text.length - 1) {
+      currentX += letterSpacing;
+    }
+
+    // Handle surrogate pairs (advance i if this was a surrogate pair)
+    if (codePoint > 0xFFFF) {
+      i++;
+    }
+
+    prevGid = glyphId;
+  }
+
+  return {
+    font,
+    glyphIds,
+    positions,
+    text,
+    fontSize,
+    width: currentX,
+  };
+}
+
+export function applyWordSpacingToGlyphRun(glyphRun: GlyphRun, text: string, wordSpacing: number | undefined): void {
+  // Optimization 1: Simpler truthy check covers (undefined, null, 0)
+  if (!wordSpacing) {
+    return;
+  }
+
+  let accumulatedSpacing = 0;
+  // Optimization 2: Cache the length.
+  // Accessing .length on every iteration can be slightly slower in some JS engines.
+  const len = glyphRun.positions.length;
+
+  for (let i = 0; i < len; i++) {
+    if (accumulatedSpacing > 0) {
+      glyphRun.positions[i].x += accumulatedSpacing;
+    }
+
+    // Optimization 3: Use charCodeAt instead of string comparison.
+    // text[i] === " " creates a temporary string object for every character.
+    // charCodeAt(i) === 32 compares integers, which is faster and generates no garbage.
+    if (text.charCodeAt(i) === 32) {
+      accumulatedSpacing += wordSpacing;
+    }
+  }
+
+  if (accumulatedSpacing > 0) {
+    glyphRun.width = (glyphRun.width ?? 0) + accumulatedSpacing;
+  }
+}
+
+function getKerningAdjustment(map: KerningMap, left: number, right: number): number {
+  const rightMap = map.get(left);
+  if (!rightMap) return 0;
+  return rightMap.get(right) ?? 0;
+}

package/src/pdf/utils/page-resource-registrar.ts

@@ -0,0 +1,46 @@
+import type { PdfObjectRef } from "../primitives/pdf-document.js";
+import type { PdfDocument } from "../primitives/pdf-document.js";
+import type { PainterResult } from "../page-painter.js";
+
+export interface PageResources {
+  fonts: Map<string, PdfObjectRef>;
+  xObjects: Map<string, PdfObjectRef>;
+  extGStates: Map<string, PdfObjectRef>;
+  shadings: Map<string, PdfObjectRef>;
+  patterns: Map<string, PdfObjectRef>;
+}
+
+export function registerPageResources(doc: PdfDocument, result: PainterResult): PageResources {
+  const xObjects = new Map<string, PdfObjectRef>();
+  for (const image of result.images) {
+    const ref = doc.registerImage(image.image);
+    image.ref = ref;
+    xObjects.set(image.alias, ref);
+  }
+
+  const extGStates = new Map<string, PdfObjectRef>();
+  for (const [name, alpha] of result.graphicsStates) {
+    const ref = doc.registerExtGState(alpha);
+    extGStates.set(name, ref);
+  }
+
+  const shadings = new Map<string, PdfObjectRef>();
+  for (const [name, dict] of result.shadings) {
+    const ref = doc.registerShading(name, dict);
+    shadings.set(name, ref);
+  }
+
+  const patterns = new Map<string, PdfObjectRef>();
+  for (const [name, dict] of result.patterns ?? []) {
+    const ref = doc.registerPattern(name, dict);
+    patterns.set(name, ref);
+  }
+
+  return {
+    fonts: result.fonts,
+    xObjects,
+    extGStates,
+    shadings,
+    patterns,
+  };
+}

package/src/pdf/utils/result-combiner.ts

@@ -0,0 +1,102 @@
+import type { PdfObjectRef } from "../primitives/pdf-document.js";
+import { TextRenderer } from "../renderers/text-renderer.js";
+import { ImageRenderer } from "../renderers/image-renderer.js";
+import { ShapeRenderer } from "../renderers/shape-renderer.js";
+import { GraphicsStateManager } from "../renderers/graphics-state-manager.js";
+import { registerGlyphAtlasPages } from "./glyph-atlas-registrar.js";
+import { partitionImageCommands } from "./image-command-partitioner.js";
+
+export interface PainterResult {
+  readonly content: string;
+  readonly fonts: Map<string, PdfObjectRef>;
+  readonly images: PainterImageResource[];
+  readonly graphicsStates: Map<string, number>;
+  readonly shadings: Map<string, string>;
+  readonly patterns?: Map<string, string>;
+}
+
+export interface PainterImageResource {
+  readonly alias: string;
+  readonly image: {
+    src: string;
+    width: number;
+    height: number;
+    format: "jpeg" | "png" | "gif" | "webp";
+    channels: number;
+    bitsPerComponent: number;
+    data: Uint8Array;
+  };
+  ref?: PdfObjectRef;
+}
+
+export class ResultCombiner {
+  constructor(
+    private readonly textRenderer: TextRenderer,
+    private readonly imageRenderer: ImageRenderer,
+    private readonly shapeRenderer: ShapeRenderer,
+    private readonly graphicsStateManager: GraphicsStateManager,
+  ) {}
+
+  combineResults(): PainterResult {
+    const textResult = this.textRenderer.getResult();
+    registerGlyphAtlasPages(this.imageRenderer);
+    const imageResult = this.imageRenderer.getResult();
+    const shapeResult = this.shapeRenderer.getResult();
+    const graphicsStates = new Map<string, number>();
+    for (const [name, alpha] of this.graphicsStateManager.getGraphicsStates()) {
+      graphicsStates.set(name, alpha);
+    }
+
+    // Partition image commands: shadow rasters (drawn beneath shapes) vs others
+    const shadowAliases = new Set<string>();
+    for (const [, res] of imageResult.images) {
+      if (res.image.src && typeof res.image.src === 'string' && res.image.src.startsWith('internal:shadow:')) {
+        shadowAliases.add(res.alias);
+      }
+    }
+
+    const { preShadow, post } = partitionImageCommands(imageResult.commands, shadowAliases);
+    const allCommands = [...preShadow, ...shapeResult.commands, ...textResult.commands, ...post];
+
+    // Process image resources to match the expected format
+    const processedImages: PainterImageResource[] = [];
+    for (const [, resource] of imageResult.images) {
+      // Convert the image resource to the expected format
+      processedImages.push({
+        alias: resource.alias,
+        image: {
+          src: resource.image.src,
+          width: resource.image.width,
+          height: resource.image.height,
+          format: resource.image.format,
+          channels: resource.image.channels,
+          bitsPerComponent: resource.image.bitsPerComponent,
+          data: new Uint8Array(resource.image.data), // Convert ArrayBuffer to Uint8Array
+        },
+        ref: resource.ref
+      });
+    }
+
+    const combinedShadings = new Map<string, string>();
+    for (const [name, dict] of shapeResult.shadings) {
+      combinedShadings.set(name, dict);
+    }
+    for (const [name, dict] of textResult.shadings) {
+      combinedShadings.set(name, dict);
+    }
+
+    const combinedPatterns = new Map<string, string>();
+    for (const [name, dict] of textResult.patterns ?? []) {
+      combinedPatterns.set(name, dict);
+    }
+
+    return {
+      content: allCommands.join("\n"),
+      fonts: textResult.fonts,
+      images: processedImages,
+      graphicsStates,
+      shadings: combinedShadings,
+      patterns: combinedPatterns,
+    };
+  }
+}

package/src/pdf/utils/shadow-utils.ts

@@ -0,0 +1,127 @@
+import type { LayoutNode } from "../../dom/node.js";
+import type { Rect, ShadowLayer, RGBA } from "../types.js";
+import { parseColor, cloneColor } from "./color-utils.js";
+
+export function resolveBoxShadows(node: LayoutNode, fallbackColor: RGBA): ShadowLayer[] {
+  const result: ShadowLayer[] = [];
+  const shadows = node.style.boxShadows ?? [];
+  for (const shadow of shadows) {
+    const color = resolveShadowColor(shadow.color, node.style.color, fallbackColor);
+    if (!color) {
+      continue;
+    }
+    result.push({
+      inset: shadow.inset,
+      offsetX: shadow.offsetX,
+      offsetY: shadow.offsetY,
+      blur: clampNonNegative(shadow.blurRadius),
+      spread: shadow.spreadRadius ?? 0,
+      color,
+    });
+  }
+  return result;
+}
+
+export function resolveTextShadows(node: LayoutNode, fallbackColor: RGBA): ShadowLayer[] {
+  const result: ShadowLayer[] = [];
+  const shadows = (node.style as any).textShadows ?? [];
+  for (const shadow of shadows) {
+    // shadow here is expected to have numeric offsetX/offsetY/blurRadius and optional color
+    const offsetX = shadow.offsetX ?? 0;
+    const offsetY = shadow.offsetY ?? 0;
+    const blur = clampNonNegative(shadow.blurRadius ?? 0);
+    const color = resolveShadowColor(shadow.color, node.style.color, fallbackColor);
+    if (!color) {
+      continue;
+    }
+    result.push({
+      inset: false,
+      offsetX,
+      offsetY,
+      blur,
+      spread: 0,
+      color,
+    });
+  }
+  return result;
+}
+
+export function resolveShadowColor(specified: string | undefined, styleColor: string | undefined, fallbackColor: RGBA): RGBA | undefined {
+  if (!specified || specified.trim().length === 0) {
+    return cloneColor(fallbackColor);
+  }
+  const normalized = specified.trim().toLowerCase();
+  if (normalized === "transparent") {
+    return undefined;
+  }
+  if (normalized === "currentcolor") {
+    const current = parseColor(styleColor);
+    return cloneColor(current ?? fallbackColor);
+  }
+  const parsed = parseColor(specified);
+  if (parsed) {
+    return cloneColor(parsed);
+  }
+  return cloneColor(fallbackColor);
+}
+
+export function computeShadowVisualOverflow(base: Rect, shadow: ShadowLayer): Rect | null {
+  const spread = shadow.spread;
+  const blur = shadow.blur;
+  const baseWidth = Math.max(base.width + spread * 2, 0);
+  const baseHeight = Math.max(base.height + spread * 2, 0);
+  const baseX = base.x + shadow.offsetX - spread;
+  const baseY = base.y + shadow.offsetY - spread;
+  const finalWidth = baseWidth + blur * 2;
+  const finalHeight = baseHeight + blur * 2;
+  if (finalWidth <= 0 || finalHeight <= 0) {
+    return null;
+  }
+  return {
+    x: baseX - blur,
+    y: baseY - blur,
+    width: finalWidth,
+    height: finalHeight,
+  };
+}
+
+export function calculateVisualOverflow(_node: LayoutNode, borderBox: Rect, boxShadows: ShadowLayer[]): Rect {
+  const visualOverflow = cloneRect(borderBox);
+  
+  for (const shadow of boxShadows) {
+    if (shadow.inset) {
+      continue;
+    }
+    const shadowRect = computeShadowVisualOverflow(borderBox, shadow);
+    if (shadowRect) {
+      expandRectToInclude(visualOverflow, shadowRect);
+    }
+  }
+
+  return visualOverflow;
+}
+
+function clampNonNegative(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  return value < 0 ? 0 : value;
+}
+
+function cloneRect(rect: Rect): Rect {
+  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+}
+
+function expandRectToInclude(target: Rect, addition: Rect): void {
+  if (addition.width <= 0 || addition.height <= 0) {
+    return;
+  }
+  const minX = Math.min(target.x, addition.x);
+  const minY = Math.min(target.y, addition.y);
+  const maxX = Math.max(target.x + target.width, addition.x + addition.width);
+  const maxY = Math.max(target.y + target.height, addition.y + addition.height);
+  target.x = minX;
+  target.y = minY;
+  target.width = Math.max(0, maxX - minX);
+  target.height = Math.max(0, maxY - minY);
+}