@pixldocs/canvas-renderer 0.5.62 → 0.5.64

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.62";
+export declare const PACKAGE_VERSION = "0.5.64";
 
 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.62";
+const PACKAGE_VERSION = "0.5.64";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -13269,10 +13269,11 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
+      let root = null;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
-          root.unmount();
+          root == null ? void 0 : root.unmount();
         } catch {
         }
         container.remove();
@@ -13281,16 +13282,16 @@ class PixldocsRenderer {
         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);
             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,7 +13304,6 @@ class PixldocsRenderer {
               { width: canvasWidth, height: canvasHeight },
               { cssOnly: false, backstoreOnly: false }
             );
-            this.resyncTextMetricsForSvgExport(fabricInstance);
             const rawSvgString = fabricInstance.toSVG();
             const svgString = this.normalizeSvgDimensions(
               rawSvgString,
@@ -13334,7 +13334,7 @@ class PixldocsRenderer {
           }
         });
       };
-      const root = createRoot(container);
+      root = createRoot(container);
       root.render(
         createElement(PreviewCanvas2, {
           config,
@@ -13414,59 +13414,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") {