canvu-react 0.4.49 → 0.4.51

package/dist/native.cjs

@@ -3100,11 +3100,14 @@ function buildNativeStrokePreviewPath(points) {
   const d = smoothFreehandPointsToPathD(points);
   return d || null;
 }
-function nativeStrokePreviewDashArray(style, tool) {
-  if (style.strokeDash !== "dashed" || tool !== "draw") return void 0;
-  const dash = Math.max(style.strokeWidth * 1.8, 4);
-  const gap = Math.max(style.strokeWidth * 1.4, 3);
-  return `${dash} ${gap}`;
+function buildNativeFreehandStrokePreviewPayload(points, style, tool) {
+  if (tool === "laser") return null;
+  return computeFreehandSvgPayload(
+    points.map((point) => ({ x: point.x, y: point.y })),
+    style,
+    tool,
+    true
+  );
 }
 
 // src/native/native-vector-interactions.ts
@@ -3482,6 +3485,57 @@ function NativeInteractionOverlay({
         style.stroke,
         isLaser ? 0.85 : style.strokeOpacity
       );
+      if (!isLaser) {
+        const payload = buildNativeFreehandStrokePreviewPayload(
+          p.points,
+          style,
+          p.tool
+        );
+        if (payload?.kind === "circle") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNativeSkia.Circle,
+            {
+              cx: payload.cx,
+              cy: payload.cy,
+              r: payload.r,
+              color: colorWithOpacity(payload.fill, payload.fillOpacity),
+              style: "fill",
+              antiAlias: true
+            }
+          );
+        }
+        if (payload?.kind === "fillPath") {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNativeSkia.Path,
+            {
+              path: payload.d,
+              color: colorWithOpacity(payload.fill, payload.fillOpacity),
+              style: "fill",
+              fillType: "winding",
+              antiAlias: true
+            }
+          );
+        }
+        if (payload?.kind === "strokePath") {
+          const intervals = dashIntervalsFromStrokeDasharray3(
+            payload.strokeDasharray
+          );
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNativeSkia.Path,
+            {
+              path: payload.d,
+              color: colorWithOpacity(payload.stroke, payload.strokeOpacity),
+              style: "stroke",
+              strokeWidth: payload.strokeWidth,
+              strokeCap: "round",
+              strokeJoin: "round",
+              antiAlias: true,
+              children: intervals ? /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.DashPathEffect, { intervals }) : null
+            }
+          );
+        }
+        return null;
+      }
       if (p.points.length === 1) {
         const point = p.points[0];
         if (!point) return null;
@@ -3499,8 +3553,6 @@ function NativeInteractionOverlay({
       }
       const path = buildNativeStrokePreviewPath(p.points);
       if (!path) return null;
-      const strokeDasharray = nativeStrokePreviewDashArray(style, p.tool);
-      const intervals = dashIntervalsFromStrokeDasharray3(strokeDasharray);
       return /* @__PURE__ */ jsxRuntime.jsx(
         reactNativeSkia.Path,
         {
@@ -3510,8 +3562,7 @@ function NativeInteractionOverlay({
           strokeWidth: style.strokeWidth,
           strokeCap: "round",
           strokeJoin: "round",
-          antiAlias: true,
-          children: intervals ? /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.DashPathEffect, { intervals }) : null
+          antiAlias: true
         }
       );
     }
@@ -3874,11 +3925,12 @@ var MemoShape = react.memo(function MemoShape2({
   if (rotationTransform.length === 0) return shape;
   return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: rotationTransform, origin: rotationOrigin, children: shape });
 });
-function NativeSceneRenderer({
+var NativeSceneRenderer = react.memo(function NativeSceneRenderer2({
   items,
   camera,
   width,
-  height
+  height,
+  renderTick
 }) {
   const cameraTransform = skiaCameraTransform(camera.zoom, camera.x, camera.y);
   const visible = cullItemsByViewport(
@@ -3887,7 +3939,7 @@ function NativeSceneRenderer({
   );
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Canvas, { style: { width, height }, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: cameraTransform, children: visible.map((item) => /* @__PURE__ */ jsxRuntime.jsx(MemoShape, { item }, item.id)) }) });
-}
+});
 
 // src/native/native-style-inspector-values.ts
 var NATIVE_STYLE_PALETTE = [
@@ -5672,6 +5724,11 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     return activeItems.filter((item) => !hidden.has(item.id));
   }, [activeItems, eraserPreviewIds]);
   const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked && supportsNativeResizeHandles(selectedItems[0]);
+  const eraserPreviewItems = react.useMemo(() => {
+    if (eraserPreviewIds.length === 0) return [];
+    const eraserPreviewIdSet = new Set(eraserPreviewIds);
+    return activeItems.filter((item) => eraserPreviewIdSet.has(item.id));
+  }, [activeItems, eraserPreviewIds]);
   const patchSelectedItemsStrokeStyle = react.useCallback(
     (patch) => {
       const change = onItemsChangeRef.current;
@@ -6478,7 +6535,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
                 items: sceneItems,
                 camera,
                 width: size.width,
-                height: size.height
+                height: size.height,
+                renderTick: cameraTick
               }
             ),
             interactive && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6492,9 +6550,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
                 placementPreview,
                 laserTrail,
                 eraserTrail,
-                eraserPreviewItems: activeItems.filter(
-                  (item) => eraserPreviewIds.includes(item.id)
-                ),
+                eraserPreviewItems,
                 previewStrokeStyle: strokeStyleState,
                 remotePresence
               }