canvu-react 0.3.13 → 0.3.16

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,15 @@ 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.
+
+The native file tool now accepts multiple images and PDFs from the picker and
+stacks every imported asset vertically. When the board already has uploaded
+images or PDFs, new imports are inserted immediately after the existing stack
+instead of overlapping previous content.
+
 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;
     }
   );
 }