canvu-react 0.3.23 → 0.3.25

package/dist/index.cjs

@@ -85,6 +85,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;
@@ -200,21 +241,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);
@@ -276,7 +302,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));
@@ -291,7 +317,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 = {
@@ -331,19 +359,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);
@@ -561,16 +579,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,
@@ -593,8 +618,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, {
@@ -605,8 +630,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) => {
@@ -2404,6 +2431,7 @@ exports.createShapeId = createShapeId;
 exports.createTextItem = createTextItem;
 exports.cullItemsByViewport = cullItemsByViewport;
 exports.deleteManagedImage = deleteManagedImage;
+exports.encodeCanvasToBlob = encodeCanvasToBlob;
 exports.expandCustomShapeTemplate = expandCustomShapeTemplate;
 exports.formatCameraTransform = formatCameraTransform;
 exports.formatItemPlacementTransform = formatItemPlacementTransform;