@pixldocs/canvas-renderer 0.5.190 → 0.5.192

package/README.md

@@ -612,3 +612,43 @@ function — there is now exactly one resolver shared across the entire
 stack. Anything that blurs correctly in one place blurs identically in
 the other; visual/UX bugs introduced in one pipeline cannot diverge
 silently from the other.
+
+## Reliable PDF photo embedding across browsers (v0.5.191+)
+
+Form-driven apps that embed **user-uploaded photos** (biodatas, resumes,
+ID cards…) historically hit a Safari/iOS bug where the downloaded PDF
+rendered without the photos even though the on-screen preview was fine.
+The svg2pdf fast path internally re-rasterises `data:image/*` sources
+through a tainted offscreen canvas roundtrip, which Safari silently drops
+for large camera-roll JPEGs.
+
+v0.5.191 fixes this with two new options:
+
+```ts
+const renderer = new PixldocsRenderer({
+  supabaseUrl, supabaseAnonKey,
+  // Force the per-element Fabric → jsPDF.addImage path on every export.
+  // Recommended for biodata-style flows that always have user photos.
+  forcePerElementPdf: true,           // true | false | 'auto' (default)
+  // Down-scale any data:image/* whose longest edge > 2048 to JPEG-0.85
+  // before mounting into Fabric. Prevents Safari from silently dropping
+  // multi-megapixel camera-roll JPEGs in jsPDF.addImage.
+  maxImageEdgePx: 2048,               // 0 to disable
+});
+
+const pdf = await renderer.renderPdfFromForm({
+  templateId, formSchemaId, sectionState, title,
+  // Per-call overrides also accepted:
+  // forcePerElementPdf: 'auto',
+  // maxImageEdgePx: 2400,
+});
+```
+
+**Defaults:** `forcePerElementPdf: 'auto'` enables the safe path only when
+the resolved config contains a `data:image/(jpeg|png|webp)` source **and**
+the host is Safari / iOS (incl. iPadOS desktop spoof). Editors and
+non-Safari hosts keep the vector fast path unchanged.
+
+Hosts that previously monkey-patched `captureFabricCanvasSvgForPdf` to
+throw (the unofficial BioMaker workaround) can delete that patch after
+upgrading.

package/dist/{index-Dt4aPZtQ.js → index-CqgOWYwR.js}

@@ -16889,9 +16889,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.190";
+const resolvedPackageVersion = "0.5.192";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.190";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.192";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16918,6 +16918,96 @@ function isFabricTextboxLike(obj) {
 function isFabricGroupLike(obj) {
   return !!obj && (obj instanceof fabric.Group || obj.type === "group" || Array.isArray(obj._objects) && typeof obj.getObjects === "function");
 }
+function configHasUserDataImage(config) {
+  let found = false;
+  const isRasterDataUrl = (u) => typeof u === "string" && /^data:image\/(jpeg|jpg|png|webp)[;,]/i.test(u);
+  const walk = (nodes) => {
+    if (found || !Array.isArray(nodes)) return;
+    for (const node of nodes) {
+      if (!node || typeof node !== "object") continue;
+      if (node.type === "image" && (isRasterDataUrl(node.src) || isRasterDataUrl(node.imageUrl))) {
+        found = true;
+        return;
+      }
+      if (Array.isArray(node.children)) walk(node.children);
+    }
+  };
+  for (const page of config.pages ?? []) {
+    walk((page == null ? void 0 : page.children) ?? []);
+    if (found) break;
+  }
+  return found;
+}
+function detectSafariOrIos() {
+  try {
+    if (typeof navigator === "undefined") return false;
+    const ua = navigator.userAgent || "";
+    const vendor = navigator.vendor || "";
+    const isIOS = /iPad|iPhone|iPod/.test(ua) || // iPadOS 13+ reports as Mac with touch
+    /Macintosh/.test(ua) && typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 1;
+    const isSafariDesktop = /Safari/.test(ua) && /Apple/.test(vendor) && !/Chrome|CriOS|Chromium|Edg|FxiOS/.test(ua);
+    return isIOS || isSafariDesktop;
+  } catch {
+    return false;
+  }
+}
+async function downscaleConfigRasterImages(config, maxEdgePx) {
+  if (!maxEdgePx || maxEdgePx <= 0) return 0;
+  if (typeof document === "undefined") return 0;
+  const targets = [];
+  const isRasterDataUrl = (u) => typeof u === "string" && /^data:image\/(jpeg|jpg|png|webp)[;,]/i.test(u);
+  const walk = (nodes) => {
+    if (!Array.isArray(nodes)) return;
+    for (const node of nodes) {
+      if (!node || typeof node !== "object") continue;
+      if (node.type === "image") {
+        if (isRasterDataUrl(node.src)) targets.push({ node, field: "src" });
+        else if (isRasterDataUrl(node.imageUrl)) targets.push({ node, field: "imageUrl" });
+      }
+      if (Array.isArray(node.children)) walk(node.children);
+    }
+  };
+  for (const page of config.pages ?? []) walk((page == null ? void 0 : page.children) ?? []);
+  if (targets.length === 0) return 0;
+  const shrinkOne = async (dataUrl) => {
+    try {
+      const img = await new Promise((resolve, reject) => {
+        const el = new Image();
+        el.onload = () => resolve(el);
+        el.onerror = (e) => reject(e);
+        el.decoding = "sync";
+        el.src = dataUrl;
+      });
+      const w = img.naturalWidth, h = img.naturalHeight;
+      if (!w || !h) return null;
+      const longest = Math.max(w, h);
+      if (longest <= maxEdgePx) return null;
+      const scale = maxEdgePx / longest;
+      const tw = Math.max(1, Math.round(w * scale));
+      const th = Math.max(1, Math.round(h * scale));
+      const canvas = document.createElement("canvas");
+      canvas.width = tw;
+      canvas.height = th;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return null;
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, tw, th);
+      ctx.drawImage(img, 0, 0, tw, th);
+      return canvas.toDataURL("image/jpeg", 0.85);
+    } catch {
+      return null;
+    }
+  };
+  let shrunk = 0;
+  for (const { node, field } of targets) {
+    const next = await shrinkOne(String(node[field]));
+    if (next) {
+      node[field] = next;
+      shrunk++;
+    }
+  }
+  return shrunk;
+}
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -17270,7 +17360,9 @@ class PixldocsRenderer {
   async renderPdf(templateConfig, options) {
     return this.renderPdfViaClientExport(templateConfig, {
       title: options == null ? void 0 : options.title,
-      textMode: options == null ? void 0 : options.textMode
+      textMode: options == null ? void 0 : options.textMode,
+      forcePerElementPdf: options == null ? void 0 : options.forcePerElementPdf,
+      maxImageEdgePx: options == null ? void 0 : options.maxImageEdgePx
     });
   }
   /**
@@ -17278,7 +17370,7 @@ class PixldocsRenderer {
    * This is the primary PDF export API — mirrors renderFromForm() but returns a PDF.
    */
   async renderPdfFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, watermark, watermarkOptions, prefetched, title, fontBaseUrl, textMode } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, watermarkOptions, prefetched, title, fontBaseUrl, textMode, forcePerElementPdf, maxImageEdgePx } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
@@ -17299,7 +17391,9 @@ class PixldocsRenderer {
     return this.renderPdfViaClientExport(configToRender, {
       title: title ?? resolved.config.name,
       watermark: shouldWatermark,
-      textMode
+      textMode,
+      forcePerElementPdf,
+      maxImageEdgePx
     });
   }
   async renderById(templateId, formData, options) {
@@ -17340,6 +17434,31 @@ class PixldocsRenderer {
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
     const cloned = JSON.parse(JSON.stringify(templateConfig));
+    const callForce = options.forcePerElementPdf;
+    const cfgForce = this.config.forcePerElementPdf;
+    const forceMode = callForce !== void 0 ? callForce : cfgForce !== void 0 ? cfgForce : "auto";
+    const hasUserDataImage = configHasUserDataImage(cloned);
+    const isSafariLike = detectSafariOrIos();
+    const shouldForcePerElement = forceMode === true ? true : forceMode === false ? false : hasUserDataImage && isSafariLike;
+    const maxEdgeOpt = options.maxImageEdgePx ?? this.config.maxImageEdgePx;
+    const effectiveMaxEdge = typeof maxEdgeOpt === "number" ? Math.max(0, maxEdgeOpt | 0) : shouldForcePerElement ? 2048 : 0;
+    if (effectiveMaxEdge > 0) {
+      try {
+        const downscaled = await downscaleConfigRasterImages(cloned, effectiveMaxEdge);
+        if (downscaled > 0) {
+          console.log(`[canvas-renderer][pdf-unified] downscaled ${downscaled} raster image(s) to <=${effectiveMaxEdge}px edge`);
+        }
+      } catch (e) {
+        console.warn("[canvas-renderer][pdf-unified] image downscale pass failed (continuing with originals):", e);
+      }
+    }
+    console.log("[canvas-renderer][pdf-unified] export switches", {
+      forceMode,
+      hasUserDataImage,
+      isSafariLike,
+      shouldForcePerElement,
+      effectiveMaxEdge
+    });
     const stampPrefix = `__pixldocs_pdf_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
     const pageIds = cloned.pages.map((p, i) => {
       const id = `${stampPrefix}_p${i}`;
@@ -17399,7 +17518,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-DFGqTzvI.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-DuVMxQSS.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -17409,7 +17528,28 @@ class PixldocsRenderer {
         title: options.title,
         watermark: !!options.watermark,
         returnBlob: true,
-        pdfTextMode: options.textMode ?? (cloned == null ? void 0 : cloned.pdfTextMode) ?? ((_a = cloned.canvas) == null ? void 0 : _a.n) ?? "auto"
+        pdfTextMode: options.textMode ?? (cloned == null ? void 0 : cloned.pdfTextMode) ?? ((_a = cloned.canvas) == null ? void 0 : _a.n) ?? "auto",
+        // IMPORTANT: We intentionally do NOT skip the live-canvas SVG fast path
+        // here, even when `shouldForcePerElement` is true via auto-detection.
+        //
+        // Reason: skipping the fast path forces the config-space export, which
+        // computes positions from stored values rather than the live Fabric
+        // layout (post auto-shrink, post text-init, post crop-group bake).
+        // That drift causes severe text overlap / mis-positioning in the PDF
+        // while the on-screen preview (which uses the live canvas) still looks
+        // correct. v0.5.191 shipped with this skip enabled and produced exactly
+        // that regression.
+        //
+        // The Safari/iOS "missing photo" issue is solved end-to-end by the
+        // `downscaleConfigRasterImages()` pre-pass above, which shrinks large
+        // `data:image/*` JPEGs to a safe edge length before the canvas mounts.
+        // That alone keeps Safari's SVG capture reliable without altering the
+        // layout pipeline.
+        //
+        // We still honor an explicit `forcePerElementPdf: true` from the host
+        // app (advanced opt-in for niche cases), but the auto path no longer
+        // toggles this flag.
+        skipLiveCanvasSvgFastPath: forceMode === true
       });
       if (!result || typeof result === "undefined") {
         throw new Error("exportMultiPagePdf returned no blob (returnBlob path failed)");
@@ -19544,7 +19684,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-DFGqTzvI.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-DuVMxQSS.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -19944,4 +20084,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-Dt4aPZtQ.js.map
+//# sourceMappingURL=index-CqgOWYwR.js.map