canvu-react 0.3.23 → 0.3.25

package/dist/react.cjs

@@ -718,6 +718,47 @@ var init_shape_builders = __esm({
   }
 });
 
+// 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;
@@ -836,19 +877,7 @@ function decodeImageToCanvas(blob, maxDimension) {
   });
 }
 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
-    );
-  });
+  return encodeCanvasToBlob(canvas, { mimeType: mime, quality });
 }
 async function loadImageToStore(file, store) {
   const originalBlob = file;
@@ -916,21 +945,6 @@ async function renderPageToCanvas(page, scale) {
   await page.render({ canvas, viewport }).promise;
   return { canvas, width: w, height: h };
 }
-function canvasToBlob2(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);
@@ -992,7 +1006,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 canvasToBlob2(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));
@@ -1007,7 +1021,9 @@ async function loadPdfToStore(file, store, options) {
           tCtx.imageSmoothingQuality = "high";
           tCtx.drawImage(canvas, 0, 0, tw, th);
         }
-        const thumbBlob = await canvasToBlob2(thumbCanvas, mime);
+        const thumbBlob = await encodeCanvasToBlob(thumbCanvas, {
+          mimeType: mime
+        });
         return await store.storeThumbnail(thumbBlob);
       })() : "";
       const pageResult = {
@@ -1611,6 +1627,21 @@ function reorderManagedImages(items, orderedManagedIds) {
   });
   return restackManagedImages(next);
 }
+var OPEN_KEYFRAME_ID = "canvu-images-menu-open-keyframe";
+var OPEN_KEYFRAME_CSS = `
+@keyframes canvu-images-menu-open {
+	from { opacity: 0; transform: scale(0.6); }
+	to { opacity: 1; transform: scale(1); }
+}
+`;
+function ensureOpenKeyframe() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(OPEN_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = OPEN_KEYFRAME_ID;
+  style.textContent = OPEN_KEYFRAME_CSS;
+  document.head.appendChild(style);
+}
 var panelStyle = {
   width: "fit-content",
   maxHeight: "min(85dvh, 820px)",
@@ -1621,7 +1652,9 @@ var panelStyle = {
   boxShadow: "0 10px 40px rgba(15, 23, 42, 0.12)",
   fontFamily: "system-ui, sans-serif",
   fontSize: 14,
-  color: "#0f172a"
+  color: "#0f172a",
+  transformOrigin: "top right",
+  animation: "canvu-images-menu-open 180ms cubic-bezier(0.2, 0.8, 0.2, 1)"
 };
 var headerStyle = {
   display: "flex",
@@ -1743,33 +1776,16 @@ var collapsedButtonStyle = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
-  gap: 6,
+  width: 44,
   height: 44,
-  minWidth: 44,
-  padding: "0 12px",
+  padding: 0,
   border: "1px solid #e2e8f0",
-  borderRadius: 22,
+  borderRadius: 10,
   background: "#ffffff",
   color: "#0f172a",
   cursor: "pointer",
-  fontFamily: "system-ui, sans-serif",
-  fontSize: 13,
-  fontWeight: 600,
   boxShadow: "0 8px 24px rgba(15, 23, 42, 0.12)"
 };
-var collapsedCountStyle = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  minWidth: 20,
-  height: 20,
-  padding: "0 6px",
-  borderRadius: 10,
-  backgroundColor: "#0f172a",
-  color: "#ffffff",
-  fontSize: 11,
-  fontWeight: 600
-};
 var defaultLabels = {
   title: "Images",
   dragHandle: "Drag to reorder",
@@ -1793,12 +1809,15 @@ function ImagesMenu({
     })
   );
   const [collapsed, setCollapsed] = react.useState(false);
+  react.useEffect(() => {
+    ensureOpenKeyframe();
+  }, []);
   if (managed.length === 0) {
     return null;
   }
   const resolvedLabels = { ...defaultLabels, ...labels };
   if (collapsed) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1807,10 +1826,7 @@ function ImagesMenu({
         "aria-label": resolvedLabels.expand,
         title: resolvedLabels.expand,
         onClick: () => setCollapsed(false),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Images, { size: 20 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: collapsedCountStyle, children: managed.length })
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Images, { size: 20 })
       }
     );
   }
@@ -1879,11 +1895,20 @@ function ImagesMenuRow({
   onRotate,
   onDelete
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({ id: item.id });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: item.id });
+  const feedbackTransition = "background-color 140ms ease, opacity 140ms ease";
   const wrapperStyle = {
     ...rowStyle,
     transform: utilities.CSS.Transform.toString(transform),
-    transition,
+    transition: transition ? `${transition}, ${feedbackTransition}` : feedbackTransition,
     background: isDragging ? "#eef2f7" : "transparent",
     opacity: isDragging ? 0.85 : 1
   };
@@ -1892,6 +1917,7 @@ function ImagesMenuRow({
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: setActivatorNodeRef,
         type: "button",
         style: handleStyle,
         "aria-label": labels.dragHandle,
@@ -4786,16 +4812,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,
@@ -4818,8 +4851,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, {
@@ -4830,8 +4863,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) => {
@@ -7386,6 +7421,40 @@ var VectorViewport = react.forwardRef(
     onWorldPointerLeaveRef.current = onWorldPointerLeave;
     const onPlacementPreviewChangeRef = react.useRef(onPlacementPreviewChange);
     onPlacementPreviewChangeRef.current = onPlacementPreviewChange;
+    const directRemoteStrokePreviewRef = react.useRef(false);
+    const remoteStrokePreviewFrameRef = react.useRef(null);
+    const pendingRemoteStrokePreviewRef = react.useRef(null);
+    const flushRemoteStrokePreview = react.useCallback(() => {
+      remoteStrokePreviewFrameRef.current = null;
+      const pending = pendingRemoteStrokePreviewRef.current;
+      if (!pending) return;
+      onPlacementPreviewChangeRef.current?.({
+        kind: "stroke",
+        tool: pending.tool,
+        points: pending.points
+      });
+    }, []);
+    const emitRemoteStrokePreview = react.useCallback(
+      (tool, points) => {
+        if (tool === "laser") return;
+        directRemoteStrokePreviewRef.current = true;
+        pendingRemoteStrokePreviewRef.current = { tool, points };
+        if (remoteStrokePreviewFrameRef.current != null) return;
+        remoteStrokePreviewFrameRef.current = requestAnimationFrame(
+          flushRemoteStrokePreview
+        );
+      },
+      [flushRemoteStrokePreview]
+    );
+    const emitRemoteStrokePreviewClear = react.useCallback(() => {
+      if (remoteStrokePreviewFrameRef.current != null) {
+        cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
+        remoteStrokePreviewFrameRef.current = null;
+      }
+      pendingRemoteStrokePreviewRef.current = null;
+      directRemoteStrokePreviewRef.current = false;
+      onPlacementPreviewChangeRef.current?.(null);
+    }, []);
     const overlayCameraTickRef = react.useRef(false);
     overlayCameraTickRef.current = interactive || remotePresence != null && remotePresence.length > 0 || presenceOverlay != null;
     const pruneEraserTrail = react.useCallback(
@@ -7504,6 +7573,7 @@ var VectorViewport = react.forwardRef(
         if (itemId) {
           renderSceneWithLivePenStroke(null);
         }
+        emitRemoteStrokePreviewClear();
         setPlacementPreview(null);
         commitCompletedStroke({
           tool,
@@ -7515,6 +7585,7 @@ var VectorViewport = react.forwardRef(
       },
       [
         commitCompletedStroke,
+        emitRemoteStrokePreviewClear,
         releaseInteractionPointer,
         renderSceneWithLivePenStroke
       ]
@@ -7626,8 +7697,18 @@ var VectorViewport = react.forwardRef(
       };
     }, [onWorldPointerMove]);
     react.useEffect(() => {
+      if (directRemoteStrokePreviewRef.current && placementPreview === null) {
+        return;
+      }
       onPlacementPreviewChangeRef.current?.(placementPreview);
     }, [placementPreview]);
+    react.useEffect(() => {
+      return () => {
+        if (remoteStrokePreviewFrameRef.current != null) {
+          cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
+        }
+      };
+    }, []);
     react.useEffect(() => {
       const scene = sceneRef.current;
       if (scene) {
@@ -7658,15 +7739,22 @@ var VectorViewport = react.forwardRef(
     react.useEffect(() => {
       rememberImageBlobHrefs(items, rememberedImageBlobHrefsRef.current);
     }, [items]);
-    react.useEffect(
-      () => () => {
-        releaseRememberedBlobHrefs(
-          rememberedImageBlobHrefsRef.current,
-          (href) => URL.revokeObjectURL(href)
-        );
-      },
-      []
-    );
+    const blobRevokeTimerRef = react.useRef(null);
+    react.useEffect(() => {
+      if (blobRevokeTimerRef.current !== null) {
+        clearTimeout(blobRevokeTimerRef.current);
+        blobRevokeTimerRef.current = null;
+      }
+      return () => {
+        blobRevokeTimerRef.current = setTimeout(() => {
+          releaseRememberedBlobHrefs(
+            rememberedImageBlobHrefsRef.current,
+            (href) => URL.revokeObjectURL(href)
+          );
+          blobRevokeTimerRef.current = null;
+        }, 100);
+      };
+    }, []);
     const PASTE_OFFSET_WORLD = 24;
     const copyIdsToInternalClipboard = react.useCallback((ids) => {
       if (ids.length === 0) return;
@@ -8614,6 +8702,7 @@ var VectorViewport = react.forwardRef(
             setPlacementPreview(null);
           } else if (directPenStroke) {
             setPlacementPreview(null);
+            emitRemoteStrokePreview(tool, [startPoint]);
           } else {
             setPlacementPreview({
               kind: "stroke",
@@ -8655,6 +8744,7 @@ var VectorViewport = react.forwardRef(
       [
         applePencilNav,
         captureInteractionPointer,
+        emitRemoteStrokePreview,
         finalizeStrokeDragState,
         renderSceneWithLivePenStroke,
         screenToWorld
@@ -8713,6 +8803,7 @@ var VectorViewport = react.forwardRef(
         activeInteractionPointerIdRef.current = e.pointerId;
         activeInteractionPointerTargetRef.current = null;
         setPlacementPreview(null);
+        emitRemoteStrokePreview(tool, [startPoint]);
         debugApplePencilPointer("native-pointerdown", {
           pointerType: e.pointerType,
           pointerId: e.pointerId,
@@ -8730,6 +8821,7 @@ var VectorViewport = react.forwardRef(
       };
     }, [
       applePencilNav,
+      emitRemoteStrokePreview,
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
@@ -8813,6 +8905,7 @@ var VectorViewport = react.forwardRef(
         activeInteractionPointerTargetRef.current = null;
         activeInteractionTouchIdRef.current = touch.identifier;
         setPlacementPreview(null);
+        emitRemoteStrokePreview(tool, [startPoint]);
         debugApplePencilPointer("touchstart-stroke", {
           touchId: touch.identifier,
           touchType: touchKind(touch),
@@ -8844,6 +8937,7 @@ var VectorViewport = react.forwardRef(
             renderSceneWithLivePenStroke(item);
           }
           setPlacementPreview(null);
+          emitRemoteStrokePreview(st.tool, interpolated);
         }
         debugApplePencilPointer("touchmove-stroke", {
           touchId: touch.identifier,
@@ -8906,6 +9000,7 @@ var VectorViewport = react.forwardRef(
       };
     }, [
       applePencilNav,
+      emitRemoteStrokePreview,
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
@@ -8960,6 +9055,7 @@ var VectorViewport = react.forwardRef(
               renderSceneWithLivePenStroke(item);
             }
             setPlacementPreview(null);
+            emitRemoteStrokePreview(st.tool, interpolated);
             return;
           }
           if (st.tool === "laser") {
@@ -9101,6 +9197,9 @@ var VectorViewport = react.forwardRef(
         }
         const cam = cameraRef.current;
         if (!cam) {
+          if (st.kind === "stroke") {
+            emitRemoteStrokePreviewClear();
+          }
           if (st.kind === "erase") {
             eraserPreviewIdsRef.current.clear();
             setEraserPreviewIds([]);
@@ -9332,6 +9431,8 @@ var VectorViewport = react.forwardRef(
         document.removeEventListener("pointercancel", onUp);
       };
     }, [
+      emitRemoteStrokePreview,
+      emitRemoteStrokePreviewClear,
       interactive,
       pruneEraserTrail,
       pruneLaserTrail,