canvu-react 0.4.70 → 0.4.72

package/dist/{raster-image-canvas-nK9kM9UJ.d.cts → raster-image-canvas-ByaCKEVw.d.cts}

@@ -22,6 +22,8 @@ type VectorViewportAssetUploadRequest = {
     file: File;
     /** High-level bucket for routing image vs PDF upload behavior. */
     kind: VectorViewportAssetKind;
+    /** Optional lifecycle signal for cancelling in-flight uploads. */
+    signal?: AbortSignal;
 };
 /**
  * Persisted metadata returned by a custom asset upload.
@@ -179,6 +181,37 @@ type RasterImageCanvasRenderRequest = {
     cameraZoom: number;
     devicePixelRatio: number;
 };
+/**
+ * Bitmap-like source returned by `imageCanvasRendering.resolveCanvasSource`.
+ *
+ * Apps can render into an offscreen canvas, create an `ImageBitmap`, or wrap any
+ * other canvas-compatible source and let Canvu copy it into the visible canvas
+ * without changing the underlying SVG image URL.
+ */
+type RasterImageCanvasSource = {
+    width: number;
+    height: number;
+    draw: (context: CanvasRenderingContext2D) => void;
+    close?: () => void;
+};
+/**
+ * Input passed to `imageCanvasRendering.resolveCanvasSource`.
+ *
+ * Use this for custom async rendering pipelines such as PDF page rasterization.
+ * Canvu keeps the previous canvas visible while this request resolves and aborts
+ * stale requests when the item leaves the viewport or a sharper target is queued.
+ */
+type RasterImageCanvasSourceRequest = RasterImageCanvasRenderRequest & {
+    targetHref: string;
+    sourceKey: string;
+    signal: AbortSignal;
+};
+/**
+ * Maps an image item plus requested bitmap size to a custom canvas source.
+ *
+ * Return `null`/`undefined` to let Canvu fetch and decode the resolved URL.
+ */
+type RasterImageCanvasSourceResolver = (request: RasterImageCanvasSourceRequest) => RasterImageCanvasSource | null | undefined | Promise<RasterImageCanvasSource | null | undefined>;
 /**
  * Resolved raster source for a zoom-aware canvas redraw.
  *
@@ -209,6 +242,7 @@ type RasterImageCanvasRenderTargetResolver = (request: RasterImageCanvasRenderRe
 type RasterImageCanvasRenderingOptions = {
     resolveSourceSize?: RasterImageCanvasSourceSizeResolver;
     resolveRenderTarget?: RasterImageCanvasRenderTargetResolver;
+    resolveCanvasSource?: RasterImageCanvasSourceResolver;
     devicePixelRatio?: number;
     pixelHeadroom?: number;
     maxPixelCount?: number;
@@ -216,4 +250,4 @@ type RasterImageCanvasRenderingOptions = {
     upscaleRedrawRatio?: number;
 };
 
-export type { RasterImageCanvasRenderingOptions as R, VectorViewportAssetKind as V, VectorViewportAssetStore as a, RasterImageCanvasRenderRequest as b, RasterImageCanvasRenderTarget as c, RasterImageCanvasRenderTargetResolver as d, RasterImageCanvasSourceSizeRequest as e, RasterImageCanvasSourceSizeResolver as f, VectorViewportAssetHydrationRequest as g, VectorViewportAssetResolveRequest as h, VectorViewportAssetResolveResult as i, VectorViewportAssetUploadRequest as j, VectorViewportAssetUploadResult as k };
+export type { RasterImageCanvasRenderingOptions as R, VectorViewportAssetKind as V, VectorViewportAssetStore as a, RasterImageCanvasRenderRequest as b, RasterImageCanvasRenderTarget as c, RasterImageCanvasRenderTargetResolver as d, RasterImageCanvasSource as e, RasterImageCanvasSourceRequest as f, RasterImageCanvasSourceResolver as g, RasterImageCanvasSourceSizeRequest as h, RasterImageCanvasSourceSizeResolver as i, VectorViewportAssetHydrationRequest as j, VectorViewportAssetResolveRequest as k, VectorViewportAssetResolveResult as l, VectorViewportAssetUploadRequest as m, VectorViewportAssetUploadResult as n };

package/dist/{raster-image-canvas-CCOmB4NY.d.ts → raster-image-canvas-D3ZrySjr.d.ts}

@@ -22,6 +22,8 @@ type VectorViewportAssetUploadRequest = {
     file: File;
     /** High-level bucket for routing image vs PDF upload behavior. */
     kind: VectorViewportAssetKind;
+    /** Optional lifecycle signal for cancelling in-flight uploads. */
+    signal?: AbortSignal;
 };
 /**
  * Persisted metadata returned by a custom asset upload.
@@ -179,6 +181,37 @@ type RasterImageCanvasRenderRequest = {
     cameraZoom: number;
     devicePixelRatio: number;
 };
+/**
+ * Bitmap-like source returned by `imageCanvasRendering.resolveCanvasSource`.
+ *
+ * Apps can render into an offscreen canvas, create an `ImageBitmap`, or wrap any
+ * other canvas-compatible source and let Canvu copy it into the visible canvas
+ * without changing the underlying SVG image URL.
+ */
+type RasterImageCanvasSource = {
+    width: number;
+    height: number;
+    draw: (context: CanvasRenderingContext2D) => void;
+    close?: () => void;
+};
+/**
+ * Input passed to `imageCanvasRendering.resolveCanvasSource`.
+ *
+ * Use this for custom async rendering pipelines such as PDF page rasterization.
+ * Canvu keeps the previous canvas visible while this request resolves and aborts
+ * stale requests when the item leaves the viewport or a sharper target is queued.
+ */
+type RasterImageCanvasSourceRequest = RasterImageCanvasRenderRequest & {
+    targetHref: string;
+    sourceKey: string;
+    signal: AbortSignal;
+};
+/**
+ * Maps an image item plus requested bitmap size to a custom canvas source.
+ *
+ * Return `null`/`undefined` to let Canvu fetch and decode the resolved URL.
+ */
+type RasterImageCanvasSourceResolver = (request: RasterImageCanvasSourceRequest) => RasterImageCanvasSource | null | undefined | Promise<RasterImageCanvasSource | null | undefined>;
 /**
  * Resolved raster source for a zoom-aware canvas redraw.
  *
@@ -209,6 +242,7 @@ type RasterImageCanvasRenderTargetResolver = (request: RasterImageCanvasRenderRe
 type RasterImageCanvasRenderingOptions = {
     resolveSourceSize?: RasterImageCanvasSourceSizeResolver;
     resolveRenderTarget?: RasterImageCanvasRenderTargetResolver;
+    resolveCanvasSource?: RasterImageCanvasSourceResolver;
     devicePixelRatio?: number;
     pixelHeadroom?: number;
     maxPixelCount?: number;
@@ -216,4 +250,4 @@ type RasterImageCanvasRenderingOptions = {
     upscaleRedrawRatio?: number;
 };
 
-export type { RasterImageCanvasRenderingOptions as R, VectorViewportAssetKind as V, VectorViewportAssetStore as a, RasterImageCanvasRenderRequest as b, RasterImageCanvasRenderTarget as c, RasterImageCanvasRenderTargetResolver as d, RasterImageCanvasSourceSizeRequest as e, RasterImageCanvasSourceSizeResolver as f, VectorViewportAssetHydrationRequest as g, VectorViewportAssetResolveRequest as h, VectorViewportAssetResolveResult as i, VectorViewportAssetUploadRequest as j, VectorViewportAssetUploadResult as k };
+export type { RasterImageCanvasRenderingOptions as R, VectorViewportAssetKind as V, VectorViewportAssetStore as a, RasterImageCanvasRenderRequest as b, RasterImageCanvasRenderTarget as c, RasterImageCanvasRenderTargetResolver as d, RasterImageCanvasSource as e, RasterImageCanvasSourceRequest as f, RasterImageCanvasSourceResolver as g, RasterImageCanvasSourceSizeRequest as h, RasterImageCanvasSourceSizeResolver as i, VectorViewportAssetHydrationRequest as j, VectorViewportAssetResolveRequest as k, VectorViewportAssetResolveResult as l, VectorViewportAssetUploadRequest as m, VectorViewportAssetUploadResult as n };

package/dist/react.cjs

@@ -1208,7 +1208,8 @@ function getPdfJs() {
   }
   return pdfjsPromise;
 }
-async function renderPageToCanvas(page, scale) {
+async function renderPageToCanvas(page, scale, signal) {
+  throwIfAborted(signal);
   const raw = page.getViewport({ scale: 1 });
   const adjustedScale = Math.round(raw.width * scale) / raw.width;
   const viewport = page.getViewport({ scale: adjustedScale });
@@ -1221,22 +1222,48 @@ async function renderPageToCanvas(page, scale) {
   if (!ctx) throw new Error("Canvas 2D context unavailable");
   ctx.imageSmoothingEnabled = true;
   ctx.imageSmoothingQuality = "high";
-  await page.render({ canvas, viewport }).promise;
+  const renderTask = page.render({ canvas, viewport });
+  if (signal) {
+    const abortRender = () => {
+      renderTask.cancel();
+    };
+    signal.addEventListener("abort", abortRender, { once: true });
+    try {
+      await renderTask.promise;
+    } catch (error) {
+      if (signal.aborted) throw createAbortError();
+      throw error;
+    } finally {
+      signal.removeEventListener("abort", abortRender);
+    }
+  } else {
+    await renderTask.promise;
+  }
+  throwIfAborted(signal);
   return { canvas, width: w, height: h };
 }
+function createAbortError() {
+  return new DOMException("Aborted", "AbortError");
+}
+function throwIfAborted(signal) {
+  if (signal?.aborted) {
+    throw createAbortError();
+  }
+}
 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) {
+async function runWithConcurrency(items, concurrency, execute, signal) {
   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) {
+        throwIfAborted(signal);
         const currentIndex = nextIndex;
         nextIndex += 1;
         const item = items[currentIndex];
@@ -1244,6 +1271,7 @@ async function runWithConcurrency(items, concurrency, execute) {
           continue;
         }
         results[currentIndex] = await execute(item);
+        throwIfAborted(signal);
       }
     })
   );
@@ -1253,9 +1281,49 @@ async function loadPdfToStore(file, store, options) {
   const scale = options?.scale ?? 1.5;
   const pageConcurrency = options?.pageConcurrency ?? 2;
   const storeThumbnails = options?.storeThumbnails ?? false;
+  const signal = options?.signal;
+  throwIfAborted(signal);
   const pdfjs = await getPdfJs();
+  throwIfAborted(signal);
   const arrayBuffer = await file.arrayBuffer();
-  const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;
+  throwIfAborted(signal);
+  const loadingTask = pdfjs.getDocument({ data: arrayBuffer });
+  if (signal) {
+    const abortLoading = () => {
+      void loadingTask.destroy();
+    };
+    signal.addEventListener("abort", abortLoading, { once: true });
+    try {
+      const pdf2 = await loadingTask.promise;
+      signal.removeEventListener("abort", abortLoading);
+      return await loadPdfDocumentToStore(pdf2, store, {
+        scale,
+        pageNumbers: options?.pageNumbers,
+        pageConcurrency,
+        storeThumbnails,
+        signal,
+        onPageStored: options?.onPageStored
+      });
+    } catch (error) {
+      if (signal.aborted) throw createAbortError();
+      throw error;
+    } finally {
+      signal.removeEventListener("abort", abortLoading);
+    }
+  }
+  const pdf = await loadingTask.promise;
+  return await loadPdfDocumentToStore(pdf, store, {
+    scale,
+    pageNumbers: options?.pageNumbers,
+    pageConcurrency,
+    storeThumbnails,
+    onPageStored: options?.onPageStored
+  });
+}
+async function loadPdfDocumentToStore(pdf, store, options) {
+  const { pageConcurrency, scale, signal } = options;
+  const storeThumbnails = options.storeThumbnails ?? false;
+  throwIfAborted(signal);
   const pageNumbers = normalizePdfPageNumbers(options?.pageNumbers, pdf.numPages);
   const bufferedResults = /* @__PURE__ */ new Map();
   let nextEmitIndex = 0;
@@ -1270,7 +1338,9 @@ async function loadPdfToStore(file, store, options) {
         if (!bufferedResult) break;
         bufferedResults.delete(nextPageNumber);
         nextEmitIndex += 1;
+        throwIfAborted(signal);
         await options?.onPageStored?.(bufferedResult);
+        throwIfAborted(signal);
       }
     };
     const nextChain = emitChain.then(run, run);
@@ -1282,11 +1352,20 @@ async function loadPdfToStore(file, store, options) {
     pageNumbers,
     pageConcurrency,
     async (pageNumber) => {
+      throwIfAborted(signal);
       const page = await pdf.getPage(pageNumber);
-      const { canvas, width, height } = await renderPageToCanvas(page, scale);
+      throwIfAborted(signal);
+      const { canvas, width, height } = await renderPageToCanvas(
+        page,
+        scale,
+        signal
+      );
+      throwIfAborted(signal);
       const mime = "image/png";
       const pageBlob = await encodeCanvasToBlob(canvas, { mimeType: mime });
+      throwIfAborted(signal);
       const blobId = await store.storeOriginal(pageBlob);
+      throwIfAborted(signal);
       const thumbnailBlobId = storeThumbnails ? await (async () => {
         const thumbScale = Math.min(1, 256 / Math.max(width, height));
         const tw = Math.max(1, Math.round(width * thumbScale));
@@ -1303,6 +1382,7 @@ async function loadPdfToStore(file, store, options) {
         const thumbBlob = await encodeCanvasToBlob(thumbCanvas, {
           mimeType: mime
         });
+        throwIfAborted(signal);
         return await store.storeThumbnail(thumbBlob);
       })() : "";
       const pageResult = {
@@ -1314,7 +1394,8 @@ async function loadPdfToStore(file, store, options) {
       };
       await queuePageEmission(pageResult);
       return pageResult;
-    }
+    },
+    signal
   );
 }
 
@@ -1655,9 +1736,22 @@ function finalizeIngestedItem(item, context, uploadResult, decorateItem) {
   const itemWithAssetData = applyAssetUploadResultToItem(item, uploadResult);
   return decorateItem ? decorateItem(itemWithAssetData, context) : itemWithAssetData;
 }
-async function uploadAssetIfNeeded(assetStore, file, kind) {
+function createAbortError2() {
+  return new DOMException("Aborted", "AbortError");
+}
+function throwIfAborted2(signal) {
+  if (signal?.aborted) {
+    throw createAbortError2();
+  }
+}
+function isAbortError(error) {
+  return (error instanceof DOMException || error instanceof Error) && error.name === "AbortError";
+}
+async function uploadAssetIfNeeded(assetStore, file, kind, signal) {
+  throwIfAborted2(signal);
   if (!assetStore) return null;
-  const result = await assetStore.upload({ file, kind });
+  const result = await assetStore.upload({ file, kind, signal });
+  throwIfAborted2(signal);
   return result ?? null;
 }
 async function ingestAssetFilesToSceneItems(options) {
@@ -1671,6 +1765,7 @@ async function ingestAssetFilesToSceneItems(options) {
     gapWorld = 16,
     pdfScale = 1.15,
     pdfPageConcurrency = 2,
+    signal,
     decorateItem,
     onItemsReady,
     onError
@@ -1679,6 +1774,7 @@ async function ingestAssetFilesToSceneItems(options) {
   const errors = [];
   let occupiedBottomY = existingItems.length > 0 ? Math.max(...existingItems.map((item) => item.bounds.y + item.bounds.height)) : null;
   for (const file of files) {
+    throwIfAborted2(signal);
     const kind = getAssetKindForFile(file);
     if (!kind) {
       const error = {
@@ -1691,14 +1787,23 @@ async function ingestAssetFilesToSceneItems(options) {
     }
     try {
       if (kind === "pdf") {
-        const uploadResultPromise = uploadAssetIfNeeded(assetStore, file, kind);
+        const uploadResultPromise = uploadAssetIfNeeded(
+          assetStore,
+          file,
+          kind,
+          signal
+        );
+        void uploadResultPromise.catch(() => void 0);
         await loadPdfToStore(file, imageStore, {
           scale: pdfScale,
           pageConcurrency: pdfPageConcurrency,
           storeThumbnails: false,
+          signal,
           onPageStored: async (page) => {
+            throwIfAborted2(signal);
             const uploadResult2 = await uploadResultPromise;
             const fullUrl2 = await createBlobUrlFromStore(imageStore, page.blobId);
+            throwIfAborted2(signal);
             const naturalTopY2 = worldCenter.y - page.height / 2;
             const stackedTopY2 = occupiedBottomY == null ? naturalTopY2 : occupiedBottomY + gapWorld;
             const bounds2 = {
@@ -1738,15 +1843,18 @@ async function ingestAssetFilesToSceneItems(options) {
             );
             items.push(item2);
             occupiedBottomY = bounds2.y + page.height;
+            throwIfAborted2(signal);
             onItemsReady?.([item2], { file, kind });
           }
         });
         continue;
       }
+      throwIfAborted2(signal);
       const [uploadResult, storedImage] = await Promise.all([
-        uploadAssetIfNeeded(assetStore, file, kind),
+        uploadAssetIfNeeded(assetStore, file, kind, signal),
         loadImageToStore(file, imageStore)
       ]);
+      throwIfAborted2(signal);
       const { blobId, thumbnailBlobId, width, height } = storedImage;
       const fullUrl = await createBlobUrlFromStore(imageStore, blobId);
       const thumbBlob = await imageStore.getThumbnail(thumbnailBlobId);
@@ -1784,9 +1892,13 @@ async function ingestAssetFilesToSceneItems(options) {
         decorateItem
       );
       items.push(item);
+      throwIfAborted2(signal);
       onItemsReady?.([item], { file, kind });
       occupiedBottomY = occupiedBottomY == null ? bounds.y + height : Math.max(occupiedBottomY, bounds.y + height);
     } catch (error) {
+      if (isAbortError(error)) {
+        throw error;
+      }
       const fileError = {
         file,
         kind,
@@ -6896,6 +7008,7 @@ function resolveRasterImageCanvasRenderingOptions(options) {
   return {
     resolveSourceSize: options.resolveSourceSize,
     resolveRenderTarget: options.resolveRenderTarget,
+    resolveCanvasSource: options.resolveCanvasSource,
     devicePixelRatio: toPositiveFiniteNumber(
       options.devicePixelRatio,
       fallbackDevicePixelRatio
@@ -7160,6 +7273,36 @@ function loadImageElement(href, signal) {
     image.src = href;
   });
 }
+function normalizeDecodedRasterImageSource(source) {
+  if (!source) return null;
+  const width = Math.max(1, Math.round(source.width));
+  const height = Math.max(1, Math.round(source.height));
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+  return {
+    width,
+    height,
+    draw: source.draw,
+    close: source.close ?? (() => {
+    })
+  };
+}
+async function resolveDecodedRasterImageSource({
+  options,
+  request,
+  width,
+  height,
+  signal
+}) {
+  if (options?.resolveCanvasSource) {
+    const source = await options.resolveCanvasSource({
+      ...request,
+      signal
+    });
+    const decoded = normalizeDecodedRasterImageSource(source);
+    if (decoded) return decoded;
+  }
+  return decodeRasterImage(request.targetHref, width, height, signal);
+}
 var SvgVectorRenderer = class {
   container;
   scene;
@@ -7392,7 +7535,20 @@ var SvgVectorRenderer = class {
     }
     const request = {
       itemHref: item.imageRasterHref,
-      target
+      target,
+      sourceRequest: {
+        item,
+        href: item.imageRasterHref,
+        intrinsicSize: item.imageIntrinsicSize,
+        sourceSize,
+        contentRect: target.contentRect,
+        targetSize: target.targetSize,
+        viewportSize,
+        cameraZoom: this.camera.zoom,
+        devicePixelRatio: options.devicePixelRatio,
+        targetHref: target.href,
+        sourceKey: target.sourceKey
+      }
     };
     if (rasterCanvas.abortController) {
       if (rasterCanvas.loadingItemHref !== item.imageRasterHref) {
@@ -7482,7 +7638,13 @@ var SvgVectorRenderer = class {
     rasterCanvas.loadingWidth = width;
     rasterCanvas.loadingHeight = height;
     rasterCanvas.queuedTarget = null;
-    decodeRasterImage(target.href, width, height, abortController.signal).then((decoded) => {
+    resolveDecodedRasterImageSource({
+      options: this.rasterImageCanvasRendering,
+      request: request.sourceRequest,
+      width,
+      height,
+      signal: abortController.signal
+    }).then((decoded) => {
       if (abortController.signal.aborted || rasterCanvas.loadSequence !== sequence) {
         decoded.close();
         return;
@@ -8391,6 +8553,7 @@ function shallowEqualStringArray(a, b) {
 }
 
 // src/react/stroke-input.ts
+var MAX_INTERPOLATED_POINTS_PER_SAMPLE = 192;
 function getPointerEventSamples(event) {
   if (typeof event.getCoalescedEvents !== "function") {
     return [event];
@@ -8414,9 +8577,9 @@ function appendInterpolatedStrokePoint(points, nextPoint, maxStepWorld) {
   const distanceSquared = deltaX * deltaX + deltaY * deltaY;
   if (distanceSquared < 1e-12) return points;
   const distance = Math.sqrt(distanceSquared);
-  const stepCount = Math.max(
-    1,
-    Math.ceil(distance / resolveMaxStepWorld(maxStepWorld))
+  const stepCount = Math.min(
+    MAX_INTERPOLATED_POINTS_PER_SAMPLE,
+    Math.max(1, Math.ceil(distance / resolveMaxStepWorld(maxStepWorld)))
   );
   if (stepCount === 1) return [...points, nextPoint];
   const interpolatedPoints = Array.from({ length: stepCount }, (_, index) => {