pagyra-js 0.0.1

package/src/pdf/renderers/rounded-rect-path.ts

@@ -0,0 +1,120 @@
+import type { Radius } from "../types.js";
+import { formatNumber } from "./shape-utils.js";
+
+/**
+ * Rounded rectangle path generator
+ * Responsibility: Generate PDF path commands for rounded rectangles
+ */
+
+/**
+ * Generate PDF path commands for a rounded rectangle
+ * Uses Bézier curves to approximate rounded corners
+ * 
+ * @param width - Rectangle width
+ * @param height - Rectangle height  
+ * @param radii - Corner radii (should be pre-normalized)
+ * @param offsetX - X offset for path origin
+ * @param offsetY - Y offset for path origin
+ * @returns Array of PDF path command strings
+ */
+export function generateRoundedRectPath(
+    width: number,
+    height: number,
+    radii: Radius,
+    offsetX: number,
+    offsetY: number
+): string[] {
+    const commands: string[] = [];
+    if (width <= 0 || height <= 0) {
+        return commands;
+    }
+
+    const tl = radii.topLeft;
+    const tr = radii.topRight;
+    const br = radii.bottomRight;
+    const bl = radii.bottomLeft;
+
+    // Bézier approximation constant for circular arcs
+    const k = 0.5522847498307936;
+
+    // Start at top-left, after the corner radius
+    const moveX = offsetX + tl.x;
+    const moveY = offsetY;
+    commands.push(`${formatNumber(moveX)} ${formatNumber(moveY)} m`);
+
+    // Top edge
+    commands.push(`${formatNumber(offsetX + width - tr.x)} ${formatNumber(offsetY)} l`);
+
+    // Top-right corner
+    if (tr.x > 0 || tr.y > 0) {
+        const cp1x = offsetX + width - tr.x + k * tr.x;
+        const cp1y = offsetY;
+        const cp2x = offsetX + width;
+        const cp2y = offsetY + tr.y - k * tr.y;
+        const endX = offsetX + width;
+        const endY = offsetY + tr.y;
+        commands.push(
+            `${formatNumber(cp1x)} ${formatNumber(cp1y)} ${formatNumber(cp2x)} ${formatNumber(cp2y)} ${formatNumber(endX)} ${formatNumber(endY)} c`,
+        );
+    } else {
+        commands.push(`${formatNumber(offsetX + width)} ${formatNumber(offsetY)} l`);
+    }
+
+    // Right edge
+    commands.push(`${formatNumber(offsetX + width)} ${formatNumber(offsetY + height - br.y)} l`);
+
+    // Bottom-right corner
+    if (br.x > 0 || br.y > 0) {
+        const cp1x = offsetX + width;
+        const cp1y = offsetY + height - br.y + k * br.y;
+        const cp2x = offsetX + width - br.x + k * br.x;
+        const cp2y = offsetY + height;
+        const endX = offsetX + width - br.x;
+        const endY = offsetY + height;
+        commands.push(
+            `${formatNumber(cp1x)} ${formatNumber(cp1y)} ${formatNumber(cp2x)} ${formatNumber(cp2y)} ${formatNumber(endX)} ${formatNumber(endY)} c`,
+        );
+    } else {
+        commands.push(`${formatNumber(offsetX + width)} ${formatNumber(offsetY + height)} l`);
+    }
+
+    // Bottom edge
+    commands.push(`${formatNumber(offsetX + bl.x)} ${formatNumber(offsetY + height)} l`);
+
+    // Bottom-left corner
+    if (bl.x > 0 || bl.y > 0) {
+        const cp1x = offsetX + bl.x - k * bl.x;
+        const cp1y = offsetY + height;
+        const cp2x = offsetX;
+        const cp2y = offsetY + height - bl.y + k * bl.y;
+        const endX = offsetX;
+        const endY = offsetY + height - bl.y;
+        commands.push(
+            `${formatNumber(cp1x)} ${formatNumber(cp1y)} ${formatNumber(cp2x)} ${formatNumber(cp2y)} ${formatNumber(endX)} ${formatNumber(endY)} c`,
+        );
+    } else {
+        commands.push(`${formatNumber(offsetX)} ${formatNumber(offsetY + height)} l`);
+    }
+
+    // Left edge
+    commands.push(`${formatNumber(offsetX)} ${formatNumber(offsetY + tl.y)} l`);
+
+    // Top-left corner
+    if (tl.x > 0 || tl.y > 0) {
+        const cp1x = offsetX;
+        const cp1y = offsetY + tl.y - k * tl.y;
+        const cp2x = offsetX + tl.x - k * tl.x;
+        const cp2y = offsetY;
+        const endX = offsetX + tl.x;
+        const endY = offsetY;
+        commands.push(
+            `${formatNumber(cp1x)} ${formatNumber(cp1y)} ${formatNumber(cp2x)} ${formatNumber(cp2y)} ${formatNumber(endX)} ${formatNumber(endY)} c`,
+        );
+    } else {
+        commands.push(`${formatNumber(offsetX)} ${formatNumber(offsetY)} l`);
+    }
+
+    // Close path
+    commands.push("h");
+    return commands;
+}

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

@@ -0,0 +1,563 @@
+import type { RGBA, Rect, Radius, StrokeDash, StrokeOptions } from "../types.js";
+import { CoordinateTransformer } from "../utils/coordinate-transformer.js";
+import { GradientService } from "../shading/gradient-service.js";
+import { parseLinearGradient, type LinearGradient, type RadialGradient } from "../../css/parsers/gradient-parser.js";
+import { fillColorCommand, formatNumber, mapLineCap, mapLineJoin, pointToPdf, rectToPdf, strokeColorCommand } from "./shape-utils.js";
+import type { GraphicsStateManager } from "./graphics-state-manager.js";
+import { normalizeRadiiForRect, isZeroRadius } from "./radius-utils.js";
+import { generateRoundedRectPath } from "./rounded-rect-path.js";
+
+export interface ShapePoint {
+  x: number;
+  y: number;
+}
+
+export type PathCommand =
+  | { type: "moveTo"; x: number; y: number }
+  | { type: "lineTo"; x: number; y: number }
+  | { type: "curveTo"; x1: number; y1: number; x2: number; y2: number; x: number; y: number }
+  | { type: "closePath" };
+
+export interface ShapeRendererResult {
+  readonly commands: string[];
+  readonly shadings: Map<string, string>;
+}
+
+export class ShapeRenderer {
+  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 {
+    // Note: RadialGradient support will be accepted via painter API too
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return;
+    }
+
+    const gradient = resolveGradientPaint(paint) as LinearGradient | RadialGradient | null;
+    if (gradient) {
+      if ((gradient as RadialGradient).type === "radial") {
+        this.fillRoundedRectWithRadialGradient(rect, radii, gradient as RadialGradient);
+      } else {
+        this.fillRoundedRectWithGradient(rect, radii, gradient as LinearGradient);
+      }
+      return;
+    }
+
+    if (typeof paint !== "object" || paint === null) {
+      return;
+    }
+
+    const adjusted = normalizeRadiiForRect(width, height, radii);
+    if (isZeroRadius(adjusted)) {
+      this.fillRect(rect, paint as RGBA);
+      return;
+    }
+    const path = generateRoundedRectPath(width, height, adjusted, 0, 0);
+    if (path.length === 0) {
+      return;
+    }
+    const commands = [this.transformForRect(rect), ...path, "f"];
+    this.pushFillCommands(paint as RGBA, commands, true);
+  }
+
+  // Allow low-level injection of drawing commands to preserve ordering (used for raster shadows)
+  pushRawCommands(commands: string[]): void {
+    if (!Array.isArray(commands) || commands.length === 0) return;
+    this.commands.push(...commands);
+  }
+
+  private fillRoundedRectWithGradient(rect: Rect, radii: Radius, gradient: LinearGradient): void {
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return;
+    }
+
+    const adjusted = normalizeRadiiForRect(width, height, radii);
+    if (isZeroRadius(adjusted)) {
+      this.fillRectWithGradient(rect, gradient);
+      return;
+    }
+
+    const path = generateRoundedRectPath(width, height, adjusted, 0, 0);
+    if (path.length === 0) {
+      return;
+    }
+
+    const shading = this.gradientService.createLinearGradient(gradient, rect);
+    this.commands.push("q");
+    this.commands.push(this.transformForRect(rect));
+    this.commands.push(...path);
+    this.commands.push("W n");
+    this.commands.push(`/${shading.shadingName} sh`);
+    this.commands.push("Q");
+  }
+
+  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(this.transformForRect(rect));
+    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 fillRoundedRectWithRadialGradient(rect: Rect, radii: Radius, gradient: RadialGradient): void {
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return;
+    }
+
+    const adjusted = normalizeRadiiForRect(width, height, radii);
+    if (isZeroRadius(adjusted)) {
+      this.fillRectWithRadialGradient(rect, gradient);
+      return;
+    }
+
+    const path = generateRoundedRectPath(width, height, adjusted, 0, 0);
+    if (path.length === 0) {
+      return;
+    }
+
+    const shading = this.gradientService.createRadialGradient(gradient, rect);
+    this.commands.push("q");
+    this.commands.push(this.transformForRect(rect));
+    this.commands.push(...path);
+    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(this.transformForRect(rect));
+    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");
+  }
+
+  fillRoundedRectDifference(outerRect: Rect, outerRadii: Radius, innerRect: Rect, innerRadii: Radius, color: RGBA): void {
+    const outerWidth = Math.max(outerRect.width, 0);
+    const outerHeight = Math.max(outerRect.height, 0);
+    if (outerWidth === 0 || outerHeight === 0) {
+      return;
+    }
+    const outerAdjusted = normalizeRadiiForRect(outerWidth, outerHeight, outerRadii);
+    const innerWidth = Math.max(innerRect.width, 0);
+    const innerHeight = Math.max(innerRect.height, 0);
+
+    if (innerWidth <= 0 || innerHeight <= 0) {
+      // Border fully covers the box; fall back to filling the outer shape.
+      this.fillRoundedRect(outerRect, outerAdjusted, color);
+      return;
+    }
+
+    const pathOuter = generateRoundedRectPath(outerWidth, outerHeight, outerAdjusted, 0, 0);
+    if (pathOuter.length === 0) {
+      return;
+    }
+
+    const innerAdjusted = normalizeRadiiForRect(innerWidth, innerHeight, innerRadii);
+    const offsetX = innerRect.x - outerRect.x;
+    const offsetY = innerRect.y - outerRect.y;
+    const pathInner = generateRoundedRectPath(innerWidth, innerHeight, innerAdjusted, offsetX, offsetY);
+
+    const commands = [this.transformForRect(outerRect), ...pathOuter, ...pathInner, "f*"];
+    this.pushFillCommands(color, commands, true);
+  }
+
+  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 = this.rectToPdf(rect);
+    if (!pdfRect) {
+      return;
+    }
+    const commands = [`${pdfRect.x} ${pdfRect.y} ${pdfRect.width} ${pdfRect.height} re`, "f"];
+    this.pushFillCommands(paint as RGBA, commands, false);
+  }
+
+  strokeRect(rect: Rect, color: RGBA): void {
+    const pdfRect = this.rectToPdf(rect);
+    if (!pdfRect) {
+      return;
+    }
+    this.commands.push(strokeColorCommand(color), `${pdfRect.x} ${pdfRect.y} ${pdfRect.width} ${pdfRect.height} re`, "S");
+  }
+
+  strokeRoundedRect(rect: Rect, radii: Radius, color: RGBA, lineWidth?: number): void {
+    const width = Math.max(rect.width, 0);
+    const height = Math.max(rect.height, 0);
+    if (width === 0 || height === 0) {
+      return;
+    }
+    const adjusted = normalizeRadiiForRect(width, height, radii);
+    const path = generateRoundedRectPath(width, height, adjusted, 0, 0);
+    if (path.length === 0) {
+      return;
+    }
+    this.commands.push("q", strokeColorCommand(color));
+    if (lineWidth !== undefined) {
+      const strokeWidthPt = this.coordinateTransformer.convertPxToPt(Math.max(lineWidth, 0));
+      if (strokeWidthPt > 0) {
+        this.commands.push(`${formatNumber(strokeWidthPt)} w`);
+      }
+    }
+    this.commands.push(this.transformForRect(rect), ...path, "S", "Q");
+  }
+
+  fillPolygon(points: ShapePoint[], color: RGBA, close: boolean = true): void {
+    if (points.length < 2) {
+      return;
+    }
+    const pdfPoints = this.pointsToPdf(points);
+    if (!pdfPoints) {
+      return;
+    }
+    const commands: string[] = [];
+    commands.push(`${pdfPoints[0].x} ${pdfPoints[0].y} m`);
+    for (let index = 1; index < pdfPoints.length; index++) {
+      const point = pdfPoints[index];
+      commands.push(`${point.x} ${point.y} l`);
+    }
+    if (close) {
+      commands.push("h");
+    }
+    commands.push("f");
+    this.pushFillCommands(color, commands, true);
+  }
+
+  strokePolyline(points: ShapePoint[], color: RGBA, options: StrokeOptions & { close?: boolean } = {}): void {
+    if (points.length < 2) {
+      return;
+    }
+    const pdfPoints = this.pointsToPdf(points);
+    if (!pdfPoints) {
+      return;
+    }
+    const commands: string[] = [];
+    commands.push(`${pdfPoints[0].x} ${pdfPoints[0].y} m`);
+    for (let index = 1; index < pdfPoints.length; index++) {
+      const point = pdfPoints[index];
+      commands.push(`${point.x} ${point.y} l`);
+    }
+    if (options.close) {
+      commands.push("h");
+    }
+    commands.push("S");
+    this.commands.push("q", strokeColorCommand(color));
+    this.applyStrokeOptions(options);
+    this.commands.push(...commands, "Q");
+  }
+
+  fillPath(commands: PathCommand[], color: RGBA, options: { fillRule?: "nonzero" | "evenodd" } = {}): void {
+    if (commands.length === 0) {
+      return;
+    }
+    const pdfCommands = this.pathCommandsToPdf(commands);
+    if (!pdfCommands || pdfCommands.length === 0) {
+      return;
+    }
+    const operator = options.fillRule === "evenodd" ? "f*" : "f";
+    this.pushFillCommands(color, [...pdfCommands, operator], false);
+  }
+
+  beginClipPath(commands: PathCommand[], options: { fillRule?: "nonzero" | "evenodd" } = {}): boolean {
+    if (!commands || commands.length === 0) {
+      return false;
+    }
+    const pdfCommands = this.pathCommandsToPdf(commands);
+    if (!pdfCommands || pdfCommands.length === 0) {
+      return false;
+    }
+    const clipOp = options.fillRule === "evenodd" ? "W*" : "W";
+    this.commands.push("q", ...pdfCommands, `${clipOp} n`);
+    return true;
+  }
+
+  endClipPath(): void {
+    this.commands.push("Q");
+  }
+
+  // New: fill an arbitrary path with a gradient. We compute a bounding box of the path
+  // (in page pixels) and use it as the gradient rectangle when creating the shading.
+  // The path itself is converted to PDF commands and used as the clipping path before
+  // painting the shading.
+  fillPathWithGradient(commands: PathCommand[], gradient: LinearGradient | RadialGradient, _options: { fillRule?: "nonzero" | "evenodd" } = {}): void {
+    if (!commands || commands.length === 0) return;
+    const pdfCommands = this.pathCommandsToPdf(commands);
+    if (!pdfCommands || pdfCommands.length === 0) return;
+
+    // Compute bounding box in page pixels from PathCommand (these are given in page px)
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const cmd of commands) {
+      if (cmd.type === "moveTo" || cmd.type === "lineTo") {
+        minX = Math.min(minX, cmd.x);
+        minY = Math.min(minY, cmd.y);
+        maxX = Math.max(maxX, cmd.x);
+        maxY = Math.max(maxY, cmd.y);
+      } else if (cmd.type === "curveTo") {
+        minX = Math.min(minX, cmd.x1, cmd.x2, cmd.x);
+        minY = Math.min(minY, cmd.y1, cmd.y2, cmd.y);
+        maxX = Math.max(maxX, cmd.x1, cmd.x2, cmd.x);
+        maxY = Math.max(maxY, cmd.y1, cmd.y2, cmd.y);
+      }
+    }
+    if (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
+      return;
+    }
+    const rect = { x: minX, y: minY, width: Math.max(0, maxX - minX), height: Math.max(0, maxY - minY) };
+
+    // Create shading
+    const shading = (gradient as RadialGradient).type === "radial"
+      ? this.gradientService.createRadialGradient(gradient as RadialGradient, rect)
+      : this.gradientService.createLinearGradient(gradient as LinearGradient, rect);
+
+    // Emit clipping path then shading
+    this.commands.push("q");
+    this.commands.push(...pdfCommands);
+    // Use W n to set clipping path (nonzero/even-odd determined by the fill operator we use)
+    this.commands.push("W n");
+    this.commands.push(`/${shading.shadingName} sh`);
+    this.commands.push("Q");
+  }
+
+  strokePath(commands: PathCommand[], color: RGBA, options: StrokeOptions = {}): void {
+    if (commands.length === 0) {
+      return;
+    }
+    const pdfCommands = this.pathCommandsToPdf(commands);
+    if (!pdfCommands || pdfCommands.length === 0) {
+      return;
+    }
+    this.commands.push("q", strokeColorCommand(color));
+    this.applyStrokeOptions(options);
+    this.commands.push(...pdfCommands, "S");
+
+    if (options.dash && Array.isArray(options.dash.pattern) && options.dash.pattern.length > 0) {
+      this.commands.push("[] 0 d");
+    }
+
+    this.commands.push("Q");
+  }
+
+  private applyStrokeOptions(options: StrokeOptions): void {
+    if (options.lineWidth !== undefined) {
+      const widthPt = this.coordinateTransformer.convertPxToPt(Math.max(options.lineWidth, 0));
+      if (widthPt > 0) {
+        this.commands.push(`${formatNumber(widthPt)} w`);
+      }
+    }
+    const cap = mapLineCap(options.lineCap);
+    if (cap !== undefined) {
+      this.commands.push(`${cap} J`);
+    }
+    const join = mapLineJoin(options.lineJoin);
+    if (join !== undefined) {
+      this.commands.push(`${join} j`);
+    }
+    const dash = options.dash;
+    if (dash && Array.isArray(dash.pattern) && dash.pattern.length > 0) {
+      const patternPt = dash.pattern
+        .map((v) => this.coordinateTransformer.convertPxToPt(Math.max(v, 0)))
+        .map(formatNumber);
+      const phasePt = formatNumber(
+        this.coordinateTransformer.convertPxToPt(Math.max(dash.phase ?? 0, 0)),
+      );
+      this.commands.push(`[${patternPt.join(" ")}] ${phasePt} d`);
+    }
+  }
+
+  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");
+    }
+  }
+
+  // normalizeRadiiForRect and isZeroRadius now imported from radius-utils.ts
+
+  private pathCommandsToPdf(commands: PathCommand[]): string[] | null {
+    const result: string[] = [];
+    for (const command of commands) {
+      switch (command.type) {
+        case "moveTo": {
+          const point = this.pointToPdf({ x: command.x, y: command.y });
+          if (!point) {
+            return null;
+          }
+          result.push(`${point.x} ${point.y} m`);
+          break;
+        }
+        case "lineTo": {
+          const point = this.pointToPdf({ x: command.x, y: command.y });
+          if (!point) {
+            return null;
+          }
+          result.push(`${point.x} ${point.y} l`);
+          break;
+        }
+        case "curveTo": {
+          const cp1 = this.pointToPdf({ x: command.x1, y: command.y1 });
+          const cp2 = this.pointToPdf({ x: command.x2, y: command.y2 });
+          const end = this.pointToPdf({ x: command.x, y: command.y });
+          if (!cp1 || !cp2 || !end) {
+            return null;
+          }
+          result.push(`${cp1.x} ${cp1.y} ${cp2.x} ${cp2.y} ${end.x} ${end.y} c`);
+          break;
+        }
+        case "closePath":
+          result.push("h");
+          break;
+        default:
+          return null;
+      }
+    }
+    return result;
+  }
+
+  // isZeroRadius now imported from radius-utils.ts
+
+  // generateRoundedRectPath now imported from rounded-rect-path.ts
+
+  private transformForRect(rect: Rect): string {
+    // If we're in a transform context, use relative coordinates
+    if (this.transformContext) {
+      const relX = rect.x - this.transformContext.x;
+      const relY = rect.y - this.transformContext.y;
+      const scaleX = this.coordinateTransformer.convertPxToPt(1);
+      const scaleY = this.coordinateTransformer.convertPxToPt(1);
+      const translateX = this.coordinateTransformer.convertPxToPt(relX);
+      const translateY = this.coordinateTransformer.convertPxToPt(-relY); // Negative because PDF y-axis is flipped
+      return `${formatNumber(scaleX)} 0 0 ${formatNumber(scaleY)} ${formatNumber(translateX)} ${formatNumber(translateY)} cm`;
+    }
+
+    // Normal absolute positioning
+    const scaleX = this.coordinateTransformer.convertPxToPt(1);
+    const scaleY = this.coordinateTransformer.convertPxToPt(1);
+    const localY = rect.y - this.coordinateTransformer.pageOffsetPx;
+    const translateX = this.coordinateTransformer.convertPxToPt(rect.x);
+    const translateY = this.coordinateTransformer.pageHeightPt - this.coordinateTransformer.convertPxToPt(localY);
+    return `${formatNumber(scaleX)} 0 0 ${formatNumber(-scaleY)} ${formatNumber(translateX)} ${formatNumber(translateY)} cm`;
+  }
+
+  private rectToPdf(rect: Rect | null | undefined): { x: string; y: string; width: string; height: string } | null {
+    return rectToPdf(rect, this.coordinateTransformer, this.transformContext);
+  }
+
+  private pointToPdf(point: ShapePoint): { x: string; y: string } | null {
+    return pointToPdf(point, this.coordinateTransformer, this.transformContext);
+  }
+
+  private pointsToPdf(points: ShapePoint[]): Array<{ x: string; y: string }> | null {
+    const result: Array<{ x: string; y: string }> = [];
+    for (const point of points) {
+      const converted = this.pointToPdf(point);
+      if (!converted) {
+        return null;
+      }
+      result.push(converted);
+    }
+    return result;
+  }
+
+  getResult(): ShapeRendererResult {
+    return {
+      commands: [...this.commands],
+      shadings: this.gradientService.getShadings(),
+    };
+  }
+}
+
+function resolveGradientPaint(paint: unknown): LinearGradient | RadialGradient | null {
+  if (isLinearGradientPaint(paint) || isRadialGradientPaint(paint)) {
+    return paint as LinearGradient | RadialGradient;
+  }
+  if (typeof paint === "string") {
+    return parseLinearGradient(paint);
+  }
+  return null;
+}
+
+function isLinearGradientPaint(value: unknown): value is LinearGradient {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value as Partial<LinearGradient>;
+  return candidate.type === "linear" && Array.isArray((candidate as any).stops);
+}
+
+function isRadialGradientPaint(value: unknown): value is RadialGradient {
+  if (typeof value !== "object" || value === null) return false;
+  const candidate = value as Partial<RadialGradient>;
+  return candidate.type === "radial" && typeof (candidate as any).r === "number";
+}
+