canvu-react 0.4.42 → 0.4.44

package/dist/realtime.js

@@ -2235,6 +2235,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 requestWindowIdleCallback(callback, timeout) {
   if (typeof window.requestIdleCallback === "function") {
     return window.requestIdleCallback(callback, { timeout });
@@ -2312,6 +2313,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;
 }
@@ -2459,6 +2463,7 @@ function useRealtimeSession(options) {
   const connectionStateRef = useRef(
     enabled ? "connecting" : "offline"
   );
+  const lastConnectionMessageStateUpdateAtRef = useRef(null);
   const localDraftRef = useRef(null);
   const conflictRef = useRef(null);
   const onErrorRef = useRef(onError);
@@ -3011,6 +3016,7 @@ function useRealtimeSession(options) {
   useEffect(() => {
     if (!enabled) {
       manualDisconnectRef.current = true;
+      lastConnectionMessageStateUpdateAtRef.current = null;
       clearReconnectTimer();
       clearHeartbeatTimer();
       clearConnectTimeout();
@@ -3055,6 +3061,7 @@ function useRealtimeSession(options) {
       return;
     }
     let disposed = false;
+    lastConnectionMessageStateUpdateAtRef.current = null;
     updateConnectionRef.current((prev) => ({
       ...prev,
       state: retryCountRef.current > 0 ? "reconnecting" : "connecting",
@@ -3106,10 +3113,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) => ({
@@ -3118,7 +3132,7 @@ function useRealtimeSession(options) {
           connected: true,
           clientId: parsed.clientId,
           retryCount: 0,
-          lastConnectedAt: nowMs(),
+          lastConnectedAt: receivedAt,
           lastError: null
         }));
         applyPeersRef.current(parsed.peers);
@@ -3606,6 +3620,12 @@ function realtimeSessionPlugin(options) {
     render: () => /* @__PURE__ */ jsx(RealtimeSessionPanel, { ...options })
   };
 }
+var CLIENT_ONLY_IMAGE_KEYS2 = /* @__PURE__ */ new Set([
+  "imageBlobId",
+  "imageThumbnailBlobId",
+  "imageRasterHref",
+  "imageThumbnailHref"
+]);
 function getSceneItemId(item) {
   const id = item.id;
   return typeof id === "string" ? id : null;
@@ -3622,6 +3642,43 @@ function hasMissingLocalItems(localItems, incomingItems) {
   }
   return false;
 }
+function getComparableRealtimeItem(item) {
+  const comparable = { ...item };
+  if (item.toolKind === "image") {
+    for (const key of CLIENT_ONLY_IMAGE_KEYS2) {
+      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,
@@ -3634,6 +3691,8 @@ function useRealtimeCanvasDocument(options) {
   const [loading, setLoading] = useState(false);
   const lastAppliedRevisionRef = useRef(null);
   const inFlightRevisionRef = useRef(null);
+  const latestItemsRef = useRef(items);
+  const hasLocalChangeInFlightRef = useRef(false);
   const hasEverPropagatedItemsRef = useRef(false);
   const realtimeEnabled = enabled && session != null;
   const documentRevision = session?.document?.revision ?? null;
@@ -3656,6 +3715,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);
@@ -3663,10 +3723,16 @@ function useRealtimeCanvasDocument(options) {
     [enabled, normalizeItems, onItemsChange, session]
   );
   useEffect(() => {
+    latestItemsRef.current = items;
     if (items.length > 0) {
       hasEverPropagatedItemsRef.current = true;
     }
-  }, [items.length]);
+  }, [items]);
+  useEffect(() => {
+    if (!hasLocalOfflineDraft && !hasPendingDocumentSync) {
+      hasLocalChangeInFlightRef.current = false;
+    }
+  }, [hasLocalOfflineDraft, hasPendingDocumentSync]);
   useEffect(() => {
     if (!realtimeEnabled || !onItemsChange || !session?.document) return;
     if (documentUpdatedByClientId === connectionClientId) return;
@@ -3680,17 +3746,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;
       }
@@ -3716,7 +3787,6 @@ function useRealtimeCanvasDocument(options) {
     documentUpdatedByClientId,
     hasLocalOfflineDraft,
     hasPendingDocumentSync,
-    items,
     normalizeItems,
     onItemsChange,
     realtimeEnabled,