pagyra-js 0.0.1

package/src/pdf/utils/text-alignment-resolver.ts

@@ -0,0 +1,76 @@
+import { Display, JustifyContent } from "../../css/enums.js";
+import type { LayoutNode } from "../../dom/node.js";
+
+export function resolveTextAlign(node: LayoutNode): string | undefined {
+  let current: LayoutNode | null = node;
+  while (current) {
+    const value = current.style.textAlign;
+    if (value && value !== "start" && value !== "auto") {
+      return value;
+    }
+    current = current.parent;
+  }
+  return undefined;
+}
+
+export function resolveFallbackStartX(node: LayoutNode, advanceWidth: number, textAlign?: string): number {
+  let startX = node.box.x;
+  if (advanceWidth > 0 && Number.isFinite(node.box.contentWidth) && node.box.contentWidth > 0) {
+    const slack = Math.max(node.box.contentWidth - advanceWidth, 0);
+    if (textAlign === "center") {
+      startX = node.box.x + slack / 2;
+    } else if (textAlign === "right" || textAlign === "end") {
+      startX = node.box.x + slack;
+    } else if (textAlign === "left" || textAlign === "start") {
+      startX = node.box.x;
+    }
+  }
+
+  const flexStart = resolveFlexSingleChildStart(node, advanceWidth);
+  if (flexStart !== null) {
+    startX = flexStart;
+  }
+  return startX;
+}
+
+export function resolveFlexSingleChildStart(node: LayoutNode, advanceWidth: number): number | null {
+  if (!node.parent || advanceWidth <= 0) {
+    return null;
+  }
+  const parent = node.parent;
+  if (parent.style.display !== Display.Flex) {
+    return null;
+  }
+  if (parent.children.length !== 1) {
+    return null;
+  }
+  const direction = parent.style.flexDirection ?? "row";
+  if (direction !== "row" && direction !== "row-reverse") {
+    return null;
+  }
+  const justify = parent.style.justifyContent ?? JustifyContent.FlexStart;
+  const parentWidth = Number.isFinite(parent.box.contentWidth) ? parent.box.contentWidth : 0;
+  if (!(parentWidth > 0)) {
+    return null;
+  }
+  const constrainedWidth = advanceWidth > parentWidth ? parentWidth : advanceWidth;
+  const slack = Math.max(parentWidth - constrainedWidth, 0);
+  const parentStart = parent.box.x;
+  const parentEnd = parentStart + parentWidth;
+  const isReverse = direction === "row-reverse";
+
+  switch (justify) {
+    case JustifyContent.Center:
+      return parentStart + slack / 2;
+    case JustifyContent.FlexEnd:
+    case JustifyContent.End:
+    case JustifyContent.Right:
+      return isReverse ? parentStart : parentEnd - constrainedWidth;
+    case JustifyContent.FlexStart:
+    case JustifyContent.Start:
+    case JustifyContent.Left:
+      return isReverse ? parentEnd - constrainedWidth : parentStart;
+    default:
+      return null;
+  }
+}

package/src/pdf/utils/text-decoration-utils.ts

@@ -0,0 +1,64 @@
+import type { ComputedStyle } from "../../css/style.js";
+import type { Decorations, RGBA } from "../types.js";
+import { parseColor } from "./color-utils.js";
+
+export function resolveDecorations(style: ComputedStyle): Decorations | undefined {
+  const value = style.textDecorationLine?.trim().toLowerCase();
+  if (!value || value === "none") {
+    return undefined;
+  }
+  const tokens = value.split(/\s+/);
+  const decoration: Decorations = {};
+  for (const token of tokens) {
+    switch (token) {
+      case "underline":
+        decoration.underline = true;
+        break;
+      case "overline":
+        decoration.overline = true;
+        break;
+      case "line-through":
+        decoration.lineThrough = true;
+        break;
+      default:
+        break;
+    }
+  }
+  if (!(decoration.underline || decoration.overline || decoration.lineThrough)) {
+    return undefined;
+  }
+
+  const styleKeyword = style.textDecorationStyle?.trim().toLowerCase();
+  switch (styleKeyword) {
+    case "solid":
+    case "double":
+    case "dotted":
+    case "dashed":
+    case "wavy":
+      decoration.style = styleKeyword;
+      break;
+    default:
+      decoration.style = "solid";
+      break;
+  }
+
+  const color = resolveDecorationColor(style);
+  if (color) {
+    decoration.color = color;
+  }
+  return decoration;
+}
+
+function resolveDecorationColor(style: ComputedStyle): RGBA | undefined {
+  const raw = style.textDecorationColor;
+  if (raw) {
+    if (raw.toLowerCase() === "currentcolor") {
+      return parseColor(style.color);
+    }
+    const parsed = parseColor(raw);
+    if (parsed) {
+      return parsed;
+    }
+  }
+  return parseColor(style.color);
+}

package/src/pdf/utils/text-layout-adjuster.ts

@@ -0,0 +1,185 @@
+import type { RenderBox, Run } from "../types.js";
+
+/**
+ * Global pass to fix justified layout in the render tree.
+ *
+ * For each RenderBox with textAlign: "justify":
+ *   - collect ALL runs from that box and its descendants
+ *   - group runs by lineIndex
+import type { RenderBox, Run } from "../types.js";
+
+/**
+ * Global pass to fix justified layout in the render tree.
+ *
+ * For each RenderBox with textAlign: "justify":
+ *   - collect ALL runs from that box and its descendants
+ *   - group runs by lineIndex
+ *   - sort each group by lineMatrix.e (X)
+ *   -for each non-final line:
+ *       * shift later runs by the cumulative expansion
+ *         from previous runs: spacesInRun * wordSpacing
+ */
+export function applyTextLayoutAdjustments(root: RenderBox): void {
+    traverse(root, (box) => {
+        // Only process boxes with justify alignment
+        if (box.textAlign !== "justify") return true; // Continue searching
+
+        // Collect ALL runs from this box and its descendants
+        const allRuns: Run[] = [];
+        collectRunsFromTree(box, allRuns);
+
+        const candidates = allRuns.filter(
+            (run) => typeof run.lineIndex === "number",
+        );
+        if (candidates.length === 0) return false; // Stop descending
+
+        const groups = groupRunsByLineIndex(candidates);
+        for (const lineRuns of groups) {
+            adjustLinePositions(lineRuns);
+        }
+
+        return false; // Stop descending into this justified box
+    });
+}
+
+function groupRunsByLineIndex(runs: Run[]): Run[][] {
+    const map = new Map<number, Run[]>();
+
+    for (const run of runs) {
+        const idx = run.lineIndex as number;
+        let group = map.get(idx);
+        if (!group) {
+            group = [];
+            map.set(idx, group);
+        }
+        group.push(run);
+    }
+
+    for (const group of map.values()) {
+        group.sort((a, b) => {
+            const ax = a.lineMatrix?.e ?? 0;
+            const bx = b.lineMatrix?.e ?? 0;
+            return ax - bx;
+        });
+    }
+
+    return Array.from(map.values());
+}
+
+/**
+ * Adjust positions on a single visual line.
+ *
+ * - Skip last lines (isLastLine === true).
+ * - Skip lines with no spaces.
+ * - Walk from left to right:
+ *    * shift run.x by cumulativeOffset
+ *    * cumulativeOffset += spacesInRun * wordSpacing
+ */
+function adjustLinePositions(runs: Run[]): void {
+    if (runs.length === 0) return;
+
+    // Find first non-whitespace run to identify leading spaces
+    let firstContentIndex = 0;
+    while (
+        firstContentIndex < runs.length &&
+        /^\s+$/.test(runs[firstContentIndex].text)
+    ) {
+        firstContentIndex++;
+    }
+
+    // Calculate width to redistribute from leading spaces
+    let widthLost = 0;
+    for (let i = 0; i < firstContentIndex; i++) {
+        widthLost += runs[i].advanceWidth ?? 0;
+    }
+
+    // Count remaining spaces
+    let remainingSpaces = 0;
+    for (let i = firstContentIndex; i < runs.length; i++) {
+        remainingSpaces += runs[i].spacesInRun ?? 0;
+    }
+
+    const isLastLine = runs[0].isLastLine ?? false;
+
+    // Redistribute width if not last line and we have spaces to distribute to
+    if (!isLastLine && widthLost > 0 && remainingSpaces > 0) {
+        const adjustment = widthLost / remainingSpaces;
+        for (let i = firstContentIndex; i < runs.length; i++) {
+            const run = runs[i];
+            if ((run.spacesInRun ?? 0) > 0) {
+                run.wordSpacing = (run.wordSpacing ?? 0) + adjustment;
+                // Update advanceWidth to reflect the new spacing
+                run.advanceWidth =
+                    (run.advanceWidth ?? 0) + (run.spacesInRun! * adjustment);
+            }
+        }
+    }
+
+    // Capture original positions and base widths to detect existing gaps
+    const originals = runs.map((run) => ({
+        x: run.lineMatrix?.e ?? 0,
+        baseWidth:
+            (run.advanceWidth ?? 0) -
+            (run.spacesInRun ?? 0) * (run.wordSpacing ?? 0),
+        fontSize: run.fontSize,
+    }));
+
+    let currentX = originals[0].x;
+
+    for (let i = 0; i < runs.length; i++) {
+        const run = runs[i];
+
+        // If it's a leading whitespace run, treat as zero width and skip
+        if (i < firstContentIndex) {
+            if (run.lineMatrix) {
+                run.lineMatrix.e = currentX;
+            }
+            // Set width to 0 to avoid overlaps in tests and rendering
+            run.advanceWidth = 0;
+            continue;
+        }
+
+        if (run.lineMatrix) {
+            run.lineMatrix.e = currentX;
+        }
+
+        const advanceWidth = run.advanceWidth ?? 0;
+        currentX += advanceWidth;
+
+        // If there's a significant gap between this run and the next (e.g. an image), preserve it.
+        // Otherwise, assume it's a text gap/overlap and close it (using our calculated advanceWidth).
+        if (i < runs.length - 1) {
+            const nextOriginal = originals[i + 1];
+            const currOriginal = originals[i];
+
+            const gap = nextOriginal.x - (currOriginal.x + currOriginal.baseWidth);
+            // Use the larger font size as a threshold for "is this a text gap?"
+            const threshold = Math.max(currOriginal.fontSize, nextOriginal.fontSize);
+
+            // Preserve gap if it's large, OR if the current run has 0 width (and wasn't stripped)
+            // This handles cases where layout engine produced 0-width runs but placed them with spacing.
+            const isStripped = i < firstContentIndex;
+            if (gap > threshold || (!isStripped && advanceWidth === 0 && gap > 0)) {
+                currentX += gap;
+            }
+        }
+    }
+}
+
+function collectRunsFromTree(box: RenderBox, accumulator: Run[]): void {
+    if (box.textRuns) {
+        accumulator.push(...box.textRuns);
+    }
+    for (const child of box.children) {
+        collectRunsFromTree(child, accumulator);
+    }
+}
+
+function traverse(box: RenderBox, visitor: (box: RenderBox) => boolean): void {
+    const continueTraversal = visitor(box);
+    if (continueTraversal) {
+        for (const child of box.children) {
+            traverse(child, visitor);
+        }
+    }
+}

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

@@ -0,0 +1,193 @@
+import { resolvedLineHeight } from "../../css/style.js";
+import type { ComputedStyle } from "../../css/style.js";
+import { estimateLineWidth } from "../../layout/utils/text-metrics.js";
+import type { LayoutNode } from "../../dom/node.js";
+import type { Run, Decorations, RGBA } from "../types.js";
+import { applyTextTransform } from "../../text/text-transform.js";
+import { resolveTextShadows } from "../../pdf/utils/shadow-utils.js";
+import { resolveTextAlign, resolveFallbackStartX } from "./text-alignment-resolver.js";
+import { resolveDecorations } from "./text-decoration-utils.js";
+
+export function createTextRuns(node: LayoutNode, color: RGBA | undefined, inheritedDecorations?: Decorations): Run[] {
+  const runs: Run[] = [];
+  const defaultColor = color ?? { r: 0, g: 0, b: 0, a: 1 };
+  const effectiveTextAlign = resolveTextAlign(node) ?? node.style.textAlign;
+  const decoration = inheritedDecorations ?? resolveDecorations(node.style);
+  const fontFamily = node.style.fontFamily ?? "sans-serif";
+  const fontSize = node.style.fontSize;
+  const fontWeight = node.style.fontWeight;
+  const fontStyle = node.style.fontStyle;
+  const fontVariant = node.style.fontVariant;
+  const letterSpacing = node.style.letterSpacing;
+
+
+  // Se o layout calculou inlineRuns (novo builder), use-os.
+  if (node.inlineRuns && node.inlineRuns.length > 0) {
+    for (const inlineRun of node.inlineRuns) {
+      const justifyLine =
+        effectiveTextAlign === "justify" && !inlineRun.isLastLine;
+
+      let wordSpacing: number | undefined;
+      const targetWidth =
+        inlineRun.targetWidth ?? inlineRun.lineWidth ?? inlineRun.width;
+      const lineWidth = inlineRun.lineWidth ?? inlineRun.width;
+
+      if (justifyLine && inlineRun.spaceCount > 0) {
+        const slack = Math.max(targetWidth - lineWidth, 0);
+        if (slack > 0) {
+          wordSpacing = slack / inlineRun.spaceCount;
+        }
+      }
+
+      // Count spaces *inside this run's text*
+      const spacesInRun =
+        inlineRun.text.split("").reduce(
+          (count, ch) => (ch === " " ? count + 1 : count),
+          0,
+        );
+
+      const extraWidth =
+        spacesInRun > 0 && wordSpacing !== undefined
+          ? spacesInRun * wordSpacing
+          : 0;
+
+      // Run-local visual width (base width + justified expansion)
+      const advanceWidth = inlineRun.width + extraWidth;
+
+      const resolvedShadows = resolveTextShadows(node, defaultColor);
+      const baseLineMatrix = {
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+        e: inlineRun.startX,
+        f: inlineRun.baseline,
+      };
+
+      runs.push({
+        text: inlineRun.text.normalize("NFC"),
+        fontFamily,
+        fontSize,
+        fontWeight,
+        fontStyle,
+        fontVariant,
+        fill: defaultColor,
+        letterSpacing,
+        lineMatrix: baseLineMatrix,
+        wordSpacing,
+        decorations: decoration ? { ...decoration } : undefined,
+        advanceWidth,
+        textShadows: resolvedShadows,
+
+        // New metadata
+        lineIndex: inlineRun.lineIndex,
+        isLastLine: inlineRun.isLastLine,
+        spacesInRun,
+      });
+    }
+    return runs;
+  }
+
+  // Se o layout calculou caixas de linha, use-as (caminho leg legado).
+  if (node.lineBoxes && node.lineBoxes.length > 0) {
+    const lineHeight = resolvedLineHeight(node.style);
+    // For table cells, we need the parent cell's contentWidth, not the text node's width
+    const parentIsTableCell = node.parent && (node.parent.tagName === 'td' || node.parent.tagName === 'th');
+    const contentWidth = parentIsTableCell
+      ? Math.max(node.parent!.box.contentWidth, 0)
+      : Math.max(node.box.contentWidth, 0);
+    // Alignment logic
+    let alignY = node.box.y;
+    // Vertical alignment
+    let totalTextHeight = node.lineBoxes.length * lineHeight;
+    if (node.style.verticalAlign === "middle") {
+      alignY = node.box.y + (node.box.contentHeight - totalTextHeight) / 2;
+    } else if (node.style.verticalAlign === "bottom") {
+      alignY = node.box.y + (node.box.contentHeight - totalTextHeight);
+    }
+    const justify = effectiveTextAlign === "justify";
+    for (let i = 0; i < node.lineBoxes.length; i++) {
+      const line = node.lineBoxes[i];
+      const normalizedText = line.text.normalize("NFC");
+      const baseWidth = line.width ?? estimateLineWidth(normalizedText, node.style);
+      const lineYOffset = i * lineHeight;
+      const baseline = alignY + lineYOffset + fontSize;
+      let wordSpacing: number | undefined;
+      if (justify && i < node.lineBoxes.length - 1) {
+        const gapCount = line.spaceCount ?? 0;
+        if (gapCount > 0) {
+          const targetWidth = line.targetWidth ?? contentWidth ?? baseWidth;
+          const slack = Math.max(targetWidth - baseWidth, 0);
+          if (slack > 0) {
+            wordSpacing = slack / gapCount;
+          }
+        }
+      }
+      const targetWidth = line.targetWidth ?? baseWidth;
+      const advanceWidth =
+        wordSpacing !== undefined && wordSpacing !== 0 && targetWidth > 0
+          ? Math.max(targetWidth, baseWidth)
+          : Math.max(baseWidth, 0);
+
+      // Apply horizontal text alignment
+      let startX = node.box.x;
+      if (advanceWidth > 0 && Number.isFinite(contentWidth) && contentWidth > 0) {
+        const slack = Math.max(contentWidth - advanceWidth, 0);
+        if (effectiveTextAlign === "center") {
+          startX = node.box.x + slack / 2;
+        } else if (effectiveTextAlign === "right" || effectiveTextAlign === "end") {
+          startX = node.box.x + slack;
+        }
+      }
+
+      const resolvedShadows = resolveTextShadows(node, defaultColor);
+      const baseLineMatrix = { a: 1, b: 0, c: 0, d: 1, e: startX, f: baseline };
+      runs.push({
+        text: normalizedText,
+        fontFamily,
+        fontSize,
+        fontWeight,
+        fontStyle,
+        fontVariant,
+        fill: defaultColor,
+        letterSpacing,
+        lineMatrix: baseLineMatrix,
+        wordSpacing,
+        decorations: decoration ? { ...decoration } : undefined,
+        advanceWidth,
+        textShadows: resolvedShadows,
+      });
+    }
+    return runs;
+  }
+
+  // Fallback para o comportamento original se não houver quebra de linha calculada
+  if (node.textContent) {
+    const raw = node.textContent;
+    const transformed = applyTextTransform(raw, node.style.textTransform);
+    const normalized = transformed.normalize("NFC");
+    // Se não houver lineBoxes, a baseline é a calculada para a caixa inteira.
+    const baseline = node.box.baseline > 0 ? node.box.baseline : node.box.y + node.box.contentHeight;
+    const advanceWidth = Math.max(estimateLineWidth(normalized, node.style), 0);
+    const startX = resolveFallbackStartX(node, advanceWidth, effectiveTextAlign);
+
+    const resolvedShadows = resolveTextShadows(node, defaultColor);
+    const baseLineMatrix = { a: 1, b: 0, c: 0, d: 1, e: startX, f: baseline };
+    return [{
+      text: normalized,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      fontStyle,
+      fontVariant,
+      letterSpacing,
+      fill: defaultColor,
+      lineMatrix: baseLineMatrix,
+      decorations: decoration ? { ...decoration } : undefined,
+      advanceWidth,
+      textShadows: resolvedShadows,
+    }];
+  }
+
+  return [];
+}

package/src/pdf/utils/transform-scope-manager.ts

@@ -0,0 +1,69 @@
+import type { Rect, TextMatrix } from "../types.js";
+import { CoordinateTransformer } from "./coordinate-transformer.js";
+import { ShapeRenderer } from "../renderers/shape-renderer.js";
+import { svgMatrixToPdf } from "../transform-adapter.js";
+
+export class TransformScopeManager {
+  constructor(
+    private readonly coordinateTransformer: CoordinateTransformer,
+    private readonly shapeRenderer: ShapeRenderer,
+  ) {}
+
+  beginTransformScope(transform: TextMatrix, rect: Rect): void {
+    // Store transform info for shape renderer to use
+    const pdfMatrix = svgMatrixToPdf(transform);
+    if (!pdfMatrix) {
+      this.shapeRenderer.pushRawCommands(["q"]);
+      return;
+    }
+
+    // Convert rect position to PDF coordinates
+    const xPt = this.coordinateTransformer.convertPxToPt(rect.x);
+    const localY = rect.y - this.coordinateTransformer.pageOffsetPx;
+    const yPt = this.coordinateTransformer.pageHeightPt - this.coordinateTransformer.convertPxToPt(localY);
+
+    // CSS transforms default to a 50% / 50% origin. Model that by translating
+    // relative coordinates so the transform happens around the center of the
+    // border box.
+    const originOffsetX = Number.isFinite(rect.width) ? rect.width / 2 : 0;
+    const originOffsetY = Number.isFinite(rect.height) ? rect.height / 2 : 0;
+    const translateBackX = this.coordinateTransformer.convertPxToPt(-originOffsetX);
+    const translateBackY = this.coordinateTransformer.convertPxToPt(originOffsetY);
+    const translateForwardX = this.coordinateTransformer.convertPxToPt(originOffsetX);
+    const translateForwardY = this.coordinateTransformer.convertPxToPt(-originOffsetY);
+
+    // Set up transform context: translate to position, apply transform
+    // This way shapes can be drawn at origin (0,0) and will be positioned and transformed correctly
+    const cmds: string[] = [
+      "q",
+      // Position element on page (applied last in the matrix chain)
+      `1 0 0 1 ${formatNumber(xPt)} ${formatNumber(yPt)} cm`,
+      // Translate back from pivot after applying skew/rotate
+      `1 0 0 1 ${formatNumber(translateForwardX)} ${formatNumber(translateForwardY)} cm`,
+      // Apply the css transform (already converted into PDF space)
+      `${formatNumber(pdfMatrix.a)} ${formatNumber(pdfMatrix.b)} ${formatNumber(pdfMatrix.c)} ${formatNumber(pdfMatrix.d)} 0 0 cm`,
+      // Move the local coordinate system so the transform pivot is the center of the box
+      `1 0 0 1 ${formatNumber(translateBackX)} ${formatNumber(translateBackY)} cm`,
+    ];
+
+    // Add marker for testing
+    if (pdfMatrix.b !== 0 || pdfMatrix.c !== 0) {
+      cmds.push(`%PAGYRA_TRANSFORM ${formatNumber(pdfMatrix.a)} ${formatNumber(pdfMatrix.b)} ${formatNumber(pdfMatrix.c)} ${formatNumber(pdfMatrix.d)} ${formatNumber(pdfMatrix.e)} ${formatNumber(pdfMatrix.f)}`);
+    }
+
+    this.shapeRenderer.pushRawCommands(cmds);
+    this.shapeRenderer.setTransformContext(rect);
+  }
+
+  endTransformScope(): void {
+    this.shapeRenderer.pushRawCommands(["Q"]);
+    this.shapeRenderer.clearTransformContext();
+  }
+}
+
+function formatNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number.isInteger(value) ? value.toString() : value.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
+}