canvu-react 0.4.58 → 0.4.60

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, useImperativeHandle, useRef, useEffect, useCallback, useMemo } 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