pagyra-js 0.0.21 → 0.0.23

package/dist/src/pdf/font/font-subset.js

@@ -16,7 +16,6 @@ export function createPdfFontSubset(options) {
     const { glyphIds, gidMap } = computeSubsetClosure(fontProgram, initialGids);
     const unitsPerEm = fontMetrics.metrics.unitsPerEm;
     const widths = [];
-    const usedGidSet = new Set(glyphIds);
     let firstChar;
     let lastChar;
     if (encoding === "sequential") {
@@ -174,7 +173,6 @@ function subsetFont(fontProgram, glyphIds, encoding) {
     }
     const headView = new DataView(head.buffer, head.byteOffset, head.byteLength);
     const locaView = new DataView(loca.buffer, loca.byteOffset, loca.byteLength);
-    const glyfView = new DataView(glyf.buffer, glyf.byteOffset, glyf.byteLength);
     const hmtxView = new DataView(hmtx.buffer, hmtx.byteOffset, hmtx.byteLength);
     const hheaView = new DataView(hhea.buffer, hhea.byteOffset, hhea.byteLength);
     const indexToLocFormat = reader.getUint16(headView, 50);
@@ -352,7 +350,7 @@ function subsetFont(fontProgram, glyphIds, encoding) {
             paddedLength += 4 - (data.length % 4);
         offset += paddedLength;
     }
-    for (const [_, data] of tables) {
+    for (const [, data] of tables) {
         fullTtf.writeBytes(data);
         const padding = (4 - (data.length % 4)) % 4;
         for (let k = 0; k < padding; k++)

package/dist/src/pdf/font/to-unicode.js

@@ -4,22 +4,22 @@
  */
 export function createToUnicodeCMapText(entries) {
     if (!entries || entries.length === 0) {
-        return `/CIDInit /ProcSet findresource begin
-12 dict begin
-begincmap
-/CIDSystemInfo <<
-  /Registry (Adobe)
-  /Ordering (UCS)
-  /Supplement 0
->> def
-/CMapName /Adobe-Identity-UCS def
-/CMapType 2 def
-1 begincodespacerange
-<0000> <FFFF>
-endcodespacerange
-endcmap
-CMapName currentdict /CMap defineresource pop
-end
+        return `/CIDInit /ProcSet findresource begin
+12 dict begin
+begincmap
+/CIDSystemInfo <<
+  /Registry (Adobe)
+  /Ordering (UCS)
+  /Supplement 0
+>> def
+/CMapName /Adobe-Identity-UCS def
+/CMapType 2 def
+1 begincodespacerange
+<0000> <FFFF>
+endcodespacerange
+endcmap
+CMapName currentdict /CMap defineresource pop
+end
 end`;
     }
     const es = entries.slice().sort((a, b) => a.gid - b.gid);

package/dist/src/pdf/layout-tree-builder.js

@@ -12,6 +12,7 @@ import { calculateBoxDimensions } from "./utils/box-dimensions-utils.js";
 import { resolveDecorations } from "./utils/text-decoration-utils.js";
 import { resolveBackgroundLayers, resolveTextGradientLayer, } from "./utils/background-layer-resolver.js";
 import { resolveClipPath } from "./utils/clip-path-resolver.js";
+import { resolveMaskGradient } from "./utils/mask-resolver.js";
 import { parseTransform } from "../transform/css-parser.js";
 import { buildNodeTextRuns } from "./utils/node-text-run-factory.js";
 export function buildRenderTree(root, options = {}) {
@@ -92,7 +93,7 @@ function mapOverflow(mode) {
 // ====================
 // MAIN CONVERSION FUNCTION
 // ====================
-function convertNode(node, state, inheritedTextGradient) {
+function convertNode(node, state, inheritedTextGradient, inheritedTextBackground) {
     // Use the original HTML ID if available, otherwise generate a new one
     const originalId = node.customData?.id;
     const id = originalId || `node-${state.counter++}`;
@@ -104,15 +105,14 @@ function convertNode(node, state, inheritedTextGradient) {
     const borderRadius = resolveBorderRadius(node.style, borderBox);
     const transformString = node.style.transform;
     const transform = transformString ? parseTransform(transformString) ?? undefined : undefined;
+    const background = resolveBackgroundLayers(node, { borderBox, paddingBox, contentBox });
+    const backgroundClip = node.style.backgroundLayers?.some(l => l.clip === "text") ? "text" : undefined;
+    const maskGradient = resolveMaskGradient(node, { borderBox, paddingBox, contentBox });
     const ownTextGradient = resolveTextGradientLayer(node, { borderBox, paddingBox, contentBox });
-    if (ownTextGradient) {
-        log("layout", "debug", "node has background-clip:text gradient", {
-            tagName: node.tagName,
-            rect: ownTextGradient.rect,
-        });
-    }
     const textGradient = ownTextGradient ?? inheritedTextGradient;
-    const children = node.children.map((child) => convertNode(child, state, textGradient));
+    const ownTextBackground = backgroundClip === "text" ? background : undefined;
+    const textBackground = ownTextBackground ?? inheritedTextBackground;
+    const children = node.children.map((child) => convertNode(child, state, textGradient, textBackground));
     const imageRef = extractImageRef(node);
     const decorations = resolveDecorations(node.style);
     const textRuns = buildNodeTextRuns({
@@ -132,9 +132,9 @@ function convertNode(node, state, inheritedTextGradient) {
         textContent: node.textContent?.slice(0, 40),
         fontFamily: node.style.fontFamily,
         fontSize: node.style.fontSize,
+        breakInside: node.style.breakInside,
         contentBox,
     });
-    const background = resolveBackgroundLayers(node, { borderBox, paddingBox, contentBox });
     const clipPath = resolveClipPath(node, { borderBox, paddingBox, contentBox });
     const zIndex = typeof node.style.zIndex === "number" ? node.style.zIndex : 0;
     const establishesStackingContext = typeof node.style.zIndex === "number" && node.style.position !== Position.Static ||
@@ -186,6 +186,8 @@ function convertNode(node, state, inheritedTextGradient) {
         borderRadius,
         opacity: node.style.opacity ?? 1,
         overflow: mapOverflow(node.style.overflowX ?? OverflowMode.Visible),
+        overflowX: mapOverflow(node.style.overflowX ?? OverflowMode.Visible),
+        overflowY: mapOverflow(node.style.overflowY ?? OverflowMode.Visible),
         textRuns,
         decorations: decorations ?? {},
         textShadows: resolveTextShadows(node, fallbackShadowColor),
@@ -197,8 +199,12 @@ function convertNode(node, state, inheritedTextGradient) {
         links: [],
         borderColor: parseColor(node.style.borderColor),
         borderStyle,
+        breakInside: node.style.breakInside,
         color: textColor,
+        mask: node.style.mask,
+        maskGradient,
         background,
+        backgroundClip,
         clipPath,
         image: imageRef,
         customData,

package/dist/src/pdf/renderer/box-painter.js

@@ -5,6 +5,7 @@ import { renderSvgBox } from "../svg/render-svg.js";
 import { NodeKind } from "../types.js";
 import { computeBackgroundTileRects, rectEquals } from "../utils/background-tiles.js";
 import { computeBorderSideStrokes } from "../utils/border-dashes.js";
+import { roundedRectToPath } from "../utils/rounded-rect-to-path.js";
 import { defaultFormRendererFactory } from "../renderers/form/factory.js";
 import { extractDropShadowLayers, warnUnsupportedFilters, } from "../utils/filter-utils.js";
 export async function paintBoxAtomic(painter, box) {
@@ -33,12 +34,27 @@ export async function paintBoxAtomic(painter, box) {
         }
     }
     paintBoxShadows(painter, [box], false);
-    const clipCommands = buildClipPathCommands(box.clipPath);
+    // Overflow clipping
+    const hasOverflowClip = box.overflow === "hidden" || box.overflow === "clip";
+    if (hasOverflowClip) {
+        const clipArea = determineOverflowClipArea(box);
+        if (clipArea) {
+            const clipCommands = roundedRectToPath(clipArea.rect, clipArea.radius);
+            painter.beginClipPath(clipCommands);
+        }
+    }
+    let clipCommands = buildClipPathCommands(box.clipPath);
+    if (!clipCommands && box.maskGradient && box.maskGradient.gradient.type === "radial") {
+        // MVP: Aproximação de máscara radial usando clipping path circular
+        clipCommands = buildCircularClipPath(box.maskGradient.rect);
+    }
     const hasClip = !!clipCommands;
     if (hasClip && clipCommands) {
         painter.beginClipPath(clipCommands);
     }
-    paintBackground(painter, box);
+    if (box.backgroundClip !== "text") {
+        paintBackground(painter, box);
+    }
     paintBorder(painter, box);
     paintBoxShadows(painter, [box], true);
     if (box.kind === NodeKind.Svg || (box.tagName === "svg" && box.customData?.svg)) {
@@ -54,6 +70,9 @@ export async function paintBoxAtomic(painter, box) {
     if (hasClip) {
         painter.endClipPath();
     }
+    if (hasOverflowClip) {
+        painter.endClipPath();
+    }
     if (hasOpacity) {
         painter.endOpacityScope(effectiveOpacity);
     }
@@ -196,6 +215,32 @@ function determineBackgroundPaintArea(box) {
 function hasVisibleBorder(border) {
     return border.top > 0 || border.right > 0 || border.bottom > 0 || border.left > 0;
 }
+function determineOverflowClipArea(box) {
+    const rect = box.paddingBox ?? box.contentBox;
+    if (!rect) {
+        return null;
+    }
+    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 buildCircularClipPath(rect) {
+    const cx = rect.x + rect.width / 2;
+    const cy = rect.y + rect.height / 2;
+    const rx = rect.width / 2;
+    const ry = rect.height / 2;
+    const k = 0.5522847498307936;
+    return [
+        { type: "moveTo", x: cx + rx, y: cy },
+        { type: "curveTo", x1: cx + rx, y1: cy + ry * k, x2: cx + rx * k, y2: cy + ry, x: cx, y: cy + ry },
+        { type: "curveTo", x1: cx - rx * k, y1: cy + ry, x2: cx - rx, y2: cy + ry * k, x: cx - rx, y: cy },
+        { type: "curveTo", x1: cx - rx, y1: cy - ry * k, x2: cx - rx * k, y2: cy - ry, x: cx, y: cy - ry },
+        { type: "curveTo", x1: cx + rx * k, y1: cy - ry, x2: cx + rx, y2: cy - ry * k, x: cx + rx, y: cy },
+        { type: "closePath" }
+    ];
+}
 function zeroRadius() {
     return {
         topLeft: { x: 0, y: 0 },
@@ -205,16 +250,36 @@ function zeroRadius() {
     };
 }
 function buildClipPathCommands(clipPath) {
-    if (!clipPath || clipPath.type !== "polygon" || clipPath.points.length < 3) {
+    if (!clipPath) {
         return null;
     }
-    const [first, ...rest] = clipPath.points;
-    const commands = [{ type: "moveTo", x: first.x, y: first.y }];
-    for (const point of rest) {
-        commands.push({ type: "lineTo", x: point.x, y: point.y });
+    if (clipPath.type === "polygon") {
+        if (clipPath.points.length < 3) {
+            return null;
+        }
+        const [first, ...rest] = clipPath.points;
+        const commands = [{ 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;
     }
-    commands.push({ type: "closePath" });
-    return commands;
+    if (clipPath.type === "ellipse") {
+        return buildEllipseClipPath(clipPath.cx, clipPath.cy, clipPath.rx, clipPath.ry);
+    }
+    return null;
+}
+function buildEllipseClipPath(cx, cy, rx, ry) {
+    const k = 0.5522847498307936;
+    return [
+        { type: "moveTo", x: cx + rx, y: cy },
+        { type: "curveTo", x1: cx + rx, y1: cy + ry * k, x2: cx + rx * k, y2: cy + ry, x: cx, y: cy + ry },
+        { type: "curveTo", x1: cx - rx * k, y1: cy + ry, x2: cx - rx, y2: cy + ry * k, x: cx - rx, y: cy },
+        { type: "curveTo", x1: cx - rx, y1: cy - ry * k, x2: cx - rx * k, y2: cy - ry, x: cx, y: cy - ry },
+        { type: "curveTo", x1: cx + rx * k, y1: cy - ry, x2: cx + rx, y2: cy - ry * k, x: cx + rx, y: cy },
+        { type: "closePath" },
+    ];
 }
 function paintDropShadows(painter, box, shadows) {
     // Usa o borderBox como base da sombra (aproximação para drop-shadow)

package/dist/src/pdf/renderers/text-renderer.d.ts

@@ -13,16 +13,17 @@ export interface TextRendererResult {
 export declare class TextRenderer {
     private readonly coordinateTransformer;
     private readonly fontRegistry;
+    private readonly imageRenderer?;
+    private readonly graphicsStateManager?;
     private readonly commands;
     private readonly fonts;
     private readonly decorationRenderer;
     private readonly shadowRenderer;
-    private readonly graphicsStateManager?;
     private readonly fontResolver;
     private readonly gradientService;
     private readonly patterns;
     private transformContext;
-    constructor(coordinateTransformer: CoordinateTransformer, fontRegistry: FontRegistry, imageRenderer?: ImageRenderer, graphicsStateManager?: GraphicsStateManager);
+    constructor(coordinateTransformer: CoordinateTransformer, fontRegistry: FontRegistry, imageRenderer?: ImageRenderer | undefined, graphicsStateManager?: GraphicsStateManager | undefined);
     drawText(text: string, xPx: number, yPx: number, options?: TextPaintOptions): Promise<void>;
     drawTextRun(run: Run): Promise<void>;
     private drawTextRunWithGlyphs;
@@ -37,5 +38,6 @@ export declare class TextRenderer {
     flushCommands(): string[];
     setTransformContext(rect: Rect): void;
     clearTransformContext(): void;
+    private generateBackgroundCommands;
     getResult(): TextRendererResult;
 }

package/dist/src/pdf/renderers/text-renderer.js

@@ -1,6 +1,6 @@
 import { log } from "../../logging/debug.js";
 import { CoordinateTransformer } from "../utils/coordinate-transformer.js";
-import { formatNumber } from "./text-renderer-utils.js";
+import { formatNumber, fillColorCommand } from "./text-renderer-utils.js";
 import { TextShadowRenderer } from "./text-shadow-renderer.js";
 import { TextDecorationRenderer } from "./text-decoration-renderer.js";
 import { TextFontResolver } from "./text-font-resolver.js";
@@ -16,11 +16,12 @@ export class TextRenderer {
     constructor(coordinateTransformer, fontRegistry, imageRenderer, graphicsStateManager) {
         this.coordinateTransformer = coordinateTransformer;
         this.fontRegistry = fontRegistry;
+        this.imageRenderer = imageRenderer;
+        this.graphicsStateManager = graphicsStateManager;
         this.commands = [];
         this.fonts = new Map();
         this.patterns = new Map();
         this.transformContext = null;
-        this.graphicsStateManager = graphicsStateManager;
         this.fontResolver = new TextFontResolver(fontRegistry);
         this.shadowRenderer = new TextShadowRenderer(coordinateTransformer, fontRegistry, imageRenderer, graphicsStateManager);
         this.decorationRenderer = new TextDecorationRenderer(coordinateTransformer, graphicsStateManager);
@@ -106,6 +107,27 @@ export class TextRenderer {
         const appliedWordSpacing = wordSpacingPx !== 0 && wordSpacingPt !== 0;
         const subsetResource = this.fontRegistry.ensureSubsetForGlyphRun(glyphRun, font);
         this.registerSubsetFont(subsetResource.alias, subsetResource.ref);
+        const textBackground = run.textBackground;
+        if (textBackground) {
+            log("paint", "debug", "text run has background clip: text", {
+                text: run.text.slice(0, 32),
+            });
+            const afterTextCommands = [];
+            this.generateBackgroundCommands(textBackground, afterTextCommands);
+            if (afterTextCommands.length > 0) {
+                const glyphCommands = drawGlyphRun(glyphRun, subsetResource.subset, 0, 0, fontSizePt, color, this.graphicsStateManager, wordSpacingPt, {
+                    textRenderingMode: 7, // Clip to text
+                    afterTextCommands,
+                    tm: textMatrix,
+                    skipColor: true,
+                });
+                this.commands.push("q", ...glyphCommands, "Q");
+                if (run.decorations) {
+                    this.commands.push(...this.decorationRenderer.render(run, color));
+                }
+                return;
+            }
+        }
         const gradientBackground = run.textGradient;
         if (gradientBackground && gradientBackground.rect && gradientBackground.rect.width > 0 && gradientBackground.rect.height > 0) {
             log("paint", "debug", "text run has background clip gradient", {
@@ -213,6 +235,34 @@ export class TextRenderer {
     clearTransformContext() {
         this.transformContext = null;
     }
+    generateBackgroundCommands(background, commands) {
+        if (background.color) {
+            const color = background.color;
+            const rect = background.gradient?.originRect ?? background.image?.originRect ?? { x: -10000, y: -10000, width: 20000, height: 20000 };
+            const pdfRect = transformForRect(rect, this.coordinateTransformer, this.transformContext);
+            const colorCmd = fillColorCommand(color, this.graphicsStateManager);
+            commands.push("q", colorCmd, pdfRect, `0 0 ${formatNumber(this.coordinateTransformer.convertPxToPt(rect.width))} ${formatNumber(this.coordinateTransformer.convertPxToPt(rect.height))} re`, "f", "Q");
+        }
+        if (background.gradient) {
+            const g = background.gradient;
+            const shading = g.gradient.type === "radial"
+                ? this.gradientService.createRadialGradient(g.gradient, g.rect)
+                : this.gradientService.createLinearGradient(g.gradient, g.rect);
+            const pdfTransform = transformForRect(g.rect, this.coordinateTransformer, this.transformContext);
+            commands.push("q", pdfTransform, `0 0 ${formatNumber(this.coordinateTransformer.convertPxToPt(g.rect.width))} ${formatNumber(this.coordinateTransformer.convertPxToPt(g.rect.height))} re`, "W n", `/${shading.shadingName} sh`, "Q");
+        }
+        if (background.image && this.imageRenderer) {
+            const img = background.image;
+            const resource = this.imageRenderer.registerResource(img.image);
+            // Simplificação: desenha a imagem uma vez. Idealmente deveria suportar tiling (repeat).
+            const widthPt = this.coordinateTransformer.convertPxToPt(img.rect.width);
+            const heightPt = this.coordinateTransformer.convertPxToPt(img.rect.height);
+            const xPt = this.coordinateTransformer.convertPxToPt(img.rect.x);
+            const localY = img.rect.y - this.coordinateTransformer.pageOffsetPx;
+            const yPt = this.coordinateTransformer.pageHeightPt - this.coordinateTransformer.convertPxToPt(localY + img.rect.height);
+            commands.push("q", `${formatNumber(widthPt)} 0 0 ${formatNumber(heightPt)} ${formatNumber(xPt)} ${formatNumber(yPt)} cm`, `/${resource.alias} Do`, "Q");
+        }
+    }
     getResult() {
         return {
             commands: [...this.commands],

package/dist/src/pdf/types.d.ts

@@ -50,10 +50,18 @@ export interface Radius {
     bottomRight: CornerRadius;
     bottomLeft: CornerRadius;
 }
-export interface ClipPath {
+export interface ClipPathPolygon {
     type: "polygon";
     points: ShapePoint[];
 }
+export interface ClipPathEllipse {
+    type: "ellipse";
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+export type ClipPath = ClipPathPolygon | ClipPathEllipse;
 export interface BackgroundImage {
     image: ImageRef;
     rect: Rect;
@@ -146,6 +154,7 @@ export interface Run {
     decorations?: Decorations;
     advanceWidth?: number;
     textGradient?: GradientBackground;
+    textBackground?: Background;
     textShadows?: TextShadowLayer[];
     /**
      * Line index in the block (0-based).
@@ -233,6 +242,8 @@ export interface RenderBox {
     background: Background;
     opacity: number;
     overflow: Overflow;
+    overflowX: Overflow;
+    overflowY: Overflow;
     textRuns: Run[];
     decorations: Decorations;
     textShadows: TextShadowLayer[];
@@ -255,7 +266,11 @@ export interface RenderBox {
     customData?: Record<string, unknown>;
     borderColor?: RGBA;
     borderStyle?: BorderStyles;
+    breakInside?: string;
     color?: RGBA;
+    mask?: string;
+    maskGradient?: GradientBackground;
+    backgroundClip?: "border-box" | "padding-box" | "content-box" | "text";
     transform?: TextMatrix;
     /** Parsed CSS filter functions carried from ComputedStyle */
     filter?: FilterFunction[];

package/dist/src/pdf/utils/clip-path-resolver.js

@@ -1,24 +1,40 @@
 export function resolveClipPath(node, boxes) {
     const clip = node.style.clipPath;
-    if (!clip || clip.type !== "polygon" || !clip.points.length) {
+    if (!clip) {
         return undefined;
     }
     const referenceRect = selectReferenceRect(clip.referenceBox, boxes);
     if (!referenceRect || referenceRect.width <= 0 || referenceRect.height <= 0) {
         return undefined;
     }
-    const points = clip.points.map((point) => {
-        const x = resolveClipLength(point.x, referenceRect.width);
-        const y = resolveClipLength(point.y, referenceRect.height);
-        return {
-            x: referenceRect.x + x,
-            y: referenceRect.y + y,
-        };
-    });
-    if (points.some((p) => !Number.isFinite(p.x) || !Number.isFinite(p.y))) {
-        return undefined;
+    if (clip.type === "polygon") {
+        if (!clip.points.length) {
+            return undefined;
+        }
+        const points = clip.points.map((point) => {
+            const x = resolveClipLength(point.x, referenceRect.width);
+            const y = resolveClipLength(point.y, referenceRect.height);
+            return {
+                x: referenceRect.x + x,
+                y: referenceRect.y + y,
+            };
+        });
+        if (points.some((p) => !Number.isFinite(p.x) || !Number.isFinite(p.y))) {
+            return undefined;
+        }
+        return { type: "polygon", points };
+    }
+    if (clip.type === "ellipse") {
+        const rx = resolveClipLength(clip.rx, referenceRect.width);
+        const ry = resolveClipLength(clip.ry, referenceRect.height);
+        const cx = referenceRect.x + resolveClipLength(clip.cx, referenceRect.width);
+        const cy = referenceRect.y + resolveClipLength(clip.cy, referenceRect.height);
+        if (!Number.isFinite(rx) || !Number.isFinite(ry) || !Number.isFinite(cx) || !Number.isFinite(cy)) {
+            return undefined;
+        }
+        return { type: "ellipse", cx, cy, rx, ry };
     }
-    return { type: "polygon", points };
+    return undefined;
 }
 function selectReferenceRect(box, boxes) {
     switch (box) {

package/dist/src/pdf/utils/mask-resolver.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutNode } from "../../dom/node.js";
+import type { Rect, GradientBackground } from "../types.js";
+export declare function resolveMaskGradient(node: LayoutNode, boxes: {
+    borderBox: Rect;
+    paddingBox: Rect;
+    contentBox: Rect;
+}): GradientBackground | undefined;

package/dist/src/pdf/utils/mask-resolver.js

@@ -0,0 +1,25 @@
+import { parseRadialGradient, parseLinearGradient } from "../../css/parsers/gradient-parser.js";
+export function resolveMaskGradient(node, boxes) {
+    const mask = node.style.mask;
+    if (!mask)
+        return undefined;
+    const radial = parseRadialGradient(mask);
+    if (radial) {
+        return {
+            gradient: radial,
+            rect: boxes.borderBox,
+            repeat: "no-repeat",
+            originRect: boxes.borderBox,
+        };
+    }
+    const linear = parseLinearGradient(mask);
+    if (linear) {
+        return {
+            gradient: linear,
+            rect: boxes.borderBox,
+            repeat: "no-repeat",
+            originRect: boxes.borderBox,
+        };
+    }
+    return undefined;
+}

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

@@ -1,5 +1,5 @@
 import type { LayoutNode } from "../../dom/node.js";
-import type { RenderBox, Rect, RGBA, Run, Decorations, GradientBackground } from "../types.js";
+import type { RenderBox, Rect, RGBA, Run, Decorations, GradientBackground, Background } from "../types.js";
 import type { Matrix } from "../../geometry/matrix.js";
 import type { FontResolver } from "../../fonts/types.js";
 import type { GlyphRun } from "../../layout/text-run.js";
@@ -15,6 +15,7 @@ export interface NodeTextRunContext {
     fallbackColor: RGBA;
     fontResolver?: FontResolver;
     textGradient?: GradientBackground;
+    textBackground?: Background;
 }
 export declare function buildNodeTextRuns(context: NodeTextRunContext): Run[];
 /**

package/dist/src/pdf/utils/node-text-run-factory.js

@@ -1,8 +1,7 @@
 import { createTextRuns } from "./text-utils.js";
 import { createListMarkerRun } from "./list-utils.js";
-import { multiplyMatrices } from "../../geometry/matrix.js";
 export function buildNodeTextRuns(context) {
-    const { node, children, borderBox, contentBox, textColor, decorations, transform, fallbackColor, fontResolver, textGradient } = context;
+    const { node, children, contentBox, textColor, decorations, fallbackColor, fontResolver, textGradient, textBackground } = context;
     const textRuns = createTextRuns(node, textColor, decorations);
     // If we have a fontResolver, enhance text runs with GlyphRun data
     if (fontResolver) {
@@ -19,33 +18,13 @@ export function buildNodeTextRuns(context) {
             run.textGradient = textGradient;
         }
     }
-    if (transform && textRuns.length > 0) {
-        // applyTransformToTextRuns(textRuns, transform, borderBox);
+    if (textBackground) {
+        for (const run of textRuns) {
+            run.textBackground = textBackground;
+        }
     }
     return textRuns;
 }
-function applyTransformToTextRuns(runs, cssMatrix, originBox) {
-    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, ty) {
-    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.

package/dist/src/pdf/utils/rounded-rect-to-path.d.ts

@@ -0,0 +1,7 @@
+import type { Rect, Radius } from "../types.js";
+import type { PathCommand } from "../renderers/shape-renderer.js";
+/**
+ * Converte um retângulo arredondado em uma lista de comandos de caminho (PathCommand).
+ * Os comandos estão em pixels da página.
+ */
+export declare function roundedRectToPath(rect: Rect, radius: Radius): PathCommand[];

package/dist/src/pdf/utils/rounded-rect-to-path.js

@@ -0,0 +1,86 @@
+/**
+ * Converte um retângulo arredondado em uma lista de comandos de caminho (PathCommand).
+ * Os comandos estão em pixels da página.
+ */
+export function roundedRectToPath(rect, radius) {
+    const { x, y, width, height } = rect;
+    const tl = radius.topLeft;
+    const tr = radius.topRight;
+    const br = radius.bottomRight;
+    const bl = radius.bottomLeft;
+    // Bézier approximation constant for circular arcs
+    const k = 0.5522847498307936;
+    const commands = [];
+    // Início: Top-left após o raio
+    commands.push({ type: "moveTo", x: x + tl.x, y: y });
+    // Top edge
+    commands.push({ type: "lineTo", x: x + width - tr.x, y: y });
+    // Top-right corner
+    if (tr.x > 0 || tr.y > 0) {
+        commands.push({
+            type: "curveTo",
+            x1: x + width - tr.x + k * tr.x,
+            y1: y,
+            x2: x + width,
+            y2: y + tr.y - k * tr.y,
+            x: x + width,
+            y: y + tr.y
+        });
+    }
+    else {
+        commands.push({ type: "lineTo", x: x + width, y: y });
+    }
+    // Right edge
+    commands.push({ type: "lineTo", x: x + width, y: y + height - br.y });
+    // Bottom-right corner
+    if (br.x > 0 || br.y > 0) {
+        commands.push({
+            type: "curveTo",
+            x1: x + width,
+            y1: y + height - br.y + k * br.y,
+            x2: x + width - br.x + k * br.x,
+            y2: y + height,
+            x: x + width - br.x,
+            y: y + height
+        });
+    }
+    else {
+        commands.push({ type: "lineTo", x: x + width, y: y + height });
+    }
+    // Bottom edge
+    commands.push({ type: "lineTo", x: x + bl.x, y: y + height });
+    // Bottom-left corner
+    if (bl.x > 0 || bl.y > 0) {
+        commands.push({
+            type: "curveTo",
+            x1: x + bl.x - k * bl.x,
+            y1: y + height,
+            x2: x,
+            y2: y + height - bl.y + k * bl.y,
+            x: x,
+            y: y + height - bl.y
+        });
+    }
+    else {
+        commands.push({ type: "lineTo", x: x, y: y + height });
+    }
+    // Left edge
+    commands.push({ type: "lineTo", x: x, y: y + tl.y });
+    // Top-left corner
+    if (tl.x > 0 || tl.y > 0) {
+        commands.push({
+            type: "curveTo",
+            x1: x,
+            y1: y + tl.y - k * tl.y,
+            x2: x + tl.x - k * tl.x,
+            y2: y,
+            x: x + tl.x,
+            y: y
+        });
+    }
+    else {
+        commands.push({ type: "lineTo", x: x, y: y });
+    }
+    commands.push({ type: "closePath" });
+    return commands;
+}