pagyra-js 0.0.1

package/src/pdf/renderer/paint-box-shadows.ts

@@ -0,0 +1,218 @@
+import { rasterizeDropShadowForRect } from "../utils/drop-shadow-raster.js";
+import type { PagePainter } from "../page-painter.js";
+import type { RenderBox, Rect, Radius, ShadowLayer, RGBA } from "../types.js";
+import { adjustRadius, clampNonNegative, cloneRadius, shrinkRadius } from "./radius.js";
+
+export function paintBoxShadows(painter: PagePainter, boxes: RenderBox[], inset: boolean): void {
+  for (const box of boxes) {
+    if (!box.boxShadows?.length) {
+      continue;
+    }
+    for (const shadow of box.boxShadows) {
+      if (shadow.inset !== inset) {
+        continue;
+      }
+      if (!isRenderableShadow(shadow)) {
+        continue;
+      }
+      if (inset) {
+        renderInsetShadow(painter, box, shadow);
+      } else {
+        renderOuterShadow(painter, box, shadow);
+      }
+    }
+  }
+}
+
+function isRenderableShadow(shadow: ShadowLayer): boolean {
+  const alpha = clampUnit(shadow.color.a ?? 1);
+  return alpha > 0;
+}
+
+function renderOuterShadow(painter: PagePainter, box: RenderBox, shadow: ShadowLayer): void {
+  const baseRect = translateRect(box.borderBox, shadow.offsetX, shadow.offsetY);
+  const baseRadius = cloneRadius(box.borderRadius);
+  const blur = clampNonNegative(shadow.blur);
+  const spread = shadow.spread;
+  if (blur > 0) {
+    const raster = rasterizeDropShadowForRect(baseRect, baseRadius, shadow.color, blur, spread);
+    if (raster) {
+      painter.drawShadowImage(raster.image, raster.drawRect);
+      return;
+    }
+  }
+  drawShadowLayers(painter, {
+    mode: "outer",
+    baseRect,
+    baseRadius,
+    color: shadow.color,
+    blur,
+    spread,
+  });
+}
+
+function renderInsetShadow(painter: PagePainter, box: RenderBox, shadow: ShadowLayer): void {
+  const container = box.paddingBox ?? box.contentBox;
+  if (!container) {
+    return;
+  }
+  const baseRect = translateRect(container, shadow.offsetX, shadow.offsetY);
+  const baseRadius = shrinkRadius(cloneRadius(box.borderRadius), box.border.top, box.border.right, box.border.bottom, box.border.left);
+  const blur = clampNonNegative(shadow.blur);
+  const spread = shadow.spread;
+  if (blur === 0 && spread === 0) {
+    painter.fillRoundedRect(baseRect, baseRadius, shadow.color);
+    return;
+  }
+  drawShadowLayers(painter, {
+    mode: "inset",
+    baseRect,
+    baseRadius,
+    color: shadow.color,
+    blur,
+    spread,
+  });
+}
+
+interface ShadowRenderParams {
+  mode: "outer" | "inset";
+  baseRect: Rect;
+  baseRadius: Radius;
+  color: RGBA;
+  blur: number;
+  spread: number;
+}
+
+interface ShadowIteration {
+  expansion: number;
+  color: RGBA;
+}
+
+function drawShadowLayers(painter: PagePainter, params: ShadowRenderParams): void {
+  const iterations = buildShadowIterations(params);
+  if (!iterations.length) {
+    return;
+  }
+
+  if (params.mode === "outer") {
+    renderOuterShadowIterations(painter, params.baseRect, params.baseRadius, iterations);
+    return;
+  }
+
+  renderInsetShadowIterations(painter, params.baseRect, params.baseRadius, iterations);
+}
+
+function buildShadowIterations(params: ShadowRenderParams): ShadowIteration[] {
+  const { mode, color, blur, spread } = params;
+  const steps = blur > 0 ? Math.max(2, Math.ceil(blur / 2)) : 1;
+  const weights = buildShadowWeights(steps);
+  const baseAlpha = clampUnit(color.a ?? 1);
+  const iterations: ShadowIteration[] = [];
+  for (let index = 0; index < steps; index++) {
+    const fraction =
+      steps === 1
+        ? 0
+        : mode === "outer"
+          ? index / (steps - 1)
+          : (index + 1) / steps;
+    const expansion = spread + blur * fraction;
+    const weight = weights[index] ?? 0;
+    if (weight <= 0) {
+      continue;
+    }
+    iterations.push({
+      expansion,
+      color: {
+        r: color.r,
+        g: color.g,
+        b: color.b,
+        a: clampUnit(baseAlpha * weight),
+      },
+    });
+  }
+  return iterations;
+}
+
+function renderOuterShadowIterations(
+  painter: PagePainter,
+  baseRect: Rect,
+  baseRadius: Radius,
+  iterations: ShadowIteration[],
+): void {
+  for (const iteration of iterations) {
+    const rect = inflateRect(baseRect, iteration.expansion);
+    if (rect.width <= 0 || rect.height <= 0) {
+      continue;
+    }
+    const radius = adjustRadius(baseRadius, iteration.expansion);
+    painter.fillRoundedRect(rect, radius, iteration.color);
+  }
+}
+
+function renderInsetShadowIterations(
+  painter: PagePainter,
+  baseRect: Rect,
+  baseRadius: Radius,
+  iterations: ShadowIteration[],
+): void {
+  for (const iteration of iterations) {
+    const contraction = Math.max(0, iteration.expansion);
+    const innerRect = inflateRect(baseRect, -contraction);
+    if (innerRect.width <= 0 || innerRect.height <= 0) {
+      continue;
+    }
+    const outerRadius = cloneRadius(baseRadius);
+    const innerRadius = adjustRadius(baseRadius, -contraction);
+    painter.fillRoundedRectDifference(baseRect, outerRadius, innerRect, innerRadius, iteration.color);
+  }
+}
+
+function translateRect(rect: Rect, dx: number, dy: number): Rect {
+  return { x: rect.x + dx, y: rect.y + dy, width: rect.width, height: rect.height };
+}
+
+function inflateRect(rect: Rect, amount: number): Rect {
+  const width = rect.width + amount * 2;
+  const height = rect.height + amount * 2;
+  if (width <= 0 || height <= 0) {
+    return {
+      x: rect.x + rect.width / 2,
+      y: rect.y + rect.height / 2,
+      width: 0,
+      height: 0,
+    };
+  }
+  return {
+    x: rect.x - amount,
+    y: rect.y - amount,
+    width,
+    height,
+  };
+}
+
+function buildShadowWeights(steps: number): number[] {
+  if (steps <= 1) {
+    return [1];
+  }
+  const weights: number[] = [];
+  let total = 0;
+  for (let index = 0; index < steps; index++) {
+    const weight = steps - index;
+    weights.push(weight);
+    total += weight;
+  }
+  return weights.map((weight) => weight / total);
+}
+
+function clampUnit(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 1;
+  }
+  if (value <= 0) {
+    return 0;
+  }
+  if (value >= 1) {
+    return 1;
+  }
+  return value;
+}

package/src/pdf/renderer/radius.ts

@@ -0,0 +1,58 @@
+import type { Radius } from "../types.js";
+
+export function cloneRadius(radius: Radius): Radius {
+  return {
+    topLeft: { x: radius.topLeft.x, y: radius.topLeft.y },
+    topRight: { x: radius.topRight.x, y: radius.topRight.y },
+    bottomRight: { x: radius.bottomRight.x, y: radius.bottomRight.y },
+    bottomLeft: { x: radius.bottomLeft.x, y: radius.bottomLeft.y },
+  };
+}
+
+export function shrinkRadius(radii: Radius, top: number, right: number, bottom: number, left: number): Radius {
+  return {
+    topLeft: {
+      x: clampRadiusComponent(radii.topLeft.x - top),
+      y: clampRadiusComponent(radii.topLeft.y - left),
+    },
+    topRight: {
+      x: clampRadiusComponent(radii.topRight.x - top),
+      y: clampRadiusComponent(radii.topRight.y - right),
+    },
+    bottomRight: {
+      x: clampRadiusComponent(radii.bottomRight.x - bottom),
+      y: clampRadiusComponent(radii.bottomRight.y - right),
+    },
+    bottomLeft: {
+      x: clampRadiusComponent(radii.bottomLeft.x - bottom),
+      y: clampRadiusComponent(radii.bottomLeft.y - left),
+    },
+  };
+}
+
+export function adjustRadius(radius: Radius, delta: number): Radius {
+  const result = cloneRadius(radius);
+  result.topLeft.x = clampNonNegative(result.topLeft.x + delta);
+  result.topLeft.y = clampNonNegative(result.topLeft.y + delta);
+  result.topRight.x = clampNonNegative(result.topRight.x + delta);
+  result.topRight.y = clampNonNegative(result.topRight.y + delta);
+  result.bottomRight.x = clampNonNegative(result.bottomRight.x + delta);
+  result.bottomRight.y = clampNonNegative(result.bottomRight.y + delta);
+  result.bottomLeft.x = clampNonNegative(result.bottomLeft.x + delta);
+  result.bottomLeft.y = clampNonNegative(result.bottomLeft.y + delta);
+  return result;
+}
+
+export function clampRadiusComponent(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  return value > 0 ? value : 0;
+}
+
+export function clampNonNegative(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+  return value < 0 ? 0 : value;
+}

package/src/pdf/renderers/graphics-state-manager.ts

@@ -0,0 +1,40 @@
+
+
+export class GraphicsStateManager {
+  private readonly fillAlphaStates = new Map<string, string>();
+  private readonly graphicsStates = new Map<string, number>();
+
+  ensureFillAlphaState(alpha: number): string {
+    const normalized = this.normalizeAlpha(alpha);
+    const key = normalized.toFixed(4);
+    const existing = this.fillAlphaStates.get(key);
+    if (existing) {
+      return existing;
+    }
+    const name = `GS${this.fillAlphaStates.size}`;
+    const numeric = Number.parseFloat(key);
+    this.fillAlphaStates.set(key, name);
+    this.graphicsStates.set(name, numeric);
+    return name;
+ }
+
+  getGraphicsStates(): Map<string, number> {
+    return new Map(this.graphicsStates);
+  }
+
+  private normalizeAlpha(alpha: number | undefined): number {
+    if (!Number.isFinite(alpha ?? NaN)) {
+      return 1;
+    }
+    if (alpha === undefined) {
+      return 1;
+    }
+    if (alpha <= 0) {
+      return 0;
+    }
+    if (alpha >= 1) {
+      return 1;
+    }
+    return alpha;
+  }
+}

package/src/pdf/renderers/image-renderer.ts

@@ -0,0 +1,127 @@
+import type { ImageRef, Rect } from "../types.js";
+import type { PdfObjectRef } from "../primitives/pdf-document.js";
+import { CoordinateTransformer } from "../utils/coordinate-transformer.js";
+
+export interface ImageRendererResult {
+  readonly commands: string[];
+  readonly images: Map<string, { alias: string; image: ImageRef; ref?: PdfObjectRef }>;
+}
+
+export class ImageRenderer {
+  private readonly commands: string[] = [];
+  private readonly imageResources = new Map<string, { alias: string; image: ImageRef; ref?: PdfObjectRef }>();
+
+  constructor(
+    private readonly coordinateTransformer: CoordinateTransformer,
+  ) {}
+
+  // Public helper to register an image resource and get its alias without emitting commands
+  registerResource(image: ImageRef): { alias: string; image: ImageRef; ref?: PdfObjectRef } {
+    return this.ensureImageResource(image);
+  }
+
+  // Register atlas pages so they can be referenced by pageIndex later.
+  registerAtlasPages(pages: Array<{ width: number; height: number; data: Uint8Array }>): void {
+    for (let i = 0; i < pages.length; i++) {
+      const page = pages[i];
+      const key = `atlas:${i}`;
+      if (this.imageResources.has(key)) continue;
+      const alias = `Im${this.imageResources.size}`;
+      const imageRef: ImageRef = {
+        src: `atlas:${i}`,
+        width: page.width,
+        height: page.height,
+        format: "png",
+        channels: 4,
+        bitsPerComponent: 8,
+        data: page.data.buffer as ArrayBuffer,
+      };
+      this.imageResources.set(key, { alias, image: imageRef });
+    }
+  }
+
+  // Draw a region (sub-rectangle) from a registered atlas page into the destination rect (px coords).
+  drawAtlasRegion(pageIndex: number, sx: number, sy: number, sw: number, sh: number, rect: Rect): void {
+    if (rect.width <= 0 || rect.height <= 0) return;
+    const key = `atlas:${pageIndex}`;
+    const res = this.imageResources.get(key);
+    if (!res) return;
+    // Compute destination in points
+    const widthPt = this.coordinateTransformer.convertPxToPt(rect.width);
+    const heightPt = this.coordinateTransformer.convertPxToPt(rect.height);
+    if (widthPt === 0 || heightPt === 0) return;
+    const xPt = this.coordinateTransformer.convertPxToPt(rect.x);
+    const localY = rect.y - this.coordinateTransformer.pageOffsetPx;
+    const yPt = this.coordinateTransformer.pageHeightPt - this.coordinateTransformer.convertPxToPt(localY + rect.height);
+
+    // Compute matrix that maps image pixel coordinates so that the sub-rect [sx,sy,sw,sh]
+    // maps to the destination rectangle. Matrix: [a 0 0 d tx ty] where
+    // a = widthPt / sw (pt per image-pixel), d = heightPt / sh, tx = xPt - a * sx, ty = yPt - d * sy
+    const a = widthPt / sw;
+    const d = heightPt / sh;
+    const tx = xPt - a * sx;
+    const ty = yPt - d * sy;
+
+    const cmds = [
+      "q",
+      `${formatNumber(a)} 0 0 ${formatNumber(d)} ${formatNumber(tx)} ${formatNumber(ty)} cm`,
+      `/${res.alias} Do`,
+      "Q",
+    ];
+    this.commands.push(...cmds);
+  }
+
+  drawImage(image: ImageRef, rect: Rect): void {
+    if (rect.width <= 0 || rect.height <= 0) {
+      return;
+    }
+    const resource = this.ensureImageResource(image);
+    const widthPt = this.coordinateTransformer.convertPxToPt(rect.width);
+    const heightPt = this.coordinateTransformer.convertPxToPt(rect.height);
+    if (widthPt === 0 || heightPt === 0) {
+      return;
+    }
+    const xPt = this.coordinateTransformer.convertPxToPt(rect.x);
+    const localY = rect.y - this.coordinateTransformer.pageOffsetPx;
+    const yPt = this.coordinateTransformer.pageHeightPt - this.coordinateTransformer.convertPxToPt(localY + rect.height);
+    this.commands.push(
+      "q",
+      `${formatNumber(widthPt)} 0 0 ${formatNumber(heightPt)} ${formatNumber(xPt)} ${formatNumber(yPt)} cm`,
+      `/${resource.alias} Do`,
+      "Q",
+    );
+  }
+
+ private ensureImageResource(image: ImageRef): { alias: string; image: ImageRef; ref?: PdfObjectRef } {
+    const key = `${image.src}|${image.data.byteLength ?? 0}`;
+    let resource = this.imageResources.get(key);
+    if (!resource) {
+      const alias = `Im${this.imageResources.size}`;
+      // Note: We're storing a reference to the original image object, but for actual implementation
+      // we might need to handle the ArrayBuffer differently
+      resource = {
+        alias,
+        image: {
+          ...image,
+          data: image.data // This is actually an ArrayBuffer, not a Uint8Array
+        },
+      };
+      this.imageResources.set(key, resource);
+    }
+    return resource;
+  }
+
+  getResult(): ImageRendererResult {
+    return {
+      commands: [...this.commands],
+      images: new Map(this.imageResources),
+    };
+  }
+}
+
+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/renderers/radius-utils.ts

@@ -0,0 +1,80 @@
+import type { Radius } from "../types.js";
+
+/**
+ * Radius utility functions
+ * Responsibility: Normalize and validate border radii for rectangles
+ */
+
+/**
+ * Normalize radii to ensure they fit within rectangle bounds
+ * Scales down radii proportionally if they exceed available space
+ */
+export function normalizeRadiiForRect(width: number, height: number, radii: Radius): Radius {
+    const result: Radius = {
+        topLeft: { ...radii.topLeft },
+        topRight: { ...radii.topRight },
+        bottomRight: { ...radii.bottomRight },
+        bottomLeft: { ...radii.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;
+}
+
+/**
+ * Check if all corner radii are zero
+ */
+export function isZeroRadius(radii: Radius): boolean {
+    return (
+        radii.topLeft.x === 0 &&
+        radii.topLeft.y === 0 &&
+        radii.topRight.x === 0 &&
+        radii.topRight.y === 0 &&
+        radii.bottomRight.x === 0 &&
+        radii.bottomRight.y === 0 &&
+        radii.bottomLeft.x === 0 &&
+        radii.bottomLeft.y === 0
+    );
+}

package/src/pdf/renderers/rectangle-renderer.ts

@@ -0,0 +1,129 @@
+import type { RGBA, Rect, Radius } from "../types.js";
+import { CoordinateTransformer } from "../utils/coordinate-transformer.js";
+import { GradientService } from "../shading/gradient-service.js";
+import type { LinearGradient, RadialGradient } from "../../css/parsers/gradient-parser.js";
+import type { GraphicsStateManager } from "./graphics-state-manager.js";
+import { strokeColorCommand, fillColorCommand, rectToPdf, formatNumber, resolveGradientPaint, transformForRect } from "./shape-utils.js";
+
+export class RectangleRenderer {
+  private readonly commands: string[] = [];
+  private readonly gradientService: GradientService;
+  private transformContext: Rect | null = null;
+
+  constructor(
+    private readonly coordinateTransformer: CoordinateTransformer,
+    private readonly graphicsStateManager: GraphicsStateManager,
+  ) {
+    this.gradientService = new GradientService(coordinateTransformer);
+  }
+
+  setTransformContext(rect: Rect): void {
+    this.transformContext = rect;
+  }
+
+  clearTransformContext(): void {
+    this.transformContext = null;
+  }
+
+  drawBoxOutline(rect: Rect, color: RGBA = { r: 0.85, g: 0.85, b: 0.85, a: 1 }): void {
+    this.strokeRect(rect, color);
+  }
+
+  drawFilledBox(rect: Rect, color: RGBA): void {
+    this.fillRect(rect, color);
+  }
+
+  fillRoundedRect(_rect: Rect, _radii: Radius, _paint: RGBA | LinearGradient | RadialGradient | string): void {
+    // Implementation moved from ShapeRenderer
+  }
+
+  strokeRect(rect: Rect, color: RGBA): void {
+    const pdfRect = rectToPdf(rect, this.coordinateTransformer, this.transformContext);
+    if (!pdfRect) {
+      return;
+    }
+    this.commands.push(strokeColorCommand(color), `${pdfRect.x} ${pdfRect.y} ${pdfRect.width} ${pdfRect.height} re`, "S");
+  }
+
+  fillRect(rect: Rect, paint: RGBA | LinearGradient | RadialGradient | string): void {
+    const gradient = resolveGradientPaint(paint);
+    if (gradient) {
+      if ((gradient as RadialGradient).type === "radial") {
+        this.fillRectWithRadialGradient(rect, gradient as RadialGradient);
+      } else {
+        this.fillRectWithGradient(rect, gradient as LinearGradient);
+      }
+      return;
+    }
+
+    if (typeof paint !== "object" || paint === null) {
+      return;
+    }
+
+    const pdfRect = rectToPdf(rect, this.coordinateTransformer, this.transformContext);
+    if (!pdfRect) {
+      return;
+    }
+    const commands = [`${pdfRect.x} ${pdfRect.y} ${pdfRect.width} ${pdfRect.height} re`, "f"];
+    this.pushFillCommands(paint as RGBA, commands, false);
+  }
+
+  fillRoundedRectDifference(_outerRect: Rect, _outerRadii: Radius, _innerRect: Rect, _innerRadii: Radius, _color: RGBA): void {
+    // Implementation moved from ShapeRenderer
+  }
+
+  // Helper methods
+
+  private fillRectWithGradient(rect: Rect, gradient: LinearGradient): void {
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return;
+    }
+
+    const shading = this.gradientService.createLinearGradient(gradient, rect);
+    this.commands.push("q");
+    this.commands.push(transformForRect(rect, this.coordinateTransformer, this.transformContext));
+    this.commands.push(`0 0 ${formatNumber(width)} ${formatNumber(height)} re`);
+    this.commands.push("W n");
+    this.commands.push(`/${shading.shadingName} sh`);
+    this.commands.push("Q");
+  }
+
+  private fillRectWithRadialGradient(rect: Rect, gradient: RadialGradient): void {
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return;
+    }
+
+    const shading = this.gradientService.createRadialGradient(gradient, rect);
+    this.commands.push("q");
+    this.commands.push(transformForRect(rect, this.coordinateTransformer, this.transformContext));
+    this.commands.push(`0 0 ${formatNumber(width)} ${formatNumber(height)} re`);
+    this.commands.push("W n");
+    this.commands.push(`/${shading.shadingName} sh`);
+    this.commands.push("Q");
+  }
+
+  private pushFillCommands(color: RGBA, commands: string[], wrapWithQ: boolean): void {
+    const alpha = color.a ?? 1;
+    const hasAlpha = alpha < 1;
+    const baseColor: RGBA = { r: color.r, g: color.g, b: color.b, a: alpha };
+    const needsIsolation = wrapWithQ || hasAlpha;
+    this.commands.push(fillColorCommand(baseColor));
+    if (needsIsolation) {
+      this.commands.push("q");
+    }
+    if (hasAlpha) {
+      const state = this.graphicsStateManager.ensureFillAlphaState(alpha);
+      this.commands.push(`/${state} gs`);
+    }
+    this.commands.push(...commands);
+    if (needsIsolation) {
+      this.commands.push("Q");
+    }
+  }
+
+
+}