pagyra-js 0.0.1

package/src/pdf/utils/border-dashes.ts

@@ -0,0 +1,109 @@
+import type { BorderStyles, BorderStyle, Edges, Rect, RGBA, Radius, StrokeDash } from "../types.js";
+import type { ShapePoint } from "../renderers/shape-renderer.js";
+
+export type BorderSide = "top" | "right" | "bottom" | "left";
+
+export interface BorderSideStroke {
+  side: BorderSide;
+  points: ShapePoint[];
+  color: RGBA;
+  lineWidth: number;
+  dash?: StrokeDash;
+}
+
+export function computeDashForStyle(style: BorderStyle, widthPx: number): StrokeDash | undefined {
+  const w = Math.max(widthPx, 0);
+  if (!Number.isFinite(w) || w <= 0) {
+    return undefined;
+  }
+
+  const normalized = style.toLowerCase() as BorderStyle;
+
+  if (normalized === "dashed") {
+    const base = w;
+    return { pattern: [3 * base, 3 * base], phase: 0 };
+  }
+
+  if (normalized === "dotted") {
+    const base = w;
+    return { pattern: [base, base], phase: 0 };
+  }
+
+  return undefined;
+}
+
+export function computeBorderSideStrokes(
+  borderBox: Rect,
+  borderWidth: Edges,
+  borderStyle: BorderStyles,
+  color: RGBA,
+  _radius: Radius,
+): BorderSideStroke[] {
+  const result: BorderSideStroke[] = [];
+
+  const outerX = borderBox.x;
+  const outerY = borderBox.y;
+  const outerW = borderBox.width;
+  const outerH = borderBox.height;
+
+  if (!Number.isFinite(outerW) || !Number.isFinite(outerH) || outerW <= 0 || outerH <= 0) {
+    return result;
+  }
+
+  const topCenterY = outerY + borderWidth.top / 2;
+  const bottomCenterY = outerY + outerH - borderWidth.bottom / 2;
+  const leftCenterX = outerX + borderWidth.left / 2;
+  const rightCenterX = outerX + outerW - borderWidth.right / 2;
+
+  const pushSide = (side: BorderSide, width: number, style: BorderStyle, p1: ShapePoint, p2: ShapePoint): void => {
+    if (!Number.isFinite(width) || width <= 0) {
+      return;
+    }
+    const normalized = style.toLowerCase() as BorderStyle;
+    if (normalized === "none") {
+      return;
+    }
+
+    result.push({
+      side,
+      points: [p1, p2],
+      color,
+      lineWidth: width,
+      dash: computeDashForStyle(normalized, width),
+    });
+  };
+
+  pushSide(
+    "top",
+    borderWidth.top,
+    borderStyle.top,
+    { x: leftCenterX, y: topCenterY },
+    { x: rightCenterX, y: topCenterY },
+  );
+
+  pushSide(
+    "right",
+    borderWidth.right,
+    borderStyle.right,
+    { x: rightCenterX, y: topCenterY },
+    { x: rightCenterX, y: bottomCenterY },
+  );
+
+  pushSide(
+    "bottom",
+    borderWidth.bottom,
+    borderStyle.bottom,
+    { x: rightCenterX, y: bottomCenterY },
+    { x: leftCenterX, y: bottomCenterY },
+  );
+
+  pushSide(
+    "left",
+    borderWidth.left,
+    borderStyle.left,
+    { x: leftCenterX, y: bottomCenterY },
+    { x: leftCenterX, y: topCenterY },
+  );
+
+  return result;
+}

package/src/pdf/utils/border-radius-utils.ts

@@ -0,0 +1,86 @@
+import type { ComputedStyle } from "../../css/style.js";
+import type { Rect, Radius } from "../types.js";
+
+export function resolveBorderRadius(style: ComputedStyle, borderBox: Rect): Radius {
+  const raw: Radius = {
+    topLeft: {
+      x: clampRadius(style.borderTopLeftRadiusX),
+      y: clampRadius(style.borderTopLeftRadiusY),
+    },
+    topRight: {
+      x: clampRadius(style.borderTopRightRadiusX),
+      y: clampRadius(style.borderTopRightRadiusY),
+    },
+    bottomRight: {
+      x: clampRadius(style.borderBottomRightRadiusX),
+      y: clampRadius(style.borderBottomRightRadiusY),
+    },
+    bottomLeft: {
+      x: clampRadius(style.borderBottomLeftRadiusX),
+      y: clampRadius(style.borderBottomLeftRadiusY),
+    },
+  };
+  return normalizeBorderRadius(raw, borderBox.width, borderBox.height);
+}
+
+function clampRadius(value: number | undefined): number {
+  if (!Number.isFinite(value ?? NaN)) {
+    return 0;
+  }
+  const numeric = Number(value);
+  return numeric > 0 ? numeric : 0;
+}
+
+export function normalizeBorderRadius(input: Radius, width: number, height: number): Radius {
+  const result: Radius = {
+    topLeft: { ...input.topLeft },
+    topRight: { ...input.topRight },
+    bottomRight: { ...input.bottomRight },
+    bottomLeft: { ...input.bottomLeft },
+  };
+
+  const safeWidth = Math.max(width, 0);
+  const safeHeight = Math.max(height, 0);
+
+  if (safeWidth <= 0) {
+    result.topLeft.x = 0;
+    result.topRight.x = 0;
+    result.bottomRight.x = 0;
+    result.bottomLeft.x = 0;
+  } else {
+    const topSum = result.topLeft.x + result.topRight.x;
+    if (topSum > safeWidth && topSum > 0) {
+      const scale = safeWidth / topSum;
+      result.topLeft.x *= scale;
+      result.topRight.x *= scale;
+    }
+    const bottomSum = result.bottomLeft.x + result.bottomRight.x;
+    if (bottomSum > safeWidth && bottomSum > 0) {
+      const scale = safeWidth / bottomSum;
+      result.bottomLeft.x *= scale;
+      result.bottomRight.x *= scale;
+    }
+  }
+
+  if (safeHeight <= 0) {
+    result.topLeft.y = 0;
+    result.topRight.y = 0;
+    result.bottomRight.y = 0;
+    result.bottomLeft.y = 0;
+  } else {
+    const leftSum = result.topLeft.y + result.bottomLeft.y;
+    if (leftSum > safeHeight && leftSum > 0) {
+      const scale = safeHeight / leftSum;
+      result.topLeft.y *= scale;
+      result.bottomLeft.y *= scale;
+    }
+    const rightSum = result.topRight.y + result.bottomRight.y;
+    if (rightSum > safeHeight && rightSum > 0) {
+      const scale = safeHeight / rightSum;
+      result.topRight.y *= scale;
+      result.bottomRight.y *= scale;
+    }
+  }
+
+  return result;
+}

package/src/pdf/utils/box-dimensions-utils.ts

@@ -0,0 +1,47 @@
+import { resolveLength } from "../../css/length.js";
+import type { LayoutNode } from "../../dom/node.js";
+import type { Rect, Edges } from "../types.js";
+
+export function calculateBoxDimensions(node: LayoutNode): { borderBox: Rect, paddingBox: Rect, contentBox: Rect } {
+  const widthRef = Math.max(node.box.contentWidth, 0);
+  const contentHeightRef = Math.max(node.box.contentHeight, 0);
+  const padding: Edges = {
+    top: resolveLength(node.style.paddingTop, widthRef, { auto: "zero" }),
+    right: resolveLength(node.style.paddingRight, widthRef, { auto: "zero" }),
+    bottom: resolveLength(node.style.paddingBottom, widthRef, { auto: "zero" }),
+    left: resolveLength(node.style.paddingLeft, widthRef, { auto: "zero" }),
+  };
+  const border: Edges = {
+    top: resolveLength(node.style.borderTop, widthRef, { auto: "zero" }),
+    right: resolveLength(node.style.borderRight, widthRef, { auto: "zero" }),
+    bottom: resolveLength(node.style.borderBottom, widthRef, { auto: "zero" }),
+    left: resolveLength(node.style.borderLeft, widthRef, { auto: "zero" }),
+  };
+  const borderBox: Rect = {
+    x: node.box.x,
+    y: node.box.y,
+    width: fallbackDimension(node.box.borderBoxWidth, node.box.contentWidth + padding.left + padding.right + border.left + border.right),
+    height: fallbackDimension(
+      node.box.borderBoxHeight,
+      contentHeightRef + padding.top + padding.bottom + border.top + border.bottom,
+    ),
+  };
+  const paddingBox: Rect = {
+    x: borderBox.x + border.left,
+    y: borderBox.y + border.top,
+    width: borderBox.width - border.left - border.right,
+    height: borderBox.height - border.top - border.bottom,
+  };
+  const contentBox: Rect = {
+    x: paddingBox.x + padding.left,
+    y: paddingBox.y + padding.top,
+    width: paddingBox.width - padding.left - padding.right,
+    height: paddingBox.height - padding.top - padding.bottom,
+  };
+
+  return { borderBox, paddingBox, contentBox };
+}
+
+export function fallbackDimension(value: number, computed: number): number {
+  return value > 0 ? value : computed;
+}

package/src/pdf/utils/clip-path-resolver.ts

@@ -0,0 +1,50 @@
+import type { LayoutNode } from "../../dom/node.js";
+import type { ClipPath, Rect } from "../types.js";
+import type { BackgroundBoxes } from "./background-layer-resolver.js";
+import type { ClipPath as CssClipPath, ClipPathLength, ClipPathReferenceBox } from "../../css/clip-path-types.js";
+
+export function resolveClipPath(node: LayoutNode, boxes: BackgroundBoxes): ClipPath | undefined {
+  const clip = node.style.clipPath as CssClipPath | undefined;
+  if (!clip || clip.type !== "polygon" || !clip.points.length) {
+    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;
+  }
+
+  return { type: "polygon", points };
+}
+
+function selectReferenceRect(box: ClipPathReferenceBox | undefined, boxes: BackgroundBoxes): Rect {
+  switch (box) {
+    case "padding-box":
+      return boxes.paddingBox;
+    case "content-box":
+      return boxes.contentBox;
+    case "border-box":
+    default:
+      return boxes.borderBox;
+  }
+}
+
+function resolveClipLength(length: ClipPathLength, reference: number): number {
+  if (length.unit === "percent") {
+    return length.value * reference;
+  }
+  return length.value;
+}

package/src/pdf/utils/clipping-path-builder.ts

@@ -0,0 +1,190 @@
+import type { Rect, Radius } from "../types.js";
+import { CoordinateTransformer } from "./coordinate-transformer.js";
+
+export class ClippingPathBuilder {
+  constructor(private readonly coordinateTransformer: CoordinateTransformer) {}
+
+  buildClipCommands(rect: Rect, radius: Radius): string[] | null {
+    if (!rect) {
+      return null;
+    }
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return null;
+    }
+    if (this.isZeroRadius(radius)) {
+      const pdfRect = this.rectToPdf(rect);
+      if (!pdfRect) {
+        return null;
+      }
+      return [`${pdfRect.x} ${pdfRect.y} ${pdfRect.width} ${pdfRect.height} re`];
+    }
+    return this.buildRoundedClipCommands(rect, radius);
+  }
+
+  private buildRoundedClipCommands(rect: Rect, radius: Radius): string[] | null {
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return null;
+    }
+    const tl = radius.topLeft;
+    const tr = radius.topRight;
+    const br = radius.bottomRight;
+    const bl = radius.bottomLeft;
+    const k = 0.5522847498307936;
+    const commands: string[] = [];
+
+    const move = this.pointToPdf(rect.x + tl.x, rect.y);
+    const lineTop = this.pointToPdf(rect.x + width - tr.x, rect.y);
+    if (!move || !lineTop) {
+      return null;
+    }
+    commands.push(`${move.x} ${move.y} m`);
+    commands.push(`${lineTop.x} ${lineTop.y} l`);
+
+    if (tr.x > 0 || tr.y > 0) {
+      const cp1 = this.pointToPdf(rect.x + width - tr.x + k * tr.x, rect.y);
+      const cp2 = this.pointToPdf(rect.x + width, rect.y + tr.y - k * tr.y);
+      const end = this.pointToPdf(rect.x + width, rect.y + tr.y);
+      if (!cp1 || !cp2 || !end) {
+        return null;
+      }
+      commands.push(`${cp1.x} ${cp1.y} ${cp2.x} ${cp2.y} ${end.x} ${end.y} c`);
+    } else {
+      const corner = this.pointToPdf(rect.x + width, rect.y);
+      if (!corner) {
+        return null;
+      }
+      commands.push(`${corner.x} ${corner.y} l`);
+    }
+
+    const rightLine = this.pointToPdf(rect.x + width, rect.y + height - br.y);
+    if (!rightLine) {
+      return null;
+    }
+    commands.push(`${rightLine.x} ${rightLine.y} l`);
+
+    if (br.x > 0 || br.y > 0) {
+      const cp1 = this.pointToPdf(rect.x + width, rect.y + height - br.y + k * br.y);
+      const cp2 = this.pointToPdf(rect.x + width - br.x + k * br.x, rect.y + height);
+      const end = this.pointToPdf(rect.x + width - br.x, rect.y + height);
+      if (!cp1 || !cp2 || !end) {
+        return null;
+      }
+      commands.push(`${cp1.x} ${cp1.y} ${cp2.x} ${cp2.y} ${end.x} ${end.y} c`);
+    } else {
+      const corner = this.pointToPdf(rect.x + width, rect.y + height);
+      if (!corner) {
+        return null;
+      }
+      commands.push(`${corner.x} ${corner.y} l`);
+    }
+
+    const bottomLine = this.pointToPdf(rect.x + bl.x, rect.y + height);
+    if (!bottomLine) {
+      return null;
+    }
+    commands.push(`${bottomLine.x} ${bottomLine.y} l`);
+
+    if (bl.x > 0 || bl.y > 0) {
+      const cp1 = this.pointToPdf(rect.x + bl.x - k * bl.x, rect.y + height);
+      const cp2 = this.pointToPdf(rect.x, rect.y + height - bl.y + k * bl.y);
+      const end = this.pointToPdf(rect.x, rect.y + height - bl.y);
+      if (!cp1 || !cp2 || !end) {
+        return null;
+      }
+      commands.push(`${cp1.x} ${cp1.y} ${cp2.x} ${cp2.y} ${end.x} ${end.y} c`);
+    } else {
+      const corner = this.pointToPdf(rect.x, rect.y + height);
+      if (!corner) {
+        return null;
+      }
+      commands.push(`${corner.x} ${corner.y} l`);
+    }
+
+    const leftLine = this.pointToPdf(rect.x, rect.y + tl.y);
+    if (!leftLine) {
+      return null;
+    }
+    commands.push(`${leftLine.x} ${leftLine.y} l`);
+
+    if (tl.x > 0 || tl.y > 0) {
+      const cp1 = this.pointToPdf(rect.x, rect.y + tl.y - k * tl.y);
+      const cp2 = this.pointToPdf(rect.x + tl.x - k * tl.x, rect.y);
+      const end = this.pointToPdf(rect.x + tl.x, rect.y);
+      if (!cp1 || !cp2 || !end) {
+        return null;
+      }
+      commands.push(`${cp1.x} ${cp1.y} ${cp2.x} ${cp2.y} ${end.x} ${end.y} c`);
+    } else {
+      const corner = this.pointToPdf(rect.x, rect.y);
+      if (!corner) {
+        return null;
+      }
+      commands.push(`${corner.x} ${corner.y} l`);
+    }
+
+    commands.push("h");
+    return commands;
+  }
+
+  private rectToPdf(rect: Rect): { x: string; y: string; width: string; height: string } | null {
+    if (!rect) {
+      return null;
+    }
+    const widthPt = this.coordinateTransformer.convertPxToPt(Math.max(rect.width, 0));
+    const heightPt = this.coordinateTransformer.convertPxToPt(Math.max(rect.height, 0));
+    if (!Number.isFinite(widthPt) || !Number.isFinite(heightPt) || widthPt === 0 || heightPt === 0) {
+      return null;
+    }
+    const origin = this.pointToPdf(rect.x, rect.y + rect.height);
+    if (!origin) {
+      return null;
+    }
+    return {
+      x: origin.x,
+      y: origin.y,
+      width: formatNumber(widthPt),
+      height: formatNumber(heightPt),
+    };
+  }
+
+  private pointToPdf(xPx: number, yPx: number): { x: string; y: string } | null {
+    if (!Number.isFinite(xPx) || !Number.isFinite(yPx)) {
+      return null;
+    }
+    const xPt = this.coordinateTransformer.convertPxToPt(xPx);
+    const localY = yPx - this.coordinateTransformer.pageOffsetPx;
+    const yPt = this.coordinateTransformer.pageHeightPt - this.coordinateTransformer.convertPxToPt(localY);
+    if (!Number.isFinite(xPt) || !Number.isFinite(yPt)) {
+      return null;
+    }
+    return {
+      x: formatNumber(xPt),
+      y: formatNumber(yPt),
+    };
+  }
+
+  private isZeroRadius(radius: Radius): boolean {
+    const epsilon = 1e-6;
+    return (
+      Math.abs(radius.topLeft.x) <= epsilon &&
+      Math.abs(radius.topLeft.y) <= epsilon &&
+      Math.abs(radius.topRight.x) <= epsilon &&
+      Math.abs(radius.topRight.y) <= epsilon &&
+      Math.abs(radius.bottomRight.x) <= epsilon &&
+      Math.abs(radius.bottomRight.y) <= epsilon &&
+      Math.abs(radius.bottomLeft.x) <= epsilon &&
+      Math.abs(radius.bottomLeft.y) <= epsilon
+    );
+  }
+}
+
+function formatNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number.isInteger(value) ? value.toString() : value.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
+}

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

@@ -0,0 +1,102 @@
+import { NAMED_COLORS } from "../../css/named-colors.js";
+import type { RGBA } from "../types.js";
+
+export function parseColor(value: string | undefined): RGBA | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  let normalized = value.trim().toLowerCase();
+  if (normalized in NAMED_COLORS) {
+    normalized = NAMED_COLORS[normalized];
+  }
+
+  if (normalized === "transparent") {
+    return undefined;
+  }
+
+  const hexMatch = normalized.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hexMatch) {
+    const digits = hexMatch[1];
+    if (digits.length === 3) {
+      const r = parseHex(digits[0] + digits[0]);
+      const g = parseHex(digits[1] + digits[1]);
+      const b = parseHex(digits[2] + digits[2]);
+      return { r, g, b, a: 1 };
+    }
+    const r = parseHex(digits.slice(0, 2));
+    const g = parseHex(digits.slice(2, 4));
+    const b = parseHex(digits.slice(4, 6));
+    return { r, g, b, a: 1 };
+  }
+  const rgbMatch = normalized.match(/^rgba?\((.+)\)$/);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(",").map((part) => part.trim());
+    const r = clampColor(Number.parseFloat(parts[0]));
+    const g = clampColor(Number.parseFloat(parts[1]));
+    const b = clampColor(Number.parseFloat(parts[2]));
+    const a = parts[3] !== undefined ? clampAlpha(Number.parseFloat(parts[3])) : 1;
+    return { r, g, b, a };
+  }
+  return undefined;
+}
+
+function parseHex(value: string): number {
+  return Number.parseInt(value, 16);
+}
+
+export function clampColor(value: number): number {
+  if (Number.isNaN(value)) {
+    return 0;
+  }
+  if (value > 255) {
+    return 255;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  return value;
+}
+
+export function clampAlpha(value: number): number {
+  if (Number.isNaN(value)) {
+    return 1;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  return value;
+}
+
+export function cloneColor(color: RGBA): RGBA {
+  return { r: color.r, g: color.g, b: color.b, a: color.a };
+}
+
+/**
+ * Converts a CSS color string to a PDF RGB color array [r, g, b] where values are normalized to 0-1.
+ * Ignores alpha channel.
+ */
+export function cssColorStringToPdfRgbArray(colorString: string): number[] | undefined {
+  const rgba = parseColor(colorString);
+  if (!rgba) return undefined;
+  return [rgba.r / 255, rgba.g / 255, rgba.b / 255];
+}
+
+/**
+ * Converts RGB values (0-255) to CMYK array [c, m, y, k] normalized to 0-1.
+ */
+export function rgbToCmyk(r: number, g: number, b: number): [number, number, number, number] {
+  const rNorm = Math.max(0, Math.min(1, r / 255));
+  const gNorm = Math.max(0, Math.min(1, g / 255));
+  const bNorm = Math.max(0, Math.min(1, b / 255));
+
+  const k = 1 - Math.max(rNorm, gNorm, bNorm);
+  const c = k === 1 ? 0 : (1 - rNorm - k) / (1 - k);
+  const m = k === 1 ? 0 : (1 - gNorm - k) / (1 - k);
+  const y = k === 1 ? 0 : (1 - bNorm - k) / (1 - k);
+
+  return [c, m, y, k];
+}

package/src/pdf/utils/coordinate-transformer.ts

@@ -0,0 +1,30 @@
+export class CoordinateTransformer {
+  private ptToPxFactor?: number;
+
+  constructor(
+    public readonly pageHeightPt: number,
+    private readonly pxToPt: (value: number) => number,
+    public readonly pageOffsetPx: number = 0,
+  ) {}
+
+  get pageHeightPx(): number {
+    return this.ptToPx(this.pageHeightPt);
+  }
+
+  private ptToPx(value: number): number {
+    if (!this.ptToPxFactor) {
+      const factor = this.pxToPt(1);
+      this.ptToPxFactor = factor === 0 ? 0 : 1 / factor;
+    }
+    return value * (this.ptToPxFactor ?? 0);
+  }
+
+  public convertPxToPt(value: number): number {
+    return this.pxToPt(value);
+  }
+
+  // NOVO
+  public convertPtToPx(value: number): number {
+    return this.ptToPx(value);
+  }
+}