2022-08-02 13:56:12 +00:00
|
|
|
import { ColorStyle, TDShapeType, Tldraw, TldrawApp } from '@tldraw/tldraw'
|
2021-09-08 11:53:52 +00:00
|
|
|
import * as React from 'react'
|
|
|
|
|
2022-05-14 13:15:55 +00:00
|
|
|
export default function Imperative() {
|
2021-11-16 16:01:29 +00:00
|
|
|
const rTldrawApp = React.useRef<TldrawApp>()
|
2021-11-08 14:21:37 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const handleMount = React.useCallback((app: TldrawApp) => {
|
|
|
|
rTldrawApp.current = app
|
2021-09-08 11:53:52 +00:00
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
app.createShapes(
|
2021-09-08 11:53:52 +00:00
|
|
|
{
|
|
|
|
id: 'rect1',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Rectangle,
|
2021-09-08 11:53:52 +00:00
|
|
|
name: 'Rectangle',
|
|
|
|
childIndex: 1,
|
|
|
|
point: [0, 0],
|
|
|
|
size: [100, 100],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'rect2',
|
|
|
|
name: 'Rectangle',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Rectangle,
|
2021-09-08 11:53:52 +00:00
|
|
|
point: [200, 200],
|
|
|
|
size: [100, 100],
|
|
|
|
}
|
|
|
|
)
|
|
|
|
}, [])
|
|
|
|
|
2021-09-08 13:40:04 +00:00
|
|
|
React.useEffect(() => {
|
|
|
|
let i = 0
|
|
|
|
const interval = setInterval(() => {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = rTldrawApp.current!
|
|
|
|
const rect1 = app.getShape('rect1')
|
2021-09-08 13:40:04 +00:00
|
|
|
|
|
|
|
if (!rect1) {
|
2021-11-16 16:01:29 +00:00
|
|
|
app.createShapes({
|
2021-11-08 14:21:37 +00:00
|
|
|
id: 'rect1',
|
2021-11-16 16:01:29 +00:00
|
|
|
type: TDShapeType.Rectangle,
|
2021-11-08 14:21:37 +00:00
|
|
|
name: 'Rectangle',
|
|
|
|
childIndex: 1,
|
|
|
|
point: [0, 0],
|
|
|
|
size: [100, 100],
|
|
|
|
})
|
2021-09-08 13:40:04 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
const color = i % 2 ? ColorStyle.Red : ColorStyle.Blue
|
|
|
|
|
2022-08-09 23:18:59 +00:00
|
|
|
app.updateShapes({
|
2021-09-08 13:40:04 +00:00
|
|
|
id: 'rect1',
|
|
|
|
style: {
|
|
|
|
...rect1.style,
|
|
|
|
color,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
i++
|
|
|
|
}, 1000)
|
|
|
|
return () => clearInterval(interval)
|
|
|
|
}, [])
|
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
return <Tldraw onMount={handleMount} />
|
2021-09-08 11:53:52 +00:00
|
|
|
}
|