element Property

Summary

The HTML or SVG Element associated with this item.

Syntax
TypeScript
JavaScript
Object.defineProperty(ImageViewerItem.prototype, 'element', 
	get: function(), 
	set: function(value) 
) 
element: HTMLElement; 

Property Value

The svg or user-defined HTML associated with this item. The default value is null.

Remarks

The item can have a value in only one of Image, Element, or Canvas. Setting one value will automatically delete the values of the others. Element accepts any element, but may still be null after the set operation. An HTML Image Element set to Element will actually be set to Image, and an HTML5 Canvas Element set to Element will actually be set to Canvas.

Element is used to support elements that are neither HTML Image Elements nor HTML5 Canvas Elements. Essentially, this means support for:

Changing the value of this property will fire the ItemChanged event with ImageViewerItemChangedReason.Image. The value of Resolution will not be automatically updated with the DPI of the new image. The user must set this value manually.

Element property of ImageViewer will update this member if this is the active item when the viewer is used in single item mode.

When setting this property to any User-Defined HTML, be aware of the CSS settings for box-sizing. The ImageViewer is rendered using a consistent box-sizing: "content-box"; this will be applied to the root element added to Element. However, any descendants of that root will not have an explicit box-sizing value set.

When adding the element, internal methods will attempt to get the natural size of the root and its descendants and resize the ImageViewerItem around that computed size. Due to CSS abnormalities and technicalities, particularly with respect to the CSS Box Model, this value may not always be correct. To troubleshoot, try examining what CSS rules are in effect for the added HTML, and if padding or border are involved, consider your values for box-sizing.

For more information, refer to Image Viewer Items.

Example

This example creates an elements-mode viewer and adds custom HTML as an item.

Element.ts
ImageViewer.ts
Element.js
ImageViewer.js
Element.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewerItem_ElementExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Destroy the imageViewer to enter elements mode 
      viewer.dispose(); 
 
      // Recreate the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = 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: lt.Controls.ImageViewerItem = 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 
   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> 
Requirements

Target Platforms

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

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