canvu-react 0.3.10 → 0.3.12

package/dist/react.cjs

@@ -928,35 +928,336 @@ function canvasToBlob2(canvas, mime, quality) {
     );
   });
 }
+function normalizePdfPageNumbers(pageNumbers, pageCount) {
+  if (!pageNumbers || pageNumbers.length === 0) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+  return [...new Set(pageNumbers)].filter((pageNumber) => pageNumber >= 1 && pageNumber <= pageCount).sort((left, right) => left - right);
+}
+async function runWithConcurrency(items, concurrency, execute) {
+  const results = new Array(items.length);
+  let nextIndex = 0;
+  const workerCount = Math.max(1, Math.min(concurrency, items.length));
+  await Promise.all(
+    Array.from({ length: workerCount }, async () => {
+      while (nextIndex < items.length) {
+        const currentIndex = nextIndex;
+        nextIndex += 1;
+        const item = items[currentIndex];
+        if (item === void 0) {
+          continue;
+        }
+        results[currentIndex] = await execute(item);
+      }
+    })
+  );
+  return results;
+}
 async function loadPdfToStore(file, store, options) {
   const scale = options?.scale ?? 1.5;
+  const pageConcurrency = options?.pageConcurrency ?? 2;
   const pdfjs = await getPdfJs();
   const arrayBuffer = await file.arrayBuffer();
   const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;
-  const results = [];
-  for (let i = 1; i <= pdf.numPages; i++) {
-    const page = await pdf.getPage(i);
-    const { canvas, width, height } = await renderPageToCanvas(page, scale);
-    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 pageNumbers = normalizePdfPageNumbers(options?.pageNumbers, pdf.numPages);
+  return await runWithConcurrency(
+    pageNumbers,
+    pageConcurrency,
+    async (pageNumber) => {
+      const page = await pdf.getPage(pageNumber);
+      const { canvas, width, height } = await renderPageToCanvas(page, scale);
+      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 {
+        blobId,
+        thumbnailBlobId,
+        width,
+        height,
+        pageNumber
+      };
     }
-    const thumbBlob = await canvasToBlob2(thumbCanvas, mime);
-    const thumbnailBlobId = await store.storeThumbnail(thumbBlob);
-    results.push({ blobId, thumbnailBlobId, width, height, pageNumber: i });
+  );
+}
+
+// src/react/asset-hydration.ts
+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();
+function buildImageHydrationKey(assetId) {
+  return `image:${assetId}`;
+}
+function buildPdfHydrationKey(assetId, pageNumber, scale) {
+  return `pdf:${assetId}:page:${pageNumber}:scale:${scale}`;
+}
+function getCacheRequest(key) {
+  return new Request(
+    `https://canvu.local/asset-hydration/${encodeURIComponent(key)}`
+  );
+}
+async function openHydrationCache() {
+  if (typeof caches === "undefined") return null;
+  try {
+    return await caches.open(HYDRATION_CACHE_NAME);
+  } catch {
+    return null;
   }
-  return results;
+}
+async function readCachedHydrationBlob(key) {
+  const cache = await openHydrationCache();
+  if (!cache) return null;
+  try {
+    const response = await cache.match(getCacheRequest(key));
+    if (!response?.ok) return null;
+    return await response.blob();
+  } catch {
+    return null;
+  }
+}
+async function writeCachedHydrationBlob(key, blob) {
+  const cache = await openHydrationCache();
+  if (!cache) return;
+  try {
+    await cache.put(getCacheRequest(key), new Response(blob));
+  } catch {
+  }
+}
+async function fetchBlob(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) return null;
+    return await response.blob();
+  } catch {
+    return null;
+  }
+}
+async function getHydrationBlob(key, preferCachedRasters, loader) {
+  const cached = preferCachedRasters ? await readCachedHydrationBlob(key) : null;
+  if (cached) return cached;
+  const inFlight = hydrationBlobPromises.get(key);
+  if (inFlight) return await inFlight;
+  const nextPromise = (async () => {
+    const blob = await loader();
+    if (blob) {
+      await writeCachedHydrationBlob(key, blob);
+    }
+    return blob;
+  })();
+  hydrationBlobPromises.set(key, nextPromise);
+  try {
+    return await nextPromise;
+  } finally {
+    hydrationBlobPromises.delete(key);
+  }
+}
+function registerObjectUrl(objectUrls, blob) {
+  const href = URL.createObjectURL(blob);
+  objectUrls.push(href);
+  return href;
+}
+function getHydrationRequests(items, assetStore, pdfScale) {
+  if (!assetStore.getHydrationRequest) return [];
+  return items.flatMap((item) => {
+    const request = assetStore.getHydrationRequest?.(item);
+    if (!request) return [];
+    return [
+      {
+        request: {
+          ...request,
+          scale: request.scale ?? pdfScale
+        }
+      }
+    ];
+  });
+}
+function createPdfHydrationGroups(requests) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const entry of requests) {
+    if (entry.request.kind !== "pdf" || entry.request.pageNumber == null) continue;
+    const scale = entry.request.scale ?? DEFAULT_PDF_SCALE;
+    const key = `${entry.request.assetId}:${scale}`;
+    const existingGroup = groups.get(key);
+    if (existingGroup) {
+      if (!existingGroup.pageNumbers.includes(entry.request.pageNumber)) {
+        existingGroup.pageNumbers.push(entry.request.pageNumber);
+      }
+      continue;
+    }
+    groups.set(key, {
+      assetId: entry.request.assetId,
+      scale,
+      pageNumbers: [entry.request.pageNumber]
+    });
+  }
+  return [...groups.values()];
+}
+async function hydrateImageAssets(requests, resolvedAssetUrls, objectUrls, preferCachedRasters) {
+  const uniqueAssetIds = [
+    ...new Set(requests.map((entry) => entry.request.assetId))
+  ];
+  const hydratedEntries = await Promise.all(
+    uniqueAssetIds.map(async (assetId) => {
+      const resolvedAsset = resolvedAssetUrls[assetId];
+      if (!resolvedAsset?.url) {
+        return [assetId, null];
+      }
+      const blob = await getHydrationBlob(
+        buildImageHydrationKey(assetId),
+        preferCachedRasters,
+        async () => await fetchBlob(resolvedAsset.url)
+      );
+      if (!blob) {
+        return [assetId, null];
+      }
+      return [
+        assetId,
+        {
+          href: registerObjectUrl(objectUrls, blob)
+        }
+      ];
+    })
+  );
+  return new Map(hydratedEntries);
+}
+async function hydratePdfAssets(requests, resolvedAssetUrls, objectUrls, options) {
+  const hydratedPages = /* @__PURE__ */ new Map();
+  const groups = createPdfHydrationGroups(requests);
+  for (const group of groups) {
+    const resolvedAsset = resolvedAssetUrls[group.assetId];
+    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);
+        continue;
+      }
+      hydratedPages.set(cacheKey, {
+        href: registerObjectUrl(objectUrls, cachedBlob)
+      });
+    }
+    if (missingPages.length === 0) {
+      continue;
+    }
+    const pdfBlob = await fetchBlob(resolvedAsset.url);
+    if (!pdfBlob) {
+      continue;
+    }
+    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
+      );
+      const pageBlob = await options.imageStore.getOriginal(renderedPage.blobId);
+      if (!pageBlob) {
+        continue;
+      }
+      await writeCachedHydrationBlob(cacheKey, pageBlob);
+      hydratedPages.set(cacheKey, {
+        href: registerObjectUrl(objectUrls, pageBlob),
+        width: renderedPage.width,
+        height: renderedPage.height
+      });
+    }
+  }
+  return hydratedPages;
+}
+async function hydrateSceneItemsWithAssets(items, assetStore, options = {}) {
+  if (!assetStore.resolve || !assetStore.getHydrationRequest) {
+    return {
+      items: [...items],
+      objectUrls: []
+    };
+  }
+  const pdfScale = options.pdfScale ?? DEFAULT_PDF_SCALE;
+  const pdfPageConcurrency = options.pdfPageConcurrency ?? DEFAULT_PDF_PAGE_CONCURRENCY;
+  const preferCachedRasters = options.preferCachedRasters ?? true;
+  const imageStore = options.imageStore ?? new IndexedDbImageStore();
+  const hydrationRequests = getHydrationRequests(items, assetStore, pdfScale);
+  if (hydrationRequests.length === 0) {
+    return {
+      items: [...items],
+      objectUrls: []
+    };
+  }
+  const assetIds = [
+    ...new Set(hydrationRequests.map((entry) => entry.request.assetId))
+  ];
+  const resolvedAssetUrls = await assetStore.resolve({ assetIds });
+  const objectUrls = [];
+  const hydratedImages = await hydrateImageAssets(
+    hydrationRequests.filter((entry) => entry.request.kind === "image"),
+    resolvedAssetUrls,
+    objectUrls,
+    preferCachedRasters
+  );
+  const hydratedPdfPages = await hydratePdfAssets(
+    hydrationRequests.filter((entry) => entry.request.kind === "pdf"),
+    resolvedAssetUrls,
+    objectUrls,
+    {
+      imageStore,
+      pdfPageConcurrency}
+  );
+  return {
+    items: items.map((item) => {
+      const request = assetStore.getHydrationRequest?.(item);
+      if (!request || item.toolKind !== "image") return item;
+      if (request.kind === "image") {
+        const hydratedImage = hydratedImages.get(request.assetId);
+        if (!hydratedImage) return item;
+        return rebuildItemSvg({
+          ...item,
+          imageRasterHref: hydratedImage.href,
+          imageThumbnailHref: hydratedImage.href
+        });
+      }
+      if (request.pageNumber == null) return item;
+      const hydratedPdfPage = hydratedPdfPages.get(
+        buildPdfHydrationKey(
+          request.assetId,
+          request.pageNumber,
+          request.scale ?? pdfScale
+        )
+      );
+      if (!hydratedPdfPage) return item;
+      return rebuildItemSvg({
+        ...item,
+        imageRasterHref: hydratedPdfPage.href,
+        imageThumbnailHref: hydratedPdfPage.href,
+        imageIntrinsicSize: {
+          width: item.imageIntrinsicSize?.width ?? Math.max(1, Math.round(hydratedPdfPage.width ?? item.bounds.width)),
+          height: item.imageIntrinsicSize?.height ?? Math.max(1, Math.round(hydratedPdfPage.height ?? item.bounds.height))
+        }
+      });
+    }),
+    objectUrls
+  };
 }
 
 // src/react/asset-ingestion.ts
@@ -999,6 +1300,7 @@ async function ingestAssetFilesToSceneItems(options) {
     gapWorld = 16,
     stepWorld = 48,
     pdfScale = 1.5,
+    pdfPageConcurrency = 2,
     decorateItem,
     onError
   } = options;
@@ -1020,9 +1322,14 @@ async function ingestAssetFilesToSceneItems(options) {
       continue;
     }
     try {
-      const uploadResult = await uploadAssetIfNeeded(assetStore, file, kind);
       if (kind === "pdf") {
-        const pages = await loadPdfToStore(file, imageStore, { scale: pdfScale });
+        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;
@@ -1059,7 +1366,7 @@ async function ingestAssetFilesToSceneItems(options) {
               ) : ""
             },
             itemContext2,
-            uploadResult,
+            uploadResult2,
             decorateItem
           );
           items.push(item2);
@@ -1070,10 +1377,11 @@ async function ingestAssetFilesToSceneItems(options) {
         imageYOffsetAdjustment = 0;
         continue;
       }
-      const { blobId, thumbnailBlobId, width, height } = await loadImageToStore(
-        file,
-        imageStore
-      );
+      const [uploadResult, storedImage] = await Promise.all([
+        uploadAssetIfNeeded(assetStore, file, kind),
+        loadImageToStore(file, imageStore)
+      ]);
+      const { blobId, thumbnailBlobId, width, height } = storedImage;
       const fullUrl = await createBlobUrlFromStore(imageStore, blobId);
       const thumbBlob = await imageStore.getThumbnail(thumbnailBlobId);
       const thumbnailHref = thumbBlob ? URL.createObjectURL(thumbBlob) : null;
@@ -4233,16 +4541,14 @@ function itemHitTestWorldPoint(item, worldX, worldY, options) {
           return true;
         }
       }
+      return false;
     }
-    if (pts?.length === 1) {
+    if (pts && pts.length === 1) {
       const p = pts[0];
-      if (p) {
-        const cw = itemLocalToWorld(p.x, p.y, item.x, item.y, w, h, rot);
-        const dsq = (worldX - cw.x) ** 2 + (worldY - cw.y) ** 2;
-        if (dsq <= tolSq) {
-          return true;
-        }
-      }
+      if (!p) return false;
+      const cw = itemLocalToWorld(p.x, p.y, item.x, item.y, w, h, rot);
+      const dsq = (worldX - cw.x) ** 2 + (worldY - cw.y) ** 2;
+      return dsq <= tolSq;
     }
     return hitTestFilledShape(item, worldX, worldY);
   }
@@ -4787,101 +5093,12 @@ init_shape_builders();
 var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var ERASER_TINT = "#cbd5e1";
 var ERASER_TINT_OPACITY = 0.95;
+var ERASER_PREVIEW_OPACITY = 0.3;
 function pointsToSmoothPath(points) {
   if (points.length === 0) return null;
   const d = smoothFreehandPointsToPathD(points);
   return d || null;
 }
-function renderEraserSkeleton(it, overlayStrokePx) {
-  const b = normalizeRect(it.bounds);
-  const tool = it.toolKind;
-  const strokeWidth = Math.max(it.strokeWidth ?? 2, overlayStrokePx);
-  const common = {
-    stroke: ERASER_TINT,
-    strokeWidth,
-    strokeOpacity: ERASER_TINT_OPACITY,
-    vectorEffect: "non-scaling-stroke",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    fill: "none"
-  };
-  if (tool === "rect") {
-    return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: b.width, height: b.height, ...common });
-  }
-  if (tool === "ellipse") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "ellipse",
-      {
-        cx: b.width / 2,
-        cy: b.height / 2,
-        rx: Math.max(0, b.width / 2),
-        ry: Math.max(0, b.height / 2),
-        ...common
-      }
-    );
-  }
-  if (tool === "line" || tool === "arrow") {
-    const ln = it.line;
-    if (!ln)
-      return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: b.width, height: b.height, ...common });
-    const geometry = tool === "arrow" ? computeStraightArrowGeometry(
-      ln,
-      Math.max(it.strokeWidth ?? 2, overlayStrokePx)
-    ) : null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "line",
-        {
-          x1: ln.x1,
-          y1: ln.y1,
-          x2: geometry?.shaftEndX ?? ln.x2,
-          y2: geometry?.shaftEndY ?? ln.y2,
-          ...common
-        }
-      ),
-      tool === "arrow" && geometry ? /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: `M ${geometry.headLeftX} ${geometry.headLeftY} L ${geometry.headTipX} ${geometry.headTipY} L ${geometry.headRightX} ${geometry.headRightY}`,
-          ...common
-        }
-      ) : null
-    ] });
-  }
-  if (tool === "draw" || tool === "marker" || tool === "pencil" || tool === "brush") {
-    const pts = it.pathPointsLocal ?? [];
-    if (pts.length === 1) {
-      const p = pts[0];
-      if (!p) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          cx: p.x,
-          cy: p.y,
-          r: Math.max((it.strokeWidth ?? 2) / 2, 2),
-          fill: ERASER_TINT,
-          fillOpacity: 0.8,
-          vectorEffect: "non-scaling-stroke"
-        }
-      );
-    }
-    const d = pointsToSmoothPath(pts);
-    if (d) {
-      return /* @__PURE__ */ jsxRuntime.jsx("path", { d, ...common, shapeRendering: "geometricPrecision" });
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "rect",
-    {
-      x: 0,
-      y: 0,
-      width: b.width,
-      height: b.height,
-      ...common,
-      strokeDasharray: "4 4"
-    }
-  );
-}
 function InteractionOverlay({
   camera,
   cameraVersion: _cameraVersion,
@@ -5129,16 +5346,15 @@ function InteractionOverlay({
   }
   let eraserPreview = null;
   if (eraserPreviewItems.length > 0) {
-    eraserPreview = /* @__PURE__ */ jsxRuntime.jsx("g", { children: eraserPreviewItems.map((it) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "g",
-        {
-          transform: formatItemPlacementTransform(it),
-          children: renderEraserSkeleton(it, overlayStrokePx)
-        },
-        `erase-preview-${it.id}`
-      );
-    }) });
+    eraserPreview = /* @__PURE__ */ jsxRuntime.jsx("g", { children: eraserPreviewItems.map((it) => /* @__PURE__ */ jsxRuntime.jsx(
+      "g",
+      {
+        transform: formatItemPlacementTransform(it),
+        opacity: ERASER_PREVIEW_OPACITY,
+        dangerouslySetInnerHTML: { __html: it.childrenSvg }
+      },
+      `erase-preview-${it.id}`
+    )) });
   }
   let marqueeCandidates = null;
   if (marqueeCandidateItems.length > 0) {
@@ -8637,6 +8853,7 @@ exports.createNoopPersistenceAdapter = createNoopPersistenceAdapter;
 exports.createToolPlugin = createToolPlugin;
 exports.cursorForVectorToolId = cursorForVectorToolId;
 exports.getBoardPositionStyle = getBoardPositionStyle;
+exports.hydrateSceneItemsWithAssets = hydrateSceneItemsWithAssets;
 exports.ingestAssetFilesToSceneItems = ingestAssetFilesToSceneItems;
 exports.useCanvuChromeContext = useCanvuChromeContext;
 exports.useCanvuDocumentContext = useCanvuDocumentContext;