endUpdate Method

Summary

Instruct the viewer that updates are completed and updating the transformations matrices, view layout and rendering of content can be resumed.

Syntax
TypeScript
JavaScript
ImageViewer.prototype.endUpdate = function() 
endUpdate(): void; 
Remarks

For more information, refer to BeginUpdate and Image Viewer Rendering.

Example
Items.ts
ImageViewer.ts
Items.js
ImageViewer.js
Items.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ItemsExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Clear all the images already the viewer 
      viewer.items.clear(); 
 
      // Use vertical view layout to show multiple items 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      viewer.imageBorderThickness = 1; 
 
      // Add 4 items to the viewer 
      for (let page = 1; page <= 4; page++) { 
         const item: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
         const imageUrl: string = "https://demo.leadtools.com/images/png/ocr" + page.toString() + ".png"; 
         item.text = "Page " + page; 
         item.url = imageUrl; 
         viewer.items.add(item); 
      } 
 
      let panZoom: lt.Controls.ImageViewerPanZoomInteractiveMode = viewer.interactiveModes.findById(lt.Controls.ImageViewerInteractiveMode.panZoomModeId) as lt.Controls.ImageViewerPanZoomInteractiveMode; 
      panZoom.minimumScaleFactor = 0.01; 
      viewer.zoom(lt.Controls.ControlSizeMode.fitHeight, .25, viewer.defaultZoomOrigin); 
 
      // Show the count 
      alert("The count should be 4: " + viewer.items.count); 
 
      // Not required, just used for the example 
      setTimeout(() => { 
 
         // Remove the item at index 1 (page 2) 
         viewer.items.removeAt(1); 
         alert("After removing an item, the count should be 3: " + viewer.items.count); 
 
         // Not required, just used for the example 
         setTimeout(() => { 
 
            // Loop through each item and show the text. Since we removed page 2, it must say 1, 3, 4 
            let lines: string[] = []; 
            for (let i = 0; i < viewer.items.count; i++) { 
               const item: lt.Controls.ImageViewerItem = viewer.items.item(i); 
               lines.push("Item " + i + " has text '" + item.text + "'"); 
            } 
            alert(lines.join("\r\n")); 
 
         }, 1000); 
      }, 1000); 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ItemsExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Clear all the images already the viewer 
      viewer.items.clear(); 
 
      // Use vertical view layout to show multiple items 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      viewer.imageBorderThickness = 1; 
 
      // Add 4 items to the viewer 
      for (let page = 1; page <= 4; page++) { 
         const item = new lt.Controls.ImageViewerItem(); 
         const imageUrl = "https://demo.leadtools.com/images/png/ocr" + page.toString() + ".png"; 
         item.text = "Page " + page; 
         item.url = imageUrl; 
         viewer.items.add(item); 
      } 
 
      let panZoom = viewer.interactiveModes.findById(lt.Controls.ImageViewerInteractiveMode.panZoomModeId); 
      panZoom.minimumScaleFactor = 0.01; 
      viewer.zoom(lt.Controls.ControlSizeMode.fitHeight, .25, viewer.defaultZoomOrigin); 
 
      // Show the count 
      alert("The count should be 4: " + viewer.items.count); 
 
      // Not required, just used for the example 
      setTimeout(() => { 
 
         // Remove the item at index 1 (page 2) 
         viewer.items.removeAt(1); 
         alert("After removing an item, the count should be 3: " + viewer.items.count); 
 
         // Not required, just used for the example 
         setTimeout(() => { 
 
            // Loop through each item and show the text. Since we removed page 2, it must say 1, 3, 4 
            let lines = []; 
            for (let i = 0; i < viewer.items.count; i++) { 
               const item = viewer.items.item(i); 
               lines.push("Item " + i + " has text '" + item.text + "'"); 
            } 
            alert(lines.join("\r\n")); 
 
         }, 1000); 
      }, 1000); 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>Controls Example | Items</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> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewer.Items(); 
 
   }; 
</script> 
</html> 
Requirements

Target Platforms

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

Leadtools.Controls Assembly

Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.