canvu-react 0.4.46 → 0.4.47

package/dist/native.js

@@ -3026,6 +3026,35 @@ function resolveNativeStrokePreviewStyle(tool, previewStrokeStyle) {
   };
 }
 
+// src/native/native-stroke-preview.ts
+var NATIVE_STROKE_PREVIEW_MAX_POINTS = 160;
+function sampleNativeStrokePreviewPoints(points, maxPoints = NATIVE_STROKE_PREVIEW_MAX_POINTS) {
+  if (points.length <= maxPoints) return points.map((point) => ({ ...point }));
+  if (maxPoints <= 1) {
+    const last2 = points[points.length - 1];
+    return last2 ? [{ ...last2 }] : [];
+  }
+  const lastIndex = points.length - 1;
+  const last = points[lastIndex];
+  if (!last) return [];
+  const step = lastIndex / (maxPoints - 1);
+  return Array.from({ length: maxPoints }, (_, index) => {
+    const point = points[Math.round(index * step)] ?? last;
+    return { x: point.x, y: point.y };
+  });
+}
+function buildNativeStrokePreviewPath(points) {
+  if (points.length < 2) return null;
+  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}`;
+}
+
 // src/native/native-vector-interactions.ts
 var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
 function nativeItemPlacementBounds(item) {
@@ -3397,58 +3426,42 @@ function NativeInteractionOverlay({
         p.tool,
         p.style ?? previewStrokeStyle
       );
-      const payload = computeFreehandSvgPayload(
-        p.points,
-        style,
-        isLaser ? "draw" : p.tool,
-        p.points.length === 2
+      const strokeColor = colorWithOpacity(
+        style.stroke,
+        isLaser ? 0.85 : style.strokeOpacity
       );
-      if (!payload) return null;
-      if (payload.kind === "circle") {
+      if (p.points.length === 1) {
+        const point = p.points[0];
+        if (!point) return null;
         return /* @__PURE__ */ jsx(
           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__ */ jsx(
-          Path,
-          {
-            path: payload.d,
-            color: colorWithOpacity(payload.fill, payload.fillOpacity),
+            cx: point.x,
+            cy: point.y,
+            r: Math.max(0.5, style.strokeWidth / 2),
+            color: strokeColor,
             style: "fill",
-            fillType: "winding",
             antiAlias: true
           }
         );
       }
-      if (payload.kind === "strokePath") {
-        const intervals = dashIntervalsFromStrokeDasharray3(payload.strokeDasharray);
-        return /* @__PURE__ */ jsx(
-          Path,
-          {
-            path: payload.d,
-            color: colorWithOpacity(
-              payload.stroke,
-              isLaser ? 0.85 : payload.strokeOpacity
-            ),
-            style: "stroke",
-            strokeWidth: payload.strokeWidth,
-            strokeCap: "round",
-            strokeJoin: "round",
-            antiAlias: true,
-            children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
-          }
-        );
-      }
-      return null;
+      const path = buildNativeStrokePreviewPath(p.points);
+      if (!path) return null;
+      const strokeDasharray = nativeStrokePreviewDashArray(style, p.tool);
+      const intervals = dashIntervalsFromStrokeDasharray3(strokeDasharray);
+      return /* @__PURE__ */ jsx(
+        Path,
+        {
+          path,
+          color: strokeColor,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          strokeJoin: "round",
+          antiAlias: true,
+          children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
+        }
+      );
     }
     return null;
   }, [placementPreview, previewStrokeStyle, overlayStrokeWorld, marqueeDashWorld]);
@@ -5890,7 +5903,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
-          points: [...pts],
+          points: sampleNativeStrokePreviewPoints(pts),
           style: { ...strokeStyleRef.current }
         });
         return;