tldraw/apps/www/components/MultiplayerEditor.tsx

59 lines
1.4 KiB
TypeScript
Raw Normal View History

import * as React from 'react'
import { RoomProvider } from '../utils/liveblocks'
import { Tldraw, useFileSystem } from '@tldraw/tldraw'
import { useMultiplayerAssets } from 'hooks/useMultiplayerAssets'
import { useMultiplayerState } from 'hooks/useMultiplayerState'
2022-05-19 10:45:59 +00:00
import { useUploadAssets } from 'hooks/useUploadAssets'
import { styled } from 'styles'
interface Props {
roomId: string
}
const MultiplayerEditor = ({ roomId }: Props) => {
return (
<RoomProvider id={roomId}>
<Editor roomId={roomId} />
</RoomProvider>
)
}
// Inner Editor
function Editor({ roomId }: Props) {
const fileSystemEvents = useFileSystem()
const { error, ...events } = useMultiplayerState(roomId)
2022-05-19 10:45:59 +00:00
const { onAssetCreate, onAssetDelete } = useMultiplayerAssets()
const { onAssetUpload } = useUploadAssets()
if (error) return <LoadingScreen>Error: {error.message}</LoadingScreen>
return (
<div className="tldraw">
<Tldraw
autofocus
disableAssets={false}
2021-10-16 20:44:58 +00:00
showPages={false}
onAssetCreate={onAssetCreate}
onAssetDelete={onAssetDelete}
onAssetUpload={onAssetUpload}
{...fileSystemEvents}
{...events}
2021-10-16 20:44:58 +00:00
/>
</div>
)
}
export default MultiplayerEditor
const LoadingScreen = styled('div', {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
})