@pixldocs/canvas-renderer 0.5.27 → 0.5.29

package/dist/index.js

@@ -2571,6 +2571,10 @@ async function _doLoadGoogleFont(fontFamily, weights) {
     return false;
   }
 }
+const getObjectId = (obj) => obj.__docuforgeId;
+const setObjectData = (obj, id) => {
+  obj.__docuforgeId = id;
+};
 const FONTS_TO_PRELOAD = [
   "Open Sans",
   "Playfair Display",
@@ -2710,6 +2714,42 @@ const clearFabricCharCache = () => {
 };
 const clearFontCacheAndRerender = (canvas) => {
   clearFabricCharCache();
+  const logUnderlineDebug = (stage, payload) => {
+    try {
+      console.log(`[canvas-renderer][underline-debug] ${stage} ${JSON.stringify(payload)}`);
+    } catch {
+      console.log("[canvas-renderer][underline-debug]", stage, payload);
+    }
+  };
+  const collectUnderlineMetrics = (obj) => {
+    var _a, _b;
+    if (obj instanceof fabric.Textbox) {
+      if (!obj.underline) return [];
+      const lineWidths = obj.__lineWidths;
+      return [{
+        id: getObjectId(obj) ?? null,
+        text: (obj.text || "").slice(0, 120),
+        textLength: ((_a = obj.text) == null ? void 0 : _a.length) ?? 0,
+        fontFamily: obj.fontFamily,
+        fontSize: obj.fontSize,
+        fontWeight: obj.fontWeight,
+        width: obj.width ?? null,
+        height: obj.height ?? null,
+        scaleX: obj.scaleX,
+        scaleY: obj.scaleY,
+        lineCount: ((_b = obj.textLines) == null ? void 0 : _b.length) ?? 0,
+        maxLineWidth: lineWidths && lineWidths.length > 0 ? Math.max(...lineWidths) : null
+      }];
+    }
+    if (obj instanceof fabric.Group) {
+      return (obj._objects || []).flatMap((child) => collectUnderlineMetrics(child));
+    }
+    return [];
+  };
+  const beforeMetrics = canvas.getObjects().flatMap(collectUnderlineMetrics);
+  if (beforeMetrics.length > 0) {
+    logUnderlineDebug("before-rerender", beforeMetrics);
+  }
   const resetTextboxLayoutInternals = (obj) => {
     var _a;
     (_a = obj._clearCache) == null ? void 0 : _a.call(obj);
@@ -2724,7 +2764,7 @@ const clearFontCacheAndRerender = (canvas) => {
     obj.dirty = true;
   };
   const fixTextbox = (obj) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (obj instanceof fabric.Textbox) {
       const savedWidth = obj.width;
       const savedScaleX = obj.scaleX;
@@ -2737,15 +2777,35 @@ const clearFontCacheAndRerender = (canvas) => {
         obj.initDimensions();
         obj.set({ width: savedWidth, scaleX: savedScaleX, scaleY: savedScaleY, dirty: true });
       }
-      (_a = obj._clearCache) == null ? void 0 : _a.call(obj);
+      if (obj.underline) {
+        const lineWidths = obj.__lineWidths;
+        logUnderlineDebug("textbox-rerender", {
+          id: getObjectId(obj) ?? null,
+          text: (obj.text || "").slice(0, 120),
+          fontFamily: obj.fontFamily,
+          fontSize: obj.fontSize,
+          savedWidth,
+          finalWidth: obj.width ?? null,
+          finalHeight: obj.height ?? null,
+          scaleX: obj.scaleX,
+          scaleY: obj.scaleY,
+          lineCount: ((_a = obj.textLines) == null ? void 0 : _a.length) ?? 0,
+          maxLineWidth: lineWidths && lineWidths.length > 0 ? Math.max(...lineWidths) : null
+        });
+      }
+      (_b = obj._clearCache) == null ? void 0 : _b.call(obj);
       obj.setCoords();
     } else if (obj instanceof fabric.Group) {
-      (_b = obj._objects) == null ? void 0 : _b.forEach(fixTextbox);
+      (_c = obj._objects) == null ? void 0 : _c.forEach(fixTextbox);
       obj.dirty = true;
       obj.setCoords();
     }
   };
   canvas.getObjects().forEach(fixTextbox);
+  const afterMetrics = canvas.getObjects().flatMap(collectUnderlineMetrics);
+  if (afterMetrics.length > 0) {
+    logUnderlineDebug("after-rerender", afterMetrics);
+  }
   canvas.requestRenderAll();
 };
 const ensureFontLoaded = async (fontFamily) => {
@@ -2783,10 +2843,6 @@ const setupFontLoadingListener = (canvas, afterRerender) => {
   };
 };
 preloadAllFonts();
-const getObjectId = (obj) => obj.__docuforgeId;
-const setObjectData = (obj, id) => {
-  obj.__docuforgeId = id;
-};
 const svgTextCache = /* @__PURE__ */ new Map();
 const htmlImageCache = /* @__PURE__ */ new Map();
 const MAX_CACHE_ENTRIES = 200;
@@ -11844,6 +11900,21 @@ async function ensureFontsForResolvedConfig(config) {
     });
   }
 }
+const PREVIEW_DEBUG_PREFIX = "[canvas-renderer][preview-debug]";
+function countUnderlinedNodes(config) {
+  var _a;
+  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return 0;
+  let count = 0;
+  const walk = (nodes) => {
+    var _a2;
+    for (const node of nodes || []) {
+      if (node == null ? void 0 : node.underline) count += 1;
+      if ((_a2 = node == null ? void 0 : node.children) == null ? void 0 : _a2.length) walk(node.children);
+    }
+  };
+  for (const page of config.pages) walk(page.children || []);
+  return count;
+}
 function PixldocsPreview(props) {
   const {
     pageIndex = 0,
@@ -11871,6 +11942,7 @@ function PixldocsPreview(props) {
     if (!isResolveMode) {
       setResolvedConfig(null);
       setCanvasSettled(false);
+      console.log(PREVIEW_DEBUG_PREFIX, "config-mode active");
       return;
     }
     const p = props;
@@ -11879,6 +11951,12 @@ function PixldocsPreview(props) {
     setIsLoading(true);
     setFontsReady(false);
     setCanvasSettled(false);
+    console.log(PREVIEW_DEBUG_PREFIX, "resolve-start", {
+      templateId: p.templateId,
+      formSchemaId: p.formSchemaId,
+      themeId: p.themeId ?? null,
+      pageIndex
+    });
     resolveFromForm({
       templateId: p.templateId,
       formSchemaId: p.formSchemaId,
@@ -11887,15 +11965,22 @@ function PixldocsPreview(props) {
       supabaseUrl: p.supabaseUrl,
       supabaseAnonKey: p.supabaseAnonKey
     }).then((resolved) => {
+      var _a, _b;
       if (!cancelled) {
+        console.log(PREVIEW_DEBUG_PREFIX, "resolve-done", {
+          pages: ((_b = (_a = resolved.config) == null ? void 0 : _a.pages) == null ? void 0 : _b.length) ?? 0,
+          underlinedNodes: countUnderlinedNodes(resolved.config)
+        });
         setResolvedConfig(resolved.config);
         ensureFontsForResolvedConfig(resolved.config).then(() => {
           if (!cancelled) {
+            console.log(PREVIEW_DEBUG_PREFIX, "resolve-mode fonts queued");
             setFontsReady(true);
             setIsLoading(false);
           }
-        }).catch(() => {
+        }).catch((err) => {
           if (!cancelled) {
+            console.warn(PREVIEW_DEBUG_PREFIX, "resolve-mode fonts queue failed", err);
             setFontsReady(true);
             setIsLoading(false);
           }
@@ -11904,6 +11989,7 @@ function PixldocsPreview(props) {
     }).catch((err) => {
       if (!cancelled) {
         setIsLoading(false);
+        console.warn(PREVIEW_DEBUG_PREFIX, "resolve-error", err);
         onError == null ? void 0 : onError(err instanceof Error ? err : new Error(String(err)));
       }
     });
@@ -11920,18 +12006,28 @@ function PixldocsPreview(props) {
   ]);
   const config = isResolveMode ? resolvedConfig : props.config;
   useEffect(() => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!config) return;
     let cancelled = false;
     setCanvasSettled(false);
     setStabilizationPass(0);
+    console.log(PREVIEW_DEBUG_PREFIX, "config-changed", {
+      pageIndex,
+      pages: ((_a = config.pages) == null ? void 0 : _a.length) ?? 0,
+      underlinedNodes: countUnderlinedNodes(config),
+      isResolveMode
+    });
     const bump = () => {
       if (cancelled) return;
       clearMeasurementCache();
       clearFabricCharCache();
-      setFontsReadyVersion((v) => v + 1);
+      setFontsReadyVersion((v) => {
+        const next = v + 1;
+        console.log(PREVIEW_DEBUG_PREFIX, "font-bump", { pageIndex, next, stabilizationPass });
+        return next;
+      });
     };
-    (_b = (_a = document.fonts) == null ? void 0 : _a.ready) == null ? void 0 : _b.then(bump);
+    (_c = (_b = document.fonts) == null ? void 0 : _b.ready) == null ? void 0 : _c.then(bump);
     const timeoutId = window.setTimeout(bump, 350);
     return () => {
       cancelled = true;
@@ -11953,17 +12049,28 @@ function PixldocsPreview(props) {
     setFontsReady(false);
     setCanvasSettled(false);
     setStabilizationPass(0);
-    ensureFontsForResolvedConfig(config).then(() => setFontsReady(true)).catch(() => setFontsReady(true));
+    ensureFontsForResolvedConfig(config).then(() => {
+      console.log(PREVIEW_DEBUG_PREFIX, "config-mode fonts queued", {
+        pageIndex,
+        underlinedNodes: countUnderlinedNodes(config)
+      });
+      setFontsReady(true);
+    }).catch((err) => {
+      console.warn(PREVIEW_DEBUG_PREFIX, "config-mode fonts queue failed", err);
+      setFontsReady(true);
+    });
   }, [isResolveMode, config]);
   const handleCanvasReady = 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" });
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
-  }, [onReady, stabilizationPass]);
+  }, [onReady, pageIndex, stabilizationPass]);
   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..." }) });
   }