LEADTOOLS JavaScript Object Model

The LEADTOOLS JavaScript libraries use an object model similar to the Microsoft .NET or Java object class library.

The following members are available in each LEADTOOLS type in addition to the other properties and methods described in the members page.

Type refers to the LEADTOOLS type, such as lt.Controls.ImageViewer. All the functions listed below are static methods that must be called directly on the type itself and not an instance of the type.


[Type].registerNamespace(name)

Registers a new LEADTOOLS namespace.

Parameters

name: A string containing the fully qualified name of the namespace. Must not be omitted or null.

For an example, refer to the sample source code at the end of this document.


[Type].registerClass(name, baseType, interfaceType)

Registers a new LEADTOOLS class type.

Parameters

name: String containing the fully qualified type name (namespace.name). Must not be omitted or null.

baseType: Base type. Can be omitted or null if the class does not derive from a LEADTOOLS base class.

interfaceType: Interface type implemented by the class. Can be omitted or null if the class does not implement a LEADTOOLS interface.

For an example, refer to the sample source code at the end of this document.


[Type].registerInterface(name)

Registers a new LEADTOOLS class type.

Parameters

name: String containing the fully qualified namespace name. Must not be omitted or null.


[Type].registerEnum(name, flags)

Registers a new LEADTOOLS enumeration.

Parameters

name: String containing the fully qualified enumeration name. Must not be omitted or null.

flags: true if the members of this enumeration can be OR'ed together; otherwise, false. Treated as false if omitted or null.


[Type].initializeBase(instance, args)

Initializes the base class of a LEADTOOLS derived class from the constructor.

Parameters

instance: The derived class instance. In almost all cases, it can be set to 'this'. Must not be omitted or null.

args: An array containing the arguments to pass to the base class. Can be omitted or null if the base class constructor does not require other arguments.

If you derive a new class from a LEADTOOLS class, then you must call this method in your constructor to initialize the base class.

For an example, refer to the sample source code at the end of this document.


[Type].callBaseMethod(instance, name, args)

Calls a function from the base class of a LEADTOOLS derived class.

Parameters

instance: The derived class instance. In almost all cases, it can be set to 'this'. Must not be omitted or null.

name: String containing the name of the function to call. Must not be omitted or null.

args: An array containing the arguments to pass to the base class method. Can be omitted or null if the base class constructor does not have arguments.

Return Value

The return value from the base method (if any).

For an example, refer to the sample source code at the end of this document.


[Type].__baseType

(Property) The base type of this type.


[Type].__typeName

(Property) The full namespace name of this type.

// This will show 'lt.Controls.ImageViewerInteractiveMode' since ImageViewerPanZoomInteractiveMode 
// derives from ImageViewerInteractiveMode 
alert(lt.Controls.ImageViewerPanZoomInteractiveMode.__baseType.__typeName); 

[Type].prototype.isInstanceOfType(instance)

Determines whether the specified object is an instance of this class or one of its derived classes.

Parameters Instance: the object instance to check.

Return Value

true if the specified object is an instance of this class or one of its derived classes; otherwise, false.

var instance = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
// This will show true, same type 
alert(lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(instance)); 
 
// This will show true, derived type 
alert(lt.Controls.ImageViewerInteractiveMode.isInstanceOfType(instance)); 
 
instance = lt.LeadPointD.create(10, 10); 
 
// This will show false 
alert(lt.Controls.ImageViewerInteractiveMode.isInstanceOfType(instance)); 

Example Class Derived from ImageViewerInteractiveMode

This following example shows how to create a class that derives from ImageViewerInteractiveMode to implement rotation when the user clicks and drags the viewer.

example.html
example.css
example.js

example.html

<!DOCTYPE html> 
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <title>Rotate Interactive Mode</title> 
   <link href="example.css" rel="stylesheet" type="text/css" /> 
   <script type="text/javascript" src="Leadtools.js"></script> 
   <script type="text/javascript" src="Leadtools.Controls.js"></script> 
   <script type="text/javascript" src="example.js"></script> 
</head> 
<body> 
   <div id="controls"> 
      <label for="interactiveModeSelect">Interactive Mode:</label> 
      <select id="interactiveModeSelect"> 
         <option>PanZoom</option> 
         <option>Rotate</option> 
      </select> 
   </div> 
   <div id="imageViewer"></div> 
   <div id="output"></div> 
</body> 
</html> 

example.css

css
html, body { 
   margin: 0; 
   padding: 0; 
   height: 100%; 
   overflow: hidden; 
   font-family: helvetica; 
} 
 
#imageViewer { 
   margin: 10px 0; 
   border: 2px solid #333; 
   background-color: #eee; 
   width: 500px; 
   height: 500px; 
} 

example.js

"use strict"; 
 
// Register the namespace 
Type.registerNamespace("demo"); 
 
/////////////////////////////////////////////// 
// RotateInteractiveModeEventArgs 
 
// Data for the custom event 
demo.RotateInteractiveModeEventArgs = function (rotateAngle) { 
   // Call initializeBase - deriving from a LEADTOOLS type (LeadEventArgs) requires it 
   demo.RotateInteractiveModeEventArgs.initializeBase(this); 
   this._rotateAngle = rotateAngle; 
} 
 
// Define the getter property 
Object.defineProperty(demo.RotateInteractiveModeEventArgs.prototype, "rotateAngle", { 
   get: function () { 
      return this._rotateAngle; 
   }, 
   enumerable: true, configurable: true 
}); 
 
// Register this class 
demo.RotateInteractiveModeEventArgs.registerClass("demo.RotateInteractiveModeEventArgs", lt.LeadEventArgs); 
 
/////////////////////////////////////////////// 
// RotateInteractiveMode 
 
// Class that derives from a LEADTOOLS lt.Controls.ImageViewerInteractiveMode class 
demo.RotateInteractiveMode = function () { 
   demo.RotateInteractiveMode.initializeBase(this); 
 
   // Create the event 
   this._rotate = lt.LeadEvent.create(this, "rotate"); 
 
   // Event handlers 
   this._dragStartedHandler = null; 
   this._dragDeltaHandler = null; 
   this._dragCompletedHandler = null; 
} 
 
demo.RotateInteractiveMode.prototype = { 
 
   // We must provide an implementation for name and id 
   // since they override similar methods of ImageViewerInteractiveMode 
   get_name: function () { 
      return "Rotate"; 
   }, 
   get_id: function () { 
      return 200; // arbitrary 
   }, 
 
   // Called when the mode is started 
   // This is an overridden method 
   start: function (viewer) { 
      // Call the base class Start method 
      demo.RotateInteractiveMode.callBaseMethod(this, "start", [viewer]); 
 
      // Subscribe to the dragStarted, dragDelta and dragCompleted events 
      var service = this.interactiveService; 
      var _this = this; 
 
      this._dragStartedHandler = service.dragStarted.add(function (sender, e) { 
         _this.dragStarted(sender, e); 
      }); 
 
      this._dragDeltaHandler = service.dragDelta.add(function (sender, e) { 
         _this.dragDelta(sender, e); 
      }); 
 
      this._dragCompletedHandler = service.dragCompleted.add(function (sender, e) { 
         _this.dragCompleted(sender, e); 
      }); 
   }, 
 
 
   // Called when the mode is stopped 
   stop: function (viewer) { 
      // Check if we have started 
      if (this.isStarted) { 
         // Unsubscribe from the events 
         var service = this.interactiveService; 
         service.dragStarted.remove(this._dragStartedHandler); 
         service.dragDelta.remove(this._dragDeltaHandler); 
         service.dragCompleted.remove(this._dragCompletedHandler); 
 
         // Call the base class Stop method 
         demo.RotateInteractiveMode.callBaseMethod(this, "stop", [viewer]); 
      } 
   }, 
 
 
   // Called when the user starts a drag operation 
   dragStarted: function (sender, e) { 
      // This will check if the mouse button (if any) is correct and if we are on top of the image 
      if (this.canStartWork(e)) { 
         // Inform whomever is listening that we have started working 
         this.onWorkStarted(lt.LeadEventArgs.empty); 
      } 
   }, 
 
   // Called when the user is dragging 
   dragDelta: function (sender, e) { 
      // If we are not working (for example, the 
      //user has clicked the mouse outside the image) then 
      // nothing to do 
      if (!this.isWorking) { 
         return; 
      } 
 
      // Perform the operation. Get the change of the drag then increase 
      // or decrease the current rotation angle depending on the direction 
      var viewer = this.imageViewer; 
      var change = e.change; // this is a lt.LeadPointD object 
      var delta = 5; 
      var oldRotateAngle = viewer.rotateAngle; 
      if (change.x > 0) { 
         viewer.rotateAngle = viewer.rotateAngle - delta; 
      } 
      else if (change.x < 0) { 
         viewer.rotateAngle = viewer.rotateAngle + delta; 
      } 
 
      if (viewer.rotateAngle !== oldRotateAngle) { 
         // The rotate angle has changed, fire our event 
         this.rotate.invoke(this, new demo.RotateInteractiveModeEventArgs(viewer.rotateAngle)); 
      } 
   }, 
 
   // Called when the user stops dragging 
   dragCompleted: function (sender, e) { 
      // If we are working, signal completion 
      if (this.isWorking) { 
         this.onWorkCompleted(lt.LeadEventArgs.empty); 
      } 
   } 
}; 
 
// Define the properties 
Object.defineProperty(demo.RotateInteractiveMode.prototype, "name", { get: demo.RotateInteractiveMode.prototype.get_name, enumerable: true, configurable: true }); 
Object.defineProperty(demo.RotateInteractiveMode.prototype, "id", { get: demo.RotateInteractiveMode.prototype.get_id, enumerable: true, configurable: true }); 
 
Object.defineProperty(demo.RotateInteractiveMode.prototype, "rotate", { 
   get: function () { 
      return this._rotate; 
   }, 
   enumerable: true, configurable: true 
}); 
 
// Register this class 
demo.RotateInteractiveMode.registerClass("demo.RotateInteractiveMode", lt.Controls.ImageViewerInteractiveMode); 
 
/////////////////////////////////////////////// 
// Startup 
 
document.addEventListener("DOMContentLoaded", function () { 
   // Create the viewer 
   var imageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(document.getElementById("imageViewer")); 
   var viewer = new lt.Controls.ImageViewer(imageViewerCreateOptions); 
 
   viewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
   viewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
 
   // Create a new instance of the custom interactive mode 
   var rotateInteractiveMode = new demo.RotateInteractiveMode(); 
   // Subscribe to the custom event 
   var rotateEventHandler = rotateInteractiveMode.rotate.add(function (sender, e) { 
      console.log("Rotate angle: " + e.rotateAngle); 
   }); 
 
   // Set up interactive modes, pan zoom and the custom rotation mode 
   var interactiveModes = [ 
      new lt.Controls.ImageViewerPanZoomInteractiveMode(), 
      rotateInteractiveMode 
   ]; 
 
   var output = document.getElementById("output"); 
 
   var interactiveModeSelect = document.getElementById("interactiveModeSelect"); 
   interactiveModeSelect.addEventListener("change", function () { 
      var newMode = interactiveModes[interactiveModeSelect.selectedIndex]; 
      viewer.defaultInteractiveMode = newMode; 
 
      var text = "New Mode: "; 
      if (demo.RotateInteractiveMode.isInstanceOfType(newMode)) { 
         text += "Rotate: "; 
         text += demo.RotateInteractiveMode.__typeName; 
      } 
      else if (lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(newMode)) { 
         text += "PanZoom: "; 
         text += lt.Controls.ImageViewerPanZoomInteractiveMode.__typeName; 
      } 
 
      output.innerHTML += "<p>" + text + "</p>"; 
   }, false); 
 
   viewer.defaultInteractiveMode = interactiveModes[0]; 
 
   // Finally, set an image into the viewer (change this to a valid URL) 
   viewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
   viewer.zoom(lt.Controls.ControlSizeMode.none, .8, viewer.defaultZoomOrigin); 
 
}); 
Help Version 22.0.2023.1.18
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.

LEADTOOLS HTML5 JavaScript

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