@pixldocs/canvas-renderer 0.5.13 → 0.5.14

package/dist/index.js

@@ -11843,6 +11843,7 @@ function PixldocsPreview(props) {
   const [fontsReady, setFontsReady] = useState(false);
   const [fontsReadyVersion, setFontsReadyVersion] = useState(0);
   const [canvasSettled, setCanvasSettled] = useState(false);
+  const [stabilizationPass, setStabilizationPass] = useState(0);
   const isResolveMode = !("config" in props && props.config);
   useEffect(() => {
     if (!isResolveMode) {
@@ -11901,6 +11902,7 @@ function PixldocsPreview(props) {
     if (!config) return;
     let cancelled = false;
     setCanvasSettled(false);
+    setStabilizationPass(0);
     const bump = () => {
       if (cancelled) return;
       clearMeasurementCache();
@@ -11913,22 +11915,32 @@ function PixldocsPreview(props) {
       window.clearTimeout(timeoutId);
     };
   }, [config]);
-  const previewKey = useMemo(() => `${pageIndex}-${fontsReadyVersion}`, [pageIndex, fontsReadyVersion]);
+  const previewKey = useMemo(
+    () => `${pageIndex}-${fontsReadyVersion}-${stabilizationPass}`,
+    [pageIndex, fontsReadyVersion, stabilizationPass]
+  );
   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 = useCallback(() => {
+    if (stabilizationPass === 0) {
+      setCanvasSettled(false);
+      setStabilizationPass(1);
+      return;
+    }
     setCanvasSettled(true);
     onReady == null ? void 0 : onReady();
-  }, [onReady]);
+  }, [onReady, 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..." }) });
   }
@@ -12342,6 +12354,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("Render timeout (30s)"));
       }, 3e4);
+      let stabilizationPass = 0;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12351,6 +12364,19 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
+        if (stabilizationPass === 0) {
+          stabilizationPass = 1;
+          root.render(
+            createElement(PreviewCanvas2, {
+              config,
+              pageIndex,
+              zoom: pixelRatio,
+              absoluteZoom: true,
+              onReady
+            })
+          );
+          return;
+        }
         const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
         this.waitForCanvasImages(container, expectedImageCount).then(async () => {
           try {
@@ -12422,6 +12448,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
+      let stabilizationPass = 0;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12431,6 +12458,19 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
+        if (stabilizationPass === 0) {
+          stabilizationPass = 1;
+          root.render(
+            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;