@pixldocs/canvas-renderer 0.5.13 → 0.5.15

package/dist/index.cjs

@@ -2656,6 +2656,19 @@ const FONTS_TO_PRELOAD = [
 ];
 let fontsLoaded = false;
 let fontsLoadingPromise = null;
+const withFontTimeout = async (promise, timeoutMs = 4e3) => {
+  let timeoutId;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise((resolve) => {
+        timeoutId = setTimeout(resolve, timeoutMs);
+      })
+    ]);
+  } finally {
+    if (timeoutId) clearTimeout(timeoutId);
+  }
+};
 const preloadFont = async (fontFamily) => {
   try {
     if (document.fonts) {
@@ -2676,11 +2689,11 @@ const preloadAllFonts = async () => {
   }
   fontsLoadingPromise = (async () => {
     if (document.fonts) {
-      await document.fonts.ready;
+      await withFontTimeout(document.fonts.ready, 2500);
     }
-    await Promise.all(FONTS_TO_PRELOAD.map((font) => preloadFont(font)));
+    await withFontTimeout(Promise.all(FONTS_TO_PRELOAD.map((font) => preloadFont(font))).then(() => void 0), 5e3);
     if (document.fonts) {
-      await document.fonts.ready;
+      await withFontTimeout(document.fonts.ready, 2500);
     }
     fontsLoaded = true;
   })();
@@ -2688,7 +2701,7 @@ const preloadAllFonts = async () => {
 };
 const waitForFontsReady = async () => {
   if (!document.fonts) return;
-  await document.fonts.ready;
+  await withFontTimeout(document.fonts.ready, 2500);
 };
 const DEFAULT_FONT_CHECK_TIMEOUT_MS = 3500;
 const FONT_CHECK_POLL_MS = 60;
@@ -11694,6 +11707,19 @@ function normalizeFontFamily(fontStack) {
 }
 const loadedFonts = /* @__PURE__ */ new Set();
 const loadingPromises = /* @__PURE__ */ new Map();
+async function withTimeout(promise, timeoutMs = 4e3) {
+  let timeoutId;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise((resolve) => {
+        timeoutId = setTimeout(resolve, timeoutMs);
+      })
+    ]);
+  } finally {
+    if (timeoutId) clearTimeout(timeoutId);
+  }
+}
 async function loadGoogleFontCSS(rawFontFamily) {
   if (!rawFontFamily || typeof document === "undefined") return;
   const fontFamily = normalizeFontFamily(rawFontFamily);
@@ -11715,8 +11741,8 @@ async function loadGoogleFontCSS(rawFontFamily) {
         document.head.appendChild(link);
       });
       if (document.fonts) {
-        await document.fonts.load(`16px "${fontFamily}"`);
-        await document.fonts.ready;
+        await withTimeout(document.fonts.load(`16px "${fontFamily}"`), 2500);
+        await withTimeout(document.fonts.ready, 2500);
       }
       loadedFonts.add(fontFamily);
     } catch (e) {
@@ -11829,7 +11855,7 @@ 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)));
+  await withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 8e3);
   if (document.fonts) {
     const loadPromises = descriptors.map((d) => {
       const stylePrefix = d.style === "italic" ? "italic " : "";
@@ -11838,8 +11864,8 @@ async function ensureFontsForResolvedConfig(config) {
       return document.fonts.load(spec).catch(() => {
       });
     });
-    await Promise.all(loadPromises);
-    await document.fonts.ready;
+    await withTimeout(Promise.all(loadPromises), 8e3);
+    await withTimeout(document.fonts.ready, 2500);
   }
 }
 function PixldocsPreview(props) {
@@ -11862,6 +11888,7 @@ function PixldocsPreview(props) {
   const [fontsReady, setFontsReady] = react.useState(false);
   const [fontsReadyVersion, setFontsReadyVersion] = react.useState(0);
   const [canvasSettled, setCanvasSettled] = react.useState(false);
+  const [stabilizationPass, setStabilizationPass] = react.useState(0);
   const isResolveMode = !("config" in props && props.config);
   react.useEffect(() => {
     if (!isResolveMode) {
@@ -11920,6 +11947,7 @@ function PixldocsPreview(props) {
     if (!config) return;
     let cancelled = false;
     setCanvasSettled(false);
+    setStabilizationPass(0);
     const bump = () => {
       if (cancelled) return;
       clearMeasurementCache();
@@ -11932,22 +11960,32 @@ function PixldocsPreview(props) {
       window.clearTimeout(timeoutId);
     };
   }, [config]);
-  const previewKey = react.useMemo(() => `${pageIndex}-${fontsReadyVersion}`, [pageIndex, fontsReadyVersion]);
+  const previewKey = react.useMemo(
+    () => `${pageIndex}-${fontsReadyVersion}-${stabilizationPass}`,
+    [pageIndex, fontsReadyVersion, stabilizationPass]
+  );
   react.useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
       setFontsReady(false);
       setCanvasSettled(false);
+      setStabilizationPass(0);
       return;
     }
     setFontsReady(false);
     setCanvasSettled(false);
+    setStabilizationPass(0);
     ensureFontsForResolvedConfig(config).then(() => setFontsReady(true)).catch(() => setFontsReady(true));
   }, [isResolveMode, config]);
   const handleCanvasReady = react.useCallback(() => {
+    if (stabilizationPass === 0) {
+      setCanvasSettled(false);
+      setStabilizationPass(1);
+      return;
+    }
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
-  }, [onReady]);
+  }, [onReady, stabilizationPass]);
   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..." }) });
   }
@@ -12361,6 +12399,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("Render timeout (30s)"));
       }, 3e4);
+      let stabilizationPass = 0;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12370,6 +12409,19 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
+        if (stabilizationPass === 0) {
+          stabilizationPass = 1;
+          root.render(
+            react.createElement(PreviewCanvas2, {
+              config,
+              pageIndex,
+              zoom: pixelRatio,
+              absoluteZoom: true,
+              onReady
+            })
+          );
+          return;
+        }
         const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
         this.waitForCanvasImages(container, expectedImageCount).then(async () => {
           try {
@@ -12441,6 +12493,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
+      let stabilizationPass = 0;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12450,6 +12503,19 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
+        if (stabilizationPass === 0) {
+          stabilizationPass = 1;
+          root.render(
+            react.createElement(PreviewCanvas2, {
+              config,
+              pageIndex,
+              zoom: 1,
+              absoluteZoom: true,
+              onReady
+            })
+          );
+          return;
+        }
         const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
         this.waitForCanvasImages(container, expectedImageCount).then(async () => {
           var _a, _b;