DocumentViewerAnnotations Object

Summary

Manages the annotations support in this document viewer.

Syntax

JavaScript Syntax

function lt.Documents.UI.DocumentViewerAnnotations 
	implements IDisposable

TypeScript Syntax

class lt.Documents.UI.DocumentViewerAnnotations() 
	implements IDisposable

Remarks

DocumentViewerAnnotations can be accessed by the DocumentViewer.Annotations property.

This class manages the automation support of the annotation containers in the Document set in the document viewer. The annotations are obtained from the document using GetAnnotations.

When the Document Viewer is created

If the value of DocumentViewerCreateOptions.UseAnnotations is false, then annotations support is not required by the application. DocumentViewerAnnotations is not created and the value of DocumentViewer.Annotations is null and should not be used.

Otherwise, the following occurs:

An internal class that implements IAnnAutomationControl is created with to handle the interaction between the annotations automation and the image viewer including updating the transformation matrices and rendering of the annotation container of each page on the viewer items. This automation control can be retrieved with the AutomationControl property.
AnnotationsInteractiveMode is created. This is a custom interactive mode to handle the mouse/touch events used for drawing and editing annotations objects. This interactive mode is added to the ImageViewer of the view interactive modes list and can be retrieved using the InteractiveMode property.
AnnAutomationManager is created and can be retrieved using the AutomationManager property.

When the Document Viewer is destroyed

The AnnAutomationManager and IAnnAutomationControl objects are destroyed
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. The following is performed if a previous document was set in the document viewer:

The background thread is aborted and destroyed if still loading.
The Operation event is fired with DocumentViewerOperation.DestroyOperation and IsPostOperation set to false to allow the application to remove any events from the automation object and release the resources. This is described in more details in the Application Interaction section below.
When the background thread finishes, an AnnAutomation object is created and various required events are subscribed to. This object is then passed as Data1 to an Operation event with DocumentViewerOperation.CreateAutomation. The application must subscribe to this event to load the annotations resources and create any related user interface elements as well as subscribe to any of AnnAutomation events required.
If the application did not abort the operation, then the annotation containers are added to the AnnAutomation.Containers list with the values of DocumentPage size and resolution being used to set the annotation container size and mapper properties. The AnnContainer.PageNumber property each container is also updated with the corresponding page number.
The AnnAutomation.Active property is set to true and annotations automation is ready to be used.

Application Interaction

The application can handle the Operation event with CreateAutomation and DestoryAutomation to perform extra operations not handled by the document viewer. For example, the LEADTOOLS Document Viewer Demo subscribes to the event and performs the following: When the application starts, all the user interface elements related to annotations support are disabled. This stay disabled when a new document is set in the DocumentViewer. The application must wait for the annotations containers to be obtained before they can be used. When a new document is set in the viewer, the application can respond to the Operation event with Operation set to DocumentViewerOperation.CreateAutomation and IsPostOperation set to true. This event occurs after the background thread has finished loading all the containers and AnnAutomation object is created. This object will be set in the Data1 property of the event data. The Document Viewer demo subscribes to some of the object events to handle extra functionality not provided by the document viewer, such as setting the cursors to be used or showing custom annotation object properties dialog. And then enable the annotations specified user interface elements. When the current document is removed from the viewer, the application can respond to the Operation event with Operation set to DocumentViewerOperation.DestroyAutomation and IsPostOperation set to false. This event occurs before the AnnAutomation is destroyed. The Document Viewer demo unsubscribes from the events previously used and disable the annotations specific user interface elements.

Operations and Commands

DocumentViewerAnnotations automatically handles many of the annotations automation operations, these include:

Automatically update the Author, Created and Modified metadata of the the annotation objects when they modified by the user using the DocumentViewer.UserName property and the current date and time.
Replaces the AnnDrawDesigner of AnnTextReviewObject derived types with a custom object that can handle text selection.
Renders the annotations containers on the view and thumbnails image viewer controls.

All the operations are reported using the Operation event. Refer to Document Viewer Commands and DocumentViewer-Operations for more information on the above and how to set and customize the behavior.

Example

This example will show to create a functional DocumentViewer with annotations support in your application.

JavaScript Example

/// <!--DocumentViewer--> 
<!DOCTYPE html> 
<html> 
<head> 
   <title>LEADTOOLS Document Viewer Example</title> 
   <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 
   <meta name="apple-mobile-web-app-capable" content="yes" /> 
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
   <style> 
      /* Simple style. Real world application would use a responsive framework such as bootstrap */ 
      #left-panel { 
         float: left; 
         width: 200px; 
         height: 800px; 
         background-color: gray; 
      } 
 
      #middle-panel { 
         float: left; 
         width: 860px; 
         height: 800px; 
         background-color: darkgray; 
      } 
 
      #right-panel { 
         float: left; 
         width: 200px; 
         height: 800px; 
         background-color: gray; 
      } 
   </style> 
   <!-- jQuery Core --> 
   <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
   <!-- LEADTOOLS Libraries --> 
   <script type="text/javascript" src="libs/Leadtools.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Controls.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Annotations.Core.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Annotations.Designers.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Annotations.Automation.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Annotations.JavaScript.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Documents.js"></script> 
   <script type="text/javascript" src="libs/Leadtools.Documents.UI.js"></script> 
   <script type="text/javascript"> 
      (function () { 
         App = function App() { 
            // Our document viewer instance 
            this._documentViewer = null; 
         }; 
 
         App.prototype.example = function () { 
            // TODO: add example code here 
            alert("example code goes here"); 
         }; 
 
         App.prototype.run = function () { 
 
            var _this = this; 
 
            // Initialize the user interface 
            // The command names for the items so we can just run them 
            var modes = [lt.Documents.UI.DocumentViewerCommands.interactivePanZoom, lt.Documents.UI.DocumentViewerCommands.interactiveSelectText]; 
            modes.forEach(function (mode) { 
               $("#interactiveSelect") 
                  .append($("<option>", mode).text(mode)); 
            }); 
 
            $("#interactiveSelect").on("change", function (e) { 
               var commandName = $(this).find("option:selected").val(); 
               _this._documentViewer.commands.run(commandName); 
            }); 
 
            $("#exampleButton").on("click", function () { 
               _this.example(); 
            }); 
 
            // The id's for the annotations objects so we can draw them 
            $("#annotationsSelect") 
               .append($("<option>", { value: lt.Annotations.Core.AnnObject.selectObjectId }) 
                  .text("Select")); 
 
            $("#annotationsSelect") 
               .append($("<option>", { value: lt.Annotations.Core.AnnObject.lineObjectId }) 
                  .text("Line")); 
 
            $("#annotationsSelect") 
               .append($("<option>", { value: lt.Annotations.Core.AnnObject.rectangleObjectId }) 
                  .text("Rectangle")); 
 
            $("#annotationsSelect").on("change", function (e) { 
               var objectid = parseInt($(this).find("option:selected").val()); 
               _this._documentViewer.annotations.automationManager.currentObjectId = objectid; 
            }); 
 
            // Init the document viewer, pass along the panels 
            var createOptions = new lt.Documents.UI.DocumentViewerCreateOptions(); 
            // We are not going to use elements mode in this example 
            createOptions.viewCreateOptions.useElements = false; 
            createOptions.thumbnailsCreateOptions.useElements = false; 
 
            // The middle panel for the view 
            createOptions.viewContainer = document.getElementById("middle-panel"); 
            // The left panel for the thumbnails 
            createOptions.thumbnailsContainer = document.getElementById("left-panel"); 
            // The right panel is for bookmarks 
            createOptions.bookmarksContainer = document.getElementById("right-panel"); 
            // Not using annotations for now 
            createOptions.useAnnotations = true; 
 
            // Create the document viewer 
            this._documentViewer = lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(createOptions); 
 
            // We prefer SVG viewing 
            this._documentViewer.view.preferredItemType = lt.Documents.UI.DocumentViewerItemType.svg; 
 
            // Create html5 rendering engine 
            this._documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
            // Initialize documentViewer annotations 
            this._documentViewer.annotations.initialize(); 
            // Handle what to do when current object Id changed 
            this._documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
               // When done drawing, the manger will return to the select object; so we need force the annotationsSelect element to return to the select object option 
               $("#annotationsSelect option[value=" + sender.currentObjectId + "]").attr("selected", "selected"); 
            }); 
 
 
            // Load a PDF document 
            var url = "http://demo.leadtools.com/images/pdf/leadtools.pdf"; 
            lt.Documents.DocumentFactory.loadFromUri(url, null) 
               .done(function (document) { 
                  // We have a document 
 
                  _this._documentViewer.operation.add(function (sender, e) { 
                     if (e.operation == lt.Documents.UI.DocumentViewerOperation.loadingBookmarks) { 
                        // Disable the bookmarks when we are loading, enable when we are done 
                        $("#right-panel").prop("disabled", !e.isPostOperation); 
                     } 
                  }); 
 
                  // Set the document in the viewer 
                  _this._documentViewer.setDocument(document); 
 
                  // Run pan/zoom 
                  $("#interactiveSelect").val(lt.Documents.UI.DocumentViewerCommands.interactiveSelectText); 
               }) 
               .fail(function (jqXHR, statusText, errorThrown) { 
                  alert("Error loading document: " + errorThrown) 
               }); 
         }; 
 
         App.prototype.dispose = function () { 
            //alert("Disposing"); 
         }; 
 
         // Our app 
         var app = null; 
 
         $(document).ready(function () { 
            // Create and run our app 
            app = new App(); 
            app.run(); 
         }); 
 
         $(window).unload(function () { 
            // Dispose our app 
            app.dispose(); 
         }); 
      })(); 
   </script> 
</head> 
<body> 
   <div id="top-panel" class="panels"> 
      <label for="interactiveSelect">Interactive mode:</label> 
      <select id="interactiveSelect"></select> 
      <button id="exampleButton">Example</button> 
      <label for="annotationsSelect">Annotations objects:</label> 
      <select id="annotationsSelect"></select> 
   </div> 
 
   <div id="left-panel" class="panels"> 
      <p>left side panel</p> 
   </div> 
 
   <div id="middle-panel" class="panels"> 
      <p>This is a test page of tableless layout using CSS. View Source.</p> 
   </div> 
 
   <div id="right-panel" class="panels"> 
      <p>right side panel</p> 
   </div> 
</body> 
</html> 
/// <!--DocumentViewer-->