@svgrid/enterprise 3.0.2 → 3.1.0

package/dist/export-pdf.js

@@ -59,6 +59,96 @@ export function registerPdfFonts(pdfMake, vfsModule) {
     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],
@@ -95,29 +185,79 @@ export async function resolvePdfCharts(charts, rasterize) {
 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
@@ -154,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)
@@ -174,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,
@@ -186,15 +364,37 @@ 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)
@@ -253,6 +453,7 @@ export function buildPdfDocDefinition(params) {
             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, registerPdfFonts, resolvePdfCharts } 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 = [
@@ -634,6 +634,10 @@ 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
@@ -649,7 +653,7 @@ async function exportPdf(api, opts) {
         // 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, charts, now });
+        def = buildPdfDocDefinition({ columns, body, opts: pdfOpts, styles: opts.styles, theme, ...lines, charts, now });
     }
     else {
         const projected = await projectRows(sourceRows, cols, opts);
@@ -673,6 +677,10 @@ async function exportPdf(api, opts) {
             },
             dataCellLink: link,
             opts: pdfOpts,
+            styles: opts.styles,
+            theme,
+            ...lines,
+            merges: opts.merges,
             charts,
             now,
         });