@openpresentation/opf-render 0.11.9 → 0.12.2

package/dist/export-browser.js

@@ -0,0 +1,228 @@
+import { svgsToVectorPdf } from "./pdf-vector.js";
+import { OPFRenderError, packageName } from "./svg.js";
+
+// RR-23: PNG and PDF output in a browser. `svgToPng` and `svgToPdf` of the root entry need Node (resvg, sharp); this entry
+// has the same two names for a page. It uses the same vector PDF converter as Node (fontkit, bidi-js and pako, all pure
+// JavaScript) over the SVG the preview draws, so the text stays real text in the same embedded subsets. What differs from
+// Node is only how pixels are made: a canvas decodes pictures and draws PNGs. No system font is read (a browser has no way
+// to hand one over) and nothing is fetched: faces come from the SVG's own @font-face data (renderSvg's `embeddedFonts`) or
+// from `fontData`.
+
+const DEFAULT_DIMENSIONS = { width: 1280, height: 720 };
+const MAX_PIXELS = 40_000_000;
+
+/** Convert one SVG to PNG bytes with a canvas. `scale` multiplies the SVG's own size; `background` is a CSS colour (default white, `"transparent"` for none). */
+export async function svgToPng(svg, options = {}) {
+  const text = svgText(svg);
+  const size = pageSize(text);
+  const scale = positive(options.scale, "scale", 1);
+  const width = Math.max(1, Math.round(size.width * scale)), height = Math.max(1, Math.round(size.height * scale));
+  if (width * height > MAX_PIXELS) throw new OPFRenderError("png-render-failed", `The PNG would be ${width} by ${height} pixels; the limit is ${MAX_PIXELS / 1e6} megapixels.`, { width, height });
+  options.signal?.throwIfAborted?.();
+  const image = await loadSvgImage(text, options.signal);
+  const { canvas, context } = createCanvas(width, height);
+  const background = options.background ?? "#FFFFFF";
+  if (background && background !== "transparent" && background !== "none") { context.fillStyle = background; context.fillRect(0, 0, width, height); }
+  context.drawImage(image, 0, 0, width, height);
+  return canvasPng(canvas);
+}
+
+/**
+ * Convert SVG slides to a PDF, one slide per page (1 SVG pixel is 1 PDF point, as in Node). `mode: "vector"` (default) writes
+ * real text, paths, gradients and images; `"raster"` draws each slide as an image (`scale`, default 2). Takes the options of
+ * the Node `svgToPdf` that make sense here (`metadata`, `tagged`, `strict`, `compress`, `onDiagnostic`, the generic family
+ * names, `rasterFallbackScale`) and `fontData` (`[{ data, family? }]`, extra face bytes), `signal` (an AbortSignal, checked between
+ * pages) and `onProgress({ page, pages })`.
+ */
+export async function svgToPdf(svgs, options = {}) {
+  const inputs = (Array.isArray(svgs) ? svgs : [svgs]).map(svgText);
+  if (!inputs.length) throw new OPFRenderError("empty-pdf", "svgToPdf requires at least one SVG slide.");
+  const mode = options.mode ?? "vector";
+  if (mode !== "vector" && mode !== "raster") throw new OPFRenderError("invalid-conversion-option", 'mode must be "vector" or "raster".', { option: "mode", value: mode });
+  if (options.loadSystemFonts === true) throw new OPFRenderError("pdf-system-fonts-unsupported", "A browser cannot hand system fonts to the PDF export: supply faces as @font-face data or `fontData`.", { option: "loadSystemFonts" });
+  if (mode === "raster") return rasterPdf(inputs, options);
+  const scale = positive(options.rasterFallbackScale, "rasterFallbackScale", 2);
+  const fontCss = fontFaceCss(inputs);
+  return svgsToVectorPdf(inputs, {
+    fontFiles: [], fontDirs: [],
+    fontData: Array.isArray(options.fontData) ? options.fontData : [],
+    imageCodec: canvasImageCodec(),
+    defaultFontFamily: options.defaultFontFamily ?? "Roboto",
+    sansSerifFamily: options.sansSerifFamily ?? options.defaultFontFamily ?? "Roboto",
+    monospaceFamily: options.monospaceFamily ?? "Roboto Mono",
+    serifFamily: options.serifFamily,
+    background: options.background,
+    metadata: options.metadata,
+    tagged: options.tagged,
+    compress: options.compress,
+    strict: options.strict === true,
+    rasterFallbackScale: scale,
+    onDiagnostic: typeof options.onDiagnostic === "function" ? options.onDiagnostic : undefined,
+    signal: options.signal,
+    onProgress: typeof options.onProgress === "function" ? options.onProgress : undefined,
+    yieldToHost: () => new Promise((resolve) => setTimeout(resolve, 0)),
+    producer: packageName,
+    ErrorClass: OPFRenderError,
+    // The element's own text has no fonts in a standalone SVG image: give it the faces the slides embed.
+    rasterize: async (svg, factor) => ({ png: await svgToPng(fontCss && /<text[\s>]/.test(svg) ? svg.replace(/(<svg\b[^>]*>)/, `$1<style>${fontCss}</style>`) : svg, { scale: factor, background: "transparent", signal: options.signal }) }),
+  });
+}
+
+async function rasterPdf(inputs, options) {
+  const { PDFDocument } = await import("pdf-lib");
+  const pdf = await PDFDocument.create({ updateMetadata: false });
+  pdf.setCreator(packageName);
+  pdf.setProducer(packageName);
+  const scale = positive(options.scale, "scale", 2);
+  for (const [index, svg] of inputs.entries()) {
+    options.signal?.throwIfAborted?.();
+    const size = pageSize(svg);
+    const png = await svgToPng(svg, { scale, background: options.background ?? "#FFFFFF", signal: options.signal });
+    const image = await pdf.embedPng(png);
+    pdf.addPage([size.width, size.height]).drawImage(image, { x: 0, y: 0, width: size.width, height: size.height });
+    options.onProgress?.({ page: index + 1, pages: inputs.length });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+  return pdf.save({ addDefaultPage: false, useObjectStreams: false });
+}
+
+// ---------------------------------------------------------------------------------------------------------------------------
+// Canvas
+
+function createCanvas(width, height) {
+  const canvas = typeof OffscreenCanvas === "function" ? new OffscreenCanvas(width, height) : Object.assign(document.createElement("canvas"), { width, height });
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) throw new OPFRenderError("png-renderer-unavailable", "The browser could not create a 2D canvas for this size.", { width, height });
+  return { canvas, context };
+}
+
+async function canvasPng(canvas) {
+  const blob = canvas.convertToBlob ? await canvas.convertToBlob({ type: "image/png" }) : await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  if (!blob) throw new OPFRenderError("png-render-failed", "The browser could not encode the canvas as PNG.");
+  return new Uint8Array(await blob.arrayBuffer());
+}
+
+async function loadSvgImage(text, signal) {
+  const url = URL.createObjectURL(new Blob([text], { type: "image/svg+xml;charset=utf-8" }));
+  try {
+    const image = new Image();
+    image.decoding = "sync";
+    const loaded = new Promise((resolve, reject) => {
+      image.onload = resolve;
+      image.onerror = () => reject(new OPFRenderError("png-render-failed", "The browser could not draw this SVG as an image."));
+    });
+    image.src = url;
+    await loaded;
+    signal?.throwIfAborted?.();
+    // Fonts the SVG embeds as data: faces load with the image; decode() settles the picture before the first draw.
+    try { await image.decode(); } catch { /* drawn below as the browser has it */ }
+    return image;
+  } finally {
+    // The decoded image keeps its own copy; the URL is no longer needed once loaded.
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+}
+
+/** The picture decoder the vector converter uses in a browser (the Node default is sharp): see `imageCodec` in pdf-vector.js. */
+function canvasImageCodec() {
+  return {
+    async metadata(bytes) { return sniffImage(bytes); },
+    async rgba(bytes, { orient }) {
+      const sniffed = sniffImage(bytes);
+      const blob = new Blob([bytes], { type: sniffed.format ? `image/${sniffed.format}` : undefined });
+      let bitmap;
+      try { bitmap = await createImageBitmap(blob, { imageOrientation: orient ? "from-image" : "none", premultiplyAlpha: "none", colorSpaceConversion: "default" }); }
+      catch (error) { throw new Error(`The browser could not decode this picture: ${error?.message ?? error}`); }
+      try {
+        if (bitmap.width * bitmap.height > MAX_PIXELS) throw new Error(`The picture is larger than ${MAX_PIXELS / 1e6} megapixels.`);
+        const { context } = createCanvas(bitmap.width, bitmap.height);
+        context.drawImage(bitmap, 0, 0);
+        const { data, width, height } = context.getImageData(0, 0, bitmap.width, bitmap.height);
+        return { data, info: { width, height } };
+      } finally { bitmap.close?.(); }
+    },
+  };
+}
+
+/** Format, and for a JPEG its size, component count and EXIF orientation: the facts the PDF writer needs to pass a JPEG through. */
+export function sniffImage(bytes) {
+  const b = bytes;
+  if (b.length > 8 && b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4e && b[3] === 0x47) return { format: "png" };
+  if (b.length > 12 && ascii(b, 0, 4) === "RIFF" && ascii(b, 8, 12) === "WEBP") return { format: "webp" };
+  if (b.length > 6 && ascii(b, 0, 3) === "GIF") return { format: "gif" };
+  if (b.length < 4 || b[0] !== 0xff || b[1] !== 0xd8) return { format: undefined };
+  let orientation, width, height, channels;
+  let adobe = false;
+  for (let position = 2; position + 4 <= b.length;) {
+    if (b[position] !== 0xff) { position++; continue; }
+    const marker = b[position + 1];
+    if (marker === 0xff) { position++; continue; }
+    if (marker === 0xd8 || marker === 0x01 || (marker >= 0xd0 && marker <= 0xd7)) { position += 2; continue; }
+    if (marker === 0xd9 || marker === 0xda) break;
+    const length = (b[position + 2] << 8) | b[position + 3];
+    const start = position + 4;
+    if (marker === 0xe1 && ascii(b, start, start + 4) === "Exif") orientation = exifOrientation(b, start + 6, position + 2 + length) ?? orientation;
+    if (marker === 0xee && ascii(b, start, start + 5) === "Adobe") adobe = true;
+    if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+      height = (b[start + 1] << 8) | b[start + 2]; width = (b[start + 3] << 8) | b[start + 4]; channels = b[start + 5];
+    }
+    position += 2 + length;
+  }
+  return { format: "jpeg", width, height, channels, orientation, space: channels === 4 || adobe ? "cmyk" : "srgb" };
+}
+
+function exifOrientation(b, tiff, end) {
+  if (tiff + 8 > end) return undefined;
+  const little = ascii(b, tiff, tiff + 2) === "II";
+  const u16 = (at) => (little ? b[at] | (b[at + 1] << 8) : (b[at] << 8) | b[at + 1]);
+  const u32 = (at) => (little ? (b[at] | (b[at + 1] << 8) | (b[at + 2] << 16) | (b[at + 3] << 24)) >>> 0 : ((b[at] << 24) | (b[at + 1] << 16) | (b[at + 2] << 8) | b[at + 3]) >>> 0);
+  const directory = tiff + u32(tiff + 4);
+  if (directory + 2 > end) return undefined;
+  const entries = u16(directory);
+  for (let index = 0; index < entries; index++) {
+    const entry = directory + 2 + index * 12;
+    if (entry + 12 > end) break;
+    if (u16(entry) === 0x0112) return u16(entry + 8);
+  }
+  return undefined;
+}
+
+const ascii = (bytes, from, to) => String.fromCharCode(...bytes.subarray(from, to));
+
+// ---------------------------------------------------------------------------------------------------------------------------
+// SVG text helpers
+
+function svgText(value) {
+  if (typeof value === "string") return value;
+  if (value instanceof Uint8Array) return new TextDecoder().decode(value);
+  throw new OPFRenderError("invalid-svg-input", "SVG input must be a string or Uint8Array.");
+}
+
+function pageSize(svg) {
+  const root = /<svg\s+([^>]*?)>/i.exec(svg);
+  if (!root) throw new OPFRenderError("invalid-svg", "SVG input must contain a root <svg> element.");
+  const attributes = {};
+  for (const attribute of root[1].matchAll(/([\w:-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) attributes[attribute[1]] = attribute[2] ?? attribute[3] ?? "";
+  const box = String(attributes.viewBox ?? "").trim().split(/[\s,]+/).map(Number);
+  const hasBox = box.length === 4 && box.every(Number.isFinite);
+  const length = (value) => { const match = /^-?\d+(?:\.\d+)?/.exec(String(value ?? "").trim()); return match ? Number(match[0]) : null; };
+  const dimension = (value, fallback) => (Number.isFinite(value) && value > 0 ? value : fallback);
+  return {
+    width: dimension(length(attributes.width) ?? (hasBox ? box[2] : null), DEFAULT_DIMENSIONS.width),
+    height: dimension(length(attributes.height) ?? (hasBox ? box[3] : null), DEFAULT_DIMENSIONS.height),
+  };
+}
+
+/** The distinct @font-face rules of the pages' own style sheets, as one CSS string. */
+function fontFaceCss(svgs) {
+  const rules = new Set();
+  for (const svg of svgs) for (const rule of svg.matchAll(/@font-face\s*\{[^}]*\}/g)) rules.add(rule[0]);
+  return [...rules].join("\n");
+}
+
+function positive(value, name, fallback) {
+  if (value === undefined || value === null) return fallback;
+  const number = Number(value);
+  if (Number.isFinite(number) && number > 0) return number;
+  throw new OPFRenderError("invalid-conversion-option", `${name} must be a positive finite number.`, { option: name, value });
+}

package/dist/font-manifest.js

@@ -2549,6 +2549,109 @@ export const BUNDLED_FONT_MANIFEST=freeze({
         }
       ]
     },
+    {
+      "name": "@expo-google-fonts/noto-color-emoji",
+      "version": "0.4.6",
+      "pack": "scripts",
+      "scripts": [
+        "Zsye"
+      ],
+      "color": {
+        "format": "COLRv1, SVG",
+        "rasterFamily": "Noto Emoji"
+      },
+      "source": "https://www.npmjs.com/package/@expo-google-fonts/noto-color-emoji/v/0.4.6",
+      "license": "OFL-1.1",
+      "licenseFile": "LICENSE_FONT",
+      "licenseSha256": "ac564676d10054a8445923dfc2dfb13c042d97888bd27c1b6ec6dfe89a9d8d62",
+      "reservedFontNames": [],
+      "upstream": "http://scripts.sil.org/OFL",
+      "copyright": "Copyright 2021 Google Inc. All Rights Reserved.",
+      "faces": [
+        {
+          "file": "400Regular/NotoColorEmoji_400Regular.ttf",
+          "family": "Noto Color Emoji",
+          "weight": 400,
+          "italic": false,
+          "sha256": "7fb39738ab18f10612d6f4595e2e8e47a0afdf34738460442d99cd0c344a4d90"
+        }
+      ]
+    },
+    {
+      "name": "@expo-google-fonts/noto-emoji",
+      "version": "0.4.7",
+      "pack": "scripts",
+      "scripts": [
+        "Zsye"
+      ],
+      "source": "https://www.npmjs.com/package/@expo-google-fonts/noto-emoji/v/0.4.7",
+      "license": "OFL-1.1",
+      "licenseFile": "LICENSE_FONT",
+      "licenseSha256": "500bb1ccf43df7bbb522112f9133a52b16e1c35e809632f5d8609b179152de5b",
+      "reservedFontNames": [],
+      "upstream": "https://scripts.sil.org/OFL",
+      "copyright": "Copyright 2013 Google LLC",
+      "faces": [
+        {
+          "file": "400Regular/NotoEmoji_400Regular.ttf",
+          "family": "Noto Emoji",
+          "weight": 400,
+          "italic": false,
+          "sha256": "24aaa2a20c9c06ffe9bf04284bfd1f14376a329d10122f902abe2770817eb504"
+        }
+      ]
+    },
+    {
+      "name": "@expo-google-fonts/stix-two-math",
+      "version": "0.4.0",
+      "pack": "scripts",
+      "scripts": [
+        "Zmth"
+      ],
+      "source": "https://www.npmjs.com/package/@expo-google-fonts/stix-two-math/v/0.4.0",
+      "license": "OFL-1.1",
+      "licenseFile": "LICENSE_FONT",
+      "licenseSha256": "0c8825913b60d858aacdb33c4ca6660a7d64b0d6464702efbb19313f5765861a",
+      "reservedFontNames": [
+        "TM Math"
+      ],
+      "upstream": "https://github.com/stipub/stixfonts",
+      "copyright": "Copyright 2001-2021 The STIX Fonts Project Authors (https://github.com/stipub/stixfonts), with Reserved Font Name \"TM Math\". STIX Fonts™ is a trademark of The Institute of Electrical and Electronics Engineers, Inc.",
+      "faces": [
+        {
+          "file": "400Regular/STIXTwoMath_400Regular.ttf",
+          "family": "STIX Two Math",
+          "weight": 400,
+          "italic": false,
+          "sha256": "c3377c20641ecee349677e3f6cc71a6405c30cda7171a4cbc4a1c3970cfff0b4"
+        }
+      ]
+    },
+    {
+      "name": "@expo-google-fonts/noto-sans-math",
+      "version": "0.4.2",
+      "pack": "scripts",
+      "scripts": [
+        "Zmth",
+        "Zsym"
+      ],
+      "source": "https://www.npmjs.com/package/@expo-google-fonts/noto-sans-math/v/0.4.2",
+      "license": "OFL-1.1",
+      "licenseFile": "LICENSE_FONT",
+      "licenseSha256": "403a95275b469061b7d4371c328e0ada3bc7d63328abe2e88aad5cd243b2fe21",
+      "reservedFontNames": [],
+      "upstream": "https://github.com/notofonts/math",
+      "copyright": "Copyright 2022 The Noto Project Authors (https://github.com/notofonts/math)",
+      "faces": [
+        {
+          "file": "400Regular/NotoSansMath_400Regular.ttf",
+          "family": "Noto Sans Math",
+          "weight": 400,
+          "italic": false,
+          "sha256": "b4a1dfdbfa13b4755e5eac20cb25c1d17ed5a745ceb89639595e8cf45a2b1e07"
+        }
+      ]
+    },
     {
       "name": "@expo-google-fonts/noto-sans",
       "version": "0.4.2",
@@ -2595,6 +2698,61 @@ export const BUNDLED_FONT_MANIFEST=freeze({
           "sha256": "7e34616e092593c340449baf9a259075a054c6419511ccf21ff0d83a1c9dd0d0"
         }
       ]
+    },
+    {
+      "name": "@expo-google-fonts/noto-sans-symbols-2",
+      "version": "0.4.1",
+      "pack": "scripts",
+      "scripts": [
+        "Zsym"
+      ],
+      "source": "https://www.npmjs.com/package/@expo-google-fonts/noto-sans-symbols-2/v/0.4.1",
+      "license": "OFL-1.1",
+      "licenseFile": "LICENSE_FONT",
+      "licenseSha256": "b118dd41337806a5d4797052c77caf3bd096aed783e5eb21b4d11154351e1ac0",
+      "reservedFontNames": [],
+      "upstream": "https://github.com/notofonts/symbols",
+      "copyright": "Copyright 2022 The Noto Project Authors (https://github.com/notofonts/symbols)",
+      "faces": [
+        {
+          "file": "400Regular/NotoSansSymbols2_400Regular.ttf",
+          "family": "Noto Sans Symbols 2",
+          "weight": 400,
+          "italic": false,
+          "sha256": "f67f40c65f929f029827ab37cfdc4897dfd9ae3c28d9e98ba46e0d52e39eb97e"
+        }
+      ]
+    },
+    {
+      "name": "@expo-google-fonts/noto-sans-symbols",
+      "version": "0.4.1",
+      "pack": "scripts",
+      "scripts": [
+        "Zsym"
+      ],
+      "source": "https://www.npmjs.com/package/@expo-google-fonts/noto-sans-symbols/v/0.4.1",
+      "license": "OFL-1.1",
+      "licenseFile": "LICENSE_FONT",
+      "licenseSha256": "b118dd41337806a5d4797052c77caf3bd096aed783e5eb21b4d11154351e1ac0",
+      "reservedFontNames": [],
+      "upstream": "https://github.com/notofonts/symbols",
+      "copyright": "Copyright 2022 The Noto Project Authors (https://github.com/notofonts/symbols)",
+      "faces": [
+        {
+          "file": "400Regular/NotoSansSymbols_400Regular.ttf",
+          "family": "Noto Sans Symbols",
+          "weight": 400,
+          "italic": false,
+          "sha256": "aedeec1cd0514930aeeafc4a88a6deff83cda1e6b58086f0b9bb9c7dd0157578"
+        },
+        {
+          "file": "700Bold/NotoSansSymbols_700Bold.ttf",
+          "family": "Noto Sans Symbols",
+          "weight": 700,
+          "italic": false,
+          "sha256": "5682f6c88d6199623edf026f67a8722697e8c5f409e5249477594e409d657eb0"
+        }
+      ]
     }
   ]
 });