@cj-tech-master/excelts 9.0.0 → 9.1.0

package/dist/esm/modules/pdf/render/page-renderer.js

@@ -108,22 +108,57 @@ function drawCellFill(stream, cell, alphaValues) {
     }
 }
 // =============================================================================
+// Rotation Helpers
+// =============================================================================
+/**
+ * Convert Excel textRotation to standard signed degrees.
+ * Excel uses 1-90 for CCW and 91-180 for CW (where 91 = -1°, 180 = -90°).
+ * Returns 0 for non-numeric values (e.g. "vertical").
+ */
+function excelRotationToDegrees(textRotation) {
+    if (typeof textRotation !== "number") {
+        return 0;
+    }
+    return textRotation <= 90 ? textRotation : -(textRotation - 90);
+}
+// =============================================================================
 // Cell Borders
 // =============================================================================
+/**
+ * Compute the horizontal slant offset for parallelogram borders.
+ * For general rotation angles (not 0°/90°), Excel renders cell borders as a
+ * parallelogram whose left/right edges tilt to match the text rotation angle.
+ * Returns 0 for straight borders (no rotation, 90°, -90°, or vertical stacked).
+ */
+function computeSlantOffset(textRotation, height) {
+    const degrees = excelRotationToDegrees(textRotation);
+    if (degrees === 0) {
+        return 0;
+    }
+    const absDeg = Math.abs(degrees);
+    if (absDeg < 0.01 || absDeg > 89.99) {
+        return 0;
+    }
+    const radians = (absDeg * Math.PI) / 180;
+    const offset = (height * Math.cos(radians)) / Math.sin(radians);
+    return degrees < 0 ? -offset : offset;
+}
 function drawCellBorders(stream, cell) {
-    const { rect, borders } = cell;
+    const { rect, borders, textRotation } = cell;
     const { x, y, width, height } = rect;
+    // Compute slant for parallelogram borders on general-angle rotated cells
+    const slant = computeSlantOffset(textRotation, height);
     if (borders.top) {
-        drawBorderLine(stream, borders.top, x, y + height, x + width, y + height, true);
+        drawBorderLine(stream, borders.top, x + slant, y + height, x + width + slant, y + height, true);
     }
     if (borders.bottom) {
         drawBorderLine(stream, borders.bottom, x, y, x + width, y, true);
     }
     if (borders.left) {
-        drawBorderLine(stream, borders.left, x, y, x, y + height, false);
+        drawBorderLine(stream, borders.left, x, y, x + slant, y + height, false);
     }
     if (borders.right) {
-        drawBorderLine(stream, borders.right, x + width, y, x + width, y + height, false);
+        drawBorderLine(stream, borders.right, x + width, y, x + width + slant, y + height, false);
     }
 }
 function drawBorderLine(stream, border, x1, y1, x2, y2, isHorizontal) {
@@ -161,9 +196,21 @@ function drawCellText(stream, cell, fontManager, alphaValues, scaleFactor = 1) {
     }
     const indentPts = cell.indent * INDENT_WIDTH * scaleFactor;
     // Clip to cell bounds (extend for text overflow into adjacent empty cells)
+    // For rotated text with slanted borders, use a parallelogram clip path
     const clipWidth = rect.width + (cell.textOverflowWidth || 0);
     stream.save();
-    stream.rect(rect.x, rect.y, clipWidth, rect.height);
+    const slantClip = computeSlantOffset(cell.textRotation, rect.height);
+    if (slantClip !== 0) {
+        // Parallelogram clip: bottom-left, bottom-right, top-right (shifted), top-left (shifted)
+        stream.moveTo(rect.x, rect.y);
+        stream.lineTo(rect.x + clipWidth, rect.y);
+        stream.lineTo(rect.x + clipWidth + slantClip, rect.y + rect.height);
+        stream.lineTo(rect.x + slantClip, rect.y + rect.height);
+        stream.closePath();
+    }
+    else {
+        stream.rect(rect.x, rect.y, clipWidth, rect.height);
+    }
     stream.clip();
     stream.endPath();
     // Apply text color alpha if needed
@@ -392,14 +439,7 @@ function drawRotatedText(stream, cell, fontManager, indentPts, scaleFactor = 1)
         ? fontManager.getEmbeddedResourceName()
         : fontManager.ensureFont(resolvePdfFontName(cell.fontFamily, cell.bold, cell.italic));
     // Convert Excel rotation to degrees
-    // 1-90: counterclockwise, 91-180: clockwise (value-90 degrees)
-    let degrees;
-    if (typeof cell.textRotation === "number") {
-        degrees = cell.textRotation <= 90 ? cell.textRotation : -(cell.textRotation - 90);
-    }
-    else {
-        degrees = 0;
-    }
+    const degrees = excelRotationToDegrees(cell.textRotation);
     const radians = (degrees * Math.PI) / 180;
     const cos = Math.cos(radians);
     const sin = Math.sin(radians);
@@ -469,31 +509,35 @@ function drawRotatedText(stream, cell, fontManager, indentPts, scaleFactor = 1)
 function drawRotated90(stream, cell, lines, fontManager, resourceName, fontSize, lineHeight, ascent, padH, padV) {
     const { rect, horizontalAlign, verticalAlign } = cell;
     const totalColumnsWidth = lines.length * lineHeight;
-    // Horizontal centering of line columns
+    // horizontalAlign controls X placement of line columns (same visual axis)
     let startX;
-    if (horizontalAlign === "center" || lines.length === 1) {
+    if (horizontalAlign === "center") {
         startX = rect.x + rect.width / 2 - totalColumnsWidth / 2 + ascent;
     }
     else if (horizontalAlign === "right") {
         startX = rect.x + rect.width - padH - totalColumnsWidth + ascent;
     }
     else {
+        // left (default)
         startX = rect.x + padH + ascent;
     }
     for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
         const lineWidth = fontManager.measureText(line, resourceName, fontSize);
         const colX = startX + i * lineHeight;
-        // Vertical positioning: text flows upward from bottom
+        // verticalAlign controls Y placement (text flows upward from ty)
+        // In PDF coords: higher y = top of cell
         let ty;
         if (verticalAlign === "top") {
-            ty = rect.y + padV;
+            // text at top → text end near top → ty starts at bottom so text reaches top
+            ty = rect.y + rect.height - padV - lineWidth;
         }
         else if (verticalAlign === "middle") {
             ty = rect.y + (rect.height - lineWidth) / 2;
         }
         else {
-            ty = rect.y + rect.height - padV - lineWidth;
+            // bottom (default) → text at bottom → ty near bottom
+            ty = rect.y + padV;
         }
         ty = Math.max(ty, rect.y + padV);
         stream.beginText();
@@ -507,28 +551,34 @@ function drawRotated90(stream, cell, lines, fontManager, resourceName, fontSize,
 function drawRotatedMinus90(stream, cell, lines, fontManager, resourceName, fontSize, lineHeight, ascent, padH, padV) {
     const { rect, horizontalAlign, verticalAlign } = cell;
     const totalColumnsWidth = lines.length * lineHeight;
+    // horizontalAlign controls X placement: lines stack right-to-left
     let startX;
-    if (horizontalAlign === "center" || lines.length === 1) {
+    if (horizontalAlign === "center") {
         startX = rect.x + rect.width / 2 + totalColumnsWidth / 2 - lineHeight + ascent;
     }
     else if (horizontalAlign === "right") {
         startX = rect.x + rect.width - padH - lineHeight + ascent;
     }
     else {
+        // left (default)
         startX = rect.x + padH + totalColumnsWidth - lineHeight + ascent;
     }
     for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
         const lineWidth = fontManager.measureText(line, resourceName, fontSize);
         const colX = startX - i * lineHeight;
+        // verticalAlign controls Y placement (text flows downward from ty)
+        // In PDF coords: higher y = top of cell; text drawn downward = toward lower y
         let ty;
         if (verticalAlign === "top") {
+            // text at top → ty near top (high PDF y)
             ty = rect.y + rect.height - padV;
         }
         else if (verticalAlign === "middle") {
             ty = rect.y + (rect.height + lineWidth) / 2;
         }
         else {
+            // bottom (default) → text at bottom → ty so text ends at bottom
             ty = rect.y + padV + lineWidth;
         }
         ty = Math.min(ty, rect.y + rect.height - padV);
@@ -541,10 +591,53 @@ function drawRotatedMinus90(stream, cell, lines, fontManager, resourceName, font
 }
 /** General rotation — center a multi-line text block in the cell. */
 function drawRotatedGeneral(stream, cell, lines, fontManager, resourceName, fontSize, lineHeight, ascent, cos, sin, indentPts) {
-    const { rect, horizontalAlign } = cell;
+    const { rect, horizontalAlign, verticalAlign } = cell;
+    const padH = CELL_PADDING_H;
+    const padV = CELL_PADDING_V;
+    // Compute the rotated bounding box of the text block
+    let maxLineWidth = 0;
+    for (const line of lines) {
+        const w = fontManager.measureText(line, resourceName, fontSize);
+        if (w > maxLineWidth) {
+            maxLineWidth = w;
+        }
+    }
+    const totalTextHeight = lines.length * lineHeight;
+    const absSin = Math.abs(sin);
+    const absCos = Math.abs(cos);
+    const rotatedWidth = maxLineWidth * absCos + totalTextHeight * absSin;
+    const rotatedHeight = maxLineWidth * absSin + totalTextHeight * absCos;
+    // Compute slant offset to match parallelogram border shape
+    const slantShift = computeSlantOffset(cell.textRotation, rect.height) / 2;
+    // Determine vertical position first, then horizontal (because slant depends on Y position)
     const indentOffset = horizontalAlign === "left" ? indentPts / 2 : horizontalAlign === "right" ? -indentPts / 2 : 0;
-    const cx = rect.x + rect.width / 2 + indentOffset;
-    const cy = rect.y + rect.height / 2;
+    let cy;
+    if (verticalAlign === "top") {
+        cy = rect.y + rect.height - padV - rotatedHeight / 2;
+    }
+    else if (verticalAlign === "bottom") {
+        cy = rect.y + padV + rotatedHeight / 2;
+    }
+    else {
+        // middle (default)
+        cy = rect.y + rect.height / 2;
+    }
+    // For slanted parallelogram, the horizontal offset depends on the vertical position
+    // At bottom (y), left edge is at x; at top (y+height), left edge is at x+slantOffset
+    // At cy, the horizontal shift is proportional: slantOffset * (cy - y) / height
+    const verticalRatio = rect.height > 0 ? (cy - rect.y) / rect.height : 0.5;
+    const slantAtCy = slantShift * 2 * verticalRatio; // slantShift*2 = full slantOffset
+    let cx;
+    if (horizontalAlign === "right") {
+        cx = rect.x + rect.width - padH - rotatedWidth / 2 + indentOffset + slantAtCy;
+    }
+    else if (horizontalAlign === "left") {
+        cx = rect.x + padH + rotatedWidth / 2 + indentOffset + slantAtCy;
+    }
+    else {
+        // center (default for rotated)
+        cx = rect.x + rect.width / 2 + indentOffset + slantAtCy;
+    }
     for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
         const lineWidth = fontManager.measureText(line, resourceName, fontSize);
@@ -575,7 +668,8 @@ function emitText(stream, fontManager, text, resourceName) {
  * Newlines (\n) start a new column to the right.
  */
 function drawVerticalStackedText(stream, cell, fontManager, _indentPts, scaleFactor = 1) {
-    const { rect, text, fontSize } = cell;
+    const { rect, text, fontSize, horizontalAlign, verticalAlign } = cell;
+    const padH = CELL_PADDING_H * scaleFactor;
     const padV = CELL_PADDING_V * scaleFactor;
     const isEmbedded = fontManager.hasEmbeddedFont();
     const resourceName = isEmbedded
@@ -587,12 +681,35 @@ function drawVerticalStackedText(stream, cell, fontManager, _indentPts, scaleFac
     const columns = text.split(/\r?\n/);
     const columnWidth = fontSize * 1.4;
     const totalColumnsWidth = columns.length * columnWidth;
-    const startX = rect.x + rect.width / 2 - totalColumnsWidth / 2 + columnWidth / 2;
+    // Horizontal alignment controls column X positioning
+    let startX;
+    if (horizontalAlign === "center") {
+        startX = rect.x + rect.width / 2 - totalColumnsWidth / 2 + columnWidth / 2;
+    }
+    else if (horizontalAlign === "right") {
+        startX = rect.x + rect.width - padH - totalColumnsWidth + columnWidth / 2;
+    }
+    else {
+        // left (default)
+        startX = rect.x + padH + columnWidth / 2;
+    }
     stream.setFillColor(cell.textColor);
     for (let colIdx = 0; colIdx < columns.length; colIdx++) {
         const colText = columns[colIdx];
         const colX = startX + colIdx * columnWidth;
-        let currentY = rect.y + rect.height - padV - ascent;
+        const totalTextHeight = colText.length * charHeight;
+        // Vertical alignment controls starting Y position (PDF y-axis: higher = top of cell)
+        let currentY;
+        if (verticalAlign === "middle") {
+            currentY = rect.y + rect.height / 2 + totalTextHeight / 2 - ascent;
+        }
+        else if (verticalAlign === "bottom") {
+            currentY = rect.y + padV + totalTextHeight - ascent;
+        }
+        else {
+            // top (default)
+            currentY = rect.y + rect.height - padV - ascent;
+        }
         for (const ch of colText) {
             if (currentY < rect.y + padV) {
                 break;
@@ -773,3 +890,255 @@ function drawPageFooter(stream, page, options, fontManager, totalPages) {
     stream.endText();
     stream.restore();
 }
+// =============================================================================
+// Watermark Rendering
+// =============================================================================
+/** Default values for text watermarks. */
+const TEXT_WM_DEFAULTS = {
+    fontSize: 54,
+    color: { r: 0.75, g: 0.75, b: 0.75 },
+    opacity: 0.15,
+    rotation: -45,
+    fontFamily: "Helvetica",
+    bold: false,
+    italic: false,
+    repeatSpacingX: 200,
+    repeatSpacingY: 200
+};
+/** Default values for image watermarks. */
+const IMAGE_WM_DEFAULTS = {
+    opacity: 0.15,
+    rotation: 0,
+    scale: 0.5,
+    repeatSpacingX: 200,
+    repeatSpacingY: 200
+};
+/** Minimum allowed spacing for repeat patterns (prevents infinite loops). */
+const MIN_REPEAT_SPACING = 10;
+/**
+ * Render a watermark onto a PDF content stream.
+ * This should be called BEFORE the cell/grid content is rendered so the
+ * watermark sits behind everything (under-content).
+ */
+export function renderWatermark(stream, page, watermark, fontManager) {
+    if (watermark.type === "text") {
+        return renderTextWatermark(stream, page, normalizeTextWatermark(watermark), fontManager);
+    }
+    return renderImageWatermark(stream, page, normalizeImageWatermark(watermark));
+}
+/** Clamp/normalize text watermark options to safe ranges. */
+function normalizeTextWatermark(wm) {
+    return {
+        ...wm,
+        opacity: clamp01(wm.opacity ?? TEXT_WM_DEFAULTS.opacity),
+        fontSize: Math.max(1, wm.fontSize ?? TEXT_WM_DEFAULTS.fontSize),
+        repeatSpacingX: Math.max(MIN_REPEAT_SPACING, wm.repeatSpacingX ?? TEXT_WM_DEFAULTS.repeatSpacingX),
+        repeatSpacingY: Math.max(MIN_REPEAT_SPACING, wm.repeatSpacingY ?? TEXT_WM_DEFAULTS.repeatSpacingY)
+    };
+}
+/** Clamp/normalize image watermark options to safe ranges. */
+function normalizeImageWatermark(wm) {
+    return {
+        ...wm,
+        opacity: clamp01(wm.opacity ?? IMAGE_WM_DEFAULTS.opacity),
+        scale: Math.max(0.01, wm.scale ?? IMAGE_WM_DEFAULTS.scale),
+        width: wm.width !== undefined ? Math.max(1, wm.width) : undefined,
+        height: wm.height !== undefined ? Math.max(1, wm.height) : undefined,
+        repeatSpacingX: Math.max(MIN_REPEAT_SPACING, wm.repeatSpacingX ?? IMAGE_WM_DEFAULTS.repeatSpacingX),
+        repeatSpacingY: Math.max(MIN_REPEAT_SPACING, wm.repeatSpacingY ?? IMAGE_WM_DEFAULTS.repeatSpacingY)
+    };
+}
+/** Clamp a number to the 0..1 range. */
+function clamp01(v) {
+    return Math.max(0, Math.min(1, v));
+}
+/**
+ * Render a text watermark on a single page.
+ */
+function renderTextWatermark(stream, page, watermark, fontManager) {
+    const fontSize = watermark.fontSize ?? TEXT_WM_DEFAULTS.fontSize;
+    const color = watermark.color ?? TEXT_WM_DEFAULTS.color;
+    const opacity = watermark.opacity ?? TEXT_WM_DEFAULTS.opacity;
+    const rotation = watermark.rotation ?? TEXT_WM_DEFAULTS.rotation;
+    const fontFamily = watermark.fontFamily ?? TEXT_WM_DEFAULTS.fontFamily;
+    const bold = watermark.bold ?? TEXT_WM_DEFAULTS.bold;
+    const italic = watermark.italic ?? TEXT_WM_DEFAULTS.italic;
+    const isEmbedded = fontManager.hasEmbeddedFont();
+    const resourceName = isEmbedded
+        ? fontManager.getEmbeddedResourceName()
+        : fontManager.ensureFont(resolvePdfFontName(fontFamily, bold, italic));
+    const textWidth = fontManager.measureText(watermark.text, resourceName, fontSize);
+    // Approximate text height using ascent (roughly 0.7 * fontSize for most fonts)
+    const textHeight = fontSize * 0.7;
+    const radians = (rotation * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const needsAlpha = opacity < 1;
+    const gsName = needsAlpha ? alphaGsName(opacity) : "";
+    const drawSingleWatermark = (cx, cy) => {
+        // Center the text at (cx, cy), compensating for both width and ascent height
+        const halfW = textWidth / 2;
+        const halfH = textHeight / 2;
+        const tx = cx - halfW * cos + halfH * sin;
+        const ty = cy - halfW * sin - halfH * cos;
+        stream.save();
+        if (needsAlpha) {
+            stream.setGraphicsState(gsName);
+        }
+        stream.setFillColor(color);
+        stream.beginText();
+        stream.setFont(resourceName, fontSize);
+        stream.setTextMatrix(cos, sin, -sin, cos, tx, ty);
+        const hex = fontManager.encodeText(watermark.text, resourceName);
+        if (hex) {
+            stream.showTextHex(hex);
+        }
+        else {
+            stream.showText(watermark.text);
+        }
+        stream.endText();
+        stream.restore();
+    };
+    if (watermark.repeat) {
+        const spacingX = watermark.repeatSpacingX ?? TEXT_WM_DEFAULTS.repeatSpacingX;
+        const spacingY = watermark.repeatSpacingY ?? TEXT_WM_DEFAULTS.repeatSpacingY;
+        renderRepeatedPattern(page.width, page.height, spacingX, spacingY, drawSingleWatermark);
+    }
+    else {
+        const { cx, cy } = resolveWatermarkCenter(page, watermark.position);
+        drawSingleWatermark(cx, cy);
+    }
+    return { alphaValues: needsAlpha ? [opacity] : [], imageXObjects: [] };
+}
+/**
+ * Render an image watermark on a single page.
+ */
+function renderImageWatermark(stream, page, watermark) {
+    const opacity = watermark.opacity ?? IMAGE_WM_DEFAULTS.opacity;
+    const rotation = watermark.rotation ?? IMAGE_WM_DEFAULTS.rotation;
+    const scale = watermark.scale ?? IMAGE_WM_DEFAULTS.scale;
+    const needsAlpha = opacity < 1;
+    // Determine image dimensions — use explicit width/height if provided,
+    // otherwise parse actual dimensions from image data and scale proportionally
+    let imgWidth;
+    let imgHeight;
+    if (watermark.width !== undefined && watermark.height !== undefined) {
+        imgWidth = watermark.width;
+        imgHeight = watermark.height;
+    }
+    else {
+        const dims = parseImageDimensions(watermark.data, watermark.format);
+        const minDim = Math.min(page.width, page.height);
+        const targetSize = minDim * scale;
+        const maxDim = Math.max(dims.width, dims.height);
+        const ratio = maxDim > 0 ? targetSize / maxDim : 1;
+        imgWidth = dims.width * ratio;
+        imgHeight = dims.height * ratio;
+    }
+    const radians = (rotation * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const gsName = needsAlpha ? alphaGsName(opacity) : "";
+    const imgName = "WmImg";
+    const drawSingleWatermark = (cx, cy) => {
+        stream.save();
+        if (needsAlpha) {
+            stream.setGraphicsState(gsName);
+        }
+        const halfW = imgWidth / 2;
+        const halfH = imgHeight / 2;
+        const tx = cx - halfW * cos + halfH * sin;
+        const ty = cy - halfW * sin - halfH * cos;
+        stream.concat(imgWidth * cos, imgWidth * sin, -imgHeight * sin, imgHeight * cos, tx, ty);
+        stream.doXObject(imgName);
+        stream.restore();
+    };
+    if (watermark.repeat) {
+        const spacingX = watermark.repeatSpacingX ?? IMAGE_WM_DEFAULTS.repeatSpacingX;
+        const spacingY = watermark.repeatSpacingY ?? IMAGE_WM_DEFAULTS.repeatSpacingY;
+        renderRepeatedPattern(page.width, page.height, spacingX, spacingY, drawSingleWatermark);
+    }
+    else {
+        const { cx, cy } = resolveWatermarkCenter(page, watermark.position);
+        drawSingleWatermark(cx, cy);
+    }
+    return {
+        alphaValues: needsAlpha ? [opacity] : [],
+        imageXObjects: [{ name: imgName, data: watermark.data, format: watermark.format }]
+    };
+}
+/**
+ * Parse image dimensions from raw JPEG or PNG data without a full decode.
+ */
+export function parseImageDimensions(data, format) {
+    if (format === "png") {
+        return parsePngDimensions(data);
+    }
+    return parseJpegDimensions(data);
+}
+/** Read width/height from a PNG IHDR chunk (bytes 16-23). */
+function parsePngDimensions(data) {
+    // PNG header: 8 byte signature, then IHDR chunk: 4 byte length, 4 byte type, 4 byte width, 4 byte height
+    if (data.length >= 24 &&
+        data[12] === 0x49 &&
+        data[13] === 0x48 &&
+        data[14] === 0x44 &&
+        data[15] === 0x52) {
+        const width = (data[16] << 24) | (data[17] << 16) | (data[18] << 8) | data[19];
+        const height = (data[20] << 24) | (data[21] << 16) | (data[22] << 8) | data[23];
+        return { width, height };
+    }
+    return { width: 1, height: 1 };
+}
+/** Read width/height from JPEG SOF marker. */
+function parseJpegDimensions(data) {
+    let offset = 2; // skip SOI marker
+    while (offset < data.length - 1) {
+        while (offset < data.length && data[offset] === 0xff && data[offset + 1] === 0xff) {
+            offset++;
+        }
+        if (offset >= data.length - 1 || data[offset] !== 0xff) {
+            break;
+        }
+        const marker = data[offset + 1];
+        const isSof = marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc;
+        if (isSof && offset + 8 < data.length) {
+            return {
+                width: (data[offset + 7] << 8) | data[offset + 8],
+                height: (data[offset + 5] << 8) | data[offset + 6]
+            };
+        }
+        if (offset + 3 >= data.length) {
+            break;
+        }
+        const segLen = (data[offset + 2] << 8) | data[offset + 3];
+        offset += 2 + segLen;
+    }
+    return { width: 1, height: 1 };
+}
+/**
+ * Resolve the center position for a watermark on a given page.
+ */
+function resolveWatermarkCenter(page, position) {
+    if (!position || position === "center") {
+        return { cx: page.width / 2, cy: page.height / 2 };
+    }
+    return { cx: position.x, cy: position.y };
+}
+/**
+ * Render a repeated pattern of watermarks across the entire page.
+ * Uses a staggered grid for a natural diagonal tiling effect.
+ */
+function renderRepeatedPattern(pageWidth, pageHeight, spacingX, spacingY, drawFn) {
+    // Start from beyond the page edges to ensure full coverage with rotation
+    const margin = Math.max(pageWidth, pageHeight) * 0.5;
+    let rowIndex = 0;
+    for (let y = -margin; y < pageHeight + margin; y += spacingY) {
+        // Stagger every other row by half the horizontal spacing
+        const offsetX = rowIndex % 2 === 1 ? spacingX / 2 : 0;
+        for (let x = -margin; x < pageWidth + margin; x += spacingX) {
+            drawFn(x + offsetX, y);
+        }
+        rowIndex++;
+    }
+}