// Side-by-side review of the reference-based templates: the reference original (left) against our render (right), plus // the multi-page, Letter, long-text and logo-variant samples. Run: npm run templates:compare [-- monolith cobalt-stripe] // Output: /tmp/invoice-c6a/ (override with --out=DIR). With --numbers it also prints text baselines (reference vs ours) for tuning. import { readFileSync, writeFileSync, mkdirSync } from "node:fs"; import path from "node:path"; import { CANVA_DIR, loadCanvas, loadRenderer, rasterize, textItems } from "./lib.mjs"; const argv = process.argv.slice(2); const OUT = argv.find((a) => a.startsWith("--out="))?.slice(6) ?? "/tmp/invoice-c6a"; const SCALE = 1.6; const PDF_NO = { marble: 1, highlighter: 2, monolith: 3, linea: 4, monogram: 5, serenity: 6, "crimson-grid": 7, "cobalt-stripe": 8, "slate-band": 9, "teal-swoosh": 10, "tangerine-ledger": 11, "purple-pop": 12, "citrus-split": 13 }; const ROWS = { linea: 7, "crimson-grid": 3, "tangerine-ledger": 3, "slate-band": 5, "teal-swoosh": 5, "purple-pop": 3, "citrus-split": 3, monolith: 3, "cobalt-stripe": 8 }; const DARK = ["slate-band"]; const args = process.argv.slice(2); const numbers = args.includes("--numbers"); const ids = args.filter((a) => !a.startsWith("--")); const targets = ids.length ? ids : ["monolith", "cobalt-stripe"]; const LONG = "Unit 4, Third Floor, The Grand Heritage Business Centre, Plot 1187-B, Old Airport Road Extension, Opposite the Municipal Corporation Ward Office, Domlur Second Stage, Bengaluru Urban District, Karnataka State, India - 560071; Registered office: Level 12, Tower C, Global Technology Park, Outer Ring Road, Marathahalli, Bengaluru - 560103"; const TOKEN = "Supercalifragilisticexpialidocious-Pneumonoultramicroscopic-1234567890"; async function main() { mkdirSync(OUT, { recursive: true }); const { createCanvas } = await loadCanvas(); const r = await loadRenderer(); r.ensureSetup(); const side = async (left, right, file) => { const gap = 12; const c = createCanvas(left.width + right.width + gap, Math.max(left.height, right.height)); const ctx = c.getContext("2d"); ctx.fillStyle = "#888888"; ctx.fillRect(0, 0, c.width, c.height); ctx.drawImage(left, 0, 0); ctx.drawImage(right, left.width + gap, 0); writeFileSync(path.join(OUT, file), c.toBuffer("image/png")); }; for (const id of targets) { const no = PDF_NO[id]; const canvaBytes = readFileSync(path.join(CANVA_DIR, `${no}.pdf`)); const reference = await rasterize(canvaBytes, 1, SCALE); const rows = ROWS[id] ?? 5; const NAMES = ["Brand consultation", "Logo design", "Website design", "Social media templates", "Brand photography", "Brand guide", "Social media templates", "Name card"]; // Short one-line descriptions like the reference sample, so positions can be compared row by row. const items = (hsn) => NAMES.slice(0, rows).map((description, i) => ({ id: i + 1, description, mode: "rate", rate: 100, unit: "hour", quantity: 1, amount: 0, sortOrder: i, ...(hsn ? { hsnSac: "998397" } : {}) })); const sample = (over = {}) => ({ name: `s-${id}`, items: items(over.registered !== false), signature: true, invoice: { poNumber: "", notes: "Payment due within 30 days.\nLate payments attract 2% monthly interest." }, ...over }); const render = async (spec, size = "A4") => { // Purple Pop has no placeholder, so its logo samples turn the opt-in on (Linea's compare stays logo-free, like format.pdf). const prefs = r.prefsFor(size, { templateId: id, ...(id === "purple-pop" && spec.logo && spec.logo !== "none" ? { logo: { show: true } } : {}) }); return r.renderFixture(spec, prefs); }; // Templates with no reference placeholder show a logo only when the user turns it on. const OPT_IN = ["linea", "purple-pop"]; const withLogo = await render(sample({ logo: "real" })); await side(reference, await rasterize(withLogo.result.bytes, 1, SCALE), `compare-${id}.png`); const noLogo = await render(sample({ registered: false, logo: "none" })); await side(reference, await rasterize(noLogo.result.bytes, 1, SCALE), `compare-${id}-nologo.png`); if (numbers) { const a = await textItems(canvaBytes); const b = await textItems(withLogo.result.bytes); console.log(`--- ${id}: reference (${a.length}) vs ours (${b.length}); baseline y, x`); for (const it of a) console.log(` reference ${String(it.baseline).padStart(6)} ${String(it.x).padStart(6)} w${String(it.w).padStart(6)} s${it.size} ${it.str.slice(0, 40)}`); for (const it of b) console.log(` ours ${String(it.baseline).padStart(6)} ${String(it.x).padStart(6)} w${String(it.w).padStart(6)} s${it.size} ${it.str.slice(0, 40)}`); } if (OPT_IN.includes(id)) { // The opt-in logo (off by default: Linea keeps matching format.pdf, Purple Pop has no placeholder). const shown = await r.renderFixture(sample({ logo: "real" }), r.prefsFor("A4", { templateId: id, logo: { show: true } })); writeFileSync(path.join(OUT, `${id}-A4-logo-optin.png`), (await rasterize(shown.result.bytes, 1, SCALE)).toBuffer("image/png")); } // Dark-surface templates: the white knockout variant (a logo with alpha) next to the chip fallback (no alpha) above. const logoKinds = DARK.includes(id) ? ["square", "wide", "knockout"] : ["square", "wide"]; for (const logo of logoKinds) { const x = await render(sample({ logo })); writeFileSync(path.join(OUT, `${id}-A4-logo-${logo}.png`), (await rasterize(x.result.bytes, 1, SCALE)).toBuffer("image/png")); } const sixty = await render({ name: "s60", items: 60, signature: true }); for (let p = 1; p <= Math.min(2, sixty.result.pages); p++) writeFileSync(path.join(OUT, `${id}-A4-60rows-p${p}.png`), (await rasterize(sixty.result.bytes, p, SCALE)).toBuffer("image/png")); const letter = await render(sample({ logo: "real" }), "LETTER"); writeFileSync(path.join(OUT, `${id}-Letter-tax.png`), (await rasterize(letter.result.bytes, 1, SCALE)).toBuffer("image/png")); const long = await render({ name: "long", items: 4, signature: true, logo: "real", vendor: { vendorAddress: LONG, vendorEmail: `${TOKEN}@example-studios-india.co.in`, vendorName: TOKEN }, invoice: { clientName: TOKEN, clientAddress: LONG, notes: `Note: ${TOKEN} ${LONG}` }, }); writeFileSync(path.join(OUT, `${id}-A4-longtext.png`), (await rasterize(long.result.bytes, 1, SCALE)).toBuffer("image/png")); console.log(`${id}: pages ${withLogo.result.pages}/${sixty.result.pages}/${letter.result.pages}/${long.result.pages}; audit issues`, [withLogo, noLogo, sixty, letter, long].map((x) => x.result.issues.length).join("/")); for (const x of [withLogo, noLogo, sixty, letter, long]) for (const i of x.result.issues) console.log(" ", i.severity, i.code, `p${i.page}`, i.message.slice(0, 160)); } } await main();