canvu-react 0.3.13 → 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;
     }
   );
 }
@@ -1338,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 = [];
@@ -1362,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;
@@ -1463,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) {
@@ -7375,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) {
@@ -7383,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([]);
         }