@pixldocs/canvas-renderer 0.5.95 → 0.5.97

package/dist/index.cjs

@@ -415,33 +415,6 @@ function measureTextHeight(element) {
     return fallbackEstimateHeight(element);
   }
 }
-function getMinTextWidth(element) {
-  if (element.type !== "text" || !element.text) {
-    return typeof element.width === "number" ? element.width : 200;
-  }
-  try {
-    const textbox = new fabric__namespace.Textbox(element.text, {
-      width: 1e4,
-      fontSize: element.fontSize || 16,
-      fontFamily: element.fontFamily || "Open Sans",
-      fontWeight: element.fontWeight || 400,
-      fontStyle: element.fontStyle || "normal",
-      lineHeight: element.lineHeight || 1.2,
-      charSpacing: element.charSpacing || 0,
-      splitByGrapheme: element.splitByGrapheme ?? element.wordWrap === "break-word",
-      left: 0,
-      top: 0
-    });
-    textbox.initDimensions();
-    const lineWidths = textbox.__lineWidths;
-    if (lineWidths && lineWidths.length > 0) {
-      const maxLine = Math.max(...lineWidths);
-      return Math.ceil(maxLine) + 2;
-    }
-  } catch (_) {
-  }
-  return typeof element.width === "number" ? element.width : 200;
-}
 function fallbackEstimateHeight(element) {
   if (element.type !== "text" || !element.text) {
     return element.height || 20;
@@ -2797,11 +2770,22 @@ const waitUntilFontsAvailable = async (fontFamilies, options) => {
   }
 };
 const clearFabricCharCache = () => {
+  var _a;
   const fabricAny = fabric__namespace;
+  if (fabricAny.cache && typeof fabricAny.cache.clearFontCache === "function") {
+    fabricAny.cache.clearFontCache();
+  }
+  if (((_a = fabricAny.cache) == null ? void 0 : _a.charWidthsCache) instanceof Map) {
+    fabricAny.cache.charWidthsCache.clear();
+  }
   if (typeof fabricAny.charWidthsCache === "object" && fabricAny.charWidthsCache !== null) {
-    Object.keys(fabricAny.charWidthsCache).forEach((key) => {
-      delete fabricAny.charWidthsCache[key];
-    });
+    if (fabricAny.charWidthsCache instanceof Map) {
+      fabricAny.charWidthsCache.clear();
+    } else {
+      Object.keys(fabricAny.charWidthsCache).forEach((key) => {
+        delete fabricAny.charWidthsCache[key];
+      });
+    }
   }
   if (typeof fabric__namespace.util !== "undefined" && typeof fabric__namespace.util.clearFabricFontCache === "function") {
     fabric__namespace.util.clearFabricFontCache();
@@ -5576,6 +5560,8 @@ function createText(element) {
   const targetScaleY = element.scaleY ?? 1;
   const textbox = new fabric__namespace.Textbox(text, {
     width: targetWidth,
+    minWidth: 1,
+    dynamicMinWidth: 0,
     scaleX: targetScaleX,
     scaleY: targetScaleY,
     fontSize,
@@ -5596,6 +5582,8 @@ function createText(element) {
   textbox.initDimensions();
   textbox.set({
     width: targetWidth,
+    minWidth: 1,
+    dynamicMinWidth: 0,
     scaleX: targetScaleX,
     scaleY: targetScaleY
   });
@@ -5605,6 +5593,7 @@ function createText(element) {
   const scaleYAfterSet = textbox.scaleY ?? 1;
   if (Math.abs(widthAfterSet - targetWidth) > 0.01 || Math.abs(scaleXAfterSet - targetScaleX) > 0.01 || Math.abs(scaleYAfterSet - targetScaleY) > 0.01) {
     textbox.width = targetWidth;
+    textbox.dynamicMinWidth = 0;
     textbox.scaleX = targetScaleX;
     textbox.scaleY = targetScaleY;
     textbox.setCoords();
@@ -6451,6 +6440,48 @@ const PageCanvas = react.forwardRef(
       if (!canvas2) return false;
       return !!canvas2._currentTransform || !!canvas2.__isUserTransforming;
     }, []);
+    const reflowTextboxesFromCurrentElements = react.useCallback((canvas2) => {
+      const elementById = new Map(elementsRef.current.map((el) => [el.id, el]));
+      let didReflow = false;
+      const reflowObject = (obj) => {
+        var _a;
+        if (obj instanceof fabric__namespace.Group) {
+          (_a = obj._objects) == null ? void 0 : _a.forEach(reflowObject);
+          obj.dirty = true;
+          return;
+        }
+        if (!(obj instanceof fabric__namespace.Textbox)) return;
+        const id = getObjectId(obj);
+        const element = id ? elementById.get(id) : void 0;
+        if (!element) return;
+        const targetWidth = Math.max(1, Number(element.width) > 0 ? Number(element.width) : Number(obj.width ?? 200));
+        const overflowPolicy = element.overflowPolicy || "grow-and-push";
+        const splitByGrapheme = overflowPolicy === "auto-shrink" ? false : element.splitByGrapheme ?? element.wordWrap === "break-word";
+        obj.set({
+          width: targetWidth,
+          minWidth: 1,
+          dynamicMinWidth: 0,
+          text: element.text || "Text",
+          fontSize: element.fontSize || 16,
+          fontFamily: element.fontFamily || "Open Sans",
+          fontWeight: element.fontWeight || 400,
+          fontStyle: element.fontStyle || "normal",
+          lineHeight: element.lineHeight || 1.2,
+          charSpacing: element.charSpacing || 0,
+          splitByGrapheme
+        });
+        obj.initDimensions();
+        if (Math.abs((obj.width ?? 0) - targetWidth) > 0.01) {
+          obj.width = targetWidth;
+        }
+        obj.dynamicMinWidth = 0;
+        obj.setCoords();
+        obj.dirty = true;
+        didReflow = true;
+      };
+      canvas2.getObjects().forEach(reflowObject);
+      if (didReflow) canvas2.requestRenderAll();
+    }, []);
     react.useEffect(() => {
       if (!canvasElRef.current) return;
       const zoom2 = workspaceZoom || 1;
@@ -6531,6 +6562,8 @@ const PageCanvas = react.forwardRef(
       };
       initFonts();
       const persistTextDimensionsAfterFontLoad = (canvas2) => {
+        reflowTextboxesFromCurrentElements(canvas2);
+        if (isPreviewMode) return;
         const state = useEditorStore.getState();
         const page = state.canvas.pages.find((p) => p.id === pageId);
         if (!page) return;
@@ -9127,10 +9160,11 @@ const PageCanvas = react.forwardRef(
             text = result;
           }
         }
-        const minWidth = getMinTextWidth(element);
-        const textboxWidth = overflowPolicy === "auto-shrink" ? fixedWidth : Math.max(storedWidth, minWidth);
+        const textboxWidth = fixedWidth;
         obj.set({
           width: textboxWidth,
+          minWidth: 1,
+          dynamicMinWidth: 0,
           fontSize,
           fontFamily: element.fontFamily || "Open Sans",
           fill: element.fill || "#1a1a1a",
@@ -9150,6 +9184,7 @@ const PageCanvas = react.forwardRef(
         if (Math.abs((obj.width ?? 0) - textboxWidth) > 0.01) {
           obj.width = textboxWidth;
         }
+        obj.dynamicMinWidth = 0;
         obj.setCoords();
         obj.dirty = true;
         try {
@@ -12938,7 +12973,6 @@ function PixldocsPreview(props) {
   const [isLoading, setIsLoading] = react.useState(false);
   const [fontsReady, setFontsReady] = react.useState(false);
   const [canvasSettled, setCanvasSettled] = react.useState(false);
-  const [stabilizationPass, setStabilizationPass] = react.useState(0);
   const isResolveMode = !("config" in props && props.config);
   react.useEffect(() => {
     if (!isResolveMode) {
@@ -13009,21 +13043,16 @@ function PixldocsPreview(props) {
     isResolveMode ? props.themeId : void 0
   ]);
   const config = isResolveMode ? resolvedConfig : props.config;
-  const previewKey = react.useMemo(
-    () => `${pageIndex}-${stabilizationPass}`,
-    [pageIndex, stabilizationPass]
-  );
+  const previewKey = react.useMemo(() => `${pageIndex}`, [pageIndex]);
   react.useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
       setFontsReady(false);
       setCanvasSettled(false);
-      setStabilizationPass(0);
       return;
     }
     setFontsReady(false);
     setCanvasSettled(false);
-    setStabilizationPass(0);
     let cancelled = false;
     const hasAutoShrink = configHasAutoShrinkText$1(config);
     const waitMs = hasAutoShrink ? 4e3 : 1800;
@@ -13046,16 +13075,10 @@ function PixldocsPreview(props) {
     };
   }, [isResolveMode, config]);
   const handleCanvasReady = react.useCallback(() => {
-    if (stabilizationPass === 0) {
-      console.log(PREVIEW_DEBUG_PREFIX, "canvas-ready-pass", { pageIndex, stabilizationPass, action: "stabilize-again" });
-      setCanvasSettled(false);
-      setStabilizationPass(1);
-      return;
-    }
-    console.log(PREVIEW_DEBUG_PREFIX, "canvas-ready-pass", { pageIndex, stabilizationPass, action: "settled" });
+    console.log(PREVIEW_DEBUG_PREFIX, "canvas-ready", { pageIndex, action: "settled" });
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
-  }, [onReady, pageIndex, stabilizationPass]);
+  }, [onReady, pageIndex]);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
@@ -14577,6 +14600,10 @@ function getEmbeddedJsPDFFontName(fontName, weight, isItalic = false) {
 function isFontAvailable(fontName) {
   return fontName in FONT_FILES;
 }
+const registeredFamilies = /* @__PURE__ */ new Set();
+function isFamilyEmbedded(family) {
+  return registeredFamilies.has(family);
+}
 const ttfCache = /* @__PURE__ */ new Map();
 async function fetchTTFAsBase64(url) {
   const cached = ttfCache.get(url);
@@ -14649,12 +14676,133 @@ async function embedFont(pdf, fontName, weight, fontBaseUrl, isItalic = false) {
       } catch {
       }
     }
+    registeredFamilies.add(fontName);
     return true;
   } catch (e) {
     console.warn(`[pdf-fonts] Failed to embed ${fontName} w${weight}:`, e);
     return false;
   }
 }
+const googleFontNotFound = /* @__PURE__ */ new Set();
+const fontshareNotFound = /* @__PURE__ */ new Set();
+function bytesToBase64(bytes) {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+async function fetchGoogleFontTTF(fontFamily, weight, isItalic = false) {
+  const cacheKey = `gf:${fontFamily}:${weight}:${isItalic ? "i" : "n"}`;
+  if (ttfCache.has(cacheKey)) return ttfCache.get(cacheKey);
+  if (googleFontNotFound.has(fontFamily)) return null;
+  try {
+    const ital = isItalic ? "1" : "0";
+    const cssUrl = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(
+      fontFamily
+    )}:ital,wght@${ital},${weight}&display=swap`;
+    const cssRes = await fetch(cssUrl, {
+      headers: {
+        "User-Agent": "Mozilla/5.0 (Linux; U; Android 2.2; en-us) AppleWebKit/533.1 (KHTML, like Gecko)"
+      }
+    });
+    if (!cssRes.ok) {
+      if (cssRes.status === 400 || cssRes.status === 404) googleFontNotFound.add(fontFamily);
+      return null;
+    }
+    const css = await cssRes.text();
+    const urlMatch = css.match(/url\(([^)]+)\)\s+format\(['"]?truetype['"]?\)/i) || css.match(/url\(([^)]+)\)/);
+    if (!urlMatch) return null;
+    const ttfUrl = urlMatch[1].replace(/['"]/g, "");
+    const ttfRes = await fetch(ttfUrl);
+    if (!ttfRes.ok) return null;
+    const buf = await ttfRes.arrayBuffer();
+    const bytes = new Uint8Array(buf);
+    if (!isJsPdfEmbeddableTrueType(bytes)) {
+      console.warn(`[pdf-fonts] Google Fonts returned a non-TTF for ${fontFamily} (${weight}); skipping`);
+      return null;
+    }
+    const b64 = bytesToBase64(bytes);
+    ttfCache.set(cacheKey, b64);
+    return b64;
+  } catch (err) {
+    console.warn(`[pdf-fonts] fetchGoogleFontTTF failed for ${fontFamily} (${weight}):`, err);
+    return null;
+  }
+}
+async function fetchFontshareTTF(fontFamily, weight, isItalic = false) {
+  const cacheKey = `fs:${fontFamily}:${weight}:${isItalic ? "i" : "n"}`;
+  if (ttfCache.has(cacheKey)) return ttfCache.get(cacheKey);
+  if (fontshareNotFound.has(fontFamily)) return null;
+  const slug = fontFamily.trim().toLowerCase().replace(/\s+/g, "-");
+  try {
+    const styleSuffix = isItalic ? "i" : "";
+    const cssUrl = `https://api.fontshare.com/v2/css?f[]=${slug}@${weight}${styleSuffix}&display=swap`;
+    const cssRes = await fetch(cssUrl);
+    if (!cssRes.ok) {
+      if (cssRes.status === 400 || cssRes.status === 404) fontshareNotFound.add(fontFamily);
+      return null;
+    }
+    const css = await cssRes.text();
+    const ttMatch = css.match(/url\(([^)]+)\)\s+format\(['"]?truetype['"]?\)/i);
+    if (!ttMatch) {
+      fontshareNotFound.add(fontFamily);
+      return null;
+    }
+    let ttfUrl = ttMatch[1].replace(/['"]/g, "").trim();
+    if (ttfUrl.startsWith("//")) ttfUrl = `https:${ttfUrl}`;
+    const ttfRes = await fetch(ttfUrl);
+    if (!ttfRes.ok) return null;
+    const buf = await ttfRes.arrayBuffer();
+    const bytes = new Uint8Array(buf);
+    if (!isJsPdfEmbeddableTrueType(bytes)) return null;
+    const b64 = bytesToBase64(bytes);
+    ttfCache.set(cacheKey, b64);
+    return b64;
+  } catch (err) {
+    console.warn(`[pdf-fonts] fetchFontshareTTF failed for ${fontFamily} (${weight}):`, err);
+    return null;
+  }
+}
+function registerJsPdfFont(pdf, fontName, resolvedWeight, isItalic, base64) {
+  const label = FONT_WEIGHT_LABELS[resolvedWeight];
+  const italicSuffix = isItalic ? "Italic" : "";
+  const jsPdfFontName = getEmbeddedJsPDFFontName(fontName, resolvedWeight, isItalic);
+  const fileName = `${getJsPDFFontName(fontName)}-${label}${italicSuffix}.ttf`;
+  try {
+    pdf.addFileToVFS(fileName, base64);
+    pdf.addFont(fileName, jsPdfFontName, "normal");
+    if (fontName !== jsPdfFontName) {
+      try {
+        pdf.addFont(fileName, fontName, "normal");
+      } catch {
+      }
+    }
+    registeredFamilies.add(fontName);
+    return true;
+  } catch (err) {
+    console.warn(`[pdf-fonts] registerJsPdfFont failed for ${fontName}:`, err);
+    return false;
+  }
+}
+async function embedFontWithGoogleFallback(pdf, fontName, weight = 400, fontBaseUrl, isItalic = false) {
+  if (FONT_FILES[fontName]) {
+    const ok = await embedFont(pdf, fontName, weight, fontBaseUrl, isItalic);
+    if (ok) return true;
+  }
+  const resolved = resolveFontWeight(weight);
+  const fsB64 = await fetchFontshareTTF(fontName, resolved, isItalic);
+  if (fsB64) return registerJsPdfFont(pdf, fontName, resolved, isItalic, fsB64);
+  if (isItalic) {
+    const fsUpright = await fetchFontshareTTF(fontName, resolved, false);
+    if (fsUpright) return registerJsPdfFont(pdf, fontName, resolved, isItalic, fsUpright);
+  }
+  const b64 = await fetchGoogleFontTTF(fontName, resolved, isItalic);
+  if (b64) return registerJsPdfFont(pdf, fontName, resolved, isItalic, b64);
+  if (isItalic) {
+    const uprightB64 = await fetchGoogleFontTTF(fontName, resolved, false);
+    if (uprightB64) return registerJsPdfFont(pdf, fontName, resolved, isItalic, uprightB64);
+  }
+  return false;
+}
 async function embedFontsForConfig(pdf, config, fontBaseUrl) {
   const fontKeys = /* @__PURE__ */ new Set();
   const SEP = "";
@@ -14813,7 +14961,7 @@ function rewriteSvgFontsForJsPDF(svgStr) {
     const rawFf = resolveInheritedValue(el, "font-family");
     if (!rawFf) continue;
     const clean = (_a = rawFf.split(",")[0]) == null ? void 0 : _a.replace(/['"]/g, "").trim();
-    if (!isFontAvailable(clean)) continue;
+    if (!isFontAvailable(clean) && !isFamilyEmbedded(clean)) continue;
     const weightRaw = resolveInheritedValue(el, "font-weight") || "400";
     const styleRaw = resolveInheritedValue(el, "font-style") || "normal";
     const weight = resolveWeightNum(weightRaw);
@@ -14896,14 +15044,19 @@ async function embedFontsInPdf(pdf, fontFamilies, fontBaseUrl) {
   fontFamilies.add(FONT_FALLBACK_SYMBOLS);
   fontFamilies.add(FONT_FALLBACK_DEVANAGARI);
   for (const family of fontFamilies) {
-    if (!isFontAvailable(family)) {
-      console.warn(`[pdf-fonts] No TTF mapping for "${family}" — will use Helvetica fallback`);
-      continue;
-    }
-    for (const w of weights) {
+    if (isFontAvailable(family)) {
+      for (const w of weights) {
+        tasks.push(
+          embedFont(pdf, family, w, fontBaseUrl).then((ok) => {
+            if (ok) embedded.add(`${family}${w}`);
+          })
+        );
+      }
+    } else {
       tasks.push(
-        embedFont(pdf, family, w, fontBaseUrl).then((ok) => {
-          if (ok) embedded.add(`${family}${w}`);
+        embedFontWithGoogleFallback(pdf, family, 400, fontBaseUrl, false).then((ok) => {
+          if (ok) embedded.add(`${family}400`);
+          else console.warn(`[pdf-fonts] No TTF (local/Google/Fontshare) for "${family}" — will use Helvetica fallback`);
         })
       );
     }
@@ -14919,6 +15072,7 @@ const pdfFonts = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   FONT_FILES,
   FONT_WEIGHT_LABELS,
   embedFont,
+  embedFontWithGoogleFallback,
   embedFontsForConfig,
   embedFontsInPdf,
   extractFontFamiliesFromSvgs,