canvu-react 0.4.44 → 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';
 
@@ -957,6 +957,9 @@ function rebuildItemSvg(item) {
   }
   return item;
 }
+function applyStrokeToItem(item, patch) {
+  return rebuildItemSvg({ ...item, ...patch });
+}
 function createRectangleItem(id, bounds, style) {
   const r = normalizeRect(bounds);
   const s = { ...DEFAULT_STROKE_STYLE, ...style };
@@ -1860,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 {
@@ -2862,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") {
@@ -5166,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.",
@@ -5191,6 +5286,14 @@ function isPlacementTool(toolId) {
 function isDefaultMarkerToolStyle(style) {
   return style.stroke === MARKER_TOOL_STYLE.stroke && style.strokeWidth === MARKER_TOOL_STYLE.strokeWidth && style.strokeOpacity === MARKER_TOOL_STYLE.strokeOpacity;
 }
+function getNativeStyleInspectorToolId(item) {
+  const kind = item.toolKind;
+  if (kind === "marker") return "marker";
+  if (kind === "draw" || kind === "pencil" || kind === "brush" || kind === "rect" || kind === "ellipse" || kind === "architectural-cloud" || kind === "line" || kind === "arrow") {
+    return "draw";
+  }
+  return null;
+}
 function placementPreviewForTool(toolId, start, end) {
   if (toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud") {
     return { kind: toolId, rect: rectFromCorners(start, end) };
@@ -5304,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) => {
@@ -5451,15 +5582,48 @@ 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(
+      (item) => !item.locked && getNativeStyleInspectorToolId(item) !== null
+    );
+    if (styleableItems.length === 0) return null;
+    const toolId2 = styleableItems.every((item) => item.toolKind === "marker") ? "marker" : "draw";
+    const primaryItem = toolId2 === "marker" ? styleableItems[0] : styleableItems.find((item) => item.toolKind !== "marker") ?? styleableItems[0];
+    if (!primaryItem) return null;
+    return {
+      toolId: toolId2,
+      value: resolveStrokeStyle(primaryItem)
+    };
+  }, [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) => {
+      const change = onItemsChangeRef.current;
+      if (!change) return;
+      const selectedIdSet = new Set(selectedIdsRef.current);
+      if (selectedIdSet.size === 0) return;
+      let changed = false;
+      const nextItems = itemsRef.current.map((item) => {
+        if (!selectedIdSet.has(item.id) || item.locked || getNativeStyleInspectorToolId(item) === null) {
+          return item;
+        }
+        changed = true;
+        return applyStrokeToItem(item, patch);
+      });
+      if (!changed) return;
+      change(nextItems);
+      patchCurrentStrokeStyle(patch);
+    },
+    [patchCurrentStrokeStyle]
+  );
   const lastPinchDist = useRef(null);
   const lastPanPoint = useRef(null);
   const beginDragAtScreenPoint = useCallback(
@@ -5736,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") {
@@ -5763,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") {
@@ -5773,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") {
@@ -5823,6 +5991,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       requestRender,
       screenToWorld,
       setRealtimePlacementPreview,
+      setTransientItemsPreview,
       updateToolCursorPoint
     ]
   );
@@ -5864,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") {
@@ -6077,6 +6248,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       requestSelectToolAfterUse,
       screenToWorld,
       setRealtimePlacementPreview,
+      commitTransientItemsPreview,
       updateToolCursorPoint
     ]
   );
@@ -6167,6 +6339,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         notifyWorldPointerLeave();
         dragStateRef.current = { kind: "idle" };
         setRealtimePlacementPreview(null);
+        clearTransientItemsPreview();
         setLaserTrail([]);
         setEraserTrail([]);
         setEraserPreviewIds([]);
@@ -6180,7 +6353,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       requestRender,
       hideToolCursor,
       notifyWorldPointerLeave,
-      setRealtimePlacementPreview
+      setRealtimePlacementPreview,
+      clearTransientItemsPreview
     ]
   );
   useImperativeHandle(
@@ -6205,6 +6379,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     [requestRender, size]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
+  const styleInspectorToolId = selectedStyleInspectorState?.toolId ?? activeStyleToolId;
+  const styleInspectorValue = selectedStyleInspectorState?.value ?? strokeStyleState;
+  const styleInspectorChange = selectedStyleInspectorState ? patchSelectedItemsStrokeStyle : patchCurrentStrokeStyle;
   const nativeLinkDialogLabels = {
     ...DEFAULT_NATIVE_LINK_TOOL_DIALOG_LABELS,
     ...linkToolDialogLabels ?? {}
@@ -6247,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
@@ -6271,7 +6448,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           children: overlay
         }
       ) : null,
-      interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(
+      interactive && showStyleInspector && styleInspectorToolId ? /* @__PURE__ */ jsx(
         View,
         {
           pointerEvents: "box-none",
@@ -6294,9 +6471,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           children: /* @__PURE__ */ jsx(
             NativeVectorStyleInspector,
             {
-              toolId: activeStyleToolId,
-              value: strokeStyleState,
-              onChange: patchCurrentStrokeStyle
+              toolId: styleInspectorToolId,
+              value: styleInspectorValue,
+              onChange: styleInspectorChange
             }
           )
         }