@pixldocs/canvas-renderer 0.3.12 → 0.3.14

package/dist/index.d.ts

@@ -36,6 +36,8 @@ export declare interface CanvasSize {
     height: number;
 }
 
+export declare function collectFontDescriptorsFromConfig(config: TemplateConfig): FontDescriptor[];
+
 /**
  * Collect all font families used in a template config.
  */
@@ -52,6 +54,35 @@ export declare interface DynamicField {
     [key: string]: any;
 }
 
+/**
+ * Ensure all fonts required by a fully-resolved TemplateConfig are loaded
+ * and available to Fabric/Canvas before rendering.
+ *
+ * This is the **single API** consumers (and the renderer internally) should
+ * call to guarantee font parity with EC2 `/render-from-form`.
+ *
+ * It:
+ * 1. Walks ALL text nodes (including clones/repeatables) collecting
+ *    fontFamily + fontWeight + fontStyle.
+ * 2. Loads each unique family via Google Fonts CSS v1 (idempotent).
+ * 3. Explicitly loads each weight+style combo via `document.fonts.load()`.
+ * 4. Awaits `document.fonts.ready` so Fabric never paints with fallback faces.
+ *
+ * Idempotent — safe to call multiple times for the same config.
+ */
+export declare function ensureFontsForResolvedConfig(config: TemplateConfig): Promise<void>;
+
+/**
+ * Walk a fully-resolved TemplateConfig and collect every unique
+ * { fontFamily, fontWeight, fontStyle } tuple from all text nodes
+ * (including clones, repeatable children, and per-character Fabric styles).
+ */
+export declare interface FontDescriptor {
+    family: string;
+    weight: number | string;
+    style: string;
+}
+
 export { InferredSection }
 
 /**

package/dist/index.js

@@ -10369,6 +10369,165 @@ function paintRepeatableSections(config, repeatableSections) {
     }
   }
 }
+function normalizeFontFamily(fontStack) {
+  const first = fontStack.split(",")[0].trim();
+  return first.replace(/^['"]|['"]$/g, "");
+}
+const loadedFonts = /* @__PURE__ */ new Set();
+const loadingPromises = /* @__PURE__ */ new Map();
+async function loadGoogleFontCSS(rawFontFamily) {
+  if (!rawFontFamily || typeof document === "undefined") return;
+  const fontFamily = normalizeFontFamily(rawFontFamily);
+  if (!fontFamily) return;
+  if (loadedFonts.has(fontFamily)) return;
+  const existing = loadingPromises.get(fontFamily);
+  if (existing) return existing;
+  const promise = (async () => {
+    var _a;
+    try {
+      if ((_a = document.fonts) == null ? void 0 : _a.check(`16px "${fontFamily}"`)) {
+        loadedFonts.add(fontFamily);
+        return;
+      }
+      const encoded = encodeURIComponent(fontFamily);
+      const url = `https://fonts.googleapis.com/css?family=${encoded}:300,400,500,600,700&display=swap`;
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = url;
+      link.crossOrigin = "anonymous";
+      await new Promise((resolve, reject) => {
+        link.onload = () => resolve();
+        link.onerror = () => reject(new Error(`Failed to load font: ${fontFamily}`));
+        document.head.appendChild(link);
+      });
+      if (document.fonts) {
+        await document.fonts.load(`16px "${fontFamily}"`);
+        await document.fonts.ready;
+      }
+      loadedFonts.add(fontFamily);
+    } catch (e) {
+      console.warn(`[@pixldocs/canvas-renderer] Font load failed: ${fontFamily}`, e);
+    }
+  })();
+  loadingPromises.set(fontFamily, promise);
+  await promise;
+  loadingPromises.delete(fontFamily);
+}
+function collectFontsFromConfig(config) {
+  var _a;
+  const fonts = /* @__PURE__ */ new Set();
+  fonts.add("Open Sans");
+  fonts.add("Hind");
+  function walk(nodes) {
+    var _a2;
+    if (!nodes) return;
+    for (const node of nodes) {
+      if (node.fontFamily) fonts.add(normalizeFontFamily(node.fontFamily));
+      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) fonts.add(normalizeFontFamily(node.smartProps.fontFamily));
+      if (node.styles && Array.isArray(node.styles)) {
+        for (const lineStyle of node.styles) {
+          if (lineStyle && typeof lineStyle === "object") {
+            for (const charStyle of Object.values(lineStyle)) {
+              if (charStyle == null ? void 0 : charStyle.fontFamily) fonts.add(normalizeFontFamily(charStyle.fontFamily));
+            }
+          }
+        }
+      }
+      if (node.children) walk(node.children);
+    }
+  }
+  for (const page of config.pages || []) {
+    walk(page.children || []);
+  }
+  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
+    for (const def of Object.values(config.themeConfig.variables)) {
+      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
+        if (def.label && /font/i.test(def.label)) {
+          fonts.add(normalizeFontFamily(def.value));
+        }
+      }
+    }
+  }
+  return fonts;
+}
+function collectFontDescriptorsFromConfig(config) {
+  var _a;
+  const seen = /* @__PURE__ */ new Set();
+  const descriptors = [];
+  function add(family, weight, style) {
+    const f = normalizeFontFamily(family);
+    if (!f) return;
+    const w = weight ?? 400;
+    const s = style ?? "normal";
+    const key = `${f}|${w}|${s}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    descriptors.push({ family: f, weight: w, style: s });
+  }
+  function walk(nodes) {
+    var _a2;
+    if (!nodes) return;
+    for (const node of nodes) {
+      if (node.fontFamily) {
+        add(node.fontFamily, node.fontWeight, node.fontStyle);
+        if (node.type === "text") {
+          for (const w of [300, 400, 500, 600, 700]) {
+            add(node.fontFamily, w, node.fontStyle);
+          }
+        }
+      }
+      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) {
+        add(node.smartProps.fontFamily, node.smartProps.fontWeight, node.smartProps.fontStyle);
+      }
+      if (node.styles) {
+        const styleEntries = Array.isArray(node.styles) ? node.styles : Object.values(node.styles);
+        for (const lineStyle of styleEntries) {
+          if (lineStyle && typeof lineStyle === "object") {
+            for (const charStyle of Object.values(lineStyle)) {
+              if (charStyle == null ? void 0 : charStyle.fontFamily) {
+                add(charStyle.fontFamily, charStyle.fontWeight, charStyle.fontStyle);
+              }
+            }
+          }
+        }
+      }
+      if (node.children) walk(node.children);
+    }
+  }
+  add("Open Sans", 400, "normal");
+  add("Hind", 400, "normal");
+  add("Hind", 700, "normal");
+  for (const page of config.pages || []) {
+    walk(page.children || []);
+  }
+  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
+    for (const def of Object.values(config.themeConfig.variables)) {
+      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
+        if (def.label && /font/i.test(def.label)) {
+          add(def.value);
+        }
+      }
+    }
+  }
+  return descriptors;
+}
+async function ensureFontsForResolvedConfig(config) {
+  if (typeof document === "undefined") return;
+  const descriptors = collectFontDescriptorsFromConfig(config);
+  const families = new Set(descriptors.map((d) => d.family));
+  await Promise.all([...families].map((f) => loadGoogleFontCSS(f)));
+  if (document.fonts) {
+    const loadPromises = descriptors.map((d) => {
+      const stylePrefix = d.style === "italic" ? "italic " : "";
+      const weightStr = String(d.weight);
+      const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
+      return document.fonts.load(spec).catch(() => {
+      });
+    });
+    await Promise.all(loadPromises);
+    await document.fonts.ready;
+  }
+}
 function PixldocsPreview(props) {
   const {
     pageIndex = 0,
@@ -10386,6 +10545,7 @@ function PixldocsPreview(props) {
   }, [imageProxyUrl]);
   const [resolvedConfig, setResolvedConfig] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [fontsReady, setFontsReady] = useState(false);
   const isResolveMode = !("config" in props && props.config);
   useEffect(() => {
     if (!isResolveMode) {
@@ -10406,7 +10566,17 @@ function PixldocsPreview(props) {
     }).then((resolved) => {
       if (!cancelled) {
         setResolvedConfig(resolved.config);
-        setIsLoading(false);
+        ensureFontsForResolvedConfig(resolved.config).then(() => {
+          if (!cancelled) {
+            setFontsReady(true);
+            setIsLoading(false);
+          }
+        }).catch(() => {
+          if (!cancelled) {
+            setFontsReady(true);
+            setIsLoading(false);
+          }
+        });
       }
     }).catch((err) => {
       if (!cancelled) {
@@ -10426,6 +10596,11 @@ function PixldocsPreview(props) {
     isResolveMode ? props.themeId : void 0
   ]);
   const config = isResolveMode ? resolvedConfig : props.config;
+  useEffect(() => {
+    if (isResolveMode || !config) return;
+    setFontsReady(false);
+    ensureFontsForResolvedConfig(config).then(() => setFontsReady(true)).catch(() => setFontsReady(true));
+  }, [isResolveMode, config]);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
@@ -10442,77 +10617,6 @@ function PixldocsPreview(props) {
     }
   ) });
 }
-function normalizeFontFamily(fontStack) {
-  const first = fontStack.split(",")[0].trim();
-  return first.replace(/^['"]|['"]$/g, "");
-}
-const loadedFonts = /* @__PURE__ */ new Set();
-const loadingPromises = /* @__PURE__ */ new Map();
-async function loadGoogleFontCSS(rawFontFamily) {
-  if (!rawFontFamily || typeof document === "undefined") return;
-  const fontFamily = normalizeFontFamily(rawFontFamily);
-  if (!fontFamily) return;
-  if (loadedFonts.has(fontFamily)) return;
-  const existing = loadingPromises.get(fontFamily);
-  if (existing) return existing;
-  const promise = (async () => {
-    var _a;
-    try {
-      if ((_a = document.fonts) == null ? void 0 : _a.check(`16px "${fontFamily}"`)) {
-        loadedFonts.add(fontFamily);
-        return;
-      }
-      const encoded = encodeURIComponent(fontFamily);
-      const url = `https://fonts.googleapis.com/css?family=${encoded}:300,400,500,600,700&display=swap`;
-      const link = document.createElement("link");
-      link.rel = "stylesheet";
-      link.href = url;
-      link.crossOrigin = "anonymous";
-      await new Promise((resolve, reject) => {
-        link.onload = () => resolve();
-        link.onerror = () => reject(new Error(`Failed to load font: ${fontFamily}`));
-        document.head.appendChild(link);
-      });
-      if (document.fonts) {
-        await document.fonts.load(`16px "${fontFamily}"`);
-        await document.fonts.ready;
-      }
-      loadedFonts.add(fontFamily);
-    } catch (e) {
-      console.warn(`[@pixldocs/canvas-renderer] Font load failed: ${fontFamily}`, e);
-    }
-  })();
-  loadingPromises.set(fontFamily, promise);
-  await promise;
-  loadingPromises.delete(fontFamily);
-}
-function collectFontsFromConfig(config) {
-  var _a;
-  const fonts = /* @__PURE__ */ new Set();
-  fonts.add("Open Sans");
-  function walk(nodes) {
-    var _a2;
-    if (!nodes) return;
-    for (const node of nodes) {
-      if (node.fontFamily) fonts.add(normalizeFontFamily(node.fontFamily));
-      if ((_a2 = node.smartProps) == null ? void 0 : _a2.fontFamily) fonts.add(normalizeFontFamily(node.smartProps.fontFamily));
-      if (node.children) walk(node.children);
-    }
-  }
-  for (const page of config.pages || []) {
-    walk(page.children || []);
-  }
-  if ((_a = config.themeConfig) == null ? void 0 : _a.variables) {
-    for (const def of Object.values(config.themeConfig.variables)) {
-      if (def.value && typeof def.value === "string" && !def.value.startsWith("#") && !def.value.startsWith("rgb")) {
-        if (def.label && /font/i.test(def.label)) {
-          fonts.add(normalizeFontFamily(def.value));
-        }
-      }
-    }
-  }
-  return fonts;
-}
 class PixldocsRenderer {
   constructor(config) {
     __publicField(this, "config");
@@ -10533,8 +10637,7 @@ class PixldocsRenderer {
     if (!page) {
       throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
     }
-    const fonts = collectFontsFromConfig(templateConfig);
-    await Promise.all([...fonts].map((f) => loadGoogleFontCSS(f)));
+    await ensureFontsForResolvedConfig(templateConfig);
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
     const dataUrl = await this.renderPageViaPreviewCanvas(
@@ -10762,7 +10865,9 @@ export {
   PixldocsPreview,
   PixldocsRenderer,
   applyThemeToConfig,
+  collectFontDescriptorsFromConfig,
   collectFontsFromConfig,
+  ensureFontsForResolvedConfig,
   loadGoogleFontCSS,
   normalizeFontFamily,
   resolveFromForm,