ImageViewerActiveItemInteractiveMode Object

Summary

Allows you to change the current active item in the viewer by using a keyboard, mouse, touch screen, or multi-touch device.

Syntax
TypeScript
JavaScript
function lt.Controls.ImageViewerActiveItemInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode 
class lt.Controls.ImageViewerActiveItemInteractiveMode() 
	extends ImageViewerInteractiveMode 
Remarks

The ImageViewerActiveItemInteractiveMode object derives from the ImageViewerInteractiveMode object and subscribes to the following events of the InteractiveService object:

The ImageViewerActiveItemInteractiveMode object changes the current ActiveItem under the following conditions:

  • If the user clicks an item, it will become the new ActiveItem.

  • If the IsKeyboardEnabled property is set to true, then moving using the navigation keys (the arrow keys, page up/down keys, home key and end key) will also set the ActiveItem. This works as a "grid" using the current ViewLayout. For example, pressing the down arrow key makes the item below the current active item (if any) the new active item. Pressing the left arrow key makes the item to the left of the current item the new active item, and so forth.

  • If the IsHoverEnabled property is set to true, then moving the mouse over an item will change its IsHovered property to true, whereas moving the mouse away from the item sets it back to false. Items can have different styles when the mouse is hovering over it. For more information, refer to Image Viewer Appearance.

When a new active item is set, the InteractiveEventArgs.IsHandled property is set to true.

For more information, refer to Image Viewer Interactive Modes.

Example

This example will add the ActiveItemInteractiveMode to the viewer and use it to change the active item.

ActiveItemInteractiveMode.ts
ImageViewer.ts
ActiveItemInteractiveMode.js
ImageViewer.js
ActiveItemInteractiveMode.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ActiveItemInteractiveModeExample { 
   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 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      // Make sure the item size is larger than the image size (thumbnails mode) 
      viewer.itemBorderThickness = 3; 
      viewer.itemMargin = lt.Controls.ControlPadding.createAll(5); 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
      // Change the active item background color 
      viewer.activeItemBorderColor = "forestgreen"; 
 
      // Add 4 items to the viewer 
      for (let index = 0; index < 4; index++) { 
         const item: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
         item.text = "Item " + index; 
         item.url = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
         viewer.items.add(item); 
      } 
 
      // Insert the Active Item mode before the current PanZoom mode 
      const activeItemMode: lt.Controls.ImageViewerActiveItemInteractiveMode = new lt.Controls.ImageViewerActiveItemInteractiveMode(); 
      viewer.interactiveModes.insert(0, activeItemMode); 
 
      const output = document.getElementById("output"); 
 
      // Hook to the ActiveItemChanged event and update the label 
      const updateActiveItem = () => { 
         const index: number = viewer.items.indexOf(viewer.activeItem); 
         output.innerHTML = "Active item index: " + index; 
      } 
      viewer.activeItemChanged.add(updateActiveItem); 
      updateActiveItem(); 
   } 
} 
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_ActiveItemInteractiveModeExample { 
   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 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
      // Make sure the item size is larger than the image size (thumbnails mode) 
      viewer.itemBorderThickness = 3; 
      viewer.itemMargin = lt.Controls.ControlPadding.createAll(5); 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
      // Change the active item background color 
      viewer.activeItemBorderColor = "forestgreen"; 
 
      // Add 4 items to the viewer 
      for (let index = 0; index < 4; index++) { 
         const item = new lt.Controls.ImageViewerItem(); 
         item.text = "Item " + index; 
         item.url = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
         viewer.items.add(item); 
      } 
 
      // Insert the Active Item mode before the current PanZoom mode 
      const activeItemMode = new lt.Controls.ImageViewerActiveItemInteractiveMode(); 
      viewer.interactiveModes.insert(0, activeItemMode); 
 
      const output = document.getElementById("output"); 
 
      // Hook to the ActiveItemChanged event and update the label 
      const updateActiveItem = () => { 
         const index = viewer.items.indexOf(viewer.activeItem); 
         output.innerHTML = "Active item index: " + index; 
      } 
      viewer.activeItemChanged.add(updateActiveItem); 
      updateActiveItem(); 
   } 
} 
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 | ActiveItemInteractiveMode</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.InteractiveMode.ActiveItemInteractiveMode(); 
 
   }; 
</script> 
</html> 
Requirements

Target Platforms

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

Leadtools.Controls Assembly
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.