canvu-react 0.3.12 → 0.3.14

package/dist/react.d.cts

@@ -107,10 +107,18 @@ type IngestAssetFilesToSceneItemsOptions = {
     /**
      * PDF rasterization scale forwarded to `pdfjs-dist`.
      *
-     * Defaults to `1.5` for crisp zoom while keeping payloads reasonable.
+     * Defaults to `1.15` to balance first paint latency with zoom quality.
      */
     pdfScale?: number;
     pdfPageConcurrency?: number;
+    /**
+     * Called as soon as canvu finishes converting one or more items from the
+     * source files.
+     */
+    onItemsReady?: (items: VectorSceneItem[], context: {
+        file: File;
+        kind: VectorViewportAssetKind;
+    }) => void;
     /**
      * Final hook to customize each created item after canvu attaches its own
      * image metadata and any `assetStore.upload(...)` `pluginData`.

package/dist/react.d.ts

@@ -107,10 +107,18 @@ type IngestAssetFilesToSceneItemsOptions = {
     /**
      * PDF rasterization scale forwarded to `pdfjs-dist`.
      *
-     * Defaults to `1.5` for crisp zoom while keeping payloads reasonable.
+     * Defaults to `1.15` to balance first paint latency with zoom quality.
      */
     pdfScale?: number;
     pdfPageConcurrency?: number;
+    /**
+     * Called as soon as canvu finishes converting one or more items from the
+     * source files.
+     */
+    onItemsReady?: (items: VectorSceneItem[], context: {
+        file: File;
+        kind: VectorViewportAssetKind;
+    }) => void;
     /**
      * Final hook to customize each created item after canvu attaches its own
      * image metadata and any `assetStore.upload(...)` `pluginData`.

package/dist/react.js

@@ -949,10 +949,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,
@@ -962,27 +984,31 @@ async function loadPdfToStore(file, store, options) {
       const mime = "image/png";
       const pageBlob = await canvasToBlob2(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 canvasToBlob2(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 canvasToBlob2(thumbCanvas, mime);
+        return await store.storeThumbnail(thumbBlob);
+      })() : "";
+      const pageResult = {
         blobId,
         thumbnailBlobId,
         width,
         height,
         pageNumber
       };
+      await queuePageEmission(pageResult);
+      return pageResult;
     }
   );
 }
@@ -992,7 +1018,8 @@ init_shape_builders();
 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}`;
 }
@@ -1040,23 +1067,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) {
@@ -1110,18 +1152,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)
         }
       ];
     })
@@ -1136,45 +1182,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
       });
     }
   }
@@ -1215,7 +1285,9 @@ async function hydrateSceneItemsWithAssets(items, assetStore, options = {}) {
     objectUrls,
     {
       imageStore,
-      pdfPageConcurrency}
+      pdfPageConcurrency,
+      preferCachedRasters
+    }
   );
   return {
     items: items.map((item) => {
@@ -1292,9 +1364,10 @@ async function ingestAssetFilesToSceneItems(options) {
     createId = createShapeId,
     gapWorld = 16,
     stepWorld = 48,
-    pdfScale = 1.5,
+    pdfScale = 1.15,
     pdfPageConcurrency = 2,
     decorateItem,
+    onItemsReady,
     onError
   } = options;
   const items = [];
@@ -1316,55 +1389,56 @@ async function ingestAssetFilesToSceneItems(options) {
     }
     try {
       if (kind === "pdf") {
-        const [uploadResult2, pages] = await Promise.all([
-          uploadAssetIfNeeded(assetStore, file, kind),
-          loadPdfToStore(file, imageStore, {
-            scale: pdfScale,
-            pageConcurrency: pdfPageConcurrency
-          })
-        ]);
-        for (const page of pages) {
-          const fullUrl2 = await createBlobUrlFromStore(imageStore, page.blobId);
-          const naturalTopY2 = worldCenter.y - page.height / 2;
-          const stackedTopY = occupiedBottomY == null ? naturalTopY2 : occupiedBottomY + gapWorld;
-          const bounds2 = {
-            x: worldCenter.x - page.width / 2,
-            y: Math.max(naturalTopY2, stackedTopY),
-            width: page.width,
-            height: page.height
-          };
-          const itemContext2 = {
-            file,
-            kind,
-            itemIndex: items.length,
-            pageNumber: page.pageNumber
-          };
-          const item2 = finalizeIngestedItem(
-            {
-              id: createId(),
-              x: bounds2.x,
-              y: bounds2.y,
-              bounds: { ...bounds2 },
-              toolKind: "image",
-              imageBlobId: page.blobId,
-              imageRasterHref: fullUrl2 ?? void 0,
-              imageIntrinsicSize: {
-                width: page.width,
-                height: page.height
+        const uploadResultPromise = uploadAssetIfNeeded(assetStore, file, kind);
+        await loadPdfToStore(file, imageStore, {
+          scale: pdfScale,
+          pageConcurrency: pdfPageConcurrency,
+          storeThumbnails: false,
+          onPageStored: async (page) => {
+            const uploadResult2 = await uploadResultPromise;
+            const fullUrl2 = await createBlobUrlFromStore(imageStore, page.blobId);
+            const naturalTopY2 = worldCenter.y - page.height / 2;
+            const stackedTopY = occupiedBottomY == null ? naturalTopY2 : occupiedBottomY + gapWorld;
+            const bounds2 = {
+              x: worldCenter.x - page.width / 2,
+              y: Math.max(naturalTopY2, stackedTopY),
+              width: page.width,
+              height: page.height
+            };
+            const itemContext2 = {
+              file,
+              kind,
+              itemIndex: items.length,
+              pageNumber: page.pageNumber
+            };
+            const item2 = finalizeIngestedItem(
+              {
+                id: createId(),
+                x: bounds2.x,
+                y: bounds2.y,
+                bounds: { ...bounds2 },
+                toolKind: "image",
+                imageBlobId: page.blobId,
+                imageRasterHref: fullUrl2 ?? void 0,
+                imageIntrinsicSize: {
+                  width: page.width,
+                  height: page.height
+                },
+                childrenSvg: fullUrl2 ? buildRasterImageChildrenSvg(
+                  fullUrl2,
+                  { width: page.width, height: page.height },
+                  bounds2
+                ) : ""
               },
-              childrenSvg: fullUrl2 ? buildRasterImageChildrenSvg(
-                fullUrl2,
-                { width: page.width, height: page.height },
-                bounds2
-              ) : ""
-            },
-            itemContext2,
-            uploadResult2,
-            decorateItem
-          );
-          items.push(item2);
-          occupiedBottomY = bounds2.y + page.height;
-        }
+              itemContext2,
+              uploadResult2,
+              decorateItem
+            );
+            items.push(item2);
+            occupiedBottomY = bounds2.y + page.height;
+            onItemsReady?.([item2], { file, kind });
+          }
+        });
         hasImagePlacementBase = false;
         imagePlacementIndex = 0;
         imageYOffsetAdjustment = 0;
@@ -1417,6 +1491,7 @@ async function ingestAssetFilesToSceneItems(options) {
         decorateItem
       );
       items.push(item);
+      onItemsReady?.([item], { file, kind });
       imagePlacementIndex++;
       occupiedBottomY = occupiedBottomY == null ? bounds.y + height : Math.max(occupiedBottomY, bounds.y + height);
     } catch (error) {
@@ -7329,7 +7404,13 @@ var VectorViewport = forwardRef(
               y: worldY
             },
             imageStore: store,
-            assetStore: assetStoreRef.current ?? void 0
+            assetStore: assetStoreRef.current ?? void 0,
+            onItemsReady: (nextItems) => {
+              if (nextItems.length === 0) return;
+              setLoadingSkeletons([]);
+              change([...itemsRef.current, ...nextItems]);
+              setEffectiveSelectedIdsRef.current(nextItems.map((item) => item.id));
+            }
           });
           if (result.errors.length > 0) {
             for (const error of result.errors) {
@@ -7337,8 +7418,6 @@ var VectorViewport = forwardRef(
             }
           }
           if (result.items.length === 0) return;
-          change([...itemsRef.current, ...result.items]);
-          setEffectiveSelectedIdsRef.current(result.items.map((item) => item.id));
         } finally {
           setLoadingSkeletons([]);
         }