@svgrid/enterprise 3.0.1 → 3.0.3

package/dist/export-pdf.js

@@ -9,6 +9,175 @@
  * docDefinition object, so it's fully unit-testable; `exportGrid` feeds the
  * result to `pdfMake.createPdf(def).download(...)`.
  */
+/**
+ * The font map inside whatever `import('pdfmake/build/vfs_fonts')` returned.
+ *
+ * The file has changed shape across pdfmake releases and bundlers wrap it
+ * once more: `{ pdfMake: { vfs } }` (0.1.x), `{ vfs }`, either of those under
+ * `default`, and since 0.2.8 the module IS the map (`module.exports = vfs`,
+ * so an ESM interop hands it over as `default` with the `.ttf` names as
+ * keys). Only the last shape ships today, and it is the one the old lookup
+ * did not recognise, which left registration to a side effect of import
+ * order (see {@link registerPdfFonts}). Returns `null` when nothing in the
+ * module looks like a font map.
+ */
+export function resolvePdfVfs(mod) {
+    const isMap = (v) => !!v && typeof v === 'object' && Object.keys(v).some((k) => /\.(ttf|otf)$/i.test(k)) &&
+        Object.values(v).every((x) => typeof x === 'string');
+    const seen = new Set();
+    const walk = (v) => {
+        if (!v || typeof v !== 'object' || seen.has(v))
+            return null;
+        seen.add(v);
+        if (isMap(v))
+            return v;
+        const o = v;
+        return walk(o.pdfMake?.vfs) ?? walk(o.vfs) ?? walk(o.default);
+    };
+    return walk(mod);
+}
+/**
+ * Hand the fonts to the pdfmake instance that will create the document,
+ * explicitly. `vfs_fonts` registers itself only as a side effect: at import
+ * time it looks for a global `pdfMake` with `addVirtualFileSystem` and calls
+ * it. Under a bundler that global is whichever instance happened to load
+ * first, and when a dev server re-optimises its dependencies mid-session
+ * that is a stale one, so the instance doing the export has no fonts and
+ * `createPdf` fails with "File 'Roboto-Medium.ttf' not found in virtual
+ * file system". Registering here, on the instance in hand, removes the
+ * dependence on import order: `addVirtualFileSystem` where the version has
+ * it (0.2.x, where `createPdf` reads that before the `vfs` property) and the
+ * `vfs` property as well, which older versions read. Returns whether a map
+ * was found to register.
+ */
+export function registerPdfFonts(pdfMake, vfsModule) {
+    const vfs = resolvePdfVfs(vfsModule);
+    if (!vfs)
+        return false;
+    if (typeof pdfMake.addVirtualFileSystem === 'function')
+        pdfMake.addVirtualFileSystem(vfs);
+    pdfMake.vfs = vfs;
+    return true;
+}
+/** `rgb(...)` / `rgba(...)` / `#hex` -> `#rrggbb`, or null for transparent and anything else. */
+export function cssColorToHex(value) {
+    if (!value)
+        return null;
+    const v = value.trim();
+    const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(v);
+    if (hex) {
+        const h = hex[1];
+        return '#' + (h.length === 3 ? h.split('').map((c) => c + c).join('') : h).toLowerCase();
+    }
+    const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+%?))?\s*\)$/i.exec(v);
+    if (!rgb)
+        return null;
+    const alpha = rgb[4] === undefined ? 1 : rgb[4].endsWith('%') ? Number(rgb[4].slice(0, -1)) / 100 : Number(rgb[4]);
+    if (!(alpha > 0.05))
+        return null;
+    const to = (n) => Math.max(0, Math.min(255, Math.round(Number(n)))).toString(16).padStart(2, '0');
+    return '#' + to(rgb[1]) + to(rgb[2]) + to(rgb[3]);
+}
+/** Relative luminance of a `#rrggbb`, 0 (black) to 1 (white). */
+export function hexLuminance(hex) {
+    const n = parseInt(hex.slice(1), 16);
+    const ch = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * ch((n >> 16) & 255) + 0.7152 * ch((n >> 8) & 255) + 0.0722 * ch(n & 255);
+}
+/**
+ * Read the colours a mounted grid is drawn with, from computed styles: the
+ * header cell's fill and text, a body cell's text and line colour, the
+ * stripe of an alternate row, a group row's fill and text. Colours that are
+ * transparent or unreadable are left out, and under a dark theme (a dark
+ * body background) only the header colours are reported, since the page
+ * the PDF prints on is white.
+ */
+export function readGridPdfTheme(root) {
+    if (!root || typeof getComputedStyle !== 'function')
+        return {};
+    const q = (sel) => root.querySelector(sel);
+    const style = (el, prop) => (el ? cssColorToHex(getComputedStyle(el).getPropertyValue(prop)) : null);
+    // The fill an element shows is the first painted background on the way
+    // up: a header cell is transparent over its column, a body cell over its
+    // row, the grid over the page. The walk goes past the root because a
+    // dark page is often what a dark theme's grid sits on, unpainted itself.
+    const fill = (el) => {
+        for (let node = el; node; node = node.parentElement) {
+            const c = style(node, 'background-color');
+            if (c)
+                return c;
+        }
+        return null;
+    };
+    // A data column, not the row-number gutter or the checkbox column, and
+    // a data row, not the header row (which is a `.sv-grid-row` too).
+    const plain = ':not([class*="row-number"]):not([class*="selection"])';
+    const header = q(`.sv-grid-head .sv-grid-column${plain}`) ?? q('.sv-grid-header-cell') ?? q('thead th');
+    const cell = q(`.sv-grid-body .sv-grid-row:not(.sv-grid-row-alt):not(.sv-grid-header-row) .sv-grid-cell${plain}`) ?? q('tbody td');
+    const alt = q(`.sv-grid-body .sv-grid-row-alt .sv-grid-cell${plain}`);
+    const group = q('.sv-grid-group-row .sv-grid-cell');
+    const out = {};
+    const headerFill = fill(header);
+    const headerText = style(header, 'color');
+    if (headerFill)
+        out.headerColor = headerFill;
+    if (headerText)
+        out.headerTextColor = headerText;
+    const bodyBg = cell ? fill(cell.parentElement) : fill(q('.sv-grid-container') ?? root);
+    const text = style(cell, 'color');
+    // Dark: a dark ground, or light text (which would vanish on the white page
+    // whatever the ground was).
+    const dark = (bodyBg ? hexLuminance(bodyBg) < 0.4 : false) || (text ? hexLuminance(text) > 0.5 : false);
+    if (dark)
+        return out;
+    if (text)
+        out.textColor = text;
+    const line = style(cell, 'border-bottom-color') ?? style(header, 'border-bottom-color');
+    if (line)
+        out.borderColor = line;
+    const stripe = style(alt, 'background-color');
+    if (stripe && stripe !== bodyBg)
+        out.zebraColor = stripe;
+    const groupFill = style(group, 'background-color');
+    const groupText = style(group, 'color');
+    if (groupFill && groupFill !== bodyBg)
+        out.groupColor = groupFill;
+    if (groupText)
+        out.groupTextColor = groupText;
+    return out;
+}
+/** Page sizes in pt (portrait), for the content width the charts fill. */
+const PAGE_PT = {
+    A4: [595.28, 841.89], A3: [841.89, 1190.55], A5: [419.53, 595.28], LETTER: [612, 792], LEGAL: [612, 1008],
+};
+/**
+ * Turn every `element` chart into an image through `rasterize` (the grid's
+ * `chartToPngBlob`, injected so this stays testable without a canvas); image
+ * charts pass through. Order is kept.
+ */
+export async function resolvePdfCharts(charts, rasterize) {
+    if (!charts?.length)
+        return [];
+    const out = [];
+    for (const c of charts) {
+        if ('image' in c) {
+            out.push(c);
+            continue;
+        }
+        const blob = await rasterize(c.element);
+        const image = await new Promise((resolve, reject) => {
+            const fr = new FileReader();
+            fr.onload = () => resolve(String(fr.result));
+            fr.onerror = () => reject(fr.error ?? new Error('could not read the chart image'));
+            fr.readAsDataURL(blob);
+        });
+        out.push({ image, title: c.title, caption: c.caption, width: c.width });
+    }
+    return out;
+}
 /**
  * Build a pdfmake docDefinition from resolved columns + formatted string rows.
  * `now` is injected for a deterministic footer date in tests.
@@ -16,29 +185,79 @@
 export function buildPdfDocDefinition(params) {
     const { columns } = params;
     const o = params.opts ?? {};
+    const st = params.styles ?? {};
+    const theme = params.theme ?? {};
     const now = params.now ?? new Date(0);
     const fontSize = o.fontSize ?? 8;
-    const headerColor = o.headerColor ?? '#334155';
-    const headerTextColor = o.headerTextColor ?? '#ffffff';
+    // Explicit PDF options, then the blanket styles, then the grid on screen, then the slate defaults.
+    const headerColor = o.headerColor ?? st.headerRow?.backgroundColor ?? theme.headerColor ?? '#334155';
+    const headerTextColor = o.headerTextColor ?? st.headerRow?.color ?? theme.headerTextColor ?? '#ffffff';
     const zebra = o.zebra ?? true;
-    const zebraColor = o.zebraColor ?? '#f1f5f9';
-    const groupColor = o.groupColor ?? '#e2e8f0';
-    const groupTextColor = o.groupTextColor ?? '#0f172a';
-    const subtotalColor = o.subtotalColor ?? '#f8fafc';
+    const zebraColor = o.zebraColor ?? st.rowAlternate?.backgroundColor ?? theme.zebraColor ?? '#f1f5f9';
+    const groupColor = o.groupColor ?? theme.groupColor ?? '#e2e8f0';
+    const groupTextColor = o.groupTextColor ?? theme.groupTextColor ?? '#0f172a';
+    const subtotalColor = o.subtotalColor ?? theme.subtotalColor ?? '#f8fafc';
+    const textColor = o.textColor ?? st.rows?.color ?? theme.textColor;
+    const borderColor = o.borderColor ?? theme.borderColor ?? '#e2e8f0';
     const repeatHeader = o.repeatHeader ?? true;
+    const isBold = (w) => w === 'bold' || (typeof w === 'number' && w >= 600);
+    const ptSize = (v) => {
+        if (v === undefined)
+            return undefined;
+        const n = typeof v === 'number' ? v : parseFloat(v);
+        return Number.isFinite(n) && n > 0 ? n : undefined;
+    };
+    /** Lay one cell style over a cell, keys the style names. */
+    const applyStyle = (cell, s) => {
+        if (!s)
+            return;
+        if (s.backgroundColor)
+            cell.fillColor = s.backgroundColor;
+        if (s.color)
+            cell.color = s.color;
+        if (isBold(s.fontWeight))
+            cell.bold = true;
+        else if (s.fontWeight === 'normal')
+            cell.bold = false;
+        if (s.fontStyle === 'italic')
+            cell.italics = true;
+        const size = ptSize(s.fontSize);
+        if (size)
+            cell.fontSize = size;
+        if (s.textAlign)
+            cell.alignment = s.textAlign;
+    };
+    // Per-cell overrides by A1 reference: row 1 is the header, so a data row
+    // `r` (0-based) is row `r + 2`, matching the xlsx and html writers.
+    const cellRefs = new Map();
+    for (const [ref, s] of Object.entries(st.cells ?? {})) {
+        const m = /^([A-Z]+)(\d+)$/i.exec(ref.trim());
+        if (!m)
+            continue;
+        let col = 0;
+        for (const ch of m[1].toUpperCase())
+            col = col * 26 + (ch.charCodeAt(0) - 64);
+        cellRefs.set(`${Number(m[2]) - 1}:${col - 1}`, s);
+    }
     const orientation = o.pageOrientation ??
         (columns.length > (o.autoLandscapeThreshold ?? 8) ? 'landscape' : 'portrait');
     const widths = Array.isArray(o.columnWidths)
         ? o.columnWidths
         : columns.map(() => (o.columnWidths === 'auto' ? 'auto' : '*'));
     // Header row.
-    const headerRow = columns.map((c) => ({
-        text: c.header,
-        bold: true,
-        alignment: c.align ?? 'left',
-        color: headerTextColor,
-        fillColor: headerColor,
-    }));
+    const headerRow = columns.map((c, ci) => {
+        const cell = {
+            text: c.header,
+            bold: true,
+            alignment: c.align ?? 'left',
+            color: headerTextColor,
+            fillColor: headerColor,
+        };
+        // The blanket header style already set the colours above; its weight, size and alignment apply here.
+        applyStyle(cell, st.headerRow ? { ...st.headerRow, backgroundColor: undefined, color: undefined } : undefined);
+        applyStyle(cell, cellRefs.get(`0:${ci}`));
+        return cell;
+    });
     // Normalize to a structured body: `body` wins, else wrap flat `rows`.
     const model = params.body ?? (params.rows ?? []).map((cells) => ({ kind: 'data', cells }));
     // Track which body-row indices are plain data rows, so zebra striping only
@@ -75,6 +294,13 @@ export function buildPdfDocDefinition(params) {
             const ord = dataOrdinal++;
             bodyCells.push(columns.map((c, ci) => {
                 const cell = { text: row.cells[ci] ?? '', alignment: c.align ?? 'left' };
+                if (textColor)
+                    cell.color = textColor;
+                // Blanket row style, the zebra text colour on alternate rows, then the A1 override.
+                applyStyle(cell, st.rows ? { ...st.rows, backgroundColor: undefined } : undefined);
+                if (zebra && ord % 2 === 1 && st.rowAlternate?.color)
+                    cell.color = st.rowAlternate.color;
+                applyStyle(cell, cellRefs.get(`${ord + 1}:${ci}`));
                 const s = dataCellStyle?.(ord, ci);
                 if (s) {
                     if (s.fill)
@@ -95,6 +321,37 @@ export function buildPdfDocDefinition(params) {
             }));
         }
     });
+    // Merged data cells: pdfmake spans from the top-left cell and expects the
+    // covered cells to be present and empty. Only flat exports: with group
+    // or subtotal rows the data row numbering would not be the body's.
+    if (params.merges?.length && !params.body) {
+        const dataRowsAt = [...dataRowIdx].sort((a, b) => a - b);
+        for (const m of params.merges) {
+            const rs = Math.max(1, Math.floor(m.rowSpan ?? 1));
+            const cs = Math.max(1, Math.floor(m.colSpan ?? 1));
+            if (rs === 1 && cs === 1)
+                continue;
+            const top = dataRowsAt[m.row];
+            if (top === undefined || m.col < 0 || m.col >= columns.length)
+                continue;
+            const anchor = bodyCells[top]?.[m.col];
+            if (!anchor)
+                continue;
+            if (rs > 1)
+                anchor.rowSpan = Math.min(rs, bodyCells.length - top);
+            if (cs > 1)
+                anchor.colSpan = Math.min(cs, columns.length - m.col);
+            for (let r = 0; r < (anchor.rowSpan ?? 1); r += 1) {
+                for (let c = 0; c < (anchor.colSpan ?? 1); c += 1) {
+                    if (r === 0 && c === 0)
+                        continue;
+                    const covered = bodyCells[top + r]?.[m.col + c];
+                    if (covered)
+                        covered.text = '';
+                }
+            }
+        }
+    }
     const table = {
         table: {
             headerRows: repeatHeader ? 1 : 0,
@@ -107,22 +364,96 @@ export function buildPdfDocDefinition(params) {
             fillColor: (rowIndex) => zebra && rowIndex > 0 && rowIndex % 2 === 0 && dataRowIdx.has(rowIndex) ? zebraColor : null,
             hLineWidth: () => 0.5,
             vLineWidth: () => 0.5,
-            hLineColor: () => '#e2e8f0',
-            vLineColor: () => '#e2e8f0',
+            hLineColor: () => borderColor,
+            vLineColor: () => borderColor,
             paddingTop: () => 3,
             paddingBottom: () => 3,
             paddingLeft: () => 5,
             paddingRight: () => 5,
         },
     };
+    // The lines `ExportOptions.header` / `footer` carry: text with a style, an
+    // image, or a left / centre / right triple, above and below the table the
+    // way the xlsx writer puts them in rows around it.
+    const pageLines = (lines, margin) => (lines ?? []).map((line) => {
+        if ('image' in line) {
+            return { image: line.image, ...(line.width ? { width: line.width } : {}), ...(line.height ? { height: line.height } : {}), margin };
+        }
+        if ('text' in line) {
+            const cell = { text: line.text };
+            applyStyle(cell, line.style);
+            return { ...cell, margin };
+        }
+        return {
+            columns: [
+                { text: line.left ?? '', alignment: 'left' },
+                { text: line.center ?? '', alignment: 'center' },
+                { text: line.right ?? '', alignment: 'right' },
+            ],
+            margin,
+        };
+    });
     const content = [];
+    content.push(...pageLines(params.headerLines, [0, 0, 0, 4]));
     if (o.logo)
         content.push({ image: o.logo, width: o.logoWidth ?? 90, margin: [0, 0, 0, 8] });
     if (o.title)
         content.push({ text: o.title, fontSize: fontSize + 8, bold: true, margin: [0, 0, 0, 2] });
     if (o.subtitle)
         content.push({ text: o.subtitle, fontSize: fontSize + 1, color: '#64748b', margin: [0, 0, 0, 8] });
+    // The KPI strip: one row of boxes, each a label over a big number.
+    if (o.kpis?.length) {
+        const fill = o.kpiColor ?? '#f8fafc';
+        content.push({
+            table: {
+                widths: o.kpis.map(() => '*'),
+                body: [
+                    o.kpis.map((k) => ({
+                        fillColor: fill,
+                        margin: [8, 6, 8, 6],
+                        stack: [
+                            { text: k.label, fontSize: fontSize, color: '#64748b' },
+                            { text: k.value, fontSize: fontSize + 10, bold: true, margin: [0, 2, 0, 0] },
+                            ...(k.delta ? [{ text: k.delta, fontSize: fontSize, color: k.color ?? '#64748b', margin: [0, 2, 0, 0] }] : []),
+                        ],
+                    })),
+                ],
+            },
+            layout: {
+                hLineWidth: () => 0,
+                vLineWidth: () => 4,
+                vLineColor: () => '#ffffff',
+                paddingLeft: () => 0,
+                paddingRight: () => 0,
+                paddingTop: () => 0,
+                paddingBottom: () => 0,
+            },
+            margin: [0, 0, 0, 10],
+        });
+    }
+    // Charts: the resolved images, at the content width unless told otherwise.
+    const margins = o.margins ?? [28, 34, 28, 34];
+    const [pw, ph] = PAGE_PT[o.pageSize ?? 'A4'];
+    const contentWidth = (orientation === 'landscape' ? ph : pw) - margins[0] - margins[2];
+    const chartImages = params.charts ?? (o.charts ?? []).filter((c) => 'image' in c);
+    const chartBlocks = chartImages.map((c) => ({
+        stack: [
+            ...(c.title ? [{ text: c.title, fontSize: fontSize + 3, bold: true, margin: [0, 0, 0, 4] }] : []),
+            { image: c.image, width: Math.min(c.width ?? contentWidth, contentWidth) },
+            ...(c.caption ? [{ text: c.caption, fontSize: fontSize, color: '#64748b', margin: [0, 3, 0, 0] }] : []),
+        ],
+        margin: [0, 0, 0, 12],
+        unbreakable: true,
+    }));
+    if (o.chartsPosition !== 'below')
+        content.push(...chartBlocks);
     content.push(table);
+    if (o.chartsPosition === 'below') {
+        if (chartBlocks.length)
+            content.push({ text: '', margin: [0, 0, 0, 12] });
+        content.push(...chartBlocks);
+    }
+    content.push(...pageLines(params.footerLines, [0, 4, 0, 0]));
     const def = {
         pageSize: o.pageSize ?? 'A4',
         pageOrientation: orientation,

package/dist/export.js

@@ -6,7 +6,7 @@ import { installSmartShim } from './smart-shim.js';
 import { downloadBlobFile, downloadTextFile, serializeDelimited, serializeHtml, serializeJson, serializeMarkdown, serializeXml, } from './export-serialize.js';
 import { serializeSpreadsheetML } from './export-xls.js';
 import { buildXlsxParts, packageXlsx } from './export-ooxml.js';
-import { buildPdfDocDefinition } from './export-pdf.js';
+import { buildPdfDocDefinition, readGridPdfTheme, registerPdfFonts, resolvePdfCharts } from './export-pdf.js';
 import { buildConditionalResolver } from './export-conditional.js';
 /** Formats served by the native, dependency-free, streaming serializers. */
 const NATIVE_TEXT_FORMATS = [
@@ -68,14 +68,11 @@ async function ensureGlobals(format) {
                 'Install it with: pnpm add pdfmake');
         }
         const pdfMake = (pdfMakeMod.default ?? pdfMakeMod);
-        const vfsRoot = vfsMod.default ?? vfsMod;
-        // pdfmake's vfs_fonts file historically exports either { pdfMake: { vfs } }
-        // or { default: { vfs } } or { vfs } depending on bundler. Try each shape.
-        const candidate = vfsRoot.pdfMake?.vfs ??
-            vfsRoot.vfs ??
-            vfsRoot.default?.vfs;
-        if (candidate)
-            pdfMake.vfs = candidate;
+        // Explicit, on this instance: the fonts module's own registration is a
+        // side effect on a global that can point at a stale instance.
+        if (!registerPdfFonts(pdfMake, vfsMod)) {
+            throw new Error('@svgrid/enterprise: "pdfmake/build/vfs_fonts" did not contain a font map; the installed pdfmake is not one this export knows.');
+        }
         g.pdfMake = pdfMake;
     }
 }
@@ -637,13 +634,26 @@ async function exportPdf(api, opts) {
         ...opts.pdf,
         pageOrientation: opts.pdf?.pageOrientation ?? opts.pageOrientation,
     };
+    // The grid on screen lends its colours unless told not to; explicit
+    // `pdf` colours and `styles` still win inside the builder.
+    const theme = pdfOpts.matchTheme === false ? {} : readGridPdfTheme(api.getElement?.() ?? null);
+    const lines = { headerLines: opts.header, footerLines: opts.footer };
+    // Charts handed over as elements are rasterised here, once, through the
+    // grid chart's own PNG path at 2x, so the page gets the picture on screen.
+    // The rasteriser comes from the grid's barrel, imported on demand: the
+    // barrel carries the Svelte components, and a static import would drag them
+    // into every export call site (and into the Svelte-free test project).
+    const charts = await resolvePdfCharts(pdfOpts.charts, async (el) => {
+        const { chartToPngBlob } = await import('@svgrid/grid');
+        return chartToPngBlob(el, { scale: 2 });
+    });
     const now = new Date();
     let def;
     if (effGroupBy?.length) {
         // Conditional formatting is skipped for grouped PDFs (group / subtotal
         // rows own the layout); the grid colors still show on screen.
         const body = buildGroupedPdfBody(cols, sourceRows, effGroupBy);
-        def = buildPdfDocDefinition({ columns, body, opts: pdfOpts, now });
+        def = buildPdfDocDefinition({ columns, body, opts: pdfOpts, styles: opts.styles, theme, ...lines, charts, now });
     }
     else {
         const projected = await projectRows(sourceRows, cols, opts);
@@ -667,6 +677,11 @@ async function exportPdf(api, opts) {
             },
             dataCellLink: link,
             opts: pdfOpts,
+            styles: opts.styles,
+            theme,
+            ...lines,
+            merges: opts.merges,
+            charts,
             now,
         });
     }