AnnotationUI

interface

An interface for the annotations UI plugin class.

The annotations UI class handles displaying, focusing, activating and hiding annotations views.

The annotations UI class must be a plugin, so it has to extend the Plugin or ContextPlugin class.

Examples of AnnotationsUI are:

You can use the following snippet as a base for your own annotations UI:

class MyAnnotationsUI extends ContextPlugin {
	constructor( ...args ) {
		super( ...args );

		this.set( 'activeAnnotation', null );
	}

	attach( annotations ) {
		// Do something when an annotation is added.
		this.listenTo( annotations, 'add', ( evt, annotation ) => { ... } );

		// Do something when an annotation is removed.
		this.listenTo( annotations, 'remove', ( evt, annotation ) => { ... } );
	}

	detach() {
		this.stopListening();
	}

	setActiveAnnotation( annotation ) {
		if ( this.activeAnnotation ) {
			this.activeAnnotation.isActive = false;

			// You can do something in your UI with the annotation that is no longer active.
		}

		this.activeAnnotation = annotation;
		this.activeAnnotation.isActive = true;

		// You can do something in your UI to highlight the active annotation.
	}
}

AnnotationUI

Properties

`_setSelectedAnnotations : ( annotations: Array<Annotation> ) => void | undefined`

`activeAnnotation : null | Annotation`

`attach : ( annotationCollection: AnnotationCollection ) => void`

`detach : () => void`

`setActiveAnnotation : ( annotation: null | Annotation ) => void`