canvu-react 0.3.13 → 0.3.16

package/dist/react.d.cts

@@ -68,6 +68,7 @@ type IngestAssetFileError = {
  */
 type IngestAssetFilesToSceneItemsOptions = {
     files: readonly File[];
+    existingItems?: readonly VectorSceneItem[];
     worldCenter: {
         x: number;
         y: number;
@@ -107,10 +108,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

@@ -68,6 +68,7 @@ type IngestAssetFileError = {
  */
 type IngestAssetFilesToSceneItemsOptions = {
     files: readonly File[];
+    existingItems?: readonly VectorSceneItem[];
     worldCenter: {
         x: number;
         y: number;
@@ -107,10 +108,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;
     }
   );
 }
@@ -1332,23 +1358,21 @@ async function uploadAssetIfNeeded(assetStore, file, kind) {
 async function ingestAssetFilesToSceneItems(options) {
   const {
     files,
+    existingItems = [],
     worldCenter,
     assetStore,
     imageStore = new IndexedDbImageStore(),
     createId = createShapeId,
     gapWorld = 16,
-    stepWorld = 48,
-    pdfScale = 1.5,
+    pdfScale = 1.15,
     pdfPageConcurrency = 2,
     decorateItem,
+    onItemsReady,
     onError
   } = options;
   const items = [];
   const errors = [];
-  let imagePlacementIndex = 0;
-  let occupiedBottomY = null;
-  let imageYOffsetAdjustment = 0;
-  let hasImagePlacementBase = false;
+  let occupiedBottomY = existingItems.length > 0 ? Math.max(...existingItems.map((item) => item.bounds.y + item.bounds.height)) : null;
   for (const file of files) {
     const kind = getAssetKindForFile(file);
     if (!kind) {
@@ -1362,58 +1386,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 stackedTopY2 = occupiedBottomY == null ? naturalTopY2 : occupiedBottomY + gapWorld;
+            const bounds2 = {
+              x: worldCenter.x - page.width / 2,
+              y: Math.max(naturalTopY2, stackedTopY2),
+              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;
-        }
-        hasImagePlacementBase = false;
-        imagePlacementIndex = 0;
-        imageYOffsetAdjustment = 0;
+              itemContext2,
+              uploadResult2,
+              decorateItem
+            );
+            items.push(item2);
+            occupiedBottomY = bounds2.y + page.height;
+            onItemsReady?.([item2], { file, kind });
+          }
+        });
         continue;
       }
       const [uploadResult, storedImage] = await Promise.all([
@@ -1424,17 +1446,11 @@ async function ingestAssetFilesToSceneItems(options) {
       const fullUrl = await createBlobUrlFromStore(imageStore, blobId);
       const thumbBlob = await imageStore.getThumbnail(thumbnailBlobId);
       const thumbnailHref = thumbBlob ? URL.createObjectURL(thumbBlob) : null;
-      const ox = imagePlacementIndex % 8 * stepWorld;
-      const oy = Math.floor(imagePlacementIndex / 8) * stepWorld;
-      const naturalTopY = worldCenter.y - height / 2 + oy;
-      if (!hasImagePlacementBase) {
-        const minimumTopY = occupiedBottomY == null ? naturalTopY : occupiedBottomY + gapWorld;
-        imageYOffsetAdjustment = Math.max(0, minimumTopY - naturalTopY);
-        hasImagePlacementBase = true;
-      }
+      const naturalTopY = worldCenter.y - height / 2;
+      const stackedTopY = occupiedBottomY == null ? naturalTopY : occupiedBottomY + gapWorld;
       const bounds = {
-        x: worldCenter.x - width / 2 + ox,
-        y: naturalTopY + imageYOffsetAdjustment,
+        x: worldCenter.x - width / 2,
+        y: Math.max(naturalTopY, stackedTopY),
         width,
         height
       };
@@ -1463,7 +1479,7 @@ async function ingestAssetFilesToSceneItems(options) {
         decorateItem
       );
       items.push(item);
-      imagePlacementIndex++;
+      onItemsReady?.([item], { file, kind });
       occupiedBottomY = occupiedBottomY == null ? bounds.y + height : Math.max(occupiedBottomY, bounds.y + height);
     } catch (error) {
       const fileError = {
@@ -5974,7 +5990,7 @@ body[data-canvu-pen-active="true"] [data-slot="shape-context-menu"] * {
 }
 `;
 function debugApplePencilPointer(phase, detail) {
-  console.debug(`[canvu][apple-pencil] ${phase}`, detail);
+  return;
 }
 var MARKER_TOOL_STYLE = {
   stroke: "#fde047",
@@ -6574,7 +6590,6 @@ var VectorViewport = forwardRef(
     const captureInteractionPointer = useCallback(
       (target, pointerId, options) => {
         const captureNativePointer = options?.captureNativePointer ?? true;
-        debugApplePencilPointer("capture", { pointerId, captureNativePointer });
         activeInteractionPointerIdRef.current = pointerId;
         activeInteractionPointerTargetRef.current = captureNativePointer ? target : null;
         if (captureNativePointer) {
@@ -6586,7 +6601,6 @@ var VectorViewport = forwardRef(
     const releaseInteractionPointer = useCallback(() => {
       const pointerId = activeInteractionPointerIdRef.current;
       const target = activeInteractionPointerTargetRef.current;
-      debugApplePencilPointer("release", { pointerId });
       if (pointerId != null && target) {
         try {
           if (target.hasPointerCapture(pointerId)) {
@@ -6619,8 +6633,6 @@ var VectorViewport = forwardRef(
         const itemId = strokeState.itemId;
         const style = { ...strokeStyleRef.current };
         debugApplePencilPointer("finalize-stroke", {
-          pointerType,
-          tool,
           points: pts.length
         });
         dragStateRef.current = { kind: "idle" };
@@ -7370,12 +7382,19 @@ var VectorViewport = forwardRef(
           }
           const result = await ingestAssetFilesToSceneItems({
             files,
+            existingItems: itemsRef.current,
             worldCenter: {
               x: worldX,
               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 +7402,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([]);
         }
@@ -7393,12 +7410,12 @@ var VectorViewport = forwardRef(
     );
     const handleImageFileChange = useCallback(
       async (e) => {
-        const file = e.target.files?.[0];
+        const files = e.target.files ? Array.from(e.target.files) : [];
         e.target.value = "";
         const pending = pendingImagePlacementRef.current;
         pendingImagePlacementRef.current = null;
-        if (!file || !pending) return;
-        await placeImageFilesAtWorld([file], pending.worldX, pending.worldY);
+        if (files.length === 0 || !pending) return;
+        await placeImageFilesAtWorld(files, pending.worldX, pending.worldY);
       },
       [placeImageFilesAtWorld]
     );
@@ -7494,14 +7511,12 @@ var VectorViewport = forwardRef(
             pointerType: e.pointerType,
             pointerId: e.pointerId,
             pressure: e.pointerType === "pen" ? e.pressure : void 0,
-            activePointerId,
             dragKind: currentDragState.kind
           });
         }
         if (e.pointerType === "pen" && currentDragState.kind === "stroke" && currentDragState.pointerType === "pen") {
           debugApplePencilPointer("pen-reentry", {
             pointerId: e.pointerId,
-            previousPointerId: activePointerId,
             previousPoints: currentDragState.points.length
           });
           finalizeStrokeDragState(currentDragState);
@@ -7847,9 +7862,7 @@ var VectorViewport = forwardRef(
         debugApplePencilPointer("native-pointerdown", {
           pointerType: e.pointerType,
           pointerId: e.pointerId,
-          pressure: e.pressure,
-          tool
-        });
+          pressure: e.pressure});
         e.preventDefault();
         e.stopImmediatePropagation();
       };
@@ -7949,9 +7962,7 @@ var VectorViewport = forwardRef(
         debugApplePencilPointer("touchstart-stroke", {
           touchId: touch.identifier,
           touchType: touchKind(touch),
-          force: touchPressure(touch),
-          tool
-        });
+          force: touchPressure(touch)});
         stopTouchEvent(ev);
       };
       const onTouchMove = (ev) => {
@@ -8673,6 +8684,7 @@ var VectorViewport = forwardRef(
             {
               ref: imageInputRef,
               type: "file",
+              multiple: true,
               accept: "image/*,application/pdf",
               style: { display: "none" },
               "aria-label": "Select image or PDF to place on canvas",