Merge pull request 'fix(po): size XLSX export images by pixels (aspect preserved)' (#60) from fix/xlsx-export-asset-sizing into master

Reviewed-on: #60

App/app/api/po/[id]/export/route.ts

@@ -4,7 +4,8 @@ import { NextRequest, NextResponse } from "next/server";
 import ExcelJS from "exceljs";
 import { TC_FIXED_LINE, TC_DEFAULTS } from "@/lib/validations/po";
 import { downloadBuffer } from "@/lib/storage";
-import { CANCELLED_WATERMARK_PNG_BASE64 } from "@/lib/cancelled-watermark";
+import { CANCELLED_WATERMARK_PNG_BASE64, CANCELLED_WATERMARK_W, CANCELLED_WATERMARK_H } from "@/lib/cancelled-watermark";
+import { getImageSize, scaleToBox } from "@/lib/image-size";
 
 // ── Company fallback constants (used when no company is linked to a PO) ──────
 
@@ -32,12 +33,15 @@ function mimeForKey(key: string): string {
   return ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "webp" ? "image/webp" : "image/png";
 }
 
-// Download a stored image and return it base64-encoded (or null if missing).
-async function fetchImage(key: string | null | undefined): Promise<{ base64: string; mime: string } | null> {
+interface EmbeddedImage { base64: string; mime: string; width: number; height: number }
+
+// Download a stored image; return base64 + mime + pixel dimensions (or null if missing).
+async function fetchImage(key: string | null | undefined): Promise<EmbeddedImage | null> {
   if (!key) return null;
   const buf = await downloadBuffer(key);
   if (!buf) return null;
-  return { base64: buf.toString("base64"), mime: mimeForKey(key) };
+  const size = getImageSize(buf) ?? { width: 100, height: 100 };
+  return { base64: buf.toString("base64"), mime: mimeForKey(key), width: size.width, height: size.height };
 }
 
 // ── Route ─────────────────────────────────────────────────────────────────────
@@ -129,6 +133,7 @@ export async function GET(request: NextRequest, { params }: Props) {
   // Fetch approver's signature for embedding in the document
   let signatureBase64: string | null = null;
   let signatureMime = "image/png";
+  let signatureSize: { width: number; height: number } | null = null;
   if (approvalAction) {
     const approver = await db.user.findUnique({
       where: { id: approvalAction.actorId },
@@ -140,6 +145,7 @@ export async function GET(request: NextRequest, { params }: Props) {
         signatureBase64 = buf.toString("base64");
         const ext = approver.signatureKey.split(".").pop()?.toLowerCase();
         signatureMime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "webp" ? "image/webp" : "image/png";
+        signatureSize = getImageSize(buf) ?? { width: 360, height: 96 };
       }
     }
   }
@@ -278,15 +284,15 @@ export async function GET(request: NextRequest, { params }: Props) {
     ws.mergeCells("A4:I4");
     ws.getRow(4).border = { top: thin(), bottom: thin() };
 
-    // ══ Company logo (floats top-left over the header, columns A-B) ══════════
+    // ══ Company logo (floats top-left over the header; aspect preserved) ═════
     if (logoImg) {
       const logoId = wb.addImage({
         base64: logoImg.base64,
         extension: logoImg.mime === "image/jpeg" ? "jpeg" : "png",
       });
       ws.addImage(logoId, {
-        tl: { col: 0.1, row: 0.1 } as unknown as ExcelJS.Anchor,
-        br: { col: 1.9, row: 2.9 } as unknown as ExcelJS.Anchor,
+        tl: { col: 0.15, row: 0.2 } as unknown as ExcelJS.Anchor,
+        ext: scaleToBox(logoImg, 96, 52),
         editAs: "oneCell",
       });
     }
@@ -453,16 +459,49 @@ export async function GET(request: NextRequest, { params }: Props) {
     ws.getRow(SIG_ROW + 1).height = 14;
     ws.getRow(SIG_ROW + 2).height = 14;
 
-    // Left sig block (approver — the manager who authorized the PO)
-    if (signatureBase64) {
+    // Left signatory block (cols A-D). Position images by absolute pixels via native
+    // EMU offsets — ExcelJS's fractional-column anchors don't map cleanly to pixels.
+    const EMU = 9525; // EMU per pixel
+    const COL_PX = [22, 4, 28, 15, 8, 15, 15, 8, 16].map((w) => Math.round(w * 7 + 5));
+    const SIG_BLOCK_PX = COL_PX[0] + COL_PX[1] + COL_PX[2] + COL_PX[3]; // A-D
+    const anchorAt = (leftPx: number, row: number) => {
+      let x = 0;
+      for (let c = 0; c < COL_PX.length - 1; c++) {
+        if (leftPx < x + COL_PX[c]) {
+          return { nativeCol: c, nativeColOff: Math.round((leftPx - x) * EMU), nativeRow: row, nativeRowOff: 0 } as unknown as ExcelJS.Anchor;
+        }
+        x += COL_PX[c];
+      }
+      return { nativeCol: COL_PX.length - 1, nativeColOff: Math.round((leftPx - x) * EMU), nativeRow: row, nativeRowOff: 0 } as unknown as ExcelJS.Anchor;
+    };
+
+    const sigExt = signatureBase64 ? scaleToBox(signatureSize ?? { width: 360, height: 96 }, 165, 44) : null;
+    const sigLeft = sigExt ? Math.round((SIG_BLOCK_PX - sigExt.width) / 2) : 0; // centred over the name
+
+    // Stamp / seal — drawn FIRST so it sits BEHIND the signature, tucked to its right.
+    if (stampImg) {
+      const stampExt = scaleToBox(stampImg, 80, 66);
+      const stampLeft = sigExt
+        ? Math.min(SIG_BLOCK_PX - stampExt.width, sigLeft + sigExt.width - Math.round(stampExt.width * 0.35))
+        : SIG_BLOCK_PX - stampExt.width - 6;
+      const stampId = wb.addImage({
+        base64: stampImg.base64,
+        extension: stampImg.mime === "image/jpeg" ? "jpeg" : "png",
+      });
+      ws.addImage(stampId, {
+        tl: anchorAt(Math.max(0, stampLeft), SIG_ROW - 1),
+        ext: stampExt,
+        editAs: "oneCell",
+      });
+    }
+
+    // Approver signature — drawn AFTER the stamp (on top), centred over the name.
+    if (signatureBase64 && sigExt) {
       const imgType = signatureMime === "image/jpeg" ? "jpeg" : "png";
       const imgId = wb.addImage({ base64: signatureBase64, extension: imgType });
-      // Span the image across columns A-D in the sig row
       ws.addImage(imgId, {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        tl: { col: 0, row: SIG_ROW - 1 } as any,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        br: { col: 4, row: SIG_ROW } as any,
+        tl: anchorAt(Math.max(0, sigLeft), SIG_ROW - 1),
+        ext: sigExt,
         editAs: "oneCell",
       });
       sc(SIG_ROW,     1, "", { border: { top: thin(), left: thin(), right: thin() } });
@@ -481,19 +520,6 @@ export async function GET(request: NextRequest, { params }: Props) {
     ws.getRow(SIG_ROW + 2).height = 14;
     ws.getRow(SIG_ROW + 3).height = 14;
 
-    // Company stamp / seal — overlays the right of the approver's signatory block (cols C-D)
-    if (stampImg) {
-      const stampId = wb.addImage({
-        base64: stampImg.base64,
-        extension: stampImg.mime === "image/jpeg" ? "jpeg" : "png",
-      });
-      ws.addImage(stampId, {
-        tl: { col: 2.2, row: SIG_ROW - 1 } as unknown as ExcelJS.Anchor,
-        br: { col: 3.9, row: SIG_ROW + 2 } as unknown as ExcelJS.Anchor,
-        editAs: "oneCell",
-      });
-    }
-
     // Right sig block (vendor)
     const vName = po.vendor?.name ?? "";
     sc(SIG_ROW,     6, vName, { font: fBold, border: { top: thin(), left: thin(), right: thin() }, align: alignC });
@@ -511,12 +537,15 @@ export async function GET(request: NextRequest, { params }: Props) {
     for (let c = 1; c <= 9; c++) sc(BAR_ROW, c, "", { fill: barFill });
     ws.mergeCells(`A${BAR_ROW}:I${BAR_ROW}`);
 
-    // ══ Cancelled watermark — diagonal "CANCELLED" floating over the sheet ═══
+    // ══ Cancelled watermark — diagonal "CANCELLED" centred over the sheet ════
+    // Pixel-sized (aspect preserved) so the text spans the page like the PDF,
+    // rather than being stretched/squished by a cell-range anchor.
     if (isCancelled) {
       const wmId = wb.addImage({ base64: CANCELLED_WATERMARK_PNG_BASE64, extension: "png" });
+      const ext = scaleToBox({ width: CANCELLED_WATERMARK_W, height: CANCELLED_WATERMARK_H }, 880, 720);
       ws.addImage(wmId, {
-        tl: { col: 0.2, row: 4 } as unknown as ExcelJS.Anchor,
-        br: { col: 9, row: BAR_ROW } as unknown as ExcelJS.Anchor,
+        tl: { col: 0.15, row: 5 } as unknown as ExcelJS.Anchor,
+        ext,
         editAs: "oneCell",
       });
     }

App/lib/image-size.ts

@@ -0,0 +1,46 @@
+// Image dimension helpers used to size XLSX floating images by pixels with the
+// aspect ratio preserved. ExcelJS's two-cell (tl/br) anchoring otherwise stretches
+// an image to fill a cell range, which distorts logos / signatures / stamps.
+
+/** Read pixel dimensions from a PNG / JPEG / WebP buffer (header parse, no deps). */
+export function getImageSize(buf: Buffer): { width: number; height: number } | null {
+  // PNG — IHDR width/height at byte offsets 16 / 20
+  if (buf.length >= 24 && buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47) {
+    return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
+  }
+  // JPEG — scan segments for a Start-Of-Frame marker
+  if (buf.length >= 4 && buf[0] === 0xff && buf[1] === 0xd8) {
+    let o = 2;
+    while (o + 9 < buf.length) {
+      if (buf[o] !== 0xff) { o++; continue; }
+      const m = buf[o + 1];
+      if (m >= 0xc0 && m <= 0xcf && m !== 0xc4 && m !== 0xc8 && m !== 0xcc) {
+        return { height: buf.readUInt16BE(o + 5), width: buf.readUInt16BE(o + 7) };
+      }
+      o += 2 + buf.readUInt16BE(o + 2);
+    }
+  }
+  // WebP — RIFF container, VP8 / VP8L / VP8X
+  if (buf.length >= 30 && buf.toString("ascii", 0, 4) === "RIFF" && buf.toString("ascii", 8, 12) === "WEBP") {
+    const fmt = buf.toString("ascii", 12, 16);
+    if (fmt === "VP8 ") return { width: buf.readUInt16LE(26) & 0x3fff, height: buf.readUInt16LE(28) & 0x3fff };
+    if (fmt === "VP8L") { const b = buf.readUInt32LE(21); return { width: (b & 0x3fff) + 1, height: ((b >> 14) & 0x3fff) + 1 }; }
+    if (fmt === "VP8X") {
+      return {
+        width: 1 + ((buf[24] | (buf[25] << 8) | (buf[26] << 16)) & 0xffffff),
+        height: 1 + ((buf[27] | (buf[28] << 8) | (buf[29] << 16)) & 0xffffff),
+      };
+    }
+  }
+  return null;
+}
+
+/** Scale natural dimensions to fit within a max box (px), preserving aspect ratio. */
+export function scaleToBox(
+  natural: { width: number; height: number },
+  maxW: number,
+  maxH: number
+): { width: number; height: number } {
+  const s = Math.min(maxW / natural.width, maxH / natural.height);
+  return { width: Math.round(natural.width * s), height: Math.round(natural.height * s) };
+}

App/tests/unit/image-size.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { getImageSize, scaleToBox } from "@/lib/image-size";
+
+function fakePng(width: number, height: number): Buffer {
+  const b = Buffer.alloc(24);
+  b[0] = 0x89; b[1] = 0x50; b[2] = 0x4e; b[3] = 0x47; // PNG signature start
+  b.writeUInt32BE(width, 16);
+  b.writeUInt32BE(height, 20);
+  return b;
+}
+
+function fakeJpeg(width: number, height: number): Buffer {
+  const b = Buffer.alloc(20);
+  b[0] = 0xff; b[1] = 0xd8;       // SOI
+  b[2] = 0xff; b[3] = 0xc0;       // SOF0 marker
+  b.writeUInt16BE(0x11, 4);       // segment length
+  b[6] = 8;                        // precision
+  b.writeUInt16BE(height, 7);
+  b.writeUInt16BE(width, 9);
+  return b;
+}
+
+describe("getImageSize", () => {
+  it("reads PNG dimensions", () => {
+    expect(getImageSize(fakePng(640, 480))).toEqual({ width: 640, height: 480 });
+  });
+
+  it("reads JPEG dimensions from the SOF marker", () => {
+    expect(getImageSize(fakeJpeg(1024, 768))).toEqual({ width: 1024, height: 768 });
+  });
+
+  it("returns null for non-image data", () => {
+    expect(getImageSize(Buffer.from("not an image at all"))).toBeNull();
+  });
+});
+
+describe("scaleToBox", () => {
+  it("preserves a square aspect ratio (downscale by the binding side)", () => {
+    const r = scaleToBox({ width: 200, height: 200 }, 96, 52);
+    expect(r.width).toBe(r.height); // stays square — never stretched
+    expect(r.height).toBeLessThanOrEqual(52);
+  });
+
+  it("fits a wide image to the width and keeps the ratio", () => {
+    const r = scaleToBox({ width: 360, height: 96 }, 165, 44);
+    expect(r.width).toBeLessThanOrEqual(165);
+    expect(r.height).toBeLessThanOrEqual(44);
+    expect(r.width / r.height).toBeCloseTo(360 / 96, 1);
+  });
+
+  it("keeps the watermark's landscape ratio", () => {
+    const r = scaleToBox({ width: 1400, height: 1000 }, 880, 720);
+    expect(r).toEqual({ width: 880, height: 629 });
+  });
+});