Events

Lifecycle events are emitted by the annotator in response to user activities. You can attach a handler to the annotator instance via the on method.

Example

anno.on('clickAnnotation', (annotation) => {
  console.log('User clicked annotation: ' + annotation.id);
});

Use lifecycle event listeners to respond to user actions, for example:

• Trigger save actions to a database backend.
• Update other parts of your user interface in reponse to changes in annotation state.
• Implement custom behavior in your application based on annotation interactions.

Events

clickAnnotation

anno.on('clickAnnotation', (annotation, originalEvent) => {
  console.log('Annotation clicked: ' + annotation.id);
});

Fired when a user clicks on an annotation. Provides both the annotation object and the original pointer event.

Argument	Type	Description
annotation	ImageAnnotation	The clicked annotation.
originalEvent	PointerEvent	The associated pointer event.

createAnnotation

anno.on('createAnnotation', (annotation) => {
  console.log('Annotation created: ' + annotation.id);
});

Fired after a new annotation is created.

Argument	Type	Description
annotation	ImageAnnotation	The new annotation.

deleteAnnotation

anno.on('deleteAnnotation', (annotation) => {
  console.log('Annotation deleted: ' + annotation.id);
});

Fired after an annotation is deleted.

Argument	Type	Description
annotation	ImageAnnotation	The deleted annotation.

mouseEnterAnnotation

anno.on('mouseEnterAnnotation', (annotation) => {
  console.log('Mouse entered: ' + annotation.id);
});

Fired when the mouse cursor enters the area of an annotation.

Argument	Type	Description
annotation	ImageAnnotation	The hovered annotation.

mouseLeaveAnnotation

anno.on('mouseLeaveAnnotation', (annotation) => {
  console.log('Mouse left: ' + annotation.id);
});

Fired when the mouse cursor leaves the area of an annotation.

Argument	Type	Description
annotation	ImageAnnotation	The hovered annotation.

selectionChanged

anno.on('selectionChanged', (annotations) => {
  console.log('Selected annotations', annotations);
});

Fired when the set of selected annotation changes. For future compatibility, the argument is an array. However, only single annotation will be returned currently.

When the user de-selects an annotation, the event will be fired with an empty array.

Argument	Type	Description
annotations	Array<ImageAnnotation>	The selected annotation(s) (or an empty array).

updateAnnotation

anno.on('createAnnotation', ((updated, previous) => void) => {
  console.log('Annotation was updated.');
  console.log('Annotation before upate: ' + previous);
  console.log('Annotation after update: ' + updated);
});

Fired when an existing annotation is modified. Provides both the updated annotation and the previous state of the annotation.

Argument	Type	Description
updated	ImageAnnotation	The new annotation after the update.
previous	ImageAnnotation	The annotation before the update.

viewportIntersect

OpenSeadragon only.

anno.on('viewportIntersect', (annotations) => {
  console.log('Annotations in viewport', annotations);
});

Fired when the set of annotations visible in the current viewport changes. This event is only available on the OpenSeadragonAnnotator and will respond to zooming and panning of the OpenSeadragon image.

Argument	Type	Description
annotations	Array<ImageAnnotation>	The annotations in the current viewport.