Error processing SSI file
LEADTOOLS Leadtools.Documents.UI (Leadtools.Documents.UI assembly)

DocumentViewerAnnotations Object

Show in webframe
Example 
Members 
Leadtools.Documents.UI Namespace : DocumentViewerAnnotations Object
Manages the annotations support in this document viewer.
Object Model
Syntax
function Leadtools.Documents.UI.DocumentViewerAnnotations()
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:

  1. 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.

  2. 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.

  3. AnnAutomationManager is created and can be retrieved using the AutomationManager property.

When the Document Viewer is destroyed

  1. The AnnAutomationManager and IAnnAutomationControl objects are destroyed

  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.

The following is performed if a previous document was set in the document viewer:

  1. The background thread is aborted and destroyed if still loading.

  2. 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.

  3. 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.

  4. 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.

  5. 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:

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.

/// <!--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-->
See Also

Reference

DocumentViewerAnnotations Members
Leadtools.Documents.UI Namespace
Using LEADTOOLS Document Viewer

Error processing SSI file
  Leadtools.Documents.UI requires a Document or Medical toolkit license and unlock key. For more information, refer to: Imaging Pro/Document/Medical Features