element 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 ImageViewerItem_ElementExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Destroy the imageViewer to enter elements mode 
      viewer.dispose(); 
 
      // Recreate the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      createOptions.useElements = true; 
      viewer = new lt.Controls.ImageViewer(createOptions); 
      viewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      viewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      viewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      viewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
 
      // Create a container 
      const div = document.createElement("div"); 
      // If adding padding or border to the root, 
      // Also add box-sizing: "content-box" 
      div.style.boxSizing = "content-box"; 
      div.style.padding = "5px"; 
      // Create a heading 
      const h3 = document.createElement("h3"); 
      h3.innerHTML = "My HTML"; 
      // Create a button 
      const button = document.createElement("button"); 
      button.innerHTML = "Click me!" 
      // Connect them all 
      div.appendChild(h3); 
      div.appendChild(button); 
 
      // Interaction below is only available if pointer events are supported 
      // By default no elements can be interacted with, so use ElementInsertionHelper 
      lt.Controls.ElementInsertionHelper.forcePointerEvents([button]); 
      button.onclick = () => { 
         alert("I've been clicked!"); 
      }; 
 
      // We could also allow selecting the h3 text with the below line, or combine it with the above line 
      //lt.Controls.ElementInsertionHelper.forcePointerEvents([h3]); 
 
      // Size is computed when added, but setting an explicit height is also possible. 
      //div.style.width = ... 
      //div.style.height = ... 
 
      // Use any of the below methods to add the item 
      // 1: Create an item manually 
      const item = new lt.Controls.ImageViewerItem(); 
      item.element = div; 
      viewer.beginUpdate(); 
      viewer.items.add(item); 
      viewer.endUpdate(); 
 
      // 2: Use CreateFromElement 
      //const item: lt.Controls.ImageViewerItem = lt.Controls.ImageViewerItem.createFromElement(div, lt.LeadSizeD.create(96, 96)); 
      //viewer.beginUpdate(); 
      //viewer.items.add(item); 
      //viewer.endUpdate(); 
 
      // 3: Use AddFromElement / InsertFromElement 
      //const item: lt.Controls.ImageViewerItem = viewer.items.addFromElement(div, lt.LeadSizeD.create(96, 96)); 
 
      // 4: Update via UpdateElement 
      viewer.items.updateElement(viewer.activeItem, div, lt.LeadSizeD.create(96, 96)); 
   } 
} 

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 | Element</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.ImageViewerItem.Element(); 
 
   }; 
</script> 
</html>