@pixldocs/canvas-renderer 0.5.9 → 0.5.11

package/dist/index.d.ts

@@ -387,6 +387,7 @@ export declare class PixldocsRenderer {
      * using the global __fabricCanvasRegistry (set by PageCanvas).
      */
     private getFabricCanvasFromContainer;
+    private waitForStableTextMetrics;
 }
 
 export declare interface RendererConfig {

package/dist/index.js

@@ -2671,10 +2671,12 @@ const waitForFontsReady = async () => {
   if (!document.fonts) return;
   await document.fonts.ready;
 };
+const DEFAULT_FONT_CHECK_TIMEOUT_MS = 3500;
+const FONT_CHECK_POLL_MS = 60;
 const waitUntilFontsAvailable = async (fontFamilies, options) => {
   if (!document.fonts || fontFamilies.length === 0) return;
-  const timeoutMs = options == null ? void 0 : options.timeoutMs;
-  const pollMs = options == null ? void 0 : options.pollIntervalMs;
+  const timeoutMs = (options == null ? void 0 : options.timeoutMs) ?? DEFAULT_FONT_CHECK_TIMEOUT_MS;
+  const pollMs = (options == null ? void 0 : options.pollIntervalMs) ?? FONT_CHECK_POLL_MS;
   const deadline = Date.now() + timeoutMs;
   const check = () => fontFamilies.every(
     (f) => document.fonts.check(`16px "${f}"`) && document.fonts.check(`bold 16px "${f}"`)
@@ -12318,16 +12320,17 @@ class PixldocsRenderer {
       };
       const onReady = () => {
         const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
-        this.waitForCanvasImages(container, expectedImageCount).then(() => {
+        this.waitForCanvasImages(container, expectedImageCount).then(async () => {
           try {
+            const fabricInstance = this.getFabricCanvasFromContainer(container);
+            await this.waitForStableTextMetrics(container, config);
             const fabricCanvas = container.querySelector("canvas.upper-canvas, canvas");
-            if (!fabricCanvas) {
+            const sourceCanvas = (fabricInstance == null ? void 0 : fabricInstance.lowerCanvasEl) || container.querySelector("canvas.lower-canvas") || fabricCanvas;
+            if (!sourceCanvas) {
               cleanup();
               reject(new Error("No canvas element found after render"));
               return;
             }
-            const lowerCanvas = container.querySelector("canvas.lower-canvas");
-            const sourceCanvas = lowerCanvas || fabricCanvas;
             const exportCanvas = document.createElement("canvas");
             exportCanvas.width = sourceCanvas.width;
             exportCanvas.height = sourceCanvas.height;
@@ -12397,7 +12400,7 @@ class PixldocsRenderer {
       };
       const onReady = () => {
         const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
-        this.waitForCanvasImages(container, expectedImageCount).then(() => {
+        this.waitForCanvasImages(container, expectedImageCount).then(async () => {
           var _a, _b;
           try {
             const fabricInstance = this.getFabricCanvasFromContainer(container);
@@ -12406,6 +12409,7 @@ class PixldocsRenderer {
               reject(new Error("No Fabric canvas instance found for SVG capture"));
               return;
             }
+            await this.waitForStableTextMetrics(container, config);
             const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
             const prevRetina = fabricInstance.enableRetinaScaling;
@@ -12527,6 +12531,70 @@ class PixldocsRenderer {
     }
     return null;
   }
+  async waitForStableTextMetrics(container, config) {
+    var _a;
+    if (typeof document !== "undefined") {
+      await ensureFontsForResolvedConfig(config);
+      await ((_a = document.fonts) == null ? void 0 : _a.ready);
+      const fontFamilies = [...collectFontsFromConfig(config)].filter(Boolean);
+      if (fontFamilies.length > 0) {
+        await waitUntilFontsAvailable(fontFamilies, { timeoutMs: 4e3, pollIntervalMs: 50 });
+      }
+    }
+    const fabricInstance = this.getFabricCanvasFromContainer(container);
+    if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
+    const waitForPaint = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+    const clearTextMetricCaches = () => {
+      clearFabricCharCache();
+      clearMeasurementCache();
+    };
+    const reflowTextboxes = () => {
+      var _a2, _b, _c;
+      const walk = (obj) => {
+        var _a3, _b2, _c2, _d;
+        if (!obj) return;
+        const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+        if (children.length) children.forEach(walk);
+        const isTextObject = typeof obj.text === "string" && typeof obj.initDimensions === "function" && (obj.type === "textbox" || obj.type === "text" || obj.type === "i-text" || obj.isEditing !== void 0);
+        if (isTextObject) {
+          const saved = {
+            width: obj.width,
+            scaleX: obj.scaleX,
+            scaleY: obj.scaleY
+          };
+          (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
+          obj.__charBounds = [];
+          obj.__lineWidths = [];
+          obj.__lineHeights = [];
+          obj._textLines = [];
+          obj.textLines = [];
+          obj.dirty = true;
+          obj.initDimensions();
+          (_b2 = obj.set) == null ? void 0 : _b2.call(obj, {
+            width: saved.width,
+            scaleX: saved.scaleX,
+            scaleY: saved.scaleY,
+            dirty: true
+          });
+          (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
+          (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
+        }
+      };
+      fabricInstance.getObjects().forEach(walk);
+      (_a2 = fabricInstance.calcOffset) == null ? void 0 : _a2.call(fabricInstance);
+      (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
+      (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
+    };
+    clearTextMetricCaches();
+    await waitForPaint();
+    reflowTextboxes();
+    await waitForPaint();
+    clearTextMetricCaches();
+    reflowTextboxes();
+    await waitForPaint();
+    reflowTextboxes();
+    await waitForPaint();
+  }
 }
 const FONT_WEIGHT_LABELS = {
   300: "Light",