import { Fragment, useCallback, useState } from 'react' import { TLUiEventHandler, Tldraw } from 'tldraw' import 'tldraw/tldraw.css' import { getCodeSnippet } from './codeSnippets' // There's a guide at the bottom of this file! export default function UiEventsExample() { const [uiEvents, setUiEvents] = useState([]) const handleUiEvent = useCallback((name, data: any) => { const codeSnippet = getCodeSnippet(name, data) setUiEvents((events) => [ ...events, `event: ${name} ${JSON.stringify(data)}${codeSnippet && `\ncode: ${codeSnippet}`}`, ]) }, []) return (

event.stopPropagation()} > {uiEvents.map((t, i) => (

{t}

))}

) } /* 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. It also shows the relevant code snippet for each event. This is useful for debugging and learning the tldraw SDK. 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. */

Code x-ray for UI events