From 90605bee09f5f33301a8e558a3fb25f3c909342a Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Sun, 16 Nov 2025 04:00:31 -0700 Subject: [PATCH] fix: enable real-time multiplayer sync for automerge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add manual sync triggering to broadcast document changes to other peers in real-time. The Automerge Repo wasn't auto-broadcasting because the WebSocket setup doesn't use peer discovery. Changes: - Add triggerSync() helper function to manually trigger sync broadcasts - Call triggerSync() after all document changes (position updates, eraser changes, regular changes) - Pass Automerge document to patch handlers to prevent coordinate loss - Add ImageGenShape support to schema This fixes the issue where changes were being saved to Automerge locally but not broadcast to other connected clients until page reload. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/automerge/useAutomergeStoreV2.ts | 69 ++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 4 deletions(-) diff --git a/src/automerge/useAutomergeStoreV2.ts b/src/automerge/useAutomergeStoreV2.ts index fa712e3..a61e88c 100644 --- a/src/automerge/useAutomergeStoreV2.ts +++ b/src/automerge/useAutomergeStoreV2.ts @@ -124,6 +124,7 @@ import { HolonShape } from "@/shapes/HolonShapeUtil" import { ObsidianBrowserShape } from "@/shapes/ObsidianBrowserShapeUtil" import { FathomMeetingsBrowserShape } from "@/shapes/FathomMeetingsBrowserShapeUtil" import { LocationShareShape } from "@/shapes/LocationShareShapeUtil" +import { ImageGenShape } from "@/shapes/ImageGenShapeUtil" export function useAutomergeStoreV2({ handle, @@ -152,6 +153,7 @@ export function useAutomergeStoreV2({ ObsidianBrowser: {} as any, FathomMeetingsBrowser: {} as any, LocationShare: {} as any, + ImageGen: {} as any, }, bindings: defaultBindingSchemas, }) @@ -174,6 +176,7 @@ export function useAutomergeStoreV2({ ObsidianBrowserShape, FathomMeetingsBrowserShape, LocationShareShape, + ImageGenShape, ], }) return store @@ -207,6 +210,49 @@ export function useAutomergeStoreV2({ // once into the automerge doc and then back again. let isLocalChange = false + // Helper function to manually trigger sync after document changes + // The Automerge Repo doesn't auto-broadcast because our WebSocket setup doesn't use peer discovery + const triggerSync = () => { + try { + const repo = (handle as any).repo + if (repo) { + // Try multiple approaches to trigger sync + + // Approach 1: Use networkSubsystem.syncDoc if available + if (repo.networkSubsystem && typeof repo.networkSubsystem.syncDoc === 'function') { + console.log('🔄 Triggering sync via networkSubsystem.syncDoc()') + repo.networkSubsystem.syncDoc(handle.documentId) + } + // Approach 2: Broadcast to all network adapters directly + else if (repo.networkSubsystem && repo.networkSubsystem.adapters) { + console.log('🔄 Broadcasting sync to all network adapters') + const adapters = Array.from(repo.networkSubsystem.adapters.values()) + adapters.forEach((adapter: any) => { + if (adapter && typeof adapter.send === 'function') { + // Send a sync message via the adapter + // The adapter should handle converting this to the right format + adapter.send({ + type: 'sync', + documentId: handle.documentId, + data: handle.doc() + }) + } + }) + } + // Approach 3: Emit an event to trigger sync + else if (repo.emit && typeof repo.emit === 'function') { + console.log('🔄 Emitting document change event') + repo.emit('change', { documentId: handle.documentId, doc: handle.doc() }) + } + else { + console.warn('⚠️ No known method to trigger sync broadcast found') + } + } + } catch (error) { + console.error('❌ Error triggering manual sync:', error) + } + } + // Listen for changes from Automerge and apply them to TLDraw const automergeChangeHandler = (payload: DocHandleChangePayload) => { if (isLocalChange) { @@ -230,7 +276,10 @@ export function useAutomergeStoreV2({ const recordsBefore = store.allRecords() const shapesBefore = recordsBefore.filter((r: any) => r.typeName === 'shape') - applyAutomergePatchesToTLStore(payload.patches, store) + // CRITICAL: Pass Automerge document to patch handler so it can read full records + // This prevents coordinates from defaulting to 0,0 when patches create new records + const automergeDoc = handle.doc() + applyAutomergePatchesToTLStore(payload.patches, store, automergeDoc) const recordsAfter = store.allRecords() const shapesAfter = recordsAfter.filter((r: any) => r.typeName === 'shape') @@ -249,9 +298,11 @@ export function useAutomergeStoreV2({ // This is a fallback - ideally we should fix the data at the source let successCount = 0 let failedPatches: any[] = [] + // CRITICAL: Pass Automerge document to patch handler so it can read full records + const automergeDoc = handle.doc() for (const patch of payload.patches) { try { - applyAutomergePatchesToTLStore([patch], store) + applyAutomergePatchesToTLStore([patch], store, automergeDoc) successCount++ } catch (individualPatchError) { failedPatches.push({ patch, error: individualPatchError }) @@ -404,6 +455,8 @@ export function useAutomergeStoreV2({ handle.change((doc) => { applyTLStoreChangesToAutomerge(doc, queuedChanges) }) + // Trigger sync to broadcast position updates + triggerSync() setTimeout(() => { isLocalChange = false }, 100) @@ -1044,6 +1097,8 @@ export function useAutomergeStoreV2({ handle.change((doc) => { applyTLStoreChangesToAutomerge(doc, queuedChanges) }) + // Trigger sync to broadcast eraser changes + triggerSync() setTimeout(() => { isLocalChange = false }, 100) @@ -1079,6 +1134,8 @@ export function useAutomergeStoreV2({ handle.change((doc) => { applyTLStoreChangesToAutomerge(doc, mergedChanges) }) + // Trigger sync to broadcast merged changes + triggerSync() setTimeout(() => { isLocalChange = false }, 100) @@ -1091,11 +1148,15 @@ export function useAutomergeStoreV2({ const applyChanges = () => { // Set flag to prevent feedback loop when this change comes back from Automerge isLocalChange = true - + handle.change((doc) => { applyTLStoreChangesToAutomerge(doc, finalFilteredChanges) }) - + + // CRITICAL: Manually trigger Automerge Repo to broadcast changes + // Use requestAnimationFrame to defer this slightly so the change is fully processed + requestAnimationFrame(triggerSync) + // Reset flag after a short delay to allow Automerge change handler to process // This prevents feedback loops while ensuring all changes are saved setTimeout(() => {