Event handling

Annotation events are handled by the annotation component. The component emits different events based on user interactions with the annotations.

A annotation listener can be added through the configuration of the component.

const textAnnotation = AnnotatedText_.init({
  onEvent: ({ mouseEvent, event, data }) => {
    console.log(mouseEvent, event, data);
  },
});

By default the events will be logged to the console with debug statements.

Events

Event Type	Description
mouse-enter	Emitted when the mouse enters (or hover) an annotation.
mouse-leave	Emitted when the mouse leaves an annotation.
click	Emitted when an annotation is clicked, and not other action like edit/create is performed
dblclick	Emitted when an annotation is double-clicked, and not other action like edit/create is performed
annotation-edit--start	Emitted when an annotation is being edited. This is the first event in the edit process.
annotation-edit--move	Emitted when an annotation is being moved during the edit process.
annotation-edit--end	Emitted when an annotation edit is completed. This is the last event in the edit process.
annotation-create--start	Emitted when a new annotation is being created. This is the first event in the create process.
annotation-create--move	Emitted when a new annotation is being moved during the create process.
annotation-create--end	Emitted when a new annotation creation is completed. This is the last event in the create process.

Examples

Log all events