Example
instance.addEventListener(NutrientViewer.EventName.VIEW_STATE_CHANGE, (viewState, previousViewState) => {
console.log(previousViewState.toJS());
console.log(viewState.toJS());
});
Annotation
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();
});
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");
}
});
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)
});
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", () => {
// ...
});
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)
});
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);
});
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)
});
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);
});
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", () => {
// ...
});
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)
});
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)
});
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);
});
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)
});
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";
}
});
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)
});
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);
});
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.");
}
}
});
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", () => {
// ...
});
This event will be emitted whenever in-progress ink points are captured while drawing.
The parameter is a Events.InkDrawingEvent
Example
Log the in-flight annotation while an ink stroke is being drawn.
instance.addEventListener("ink.drawing", (event) => {
console.log(event.annotation.lines.last()?.size);
});
AnnotationNote
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();
});
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
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", () => {
// ...
});
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);
});
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);
});
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", () => {
// ...
});
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);
});
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);
});
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
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", () => {
// ...
});
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);
});
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);
});
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", () => {
// ...
});
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);
});
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}`);
}
});
});
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);
});
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", () => {
// ...
});
ContentEditor
Single coalesced event covering every observable change inside the live content editor session: session start / end, mode flip (edit / create / delete), dirty-flag toggle, active or selected text block change, and current-style change at the cursor / selection.
The listener receives a Events.ContentEditorStateChangeEvent snapshot. A custom toolbar reads everything it needs from this single payload — there is no need to poll instance.contentEditor.getCurrentStyle() and friends. The event is shallow-equality deduplicated, so identical consecutive snapshots do not fire.
A consumer that only cares about a single facet (e.g. selected-block changes) can
diff event.selectedBlockId against the previously seen value inside their
handler. Splitting this into per-facet events would multiply listener boilerplate
for the common toolbar use-case; a single snapshot-style event keeps that simple.
Example
instance.addEventListener("contentEditor.stateChange", (event) => {
if (event.currentStyle?.bold) {
// ...
}
});
CropArea
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);
});
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
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) => {
// ...
});
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
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", () => {
// ...
});
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
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", () => {
// ...
});
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 => {
// ...
});
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", () => {
// ...
});
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", () => {
// ...
});
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);
});
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);
});
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", () => {
// ...
});
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);
});
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);
});
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", () => {
// ...
});
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 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 }) => {
// ...
});
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
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);
});
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.');
});
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);
});
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);
});
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
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");
});
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);
});
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);
});
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
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
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);
});
This event is emitted when an out-of-memory page render still fails after one automatic retry. The page can continue displaying current lower-resolution content when available.
The parameter is a Events.PageRenderErrorEvent.
Search
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);
});
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
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");
});
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);
});
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);
});
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
This event will be emitted whenever the live text-editor formatting/selection state for the currently edited text annotation changes.
Example
Mirror external text-toolbar controls from live editor state changes.
instance.addEventListener("textAnnotationEditorState.change", ({ current }) => {
console.log(current?.selectionScope);
});
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);
});
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
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());
});
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"));
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);
});
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);
});
Defines the names of the events that can be emitted by the viewer.