kopia lustrzana https://github.com/Tldraw/Tldraw
50 wiersze
1.0 KiB
TypeScript
50 wiersze
1.0 KiB
TypeScript
import { Editor, Tldraw, createShapeId } from 'tldraw'
|
|
|
|
export default function BeforeDeleteShapeExample() {
|
|
return (
|
|
<div className="tldraw__editor">
|
|
<Tldraw
|
|
onMount={(editor) => {
|
|
// register a handler to run before any shape is deleted:
|
|
editor.sideEffects.registerBeforeDeleteHandler('shape', (shape) => {
|
|
// if the shape is red, prevent the deletion:
|
|
if ('color' in shape.props && shape.props.color === 'red') {
|
|
return false
|
|
}
|
|
|
|
return
|
|
})
|
|
|
|
createDemoShapes(editor)
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// create some shapes to demonstrate the side-effect we added
|
|
function createDemoShapes(editor: Editor) {
|
|
const result = editor.createShapes([
|
|
{
|
|
id: createShapeId(),
|
|
type: 'text',
|
|
props: {
|
|
text: "Red shapes can't be deleted",
|
|
color: 'red',
|
|
},
|
|
},
|
|
{
|
|
id: createShapeId(),
|
|
type: 'text',
|
|
y: 30,
|
|
props: {
|
|
text: 'but other shapes can',
|
|
color: 'black',
|
|
},
|
|
},
|
|
])
|
|
if (result.ok) {
|
|
editor.zoomToContent({ duration: 0 })
|
|
}
|
|
}
|