canvu-react 0.3.24 → 0.3.26

package/dist/react.d.cts

@@ -3,8 +3,8 @@ export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAsse
 import { V as VectorSceneItem } from './types-CB0TZZuk.cjs';
 import { V as VectorViewportAssetKind, u as VectorViewportAssetStore } from './shape-builders-DFudWDFI.cjs';
 export { v as VectorViewportAssetHydrationRequest, w as VectorViewportAssetResolveRequest, x as VectorViewportAssetResolveResult, y as VectorViewportAssetUploadRequest, z as VectorViewportAssetUploadResult } from './shape-builders-DFudWDFI.cjs';
-import { B as BoardComponentPosition, V as VectorToolDefinition, C as CanvasPlugin, a as VectorSelectionInspector } from './types-7kfWcm0L.cjs';
-export { b as CanvasPluginComponentProps, c as CanvasPluginContribution, d as CanvasPluginItemsChangeMiddlewareContext, e as CanvasPluginRenderContext, f as CanvuChromeActiveToolStyle, g as CanvuChromeContext, h as CanvuChromeContextValue, i as CanvuChromeSelectionStyleChange, j as CanvuPluginContext, k as CanvuPluginContextValue, l as CanvuPluginViewportSnapshot, m as CustomShapePlacementOptions, P as PlacementPreview, n as VectorCanvasSpacePosition, o as VectorSelectionInspectorProps, p as VectorViewport, q as VectorViewportHandle, r as VectorViewportProps, W as WorldPointerDownDetail, s as createCanvuPlugin, t as getBoardPositionStyle, u as useCanvuChromeContext, v as useCanvuDocumentContext, w as useCanvuPluginContext, x as useCanvuPluginContribution, y as useCanvuResolvedTools, z as useCanvuViewportContext } from './types-7kfWcm0L.cjs';
+import { B as BoardComponentPosition, V as VectorToolDefinition, C as CanvasPlugin, a as VectorSelectionInspector } from './types-BLXR7g_L.cjs';
+export { b as CanvasPluginComponentProps, c as CanvasPluginContribution, d as CanvasPluginItemsChangeMiddlewareContext, e as CanvasPluginRenderContext, f as CanvuChromeActiveToolStyle, g as CanvuChromeContext, h as CanvuChromeContextValue, i as CanvuChromeSelectionStyleChange, j as CanvuPluginContext, k as CanvuPluginContextValue, l as CanvuPluginViewportSnapshot, m as CustomShapePlacementOptions, P as PlacementPreview, n as VectorCanvasSpacePosition, o as VectorSelectionInspectorProps, p as VectorViewport, q as VectorViewportHandle, r as VectorViewportProps, W as WorldPointerDownDetail, s as createCanvuPlugin, t as getBoardPositionStyle, u as useCanvuChromeContext, v as useCanvuDocumentContext, w as useCanvuPluginContext, x as useCanvuPluginContribution, y as useCanvuResolvedTools, z as useCanvuViewportContext } from './types-BLXR7g_L.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { CSSProperties, ReactNode, ReactElement, SVGProps } from 'react';

package/dist/react.d.ts

@@ -3,8 +3,8 @@ export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAsse
 import { V as VectorSceneItem } from './types-CB0TZZuk.js';
 import { V as VectorViewportAssetKind, u as VectorViewportAssetStore } from './shape-builders-ENwnK-zT.js';
 export { v as VectorViewportAssetHydrationRequest, w as VectorViewportAssetResolveRequest, x as VectorViewportAssetResolveResult, y as VectorViewportAssetUploadRequest, z as VectorViewportAssetUploadResult } from './shape-builders-ENwnK-zT.js';
-import { B as BoardComponentPosition, V as VectorToolDefinition, C as CanvasPlugin, a as VectorSelectionInspector } from './types-C4k_AMvi.js';
-export { b as CanvasPluginComponentProps, c as CanvasPluginContribution, d as CanvasPluginItemsChangeMiddlewareContext, e as CanvasPluginRenderContext, f as CanvuChromeActiveToolStyle, g as CanvuChromeContext, h as CanvuChromeContextValue, i as CanvuChromeSelectionStyleChange, j as CanvuPluginContext, k as CanvuPluginContextValue, l as CanvuPluginViewportSnapshot, m as CustomShapePlacementOptions, P as PlacementPreview, n as VectorCanvasSpacePosition, o as VectorSelectionInspectorProps, p as VectorViewport, q as VectorViewportHandle, r as VectorViewportProps, W as WorldPointerDownDetail, s as createCanvuPlugin, t as getBoardPositionStyle, u as useCanvuChromeContext, v as useCanvuDocumentContext, w as useCanvuPluginContext, x as useCanvuPluginContribution, y as useCanvuResolvedTools, z as useCanvuViewportContext } from './types-C4k_AMvi.js';
+import { B as BoardComponentPosition, V as VectorToolDefinition, C as CanvasPlugin, a as VectorSelectionInspector } from './types-Cm7IsgL4.js';
+export { b as CanvasPluginComponentProps, c as CanvasPluginContribution, d as CanvasPluginItemsChangeMiddlewareContext, e as CanvasPluginRenderContext, f as CanvuChromeActiveToolStyle, g as CanvuChromeContext, h as CanvuChromeContextValue, i as CanvuChromeSelectionStyleChange, j as CanvuPluginContext, k as CanvuPluginContextValue, l as CanvuPluginViewportSnapshot, m as CustomShapePlacementOptions, P as PlacementPreview, n as VectorCanvasSpacePosition, o as VectorSelectionInspectorProps, p as VectorViewport, q as VectorViewportHandle, r as VectorViewportProps, W as WorldPointerDownDetail, s as createCanvuPlugin, t as getBoardPositionStyle, u as useCanvuChromeContext, v as useCanvuDocumentContext, w as useCanvuPluginContext, x as useCanvuPluginContribution, y as useCanvuResolvedTools, z as useCanvuViewportContext } from './types-Cm7IsgL4.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { CSSProperties, ReactNode, ReactElement, SVGProps } from 'react';

package/dist/react.js

@@ -711,6 +711,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;
@@ -829,19 +870,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;
@@ -909,21 +938,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);
@@ -985,7 +999,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));
@@ -1000,7 +1014,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 = {
@@ -6492,7 +6508,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__ */ jsx(
@@ -7398,6 +7419,41 @@ var VectorViewport = forwardRef(
     onWorldPointerLeaveRef.current = onWorldPointerLeave;
     const onPlacementPreviewChangeRef = useRef(onPlacementPreviewChange);
     onPlacementPreviewChangeRef.current = onPlacementPreviewChange;
+    const directRemoteStrokePreviewRef = useRef(false);
+    const remoteStrokePreviewFrameRef = useRef(null);
+    const pendingRemoteStrokePreviewRef = useRef(null);
+    const flushRemoteStrokePreviewWithStyle = 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 = 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 = useCallback(() => {
+      if (remoteStrokePreviewFrameRef.current != null) {
+        cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
+        remoteStrokePreviewFrameRef.current = null;
+      }
+      pendingRemoteStrokePreviewRef.current = null;
+      directRemoteStrokePreviewRef.current = false;
+      onPlacementPreviewChangeRef.current?.(null);
+    }, []);
     const overlayCameraTickRef = useRef(false);
     overlayCameraTickRef.current = interactive || remotePresence != null && remotePresence.length > 0 || presenceOverlay != null;
     const pruneEraserTrail = useCallback(
@@ -7516,6 +7572,7 @@ var VectorViewport = forwardRef(
         if (itemId) {
           renderSceneWithLivePenStroke(null);
         }
+        emitRemoteStrokePreviewClear();
         setPlacementPreview(null);
         commitCompletedStroke({
           tool,
@@ -7527,6 +7584,7 @@ var VectorViewport = forwardRef(
       },
       [
         commitCompletedStroke,
+        emitRemoteStrokePreviewClear,
         releaseInteractionPointer,
         renderSceneWithLivePenStroke
       ]
@@ -7638,8 +7696,18 @@ var VectorViewport = forwardRef(
       };
     }, [onWorldPointerMove]);
     useEffect(() => {
+      if (directRemoteStrokePreviewRef.current && placementPreview === null) {
+        return;
+      }
       onPlacementPreviewChangeRef.current?.(placementPreview);
     }, [placementPreview]);
+    useEffect(() => {
+      return () => {
+        if (remoteStrokePreviewFrameRef.current != null) {
+          cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
+        }
+      };
+    }, []);
     useEffect(() => {
       const scene = sceneRef.current;
       if (scene) {
@@ -8633,11 +8701,13 @@ var VectorViewport = 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);
@@ -8674,6 +8744,7 @@ var VectorViewport = forwardRef(
       [
         applePencilNav,
         captureInteractionPointer,
+        emitRemoteStrokePreview,
         finalizeStrokeDragState,
         renderSceneWithLivePenStroke,
         screenToWorld
@@ -8732,6 +8803,7 @@ var VectorViewport = forwardRef(
         activeInteractionPointerIdRef.current = e.pointerId;
         activeInteractionPointerTargetRef.current = null;
         setPlacementPreview(null);
+        emitRemoteStrokePreview(tool, [startPoint]);
         debugApplePencilPointer("native-pointerdown", {
           pointerType: e.pointerType,
           pointerId: e.pointerId,
@@ -8749,6 +8821,7 @@ var VectorViewport = forwardRef(
       };
     }, [
       applePencilNav,
+      emitRemoteStrokePreview,
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
@@ -8832,6 +8905,7 @@ var VectorViewport = forwardRef(
         activeInteractionPointerTargetRef.current = null;
         activeInteractionTouchIdRef.current = touch.identifier;
         setPlacementPreview(null);
+        emitRemoteStrokePreview(tool, [startPoint]);
         debugApplePencilPointer("touchstart-stroke", {
           touchId: touch.identifier,
           touchType: touchKind(touch),
@@ -8863,6 +8937,7 @@ var VectorViewport = forwardRef(
             renderSceneWithLivePenStroke(item);
           }
           setPlacementPreview(null);
+          emitRemoteStrokePreview(st.tool, interpolated);
         }
         debugApplePencilPointer("touchmove-stroke", {
           touchId: touch.identifier,
@@ -8925,6 +9000,7 @@ var VectorViewport = forwardRef(
       };
     }, [
       applePencilNav,
+      emitRemoteStrokePreview,
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
@@ -8979,6 +9055,7 @@ var VectorViewport = forwardRef(
               renderSceneWithLivePenStroke(item);
             }
             setPlacementPreview(null);
+            emitRemoteStrokePreview(st.tool, interpolated);
             return;
           }
           if (st.tool === "laser") {
@@ -8997,7 +9074,8 @@ var VectorViewport = forwardRef(
             setPlacementPreview({
               kind: "stroke",
               tool: st.tool,
-              points: interpolated
+              points: interpolated,
+              style: { ...strokeStyleRef.current }
             });
           }
           return;
@@ -9120,6 +9198,9 @@ var VectorViewport = forwardRef(
         }
         const cam = cameraRef.current;
         if (!cam) {
+          if (st.kind === "stroke") {
+            emitRemoteStrokePreviewClear();
+          }
           if (st.kind === "erase") {
             eraserPreviewIdsRef.current.clear();
             setEraserPreviewIds([]);
@@ -9351,6 +9432,8 @@ var VectorViewport = forwardRef(
         document.removeEventListener("pointercancel", onUp);
       };
     }, [
+      emitRemoteStrokePreview,
+      emitRemoteStrokePreviewClear,
       interactive,
       pruneEraserTrail,
       pruneLaserTrail,