canvu-react 0.3.26 → 0.3.28

package/dist/react.js

@@ -6448,6 +6448,7 @@ function InteractionOverlay({
     }
   );
 }
+init_shape_builders();
 
 // src/react/presence/peer-color.ts
 function defaultPresenceColorForId(id) {
@@ -6473,6 +6474,9 @@ function strokePaint(tool, fallback) {
       return { stroke: fallback, strokeOpacity: 0.95, widthWorld: 3.5 };
   }
 }
+function isFreehandTool(tool) {
+  return tool === "draw" || tool === "marker" || tool === "pencil" || tool === "brush";
+}
 function PresenceRemoteLayer({
   camera,
   cameraVersion: _cameraVersion,
@@ -6514,34 +6518,72 @@ function PresenceRemoteLayer({
             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(
-              "path",
-              {
-                d,
-                fill: "none",
-                stroke: paint.stroke,
-                strokeOpacity: paint.strokeOpacity,
-                strokeWidth: Math.max(paint.widthWorld / z, overlayStrokePx),
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                shapeRendering: "geometricPrecision",
-                vectorEffect: "non-scaling-stroke"
-              }
+          if (markup.tool === "laser") {
+            const d = markup.points.length >= 2 ? smoothFreehandPointsToPathD([...markup.points]) : null;
+            if (d) {
+              strokeNode = /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d,
+                  fill: "none",
+                  stroke: paint.stroke,
+                  strokeOpacity: paint.strokeOpacity,
+                  strokeWidth: Math.max(paint.widthWorld / z, overlayStrokePx),
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  shapeRendering: "geometricPrecision",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              );
+            }
+          } else if (isFreehandTool(markup.tool)) {
+            const style = {
+              stroke: paint.stroke,
+              strokeWidth: paint.widthWorld,
+              ...paint.strokeOpacity != null ? { strokeOpacity: paint.strokeOpacity } : {}
+            };
+            const payload = computeFreehandSvgPayload(
+              markup.points.map((p) => ({ x: p.x, y: p.y })),
+              style,
+              markup.tool,
+              false
             );
-          } else {
-            const p0 = markup.points[0];
-            if (p0) {
+            if (payload?.kind === "circle") {
               strokeNode = /* @__PURE__ */ jsx(
                 "circle",
                 {
-                  cx: p0.x,
-                  cy: p0.y,
-                  r: Math.max(3 / z, 2),
-                  fill: paint.stroke,
-                  fillOpacity: paint.strokeOpacity,
-                  vectorEffect: "non-scaling-stroke"
+                  cx: payload.cx,
+                  cy: payload.cy,
+                  r: payload.r,
+                  fill: payload.fill,
+                  ...payload.fillOpacity != null ? { fillOpacity: payload.fillOpacity } : {},
+                  shapeRendering: "geometricPrecision"
+                }
+              );
+            } else if (payload?.kind === "fillPath") {
+              strokeNode = /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: payload.d,
+                  fill: payload.fill,
+                  fillRule: "nonzero",
+                  stroke: "none",
+                  ...payload.fillOpacity != null ? { fillOpacity: payload.fillOpacity } : {},
+                  shapeRendering: "geometricPrecision"
+                }
+              );
+            } else if (payload?.kind === "strokePath") {
+              strokeNode = /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: payload.d,
+                  fill: "none",
+                  stroke: payload.stroke,
+                  strokeWidth: payload.strokeWidth,
+                  ...payload.strokeOpacity != null ? { strokeOpacity: payload.strokeOpacity } : {},
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  shapeRendering: "geometricPrecision"
                 }
               );
             }
@@ -7421,7 +7463,14 @@ var VectorViewport = forwardRef(
     onPlacementPreviewChangeRef.current = onPlacementPreviewChange;
     const directRemoteStrokePreviewRef = useRef(false);
     const remoteStrokePreviewFrameRef = useRef(null);
+    const remoteStrokePreviewClearTimerRef = useRef(null);
     const pendingRemoteStrokePreviewRef = useRef(null);
+    const cancelPendingRemoteStrokePreviewClear = useCallback(() => {
+      if (remoteStrokePreviewClearTimerRef.current != null) {
+        clearTimeout(remoteStrokePreviewClearTimerRef.current);
+        remoteStrokePreviewClearTimerRef.current = null;
+      }
+    }, []);
     const flushRemoteStrokePreviewWithStyle = useCallback(() => {
       remoteStrokePreviewFrameRef.current = null;
       const pending = pendingRemoteStrokePreviewRef.current;
@@ -7436,6 +7485,7 @@ var VectorViewport = forwardRef(
     const emitRemoteStrokePreview = useCallback(
       (tool, points) => {
         if (tool === "laser") return;
+        cancelPendingRemoteStrokePreviewClear();
         directRemoteStrokePreviewRef.current = true;
         pendingRemoteStrokePreviewRef.current = { tool, points };
         if (remoteStrokePreviewFrameRef.current != null) return;
@@ -7443,17 +7493,22 @@ var VectorViewport = forwardRef(
           flushRemoteStrokePreviewWithStyle
         );
       },
-      [flushRemoteStrokePreviewWithStyle]
+      [cancelPendingRemoteStrokePreviewClear, flushRemoteStrokePreviewWithStyle]
     );
+    const REMOTE_STROKE_PREVIEW_HOLD_MS = 350;
     const emitRemoteStrokePreviewClear = useCallback(() => {
       if (remoteStrokePreviewFrameRef.current != null) {
         cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
         remoteStrokePreviewFrameRef.current = null;
       }
-      pendingRemoteStrokePreviewRef.current = null;
-      directRemoteStrokePreviewRef.current = false;
-      onPlacementPreviewChangeRef.current?.(null);
-    }, []);
+      cancelPendingRemoteStrokePreviewClear();
+      remoteStrokePreviewClearTimerRef.current = window.setTimeout(() => {
+        remoteStrokePreviewClearTimerRef.current = null;
+        pendingRemoteStrokePreviewRef.current = null;
+        directRemoteStrokePreviewRef.current = false;
+        onPlacementPreviewChangeRef.current?.(null);
+      }, REMOTE_STROKE_PREVIEW_HOLD_MS);
+    }, [cancelPendingRemoteStrokePreviewClear]);
     const overlayCameraTickRef = useRef(false);
     overlayCameraTickRef.current = interactive || remotePresence != null && remotePresence.length > 0 || presenceOverlay != null;
     const pruneEraserTrail = useCallback(
@@ -7706,6 +7761,9 @@ var VectorViewport = forwardRef(
         if (remoteStrokePreviewFrameRef.current != null) {
           cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
         }
+        if (remoteStrokePreviewClearTimerRef.current != null) {
+          clearTimeout(remoteStrokePreviewClearTimerRef.current);
+        }
       };
     }, []);
     useEffect(() => {