canvu-react 0.3.14 → 0.3.17

package/README.md

@@ -308,6 +308,11 @@ 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/react.cjs

@@ -1365,12 +1365,12 @@ 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.15,
     pdfPageConcurrency = 2,
     decorateItem,
@@ -1379,10 +1379,7 @@ async function ingestAssetFilesToSceneItems(options) {
   } = 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) {
@@ -1405,10 +1402,10 @@ async function ingestAssetFilesToSceneItems(options) {
             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 stackedTopY2 = occupiedBottomY == null ? naturalTopY2 : occupiedBottomY + gapWorld;
             const bounds2 = {
               x: worldCenter.x - page.width / 2,
-              y: Math.max(naturalTopY2, stackedTopY),
+              y: Math.max(naturalTopY2, stackedTopY2),
               width: page.width,
               height: page.height
             };
@@ -1446,9 +1443,6 @@ async function ingestAssetFilesToSceneItems(options) {
             onItemsReady?.([item2], { file, kind });
           }
         });
-        hasImagePlacementBase = false;
-        imagePlacementIndex = 0;
-        imageYOffsetAdjustment = 0;
         continue;
       }
       const [uploadResult, storedImage] = await Promise.all([
@@ -1459,17 +1453,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
       };
@@ -1499,7 +1487,6 @@ async function ingestAssetFilesToSceneItems(options) {
       );
       items.push(item);
       onItemsReady?.([item], { file, kind });
-      imagePlacementIndex++;
       occupiedBottomY = occupiedBottomY == null ? bounds.y + height : Math.max(occupiedBottomY, bounds.y + height);
     } catch (error) {
       const fileError = {
@@ -1686,11 +1673,7 @@ function VectorSelectionInspector({
                   ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
                 })
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-              strokeWidth2,
-              "px"
-            ] })
+            )
           ] }),
           showMarkerOpacity2 && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
             "Opacidade (marcador)",
@@ -1796,11 +1779,7 @@ function VectorSelectionInspector({
                 strokeWidth: Number(e.target.value)
               })
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-            strokeWidth,
-            "px"
-          ] })
+          )
         ] }),
         showMarkerOpacity && firstMarker && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
           "Opacidade (marcador)",
@@ -6010,7 +5989,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",
@@ -6610,7 +6589,6 @@ var VectorViewport = react.forwardRef(
     const captureInteractionPointer = react.useCallback(
       (target, pointerId, options) => {
         const captureNativePointer = options?.captureNativePointer ?? true;
-        debugApplePencilPointer("capture", { pointerId, captureNativePointer });
         activeInteractionPointerIdRef.current = pointerId;
         activeInteractionPointerTargetRef.current = captureNativePointer ? target : null;
         if (captureNativePointer) {
@@ -6622,7 +6600,6 @@ var VectorViewport = react.forwardRef(
     const releaseInteractionPointer = react.useCallback(() => {
       const pointerId = activeInteractionPointerIdRef.current;
       const target = activeInteractionPointerTargetRef.current;
-      debugApplePencilPointer("release", { pointerId });
       if (pointerId != null && target) {
         try {
           if (target.hasPointerCapture(pointerId)) {
@@ -6655,8 +6632,6 @@ var VectorViewport = react.forwardRef(
         const itemId = strokeState.itemId;
         const style = { ...strokeStyleRef.current };
         debugApplePencilPointer("finalize-stroke", {
-          pointerType,
-          tool,
           points: pts.length
         });
         dragStateRef.current = { kind: "idle" };
@@ -7406,6 +7381,7 @@ var VectorViewport = react.forwardRef(
           }
           const result = await ingestAssetFilesToSceneItems({
             files,
+            existingItems: itemsRef.current,
             worldCenter: {
               x: worldX,
               y: worldY
@@ -7433,12 +7409,12 @@ var VectorViewport = react.forwardRef(
     );
     const handleImageFileChange = react.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]
     );
@@ -7534,14 +7510,12 @@ var VectorViewport = react.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);
@@ -7706,10 +7680,10 @@ var VectorViewport = react.forwardRef(
             return;
           }
           if (!e.shiftKey && cur.length > 0) {
-            const selectedArrowOrLine = cur.map((id) => resolved.find((it) => it.id === id)).filter(
-              (it) => it != null && !it.locked && (it.toolKind === "line" || it.toolKind === "arrow")
+            const selectedUnlockedItems = cur.map((id) => resolved.find((it) => it.id === id)).filter(
+              (it) => it != null && !it.locked
             );
-            if (selectedArrowOrLine.some(
+            if (selectedUnlockedItems.some(
               (it) => pointInSelectedItemBounds(it, worldX, worldY)
             )) {
               const snapshots = {};
@@ -7887,9 +7861,7 @@ var VectorViewport = react.forwardRef(
         debugApplePencilPointer("native-pointerdown", {
           pointerType: e.pointerType,
           pointerId: e.pointerId,
-          pressure: e.pressure,
-          tool
-        });
+          pressure: e.pressure});
         e.preventDefault();
         e.stopImmediatePropagation();
       };
@@ -7989,9 +7961,7 @@ var VectorViewport = react.forwardRef(
         debugApplePencilPointer("touchstart-stroke", {
           touchId: touch.identifier,
           touchType: touchKind(touch),
-          force: touchPressure(touch),
-          tool
-        });
+          force: touchPressure(touch)});
         stopTouchEvent(ev);
       };
       const onTouchMove = (ev) => {
@@ -8713,6 +8683,7 @@ var VectorViewport = react.forwardRef(
             {
               ref: imageInputRef,
               type: "file",
+              multiple: true,
               accept: "image/*,application/pdf",
               style: { display: "none" },
               "aria-label": "Select image or PDF to place on canvas",