canvu-react 0.4.45 → 0.4.47

package/dist/native.cjs

@@ -1869,6 +1869,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 {
@@ -2871,7 +2928,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") {
@@ -2970,6 +3032,35 @@ 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);
+  return d || null;
+}
+function nativeStrokePreviewDashArray(style, tool) {
+  if (style.strokeDash !== "dashed" || tool !== "draw") return void 0;
+  const dash = Math.max(style.strokeWidth * 1.8, 4);
+  const gap = Math.max(style.strokeWidth * 1.4, 3);
+  return `${dash} ${gap}`;
+}
+
 // src/native/native-vector-interactions.ts
 var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
 function nativeItemPlacementBounds(item) {
@@ -3341,58 +3432,42 @@ function NativeInteractionOverlay({
         p.tool,
         p.style ?? previewStrokeStyle
       );
-      const payload = computeFreehandSvgPayload(
-        p.points,
-        style,
-        isLaser ? "draw" : p.tool,
-        p.points.length === 2
+      const strokeColor = colorWithOpacity(
+        style.stroke,
+        isLaser ? 0.85 : style.strokeOpacity
       );
-      if (!payload) return null;
-      if (payload.kind === "circle") {
+      if (p.points.length === 1) {
+        const point = p.points[0];
+        if (!point) return null;
         return /* @__PURE__ */ jsxRuntime.jsx(
           reactNativeSkia.Circle,
           {
-            cx: payload.cx,
-            cy: payload.cy,
-            r: payload.r,
-            color: colorWithOpacity(payload.fill, payload.fillOpacity),
+            cx: point.x,
+            cy: point.y,
+            r: Math.max(0.5, style.strokeWidth / 2),
+            color: strokeColor,
             style: "fill",
             antiAlias: true
           }
         );
       }
-      if (payload.kind === "fillPath") {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          reactNativeSkia.Path,
-          {
-            path: payload.d,
-            color: colorWithOpacity(payload.fill, payload.fillOpacity),
-            style: "fill",
-            fillType: "winding",
-            antiAlias: true
-          }
-        );
-      }
-      if (payload.kind === "strokePath") {
-        const intervals = dashIntervalsFromStrokeDasharray3(payload.strokeDasharray);
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          reactNativeSkia.Path,
-          {
-            path: payload.d,
-            color: colorWithOpacity(
-              payload.stroke,
-              isLaser ? 0.85 : payload.strokeOpacity
-            ),
-            style: "stroke",
-            strokeWidth: payload.strokeWidth,
-            strokeCap: "round",
-            strokeJoin: "round",
-            antiAlias: true,
-            children: intervals ? /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.DashPathEffect, { intervals }) : null
-          }
-        );
-      }
-      return null;
+      const path = buildNativeStrokePreviewPath(p.points);
+      if (!path) return null;
+      const strokeDasharray = nativeStrokePreviewDashArray(style, p.tool);
+      const intervals = dashIntervalsFromStrokeDasharray3(strokeDasharray);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Path,
+        {
+          path,
+          color: strokeColor,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          strokeJoin: "round",
+          antiAlias: true,
+          children: intervals ? /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.DashPathEffect, { intervals }) : null
+        }
+      );
     }
     return null;
   }, [placementPreview, previewStrokeStyle, overlayStrokeWorld, marqueeDashWorld]);
@@ -5175,6 +5250,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.",
@@ -5321,13 +5426,41 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   customPlacementsRef.current = customPlacements;
   const onSelectionChangeRef = react.useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
-  const itemsRef = react.useRef(items);
-  itemsRef.current = items;
+  const [transientItems, setTransientItems] = react.useState(
+    null
+  );
+  const transientItemsRef = react.useRef(null);
+  const activeItems = transientItems ?? items;
+  const itemsRef = react.useRef(activeItems);
+  itemsRef.current = activeItems;
   const selectedIdsRef = react.useRef(selectedIds);
   selectedIdsRef.current = selectedIds;
   const remotePresenceRef = react.useRef(remotePresence);
   remotePresenceRef.current = remotePresence;
   const dragStateRef = react.useRef({ kind: "idle" });
+  react.useEffect(() => {
+    const committedItems = items;
+    if (transientItemsRef.current === null && itemsRef.current === committedItems) {
+      return;
+    }
+    transientItemsRef.current = null;
+    setTransientItems(null);
+  }, [items]);
+  const setTransientItemsPreview = react.useCallback((nextItems) => {
+    transientItemsRef.current = nextItems;
+    setTransientItems(nextItems);
+  }, []);
+  const clearTransientItemsPreview = react.useCallback(() => {
+    transientItemsRef.current = null;
+    setTransientItems(null);
+  }, []);
+  const commitTransientItemsPreview = react.useCallback(() => {
+    const nextItems = transientItemsRef.current;
+    const change = onItemsChangeRef.current;
+    if (!nextItems || !change) return false;
+    change(nextItems);
+    return true;
+  }, []);
   const [placementPreview, setPlacementPreviewState] = react.useState(null);
   const setRealtimePlacementPreview = react.useCallback(
     (nextPreview) => {
@@ -5468,8 +5601,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   const hideToolCursor = react.useCallback(() => {
   }, []);
   const selectedItems = react.useMemo(
-    () => items.filter((it) => selectedIds.includes(it.id)),
-    [items, selectedIds]
+    () => activeItems.filter((item) => selectedIds.includes(item.id)),
+    [activeItems, selectedIds]
   );
   const selectedStyleInspectorState = react.useMemo(() => {
     const styleableItems = selectedItems.filter(
@@ -5485,10 +5618,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     };
   }, [selectedItems]);
   const sceneItems = react.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 = react.useCallback(
     (patch) => {
@@ -5776,7 +5909,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
-          points: [...pts],
+          points: sampleNativeStrokePreviewPoints(pts),
           style: { ...strokeStyleRef.current }
         });
         return;
@@ -5786,21 +5919,13 @@ var NativeVectorViewport = react.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") {
@@ -5813,7 +5938,13 @@ var NativeVectorViewport = react.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") {
@@ -5823,7 +5954,13 @@ var NativeVectorViewport = react.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") {
@@ -5873,6 +6010,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       requestRender,
       screenToWorld,
       setRealtimePlacementPreview,
+      setTransientItemsPreview,
       updateToolCursorPoint
     ]
   );
@@ -5914,10 +6052,12 @@ var NativeVectorViewport = react.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") {
@@ -6127,6 +6267,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       requestSelectToolAfterUse,
       screenToWorld,
       setRealtimePlacementPreview,
+      commitTransientItemsPreview,
       updateToolCursorPoint
     ]
   );
@@ -6217,6 +6358,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         notifyWorldPointerLeave();
         dragStateRef.current = { kind: "idle" };
         setRealtimePlacementPreview(null);
+        clearTransientItemsPreview();
         setLaserTrail([]);
         setEraserTrail([]);
         setEraserPreviewIds([]);
@@ -6230,7 +6372,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       requestRender,
       hideToolCursor,
       notifyWorldPointerLeave,
-      setRealtimePlacementPreview
+      setRealtimePlacementPreview,
+      clearTransientItemsPreview
     ]
   );
   react.useImperativeHandle(
@@ -6300,8 +6443,8 @@ var NativeVectorViewport = react.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