data Property

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_ItemChangedExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      viewer.itemBorderThickness = 5; 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
 
      const itemChangeReasons = ["size", "transform", "enabled", "selected", "hovered", 
         "text", "url", "drop", "drag", "image", "imageChanged", "floater", 
         "floaterTransform", "backImageUrl", "backImage"]; 
 
      // Clear the items and add new items 
      viewer.beginUpdate(); 
      viewer.items.clear(); 
      for (let i = 0; i < 2; i++) { 
         const item = new lt.Controls.ImageViewerItem(); 
         item.url = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
         item.text = "Item " + i; 
         viewer.items.add(item); 
      } 
      viewer.endUpdate(); 
 
      const output = document.getElementById("output"); 
 
      viewer.itemChanged.add((sender, e) => { 
         let item = e.item; 
 
         const lines = [ 
            "Item Changed: " + viewer.items.indexOf(item), 
            "Reason: " + itemChangeReasons[e.reason], 
            "Item Text: " + item.text, 
            "Url: " + item.url, 
         ]; 
         output.innerHTML = lines.map((line) => { return "<p>" + line + "</p>" }).join("") + "<hr />" + output.innerHTML; 
      }); 
 
      viewer.itemError.add((sender, e) => { 
         const item = e.item; 
 
         const lines = [ 
            "Item Errored: " + viewer.items.indexOf(item), 
            "Reason: " + itemChangeReasons[e.reason], 
            "Url: " + item.url, 
         ]; 
         output.innerHTML = lines.map((line) => { return "<p style='color: red;'>" + line + "</p>" }).join("") + "<hr />" + output.innerHTML; 
      }); 
 
      // After a second, change 
      setTimeout(() => { 
         // Set a new valid URL and change the text (two different changes) 
         const item0 = viewer.items.item(0); 
         item0.url = "https://demo.leadtools.com/images/png/pngimage.png"; 
         item0.text = "Item 0 Text Changed"; 
 
         // Set an invalid URL 
         const item1 = viewer.items.item(1); 
         item1.url = "https://demo.leadtools.com/thisisnotavalidimage.png"; 
      }, 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 | ItemChanged</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.ItemChanged(); 
 
   }; 
</script> 
</html>