@pixldocs/canvas-renderer 0.5.61 → 0.5.63

package/dist/index.d.ts

@@ -254,7 +254,7 @@ export declare function normalizeFontFamily(fontStack: string): string;
  * Package version banner. Bump alongside package.json so we can confirm
  * (via browser:log) that the deployed bundle matches the expected build.
  */
-export declare const PACKAGE_VERSION = "0.5.61";
+export declare const PACKAGE_VERSION = "0.5.63";
 
 export declare interface PageSettings {
     backgroundColor?: string;
@@ -443,6 +443,7 @@ export declare class PixldocsRenderer {
      * using the global __fabricCanvasRegistry (set by PageCanvas).
      */
     private getFabricCanvasFromContainer;
+    private resyncTextMetricsForSvgExport;
     private waitForStableTextMetrics;
 }
 

package/dist/index.js

@@ -12542,7 +12542,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.61";
+const PACKAGE_VERSION = "0.5.63";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -13258,6 +13258,7 @@ class PixldocsRenderer {
   captureSvgViaPreviewCanvas(config, pageIndex, canvasWidth, canvasHeight) {
     return new Promise(async (resolve, reject) => {
       const { PreviewCanvas: PreviewCanvas2 } = await Promise.resolve().then(() => PreviewCanvas$1);
+      const hasAutoShrink = configHasAutoShrinkText(config);
       const container = document.createElement("div");
       container.style.cssText = `
         position: fixed; left: -99999px; top: -99999px;
@@ -13269,28 +13270,74 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
+      let root = null;
+      let mountKey = 0;
+      let didAutoShrinkParityRemount = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
-          root.unmount();
+          root == null ? void 0 : root.unmount();
         } catch {
         }
         container.remove();
       };
+      const remountForAutoShrinkParity = async () => {
+        didAutoShrinkParityRemount = true;
+        mountKey += 1;
+        try {
+          clearMeasurementCache();
+        } catch {
+        }
+        try {
+          clearFabricCharCache();
+        } catch {
+        }
+        try {
+          root == null ? void 0 : root.unmount();
+        } catch {
+        }
+        root = createRoot(container);
+        await new Promise((settle) => {
+          const onReadyOnce = () => {
+            this.waitForCanvasScene(container, config, pageIndex).then(async () => {
+              const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+              await this.waitForCanvasImages(container, expectedImageCount);
+              await this.waitForStableTextMetrics(container, config);
+              await this.waitForCanvasScene(container, config, pageIndex);
+              settle();
+            }).catch(() => settle());
+          };
+          root.render(
+            createElement(PreviewCanvas2, {
+              key: `svg-auto-shrink-remount-${mountKey}`,
+              config,
+              pageIndex,
+              zoom: 1,
+              absoluteZoom: true,
+              skipFontReadyWait: false,
+              onReady: onReadyOnce
+            })
+          );
+        });
+      };
       const onReady = () => {
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           var _a, _b;
           try {
+            const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+            await this.waitForCanvasImages(container, expectedImageCount);
+            await this.waitForStableTextMetrics(container, config);
+            await this.waitForCanvasScene(container, config, pageIndex);
+            if (hasAutoShrink && !didAutoShrinkParityRemount) {
+              console.log("[canvas-renderer][svg-parity] remounting auto-shrink text before PDF SVG capture");
+              await remountForAutoShrinkParity();
+            }
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             if (!fabricInstance) {
               cleanup();
               reject(new Error("No Fabric canvas instance found for SVG capture"));
               return;
             }
-            const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
-            await this.waitForCanvasImages(container, expectedImageCount);
-            await this.waitForStableTextMetrics(container, config);
-            await this.waitForCanvasScene(container, config, pageIndex);
             const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
             const prevRetina = fabricInstance.enableRetinaScaling;
@@ -13303,6 +13350,7 @@ class PixldocsRenderer {
               { width: canvasWidth, height: canvasHeight },
               { cssOnly: false, backstoreOnly: false }
             );
+            this.resyncTextMetricsForSvgExport(fabricInstance);
             const rawSvgString = fabricInstance.toSVG();
             const svgString = this.normalizeSvgDimensions(
               rawSvgString,
@@ -13333,7 +13381,7 @@ class PixldocsRenderer {
           }
         });
       };
-      const root = createRoot(container);
+      root = createRoot(container);
       root.render(
         createElement(PreviewCanvas2, {
           config,
@@ -13413,6 +13461,59 @@ class PixldocsRenderer {
     }
     return null;
   }
+  resyncTextMetricsForSvgExport(fabricInstance) {
+    if (typeof document === "undefined" || !(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
+    const ctx = document.createElement("canvas").getContext("2d");
+    if (!ctx) return;
+    const syncTextbox = (textbox) => {
+      const tb = textbox;
+      const rawLines = tb._textLines ?? textbox.textLines ?? [];
+      if (!Array.isArray(rawLines) || rawLines.length === 0) return;
+      const nextCharBounds = [];
+      const nextLineWidths = [];
+      rawLines.forEach((rawLine, lineIndex) => {
+        const graphemes = Array.isArray(rawLine) ? rawLine.map((part) => String(part ?? "")) : Array.from(String(rawLine ?? ""));
+        const bounds = [];
+        let left = 0;
+        graphemes.forEach((grapheme, charIndex) => {
+          var _a, _b, _c, _d, _e, _f;
+          const fontSize = Number(((_a = tb.getValueOfPropertyAt) == null ? void 0 : _a.call(tb, lineIndex, charIndex, "fontSize")) ?? textbox.fontSize ?? 16);
+          const fontStyle = String(((_b = tb.getValueOfPropertyAt) == null ? void 0 : _b.call(tb, lineIndex, charIndex, "fontStyle")) ?? textbox.fontStyle ?? "normal");
+          const fontWeight = String(((_c = tb.getValueOfPropertyAt) == null ? void 0 : _c.call(tb, lineIndex, charIndex, "fontWeight")) ?? textbox.fontWeight ?? "400");
+          const fontFamily = String(((_d = tb.getValueOfPropertyAt) == null ? void 0 : _d.call(tb, lineIndex, charIndex, "fontFamily")) ?? textbox.fontFamily ?? "sans-serif");
+          const charSpacing = Number(((_e = tb.getValueOfPropertyAt) == null ? void 0 : _e.call(tb, lineIndex, charIndex, "charSpacing")) ?? textbox.charSpacing ?? 0);
+          const deltaY = Number(((_f = tb.getValueOfPropertyAt) == null ? void 0 : _f.call(tb, lineIndex, charIndex, "deltaY")) ?? 0);
+          ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
+          const charWidth = Math.max(0, ctx.measureText(grapheme).width);
+          let kernedWidth = charWidth;
+          const previous = charIndex > 0 ? graphemes[charIndex - 1] : "";
+          if (previous) {
+            const pairWidth = ctx.measureText(previous + grapheme).width;
+            const previousWidth = ctx.measureText(previous).width;
+            if (Number.isFinite(pairWidth) && Number.isFinite(previousWidth)) {
+              kernedWidth = Math.max(0, pairWidth - previousWidth);
+            }
+          }
+          if (charIndex < graphemes.length - 1 && charSpacing) {
+            kernedWidth += charSpacing / 1e3 * fontSize;
+          }
+          bounds[charIndex] = { left, width: charWidth, kernedWidth, height: fontSize, deltaY };
+          left += kernedWidth;
+        });
+        bounds[graphemes.length] = { left, width: 0, kernedWidth: 0, height: Number(textbox.fontSize ?? 16), deltaY: 0 };
+        nextCharBounds[lineIndex] = bounds;
+        nextLineWidths[lineIndex] = Math.max(0, left);
+      });
+      tb.__charBounds = nextCharBounds;
+      tb.__lineWidths = nextLineWidths;
+      textbox.dirty = true;
+    };
+    const visit = (obj) => {
+      if (obj instanceof fabric.Textbox) syncTextbox(obj);
+      else if (obj instanceof fabric.Group) obj.getObjects().forEach(visit);
+    };
+    fabricInstance.getObjects().forEach(visit);
+  }
   async waitForStableTextMetrics(container, config) {
     var _a, _b, _c;
     if (typeof document !== "undefined") {