@pixldocs/canvas-renderer 0.5.61 → 0.5.62

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.62";
 
 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.62";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -13303,6 +13303,7 @@ class PixldocsRenderer {
               { width: canvasWidth, height: canvasHeight },
               { cssOnly: false, backstoreOnly: false }
             );
+            this.resyncTextMetricsForSvgExport(fabricInstance);
             const rawSvgString = fabricInstance.toSVG();
             const svgString = this.normalizeSvgDimensions(
               rawSvgString,
@@ -13413,6 +13414,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") {