AnnPanelInjector Object

Summary

Holds injection information pertaining to LEADVIEW's Annotations Panel.

Syntax

TypeScript

JavaScript

function lt.LEADVIEW.AnnPanelInjector

class lt.LEADVIEW.AnnPanelInjector()

Example

InjectionManager.ts

InjectionManager.html

export class InjectionManagerExample { 
   public constructor() { 
      if (lt.RasterSupport.kernelExpired) 
         lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      lt.LEADVIEW.InjectionManager.Instance.inject = this.inject; 
   } 
 
   public run = (divID: string): void => { 
      const lv = new lt.LEADVIEW.Viewer(); 
 
      lv.run(null, { 
         'rootDivId': divID 
      }); 
   } 
 
   private inject = (e: lt.LEADVIEW.InjectionArgs) => { 
      /** 
       * Simple example for showcasinbg injection functionality. 
       * We will inject a red square in every area that is capable of being injected. 
       * 
       * Since we are not wiring up any callbacks -- we don't need to perform any 
       * cleanup actions, so we can ignore all unmounting calls. 
       */ 
      if (e.state === lt.LEADVIEW.InjectionState.unmounting) return; 
      switch (e.type) { 
         case lt.LEADVIEW.InjectionType.toolbar: 
            this.injectToolbar(e.data); 
            break; 
         case lt.LEADVIEW.InjectionType.menu: 
            this.injectMenu(e.data); 
            break; 
         case lt.LEADVIEW.InjectionType.annToolbar: 
            this.injectAnnToolbar(e.data) 
            break; 
      } 
   } 
 
   private injectToolbar = (obj: any) => { 
      const injector = obj as lt.LEADVIEW.ToolbarInjector; 
 
      document.getElementById(injector.start).appendChild(this.getRedSquare()); 
      document.getElementById(injector.end).appendChild(this.getRedSquare()); 
   } 
 
   private injectMenu = (obj: any) => { 
      const injector = obj as lt.LEADVIEW.MenuInjector; 
      document.getElementById(injector.start).appendChild(this.getRedSquare()); 
      document.getElementById(injector.end).appendChild(this.getRedSquare()); 
      document.getElementById(injector.tabStart).appendChild(this.getRedSquare()); 
      document.getElementById(injector.tabEnd).appendChild(this.getRedSquare()); 
      document.getElementById(injector.content).appendChild(this.getRedSquare()); 
   } 
 
   private injectAnnToolbar = (obj: any) => { 
      const injector = obj as lt.LEADVIEW.AnnPanelInjector; 
 
      document.getElementById(injector.start).appendChild(this.getRedSquare()); 
      document.getElementById(injector.end).appendChild(this.getRedSquare()); 
   } 
 
   private getRedSquare = () => { 
      const ele = document.createElement('div'); 
      ele.style.width = '10px'; 
      ele.style.height = '10px'; 
      ele.style.backgroundColor = 'red'; 
 
      return ele; 
   } 
}

<!doctype html> 
<html lang="en"> 
    <title>LV Examples | Injection Manager</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> 
        <script src="../LT/Leadtools.LEADVIEW.js" defer></script> 
        <link href="../css/Leadtools.LEADVIEW.css" type="text/css" rel="stylesheet"> 
 
        <!-- All typescript files compiled from /src/ will be bundled and dropped into the root folder `bundle.js`--> 
        <script src="../bundle.js" type="text/javascript"></script> 
    </head> 
    <body> 
        <div id="runDemo" style="width: 100%; height: 100vh;"></div> 
    </body> 
 
    <script> 
       window.onload = () => { 
         const example = new window.examples.InjectionManagerExample(); 
         example.run("runDemo"); 
      }; 
    </script> 
</html>