canvu-react 0.4.57 → 0.4.59

package/dist/native.js

@@ -1,6 +1,6 @@
 import getStroke from 'perfect-freehand';
 import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text as Text$1, Image } from '@shopify/react-native-skia';
-import { memo, forwardRef, useState, useRef, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
+import { memo, useRef, useMemo, forwardRef, useState, useImperativeHandle, useEffect, useCallback } from 'react';
 import { StyleSheet, PanResponder, View, Modal, Text, TextInput, Pressable, ScrollView, Image as Image$1 } from 'react-native';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -3835,6 +3835,47 @@ function cullItemsByViewport(items, visibleWorld) {
   }
   return cullItemsByViewportSpatial(items, visibleWorld, SPATIAL_CELL_SIZE);
 }
+
+// src/native/native-scene-culling.ts
+var NATIVE_SCENE_CULL_OVERSCAN_RATIO = 0.5;
+function expandRect(rect, ratio) {
+  const safeRatio = Number.isFinite(ratio) ? Math.max(0, ratio) : 0;
+  const insetX = rect.width * safeRatio;
+  const insetY = rect.height * safeRatio;
+  return {
+    x: rect.x - insetX,
+    y: rect.y - insetY,
+    width: rect.width + insetX * 2,
+    height: rect.height + insetY * 2
+  };
+}
+function rectContainsRect(outer, inner) {
+  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+function resolveNativeSceneVisibleItems({
+  items,
+  visibleWorld,
+  cache,
+  overscanRatio = NATIVE_SCENE_CULL_OVERSCAN_RATIO
+}) {
+  if (cache && cache.items === items && rectContainsRect(cache.cullRect, visibleWorld)) {
+    return {
+      cache,
+      visible: cache.visible
+    };
+  }
+  const cullRect = expandRect(visibleWorld, overscanRatio);
+  const visible = cullItemsByViewport(items, cullRect);
+  const nextCache = {
+    items,
+    cullRect,
+    visible
+  };
+  return {
+    cache: nextCache,
+    visible
+  };
+}
 var MemoShape = memo(function MemoShape2({
   item
 }) {
@@ -3855,13 +3896,20 @@ var NativeSceneRenderer = memo(function NativeSceneRenderer2({
   height,
   renderTick
 }) {
+  const visibleCacheRef = useRef(null);
   const cameraTransform = skiaCameraTransform(camera.zoom, camera.x, camera.y);
-  const visible = cullItemsByViewport(
+  const resolvedVisible = resolveNativeSceneVisibleItems({
     items,
-    camera.getVisibleWorldRect(width, height)
+    visibleWorld: width > 0 && height > 0 ? camera.getVisibleWorldRect(width, height) : { x: 0, y: 0, width: 0, height: 0 },
+    cache: visibleCacheRef.current
+  });
+  visibleCacheRef.current = resolvedVisible.cache;
+  const shapeElements = useMemo(
+    () => resolvedVisible.visible.map((item) => /* @__PURE__ */ jsx(MemoShape, { item }, item.id)),
+    [resolvedVisible.visible]
   );
   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)) }) });
+  return /* @__PURE__ */ jsx(Canvas, { style: { width, height }, children: /* @__PURE__ */ jsx(Group, { transform: cameraTransform, children: shapeElements }) });
 });
 
 // src/native/native-style-inspector-values.ts
@@ -5541,6 +5589,58 @@ function NativeSelectionContextMenuButton({
     }
   );
 }
+var NativeCameraRenderLayer = forwardRef(function NativeCameraRenderLayer2({
+  items,
+  camera,
+  width,
+  height,
+  interactive,
+  selectedItems,
+  showResizeHandles,
+  placementPreview,
+  laserTrail,
+  eraserTrail,
+  eraserPreviewItems,
+  previewStrokeStyle,
+  remotePresence
+}, ref) {
+  const [cameraTick, setCameraTick] = useState(0);
+  useImperativeHandle(
+    ref,
+    () => ({
+      requestRender: () => setCameraTick((n) => n + 1)
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NativeSceneRenderer,
+      {
+        items,
+        camera,
+        width,
+        height,
+        renderTick: cameraTick
+      }
+    ),
+    interactive && /* @__PURE__ */ jsx(
+      NativeInteractionOverlay,
+      {
+        camera,
+        width,
+        height,
+        selectedItems,
+        showResizeHandles,
+        placementPreview,
+        laserTrail,
+        eraserTrail,
+        eraserPreviewItems,
+        previewStrokeStyle,
+        remotePresence
+      }
+    )
+  ] });
+});
 var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   items,
   selectedIds = [],
@@ -5568,6 +5668,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
 }, ref) {
   const [size, setSize] = useState({ width: 0, height: 0 });
   const cameraRef = useRef(null);
+  const cameraRenderLayerRef = useRef(null);
   const toolIdRef = useRef(toolId);
   toolIdRef.current = toolId;
   const toolLockedRef = useRef(toolLocked);
@@ -5762,7 +5863,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     cameraRef.current = new Camera2D({ minZoom: 0.05, maxZoom: 32 });
   }
   const camera = cameraRef.current;
-  const [cameraTick, setCameraTick] = useState(0);
   const selectedItems = useMemo(
     () => activeItems.filter((item) => selectedIds.includes(item.id)),
     [activeItems, selectedIds]
@@ -5839,7 +5939,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     onWorldPointerLeaveRef.current?.();
   }, []);
   const requestRender = useCallback(() => {
-    setCameraTick((n) => n + 1);
+    cameraRenderLayerRef.current?.requestRender();
     onCameraChangeRef.current?.();
   }, []);
   const onLayout = useCallback((e) => {
@@ -6746,7 +6846,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   const nativeLinkCanSubmit = pendingNativeLinkRequest !== null && normalizedNativeLinkHref !== null && onItemsChange != null;
   return /* @__PURE__ */ jsxs(View, { style: { flex: 1, overflow: "hidden" }, onLayout, children: [
     size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         View,
         {
           style: StyleSheet.absoluteFill,
@@ -6759,34 +6859,25 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             notifyWorldPointerLeave();
           },
           ...panResponder.panHandlers,
-          children: [
-            /* @__PURE__ */ jsx(
-              NativeSceneRenderer,
-              {
-                items: sceneItems,
-                camera,
-                width: size.width,
-                height: size.height,
-                renderTick: cameraTick
-              }
-            ),
-            interactive && /* @__PURE__ */ jsx(
-              NativeInteractionOverlay,
-              {
-                camera,
-                width: size.width,
-                height: size.height,
-                selectedItems,
-                showResizeHandles,
-                placementPreview,
-                laserTrail,
-                eraserTrail,
-                eraserPreviewItems,
-                previewStrokeStyle: strokeStyleState,
-                remotePresence
-              }
-            )
-          ]
+          children: /* @__PURE__ */ jsx(
+            NativeCameraRenderLayer,
+            {
+              ref: cameraRenderLayerRef,
+              items: sceneItems,
+              camera,
+              width: size.width,
+              height: size.height,
+              interactive,
+              selectedItems,
+              showResizeHandles,
+              placementPreview,
+              laserTrail,
+              eraserTrail,
+              eraserPreviewItems,
+              previewStrokeStyle: strokeStyleState,
+              remotePresence
+            }
+          )
         }
       ),
       overlay ? /* @__PURE__ */ jsx(