Enumeration EventName

Index

Annotation

ANNOTATION_PRESETS_UPDATE

ANNOTATION_PRESETS_UPDATE: "annotationPresets.update"

This event will be emitted whenever the current preset is about to be updated with new property values set by the user in the annotation toolbar.

Example

Prevent the current preset from being updated in the annotation toolbar.

instance.addEventListener("annotationPresets.update", (event) => {
  event.preventDefault();
});

ANNOTATION_SELECTION_CHANGE

ANNOTATION_SELECTION_CHANGE: "annotationSelection.change"

This event will fire whenever an annotation is being selected or unselected.

Example

Log whether an annotation is selected or not when the selection changes.

instance.addEventListener("annotationSelection.change", (annotations) => {
  if (annotations.size !== 0) {
    console.log("annotation is selected");
  } else {
    console.log("no annotation is selected");
  }
});

ANNOTATIONS_BLUR

ANNOTATIONS_BLUR: "annotations.blur"

This event will be emitted whenever an annotation loses focus.

The parameter is a Events.AnnotationsBlurEvent.

Example

Log the annotation and event type when an annotation loses focus.

instance.addEventListener("annotations.blur", (event) => {
  console.log(event.annotation, event.nativeEvent.type)
});

ANNOTATIONS_CHANGE

ANNOTATIONS_CHANGE: "annotations.change"

This event will be emitted whenever the current annotations change either due to a user action (eg. clicking the UI) or via Instance#create, Instance#update or Instance#delete.

The event might also be emitted every time the NutrientViewer's annotations model changes. This for example can happen when scrolling to a page and NutrientViewer loads the annotations for that page or when opening the annotations sidebar and NutrientViewer (has to) loads all the document annotations.

The change event will fire before all specific events and it could be used in case you want to perform some action regardless of which event caused the annotation to "change" (create, delete, update, load, internal load, etc). Consider using the specific events for more advanced use cases.

Example

Perform a custom action whenever the annotations change.

instance.addEventListener("annotations.change", () => {
  // ...
});

ANNOTATIONS_COPY

ANNOTATIONS_COPY: "annotations.copy"

This event will be emitted whenever an annotation is copied using Cmd/Ctrl+C keyboard shortcut.

The parameter is a Events.AnnotationsCopyEvent

Example

Log the annotation that was copied.

instance.addEventListener("annotations.copy", (event) => {
  console.log(event.annotation)
});

ANNOTATIONS_CREATE

ANNOTATIONS_CREATE: "annotations.create"

This event will be emitted whenever new annotations were created (either via the public API or via the UI).

If Nutrient Instant is enabled, annotations created by remote clients will also cause this event to be emitted.

The parameter is a NutrientViewer.Immutable.List of created NutrientViewer.Annotations.Annotation.

Example

Log the list of created annotations.

instance.addEventListener("annotations.create", (createdAnnotations) => {
  console.log(createdAnnotations);
});

ANNOTATIONS_CUT

ANNOTATIONS_CUT: "annotations.cut"

This event will be emitted whenever an annotation is cut using Cmd/Ctrl+X keyboard shortcut.

The parameter is a Events.AnnotationsCutEvent

Example

Log the annotation that was cut.

instance.addEventListener("annotations.cut", (event) => {
  console.log(event.annotation)
});

ANNOTATIONS_DELETE

ANNOTATIONS_DELETE: "annotations.delete"

This event will be emitted whenever new annotations were deleted (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of deleted NutrientViewer.Annotations.

Example

Log the list of deleted annotations.

instance.addEventListener("annotations.delete", (deletedAnnotations) => {
  console.log(deletedAnnotations);
});

ANNOTATIONS_DID_SAVE

ANNOTATIONS_DID_SAVE: "annotations.didSave"

This event will be emitted whenever annotations were saved to the annotation provider.

This event will follow a Events.AnnotationsWillSaveEvent.

Example

Perform an action after annotations are saved.

instance.addEventListener("annotations.didSave", () => {
  // ...
});

ANNOTATIONS_DUPLICATE

ANNOTATIONS_DUPLICATE: "annotations.duplicate"

This event will be emitted whenever an annotation is duplicated using the Ctrl/Cmd+D keyboard shortcut.

The parameter is a Events.AnnotationsDuplicateEvent

Example

Log the annotation that was duplicated.

instance.addEventListener("annotations.duplicate", (event) => {
  console.log(event.annotation)
});

ANNOTATIONS_FOCUS

ANNOTATIONS_FOCUS: "annotations.focus"

This event will be emitted whenever an annotation is focused.

The parameter is a Events.AnnotationsFocusEvent.

Example

Log the annotation and event type when an annotation is focused.

instance.addEventListener("annotations.focus", (event) => {
  console.log(event.annotation, event.nativeEvent.type)
});

ANNOTATIONS_LOAD

ANNOTATIONS_LOAD: "annotations.load"

This event will be emitted whenever annotations are loaded from the annotation provider. This can happen more than once since we often load annotations on demand only.

The parameter is a NutrientViewer.Immutable.List of loaded NutrientViewer.Annotations.

Example

Log the loaded annotations when they are loaded from the provider.

instance.addEventListener("annotations.load", (loadedAnnotations) => {
  console.log(loadedAnnotations);
});

ANNOTATIONS_PASTE

ANNOTATIONS_PASTE: "annotations.paste"

This event will be emitted whenever an annotation is pasted using Cmd/Ctrl+V keyboard shortcut.

The parameter is a Events.AnnotationsPasteEvent

Example

Log the annotations that were pasted.

instance.addEventListener("annotations.paste", (event) => {
  console.log(event.annotations)
});

ANNOTATIONS_PRESS

ANNOTATIONS_PRESS: "annotations.press"

This event will be emitted whenever an annotation is pressed i.e. either clicked or tapped.

The parameter is a Events.AnnotationsPressEvent.

Example

Prevent the default behavior for LinkAnnotation and redirect to another site when an annotation is pressed.

instance.addEventListener("annotations.press", (event) => {
  if (event.annotation instanceof Annotations.LinkAnnotation) {
    event.preventDefault();
    window.location.href = "https://example.com";
  }
});

ANNOTATIONS_TRANSFORM

ANNOTATIONS_TRANSFORM: "annotations.transform"

This event will be emitted whenever an annotation is dragged or resized using the UI.

The parameter is a Events.AnnotationsTransformEvent

Example

Log the bounding box of an annotation when it is transformed.

instance.addEventListener("annotations.transform", (event) => {
  console.log(event.annotation.boundingBox)
});

ANNOTATIONS_UPDATE

ANNOTATIONS_UPDATE: "annotations.update"

This event will be emitted whenever new annotations were updated (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of updated NutrientViewer.Annotations.Annotation.

Example

Log the list of updated annotations.

instance.addEventListener("annotations.update", (updatedAnnotations) => {
  console.log(updatedAnnotations);
});

ANNOTATIONS_WILL_CHANGE

ANNOTATIONS_WILL_CHANGE: "annotations.willChange"

This event will be emitted when the user starts or ends an interaction with an annotation. See NutrientViewer.AnnotationsWillChangeReason for a comprehensive list of actions supported.

Note that this event is only emitted for actions performed through the UI.

Despite the name, it is not necessarily fired before each emission of NutrientViewer.EventName.ANNOTATIONS_CHANGE, since that would not correspond to the list of possible reasons described in NutrientViewer.AnnotationsWillChangeReason on all cases.

Example

Show a message depending on whether the user started or finished deleting an annotation.

instance.addEventListener("annotations.willChange", event => {
  const annotation = event.annotations.get(0);
  if (event.reason === AnnotationsWillChangeReason.DELETE_START) {
    console.log("Will open deletion confirmation dialog");
  } else if (
    event.reason === AnnotationsWillChangeReason.DELETE_END
  ) {
    if (annotation) {
      console.log("The user decided to delete the annotation.");
    } else {
      console.log("The user decided to not delete the annotation.");
    }
  }
});

ANNOTATIONS_WILL_SAVE

ANNOTATIONS_WILL_SAVE: "annotations.willSave"

This event will be emitted before annotations will be saved to the annotation provider.

Right now, this happens whenever attributes of the annotation change (either via the public API or via the UI) and the annotation is in a valid state.

You can use this to display a loading spinner for example. This event will always be followed by Events.AnnotationsDidSaveEvent.

Example

Show a loading spinner before annotations are saved.

instance.addEventListener("annotations.willSave", () => {
  // ...
});

AnnotationNote

ANNOTATION_NOTE_HOVER

ANNOTATION_NOTE_HOVER: "annotationNote.hover"

This event will be emitted whenever an annotation note icon is hovered, which by default shows the annotation note editor popover element.

The parameter is a Events.AnnotationNotePressEvent.

Example

Prevent the default annotation note UI from showing when an annotation note icon is hovered.

instance.addEventListener("annotationNote.hover", (event) => {
  event.preventDefault();
});

ANNOTATION_NOTE_PRESS

ANNOTATION_NOTE_PRESS: "annotationNote.press"

This event will be emitted whenever an annotation note is selected by pressing its associated icon.

The parameter is a Events.AnnotationNotePressEvent.

Example

Prevent the default annotation note UI from showing when an annotation note icon is pressed.

instance.addEventListener("annotationNote.press", (event) => {
  event.preventDefault();
});

Bookmark

BOOKMARKS_CHANGE

BOOKMARKS_CHANGE: "bookmarks.change"

This event will be emitted whenever the current bookmarks change either via Instance#create, Instance#update or Instance#delete.

The change event will fire before all specific events. Consider using the specific events for more advanced use cases.

Example

Perform a custom action whenever the bookmarks change.

instance.addEventListener("bookmarks.change", () => {
  // ...
});

BOOKMARKS_CREATE

BOOKMARKS_CREATE: "bookmarks.create"

This event will be emitted whenever new bookmarks are created (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of created Bookmark.

Example

Log the list of created bookmarks.

instance.addEventListener("bookmarks.create", (createdBookmarks) => {
  console.log(createdBookmarks);
});

BOOKMARKS_DELETE

BOOKMARKS_DELETE: "bookmarks.delete"

This event will be emitted whenever bookmarks are deleted (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of deleted Bookmark.

Example

Log the list of deleted bookmarks.

instance.addEventListener("bookmarks.delete", (deletedBookmarks) => {
  console.log(deletedBookmarks);
});

BOOKMARKS_DID_SAVE

BOOKMARKS_DID_SAVE: "bookmarks.didSave"

This event will be emitted whenever bookmarks were saved to the bookmark provider.

This event will follow a NutrientViewer.EventName.BOOKMARKS_WILL_SAVE.

Example

Perform an action after bookmarks are saved.

instance.addEventListener("bookmarks.didSave", () => {
  // ...
});

BOOKMARKS_LOAD

BOOKMARKS_LOAD: "bookmarks.load"

This event will be emitted whenever bookmarks are loaded from the bookmark provider. This can happen more than once since we often load bookmarks on demand only.

The parameter is a NutrientViewer.Immutable.List of loaded Bookmark.

Example

Log the loaded bookmarks when they are loaded from the provider.

instance.addEventListener("bookmarks.load", (loadedBookmarks) => {
  console.log(loadedBookmarks);
});

BOOKMARKS_UPDATE

BOOKMARKS_UPDATE: "bookmarks.update"

This event will be emitted whenever bookmarks are updated (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of updated Bookmark.

Example

Log the list of updated bookmarks.

instance.addEventListener("bookmarks.update", (updatedBookmarks) => {
  console.log(updatedBookmarks);
});

BOOKMARKS_WILL_SAVE

BOOKMARKS_WILL_SAVE: "bookmarks.willSave"

This event will be emitted before bookmarks will be saved to the bookmark provider.

Right now, this happens whenever attributes of the bookmark change (either via the public API or via the UI) and the bookmark is in a valid state.

You can use this to display a loading spinner for example. This event will always be followed by NutrientViewer.EventName.BOOKMARKS_DID_SAVE.

Example

Show a loading spinner before bookmarks are saved.

instance.addEventListener("bookmarks.willSave", () => {
  // ...
});

Comment

COMMENTS_CHANGE

COMMENTS_CHANGE: "comments.change"

This event will be emitted whenever the current comments change either via Instance#create, Instance#update or Instance#delete.

The change event will fire before all specific events. Consider using the specific events for more advanced use cases.

Example

Perform a custom action whenever the comments change.

instance.addEventListener("comments.change", () => {
  // ...
});

COMMENTS_CREATE

COMMENTS_CREATE: "comments.create"

This event will be emitted whenever new comments are created (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of created Comment.

Example

Log the list of created comments.

instance.addEventListener("comments.create", (createdComments) => {
  console.log(createdComments);
});

COMMENTS_DELETE

COMMENTS_DELETE: "comments.delete"

This event will be emitted whenever comments are deleted (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of deleted Comment.

Example

Log the list of deleted comments.

instance.addEventListener("comments.delete", (deletedComments) => {
  console.log(deletedComments);
});

COMMENTS_DID_SAVE

COMMENTS_DID_SAVE: "comments.didSave"

This event will be emitted whenever comments were saved to the comment provider.

This event will follow a NutrientViewer.EventName.COMMENTS_WILL_SAVE.

Example

Perform an action after comments are saved.

instance.addEventListener("comments.didSave", () => {
  // ...
});

COMMENTS_LOAD

COMMENTS_LOAD: "comments.load"

This event will be emitted whenever comments are loaded from the comment provider. This can happen more than once since we often load comments on demand only.

The parameter is a NutrientViewer.Immutable.List of loaded Comment.

Example

Log the loaded comments when they are loaded from the provider.

instance.addEventListener("comments.load", (loadedComments) => {
  console.log(loadedComments);
});

COMMENTS_MENTION

COMMENTS_MENTION: "comments.mention"

This event is emitted when the list of users mentioned in a comment changes or a new comment is created with mentions. The modifications property contains a list of modifications that were applied to the comment. Each modification contains the user ID and the action that was performed.

The event is only emitted for the user that created or updated the comment either via the UI or the API. If you want to listen for changes to comments made by other users, you can use the comments.create, comments.change and comments.delete event. You get the affected comment in the event payload and can check the mentioned users using Comment.getMentionedUserIds method.

Example

Log which users were mentioned or unmentioned in a comment.

instance.addEventListener("comments.mention", (event) => {
 const { comment, modifications } = event;
 modifications.forEach((modification) => {
   const { userId, action } = modification;
   if (action === "ADDED") {
     console.log(`User ${userId} was mentioned in comment ${comment.id}`);
   } else {
     console.log(`User ${userId} was unmentioned in comment ${comment.id}`);
   }
 });
});

COMMENTS_UPDATE

COMMENTS_UPDATE: "comments.update"

This event will be emitted whenever comments are updated (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of updated Comment.

Example

Log the list of updated comments.

instance.addEventListener("comments.update", (updatedComments) => {
  console.log(updatedComments);
});

COMMENTS_WILL_SAVE

COMMENTS_WILL_SAVE: "comments.willSave"

This event will be emitted before comments will be saved to the comment provider.

Right now, this happens whenever attributes of the comment change (either via the public API or via the UI) and the comment is in a valid state.

You can use this to display a loading spinner for example. This event will always be followed by NutrientViewer.EventName.COMMENTS_DID_SAVE.

Example

Show a loading spinner before comments are saved.

instance.addEventListener("comments.willSave", () => {
  // ...
});

CropArea

CROP_AREA_CHANGE_START

CROP_AREA_CHANGE_START: "cropArea.changeStart"

This event will be emitted whenever the CropArea begins being created, moved, or resized (via UI interaction).

Example

Log the crop area and page index when the crop area starts changing.

instance.addEventListener("cropArea.changeStart", ({ area, pageIndex }) => {
  console.log(area, pageIndex);
});

CROP_AREA_CHANGE_STOP

CROP_AREA_CHANGE_STOP: "cropArea.changeStop"

This event will be emitted whenever the crop area stops being created, moved or resized (via UI interaction).

Example

Log the crop area and page index when the crop area stops changing.

instance.addEventListener("cropArea.changeStop", ({ area, pageIndex }) => {
  console.log(area, pageIndex);
});

Document

DOCUMENT_CHANGE

DOCUMENT_CHANGE: "document.change"

This event will be emitted whenever operations have been performed in the document.

The event listener will receive the array of DocumentOperations operations performed on the document.

Example

Perform a custom action when document operations are performed.

instance.addEventListener("document.change", (operations) => {
  // ...
});

DOCUMENT_SAVE_STATE_CHANGE

DOCUMENT_SAVE_STATE_CHANGE: "document.saveStateChange"

This event will be emitted whenever document save state changes. This reflects changes to return value of Instance.hasUnsavedChanges.

The parameter is Events.SaveStateChangeEvent.

Example

Log whether the document has unsaved changes when the save state changes.

instance.addEventListener("document.saveStateChange", (event) => {
  console.log(`Document has unsaved changes: ${event.hasUnsavedChanges}`);
});

DocumentComparison

DOCUMENT_COMPARISON_UI_END

DOCUMENT_COMPARISON_UI_END: "documentComparisonUI.end"

This event will be emitted whenever the document comparison UI is hidden.

Example

Perform an action when the document comparison UI is hidden.

instance.addEventListener("documentComparisonUI.end", () => {
  // ...
});

DOCUMENT_COMPARISON_UI_START

DOCUMENT_COMPARISON_UI_START: "documentComparisonUI.start"

This event will be emitted whenever the document comparison UI is shown.

The event listener will receive the document comparison configuration object with which setDocumentComparisonMode() has been called.

Example

Perform an action when the document comparison UI is shown.

instance.addEventListener("documentComparisonUI.start", (documentComparisonConfiguration) => {
  // ...
});

Form

FORM_FIELD_VALUES_DID_SAVE

FORM_FIELD_VALUES_DID_SAVE: "formFieldValues.didSave"

This event will be emitted whenever the form field values were saved to the data provider.

This event will follow a NutrientViewer.EventName.FORM_FIELD_VALUES_WILL_SAVE.

Example

Perform an action after form field values are saved.

instance.addEventListener("formFieldValues.didSave", () => {
  // ...
});

FORM_FIELD_VALUES_UPDATE

FORM_FIELD_VALUES_UPDATE: "formFieldValues.update"

This event will be emitted whenever the current value of form field were updated either due to a user action or when Instance#setFormFieldValues is invoked.

Example

Perform a custom action when form field values are updated.

instance.addEventListener("formFieldValues.update", formFields => {
  // ...
});

FORM_FIELD_VALUES_WILL_SAVE

FORM_FIELD_VALUES_WILL_SAVE: "formFieldValues.willSave"

This event will be emitted before form field values will be saved to the data provider.

You can use this to display a loading spinner, for example. This event will always be followed by NutrientViewer.EventName.FORM_FIELD_VALUES_WILL_SAVE.

Example

Show a loading spinner before form field values are saved.

instance.addEventListener("formFieldValues.willSave", () => {
  // ...
});

FORM_FIELDS_CHANGE

FORM_FIELDS_CHANGE: "formFields.change"

This event will be emitted whenever the current form fields change either due to a user action (eg. clicking the UI) or via Instance#create, Instance#update or Instance#delete.

The change event will fire before all specific events and it could be used in case you want to perform some action regardless of which event caused the form fields to "change" (create, delete, update, load, internal load, etc). Consider using the specific events for more advanced use cases.

Example

Perform a custom action whenever the form fields change.

instance.addEventListener("formFields.change", () => {
  // ...
});

FORM_FIELDS_CREATE

FORM_FIELDS_CREATE: "formFields.create"

This event will be emitted whenever new form fields where created (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of created NutrientViewer.FormFields.

Example

Log the list of created form fields.

instance.addEventListener("formFields.create", (createdFormFields) => {
  console.log(createdFormFields);
});

FORM_FIELDS_DELETE

FORM_FIELDS_DELETE: "formFields.delete"

This event will be emitted whenever new form fields where deleted (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of deleted NutrientViewer.FormFields.

Example

Log the list of deleted form fields.

instance.addEventListener("formFields.delete", (deletedFormFields) => {
  console.log(deletedFormFields);
});

FORM_FIELDS_DID_SAVE

FORM_FIELDS_DID_SAVE: "formFields.didSave"

This event will be emitted whenever form fields were saved to the form field provider.

This event will follow a NutrientViewer.EventName.FORM_FIELDS_WILL_SAVE.

Example

Perform an action after form fields are saved.

instance.addEventListener("formFields.didSave", () => {
  // ...
});

FORM_FIELDS_LOAD

FORM_FIELDS_LOAD: "formFields.load"

This event will be emitted whenever form fields are loaded from the form field provider. This can happen more than once since we often load form fields on demand only.

The parameter is a NutrientViewer.Immutable.List of loaded NutrientViewer.FormFields.

Example

Log the loaded form fields when they are loaded from the provider.

instance.addEventListener("formFields.load", (loadedFormFields) => {
  console.log(loadedFormFields);
});

FORM_FIELDS_UPDATE

FORM_FIELDS_UPDATE: "formFields.update"

This event will be emitted whenever new form fields where updated (either via the public API or via the UI).

The parameter is a NutrientViewer.Immutable.List of updated NutrientViewer.FormFields.

Example

Log the list of updated form fields.

instance.addEventListener("formFields.update", (updatedFormFields) => {
  console.log(updatedFormFields);
});

FORM_FIELDS_WILL_SAVE

FORM_FIELDS_WILL_SAVE: "formFields.willSave"

This event will be emitted before form fields will be saved to the form field provider.

Right now, this happens whenever attributes of the form fields change (either via the public API or via the UI) and the form field is in a valid state.

You can use this to display a loading spinner for example. This event will always be followed by NutrientViewer.EventName.FORM_FIELDS_DID_SAVE.

Example

Show a loading spinner before form fields are saved.

instance.addEventListener("formFields.willSave", () => {
  // ...
});

FORMS_DID_SUBMIT

FORMS_DID_SUBMIT: "forms.didSubmit"

This event will be emitted whenever the form got submitted to the specified URI. The event will receive a object from the form submission. If the submission got transmitted successfully, the object will contain a response key, which has a https://developer.mozilla.org/en-US/docs/Web/API/Response|response object as a value. When an error occurred during the submission, the object parameter will have an error key with the error object as a value.

Example

Handle the response or error after a form is submitted.

instance.addEventListener("formFieldValues.didSave", ({ response, error }) => {
  // ...
});

FORMS_WILL_SUBMIT

FORMS_WILL_SUBMIT: "forms.willSubmit"

This event will be emitted whenever the form values will be submitted.

To cancel the form submission, call the preventDefault function with no arguments. This event will follow a NutrientViewer.EventName.FORMS_WILL_SUBMIT, when the submission got not canceled with preventDefault.

Example

Perform a custom action or cancel the form submission.

instance.addEventListener("forms.willSubmit", ({ preventDefault }) => {
  // ...
});

History

HISTORY_CHANGE

HISTORY_CHANGE: "history.change"

This event will be emitted after calling NutrientViewer.Instance#history.undo or NutrientViewer.Instance#history.redo, or after pressing the main toolbar Undo or Redo buttons, optionally available.

If provided, the listener callback will receive a Events.HistoryChangeEvent object.

Example

Log the history change event after undo or redo.

instance.addEventListener("history.change", (historyChangeEvent) => {
  console.log(historyChangeEvent);
});

HISTORY_CLEAR

HISTORY_CLEAR: "history.clear"

This event will be emitted after calling NutrientViewer.Instance#history.clear.

Example

Log a message when the history is cleared.

instance.addEventListener("history.clear", () => {
  console.log('History cleared.');
});

HISTORY_REDO

HISTORY_REDO: "history.redo"

This event will be emitted after calling NutrientViewer.Instance#history.redo or after pressing the main toolbar Redo button, optionally available.

If provided, the listener callback will receive a Events.HistoryChangeEvent object.

Example

Log the history redo event after a redo action.

instance.addEventListener("history.redo", (historyRedoEvent) => {
  console.log(historyRedoEvent);
});

HISTORY_UNDO

HISTORY_UNDO: "history.undo"

This event will be emitted after calling NutrientViewer.Instance#history.undo or after pressing the main toolbar Undo button, optionally available.

If provided, the listener callback will receive a Events.HistoryChangeEvent object.

Example

Log the history undo event after an undo action.

instance.addEventListener("history.undo", (historyUndoEvent) => {
  console.log(historyUndoEvent);
});

HISTORY_WILL_CHANGE

HISTORY_WILL_CHANGE: "history.willChange"

This event will be emitted before adding an annotation change to the actions history; if the event's preventDefault() method is called, the change will not be added and the action will not be undoable.

If provided, the listener callback will receive a Events.HistoryWillChangeEvent object.

Example

Log the history will change event before adding to the actions history.

instance.addEventListener("history.willChange", (historyWillChangeEvent) => {
  console.log(historyWillChangeEvent);
});

InkSignature

INK_SIGNATURES_CHANGE

INK_SIGNATURES_CHANGE: "inkSignatures.change"

This event will fire whenever the list of ink signatures is changed (either a signature was added, updated, or deleted).

Example

Log a message when the ink signature list changes.

instance.addEventListener("inkSignatures.change", () => {
  console.log("ink signature list changed");
});

INK_SIGNATURES_CREATE

INK_SIGNATURES_CREATE: "inkSignatures.create"

This event will fire whenever a signature is created and stored. storedSignatures.create payload returns null values for the annotation id and name. We return these values because the created signature is not attached to the document hence it isn't assigned an id or name. If you want to retrieve a complete list of values of the signature annotation we suggest to listen to the annotations.create event.

Example

Log the annotation when an ink signature is created and stored.

instance.addEventListener("inkSignatures.create", annotation => {
  console.log(annotation);
});

INK_SIGNATURES_DELETE

INK_SIGNATURES_DELETE: "inkSignatures.delete"

This event will fire whenever a signature is deleted.

Example

Log the annotation when an ink signature is deleted.

instance.addEventListener("inkSignatures.delete", annotation => {
  console.log(annotation);
});

INK_SIGNATURES_UPDATE

INK_SIGNATURES_UPDATE: "inkSignatures.update"

This event will fire whenever one ink signature is updated.

Example

Log the updated annotations when an ink signature is updated.

instance.addEventListener("inkSignatures.update", annotations => {
  console.log(annotations);
});

Instant

INSTANT_CONNECTED_CLIENTS_CHANGE

INSTANT_CONNECTED_CLIENTS_CHANGE: "instant.connectedClients.change"

This event will be emitted whenever an instant client connects or disconnects from the current document. See Instance#connectedClients for more information.

To receive this callback, make sure to set up Nutrient Instant correctly.

Example

Log the list of connected clients when the instant client list changes.

instance.addEventListener("instant.connectedClients.change", (clients) => {
  console.log(clients.toJS());
});

Page

PAGE_PRESS

PAGE_PRESS: "page.press"

This event will be emitted whenever a click on a page occurs that is not handled by any occluding page element (annotation, form, etc.).

This event internally uses the onpointerup event triggered by the browser. This is an implementation detail which we are documenting because it is useful to prevent the propagation of click events on custom overlay items. Please don't rely on this behavior if possible and use it wisely as it might break in future.

The parameter is a Events.PagePressEvent.

Example

Log the point in PDF page coordinates when a page is clicked.

instance.addEventListener("page.press", (event) => {
  console.log(event.point);
});

Search

SEARCH_STATE_CHANGE

SEARCH_STATE_CHANGE: "search.stateChange"

Whenever the search state changes, this event will fire with the latest state.

Example

Log whether the search UI is focused when the search state changes.

instance.addEventListener("search.stateChange", (searchState) => {
  console.log(searchState.isFocused);
});

SEARCH_TERM_CHANGE

SEARCH_TERM_CHANGE: "search.termChange"

This event will fire whenever the customer types in a new search term in the search UI. It can be used to plug the default search into your own search UI.

For an example, see Events.SearchTermChangeEvent.

StoredSignature

STORED_SIGNATURES_CHANGE

STORED_SIGNATURES_CHANGE: "storedSignatures.change"

This event will fire whenever the list of ink signatures is changed (either a signature was added, updated, or deleted).

Example

Log a message when the ink signature list changes.

instance.addEventListener("storedSignatures.change", () => {
  console.log("ink signature list changed");
});

STORED_SIGNATURES_CREATE

STORED_SIGNATURES_CREATE: "storedSignatures.create"

This event will fire whenever a signature is created and stored.

Example

Log the annotation when a signature is created and stored.

instance.addEventListener("storedSignatures.create", annotation => {
  console.log(annotation);
});

STORED_SIGNATURES_DELETE

STORED_SIGNATURES_DELETE: "storedSignatures.delete"

This event will fire whenever a signature is deleted.

Example

Log the annotation when a signature is deleted.

instance.addEventListener("storedSignatures.delete", annotation => {
  console.log(annotation);
});

STORED_SIGNATURES_UPDATE

STORED_SIGNATURES_UPDATE: "storedSignatures.update"

This event will fire whenever one ink signature is updated.

Example

Log the updated annotations when an ink signature is updated.

instance.addEventListener("storedSignatures.update", annotations => {
  console.log(annotations);
});

Text

TEXT_LINE_PRESS

TEXT_LINE_PRESS: "textLine.press"

This event will be emitted whenever a click on a text line occurs that is not handled by any occluding page element (annotation, form, etc.).

The parameter is a Events.TextLinePressEvent.

Example

Log the point in PDF page coordinates when a text line is clicked.

instance.addEventListener("textLine.press", (event) => {
  console.log(event.point);
});

TEXT_SELECTION_CHANGE

TEXT_SELECTION_CHANGE: "textSelection.change"

Whenever the text selection changes, this event will fire with the latest selection.

textSelection might be null when the selection was cleared.

Example

Log whether text is selected or not when the selection changes.

instance.addEventListener("textSelection.change", (textSelection) => {
  if (textSelection) {
    console.log("text is selected");
  } else {
    console.log("no text is selected");
  }
});

ViewState

VIEW_STATE_CHANGE

VIEW_STATE_CHANGE: "viewState.change"

This event will be emitted whenever the current view state changes either by the user (via clicking the UI) or via setViewState(). It will be called after other view state specific events. If, for example, the page index changes, Events.ViewStateCurrentPageIndexChangeEvent will emit first.

If you update multiple properties at once, this event will only be dispatched once.

The callback takes the current ViewState as first argument, and the previous ViewState as second.

Example

Log the previous and current view state whenever the view state changes.

instance.addEventListener("viewState.change", (viewState, previousViewState) => {
  console.log(previousViewState.toJS());
  console.log(viewState.toJS());
});

Example

Show the order in which page index and view state change events are emitted.

instance.addEventListener("viewState.currentPageIndex.change", () => console.log("first"));
instance.addEventListener("viewState.change", () => console.log("second"));

VIEW_STATE_CURRENT_PAGE_INDEX_CHANGE

VIEW_STATE_CURRENT_PAGE_INDEX_CHANGE: "viewState.currentPageIndex.change"

This event will be emitted whenever the current page index changes. It can be used to track the current view of a user.

Example

Log the new page index when the page changes.

instance.addEventListener("viewState.currentPageIndex.change", (pageIndex) => {
  console.log(pageIndex);
});

VIEW_STATE_ZOOM_CHANGE

VIEW_STATE_ZOOM_CHANGE: "viewState.zoom.change"

This event will be emitted whenever the zoom level or the zoom mode changes. This could either be a number multiplier or a distinct zoom configuration or zoom mode.

Example

Log the new zoom value when the zoom changes.

instance.addEventListener("viewState.zoom.change", (zoom) => {
  console.log(zoom);
});