pagyra-js 0.0.1

package/tests/pdf/border-radius.spec.ts

@@ -0,0 +1,151 @@
+import { describe, it, expect } from "vitest";
+import { generateRoundedRectPath } from "../../src/pdf/renderers/rounded-rect-path.js";
+import type { Radius, Rect, RenderBox } from "../../src/pdf/types.js";
+import { normalizeRadiiForRect, isZeroRadius } from "../../src/pdf/renderers/radius-utils.js";
+
+describe("border-radius rendering", () => {
+  it("generates correct path for rounded rectangle with 15px radius", () => {
+    const width = 100;
+    const height = 50;
+    const radii: Radius = {
+      topLeft: { x: 15, y: 15 },
+      topRight: { x: 15, y: 15 },
+      bottomRight: { x: 15, y: 15 },
+      bottomLeft: { x: 15, y: 15 },
+    };
+
+    const path = generateRoundedRectPath(width, height, radii, 0, 0);
+
+    console.log("Generated path:");
+    console.log(path.join("\n"));
+
+    // Should have move command, edges, and 4 Bézier curves for corners
+    expect(path.length).toBeGreaterThan(0);
+    
+    // First command should be move to (tl.x, 0) = (15, 0)
+    expect(path[0]).toBe("15 0 m");
+    
+    // Path should contain 4 cubic Bézier curves (for the 4 corners)
+    const bezierCurves = path.filter(cmd => cmd.endsWith(" c"));
+    expect(bezierCurves.length).toBe(4);
+    
+    // Last command should close the path
+    expect(path[path.length - 1]).toBe("h");
+  });
+
+  it("generates straight lines for zero radius", () => {
+    const width = 100;
+    const height = 50;
+    const radii: Radius = {
+      topLeft: { x: 0, y: 0 },
+      topRight: { x: 0, y: 0 },
+      bottomRight: { x: 0, y: 0 },
+      bottomLeft: { x: 0, y: 0 },
+    };
+
+    const path = generateRoundedRectPath(width, height, radii, 0, 0);
+
+    console.log("Generated path for zero radius:");
+    console.log(path.join("\n"));
+
+    // Should not have any Bézier curves
+    const bezierCurves = path.filter(cmd => cmd.endsWith(" c"));
+    expect(bezierCurves.length).toBe(0);
+  });
+
+  it("normalizes radii correctly when they fit within bounds", () => {
+    const width = 200;
+    const height = 63;
+    const radii: Radius = {
+      topLeft: { x: 15, y: 15 },
+      topRight: { x: 15, y: 15 },
+      bottomRight: { x: 15, y: 15 },
+      bottomLeft: { x: 15, y: 15 },
+    };
+
+    const normalized = normalizeRadiiForRect(width, height, radii);
+
+    console.log("Normalized radii:", JSON.stringify(normalized, null, 2));
+
+    // Radii should remain unchanged when they fit within bounds
+    expect(normalized.topLeft.x).toBe(15);
+    expect(normalized.topLeft.y).toBe(15);
+    expect(normalized.topRight.x).toBe(15);
+    expect(normalized.topRight.y).toBe(15);
+    expect(normalized.bottomLeft.x).toBe(15);
+    expect(normalized.bottomLeft.y).toBe(15);
+    expect(normalized.bottomRight.x).toBe(15);
+    expect(normalized.bottomRight.y).toBe(15);
+  });
+
+  it("generates correct outer and inner paths for border difference", () => {
+    // Simulate what fillRoundedRectDifference does
+    const outerRect: Rect = { x: 32, y: 22, width: 207.168, height: 63.2 };
+    const outerRadii: Radius = {
+      topLeft: { x: 15, y: 15 },
+      topRight: { x: 15, y: 15 },
+      bottomRight: { x: 15, y: 15 },
+      bottomLeft: { x: 15, y: 15 },
+    };
+    const border = { top: 2, right: 2, bottom: 2, left: 2 };
+    
+    const innerRect: Rect = {
+      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 innerRadii: Radius = {
+      topLeft: { x: Math.max(15 - border.left, 0), y: Math.max(15 - border.top, 0) },
+      topRight: { x: Math.max(15 - border.right, 0), y: Math.max(15 - border.top, 0) },
+      bottomRight: { x: Math.max(15 - border.right, 0), y: Math.max(15 - border.bottom, 0) },
+      bottomLeft: { x: Math.max(15 - border.left, 0), y: Math.max(15 - border.bottom, 0) },
+    };
+
+    const outerAdjusted = normalizeRadiiForRect(outerRect.width, outerRect.height, outerRadii);
+    const innerAdjusted = normalizeRadiiForRect(innerRect.width, innerRect.height, innerRadii);
+
+    const outerPath = generateRoundedRectPath(outerRect.width, outerRect.height, outerAdjusted, 0, 0);
+    
+    const offsetX = innerRect.x - outerRect.x;  // 2
+    const offsetY = innerRect.y - outerRect.y;  // 2
+    const innerPath = generateRoundedRectPath(innerRect.width, innerRect.height, innerAdjusted, offsetX, offsetY);
+
+    console.log("\nOuter path (should have 15px radius):");
+    console.log(outerPath.join("\n"));
+    console.log("\nInner path (should have 13px radius, offset by 2,2):");
+    console.log(innerPath.join("\n"));
+
+    // Both paths should have Bézier curves
+    const outerBeziers = outerPath.filter(cmd => cmd.endsWith(" c"));
+    const innerBeziers = innerPath.filter(cmd => cmd.endsWith(" c"));
+    expect(outerBeziers.length).toBe(4);
+    expect(innerBeziers.length).toBe(4);
+  });
+
+  it("does not treat 15px radius as zero", () => {
+    const radii: Radius = {
+      topLeft: { x: 15, y: 15 },
+      topRight: { x: 15, y: 15 },
+      bottomRight: { x: 15, y: 15 },
+      bottomLeft: { x: 15, y: 15 },
+    };
+
+    const isZero = isZeroRadius(radii);
+    console.log("isZeroRadius for 15px:", isZero);
+    expect(isZero).toBe(false);
+  });
+
+  it("correctly identifies zero radius", () => {
+    const radii: Radius = {
+      topLeft: { x: 0, y: 0 },
+      topRight: { x: 0, y: 0 },
+      bottomRight: { x: 0, y: 0 },
+      bottomLeft: { x: 0, y: 0 },
+    };
+
+    const isZero = isZeroRadius(radii);
+    console.log("isZeroRadius for 0px:", isZero);
+    expect(isZero).toBe(true);
+  });
+});

package/tests/pdf/clip-path.spec.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import { paintBoxAtomic } from "../../src/pdf/renderer/box-painter.js";
+import { PagePainter } from "../../src/pdf/page-painter.js";
+import { PdfDocument } from "../../src/pdf/primitives/pdf-document.js";
+import { FontRegistry } from "../../src/pdf/font/font-registry.js";
+import { NodeKind, Overflow, type RenderBox, type Radius, type Rect } from "../../src/pdf/types.js";
+import { renderTreeForHtml } from "../helpers/render-utils.js";
+
+function zeroRadius(): Radius {
+  return {
+    topLeft: { x: 0, y: 0 },
+    topRight: { x: 0, y: 0 },
+    bottomRight: { x: 0, y: 0 },
+    bottomLeft: { x: 0, y: 0 },
+  };
+}
+
+describe("clip-path rendering", () => {
+  it("emits clipping commands when a clip-path is present", async () => {
+    const doc = new PdfDocument({});
+    const fontRegistry = new FontRegistry(doc, { fontFaces: [] });
+    const painter = new PagePainter(800, (v) => v, fontRegistry, 0);
+
+    const rect: Rect = { x: 0, y: 0, width: 200, height: 200 };
+    const box: RenderBox = {
+      id: "node-clip",
+      tagName: "div",
+      kind: NodeKind.Container,
+      contentBox: rect,
+      paddingBox: rect,
+      borderBox: rect,
+      visualOverflow: rect,
+      padding: { top: 0, right: 0, bottom: 0, left: 0 },
+      border: { top: 0, right: 0, bottom: 0, left: 0 },
+      borderRadius: zeroRadius(),
+      clipPath: {
+        type: "polygon",
+        points: [
+          { x: 0, y: 0 },
+          { x: 200, y: 0 },
+          { x: 0, y: 200 },
+        ],
+      },
+      background: { color: { r: 0.2, g: 0.6, b: 0.9, a: 1 } },
+      opacity: 1,
+      overflow: Overflow.Visible,
+      textRuns: [],
+      decorations: {},
+      textShadows: [],
+      boxShadows: [],
+      establishesStackingContext: false,
+      zIndexComputed: 0,
+      positioning: { type: "normal" },
+      children: [],
+      links: [],
+    };
+
+    await paintBoxAtomic(painter, box);
+    const result = painter.result();
+    const content = result.content;
+
+    expect(content).toContain("W n");
+    expect(content).toContain("Q");
+  });
+
+  it("resolves polygon clip-path points relative to border-box", async () => {
+    const html = `<div style="
+      width:200px;height:200px;
+      background:skyblue;
+      clip-path: polygon(50% 0, 0 100%, 100% 100%);
+    "></div>`;
+
+    const renderTree = await renderTreeForHtml(html);
+    const body = renderTree.root.children.find((c) => c.tagName === "body") ?? renderTree.root;
+    const div = body.children.find((c) => c.tagName === "div");
+    expect(div).toBeDefined();
+    const clipPath = div!.clipPath;
+    expect(clipPath).toBeDefined();
+    expect(clipPath?.type).toBe("polygon");
+    const points = clipPath!.points;
+    expect(points).toHaveLength(3);
+    const [a, b, c] = points;
+    // Apex centered at top edge
+    expect(a.x).toBeCloseTo(div!.borderBox.x + div!.borderBox.width / 2, 5);
+    expect(a.y).toBeCloseTo(div!.borderBox.y, 5);
+    // Base spans full width at bottom
+    expect(b.x).toBeCloseTo(div!.borderBox.x, 5);
+    expect(b.y).toBeCloseTo(div!.borderBox.y + div!.borderBox.height, 5);
+    expect(c.x).toBeCloseTo(div!.borderBox.x + div!.borderBox.width, 5);
+    expect(c.y).toBeCloseTo(div!.borderBox.y + div!.borderBox.height, 5);
+  });
+});

package/tests/pdf/radial-gradient.spec.ts

@@ -0,0 +1,50 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { registerAllPropertyParsers } from "../../src/css/parsers/register-parsers.js";
+import { parseBackgroundImage } from "../../src/css/parsers/background-parser-extended.js";
+import { ComputedStyle } from "../../src/css/style.js";
+import { LayoutNode } from "../../src/dom/node.js";
+import { resolveBackgroundLayers } from "../../src/pdf/utils/background-layer-resolver.js";
+import type { RadialGradient } from "../../src/css/parsers/gradient-parser.js";
+
+describe("radial-gradient backgrounds", () => {
+  beforeAll(() => {
+    registerAllPropertyParsers();
+  });
+
+  it("parses radial gradients into background layers", () => {
+    const target: { backgroundLayers?: unknown[] } = {};
+    parseBackgroundImage("radial-gradient(circle, #ffdd55, #ff6600)", target as any);
+
+    expect(target.backgroundLayers).toBeDefined();
+    const gradientLayer = target.backgroundLayers?.find((layer: any) => layer.kind === "gradient");
+    expect(gradientLayer).toBeDefined();
+
+    const gradient = (gradientLayer as any).gradient as RadialGradient;
+    expect(gradient.type).toBe("radial");
+    expect(gradient.stops.length).toBe(2);
+  });
+
+  it("normalizes radial gradient geometry using farthest-corner default", () => {
+    const target: { backgroundLayers?: unknown[] } = {};
+    parseBackgroundImage("radial-gradient(circle, #ffdd55, #ff6600)", target as any);
+
+    const style = new ComputedStyle({ backgroundLayers: target.backgroundLayers as any });
+    const node = new LayoutNode(style);
+    const boxes = {
+      borderBox: { x: 0, y: 0, width: 300, height: 300 },
+      paddingBox: { x: 0, y: 0, width: 300, height: 300 },
+      contentBox: { x: 0, y: 0, width: 300, height: 300 },
+    };
+
+    const background = resolveBackgroundLayers(node, boxes);
+    expect(background.gradient).toBeDefined();
+    const gradient = background.gradient?.gradient as RadialGradient;
+    expect(gradient.type).toBe("radial");
+    expect(gradient.coordsUnits).toBe("ratio");
+    expect(gradient.cx).toBeCloseTo(0.5, 3);
+    expect(gradient.cy).toBeCloseTo(0.5, 3);
+
+    const expectedRadiusRatio = Math.hypot(150, 150) / 300;
+    expect(gradient.r).toBeCloseTo(expectedRadiusRatio, 3);
+  });
+});

package/tests/pdf/svg-stroke-dash.spec.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from "vitest";
+import { parseElement } from "../../src/svg/parser.js";
+import { renderPath } from "../../src/pdf/svg/shape-renderer.js";
+import { createDefaultStyle, deriveStyle } from "../../src/pdf/svg/style-computer.js";
+import { ShapeRenderer } from "../../src/pdf/renderers/shape-renderer.js";
+import { CoordinateTransformer } from "../../src/pdf/utils/coordinate-transformer.js";
+import { GraphicsStateManager } from "../../src/pdf/renderers/graphics-state-manager.js";
+import { parseHTML } from "linkedom";
+import type { SvgRenderContext } from "../../src/pdf/svg/render-svg.js";
+import type { SvgPathNode } from "../../src/svg/types.js";
+
+describe("SVG Stroke Dash Support", () => {
+  it("should render path with stroke-dasharray", async () => {
+    const { document } = parseHTML(`
+      <svg>
+        <path d="M10 10 L90 10" stroke="black" stroke-width="2" stroke-dasharray="5,5" />
+      </svg>
+    `);
+    const pathElement = document.querySelector("path");
+    const context = { warn: () => { } };
+    const svgNode = parseElement(pathElement!, context) as SvgPathNode;
+    expect(svgNode).not.toBeNull();
+    expect(svgNode.type).toBe("path");
+
+    const transformer = new CoordinateTransformer(100, (x) => x * 0.75);
+    const graphicsStateManager = new GraphicsStateManager();
+    const shapeRenderer = new ShapeRenderer(transformer, graphicsStateManager);
+
+    const renderContext: SvgRenderContext = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      painter: shapeRenderer as any,
+      viewportMatrix: { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 },
+      transform: { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 },
+      strokeScale: 1,
+    };
+
+    const style = deriveStyle(createDefaultStyle(), svgNode);
+    renderPath(svgNode, style, renderContext);
+
+    const result = shapeRenderer.getResult();
+    const commands = result.commands.join("\n");
+
+    // Check for dash pattern command
+    // [5 5] 0 d -> [3.75 3.75] 0 d
+    expect(commands).toContain("[3.75 3.75] 0 d");
+  });
+
+  it("should render path with stroke-dasharray and stroke-dashoffset", async () => {
+    const { document } = parseHTML(`
+      <svg>
+        <path d="M10 30 L90 30" stroke="black" stroke-width="2" stroke-dasharray="10 5" stroke-dashoffset="5" />
+      </svg>
+    `);
+    const pathElement = document.querySelector("path");
+    const context = { warn: () => { } };
+    const svgNode = parseElement(pathElement!, context) as SvgPathNode;
+    expect(svgNode).not.toBeNull();
+
+    const transformer = new CoordinateTransformer(100, (x) => x * 0.75);
+    const graphicsStateManager = new GraphicsStateManager();
+    const shapeRenderer = new ShapeRenderer(transformer, graphicsStateManager);
+
+    const renderContext: SvgRenderContext = {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      painter: shapeRenderer as any,
+      viewportMatrix: { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 },
+      transform: { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 },
+      strokeScale: 1,
+    };
+
+    const style = deriveStyle(createDefaultStyle(), svgNode);
+    renderPath(svgNode, style, renderContext);
+
+    const result = shapeRenderer.getResult();
+    const commands = result.commands.join("\n");
+
+    // Check for dash pattern command with offset
+    // [10 5] 5 d -> [7.5 3.75] 3.75 d
+    expect(commands).toContain("[7.5 3.75] 3.75 d");
+  });
+});

package/tests/pdf/text-transform-matrix.spec.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest";
+import { renderRuns, renderTreeForHtml, collectBoxes, collectRuns } from "../helpers/render-utils.js";
+
+const TAN_20 = Math.tan((20 * Math.PI) / 180);
+
+describe("PDF text transforms", () => {
+  it("applies skewX to text runs (keeps linear components in CSS space)", async () => {
+    const html = `<span style="display:inline-block; font-size:20px; transform: skewX(20deg);">Skewed</span>`;
+    const runs = await renderRuns(html);
+    const skewRun = runs.find((r) => r.text.includes("Skewed"));
+    expect(skewRun).toBeDefined();
+    // lineMatrix remains in CSS coordinates; skewX should set c to tan(20deg)
+    expect(Math.abs((skewRun!.lineMatrix?.c ?? 0) - TAN_20)).toBeLessThan(1e-3);
+    expect(skewRun!.lineMatrix?.a ?? 1).toBeCloseTo(1);
+    expect(skewRun!.lineMatrix?.d ?? 1).toBeCloseTo(1);
+  });
+
+  it("keeps text baseline inside table cell", async () => {
+    const html = `
+      <table style="border-collapse: collapse;">
+        <tr>
+          <td style="padding: 8px; font-size: 16px;">Cell text</td>
+        </tr>
+      </table>
+    `;
+    const tree = await renderTreeForHtml(html);
+    const boxes = collectBoxes(tree.root);
+    const tdBox = boxes.find((b) => b.tagName === "td");
+    expect(tdBox).toBeDefined();
+
+    const runs = collectRuns(tdBox!);
+    expect(runs.length).toBeGreaterThan(0);
+
+    const cellTop = tdBox!.contentBox.y;
+    const cellBottom = tdBox!.contentBox.y + tdBox!.contentBox.height;
+    const slack = 10; // allow a few px for font metrics/padding interplay
+    for (const run of runs) {
+      const baseline = run.lineMatrix?.f ?? 0;
+      expect(baseline).toBeGreaterThanOrEqual(cellTop - slack);
+      expect(baseline).toBeLessThanOrEqual(cellBottom + slack);
+    }
+  });
+});

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "rootDirs": ["src", "tests"],
+    "outDir": "dist",
+    "declaration": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["node", "vitest"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": false
+  },
+  "include": ["src", "tests", "playground"]
+}

package/types/fonts.js

@@ -0,0 +1,10 @@
+export class TtfFontMetrics {
+    metrics;
+    glyphMetrics;
+    cmap;
+    constructor(metrics, glyphMetrics, cmap) {
+        this.metrics = metrics;
+        this.glyphMetrics = glyphMetrics;
+        this.cmap = cmap;
+    }
+}

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    globals: false,
+    include: ["tests/**/*.spec.ts"],
+  },
+});