canvu-react 0.3.12 → 0.3.14

package/README.md

@@ -255,6 +255,11 @@ export function BoardImport() {
 			files: Array.from(files),
 			worldCenter: { x: 0, y: 0 },
 			assetStore,
+			pdfScale: 1.15,
+			pdfPageConcurrency: 2,
+			onItemsReady(nextItems) {
+				doc.onItemsChange([...doc.items, ...nextItems]);
+			},
 			decorateItem(item) {
 				return {
 					...item,
@@ -265,7 +270,6 @@ export function BoardImport() {
 
 		doc.onItemsChange([...doc.items, ...result.items]);
 	}
-
 	if (!doc.isHydrated) return null;
 
 	return (
@@ -300,6 +304,10 @@ export function BoardImport() {
 }
 ```
 
+canvu can now stream PDF pages into the canvas progressively through
+`onItemsReady(...)`, skip PDF thumbnails during ingest, and use a lower initial
+raster scale by default to improve time-to-first-render.
+
 This helper is the same ingestion layer used internally by the native file
 tool, so external imports do not need to reimplement PDF rasterization, local
 blob persistence, or `pluginData` attachment.

package/dist/index.cjs

@@ -243,10 +243,32 @@ async function runWithConcurrency(items, concurrency, execute) {
 async function loadPdfToStore(file, store, options) {
   const scale = options?.scale ?? 1.5;
   const pageConcurrency = options?.pageConcurrency ?? 2;
+  const storeThumbnails = options?.storeThumbnails ?? false;
   const pdfjs = await getPdfJs();
   const arrayBuffer = await file.arrayBuffer();
   const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;
   const pageNumbers = normalizePdfPageNumbers(options?.pageNumbers, pdf.numPages);
+  const bufferedResults = /* @__PURE__ */ new Map();
+  let nextEmitIndex = 0;
+  let emitChain = Promise.resolve();
+  const queuePageEmission = async (pageResult) => {
+    bufferedResults.set(pageResult.pageNumber, pageResult);
+    const run = async () => {
+      while (nextEmitIndex < pageNumbers.length) {
+        const nextPageNumber = pageNumbers[nextEmitIndex];
+        if (nextPageNumber == null) break;
+        const bufferedResult = bufferedResults.get(nextPageNumber);
+        if (!bufferedResult) break;
+        bufferedResults.delete(nextPageNumber);
+        nextEmitIndex += 1;
+        await options?.onPageStored?.(bufferedResult);
+      }
+    };
+    const nextChain = emitChain.then(run, run);
+    emitChain = nextChain.catch(() => {
+    });
+    await nextChain;
+  };
   return await runWithConcurrency(
     pageNumbers,
     pageConcurrency,
@@ -256,27 +278,31 @@ async function loadPdfToStore(file, store, options) {
       const mime = "image/png";
       const pageBlob = await canvasToBlob(canvas, mime);
       const blobId = await store.storeOriginal(pageBlob);
-      const thumbScale = Math.min(1, 256 / Math.max(width, height));
-      const tw = Math.max(1, Math.round(width * thumbScale));
-      const th = Math.max(1, Math.round(height * thumbScale));
-      const thumbCanvas = document.createElement("canvas");
-      thumbCanvas.width = tw;
-      thumbCanvas.height = th;
-      const tCtx = thumbCanvas.getContext("2d");
-      if (tCtx) {
-        tCtx.imageSmoothingEnabled = true;
-        tCtx.imageSmoothingQuality = "high";
-        tCtx.drawImage(canvas, 0, 0, tw, th);
-      }
-      const thumbBlob = await canvasToBlob(thumbCanvas, mime);
-      const thumbnailBlobId = await store.storeThumbnail(thumbBlob);
-      return {
+      const thumbnailBlobId = storeThumbnails ? await (async () => {
+        const thumbScale = Math.min(1, 256 / Math.max(width, height));
+        const tw = Math.max(1, Math.round(width * thumbScale));
+        const th = Math.max(1, Math.round(height * thumbScale));
+        const thumbCanvas = document.createElement("canvas");
+        thumbCanvas.width = tw;
+        thumbCanvas.height = th;
+        const tCtx = thumbCanvas.getContext("2d");
+        if (tCtx) {
+          tCtx.imageSmoothingEnabled = true;
+          tCtx.imageSmoothingQuality = "high";
+          tCtx.drawImage(canvas, 0, 0, tw, th);
+        }
+        const thumbBlob = await canvasToBlob(thumbCanvas, mime);
+        return await store.storeThumbnail(thumbBlob);
+      })() : "";
+      const pageResult = {
         blobId,
         thumbnailBlobId,
         width,
         height,
         pageNumber
       };
+      await queuePageEmission(pageResult);
+      return pageResult;
     }
   );
 }
@@ -1713,7 +1739,8 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
 var HYDRATION_CACHE_NAME = "canvu-asset-hydration-v1";
 var DEFAULT_PDF_SCALE = 1.15;
 var DEFAULT_PDF_PAGE_CONCURRENCY = 2;
-var hydrationBlobPromises = /* @__PURE__ */ new Map();
+var hydrationSourcePromises = /* @__PURE__ */ new Map();
+var pdfSourceBlobPromises = /* @__PURE__ */ new Map();
 function buildImageHydrationKey(assetId) {
   return `image:${assetId}`;
 }
@@ -1761,23 +1788,38 @@ async function fetchBlob(url) {
     return null;
   }
 }
-async function getHydrationBlob(key, preferCachedRasters, loader) {
+async function getHydrationSource(key, preferCachedRasters, loader) {
   const cached = preferCachedRasters ? await readCachedHydrationBlob(key) : null;
-  if (cached) return cached;
-  const inFlight = hydrationBlobPromises.get(key);
+  if (cached) {
+    return {
+      blob: cached
+    };
+  }
+  const inFlight = hydrationSourcePromises.get(key);
   if (inFlight) return await inFlight;
   const nextPromise = (async () => {
-    const blob = await loader();
-    if (blob) {
-      await writeCachedHydrationBlob(key, blob);
+    const source = await loader();
+    if (source?.blob) {
+      await writeCachedHydrationBlob(key, source.blob);
     }
-    return blob;
+    return source;
   })();
-  hydrationBlobPromises.set(key, nextPromise);
+  hydrationSourcePromises.set(key, nextPromise);
+  try {
+    return await nextPromise;
+  } finally {
+    hydrationSourcePromises.delete(key);
+  }
+}
+async function getPdfSourceBlob(url) {
+  const inFlight = pdfSourceBlobPromises.get(url);
+  if (inFlight) return await inFlight;
+  const nextPromise = fetchBlob(url);
+  pdfSourceBlobPromises.set(url, nextPromise);
   try {
     return await nextPromise;
   } finally {
-    hydrationBlobPromises.delete(key);
+    pdfSourceBlobPromises.delete(url);
   }
 }
 function registerObjectUrl(objectUrls, blob) {
@@ -1831,18 +1873,22 @@ async function hydrateImageAssets(requests, resolvedAssetUrls, objectUrls, prefe
       if (!resolvedAsset?.url) {
         return [assetId, null];
       }
-      const blob = await getHydrationBlob(
+      const source = await getHydrationSource(
         buildImageHydrationKey(assetId),
         preferCachedRasters,
-        async () => await fetchBlob(resolvedAsset.url)
+        async () => {
+          const blob = await fetchBlob(resolvedAsset.url);
+          if (!blob) return null;
+          return { blob };
+        }
       );
-      if (!blob) {
+      if (!source?.blob) {
         return [assetId, null];
       }
       return [
         assetId,
         {
-          href: registerObjectUrl(objectUrls, blob)
+          href: registerObjectUrl(objectUrls, source.blob)
         }
       ];
     })
@@ -1857,45 +1903,69 @@ async function hydratePdfAssets(requests, resolvedAssetUrls, objectUrls, options
     if (!resolvedAsset?.url) {
       continue;
     }
-    const missingPages = [];
-    for (const pageNumber of group.pageNumbers) {
-      const cacheKey = buildPdfHydrationKey(group.assetId, pageNumber, group.scale);
-      const cachedBlob = await readCachedHydrationBlob(cacheKey);
-      if (!cachedBlob) {
-        missingPages.push(pageNumber);
+    const pageKeys = group.pageNumbers.map((pageNumber) => ({
+      pageNumber,
+      cacheKey: buildPdfHydrationKey(group.assetId, pageNumber, group.scale)
+    }));
+    const pagesToRender = [];
+    for (const { pageNumber, cacheKey } of pageKeys) {
+      const cachedBlob = options.preferCachedRasters ? await readCachedHydrationBlob(cacheKey) : null;
+      if (cachedBlob) {
+        hydratedPages.set(cacheKey, {
+          href: registerObjectUrl(objectUrls, cachedBlob)
+        });
         continue;
       }
-      hydratedPages.set(cacheKey, {
-        href: registerObjectUrl(objectUrls, cachedBlob)
-      });
-    }
-    if (missingPages.length === 0) {
-      continue;
+      if (!hydrationSourcePromises.has(cacheKey)) {
+        pagesToRender.push({ pageNumber, cacheKey });
+      }
     }
-    const pdfBlob = await fetchBlob(resolvedAsset.url);
-    if (!pdfBlob) {
-      continue;
+    if (pagesToRender.length > 0) {
+      const renderPromise = (async () => {
+        const pdfBlob = await getPdfSourceBlob(resolvedAsset.url);
+        if (!pdfBlob) {
+          return /* @__PURE__ */ new Map();
+        }
+        const renderedPages = await loadPdfToStore(pdfBlob, options.imageStore, {
+          scale: group.scale,
+          pageNumbers: pagesToRender.map(({ pageNumber }) => pageNumber),
+          pageConcurrency: options.pdfPageConcurrency
+        });
+        const renderedByPage = /* @__PURE__ */ new Map();
+        for (const renderedPage of renderedPages) {
+          const pageBlob = await options.imageStore.getOriginal(renderedPage.blobId);
+          renderedByPage.set(
+            renderedPage.pageNumber,
+            pageBlob ? {
+              blob: pageBlob,
+              width: renderedPage.width,
+              height: renderedPage.height
+            } : null
+          );
+        }
+        return renderedByPage;
+      })();
+      for (const { pageNumber, cacheKey } of pagesToRender) {
+        const pagePromise = getHydrationSource(
+          cacheKey,
+          options.preferCachedRasters,
+          async () => (await renderPromise).get(pageNumber) ?? null
+        );
+        hydrationSourcePromises.set(cacheKey, pagePromise);
+      }
     }
-    const renderedPages = await loadPdfToStore(pdfBlob, options.imageStore, {
-      scale: group.scale,
-      pageNumbers: missingPages,
-      pageConcurrency: options.pdfPageConcurrency
-    });
-    for (const renderedPage of renderedPages) {
-      const cacheKey = buildPdfHydrationKey(
-        group.assetId,
-        renderedPage.pageNumber,
-        group.scale
+    for (const { cacheKey } of pageKeys) {
+      if (hydratedPages.has(cacheKey)) continue;
+      const source = await getHydrationSource(
+        cacheKey,
+        options.preferCachedRasters,
+        async () => null
       );
-      const pageBlob = await options.imageStore.getOriginal(renderedPage.blobId);
-      if (!pageBlob) {
-        continue;
-      }
-      await writeCachedHydrationBlob(cacheKey, pageBlob);
+      if (!source?.blob) continue;
       hydratedPages.set(cacheKey, {
-        href: registerObjectUrl(objectUrls, pageBlob),
-        width: renderedPage.width,
-        height: renderedPage.height
+        href: registerObjectUrl(objectUrls, source.blob),
+        width: source.width,
+        height: source.height
       });
     }
   }
@@ -1936,7 +2006,9 @@ async function hydrateSceneItemsWithAssets(items, assetStore, options = {}) {
     objectUrls,
     {
       imageStore,
-      pdfPageConcurrency}
+      pdfPageConcurrency,
+      preferCachedRasters
+    }
   );
   return {
     items: items.map((item) => {