annotate ui events example (#2460)
annotate ui events example ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - annotate ui events example
This commit is contained in:
parent
8029bf1d29
commit
58ec3145a8
1 changed files with 17 additions and 0 deletions
|
@ -2,6 +2,8 @@ import { TLUiEventHandler, Tldraw } from '@tldraw/tldraw'
|
|||
import '@tldraw/tldraw/tldraw.css'
|
||||
import { useCallback, useState } from 'react'
|
||||
|
||||
// There's a guide at the bottom of this file!
|
||||
|
||||
export default function UiEventsExample() {
|
||||
const [uiEvents, setUiEvents] = useState<string[]>([])
|
||||
|
||||
|
@ -36,3 +38,18 @@ export default function UiEventsExample() {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
This example shows how to listen to UI events. This includes includes things like selecting a tool,
|
||||
grouping shapes, zooming etc. Events are included even if they are triggered by a keyboard shortcut.
|
||||
However, interactions with the style panel are not included. For a full list of events and sources,
|
||||
check out the TLUiEventSource and TLUiEventMap types.
|
||||
|
||||
We can pass a handler function to the onUiEvent prop of the Tldraw component. This handler function
|
||||
will be called with the name of the event and the data associated with the event. We're going to
|
||||
display these events in a list on the right side of the screen.
|
||||
|
||||
To listen to canvas events or changes to the store, check out the canvas events and store events
|
||||
examples.
|
||||
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue