@anaralabs/lector 3.10.2 → 3.10.3

package/dist/_tsup-dts-rollup.d.ts

@@ -124,12 +124,6 @@ declare interface AnnotationTooltipProps {
     }) => React.ReactNode;
 }
 
-declare type CacheEntry = {
-    bitmap: ImageBitmap;
-    width: number;
-    height: number;
-};
-
 /**
  * Calculates the highlight rectangles for a given text match.
  *
@@ -351,51 +345,6 @@ export declare type PDFVirtualizer = Virtualizer<any, any>;
 
 export declare const PreviousPage: () => void;
 
-/**
- * LRU cache for rendered page bitmaps. When scrolling back to a previously
- * rendered page at the same scale, we can draw from cache instantly instead
- * of re-rendering through PDF.js.
- *
- * Cache keys include a document ID to prevent collisions when multiple
- * <Root> instances render different PDFs on the same page.
- */
-declare class RenderCache {
-    private cache;
-    private maxEntries;
-    private invalidatedDocs;
-    constructor(maxEntries?: number);
-    private key;
-    get(documentId: string, pageNumber: number, scale: number, background?: string): CacheEntry | undefined;
-    set(documentId: string, pageNumber: number, scale: number, canvas: HTMLCanvasElement, background?: string): Promise<void>;
-    /** Remove all cached entries for a specific document (call on Root unmount). */
-    invalidateDocument(documentId: string): void;
-    clear(): void;
-}
-
-export declare const renderCache: RenderCache;
-
-/**
- * Serializes PDF page render operations so only one runs at a time.
- * This prevents multiple heavy pages from competing for CPU and blocking the UI.
- */
-declare class RenderQueue {
-    private queue;
-    private running;
-    enqueue(execute: () => Promise<void>): {
-        promise: Promise<void>;
-        cancel: () => void;
-    };
-    private flush;
-}
-
-/**
- * Global singleton — intentionally shared across all <Root> instances.
- * Serializing renders across documents prevents overall GPU/CPU pressure
- * on the main thread (CanvasGraphics is single-threaded). The trade-off
- * is increased latency in multi-viewer setups.
- */
-export declare const renderQueue: RenderQueue;
-
 export declare const Root: ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement> & usePDFDocumentParams & {
 loader?: ReactNode;
 }, "ref"> & RefAttributes<unknown>>;

package/dist/index.js

@@ -676,40 +676,6 @@ var ensureAnnotationLayerStyles = () => {
   style.textContent = annotationLayerStyles;
   document.head.appendChild(style);
 };
-
-// src/lib/cancellable.ts
-var cancellable = (promise) => {
-  let isCancelled = false;
-  const wrappedPromise = new Promise((resolve, reject) => {
-    promise.then(
-      (value) => {
-        if (!isCancelled) {
-          resolve(value);
-        }
-      },
-      (error) => {
-        if (!isCancelled) {
-          reject(error);
-        }
-      }
-    );
-  });
-  return {
-    promise: wrappedPromise,
-    cancel() {
-      isCancelled = true;
-    }
-  };
-};
-
-// src/lib/pdfjs.ts
-var pdfJsPromise = null;
-var loadPdfJs = () => {
-  if (!pdfJsPromise) {
-    pdfJsPromise = import('pdfjs-dist/legacy/build/pdf.mjs');
-  }
-  return pdfJsPromise;
-};
 var usePdfJump = () => {
   const virtualizer = usePdf((state) => state.virtualizer);
   const setHighlight = usePdf((state) => state.setHighlight);
@@ -1041,13 +1007,15 @@ var useAnnotationLayer = (params) => {
     if (linkService._pdfDocumentProxy !== pdfDocumentProxy) {
       linkService.setDocument(pdfDocumentProxy);
     }
-    annotationLayerRef.current.innerHTML = "";
-    annotationLayerRef.current.className = "annotationLayer";
+    const container = annotationLayerRef.current;
+    let cancelled = false;
+    container.replaceChildren();
+    container.className = "annotationLayer";
     const viewport = pdfPageProxy.getViewport({ scale: 1 }).clone({
       dontFlip: true
     });
     const annotationLayerConfig = {
-      div: annotationLayerRef.current,
+      div: container,
       viewport,
       page: pdfPageProxy,
       linkService,
@@ -1058,25 +1026,26 @@ var useAnnotationLayer = (params) => {
       structTreeLayer: void 0,
       commentManager: void 0
     };
-    const { cancel } = cancellable(
-      (async () => {
-        try {
-          const { AnnotationLayer: AnnotationLayer2 } = await loadPdfJs();
-          const annotationLayer = new AnnotationLayer2(annotationLayerConfig);
-          annotationLayerObjectRef.current = annotationLayer;
-          const annotations = await pdfPageProxy.getAnnotations();
-          await annotationLayer.render({
-            ...annotationLayerConfig,
-            ...mergedParams,
-            annotations,
-            linkService
-          });
-        } catch (_error) {
-        }
-      })()
-    );
+    (async () => {
+      try {
+        if (cancelled) return;
+        const { AnnotationLayer: AnnotationLayer2 } = await import('pdfjs-dist/legacy/build/pdf.mjs');
+        if (cancelled) return;
+        const annotationLayer = new AnnotationLayer2(annotationLayerConfig);
+        annotationLayerObjectRef.current = annotationLayer;
+        const annotations = await pdfPageProxy.getAnnotations();
+        if (cancelled) return;
+        await annotationLayer.render({
+          ...annotationLayerConfig,
+          ...mergedParams,
+          annotations,
+          linkService
+        });
+      } catch (_error) {
+      }
+    })();
     return () => {
-      cancel();
+      cancelled = true;
     };
   }, [pdfPageProxy, pdfDocumentProxy, mergedParams, linkService]);
   return {
@@ -1135,125 +1104,6 @@ function clampScaleForPage(targetScale, pageWidth, pageHeight) {
   );
   return Math.max(safeScale, 0);
 }
-
-// src/lib/render-cache.ts
-var RenderCache = class {
-  cache = /* @__PURE__ */ new Map();
-  maxEntries;
-  // Tracks invalidated documents so in-flight createImageBitmap calls
-  // don't insert orphaned entries after invalidateDocument() runs.
-  invalidatedDocs = /* @__PURE__ */ new Set();
-  constructor(maxEntries = 60) {
-    this.maxEntries = maxEntries;
-  }
-  key(documentId, pageNumber, scale, background) {
-    return `${documentId}-${pageNumber}-${scale}-${background ?? "white"}`;
-  }
-  get(documentId, pageNumber, scale, background) {
-    const k = this.key(documentId, pageNumber, scale, background);
-    const entry = this.cache.get(k);
-    if (!entry) return void 0;
-    this.cache.delete(k);
-    this.cache.set(k, entry);
-    return entry;
-  }
-  async set(documentId, pageNumber, scale, canvas, background) {
-    const k = this.key(documentId, pageNumber, scale, background);
-    const w = canvas.width;
-    const h = canvas.height;
-    if (w === 0 || h === 0) return;
-    while (this.cache.size >= this.maxEntries) {
-      const oldest = this.cache.keys().next().value;
-      if (oldest !== void 0) {
-        const entry = this.cache.get(oldest);
-        entry?.bitmap.close();
-        this.cache.delete(oldest);
-      }
-    }
-    try {
-      const bitmap = await createImageBitmap(canvas);
-      if (this.invalidatedDocs.has(documentId)) {
-        bitmap.close();
-        return;
-      }
-      this.cache.set(k, {
-        bitmap,
-        width: w,
-        height: h
-      });
-    } catch {
-    }
-  }
-  /** Remove all cached entries for a specific document (call on Root unmount). */
-  invalidateDocument(documentId) {
-    this.invalidatedDocs.add(documentId);
-    for (const [k, entry] of this.cache) {
-      if (k.startsWith(`${documentId}-`)) {
-        entry.bitmap.close();
-        this.cache.delete(k);
-      }
-    }
-    setTimeout(() => {
-      this.invalidatedDocs.delete(documentId);
-    }, 1e3);
-  }
-  clear() {
-    for (const entry of this.cache.values()) {
-      entry.bitmap.close();
-    }
-    this.cache.clear();
-    this.invalidatedDocs.clear();
-  }
-};
-var renderCache = new RenderCache();
-
-// src/lib/render-queue.ts
-var RenderQueue = class {
-  queue = [];
-  running = false;
-  enqueue(execute) {
-    let resolve;
-    let reject;
-    const promise = new Promise((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-    const job = {
-      execute,
-      resolve,
-      reject,
-      cancelled: false
-    };
-    this.queue.push(job);
-    this.flush();
-    return {
-      promise,
-      cancel: () => {
-        job.cancelled = true;
-        job.resolve();
-      }
-    };
-  }
-  async flush() {
-    if (this.running) return;
-    this.running = true;
-    while (this.queue.length > 0) {
-      const job = this.queue.shift();
-      if (job.cancelled) {
-        job.resolve();
-        continue;
-      }
-      try {
-        await job.execute();
-        job.resolve();
-      } catch (error) {
-        job.reject(error);
-      }
-    }
-    this.running = false;
-  }
-};
-var renderQueue = new RenderQueue();
 var useDpr = () => {
   const [dpr, setDPR] = useState(
     typeof window === "undefined" ? 1 : Math.min(window.devicePixelRatio, 2)
@@ -1277,123 +1127,149 @@ var useDpr = () => {
 };
 
 // src/hooks/layers/useCanvasLayer.tsx
+var CACHE_MAX = 60;
+var cacheEntries = [];
+var canvasBitmapCache = /* @__PURE__ */ new WeakMap();
+function clearBitmapCache(documentId) {
+  if (documentId === void 0) {
+    for (const entry of cacheEntries) {
+      entry.bitmap.close();
+      canvasBitmapCache.get(entry.proxy)?.delete(entry.key);
+    }
+    cacheEntries.length = 0;
+    return;
+  }
+  for (let i = cacheEntries.length - 1; i >= 0; i--) {
+    const entry = cacheEntries[i];
+    if (entry.docId !== documentId) continue;
+    entry.bitmap.close();
+    canvasBitmapCache.get(entry.proxy)?.delete(entry.key);
+    cacheEntries.splice(i, 1);
+  }
+}
+function cacheKey(scale, background) {
+  const bg = background ?? "white";
+  let hash = Math.round(scale * 1e4);
+  for (let i = 0; i < bg.length; i++) {
+    hash = hash * 31 + bg.charCodeAt(i) | 0;
+  }
+  return hash;
+}
+function getCachedBitmap(proxy, scale, background) {
+  const key = cacheKey(scale, background);
+  const bitmap = canvasBitmapCache.get(proxy)?.get(key);
+  if (!bitmap) return null;
+  const idx = cacheEntries.findIndex((e) => e.proxy === proxy && e.key === key);
+  if (idx !== -1 && idx !== cacheEntries.length - 1) {
+    const [entry] = cacheEntries.splice(idx, 1);
+    cacheEntries.push(entry);
+  }
+  return bitmap;
+}
+function setCachedBitmap(docId, proxy, scale, background, bitmap) {
+  const key = cacheKey(scale, background);
+  let map = canvasBitmapCache.get(proxy);
+  if (!map) {
+    map = /* @__PURE__ */ new Map();
+    canvasBitmapCache.set(proxy, map);
+  }
+  const existing = map.get(key);
+  if (existing && existing !== bitmap) {
+    existing.close();
+    const idx = cacheEntries.findIndex(
+      (e) => e.proxy === proxy && e.key === key
+    );
+    if (idx !== -1) cacheEntries.splice(idx, 1);
+  }
+  map.set(key, bitmap);
+  cacheEntries.push({ docId, proxy, key, bitmap });
+  while (cacheEntries.length > CACHE_MAX) {
+    const evicted = cacheEntries.shift();
+    const evictedMap = canvasBitmapCache.get(evicted.proxy);
+    if (evictedMap?.get(evicted.key) === evicted.bitmap) {
+      evictedMap.delete(evicted.key);
+      evicted.bitmap.close();
+    }
+  }
+}
 var useCanvasLayer = ({ background }) => {
   const canvasRef = useRef(null);
   const pageNumber = usePDFPageNumber();
   const dpr = useDpr();
   const bouncyZoom = usePdf((state) => state.zoom);
+  const docId = usePdf((state) => state.pdfDocumentProxy.fingerprints[0] ?? "");
   const pdfPageProxy = usePdf((state) => state.getPdfPageProxy(pageNumber));
   const markPageRendered = usePdf((state) => state.markPageRendered);
   const unmarkPageRendered = usePdf((state) => state.unmarkPageRendered);
-  const documentId = usePdf(
-    (state) => state.pdfDocumentProxy.fingerprints[0] ?? "default"
-  );
   const [zoom] = useDebounce(bouncyZoom, 100);
-  const lastRenderedScaleRef = useRef(0);
-  const lastBackgroundRef = useRef(background);
-  const lastPageProxyRef = useRef(pdfPageProxy);
-  const pageDimsRef = useRef(null);
-  if (!pageDimsRef.current || pageDimsRef.current.proxy !== pdfPageProxy) {
-    const vp = pdfPageProxy.getViewport({ scale: 1 });
-    pageDimsRef.current = {
-      width: vp.width,
-      height: vp.height,
-      proxy: pdfPageProxy
-    };
-  }
   useLayoutEffect(() => {
-    if (!canvasRef.current) {
-      return;
-    }
-    if (lastPageProxyRef.current !== pdfPageProxy || lastBackgroundRef.current !== background) {
-      lastPageProxyRef.current = pdfPageProxy;
-      lastBackgroundRef.current = background;
-      lastRenderedScaleRef.current = 0;
-    }
-    const { width: pageWidth, height: pageHeight } = pageDimsRef.current;
-    const bgColor = background ?? "white";
+    if (!canvasRef.current) return;
+    const baseCanvas = canvasRef.current;
+    const baseViewport = pdfPageProxy.getViewport({ scale: 1 });
+    const pageWidth = baseViewport.width;
+    const pageHeight = baseViewport.height;
     const targetBaseScale = dpr * Math.min(zoom, 1);
     const baseScale = clampScaleForPage(targetBaseScale, pageWidth, pageHeight);
-    if (baseScale === lastRenderedScaleRef.current) {
-      return;
-    }
-    const w = Math.floor(pageWidth * baseScale);
-    const h = Math.floor(pageHeight * baseScale);
-    const cssText = `position:absolute;top:0;left:0;width:${pageWidth}px;height:${pageHeight}px;transform:translate(0px,0px);z-index:0;pointer-events:none;background-color:${bgColor}`;
-    const swapToCanvas = (source, sw, sh) => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      canvas.width = sw;
-      canvas.height = sh;
-      canvas.style.cssText = cssText;
-      const ctx = canvas.getContext("2d");
-      if (ctx) {
-        ctx.drawImage(source, 0, 0);
-      }
-      lastRenderedScaleRef.current = baseScale;
-    };
-    const cached = renderCache.get(
-      documentId,
-      pageNumber,
-      baseScale,
-      background
-    );
+    baseCanvas.width = Math.floor(pageWidth * baseScale);
+    baseCanvas.height = Math.floor(pageHeight * baseScale);
+    baseCanvas.style.position = "absolute";
+    baseCanvas.style.top = "0";
+    baseCanvas.style.left = "0";
+    baseCanvas.style.width = `${pageWidth}px`;
+    baseCanvas.style.height = `${pageHeight}px`;
+    baseCanvas.style.transform = "translate(0px, 0px)";
+    baseCanvas.style.zIndex = "0";
+    baseCanvas.style.pointerEvents = "none";
+    baseCanvas.style.backgroundColor = background ?? "white";
+    baseCanvas.style.visibility = "";
+    const context = baseCanvas.getContext("2d");
+    if (!context) return;
+    const cached = getCachedBitmap(pdfPageProxy, baseScale, background);
     if (cached) {
-      swapToCanvas(cached.bitmap, cached.width, cached.height);
+      context.drawImage(cached, 0, 0);
       markPageRendered(pageNumber);
       return;
     }
+    context.setTransform(1, 0, 0, 1, 0, 0);
+    context.clearRect(0, 0, baseCanvas.width, baseCanvas.height);
+    baseCanvas.style.visibility = "hidden";
     let cancelled = false;
-    let activeRenderingTask = null;
-    const job = renderQueue.enqueue(() => {
-      return new Promise((resolve, reject) => {
-        if (cancelled || !canvasRef.current) {
-          resolve();
-          return;
-        }
-        const buffer = document.createElement("canvas");
-        buffer.width = w;
-        buffer.height = h;
-        const bufferCtx = buffer.getContext("2d");
-        if (!bufferCtx) {
-          resolve();
-          return;
-        }
-        const viewport = pdfPageProxy.getViewport({ scale: baseScale });
-        const renderingTask = pdfPageProxy.render({
-          canvas: buffer,
-          canvasContext: bufferCtx,
-          viewport,
-          background
-        });
-        activeRenderingTask = renderingTask;
-        renderingTask.promise.then(() => {
-          activeRenderingTask = null;
-          if (cancelled || !canvasRef.current) {
-            resolve();
-            return;
-          }
-          swapToCanvas(buffer, w, h);
-          markPageRendered(pageNumber);
-          renderCache.set(documentId, pageNumber, baseScale, buffer, background).finally(() => {
-            buffer.width = 0;
-            buffer.height = 0;
-          });
-          resolve();
-        }).catch((error) => {
-          activeRenderingTask = null;
-          if (error.name === "RenderingCancelledException") {
-            resolve();
+    const viewport = pdfPageProxy.getViewport({ scale: baseScale });
+    const renderingTask = pdfPageProxy.render({
+      canvas: baseCanvas,
+      canvasContext: context,
+      viewport,
+      background
+    });
+    renderingTask.promise.then(() => {
+      if (cancelled) return;
+      baseCanvas.style.visibility = "";
+      markPageRendered(pageNumber);
+      if (typeof createImageBitmap !== "undefined") {
+        createImageBitmap(baseCanvas).then((bitmap) => {
+          if (cancelled) {
+            bitmap.close();
             return;
           }
-          reject(error);
+          setCachedBitmap(
+            docId,
+            pdfPageProxy,
+            baseScale,
+            background,
+            bitmap
+          );
+        }).catch(() => {
         });
-      });
+      }
+    }).catch((error) => {
+      if (cancelled) return;
+      if (error?.name === "RenderingCancelledException") return;
+      baseCanvas.style.visibility = "";
+      console.error("PDF render error:", error);
     });
     return () => {
       cancelled = true;
-      job.cancel();
-      void activeRenderingTask?.cancel();
+      void renderingTask.cancel();
     };
   }, [
     pdfPageProxy,
@@ -1401,16 +1277,16 @@ var useCanvasLayer = ({ background }) => {
     dpr,
     zoom,
     pageNumber,
-    documentId,
-    markPageRendered
+    markPageRendered,
+    docId
   ]);
   useEffect(() => {
     const canvas = canvasRef.current;
     return () => {
       unmarkPageRendered(pageNumber);
       if (canvas) {
-        canvas.width = 1;
-        canvas.height = 1;
+        canvas.width = 0;
+        canvas.height = 0;
       }
     };
   }, [pageNumber, unmarkPageRendered]);
@@ -2647,10 +2523,8 @@ var useTextLayer = () => {
       textLayerRef.current.cancel();
       textLayerRef.current = null;
     }
-    void loadPdfJs().then(({ TextLayer: TextLayer2 }) => {
-      if (isCancelled || textContainerRef.current !== textContainer) {
-        return;
-      }
+    void import('pdfjs-dist/legacy/build/pdf.mjs').then(({ TextLayer: TextLayer2 }) => {
+      if (isCancelled || textContainerRef.current !== textContainer) return;
       const textLayer = new TextLayer2({
         textContentSource: pdfPageProxy.streamTextContent(),
         container: textContainer,
@@ -2659,8 +2533,7 @@ var useTextLayer = () => {
       textLayerRef.current = textLayer;
       return textLayer.render();
     }).then(() => {
-      const textLayer = textLayerRef.current;
-      if (!textLayer || isCancelled || textContainerRef.current !== textContainer) {
+      if (isCancelled || textContainerRef.current !== textContainer) {
         return;
       }
       const endOfContent = document.createElement("div");
@@ -2668,7 +2541,7 @@ var useTextLayer = () => {
       textContainer.appendChild(endOfContent);
       bindMouseEvents(textContainer, endOfContent);
     }).catch((error) => {
-      if (error.name !== "AbortException") {
+      if (error instanceof Error && error.name !== "AbortException") {
         console.error("TextLayer rendering error:", error);
       }
     }).finally(() => {
@@ -2715,6 +2588,33 @@ var TextLayer = memo(
   }
 );
 TextLayer.displayName = "TextLayer";
+
+// src/lib/cancellable.ts
+var cancellable = (promise) => {
+  let isCancelled = false;
+  const wrappedPromise = new Promise((resolve, reject) => {
+    promise.then(
+      (value) => {
+        if (!isCancelled) {
+          resolve(value);
+        }
+      },
+      (error) => {
+        if (!isCancelled) {
+          reject(error);
+        }
+      }
+    );
+  });
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      isCancelled = true;
+    }
+  };
+};
+
+// src/hooks/usePdfOutline.tsx
 var usePDFOutline = () => {
   const pdfDocumentProxy = usePdf((state) => state.pdfDocumentProxy);
   const [outline, setOutline] = useState();
@@ -5337,6 +5237,17 @@ var Pages = ({
     }
   );
 };
+
+// src/lib/pdfjs.ts
+var pdfJsPromise = null;
+var loadPdfJs = () => {
+  if (!pdfJsPromise) {
+    pdfJsPromise = import('pdfjs-dist/legacy/build/pdf.mjs');
+  }
+  return pdfJsPromise;
+};
+
+// src/hooks/document/document.ts
 function buildDocumentInitParams(source, overrides) {
   let params;
   if (typeof source === "string" || source instanceof URL) {
@@ -5476,11 +5387,11 @@ var Root = forwardRef(
     const linkService = useCreatePDFLinkService(
       initialState?.pdfDocumentProxy ?? null
     );
-    const documentId = initialState?.pdfDocumentProxy.fingerprints[0];
+    const documentId = initialState?.pdfDocumentProxy?.fingerprints?.[0];
     useEffect(() => {
       if (!documentId) return;
       return () => {
-        renderCache.invalidateDocument(documentId);
+        clearBitmapCache(documentId);
       };
     }, [documentId]);
     return /* @__PURE__ */ jsx(Primitive.div, { ref, ...props, children: initialState ? /* @__PURE__ */ jsx(PDFStore.Provider, { initialValue: initialState, children: /* @__PURE__ */ jsx(PDFLinkServiceContext.Provider, { value: linkService, children }) }) : loader ?? "Loading..." });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anaralabs/lector",
-	"version": "3.10.2",
+	"version": "3.10.3",
 	"description": "A headless PDF viewer for React",
 	"author": "andrewdr (https://github.com/andrewdoro)",
 	"license": "MIT",