canvu-react 0.3.24 → 0.3.26

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 = {
@@ -6499,7 +6515,12 @@ function PresenceRemoteLayer({
         const markup = peer.markupStroke;
         let strokeNode = null;
         if (markup && markup.points.length > 0) {
-          const paint = strokePaint(markup.tool, color);
+          const fallbackPaint = strokePaint(markup.tool, color);
+          const paint = {
+            stroke: markup.stroke ?? fallbackPaint.stroke,
+            strokeOpacity: markup.strokeOpacity ?? fallbackPaint.strokeOpacity,
+            widthWorld: markup.strokeWidth ?? fallbackPaint.widthWorld
+          };
           const d = markup.points.length >= 2 ? smoothFreehandPointsToPathD([...markup.points]) : null;
           if (d) {
             strokeNode = /* @__PURE__ */ jsxRuntime.jsx(
@@ -7405,6 +7426,41 @@ 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 flushRemoteStrokePreviewWithStyle = react.useCallback(() => {
+      remoteStrokePreviewFrameRef.current = null;
+      const pending = pendingRemoteStrokePreviewRef.current;
+      if (!pending) return;
+      onPlacementPreviewChangeRef.current?.({
+        kind: "stroke",
+        tool: pending.tool,
+        points: pending.points,
+        style: { ...strokeStyleRef.current }
+      });
+    }, []);
+    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(
+          flushRemoteStrokePreviewWithStyle
+        );
+      },
+      [flushRemoteStrokePreviewWithStyle]
+    );
+    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(
@@ -7523,6 +7579,7 @@ var VectorViewport = react.forwardRef(
         if (itemId) {
           renderSceneWithLivePenStroke(null);
         }
+        emitRemoteStrokePreviewClear();
         setPlacementPreview(null);
         commitCompletedStroke({
           tool,
@@ -7534,6 +7591,7 @@ var VectorViewport = react.forwardRef(
       },
       [
         commitCompletedStroke,
+        emitRemoteStrokePreviewClear,
         releaseInteractionPointer,
         renderSceneWithLivePenStroke
       ]
@@ -7645,8 +7703,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) {
@@ -8640,11 +8708,13 @@ var VectorViewport = react.forwardRef(
             setPlacementPreview(null);
           } else if (directPenStroke) {
             setPlacementPreview(null);
+            emitRemoteStrokePreview(tool, [startPoint]);
           } else {
             setPlacementPreview({
               kind: "stroke",
               tool,
-              points: [startPoint]
+              points: [startPoint],
+              style: { ...strokeStyleRef.current }
             });
           }
           captureInteractionPointer(e.currentTarget, e.pointerId);
@@ -8681,6 +8751,7 @@ var VectorViewport = react.forwardRef(
       [
         applePencilNav,
         captureInteractionPointer,
+        emitRemoteStrokePreview,
         finalizeStrokeDragState,
         renderSceneWithLivePenStroke,
         screenToWorld
@@ -8739,6 +8810,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,
@@ -8756,6 +8828,7 @@ var VectorViewport = react.forwardRef(
       };
     }, [
       applePencilNav,
+      emitRemoteStrokePreview,
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
@@ -8839,6 +8912,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),
@@ -8870,6 +8944,7 @@ var VectorViewport = react.forwardRef(
             renderSceneWithLivePenStroke(item);
           }
           setPlacementPreview(null);
+          emitRemoteStrokePreview(st.tool, interpolated);
         }
         debugApplePencilPointer("touchmove-stroke", {
           touchId: touch.identifier,
@@ -8932,6 +9007,7 @@ var VectorViewport = react.forwardRef(
       };
     }, [
       applePencilNav,
+      emitRemoteStrokePreview,
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
@@ -8986,6 +9062,7 @@ var VectorViewport = react.forwardRef(
               renderSceneWithLivePenStroke(item);
             }
             setPlacementPreview(null);
+            emitRemoteStrokePreview(st.tool, interpolated);
             return;
           }
           if (st.tool === "laser") {
@@ -9004,7 +9081,8 @@ var VectorViewport = react.forwardRef(
             setPlacementPreview({
               kind: "stroke",
               tool: st.tool,
-              points: interpolated
+              points: interpolated,
+              style: { ...strokeStyleRef.current }
             });
           }
           return;
@@ -9127,6 +9205,9 @@ var VectorViewport = react.forwardRef(
         }
         const cam = cameraRef.current;
         if (!cam) {
+          if (st.kind === "stroke") {
+            emitRemoteStrokePreviewClear();
+          }
           if (st.kind === "erase") {
             eraserPreviewIdsRef.current.clear();
             setEraserPreviewIds([]);
@@ -9358,6 +9439,8 @@ var VectorViewport = react.forwardRef(
         document.removeEventListener("pointercancel", onUp);
       };
     }, [
+      emitRemoteStrokePreview,
+      emitRemoteStrokePreviewClear,
       interactive,
       pruneEraserTrail,
       pruneLaserTrail,