@pixldocs/canvas-renderer 0.5.63 → 0.5.65

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.63";
+export declare const PACKAGE_VERSION = "0.5.65";
 
 export declare interface PageSettings {
     backgroundColor?: string;
@@ -443,7 +443,6 @@ 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.63";
+const PACKAGE_VERSION = "0.5.65";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -13272,7 +13272,7 @@ class PixldocsRenderer {
       }, 3e4);
       let root = null;
       let mountKey = 0;
-      let didAutoShrinkParityRemount = false;
+      let didPreviewParityRemount = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -13281,8 +13281,23 @@ class PixldocsRenderer {
         }
         container.remove();
       };
-      const remountForAutoShrinkParity = async () => {
-        didAutoShrinkParityRemount = true;
+      const mountPreview = (readyHandler) => {
+        root = createRoot(container);
+        root.render(
+          createElement(PreviewCanvas2, {
+            key: `svg-capture-${mountKey}`,
+            config,
+            pageIndex,
+            zoom: 1,
+            absoluteZoom: true,
+            skipFontReadyWait: false,
+            onReady: readyHandler
+          })
+        );
+      };
+      const remountForPreviewParity = async () => {
+        if (didPreviewParityRemount) return;
+        didPreviewParityRemount = true;
         mountKey += 1;
         try {
           clearMeasurementCache();
@@ -13296,9 +13311,8 @@ class PixldocsRenderer {
           root == null ? void 0 : root.unmount();
         } catch {
         }
-        root = createRoot(container);
         await new Promise((settle) => {
-          const onReadyOnce = () => {
+          mountPreview(() => {
             this.waitForCanvasScene(container, config, pageIndex).then(async () => {
               const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
               await this.waitForCanvasImages(container, expectedImageCount);
@@ -13306,18 +13320,7 @@ class PixldocsRenderer {
               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 = () => {
@@ -13328,9 +13331,9 @@ class PixldocsRenderer {
             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();
+            if (hasAutoShrink && !didPreviewParityRemount) {
+              console.log("[canvas-renderer][svg-parity] remounting once to match PixldocsPreview auto-shrink stabilization");
+              await remountForPreviewParity();
             }
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             if (!fabricInstance) {
@@ -13350,7 +13353,6 @@ class PixldocsRenderer {
               { width: canvasWidth, height: canvasHeight },
               { cssOnly: false, backstoreOnly: false }
             );
-            this.resyncTextMetricsForSvgExport(fabricInstance);
             const rawSvgString = fabricInstance.toSVG();
             const svgString = this.normalizeSvgDimensions(
               rawSvgString,
@@ -13381,18 +13383,7 @@ class PixldocsRenderer {
           }
         });
       };
-      root = createRoot(container);
-      root.render(
-        createElement(PreviewCanvas2, {
-          config,
-          pageIndex,
-          zoom: 1,
-          // 1:1 — no UI scaling for SVG capture
-          absoluteZoom: true,
-          skipFontReadyWait: false,
-          onReady
-        })
-      );
+      mountPreview(onReady);
     });
   }
   /**
@@ -13461,59 +13452,6 @@ 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") {