canvu-react 0.4.50 → 0.4.52

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

@@ -3073,22 +3073,6 @@ 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);
@@ -3919,11 +3903,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(
@@ -3932,7 +3917,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 = [
@@ -5717,6 +5702,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;
@@ -5988,22 +5978,19 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const dx = worldX - (last?.x ?? worldX);
         const dy = worldY - (last?.y ?? worldY);
         const shouldAppendPoint = Math.hypot(dx, dy) > 0.5 / cam.zoom;
-        if (shouldAppendPoint) {
-          pts.push({ x: worldX, y: worldY });
-        }
+        if (!shouldAppendPoint) return;
+        pts.push({ x: worldX, y: worldY });
         if (st.tool === "laser") {
-          if (shouldAppendPoint) {
-            setLaserTrail((prev) => [
-              ...prev,
-              { x: worldX, y: worldY, t: Date.now() }
-            ]);
-          }
+          setLaserTrail((prev) => [
+            ...prev,
+            { x: worldX, y: worldY, t: Date.now() }
+          ]);
           return;
         }
         setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
-          points: sampleNativeStrokePreviewPoints(pts),
+          points: pts.map((previewPoint) => ({ ...previewPoint })),
           style: { ...strokeStyleRef.current }
         });
         return;
@@ -6523,7 +6510,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
                 items: sceneItems,
                 camera,
                 width: size.width,
-                height: size.height
+                height: size.height,
+                renderTick: cameraTick
               }
             ),
             interactive && /* @__PURE__ */ jsx(
@@ -6537,9 +6525,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
                 placementPreview,
                 laserTrail,
                 eraserTrail,
-                eraserPreviewItems: activeItems.filter(
-                  (item) => eraserPreviewIds.includes(item.id)
-                ),
+                eraserPreviewItems,
                 previewStrokeStyle: strokeStyleState,
                 remotePresence
               }