Add shape change examples (#4043)
This PR adds two new examples showing how to reject changes to shape or instance records. ### Change type - [x] `other` ### Release notes - Adds shape / instance change examples.
This commit is contained in:
parent
bc7f0c638e
commit
4fff8a89af
4 changed files with 115 additions and 0 deletions
|
@ -0,0 +1,38 @@
|
||||||
|
import { Tldraw } from 'tldraw'
|
||||||
|
import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
|
// There's a guide at the bottom of this page!
|
||||||
|
|
||||||
|
export default function PreventInstanceChangeExample() {
|
||||||
|
return (
|
||||||
|
<div className="tldraw__editor">
|
||||||
|
<Tldraw
|
||||||
|
onMount={(editor) => {
|
||||||
|
editor.updateInstanceState({ isGridMode: true })
|
||||||
|
|
||||||
|
// [1]
|
||||||
|
editor.sideEffects.registerBeforeChangeHandler('instance', (prev, next) => {
|
||||||
|
if (!next.isGridMode) {
|
||||||
|
return prev
|
||||||
|
}
|
||||||
|
return next
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
In this example, we want to prevent the user from changing the isGridMode property.
|
||||||
|
|
||||||
|
[1]
|
||||||
|
Here we register a handler that will run whenever a change is about to be made to
|
||||||
|
to an "instance" type record.
|
||||||
|
|
||||||
|
The logic we want is that: if the new instance has `isGridMode` set to `false`, then
|
||||||
|
we want to reject the change; otherwise, we want to allow it.
|
||||||
|
|
||||||
|
To reject the change, we return the previous record. To allow the change, we
|
||||||
|
return the next record.
|
||||||
|
*/
|
12
apps/examples/src/examples/prevent-instance-change/README.md
Normal file
12
apps/examples/src/examples/prevent-instance-change/README.md
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
title: Prevent instance change
|
||||||
|
component: ./PreventInstanceChangeExample.tsx
|
||||||
|
category: editor-api
|
||||||
|
keywords: [side, effect, instance, grid, mode, prevent]
|
||||||
|
---
|
||||||
|
|
||||||
|
Prevent a change to the "instance" record that would turn off grid mode.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
You can use Editor's side effects API to prevent certain changes from occuring in the instance state. In this example, we prevent the user from changing the instance's `isGridMode` property.
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { TLGeoShape, Tldraw } from 'tldraw'
|
||||||
|
import 'tldraw/tldraw.css'
|
||||||
|
|
||||||
|
// There's a guide at the bottom of this page!
|
||||||
|
|
||||||
|
export default function PreventMoveExample() {
|
||||||
|
return (
|
||||||
|
<div className="tldraw__editor">
|
||||||
|
<Tldraw
|
||||||
|
onMount={(editor) => {
|
||||||
|
editor.createShape({
|
||||||
|
type: 'geo',
|
||||||
|
x: 100,
|
||||||
|
y: 100,
|
||||||
|
props: { w: 300, h: 300, text: "style me but don't transform me" },
|
||||||
|
})
|
||||||
|
|
||||||
|
// [1]
|
||||||
|
editor.sideEffects.registerBeforeChangeHandler('shape', (prev, next) => {
|
||||||
|
if (
|
||||||
|
editor.isShapeOfType<TLGeoShape>(prev, 'geo') &&
|
||||||
|
editor.isShapeOfType<TLGeoShape>(next, 'geo') &&
|
||||||
|
next.props.geo === 'rectangle'
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
next.x !== prev.x ||
|
||||||
|
next.y !== prev.y ||
|
||||||
|
next.rotation !== prev.rotation ||
|
||||||
|
next.props.w !== prev.props.w ||
|
||||||
|
next.props.h !== prev.props.h
|
||||||
|
) {
|
||||||
|
return prev
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return next
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
[1]
|
||||||
|
Here we register a handler that will run whenever a change is about to be made to
|
||||||
|
a shape's record.
|
||||||
|
|
||||||
|
The logic we want is that: if the shape is a geo shape and a rectangle, and then
|
||||||
|
if the x, y, or rotation properties would be different in the next version of
|
||||||
|
the shape record, or if the props.w, or props.h properties would change, then
|
||||||
|
we want to reject the change; otherwise, we want to allow it.
|
||||||
|
|
||||||
|
To reject the change, we return the previous record. To allow the change, we
|
||||||
|
return the next record.
|
||||||
|
*/
|
10
apps/examples/src/examples/prevent-shape-change/README.md
Normal file
10
apps/examples/src/examples/prevent-shape-change/README.md
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
---
|
||||||
|
title: Prevent shape change
|
||||||
|
component: ./PreventShapeChangeExample.tsx
|
||||||
|
category: editor-api
|
||||||
|
keywords: [side, effect, move, prevent]
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
You can use Editor's side effects API to prevent certain changes from occuring in a shape. In this example, we prevent any changes to the shape's position, rotation, or size.
|
Loading…
Reference in a new issue