canvu-react 0.3.23 → 0.3.25

package/dist/index.d.cts

@@ -5,6 +5,13 @@ export { a as ArrowBindings, b as VectorPathPoint, n as normalizeRect, r as rect
 export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-3Iv5xHxM.cjs';
 export { D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, a as applyStrokeToItem, b as buildArrowSvg, c as buildDrawDotSvg, d as buildEllipseSvg, e as buildFreehandPathSvg, f as buildLineSvg, g as buildRectSvg, h as computeFreehandSvgPayload, i as createDrawDotItem, j as createEllipseItem, k as createFreehandStrokeItem, l as createImageFromVectorTrace, m as createImageItem, n as createLineItem, o as createRectangleItem, p as createShapeId, q as createTextItem, r as lineEndpointsToLocal, s as rebuildItemSvg, t as resolveStrokeStyle } from './shape-builders-DFudWDFI.cjs';
 
+type EncodeCanvasToBlobOptions = {
+    mimeType?: string;
+    quality?: number;
+    fallbackMimeTypes?: readonly string[];
+};
+declare function encodeCanvasToBlob(canvas: HTMLCanvasElement, options?: EncodeCanvasToBlobOptions): Promise<Blob>;
+
 /**
  * Embeds the bitmap as a single SVG `<image>` (data URL or blob URL) instead of tracing paths.
  * Avoids huge path counts and keeps screenshots/photos sharp.
@@ -310,4 +317,4 @@ declare const DEFAULT_TEXT_FONT_SIZE = 18;
  */
 declare function buildTextSvg(content: string, _width: number, _height: number, fillColor?: string, fontSize?: number): string;
 
-export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };
+export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type EncodeCanvasToBlobOptions, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, encodeCanvasToBlob, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };

package/dist/index.d.ts

@@ -5,6 +5,13 @@ export { a as ArrowBindings, b as VectorPathPoint, n as normalizeRect, r as rect
 export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAssets } from './asset-hydration-BEG21hMp.js';
 export { D as DEFAULT_STROKE_STYLE, F as FreehandSvgPayload, S as StrokeStyle, a as applyStrokeToItem, b as buildArrowSvg, c as buildDrawDotSvg, d as buildEllipseSvg, e as buildFreehandPathSvg, f as buildLineSvg, g as buildRectSvg, h as computeFreehandSvgPayload, i as createDrawDotItem, j as createEllipseItem, k as createFreehandStrokeItem, l as createImageFromVectorTrace, m as createImageItem, n as createLineItem, o as createRectangleItem, p as createShapeId, q as createTextItem, r as lineEndpointsToLocal, s as rebuildItemSvg, t as resolveStrokeStyle } from './shape-builders-ENwnK-zT.js';
 
+type EncodeCanvasToBlobOptions = {
+    mimeType?: string;
+    quality?: number;
+    fallbackMimeTypes?: readonly string[];
+};
+declare function encodeCanvasToBlob(canvas: HTMLCanvasElement, options?: EncodeCanvasToBlobOptions): Promise<Blob>;
+
 /**
  * Embeds the bitmap as a single SVG `<image>` (data URL or blob URL) instead of tracing paths.
  * Avoids huge path counts and keeps screenshots/photos sharp.
@@ -310,4 +317,4 @@ declare const DEFAULT_TEXT_FONT_SIZE = 18;
  */
 declare function buildTextSvg(content: string, _width: number, _height: number, fillColor?: string, fontSize?: number): string;
 
-export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };
+export { ARROW_BIND_SNAP_PX, type ApplePencilNavOptions, ArrowEndpointBinding, Camera2D, type CreateCustomShapeContent, type CustomShapeSize, DEFAULT_TEXT_FONT_SIZE, type EncodeCanvasToBlobOptions, type LoadRasterImageFileOptions, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, type RasterEmbedMode, type RasterSceneSource, Rect, SvgVectorRenderer, type SvgVectorRendererOptions, VectorScene, VectorSceneItem, type ViewportInputOptions, addManagedImage, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildCustomShapeChildrenSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, copyManagedImage, createCustomShapeItem, cullItemsByViewport, deleteManagedImage, encodeCanvasToBlob, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, loadImageFileAsRasterSceneSource, markImageAsManaged, reorderManagedImages, resolveArrowBindingsInScene, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };

package/dist/index.js

@@ -78,6 +78,47 @@ var Camera2D = class {
   }
 };
 
+// src/image/canvas-encode.ts
+var DEFAULT_FALLBACK_MIME_TYPES = ["image/png"];
+var tryCanvasToBlob = (canvas, mimeType, quality) => new Promise((resolve) => {
+  canvas.toBlob((blob) => resolve(blob), mimeType, quality);
+});
+var blobFromDataUrl = async (dataUrl) => {
+  const response = await fetch(dataUrl);
+  const blob = await response.blob();
+  if (blob.size === 0) {
+    throw new Error("Failed to encode canvas to blob");
+  }
+  return blob;
+};
+async function encodeCanvasToBlob(canvas, options) {
+  const primaryMimeType = options?.mimeType ?? "image/png";
+  const quality = options?.quality;
+  const mimeTypes = [
+    primaryMimeType,
+    ...options?.fallbackMimeTypes ?? DEFAULT_FALLBACK_MIME_TYPES
+  ].filter(
+    (mimeType, index, mimeTypeList) => mimeTypeList.indexOf(mimeType) === index
+  );
+  for (const mimeType of mimeTypes) {
+    const blob = await tryCanvasToBlob(
+      canvas,
+      mimeType,
+      mimeType === primaryMimeType ? quality : void 0
+    );
+    if (blob) {
+      return blob;
+    }
+  }
+  for (const mimeType of mimeTypes) {
+    const dataUrl = canvas.toDataURL(mimeType, quality);
+    if (dataUrl && dataUrl !== "data:,") {
+      return blobFromDataUrl(dataUrl);
+    }
+  }
+  throw new Error("Failed to encode canvas to blob");
+}
+
 // src/image/indexed-db-image-store.ts
 var DB_NAME = "canvu-image-store";
 var DB_VERSION = 1;
@@ -193,21 +234,6 @@ async function renderPageToCanvas(page, scale) {
   await page.render({ canvas, viewport }).promise;
   return { canvas, width: w, height: h };
 }
-function canvasToBlob(canvas, mime, quality) {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (!blob) {
-          reject(new Error("Could not encode blob"));
-          return;
-        }
-        resolve(blob);
-      },
-      mime,
-      quality
-    );
-  });
-}
 function normalizePdfPageNumbers(pageNumbers, pageCount) {
   if (!pageNumbers || pageNumbers.length === 0) {
     return Array.from({ length: pageCount }, (_, index) => index + 1);
@@ -269,7 +295,7 @@ async function loadPdfToStore(file, store, options) {
       const page = await pdf.getPage(pageNumber);
       const { canvas, width, height } = await renderPageToCanvas(page, scale);
       const mime = "image/png";
-      const pageBlob = await canvasToBlob(canvas, mime);
+      const pageBlob = await encodeCanvasToBlob(canvas, { mimeType: mime });
       const blobId = await store.storeOriginal(pageBlob);
       const thumbnailBlobId = storeThumbnails ? await (async () => {
         const thumbScale = Math.min(1, 256 / Math.max(width, height));
@@ -284,7 +310,9 @@ async function loadPdfToStore(file, store, options) {
           tCtx.imageSmoothingQuality = "high";
           tCtx.drawImage(canvas, 0, 0, tw, th);
         }
-        const thumbBlob = await canvasToBlob(thumbCanvas, mime);
+        const thumbBlob = await encodeCanvasToBlob(thumbCanvas, {
+          mimeType: mime
+        });
         return await store.storeThumbnail(thumbBlob);
       })() : "";
       const pageResult = {
@@ -324,19 +352,9 @@ function loadImageFromObjectUrl(objectUrl) {
   });
 }
 function canvasToObjectUrl(canvas, mime, quality) {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (!blob) {
-          reject(new Error("Could not encode image blob"));
-          return;
-        }
-        resolve(URL.createObjectURL(blob));
-      },
-      mime,
-      quality
-    );
-  });
+  return encodeCanvasToBlob(canvas, { mimeType: mime, quality }).then(
+    (blob) => URL.createObjectURL(blob)
+  );
 }
 async function loadImageFileAsRasterSceneSource(file, maxDimensionOrOptions) {
   const { maxDimension: maxDim, embedMode } = normalizeLoadOptions(maxDimensionOrOptions);
@@ -554,16 +572,23 @@ function distanceBetween(a, b) {
 function midpoint(a, b) {
   return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
 }
-function wheelDeltaYPixels(e) {
-  switch (e.deltaMode) {
+function wheelDeltaPixels(delta, deltaMode) {
+  switch (deltaMode) {
     case WheelEvent.DOM_DELTA_LINE:
-      return e.deltaY * 16;
+      return delta * 16;
     case WheelEvent.DOM_DELTA_PAGE:
-      return e.deltaY * 400;
+      return delta * 400;
     default:
-      return e.deltaY;
+      return delta;
   }
 }
+var TRACKPAD_MAX_DELTA = 20;
+var MOUSE_WHEEL_DAMPING = 0.4;
+function softenWheelDelta(d) {
+  const a = Math.abs(d);
+  if (a <= TRACKPAD_MAX_DELTA) return d;
+  return Math.sign(d) * (TRACKPAD_MAX_DELTA + (a - TRACKPAD_MAX_DELTA) * MOUSE_WHEEL_DAMPING);
+}
 function attachViewportInput(options) {
   const {
     element,
@@ -586,8 +611,8 @@ function attachViewportInput(options) {
   const onWheel = (e) => {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
-      const dy = wheelDeltaYPixels(e);
-      const normDy = Math.abs(dy) < 20 ? dy * 12 : dy;
+      const dy = wheelDeltaPixels(e.deltaY, e.deltaMode);
+      const normDy = Math.abs(dy) < TRACKPAD_MAX_DELTA ? dy * 12 : dy;
       const factor = Math.exp(-normDy * wheelZoomSensitivity);
       const rect = element.getBoundingClientRect();
       camera.setZoom(camera.zoom * factor, {
@@ -598,8 +623,10 @@ function attachViewportInput(options) {
       return;
     }
     e.preventDefault();
-    camera.x -= e.deltaX * wheelPanSensitivity / camera.zoom;
-    camera.y -= e.deltaY * wheelPanSensitivity / camera.zoom;
+    const panDx = softenWheelDelta(wheelDeltaPixels(e.deltaX, e.deltaMode));
+    const panDy = softenWheelDelta(wheelDeltaPixels(e.deltaY, e.deltaMode));
+    camera.x -= panDx * wheelPanSensitivity / camera.zoom;
+    camera.y -= panDy * wheelPanSensitivity / camera.zoom;
     onUpdate();
   };
   const onPointerDown = (e) => {
@@ -2359,6 +2386,6 @@ var VectorScene = class {
   }
 };
 
-export { ARROW_BIND_SNAP_PX, Camera2D, DEFAULT_STROKE_STYLE, DEFAULT_TEXT_FONT_SIZE, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, SvgVectorRenderer, VectorScene, addManagedImage, applyStrokeToItem, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildArrowSvg, buildCustomShapeChildrenSvg, buildDrawDotSvg, buildEllipseSvg, buildFreehandPathSvg, buildLineSvg, buildRectSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, computeFreehandSvgPayload, copyManagedImage, createCustomShapeItem, createDrawDotItem, createEllipseItem, createFreehandStrokeItem, createImageFromVectorTrace, createImageItem, createLineItem, createRectangleItem, createShapeId, createTextItem, cullItemsByViewport, deleteManagedImage, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, hydrateSceneItemsWithAssets, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, lineEndpointsToLocal, loadImageFileAsRasterSceneSource, markImageAsManaged, normalizeRect, rebuildItemSvg, rectsIntersect, reorderManagedImages, resolveArrowBindingsInScene, resolveStrokeStyle, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };
+export { ARROW_BIND_SNAP_PX, Camera2D, DEFAULT_STROKE_STYLE, DEFAULT_TEXT_FONT_SIZE, MANAGED_KEY, MAX_RASTER_EMBED_DIMENSION, SvgVectorRenderer, VectorScene, addManagedImage, applyStrokeToItem, attachApplePencilNavigation, attachViewportInput, bakeArrowItemToAbsolute, buildArrowSvg, buildCustomShapeChildrenSvg, buildDrawDotSvg, buildEllipseSvg, buildFreehandPathSvg, buildLineSvg, buildRectSvg, buildTextSvg, cloneVectorSceneItemWithNewId, cloneVectorSceneItemsWithNewIds, collectEraserTargetsAtWorldPoint, computeFreehandSvgPayload, copyManagedImage, createCustomShapeItem, createDrawDotItem, createEllipseItem, createFreehandStrokeItem, createImageFromVectorTrace, createImageItem, createLineItem, createRectangleItem, createShapeId, createTextItem, cullItemsByViewport, deleteManagedImage, encodeCanvasToBlob, expandCustomShapeTemplate, formatCameraTransform, formatItemPlacementTransform, hitTestWorldPoint, hydrateSceneItemsWithAssets, isArrowBindTarget, isManagedImage, itemHitTestWorldPoint, lineEndpointsToLocal, loadImageFileAsRasterSceneSource, markImageAsManaged, normalizeRect, rebuildItemSvg, rectsIntersect, reorderManagedImages, resolveArrowBindingsInScene, resolveStrokeStyle, restackManagedImages, rotateManagedImage, snapArrowEndpointToShape };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map