Interacting with Viewer events

WebViewer triggers numerous events in response to user interactions or processes. They might be helpful in adding additional behavior to how users use WebViewer or performing updates to annotations as users scroll to another page.

Other than the lifecycle events mentioned in the loading guide , you may also be interested when a user changes pages. The pageNumberUpdated event can be triggered by scrolling through the document or jumping to a certain page.

Subscribe to this event via DocumentViewer .

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('pageNumberUpdated', pageNumber => {
      const annotsOnPage = annotationManager.getAnnotationList().filter(annot => annot.PageNumber === pageNumber);

      // Do something with annotations e.g. Focus on certain form fields
    });
  });

When users are viewing the document, they may change zoom levels or how pages are viewed (in ways that don't permanently affect the document). These will also trigger events that you could listen to.

• zoomUpdated
• rotationUpdated
• layoutChanged
• fitModeUpdated
• displayModeUpdated

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, Tools } = instance.Core;

    documentViewer.addEventListener('zoomUpdated', zoom => {
      if (zoom > 3) {
        // Change tools when zoom level is above 300%
        documentViewer.setToolMode(documentViewer.getToolMode(Tools.ToolNames.RECTANGLE));
      }
    });
  });

When searches are conducted with the DocumentViewer, whether this is done through the UI or directly through an API, you can get the results by listening to these events:

• searchResultsChanged
• activeSearchResultChanged
• searchInProgress

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, Tools } = instance.Core;

    const prevSearchResults = []; // Rendered in a custom panel

    documentViewer.addEventListener('searchResultsChanged', results => {
      prevSearchResults.push(results);
    });
  });

These input events are fired when the mouse and keyboard are interacting with the document viewer.

• keyDown
• keyUp
• mouseEnter
• mouseLeave
• mouseLeftDown
• mouseLeftUp
• mouseMove
• mouseRightDown
• mouseRightUp

Here is an example of an onHover for annotations using the mouseMove event.

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('mouseMove', evt => {
      const annot = annotationManager.getAnnotationByMouseEvent(evt);
      if (annot) {
        console.log("onHover: " + annot.Id);
      }
    });
  });