canvu-react 0.4.45 → 0.4.46

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, useCallback, useEffect, useMemo, useImperativeHandle } from 'react';
+import { memo, forwardRef, useState, useRef, useEffect, useCallback, useMemo, useImperativeHandle } 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';
 
@@ -1863,6 +1863,63 @@ function smoothFreehandPointsToPathD(points) {
   return d;
 }
 
+// src/native/native-freehand-payload-cache.ts
+var MAX_NATIVE_FREEHAND_PAYLOAD_CACHE_SIZE = 800;
+var pathSignatureCache = /* @__PURE__ */ new WeakMap();
+var payloadCache = /* @__PURE__ */ new Map();
+function hashNumber(hash, value) {
+  const normalizedValue = Math.round(value * 100);
+  return Math.imul(hash ^ normalizedValue, 16777619) >>> 0;
+}
+function getPathPointsSignature(pathPointsLocal) {
+  const cachedSignature = pathSignatureCache.get(pathPointsLocal);
+  if (cachedSignature) return cachedSignature;
+  const hash = pathPointsLocal.reduce((currentHash, point) => {
+    const withX = hashNumber(currentHash, point.x);
+    const withY = hashNumber(withX, point.y);
+    return hashNumber(withY, point.pressure ?? -1);
+  }, 2166136261);
+  const signature = `${pathPointsLocal.length}:${hash}`;
+  pathSignatureCache.set(pathPointsLocal, signature);
+  return signature;
+}
+function getStyleSignature(style) {
+  return [
+    style.stroke,
+    style.strokeWidth,
+    style.strokeOpacity ?? "",
+    style.strokeDash ?? ""
+  ].join(":");
+}
+function getPayloadCacheKey(input) {
+  return [
+    input.itemId,
+    input.toolKind,
+    getStyleSignature(input.style),
+    getPathPointsSignature(input.pathPointsLocal)
+  ].join("|");
+}
+function storePayload(key, payload) {
+  payloadCache.set(key, payload);
+  if (payloadCache.size > MAX_NATIVE_FREEHAND_PAYLOAD_CACHE_SIZE) {
+    const oldestKey = payloadCache.keys().next().value;
+    if (oldestKey !== void 0) {
+      payloadCache.delete(oldestKey);
+    }
+  }
+  return payload;
+}
+function getNativeFreehandSvgPayload(input) {
+  const key = getPayloadCacheKey(input);
+  if (payloadCache.has(key)) {
+    return payloadCache.get(key) ?? null;
+  }
+  return storePayload(
+    key,
+    computeFreehandSvgPayload(input.pathPointsLocal, input.style, input.toolKind)
+  );
+}
+
 // src/native/native-link-card.ts
 function linkHostname(href) {
   try {
@@ -2865,7 +2922,12 @@ function NativeShapeRenderer({ item }) {
     )) });
   }
   if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item.pathPointsLocal && item.pathPointsLocal.length > 0) {
-    const payload = computeFreehandSvgPayload(item.pathPointsLocal, style, k);
+    const payload = getNativeFreehandSvgPayload({
+      itemId: item.id,
+      pathPointsLocal: item.pathPointsLocal,
+      style,
+      toolKind: k
+    });
     if (!payload) return null;
     const color = rgba(style.stroke, style.strokeOpacity);
     if (payload.kind === "circle") {
@@ -5169,6 +5231,36 @@ function hitTestNativeRemotePresence(peers, camera, point) {
   }
   return null;
 }
+
+// src/native/native-transient-items.ts
+function moveNativeTransientItems({
+  items,
+  snapshots,
+  dx,
+  dy
+}) {
+  return items.map((item) => {
+    const snapshot = snapshots[item.id];
+    if (!snapshot) return item;
+    return {
+      ...snapshot,
+      x: snapshot.x + dx,
+      y: snapshot.y + dy,
+      bounds: {
+        ...snapshot.bounds,
+        x: snapshot.bounds.x + dx,
+        y: snapshot.bounds.y + dy
+      }
+    };
+  });
+}
+function replaceNativeTransientItem({
+  items,
+  itemId,
+  item: replacement
+}) {
+  return items.map((item) => item.id === itemId ? replacement : item);
+}
 var DEFAULT_NATIVE_LINK_TOOL_DIALOG_LABELS = {
   title: "Add link",
   description: "Paste the link you want to add to the board.",
@@ -5315,13 +5407,41 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   customPlacementsRef.current = customPlacements;
   const onSelectionChangeRef = useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
-  const itemsRef = useRef(items);
-  itemsRef.current = items;
+  const [transientItems, setTransientItems] = useState(
+    null
+  );
+  const transientItemsRef = useRef(null);
+  const activeItems = transientItems ?? items;
+  const itemsRef = useRef(activeItems);
+  itemsRef.current = activeItems;
   const selectedIdsRef = useRef(selectedIds);
   selectedIdsRef.current = selectedIds;
   const remotePresenceRef = useRef(remotePresence);
   remotePresenceRef.current = remotePresence;
   const dragStateRef = useRef({ kind: "idle" });
+  useEffect(() => {
+    const committedItems = items;
+    if (transientItemsRef.current === null && itemsRef.current === committedItems) {
+      return;
+    }
+    transientItemsRef.current = null;
+    setTransientItems(null);
+  }, [items]);
+  const setTransientItemsPreview = useCallback((nextItems) => {
+    transientItemsRef.current = nextItems;
+    setTransientItems(nextItems);
+  }, []);
+  const clearTransientItemsPreview = useCallback(() => {
+    transientItemsRef.current = null;
+    setTransientItems(null);
+  }, []);
+  const commitTransientItemsPreview = useCallback(() => {
+    const nextItems = transientItemsRef.current;
+    const change = onItemsChangeRef.current;
+    if (!nextItems || !change) return false;
+    change(nextItems);
+    return true;
+  }, []);
   const [placementPreview, setPlacementPreviewState] = useState(null);
   const setRealtimePlacementPreview = useCallback(
     (nextPreview) => {
@@ -5462,8 +5582,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   const hideToolCursor = useCallback(() => {
   }, []);
   const selectedItems = useMemo(
-    () => items.filter((it) => selectedIds.includes(it.id)),
-    [items, selectedIds]
+    () => activeItems.filter((item) => selectedIds.includes(item.id)),
+    [activeItems, selectedIds]
   );
   const selectedStyleInspectorState = useMemo(() => {
     const styleableItems = selectedItems.filter(
@@ -5479,10 +5599,10 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     };
   }, [selectedItems]);
   const sceneItems = useMemo(() => {
-    if (eraserPreviewIds.length === 0) return items;
+    if (eraserPreviewIds.length === 0) return activeItems;
     const hidden = new Set(eraserPreviewIds);
-    return items.filter((it) => !hidden.has(it.id));
-  }, [items, eraserPreviewIds]);
+    return activeItems.filter((item) => !hidden.has(item.id));
+  }, [activeItems, eraserPreviewIds]);
   const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked && supportsNativeResizeHandles(selectedItems[0]);
   const patchSelectedItemsStrokeStyle = useCallback(
     (patch) => {
@@ -5780,21 +5900,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const dy = worldY - st.startWorld.y;
         const change = onItemsChangeRef.current;
         if (!change) return;
-        const nextList = itemsRef.current.map((it) => {
-          const snap = st.snapshots[it.id];
-          if (!snap) return it;
-          return {
-            ...snap,
-            x: snap.x + dx,
-            y: snap.y + dy,
-            bounds: {
-              ...snap.bounds,
-              x: snap.bounds.x + dx,
-              y: snap.bounds.y + dy
-            }
-          };
+        const nextItems = moveNativeTransientItems({
+          items: itemsRef.current,
+          snapshots: st.snapshots,
+          dx,
+          dy
         });
-        change(nextList);
+        setTransientItemsPreview(nextItems);
         return;
       }
       if (st.kind === "rotate") {
@@ -5807,7 +5919,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           st.startPointerAngleRad,
           angle
         );
-        change(itemsRef.current.map((item) => item.id === st.id ? next : item));
+        setTransientItemsPreview(
+          replaceNativeTransientItem({
+            items: itemsRef.current,
+            itemId: st.id,
+            item: next
+          })
+        );
         return;
       }
       if (st.kind === "resize") {
@@ -5817,7 +5935,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           x: worldX,
           y: worldY
         });
-        change(itemsRef.current.map((item) => item.id === st.id ? next : item));
+        setTransientItemsPreview(
+          replaceNativeTransientItem({
+            items: itemsRef.current,
+            itemId: st.id,
+            item: next
+          })
+        );
         return;
       }
       if (st.kind === "marquee") {
@@ -5867,6 +5991,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       requestRender,
       screenToWorld,
       setRealtimePlacementPreview,
+      setTransientItemsPreview,
       updateToolCursorPoint
     ]
   );
@@ -5908,10 +6033,12 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       if (st.kind === "move") {
         dragStateRef.current = { kind: "idle" };
+        commitTransientItemsPreview();
         return;
       }
       if (st.kind === "resize" || st.kind === "rotate") {
         dragStateRef.current = { kind: "idle" };
+        commitTransientItemsPreview();
         return;
       }
       if (st.kind === "marquee") {
@@ -6121,6 +6248,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       requestSelectToolAfterUse,
       screenToWorld,
       setRealtimePlacementPreview,
+      commitTransientItemsPreview,
       updateToolCursorPoint
     ]
   );
@@ -6211,6 +6339,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         notifyWorldPointerLeave();
         dragStateRef.current = { kind: "idle" };
         setRealtimePlacementPreview(null);
+        clearTransientItemsPreview();
         setLaserTrail([]);
         setEraserTrail([]);
         setEraserPreviewIds([]);
@@ -6224,7 +6353,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       requestRender,
       hideToolCursor,
       notifyWorldPointerLeave,
-      setRealtimePlacementPreview
+      setRealtimePlacementPreview,
+      clearTransientItemsPreview
     ]
   );
   useImperativeHandle(
@@ -6294,8 +6424,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
                 placementPreview,
                 laserTrail,
                 eraserTrail,
-                eraserPreviewItems: items.filter(
-                  (it) => eraserPreviewIds.includes(it.id)
+                eraserPreviewItems: activeItems.filter(
+                  (item) => eraserPreviewIds.includes(item.id)
                 ),
                 previewStrokeStyle: strokeStyleState,
                 remotePresence