canvu-react 0.4.8 → 0.4.10

package/dist/realtime.cjs

@@ -2398,6 +2398,30 @@ function prepareRealtimeItems(items) {
     return null;
   }
 }
+function getRealtimeItemId(item) {
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function serializeRealtimeItem(item) {
+  try {
+    return JSON.stringify(sanitizeRealtimeItem(item));
+  } catch {
+    return null;
+  }
+}
+function resolvePendingDraftItemIds(board, items) {
+  const pendingIds = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    const id = getRealtimeItemId(item);
+    if (!id) continue;
+    const confirmedSerialized = board.lastServerConfirmedItemSerializations.get(id);
+    const serialized = serializeRealtimeItem(item);
+    if (!confirmedSerialized || !serialized || serialized !== confirmedSerialized) {
+      pendingIds.add(id);
+    }
+  }
+  return pendingIds.size > 0 ? Array.from(pendingIds) : void 0;
+}
 function useRealtimeSession(options) {
   const {
     url,
@@ -2588,7 +2612,8 @@ function useRealtimeSession(options) {
     }
     const board = boardRef.current;
     const draft = localDraftRef.current;
-    const draftToWrite = board && draft.yDocState == null ? { ...draft, yDocState: encodeYDocState(board) } : draft;
+    const canEncodeYDocState = board && draft.yDocState == null && sameSerializedItems(readVectorItems(board.yItems), draft.items);
+    const draftToWrite = canEncodeYDocState ? { ...draft, yDocState: encodeYDocState(board) } : draft;
     writeRealtimeOfflineDraft(draftToWrite);
   }, [clearDraftPersistSchedule, roomId]);
   const scheduleDraftPersistence = react.useCallback(() => {
@@ -2728,13 +2753,26 @@ function useRealtimeSession(options) {
       }, DOCUMENT_FLUSH_DEBOUNCE_MS);
     }, DOCUMENT_FLUSH_DEBOUNCE_MS);
   }, [clearDocumentFlushSchedule, flushQueuedDocument]);
-  const queueDocumentSend = react.useCallback((items) => {
-    pendingLocalItemsRef.current = items;
-    queuedDirtyRef.current = true;
-    setHasPendingDocumentSync(true);
-    setHasLocalOfflineDraft(true);
-    scheduleDocumentFlushRef.current();
-  }, []);
+  const queueDocumentSend = react.useCallback(
+    (items) => {
+      pendingLocalItemsRef.current = items;
+      queuedDirtyRef.current = true;
+      setHasPendingDocumentSync(true);
+      setHasLocalOfflineDraft(true);
+      const board = boardRef.current;
+      const draftItems = sanitizeRealtimeItems(items);
+      setLocalDraftRef.current({
+        roomId,
+        baseRevision: currentRevisionRef.current,
+        items: draftItems,
+        updatedAt: nowMs(),
+        pendingIds: board ? resolvePendingDraftItemIds(board, draftItems) : void 0
+      });
+      scheduleDraftPersistenceRef.current?.();
+      scheduleDocumentFlushRef.current();
+    },
+    [roomId]
+  );
   const applyDraftSnapshot = react.useCallback(
     (draft, options2) => {
       const board = boardRef.current;
@@ -2898,6 +2936,25 @@ function useRealtimeSession(options) {
   setLocalDraftRef.current = setLocalDraft;
   const scheduleDraftPersistenceRef = react.useRef(scheduleDraftPersistence);
   scheduleDraftPersistenceRef.current = scheduleDraftPersistence;
+  const persistLocalDraftRef = react.useRef(persistLocalDraft);
+  persistLocalDraftRef.current = persistLocalDraft;
+  react.useEffect(() => {
+    const persistDraft = () => {
+      persistLocalDraftRef.current();
+    };
+    const handleVisibilityChange = () => {
+      if (window.document.visibilityState === "hidden") persistDraft();
+    };
+    window.addEventListener("pagehide", persistDraft);
+    window.document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      window.removeEventListener("pagehide", persistDraft);
+      window.document.removeEventListener(
+        "visibilitychange",
+        handleVisibilityChange
+      );
+    };
+  }, []);
   react.useEffect(() => {
     if (boardRef.current) {
       boardRef.current.doc.destroy();
@@ -3531,6 +3588,22 @@ function realtimeSessionPlugin(options) {
     render: () => /* @__PURE__ */ jsxRuntime.jsx(RealtimeSessionPanel, { ...options })
   };
 }
+function getSceneItemId(item) {
+  const id = item.id;
+  return typeof id === "string" ? id : null;
+}
+function hasMissingLocalItems(localItems, incomingItems) {
+  const incomingIds = /* @__PURE__ */ new Set();
+  for (const item of incomingItems) {
+    const id = getSceneItemId(item);
+    if (id) incomingIds.add(id);
+  }
+  for (const item of localItems) {
+    const id = getSceneItemId(item);
+    if (id && !incomingIds.has(id)) return true;
+  }
+  return false;
+}
 function useRealtimeCanvasDocument(options) {
   const {
     session,
@@ -3549,6 +3622,8 @@ function useRealtimeCanvasDocument(options) {
   const documentItems = session?.document?.items;
   const documentUpdatedByClientId = session?.document?.updatedByClientId ?? null;
   const connectionClientId = session?.connection.clientId ?? null;
+  const hasLocalOfflineDraft = session?.hasLocalOfflineDraft ?? false;
+  const hasPendingDocumentSync = session?.hasPendingDocumentSync ?? false;
   const applyIncomingItems = react.useCallback(
     async (nextItems) => {
       const normalizedItems = normalizeItems ? normalizeItems(nextItems) : [...nextItems];
@@ -3569,6 +3644,11 @@ function useRealtimeCanvasDocument(options) {
     },
     [enabled, normalizeItems, onItemsChange, session]
   );
+  react.useEffect(() => {
+    if (items.length > 0) {
+      hasEverPropagatedItemsRef.current = true;
+    }
+  }, [items.length]);
   react.useEffect(() => {
     if (!realtimeEnabled || !onItemsChange || !session?.document) return;
     if (documentUpdatedByClientId === connectionClientId) return;
@@ -3582,7 +3662,18 @@ function useRealtimeCanvasDocument(options) {
       if (cancelled) return;
       if (inFlightRevisionRef.current !== documentRevision) return;
       lastAppliedRevisionRef.current = documentRevision;
-      if (resolvedItems.length === 0 && hasEverPropagatedItemsRef.current) {
+      const hasLocalItems = items.length > 0;
+      const hasPendingLocalChanges = hasLocalOfflineDraft || hasPendingDocumentSync;
+      if (resolvedItems.length === 0 && (hasEverPropagatedItemsRef.current || hasLocalItems || hasPendingLocalChanges)) {
+        if (hasLocalItems) {
+          const normalizedLocalItems = normalizeItems ? normalizeItems(items) : [...items];
+          session.remoteAdapter.send?.(normalizedLocalItems);
+        }
+        return;
+      }
+      if (hasPendingLocalChanges && hasLocalItems && hasMissingLocalItems(items, resolvedItems)) {
+        const normalizedLocalItems = normalizeItems ? normalizeItems(items) : [...items];
+        session.remoteAdapter.send?.(normalizedLocalItems);
         return;
       }
       if (resolvedItems.length > 0) {
@@ -3605,8 +3696,13 @@ function useRealtimeCanvasDocument(options) {
     documentItems,
     documentRevision,
     documentUpdatedByClientId,
+    hasLocalOfflineDraft,
+    hasPendingDocumentSync,
+    items,
+    normalizeItems,
     onItemsChange,
     realtimeEnabled,
+    session?.remoteAdapter,
     session?.document
   ]);
   return react.useMemo(