2022-07-23 14:05:48 +00:00
|
|
|
import * as React from 'react'
|
2022-06-25 14:38:43 +00:00
|
|
|
import { RoomProvider } from '../utils/liveblocks'
|
2022-06-09 14:33:35 +00:00
|
|
|
import { Tldraw, useFileSystem } from '@tldraw/tldraw'
|
2022-03-24 09:05:35 +00:00
|
|
|
import { useMultiplayerAssets } from 'hooks/useMultiplayerAssets'
|
2021-11-26 15:14:10 +00:00
|
|
|
import { useMultiplayerState } from 'hooks/useMultiplayerState'
|
2022-05-19 10:45:59 +00:00
|
|
|
import { useUploadAssets } from 'hooks/useUploadAssets'
|
2022-03-24 09:05:35 +00:00
|
|
|
import { styled } from 'styles'
|
2021-10-09 13:57:44 +00:00
|
|
|
|
2022-03-24 09:05:35 +00:00
|
|
|
interface Props {
|
|
|
|
roomId: string
|
|
|
|
}
|
|
|
|
|
2022-07-23 14:05:48 +00:00
|
|
|
const MultiplayerEditor = ({ roomId }: Props) => {
|
2021-10-08 23:05:24 +00:00
|
|
|
return (
|
2022-06-25 14:38:43 +00:00
|
|
|
<RoomProvider id={roomId}>
|
2022-07-23 14:05:48 +00:00
|
|
|
<Editor roomId={roomId} />
|
2022-06-25 14:38:43 +00:00
|
|
|
</RoomProvider>
|
2021-10-08 23:05:24 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
// Inner Editor
|
|
|
|
|
2022-07-23 14:05:48 +00:00
|
|
|
function Editor({ roomId }: Props) {
|
2021-11-16 16:01:29 +00:00
|
|
|
const fileSystemEvents = useFileSystem()
|
2021-11-22 14:00:24 +00:00
|
|
|
const { error, ...events } = useMultiplayerState(roomId)
|
2022-05-19 10:45:59 +00:00
|
|
|
const { onAssetCreate, onAssetDelete } = useMultiplayerAssets()
|
|
|
|
const { onAssetUpload } = useUploadAssets()
|
2021-11-16 16:01:29 +00:00
|
|
|
|
|
|
|
if (error) return <LoadingScreen>Error: {error.message}</LoadingScreen>
|
2021-10-08 23:05:24 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="tldraw">
|
2021-11-16 16:01:29 +00:00
|
|
|
<Tldraw
|
|
|
|
autofocus
|
2022-01-10 15:13:52 +00:00
|
|
|
disableAssets={false}
|
2021-10-16 20:44:58 +00:00
|
|
|
showPages={false}
|
2022-01-10 15:13:52 +00:00
|
|
|
onAssetCreate={onAssetCreate}
|
|
|
|
onAssetDelete={onAssetDelete}
|
2022-05-18 20:46:24 +00:00
|
|
|
onAssetUpload={onAssetUpload}
|
2021-11-16 16:01:29 +00:00
|
|
|
{...fileSystemEvents}
|
2021-11-22 14:00:24 +00:00
|
|
|
{...events}
|
2021-10-16 20:44:58 +00:00
|
|
|
/>
|
2021-10-08 23:05:24 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
2021-11-16 16:01:29 +00:00
|
|
|
|
2022-03-24 09:05:35 +00:00
|
|
|
export default MultiplayerEditor
|
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const LoadingScreen = styled('div', {
|
|
|
|
position: 'absolute',
|
|
|
|
top: 0,
|
|
|
|
left: 0,
|
|
|
|
width: '100%',
|
|
|
|
height: '100%',
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'center',
|
|
|
|
})
|