import { useCallback, useState } from 'react' import { TLEventInfo, Tldraw } from 'tldraw' import 'tldraw/tldraw.css' // There's a guide at the bottom of this file! export default function CanvasEventsExample() { const [events, setEvents] = useState([]) const handleEvent = useCallback((data: TLEventInfo) => { setEvents((events) => { const newEvents = events.slice(0, 100) if ( newEvents[newEvents.length - 1] && newEvents[newEvents.length - 1].type === 'pointer' && data.type === 'pointer' && data.target === 'canvas' ) { newEvents[newEvents.length - 1] = data } else { newEvents.unshift(data) } return newEvents }) }, []) return (

{ editor.on('event', (event) => handleEvent(event)) }} />

event.stopPropagation()} >

{JSON.stringify(events, undefined, 2)}

) } /* This example shows how to listen to canvas events. This includes things like pointer and keyboard events, but not things such as undo/redo, create/delete shapes, etc. Those are store events. To listen to changes to the store, check out the store events example. */

Canvas events