kopia lustrzana https://github.com/Tldraw/Tldraw
65 wiersze
1.7 KiB
TypeScript
65 wiersze
1.7 KiB
TypeScript
import { createShapeId, TLBaseShape, TLBoxUtil, Tldraw, TldrawEditorConfig } from '@tldraw/tldraw'
|
|
import '@tldraw/tldraw/editor.css'
|
|
import '@tldraw/tldraw/ui.css'
|
|
|
|
export default function ErrorBoundaryExample() {
|
|
return (
|
|
<div className="tldraw__editor">
|
|
<Tldraw
|
|
components={{
|
|
// disable app-level error boundaries:
|
|
ErrorFallback: null,
|
|
// use a custom error fallback for shapes:
|
|
ShapeErrorFallback: ({ error }) => <div>Shape error! {String(error)}</div>,
|
|
}}
|
|
// below, we define a custom shape that always throws an error so we can see our new error boundary in action
|
|
config={customConfigWithErrorShape}
|
|
onMount={(app) => {
|
|
// when the app starts, create our error shape so we can see
|
|
// what it looks like:
|
|
app.createShapes([
|
|
{
|
|
type: 'error',
|
|
id: createShapeId(),
|
|
x: 0,
|
|
y: 0,
|
|
props: { message: 'Something has gone wrong' },
|
|
},
|
|
])
|
|
|
|
// center the camera on the error shape
|
|
app.zoomToFit()
|
|
app.resetZoom()
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// do make it easy to see our custom shape error fallback, let's create a new
|
|
// shape type that always throws an error. See CustomConfigExample for more info
|
|
// on creating custom shapes.
|
|
type ErrorShape = TLBaseShape<'error', { w: number; h: number; message: string }>
|
|
|
|
class ErrorUtil extends TLBoxUtil<ErrorShape> {
|
|
override type = 'error' as const
|
|
|
|
defaultProps() {
|
|
return { message: 'Error!', w: 100, h: 100 }
|
|
}
|
|
render(shape: ErrorShape) {
|
|
throw new Error(shape.props.message)
|
|
}
|
|
indicator() {
|
|
throw new Error(`Error shape indicator!`)
|
|
}
|
|
}
|
|
|
|
const customConfigWithErrorShape = new TldrawEditorConfig({
|
|
shapes: {
|
|
error: {
|
|
util: ErrorUtil,
|
|
},
|
|
},
|
|
})
|