kopia lustrzana https://github.com/Tldraw/Tldraw
100 wiersze
2.1 KiB
TypeScript
100 wiersze
2.1 KiB
TypeScript
import { App, Tldraw, TLGeoShape, useApp } from '@tldraw/tldraw'
|
|
import '@tldraw/tldraw/editor.css'
|
|
import '@tldraw/tldraw/ui.css'
|
|
import { useEffect } from 'react'
|
|
|
|
// The tldraw component shares its App instance via its onMount callback prop.
|
|
|
|
// The App instance is tldraw's "god object". You can use the app to do
|
|
// just about everything that's possible in tldraw. Internally, the canvas
|
|
// component and all shapes, tools, and UI components use this instance to
|
|
// send events, observe changes, and perform actions.
|
|
|
|
export default function APIExample() {
|
|
const handleMount = (app: App) => {
|
|
// Create a shape id
|
|
const id = app.createShapeId('hello')
|
|
|
|
app.focus()
|
|
|
|
// Create a shape
|
|
app.createShapes([
|
|
{
|
|
id,
|
|
type: 'geo',
|
|
x: 128 + Math.random() * 500,
|
|
y: 128 + Math.random() * 500,
|
|
props: {
|
|
geo: 'rectangle',
|
|
w: 100,
|
|
h: 100,
|
|
dash: 'draw',
|
|
color: 'blue',
|
|
size: 'm',
|
|
},
|
|
},
|
|
])
|
|
|
|
// Get the created shape
|
|
const shape = app.getShapeById<TLGeoShape>(id)!
|
|
|
|
// Update the shape
|
|
app.updateShapes([
|
|
{
|
|
id,
|
|
type: 'geo',
|
|
props: {
|
|
h: shape.props.h * 3,
|
|
text: 'hello world!',
|
|
},
|
|
},
|
|
])
|
|
|
|
// Select the shape
|
|
app.select(id)
|
|
|
|
// Rotate the shape around its center
|
|
app.rotateShapesBy([id], Math.PI / 8)
|
|
|
|
// Clear the selection
|
|
app.selectNone()
|
|
|
|
// Zoom the camera to fit both shapes
|
|
app.zoomToFit()
|
|
}
|
|
|
|
return (
|
|
<div className="tldraw__editor">
|
|
<Tldraw persistenceKey="api-example" onMount={handleMount} autoFocus={false}>
|
|
<InsideOfAppContext />
|
|
</Tldraw>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Another (sneakier) way to access the current app is through React context.
|
|
// The Tldraw component provides the context, so you can add children to
|
|
// the component and access the app through the useApp hook.
|
|
|
|
const InsideOfAppContext = () => {
|
|
const app = useApp()
|
|
|
|
useEffect(() => {
|
|
let i = 0
|
|
|
|
const interval = setInterval(() => {
|
|
const selection = [...app.selectedIds]
|
|
app.selectAll()
|
|
app.setProp('color', i % 2 ? 'blue' : 'light-blue')
|
|
app.setSelectedIds(selection)
|
|
i++
|
|
}, 1000)
|
|
|
|
return () => {
|
|
clearInterval(interval)
|
|
}
|
|
}, [app])
|
|
|
|
return null
|
|
}
|