inject Property

Summary

Occurs when an injector is mounted or unmounted inside LEADVIEW.

Syntax
TypeScript
JavaScript
Object.defineProperty(InjectionManager.prototype, 'inject', 
   get: function(), 
   set: function(value) 
) 
inject: ; 

Property Value

A valid function defined by:

(data: InjectionArgs) => void; 
Remarks

To receive injection information from LEADVIEW, pass a valid callback to the inject property.

The inject event will then be raised every time an injector is created, and will be fired again whenever the injector is going to be removed. For more information about the injector event's data structure, refer to InjectionArgs.

Similar to the BindingManager, an inject callback should be provided before calling Viewer.run.

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> 
Requirements

Target Platforms

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

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