canvu-react 0.4.42 → 0.4.44

package/dist/realtimeNative.cjs

@@ -269,6 +269,12 @@ function parseRealtimeServerMessage(value) {
   }
   return void 0;
 }
+var CLIENT_ONLY_IMAGE_KEYS = /* @__PURE__ */ new Set([
+  "imageBlobId",
+  "imageThumbnailBlobId",
+  "imageRasterHref",
+  "imageThumbnailHref"
+]);
 function getSceneItemId(item) {
   const id = item.id;
   return typeof id === "string" ? id : null;
@@ -285,6 +291,43 @@ function hasMissingLocalItems(localItems, incomingItems) {
   }
   return false;
 }
+function getComparableRealtimeItem(item) {
+  const comparable = { ...item };
+  if (item.toolKind === "image") {
+    for (const key of CLIENT_ONLY_IMAGE_KEYS) {
+      delete comparable[key];
+    }
+    comparable.childrenSvg = "";
+  }
+  return comparable;
+}
+function serializeComparableRealtimeItem(item) {
+  return JSON.stringify(getComparableRealtimeItem(item));
+}
+function hasChangedLocalItems(localItems, incomingItems) {
+  const incomingItemsById = /* @__PURE__ */ new Map();
+  for (const incomingItem of incomingItems) {
+    const id = getSceneItemId(incomingItem);
+    if (id) incomingItemsById.set(id, incomingItem);
+  }
+  for (const localItem of localItems) {
+    const id = getSceneItemId(localItem);
+    const incomingItem = id ? incomingItemsById.get(id) : null;
+    if (!incomingItem) continue;
+    if (serializeComparableRealtimeItem(localItem) !== serializeComparableRealtimeItem(incomingItem)) {
+      return true;
+    }
+  }
+  return false;
+}
+function shouldPreserveLocalRealtimeItems({
+  localItems,
+  incomingItems,
+  hasPendingLocalChanges
+}) {
+  if (!hasPendingLocalChanges) return false;
+  return hasMissingLocalItems(localItems, incomingItems) || hasChangedLocalItems(localItems, incomingItems);
+}
 function useRealtimeCanvasDocument(options) {
   const {
     session,
@@ -297,6 +340,8 @@ function useRealtimeCanvasDocument(options) {
   const [loading, setLoading] = react.useState(false);
   const lastAppliedRevisionRef = react.useRef(null);
   const inFlightRevisionRef = react.useRef(null);
+  const latestItemsRef = react.useRef(items);
+  const hasLocalChangeInFlightRef = react.useRef(false);
   const hasEverPropagatedItemsRef = react.useRef(false);
   const realtimeEnabled = enabled && session != null;
   const documentRevision = session?.document?.revision ?? null;
@@ -319,6 +364,7 @@ function useRealtimeCanvasDocument(options) {
         onItemsChange?.(normalizeItems ? normalizeItems(nextItems) : nextItems);
         return;
       }
+      hasLocalChangeInFlightRef.current = true;
       const normalizedItems = normalizeItems ? normalizeItems(nextItems) : nextItems;
       onItemsChange?.(normalizedItems);
       session?.remoteAdapter.send?.(normalizedItems);
@@ -326,10 +372,16 @@ function useRealtimeCanvasDocument(options) {
     [enabled, normalizeItems, onItemsChange, session]
   );
   react.useEffect(() => {
+    latestItemsRef.current = items;
     if (items.length > 0) {
       hasEverPropagatedItemsRef.current = true;
     }
-  }, [items.length]);
+  }, [items]);
+  react.useEffect(() => {
+    if (!hasLocalOfflineDraft && !hasPendingDocumentSync) {
+      hasLocalChangeInFlightRef.current = false;
+    }
+  }, [hasLocalOfflineDraft, hasPendingDocumentSync]);
   react.useEffect(() => {
     if (!realtimeEnabled || !onItemsChange || !session?.document) return;
     if (documentUpdatedByClientId === connectionClientId) return;
@@ -343,17 +395,22 @@ function useRealtimeCanvasDocument(options) {
       if (cancelled) return;
       if (inFlightRevisionRef.current !== documentRevision) return;
       lastAppliedRevisionRef.current = documentRevision;
-      const hasLocalItems = items.length > 0;
-      const hasPendingLocalChanges = hasLocalOfflineDraft || hasPendingDocumentSync;
+      const localItems = latestItemsRef.current;
+      const hasLocalItems = localItems.length > 0;
+      const hasPendingLocalChanges = hasLocalOfflineDraft || hasPendingDocumentSync || hasLocalChangeInFlightRef.current;
       if (resolvedItems.length === 0 && (hasEverPropagatedItemsRef.current || hasLocalItems || hasPendingLocalChanges)) {
         if (hasLocalItems) {
-          const normalizedLocalItems = normalizeItems ? normalizeItems(items) : [...items];
+          const normalizedLocalItems = normalizeItems ? normalizeItems(localItems) : [...localItems];
           session.remoteAdapter.send?.(normalizedLocalItems);
         }
         return;
       }
-      if (hasLocalItems && hasMissingLocalItems(items, resolvedItems)) {
-        const normalizedLocalItems = normalizeItems ? normalizeItems(items) : [...items];
+      if (shouldPreserveLocalRealtimeItems({
+        localItems,
+        incomingItems: resolvedItems,
+        hasPendingLocalChanges
+      })) {
+        const normalizedLocalItems = normalizeItems ? normalizeItems(localItems) : [...localItems];
         session.remoteAdapter.send?.(normalizedLocalItems);
         return;
       }
@@ -379,7 +436,6 @@ function useRealtimeCanvasDocument(options) {
     documentUpdatedByClientId,
     hasLocalOfflineDraft,
     hasPendingDocumentSync,
-    items,
     normalizeItems,
     onItemsChange,
     realtimeEnabled,
@@ -542,7 +598,7 @@ function useRealtimePeerFollow(options) {
   }, [followedPeerId, onFollowEnd, sessionPeers, viewportRef]);
 }
 var ITEMS_KEY = "items";
-var CLIENT_ONLY_IMAGE_KEYS = /* @__PURE__ */ new Set([
+var CLIENT_ONLY_IMAGE_KEYS2 = /* @__PURE__ */ new Set([
   "imageBlobId",
   "imageThumbnailBlobId",
   "imageRasterHref",
@@ -635,7 +691,7 @@ function updateYMapInPlace(yMap, next) {
 function normalizeRealtimeItem(item) {
   if (item.toolKind !== "image") return item;
   const normalized = Object.fromEntries(
-    Object.entries(item).filter(([key]) => !CLIENT_ONLY_IMAGE_KEYS.has(key))
+    Object.entries(item).filter(([key]) => !CLIENT_ONLY_IMAGE_KEYS2.has(key))
   );
   normalized.childrenSvg = "";
   return normalized;
@@ -788,6 +844,7 @@ var ORIGIN_BOOTSTRAP = /* @__PURE__ */ Symbol("canvu/realtime/bootstrap");
 var DRAFT_STORAGE_PREFIX = "canvu-realtime-draft:";
 var DOCUMENT_FLUSH_DEBOUNCE_MS = 120;
 var DRAFT_PERSIST_DEBOUNCE_MS = 420;
+var CONNECTION_MESSAGE_STATE_UPDATE_INTERVAL_MS = 1e3;
 function requestRuntimeIdleCallback(callback, timeout) {
   const runtime = globalThis;
   if (typeof runtime.requestIdleCallback === "function") {
@@ -799,7 +856,7 @@ function cancelRuntimeIdleCallback(handle) {
   if (handle == null) return;
   const runtime = globalThis;
   if (typeof runtime.cancelIdleCallback === "function") {
-    runtime.cancelIdleCallback(Number(handle));
+    runtime.cancelIdleCallback(handle);
     return;
   }
   globalThis.clearTimeout(handle);
@@ -920,6 +977,9 @@ function sameSerializedItems(left, right) {
 function nowMs() {
   return Date.now();
 }
+function shouldUpdateRealtimeConnectionMessageState(input) {
+  return input.lastStateUpdateAt == null || input.receivedAt - input.lastStateUpdateAt >= CONNECTION_MESSAGE_STATE_UPDATE_INTERVAL_MS;
+}
 function hasDurableDocumentPersistence(snapshot) {
   return snapshot.persistedRevision == null || snapshot.persistedRevision >= snapshot.revision;
 }
@@ -1083,6 +1143,7 @@ function useRealtimeSession(options) {
   const connectionStateRef = react.useRef(
     enabled ? "connecting" : "offline"
   );
+  const lastConnectionMessageStateUpdateAtRef = react.useRef(null);
   const localDraftRef = react.useRef(null);
   const conflictRef = react.useRef(null);
   const onErrorRef = react.useRef(onError);
@@ -1648,6 +1709,7 @@ function useRealtimeSession(options) {
   react.useEffect(() => {
     if (!enabled) {
       manualDisconnectRef.current = true;
+      lastConnectionMessageStateUpdateAtRef.current = null;
       clearReconnectTimer();
       clearHeartbeatTimer();
       clearConnectTimeout();
@@ -1704,6 +1766,7 @@ function useRealtimeSession(options) {
       return;
     }
     let disposed = false;
+    lastConnectionMessageStateUpdateAtRef.current = null;
     updateConnectionRef.current((prev) => ({
       ...prev,
       state: retryCountRef.current > 0 ? "reconnecting" : "connecting",
@@ -1757,10 +1820,17 @@ function useRealtimeSession(options) {
         }
         const parsed = parseRealtimeServerMessage(payload);
         if (!parsed) return;
-        updateConnectionRef.current((prev) => ({
-          ...prev,
-          lastMessageAt: nowMs()
-        }));
+        const receivedAt = nowMs();
+        if (shouldUpdateRealtimeConnectionMessageState({
+          lastStateUpdateAt: lastConnectionMessageStateUpdateAtRef.current,
+          receivedAt
+        })) {
+          lastConnectionMessageStateUpdateAtRef.current = receivedAt;
+          updateConnectionRef.current((prev) => ({
+            ...prev,
+            lastMessageAt: receivedAt
+          }));
+        }
         if (parsed.type === "session:welcome") {
           retryCountRef.current = 0;
           updateConnectionRef.current((prev) => ({
@@ -1769,7 +1839,7 @@ function useRealtimeSession(options) {
             connected: true,
             clientId: parsed.clientId,
             retryCount: 0,
-            lastConnectedAt: nowMs(),
+            lastConnectedAt: receivedAt,
             lastError: null
           }));
           applyPeersRef.current(parsed.peers);