@pixldocs/canvas-renderer 0.5.191 → 0.5.193

package/README.md

@@ -273,9 +273,20 @@ const renderer = new PixldocsRenderer({
   supabaseAnonKey: string,
   imageProxyUrl?: string,   // CORS proxy for external images
   pixelRatio?: number,       // default: 2
+  assetWaitTimeoutMs?: number,    // default: 15000; use ~30000 for multi-photo PDF exports
+  assetWaitEarlyExitMs?: number,  // default: 1500; ignored for strict PDF image-ID waits
+  maxImageEdgePx?: number,        // recommended: 2048 for user-uploaded PDF photos
+  debug?: boolean,                // logs image wait/SVG completeness diagnostics
 });
 ```
 
+For BioMaker-style PDFs with user-uploaded profile/gallery photos, use the live
+SVG path with `maxImageEdgePx: 2048` and **do not** set
+`forcePerElementPdf: true`. Since `0.5.193`, PDF export waits for every expected
+bound image ID, stamps those IDs into the captured SVG, preloads/decodes them
+before `svg2pdf`, and throws if any expected photo is missing instead of
+silently exporting an incomplete PDF.
+
 #### `renderer.renderFromForm(options)`
 
 Renders all pages from a V2 sectionState payload (same format as the server `/render-from-form` API).

package/dist/{index-C3kuDISv.js → index-CDoyeKa8.js}

@@ -16782,6 +16782,23 @@ function stampFabricLineMetricsOnTextSvg(svg, obj) {
     return `<tspan${cleaned} data-pd-line-width="${Number(lineWidth.toFixed(3))}" data-pd-line-start="${Number(lineStart.toFixed(3))}">`;
   });
 }
+function escapeSvgDataAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function hasRenderableRasterCandidate(obj) {
+  if (!obj || typeof obj !== "object") return false;
+  const candidates = [obj._element, obj._originalElement, obj._filteredEl, obj._cacheCanvasEl];
+  for (const candidate of candidates) {
+    if (candidate instanceof HTMLImageElement || candidate instanceof HTMLCanvasElement) return true;
+  }
+  const children = Array.isArray(obj == null ? void 0 : obj._objects) ? obj._objects : [];
+  return children.some((child) => hasRenderableRasterCandidate(child));
+}
+function stampPixldocsImageIdOnSvg(svg, id) {
+  if (!id || !/<image\b/i.test(svg) || /data-pixldocs-image-id=/i.test(svg)) return svg;
+  const attr = ` data-pixldocs-image-id="${escapeSvgDataAttr(id)}"`;
+  return svg.replace(/<image\b/i, `<image${attr}`);
+}
 function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight) {
   const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
   const prevSvgVPT = fabricInstance.svgViewportTransformation;
@@ -16798,14 +16815,20 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
     );
   } catch {
   }
-  const textSvgPatchRecords = [];
+  const svgPatchRecords = [];
   try {
     const visit = (obj) => {
       if (!obj) return;
-      if (isTextboxLike(obj) && typeof obj.toSVG === "function") {
+      const imageId = typeof obj.__docuforgeId === "string" && hasRenderableRasterCandidate(obj) ? obj.__docuforgeId : "";
+      if ((isTextboxLike(obj) || imageId) && typeof obj.toSVG === "function") {
         const originalToSVG = obj.toSVG.bind(obj);
-        obj.toSVG = (reviver) => stampFabricLineMetricsOnTextSvg(originalToSVG(reviver), obj);
-        textSvgPatchRecords.push({ obj, originalToSVG });
+        obj.toSVG = (reviver) => {
+          let svg = originalToSVG(reviver);
+          if (isTextboxLike(obj)) svg = stampFabricLineMetricsOnTextSvg(svg, obj);
+          if (imageId) svg = stampPixldocsImageIdOnSvg(svg, imageId);
+          return svg;
+        };
+        svgPatchRecords.push({ obj, originalToSVG });
       }
       const children = Array.isArray(obj == null ? void 0 : obj._objects) ? obj._objects : [];
       for (const child of children) visit(child);
@@ -16838,6 +16861,13 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
           evented: false,
           objectCaching: false
         });
+        if (typeof obj.__docuforgeId === "string") {
+          replacement.__docuforgeId = obj.__docuforgeId;
+          if (typeof replacement.toSVG === "function") {
+            const originalReplacementToSVG = replacement.toSVG.bind(replacement);
+            replacement.toSVG = (reviver) => stampPixldocsImageIdOnSvg(originalReplacementToSVG(reviver), obj.__docuforgeId);
+          }
+        }
         const insertIndex = fabricInstance._objects.indexOf(obj);
         const prevExclude = obj.excludeFromExport;
         obj.excludeFromExport = true;
@@ -16870,7 +16900,7 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
       } catch {
       }
     }
-    for (const rec of textSvgPatchRecords) {
+    for (const rec of svgPatchRecords) {
       try {
         rec.obj.toSVG = rec.originalToSVG;
       } catch {
@@ -16889,9 +16919,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.191";
+const resolvedPackageVersion = "0.5.193";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.191";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.193";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -17512,13 +17542,13 @@ class PixldocsRenderer {
           );
         });
         await this.waitForCanvasScene(container, cloned, i);
-        const expected = this.getExpectedImageCount(cloned, i);
+        const expected = this.getExpectedImageIds(cloned, i);
         await this.waitForCanvasImages(container, expected);
         await this.waitForStableTextMetrics(container, cloned, { clearGlobalCharCache: false });
         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-CrTGqxx6.js");
+      const { exportMultiPagePdf, preparePagesForExport } = await import("./vectorPdfExport-Cd--tBky.js");
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -17529,7 +17559,27 @@ class PixldocsRenderer {
         watermark: !!options.watermark,
         returnBlob: true,
         pdfTextMode: options.textMode ?? (cloned == null ? void 0 : cloned.pdfTextMode) ?? ((_a = cloned.canvas) == null ? void 0 : _a.n) ?? "auto",
-        skipLiveCanvasSvgFastPath: shouldForcePerElement
+        // 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)");
@@ -17570,17 +17620,21 @@ class PixldocsRenderer {
     walk(page.children);
     return ids;
   }
-  waitForCanvasImages(container, expectedImageCount, maxWaitMs, pollMs = 120) {
+  waitForCanvasImages(container, expectedImages, maxWaitMs, pollMs = 120) {
     const timeout = Math.max(500, maxWaitMs ?? this.config.assetWaitTimeoutMs ?? 15e3);
     const earlyExitMs = Math.max(250, this.config.assetWaitEarlyExitMs ?? 1500);
     const debug = !!this.config.debug;
-    return new Promise((resolve) => {
+    const expectedImageIds = Array.isArray(expectedImages) ? [...new Set(expectedImages)] : [];
+    const expectedImageCount = Array.isArray(expectedImages) ? expectedImageIds.length : expectedImages;
+    const strictById = expectedImageIds.length > 0;
+    return new Promise((resolve, reject) => {
       const start = Date.now();
       let stableFrames = 0;
       let lastSummary = "";
-      let lastActual = -1;
+      let lastProgressKey = "";
       let lastProgressAt = Date.now();
       const isRenderableImage = (value) => value instanceof HTMLImageElement && value.complete && value.naturalWidth > 0 && value.naturalHeight > 0;
+      const isRenderableCanvas = (value) => value instanceof HTMLCanvasElement && value.width > 0 && value.height > 0;
       const collectRenderableImages = (obj, seen) => {
         if (!obj || typeof obj !== "object") return;
         const candidates = [obj._element, obj._originalElement, obj._filteredEl, obj._cacheCanvasEl];
@@ -17597,6 +17651,25 @@ class PixldocsRenderer {
         }
         return true;
       };
+      const collectRenderableImageIds = (obj, readyIds) => {
+        if (!obj || typeof obj !== "object") return { loaded: false, pending: false };
+        let loaded = false;
+        let pending = false;
+        const candidates = [obj._element, obj._originalElement, obj._filteredEl, obj._cacheCanvasEl];
+        for (const candidate of candidates) {
+          if (isRenderableImage(candidate) || isRenderableCanvas(candidate)) loaded = true;
+          else if (candidate instanceof HTMLImageElement) pending = true;
+        }
+        const nested = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+        for (const child of nested) {
+          const childState = collectRenderableImageIds(child, readyIds);
+          loaded = loaded || childState.loaded;
+          pending = pending || childState.pending;
+        }
+        const id = typeof obj.__docuforgeId === "string" ? obj.__docuforgeId : "";
+        if (id && loaded && !pending) readyIds.add(id);
+        return { loaded, pending };
+      };
       const getFabricCanvas = () => {
         const registry2 = window.__fabricCanvasRegistry;
         if (registry2 instanceof Map) {
@@ -17636,17 +17709,21 @@ class PixldocsRenderer {
         const fabricObjects = fabricCanvas && typeof fabricCanvas.getObjects === "function" ? fabricCanvas.getObjects() : [];
         const renderableImages = /* @__PURE__ */ new Set();
         const fabricReady = fabricObjects.every((obj) => collectRenderableImages(obj, renderableImages) !== false);
+        const renderableImageIds = /* @__PURE__ */ new Set();
+        for (const obj of fabricObjects) collectRenderableImageIds(obj, renderableImageIds);
+        const missingImageIds = strictById ? expectedImageIds.filter((id) => !renderableImageIds.has(id)) : [];
         const actualImageCount = Math.max(domImages.length, renderableImages.size);
         const canvasReady = !!fabricCanvas && !!(fabricCanvas.lowerCanvasEl || fabricCanvas.upperCanvasEl);
-        const hasExpectedAssets = expectedImageCount === 0 ? true : actualImageCount >= expectedImageCount;
+        const hasExpectedAssets = strictById ? missingImageIds.length === 0 : expectedImageCount === 0 ? true : actualImageCount >= expectedImageCount;
         const ready = allDomLoaded && fabricReady && hasExpectedAssets;
-        const summary = `expected=${expectedImageCount} actual=${actualImageCount} dom=${domImages.length} fabricReady=${fabricReady} domReady=${allDomLoaded} canvasReady=${canvasReady}`;
+        const summary = `expected=${expectedImageCount} actual=${actualImageCount} fabricIds=${renderableImageIds.size} dom=${domImages.length} fabricReady=${fabricReady} domReady=${allDomLoaded} canvasReady=${canvasReady}${missingImageIds.length ? ` missing=${missingImageIds.join(",")}` : ""}`;
         if (summary !== lastSummary) {
           lastSummary = summary;
           if (debug) console.log(`[canvas-renderer][asset-wait] ${summary}`);
         }
-        if (actualImageCount !== lastActual) {
-          lastActual = actualImageCount;
+        const progressKey = strictById ? expectedImageIds.filter((id) => renderableImageIds.has(id)).join("|") : String(actualImageCount);
+        if (progressKey !== lastProgressKey) {
+          lastProgressKey = progressKey;
           lastProgressAt = Date.now();
         }
         if (ready) {
@@ -17661,7 +17738,7 @@ class PixldocsRenderer {
         }
         const sceneSettled = fabricReady && allDomLoaded && canvasReady && fabricObjects.length > 0;
         const idleFor = Date.now() - lastProgressAt;
-        if (sceneSettled && actualImageCount < expectedImageCount && idleFor >= earlyExitMs) {
+        if (!strictById && sceneSettled && actualImageCount < expectedImageCount && idleFor >= earlyExitMs) {
           if (debug) {
             console.log(
               `[canvas-renderer][asset-wait] early-exit after ${elapsed}ms (idle=${idleFor}ms, ${summary})`
@@ -17685,6 +17762,10 @@ class PixldocsRenderer {
           console.warn(`[canvas-renderer][asset-wait-timeout] elapsed=${elapsed}ms ${summary}`);
           console.warn("[canvas-renderer][asset-wait-timeout][dom-images]", domImageDebug);
           console.warn("[canvas-renderer][asset-wait-timeout][fabric-images]", fabricImageDebug);
+          if (strictById && missingImageIds.length > 0) {
+            reject(new Error(`[canvas-renderer][asset-wait-timeout] Missing expected image(s): ${missingImageIds.join(", ")}`));
+            return;
+          }
           settle();
           return;
         }
@@ -17885,8 +17966,8 @@ class PixldocsRenderer {
           const onReadyOnce = () => {
             this.waitForCanvasScene(container, renderConfig, pageIndex).then(async () => {
               const fabricInstance = this.getFabricCanvasFromContainer(container);
-              const expectedImageCount = this.getExpectedImageCount(renderConfig, pageIndex);
-              await this.waitForCanvasImages(container, expectedImageCount);
+              const expectedImageIds = this.getExpectedImageIds(renderConfig, pageIndex);
+              await this.waitForCanvasImages(container, expectedImageIds);
               await this.waitForStableTextMetrics(container, renderConfig);
               await this.waitForCanvasScene(container, renderConfig, pageIndex);
               if (!fabricInstance) return settle();
@@ -17912,8 +17993,8 @@ class PixldocsRenderer {
         this.waitForCanvasScene(container, renderConfig, pageIndex).then(async () => {
           try {
             const fabricInstance = this.getFabricCanvasFromContainer(container);
-            const expectedImageCount = this.getExpectedImageCount(renderConfig, pageIndex);
-            await this.waitForCanvasImages(container, expectedImageCount);
+            const expectedImageIds = this.getExpectedImageIds(renderConfig, pageIndex);
+            await this.waitForCanvasImages(container, expectedImageIds);
             await this.waitForStableTextMetrics(container, renderConfig);
             await this.waitForCanvasScene(container, renderConfig, pageIndex);
             firstMountSettled = true;
@@ -18024,8 +18105,8 @@ class PixldocsRenderer {
         this.waitForCanvasScene(container, renderConfig, pageIndex).then(async () => {
           var _a, _b;
           try {
-            const expectedImageCount = this.getExpectedImageCount(renderConfig, pageIndex);
-            await this.waitForCanvasImages(container, expectedImageCount);
+            const expectedImageIds = this.getExpectedImageIds(renderConfig, pageIndex);
+            await this.waitForCanvasImages(container, expectedImageIds);
             await this.waitForStableTextMetrics(container, renderConfig);
             await this.waitForCanvasScene(container, renderConfig, pageIndex);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
@@ -19664,7 +19745,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-CrTGqxx6.js");
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await import("./vectorPdfExport-Cd--tBky.js");
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -20064,4 +20145,4 @@ export {
   buildTeaserBlurFlatKeys as y,
   collectFontDescriptorsFromConfig as z
 };
-//# sourceMappingURL=index-C3kuDISv.js.map
+//# sourceMappingURL=index-CDoyeKa8.js.map