DocumentViewerView Object

DocumentViewerView can be accessed by the DocumentViewer.View property.

This class manages the main content to view the pages of the current Document set in the document viewer.

The class creates an instance of ImageViewer for viewing the pages. Virtualization is used to load and cache the image data to keep the application user interface responsive, support documents with large number of pages and minimize the resources used. Raster and SVG viewing modes is supported.

The class also handles the user interactions with the pages, such pan, zoom and magnify interactive modes, inertia scrolling, page layouts and fit modes and rendering the annotation containers.

When the Document Viewer is created

1. A new instance of DocumentViewerView is created and set in the LTDocumentViewer.View property.

2. A new instance of the ImageViewer control is created and is added as a child control to DocumentViewerCreateOptions.ViewContainer. This image viewer will be used to view the Raster or SVG image data of the pages when an Document is set in the viewer. This control can be accessed by using ImageViewer property of this class. Refer to the property for information on how this ImageViewer is initialized.

3. The interactive modes are initialized and added to ImageViewer.InteractiveModes.

When the Document Viewer is destroyed

1. The ImageViewer control is removed from the parent DocumentViewerCreateOptions.ThumbnailsContainer container.

2. All resources are freed

When a new Document is set

The following occurs when a new Document object is set in the DocumentViewer using DocumentViewer.SetDocument.

If a previous document was set in the document viewer:

• The virtualizer is stopped and destroyed.

• The items for the previous document are removed from ImageViewer by calling ImageViewer.Items.Clear.

If the new document set is null (the application just closed this document) then no further action is required.

If a new document object is set, then the following is performed:

• PreferredItemType is checked, and if SVG viewing is requested then DocumentImages.IsSvgViewingPreferred is check and ItemType is updated accordingly.

• An ImageViewerItem is created for each page in the document. The value of ImageViewerItem.ImageSize is set to value of DocumentPage.Size of each page. The item is "empty" and does not contain image data. This is updated in the next step.

• An internal worker is used to handler loading and caching the image data of the pages in the background to keep the user interface of the application responsive. This worker is also used to minimize the resources used when loading a document with large image data and large number of pages by prioritizing loading the data for visible pages and discarding the data for pages that are no longer used.

• The Operation event occurs while the virtualizer is loading and discarding image data and when rendering the place holder for pages that do not have their data loaded yet. Refer to Document Viewer Operations for more information on the specific details and how to customize the behavior.

Commands

DocumentViewerView handles the following:

• All the interactive modes are added to the ImageViewer created by this part. This includes pan, zoom, and magnify glass as well as the page links, annotations and text selection modes.

• Multiple ImageViewerViewLayout such as single, vertical, double and horizontal are created and can be used by the view.

• Rendering of the image data of the pages as well as the current text selection and annotation containers

Refer to Document Viewer Commands and Document Viewer Operations for more information on the above and how to set and customize the behavior.

Start with the example created in DocumentViewer, remove all the code in the Example function and add the code below.

After the user clicks the Example button, we will draw a label for the page number at the bottom of each page.

var _this = this;
$("#exampleButton").prop("disabled", true);

// Get the view
var view = this._documentViewer.view;
// Get its image viewer
var imageViewer = view.imageViewer;
// Hook to the PostRender
imageViewer.postRenderItem.add(function(sender, e) {
   // Get the image viewer item for the page
   var item = e.item;

   // Get the current rectangle for the image
   var bounds = imageViewer.getItemViewBounds(item, lt.Controls.imageViewerItemPart.image, false);

   // Build the text we want. The page number is the item index + 1
   var pageNumber = imageViewer.items.indexOf(item) + 1;
   var text = "Page " + pageNumber;

   // Get the image transformation for this item
   var transform = imageViewer.getItemImageTransform(e.item);

   // Apply it to the context
   e.context.save();
   e.context.transform(transform.m11, transform.m12, transform.m21, transform.m22, transform.offsetX, transform.offsetY);

   // Render the text
   e.context.fillStyle = "black";
   e.context.fillText(text, 10, 10);
   e.context.restore();
});

// Invalidate so our changes take effect the first time
view.invalidate();