operation Event

Summary

Occurs when an operation is invoked inside this document viewer.

Syntax
TypeScript
JavaScript
Object.defineProperty(DocumentViewer.prototype,'operation', 
	get: function(), 
	set: function(value) 
) 
operation: LeadEvent; 

Event Data
ParameterTypeDescription
sendervarThe source of the event.
eDocumentViewerOperationEventArgsThe event data.

Remarks

The Operation event occurs anytime the document viewer is performing an operation (for example, when rendering the place holder of a page on the View, or when a new annotation object is added, etc.).

Each Operation event fires twice. The first time the value of DocumentViewerOperationEventArgs.IsPostOperation is set to false to indicate that the operation is about to happen. The second time DocumentViewerOperationEventArgs.IsPostOperation is set to true to indicate that the operation is completed.

The operation type is stored in Operation. When IsPostOperation is false, some operations allow the user to change the behavior or abort the operation.

Refer to Document Viewer Operations for a detailed list of all document viewer operations.

Example

In this example, clicking the example button will add an intercept callback that will prevent clicked links from being run.

Operation.ts
ViewerInitializer.ts
Operation.js
ViewerInitializer.js
Operation.html
examples.css
import { ViewerInitializer } from "../utilities/ViewerInitializer"; 
 
export class OperationTSExample { 
   public run = () => { 
      new ViewerInitializer(this.addOperationEvent); 
   } 
 
   addOperationEvent = (documentViewer: lt.Document.Viewer.DocumentViewer) => { 
      // Add a callback for when the user clicks a link (bookmark on the page, for example) 
      documentViewer.operation.add((sender: any, e: lt.Document.Viewer.DocumentViewerOperationEventArgs) => { 
         // When the user clicks a link and we're going to start running the link... 
         if (e.operation == lt.Document.Viewer.DocumentViewerOperation.runLink && !e.isPostOperation) { 
            const link = e.data1; 
            if (link) { 
               // Cancel the operation 
               e.abort = true; 
 
               // Show a message 
               let message = "Link will be ignored!"; 
               if (link.bounds) { 
                  message += "\nbounds: " + link.bounds.x + ", " + link.bounds.y + ", " + link.bounds.width + ", " + link.bounds.bottom; 
               } 
               if (link.target && link.target.pageNumber) { 
                  message += "\ntarget page: " + link.target.pageNumber; 
               } 
               alert(message); 
            } 
         } 
      }); 
   } 
} 
export class ViewerInitializer { 
   private callback: (viewer: lt.Document.Viewer.DocumentViewer) => void = null; 
 
   constructor(callback?: (viewer: lt.Document.Viewer.DocumentViewer) => void) { 
      this.callback = callback; 
      this.init(); 
   } 
 
   public static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert('Error returned from service. See the console for details.') 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   private init = () => { 
      this.initFactory(); 
      this.testConnection(); 
   } 
 
   private initFactory = () => { 
      lt.RasterSupport.setLicenseUri('https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt', 'EVAL', null); 
 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = 'http://localhost:40000'; 
      lt.Document.DocumentFactory.servicePath = ''; 
      lt.Document.DocumentFactory.serviceApiPath = 'api'; 
   } 
 
   private testConnection = () => { 
      const serviceStatus = document.getElementById('serviceStatus'); 
      serviceStatus.innerHTML = 'Connecting to service: ' + lt.Document.DocumentFactory.serviceUri; 
 
      lt.Document.DocumentFactory.verifyService() 
         .done((serviceData) => { 
            serviceStatus.innerHTML = 'Service connection verified!'; 
            this.createDocumentViewer(); 
         }) 
         .fail((jqXHR, statusText, errorThrown) => { 
            serviceStatus.innerHTML = 'Service connection unavailable.'; 
            ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown); 
         }); 
   } 
 
   private createDocumentViewer = () => { 
      // Initialize the user interface 
      const interactiveSelect = document.getElementById('interactiveSelect'); 
 
      const panZoomOption = document.createElement('option'); 
      panZoomOption.innerHTML = 'Pan / Zoom'; 
      panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
      interactiveSelect.appendChild(panZoomOption); 
 
      const textOption = document.createElement('option'); 
      textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
      textOption.innerHTML = 'Select Text'; 
      interactiveSelect.appendChild(textOption); 
 
      let documentViewer: lt.Document.Viewer.DocumentViewer = null; 
      interactiveSelect.onchange = (e) => documentViewer.commands.run((e.target as HTMLSelectElement).value, null); 
 
      const annotationsSelect = document.getElementById('annotationsSelect'); 
 
      const annSelectOption = document.createElement('option'); 
      annSelectOption.innerHTML = 'Select Annotation'; 
      annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString(); 
      annotationsSelect.appendChild(annSelectOption); 
 
      const annLineOption = document.createElement('option'); 
      annLineOption.innerHTML = 'Line Object'; 
      annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString(); 
      annotationsSelect.appendChild(annLineOption); 
 
      const annRectOption = document.createElement('option'); 
      annRectOption.innerHTML = 'Rectangle Object'; 
      annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString(); 
      annotationsSelect.appendChild(annRectOption); 
      annotationsSelect.onchange = (e) => { 
         const value = +(e.currentTarget as HTMLSelectElement).value; 
         documentViewer.annotations.automationManager.currentObjectId = value; 
      } 
 
      // Init the document viewer, pass along the panels 
      const createOptions = new lt.Document.Viewer.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('viewer'); 
      // The left panel for the thumbnails 
      createOptions.thumbnailsContainer = document.getElementById('thumbnails'); 
      // The right panel is for bookmarks 
      createOptions.bookmarksContainer = document.getElementById('bookmarks'); 
      createOptions.useAnnotations = true; 
 
      // Create the document viewer 
      documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
 
      // We prefer SVG viewing 
      documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
 
      // Create html5 rendering engine 
      documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      // Initialize documentViewer annotations 
      documentViewer.annotations.initialize(); 
 
      documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
         // When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option 
         (annotationsSelect as HTMLSelectElement).value = sender.currentObjectId; 
      }); 
 
      this.loadDefaultDoc(documentViewer, interactiveSelect as HTMLSelectElement) 
   } 
 
   private loadDefaultDoc = (viewer: lt.Document.Viewer.DocumentViewer, interactiveSelect: HTMLSelectElement) => { 
      // Load a PDF document 
      const url = 'https://demo.leadtools.com/images/pdf/leadtools.pdf'; 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc: lt.Document.LEADDocument) => { 
            const ready = () => { 
               viewer.setDocument(doc); 
               const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
               interactiveSelect.value = panZoom; 
               viewer.commands.run(panZoom, null); 
               if(this.callback) 
                  this.callback(viewer); 
            } 
 
            if (doc.isStructureSupported && !doc.structure.isParsed) 
               doc.structure.parse() 
                  .done(ready) 
                  .fail(ViewerInitializer.showServiceError); 
            else 
               ready(); 
         }) 
         .fail(ViewerInitializer.showServiceError); 
   } 
} 
import { ViewerInitializer } from "../utilities/ViewerInitializer"; 
 
export class OperationJSExample { 
   run = () => { 
      new ViewerInitializer(this.addOperationEvent); 
   } 
 
   addOperationEvent = (documentViewer) => { 
      // Add a callback for when the user clicks a link (bookmark on the page, for example) 
      documentViewer.operation.add((sender, e) => { 
         // When the user clicks a link and we're going to start running the link... 
         if (e.operation == lt.Document.Viewer.DocumentViewerOperation.runLink && !e.isPostOperation) { 
            const link = e.data1; 
            if (link) { 
               // Cancel the operation 
               e.abort = true; 
 
               // Show a message 
               let message = "Link will be ignored!"; 
               if (link.bounds) { 
                  message += "\nbounds: " + link.bounds.x + ", " + link.bounds.y + ", " + link.bounds.width + ", " + link.bounds.bottom; 
               } 
               if (link.target && link.target.pageNumber) { 
                  message += "\ntarget page: " + link.target.pageNumber; 
               } 
               alert(message); 
            } 
         } 
      }); 
   } 
} 
export class ViewerInitializer { 
   constructor(callback) { 
      this.callback = callback; 
      this.init(); 
   } 
 
   static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details.") 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
   } 
 
   init = () => { 
      this.initFactory(); 
      this.testConnection(); 
   } 
 
   initFactory = () => { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // To communicate with the DocumentsService, it must be running! 
      // Change these parameters to match the path to the service. 
      lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
      lt.Document.DocumentFactory.servicePath = ""; 
      lt.Document.DocumentFactory.serviceApiPath = "api"; 
   } 
 
   testConnection = () => { 
      const serviceStatus = document.getElementById("serviceStatus"); 
      serviceStatus.innerHTML = "Connecting to service: " + lt.Document.DocumentFactory.serviceUri; 
 
      lt.Document.DocumentFactory.verifyService() 
         .done((serviceData) => { 
            serviceStatus.innerHTML = "Service connection verified!"; 
            this.createDocumentViewer(); 
         }) 
         .fail((jqXHR, statusText, errorThrown) => { 
            serviceStatus.innerHTML = "Service connection unavailable."; 
            ViewerInitializer.showServiceError(jqXHR, statusText, errorThrown); 
         }); 
   } 
 
   createDocumentViewer = () => { 
      // Initialize the user interface 
      const interactiveSelect = document.getElementById("interactiveSelect"); 
 
      const panZoomOption = document.createElement("option"); 
      panZoomOption.innerHTML = "Pan / Zoom"; 
      panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
      interactiveSelect.appendChild(panZoomOption); 
 
      const textOption = document.createElement("option"); 
      textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
      textOption.innerHTML = "Select Text"; 
      interactiveSelect.appendChild(textOption); 
 
      let documentViewer = null; 
      interactiveSelect.onchange = (e) => documentViewer.commands.run(e.target.value, null); 
 
      const annotationsSelect = document.getElementById("annotationsSelect"); 
 
      const annSelectOption = document.createElement("option"); 
      annSelectOption.innerHTML = "Select Annotation"; 
      annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString(); 
      annotationsSelect.appendChild(annSelectOption); 
 
      const annLineOption = document.createElement("option"); 
      annLineOption.innerHTML = "Line Object"; 
      annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString(); 
      annotationsSelect.appendChild(annLineOption); 
 
      const annRectOption = document.createElement("option"); 
      annRectOption.innerHTML = "Rectangle Object"; 
      annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString(); 
      annotationsSelect.appendChild(annRectOption); 
      annotationsSelect.onchange = (e) => { 
         const value = +e.currentTarget.value; 
         documentViewer.annotations.automationManager.currentObjectId = value; 
      } 
 
      // Init the document viewer, pass along the panels 
      const createOptions = new lt.Document.Viewer.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("viewer"); 
      // The left panel for the thumbnails 
      createOptions.thumbnailsContainer = document.getElementById("thumbnails"); 
      // The right panel is for bookmarks 
      createOptions.bookmarksContainer = document.getElementById("bookmarks"); 
      createOptions.useAnnotations = true; 
 
      // Create the document viewer 
      documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
 
      // We prefer SVG viewing 
      documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
 
      // Create html5 rendering engine 
      documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      // Initialize documentViewer annotations 
      documentViewer.annotations.initialize(); 
 
      documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
         // When done drawing, the manager will return to the select object; so we need force the annotationsSelect element to return to the select object option 
         annotationsSelect.value = sender.currentObjectId; 
      }); 
 
      this.loadDefaultDoc(documentViewer, interactiveSelect) 
   } 
 
   loadDefaultDoc = (viewer, interactiveSelect) => { 
      // Load a PDF document 
      const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
      lt.Document.DocumentFactory.loadFromUri(url, null) 
         .done((doc) => { 
            const ready = () => { 
               viewer.setDocument(doc); 
               const panZoom = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
               interactiveSelect.value = panZoom; 
               viewer.commands.run(panZoom, null); 
               if(this.callback) 
                  this.callback(viewer); 
            } 
 
            if (doc.isStructureSupported && !doc.structure.isParsed) 
               doc.structure.parse() 
                  .done(ready) 
                  .fail(ViewerInitializer.showServiceError); 
            else 
               ready(); 
         }) 
         .fail(ViewerInitializer.showServiceError); 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>DocViewer Example | DocumentViewer</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../LT/Leadtools.js"></script> 
   <script src="../LT/Leadtools.Controls.js"></script> 
   <script src="../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../LT/Leadtools.Document.js"></script> 
   <script src="../LT/Leadtools.Document.Viewer.js"></script> 
   <link rel="stylesheet" type="text/css" href="../css/examples.css"> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../bundle.js" type="text/javascript"></script> 
</head> 
 
 
<body> 
   <div class="container"> 
      <div class="toolbar"> 
         <div class="vcenter push-right"> 
            <button type="button" id="exampleButton">Run Example</button> 
         </div> 
         <div class="vcenter push-right"> 
            <label for="interactiveSelect">Interactive mode:</label> 
            <select id="interactiveSelect"></select> 
         </div> 
         <div class="vcenter push-right"> 
            <label for="annotationsSelect">Annotations objects:</label> 
            <select id="annotationsSelect"></select> 
         </div> 
         <div id="output" class="vcenter push-right"></div> 
         <div id="serviceStatus" class="vcenter push-right"></div> 
      </div> 
      <div class="docContainer"> 
         <div class="sidepanel" id="thumbnails"></div> 
         <div class="centerpanel" id="viewer"></div> 
         <div class="sidepanel" id="bookmarks"></div> 
      </div> 
   </div> 
</body> 
<script> 
   window.onload = () => { 
      const button = document.getElementById('exampleButton'); 
      button.onclick = () => { 
         const example = new window.examples.OperationExample(); 
         example.run(); 
      } 
   }; 
</script> 
 
</html> 
 /* 
   Remove default body styling. 
   Set the body to flex as a column; 
*/ 
body { 
   margin: 0; 
   display: flex; 
   flex-direction: column; 
} 
 
.container { 
   margin: 10px; 
   width: calc(100% - 20px); 
   height: calc(100vh - 20px); 
} 
 
.toolbar { 
   height: 5%; 
   width: 100%; 
   border-bottom: 2px solid #333; 
   flex-direction: row; 
   display: flex; 
} 
#bookmarks{ 
   overflow: hidden; 
} 
 
.vcenter { 
   margin-top: auto; 
   margin-bottom: auto; 
} 
 
.hcenter{ 
   margin-left: auto; 
   margin-right: auto; 
} 
 
.push-right{ 
   margin-left: 10px; 
} 
 
.docContainer{ 
   height: 95%; 
   width: 100%; 
   display: flex; 
   flex-direction: row; 
} 
 
.sidepanel{ 
   width: 15%; 
   height: 100%; 
} 
 
.centerpanel{ 
   width:100%; 
   height:100%; 
} 
 
 /* Styles for Elements Mode. */ 
 .lt-item, .lt-image-border { 
   /* Box Shadow (view, item, image border) */ 
   box-shadow: #333 2px 2px 5px 1px; 
 } 
 .lt-view,.lt-thumb-item { 
   /* View */ 
   margin: 5px; 
   padding: 5px; 
 } 
 .lt-item { 
   /* Item */ 
   border: 2px solid #6ecaab; 
   background-color: #b2decf; 
   padding: 10px; 
 } 
 .lt-image-border { 
   /* Image Border */ 
   border: 3px solid #444; 
   background-color: white; 
 } 
 .lt-thumb-item { 
   /* Thumbnail Item */ 
   border: 2px solid #6ecaab; 
   background-color: #b2decf; 
 } 
 .lt-thumb-item.lt-thumb-item-selected { 
   /* Selected Thumbnail Item */ 
   border: 2px solid #59b2ba; 
   background-color: #8ce1e1; 
 } 
 .lt-thumb-item-hovered { 
   /* Hovered Thumbnail Item */ 
   border: 2px solid #52b996; 
   background-color: #87c7b1; 
 } 
 .small-modal { 
   max-width: 200px; 
   width: 200px; 
 } 

Requirements

Target Platforms

Help Version 20.0.2020.4.3
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Document.Viewer Assembly