kopia lustrzana https://github.com/Tldraw/Tldraw
78 wiersze
1.8 KiB
TypeScript
78 wiersze
1.8 KiB
TypeScript
import { Tldraw, createTLStore, defaultShapeUtils } from '@tldraw/tldraw'
|
|
import { RoomSnapshot } from '@tldraw/tlsync'
|
|
import { useCallback, useState } from 'react'
|
|
import '../../../styles/core.css'
|
|
import { assetUrls } from '../../utils/assetUrls'
|
|
import { useFileSystem } from '../../utils/useFileSystem'
|
|
|
|
export function BoardHistorySnapshot({
|
|
data,
|
|
roomId,
|
|
timestamp,
|
|
token,
|
|
}: {
|
|
data: RoomSnapshot
|
|
roomId: string
|
|
timestamp: string
|
|
token?: string
|
|
}) {
|
|
const [store] = useState(() => {
|
|
const store = createTLStore({ shapeUtils: defaultShapeUtils })
|
|
store.loadSnapshot({
|
|
schema: data.schema!,
|
|
store: Object.fromEntries(data.documents.map((doc) => [doc.state.id, doc.state])) as any,
|
|
})
|
|
return store
|
|
})
|
|
|
|
const fileSystemUiOverrides = useFileSystem({ isMultiplayer: true })
|
|
|
|
const restoreVersion = useCallback(async () => {
|
|
const sure = window.confirm('Are you sure?')
|
|
if (!sure) return
|
|
|
|
const res = await fetch(`/api/r/${roomId}/restore`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...(token
|
|
? {
|
|
Authorization: 'Bearer ' + token,
|
|
}
|
|
: {}),
|
|
},
|
|
body: JSON.stringify({ timestamp }),
|
|
})
|
|
|
|
if (!res.ok) {
|
|
window.alert('Something went wrong!')
|
|
return
|
|
}
|
|
|
|
window.alert('done')
|
|
}, [roomId, timestamp, token])
|
|
|
|
return (
|
|
<>
|
|
<div className="tldraw__editor">
|
|
<Tldraw
|
|
store={store}
|
|
assetUrls={assetUrls}
|
|
onMount={(editor) => {
|
|
editor.updateInstanceState({ isReadonly: true })
|
|
setTimeout(() => {
|
|
editor.setCurrentTool('hand')
|
|
})
|
|
}}
|
|
overrides={[fileSystemUiOverrides]}
|
|
inferDarkMode
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="board-history__restore">
|
|
<button onClick={restoreVersion}>{'Restore this version'}</button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|