Fix multiplayer room
This commit is contained in:
parent
d0a673931f
commit
6d3251f195
3 changed files with 30 additions and 30 deletions
|
@ -22,21 +22,23 @@ export function Multiplayer() {
|
|||
return (
|
||||
<LiveblocksProvider client={client}>
|
||||
<RoomProvider id={roomId}>
|
||||
<TldrawWrapper />
|
||||
<Editor roomId={roomId} />
|
||||
</RoomProvider>
|
||||
</LiveblocksProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function TldrawWrapper() {
|
||||
function Editor({ roomId }: { roomId: string }) {
|
||||
const [docId] = React.useState(() => Utils.uniqueId())
|
||||
|
||||
const [error, setError] = React.useState<Error>()
|
||||
|
||||
const [app, setApp] = React.useState<TldrawApp>()
|
||||
|
||||
const [error, setError] = React.useState<Error>()
|
||||
|
||||
useErrorListener((err) => setError(err))
|
||||
|
||||
// Setup document
|
||||
|
||||
const doc = useObject<{ uuid: string; document: TDDocument }>('doc', {
|
||||
uuid: docId,
|
||||
document: {
|
||||
|
@ -46,13 +48,10 @@ function TldrawWrapper() {
|
|||
})
|
||||
|
||||
// Put the state into the window, for debugging.
|
||||
const handleMount = React.useCallback(
|
||||
(app: TldrawApp) => {
|
||||
window.app = app
|
||||
setApp(app)
|
||||
},
|
||||
[roomId]
|
||||
)
|
||||
const handleMount = React.useCallback((app: TldrawApp) => {
|
||||
window.app = app
|
||||
setApp(app)
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
const room = client.getRoom(roomId)
|
||||
|
@ -80,8 +79,7 @@ function TldrawWrapper() {
|
|||
|
||||
function handleDocumentUpdates() {
|
||||
if (!doc) return
|
||||
if (!app) return
|
||||
if (!app.room) return
|
||||
if (!app?.room) return
|
||||
|
||||
const docObject = doc.toObject()
|
||||
|
||||
|
@ -101,7 +99,7 @@ function TldrawWrapper() {
|
|||
}
|
||||
|
||||
function handleExit() {
|
||||
if (!(app && app.room)) return
|
||||
if (!app?.room) return
|
||||
room?.broadcastEvent({ name: 'exit', userId: app.room.userId })
|
||||
}
|
||||
|
||||
|
|
|
@ -922,7 +922,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
|||
* Load a fresh room into the state.
|
||||
* @param roomId
|
||||
*/
|
||||
loadRoom = (roomId: string) => {
|
||||
loadRoom = (roomId: string): this => {
|
||||
this.patchState({
|
||||
room: {
|
||||
id: roomId,
|
||||
|
@ -938,6 +938,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
|||
},
|
||||
},
|
||||
})
|
||||
return this
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -29,7 +29,7 @@ export default function MultiplayerEditor({
|
|||
}) {
|
||||
return (
|
||||
<LiveblocksProvider client={client}>
|
||||
<RoomProvider id={roomId}>
|
||||
<RoomProvider id={roomId} defaultStorageRoot={TldrawApp.defaultDocument}>
|
||||
<Editor roomId={roomId} isSponsor={isSponsor} isUser={isUser} />
|
||||
</RoomProvider>
|
||||
</LiveblocksProvider>
|
||||
|
@ -57,6 +57,12 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
|
|||
},
|
||||
})
|
||||
|
||||
// Put the state into the window, for debugging.
|
||||
const handleMount = React.useCallback((app: TldrawApp) => {
|
||||
window.app = app
|
||||
setApp(app)
|
||||
}, [])
|
||||
|
||||
// Setup client
|
||||
|
||||
React.useEffect(() => {
|
||||
|
@ -64,12 +70,9 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
|
|||
|
||||
if (!room) return
|
||||
if (!doc) return
|
||||
if (!app?.room) return
|
||||
if (!app) return
|
||||
|
||||
// Update the user's presence with the user from state
|
||||
const { users, userId } = app.room
|
||||
|
||||
room.updatePresence({ id: userId, user: users[userId] })
|
||||
app.loadRoom(roomId)
|
||||
|
||||
// Subscribe to presence changes; when others change, update the state
|
||||
room.subscribe<TDUserPresence>('others', (others) => {
|
||||
|
@ -124,6 +127,13 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
|
|||
|
||||
if (newDocument) {
|
||||
app.loadDocument(newDocument)
|
||||
app.loadRoom(roomId)
|
||||
|
||||
// Update the user's presence with the user from state
|
||||
if (app.state.room) {
|
||||
const { users, userId } = app.state.room
|
||||
room.updatePresence({ id: userId, user: users[userId] })
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
|
@ -132,15 +142,6 @@ function Editor({ roomId, isSponsor }: { roomId: string; isUser; isSponsor: bool
|
|||
}
|
||||
}, [doc, docId, app, roomId])
|
||||
|
||||
const handleMount = React.useCallback(
|
||||
(app: TldrawApp) => {
|
||||
window.app = app
|
||||
app.loadRoom(roomId)
|
||||
setApp(app)
|
||||
},
|
||||
[roomId]
|
||||
)
|
||||
|
||||
const handlePersist = React.useCallback(
|
||||
(app: TldrawApp) => {
|
||||
doc?.update({ uuid: docId, document: app.document })
|
||||
|
|
Loading…
Reference in a new issue