kopia lustrzana https://github.com/Tldraw/Tldraw
53 wiersze
1.6 KiB
TypeScript
53 wiersze
1.6 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
import { Tldraw } from '@tldraw/tldraw'
|
|
import * as React from 'react'
|
|
import { RoomProvider } from './liveblocks.config'
|
|
import { useMultiplayerState } from './useMultiplayerState'
|
|
|
|
const roomId = 'mp-test-8'
|
|
|
|
/*
|
|
This example shows how to integrate TLDraw with a multiplayer room
|
|
via LiveBlocks. You could use any other service instead—the important
|
|
part is to get data from the Tldraw app when its document changes
|
|
and update it when the server's synchronized document changes.
|
|
|
|
Warning: Keeping images enabled for multiplayer applications
|
|
without providing a storage bucket based solution will cause
|
|
massive base64 string to be written to the multiplayer storage.
|
|
It's recommended to use a storage bucket based solution, such as
|
|
Amazon AWS S3. See the www project for our implementation.
|
|
*/
|
|
|
|
export function Multiplayer() {
|
|
return (
|
|
<RoomProvider id={roomId}>
|
|
<Editor roomId={roomId} />
|
|
</RoomProvider>
|
|
)
|
|
}
|
|
|
|
function Editor({ roomId }: { roomId: string }) {
|
|
const { error, ...events } = useMultiplayerState(roomId)
|
|
if (error) return <div>Error: {error.message}</div>
|
|
|
|
return (
|
|
<div className="tldraw">
|
|
<Tldraw
|
|
showPages={false}
|
|
{...events}
|
|
disableAssets={true}
|
|
// disableAssets={false}
|
|
// onAssetCreate={async (file: File, id: string) => {
|
|
// const url = await uploadToStorage(file, id)
|
|
// return url
|
|
// }}
|
|
// onAssetDelete={async (id: string) => {
|
|
// await delteFromStorage(id)
|
|
// return
|
|
// }}/>
|
|
/>
|
|
</div>
|
|
)
|
|
}
|