itemChanged Event

Summary

Occurs when any of the items inside this ImageViewer changes.

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

Event Data

ParameterTypeDescription
sendervarThe source of the event.
eImageViewerItemChangedEventArgsThe event data.

Remarks

This event occurs when any of the items inside this ImageViewer changes. The ImageViewerItemChangedEventArgs will contain the item that has been changed in ImageViewerItemChangedEventArgs.Item, as well as the reason for the change in ImageViewerItemChangedEventArgs.Reason.

Changing the value of the following properties, or calling the methods programmatically or by the viewer will raise the ItemChanged event with the specified reason:

Property or Method Value of ImageViewerItemChangedEventArgs.Reason
Image
ImageViewerItemChangedReason.Image (and optionally, ImageViewerItemChangedReason.Resolution if Resolution is also set.)
Canvas
ImageViewerItemChangedReason.Image (and optionally, ImageViewerItemChangedReason.Resolution if Resolution is also set.)
Url
ImageViewerItemChangedReason.Image (and optionally, ImageViewerItemChangedReason.Resolution if Resolution is also set.)
ImageSize

ImageViewerItemChangedReason.Image

Size

ImageViewerItemChangedReason.Size

Resolution

ImageViewerItemChangedReason.Resolution

Floater

ImageViewerItemChangedReason.Floater

FloaterTransform

ImageViewerItemChangedReason.FloaterTransform

FloaterOpacity

ImageViewerItemChangedReason.FloaterTransform

Text

ImageViewerItemChangedReason.Text

IsSelected

ImageViewerItemChangedReason.Selected

IsHovered

ImageViewerItemChangedReason.Hovered

IsEnabled

ImageViewerItemChangedReason.Transform

IsVisible

ImageViewerItemChangedReason.Visibility

Transform

ImageViewerItemChangedReason.Transform

Zoom

ImageViewerItemChangedReason.Transform

ResizeOnTransform

ImageViewerItemChangedReason.Transform

ClipImageToContent

ImageViewerItemChangedReason.Transform

ImageHorizontalAlignment

ImageViewerItemChangedReason.Transform

ImageVerticalAlignment

ImageViewerItemChangedReason.Transform

TextHorizontalAlignment

ImageViewerItemChangedReason.Transform

TextHorizontalAlignment

ImageViewerItemChangedReason.Transform

The viewer automatically listens to these events internally and will perform the necessary action. For example, if any property that affects the transformation changes, UpdateTransform will be called. If the property change requires rendering only, then the item will be invalidated.

Example

This example will track the ItemChanged and ItemError event and show information on them. Two items will be added, and after a timeout the first item will successfully change its url and text. The second item will fail to change its URL and show an error.

ItemChanged.ts
ImageViewer.ts
ItemChanged.js
ImageViewer.js
ItemChanged.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ItemChangedExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      viewer.itemBorderThickness = 5; 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
 
      const itemChangeReasons: string[] = ["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: lt.Controls.ImageViewerItem = 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: string[] = [ 
            "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: lt.Controls.ImageViewerItem = e.item; 
 
         const lines: string[] = [ 
            "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: lt.Controls.ImageViewerItem = 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: lt.Controls.ImageViewerItem = 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 
   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/v200/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/v200/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> 

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.Controls Assembly