canvu-react 0.4.49 → 0.4.51

package/dist/native.d.cts

@@ -113,8 +113,9 @@ type NativeSceneRendererProps = {
     readonly camera: Camera2D;
     readonly width: number;
     readonly height: number;
+    readonly renderTick: number;
 };
-declare function NativeSceneRenderer({ items, camera, width, height, }: NativeSceneRendererProps): react_jsx_runtime.JSX.Element | null;
+declare const NativeSceneRenderer: react.NamedExoticComponent<NativeSceneRendererProps>;
 
 type NativeShapeRendererProps = {
     readonly item: VectorSceneItem;

package/dist/native.d.ts

@@ -113,8 +113,9 @@ type NativeSceneRendererProps = {
     readonly camera: Camera2D;
     readonly width: number;
     readonly height: number;
+    readonly renderTick: number;
 };
-declare function NativeSceneRenderer({ items, camera, width, height, }: NativeSceneRendererProps): react_jsx_runtime.JSX.Element | null;
+declare const NativeSceneRenderer: react.NamedExoticComponent<NativeSceneRendererProps>;
 
 type NativeShapeRendererProps = {
     readonly item: VectorSceneItem;

package/dist/native.js

@@ -3094,11 +3094,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
@@ -3476,6 +3479,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__ */ 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),
+              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, payload.strokeOpacity),
+              style: "stroke",
+              strokeWidth: payload.strokeWidth,
+              strokeCap: "round",
+              strokeJoin: "round",
+              antiAlias: true,
+              children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
+            }
+          );
+        }
+        return null;
+      }
       if (p.points.length === 1) {
         const point = p.points[0];
         if (!point) return null;
@@ -3493,8 +3547,6 @@ function NativeInteractionOverlay({
       }
       const path = buildNativeStrokePreviewPath(p.points);
       if (!path) return null;
-      const strokeDasharray = nativeStrokePreviewDashArray(style, p.tool);
-      const intervals = dashIntervalsFromStrokeDasharray3(strokeDasharray);
       return /* @__PURE__ */ jsx(
         Path,
         {
@@ -3504,8 +3556,7 @@ function NativeInteractionOverlay({
           strokeWidth: style.strokeWidth,
           strokeCap: "round",
           strokeJoin: "round",
-          antiAlias: true,
-          children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
+          antiAlias: true
         }
       );
     }
@@ -3868,11 +3919,12 @@ var MemoShape = memo(function MemoShape2({
   if (rotationTransform.length === 0) return shape;
   return /* @__PURE__ */ jsx(Group, { transform: rotationTransform, origin: rotationOrigin, children: shape });
 });
-function NativeSceneRenderer({
+var NativeSceneRenderer = memo(function NativeSceneRenderer2({
   items,
   camera,
   width,
-  height
+  height,
+  renderTick
 }) {
   const cameraTransform = skiaCameraTransform(camera.zoom, camera.x, camera.y);
   const visible = cullItemsByViewport(
@@ -3881,7 +3933,7 @@ function NativeSceneRenderer({
   );
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsx(Canvas, { style: { width, height }, children: /* @__PURE__ */ jsx(Group, { transform: cameraTransform, children: visible.map((item) => /* @__PURE__ */ jsx(MemoShape, { item }, item.id)) }) });
-}
+});
 
 // src/native/native-style-inspector-values.ts
 var NATIVE_STYLE_PALETTE = [
@@ -5666,6 +5718,11 @@ var NativeVectorViewport = 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 = useMemo(() => {
+    if (eraserPreviewIds.length === 0) return [];
+    const eraserPreviewIdSet = new Set(eraserPreviewIds);
+    return activeItems.filter((item) => eraserPreviewIdSet.has(item.id));
+  }, [activeItems, eraserPreviewIds]);
   const patchSelectedItemsStrokeStyle = useCallback(
     (patch) => {
       const change = onItemsChangeRef.current;
@@ -6472,7 +6529,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
                 items: sceneItems,
                 camera,
                 width: size.width,
-                height: size.height
+                height: size.height,
+                renderTick: cameraTick
               }
             ),
             interactive && /* @__PURE__ */ jsx(
@@ -6486,9 +6544,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
                 placementPreview,
                 laserTrail,
                 eraserTrail,
-                eraserPreviewItems: activeItems.filter(
-                  (item) => eraserPreviewIds.includes(item.id)
-                ),
+                eraserPreviewItems,
                 previewStrokeStyle: strokeStyleState,
                 remotePresence
               }