2021-11-11 11:37:57 +00:00
|
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
2022-07-30 07:27:54 +00:00
|
|
|
import { Tldraw, TldrawApp, useFileSystem } from '@tldraw/tldraw'
|
2022-08-02 13:56:12 +00:00
|
|
|
import * as React from 'react'
|
2021-11-11 11:37:57 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
declare const window: Window & { app: TldrawApp }
|
2021-11-11 11:37:57 +00:00
|
|
|
|
2022-05-14 13:15:55 +00:00
|
|
|
export default function Develop() {
|
2021-11-16 16:01:29 +00:00
|
|
|
const rTldrawApp = React.useRef<TldrawApp>()
|
2021-11-11 11:37:57 +00:00
|
|
|
|
|
|
|
const fileSystemEvents = useFileSystem()
|
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const handleMount = React.useCallback((app: TldrawApp) => {
|
|
|
|
window.app = app
|
|
|
|
rTldrawApp.current = app
|
2021-12-27 19:21:30 +00:00
|
|
|
// app.reset()
|
|
|
|
// app.createShapes({
|
|
|
|
// id: 'box1',
|
|
|
|
// type: TDShapeType.Rectangle,
|
|
|
|
// point: [200, 200],
|
|
|
|
// size: [200, 200],
|
|
|
|
// })
|
2021-11-11 11:37:57 +00:00
|
|
|
}, [])
|
|
|
|
|
|
|
|
const handlePersist = React.useCallback(() => {
|
|
|
|
// noop
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="tldraw">
|
2022-07-23 14:05:48 +00:00
|
|
|
<Tldraw id="develop" {...fileSystemEvents} onMount={handleMount} onPersist={handlePersist} />
|
2021-11-11 11:37:57 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|