Introduction

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

// This will show 'lt.Controls.ImageViewerPanZoomInteractiveMode' 
alert(lt.Controls.ImageViewerPanZoomInteractiveMode.get_fullName()); 

// This will show 'ImageViewerPanZoomInteractiveMode' 
alert(lt.Controls.ImageViewerPanZoomInteractiveMode.get_name()); 

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 = new lt.LeadPointD(); 
 
// This will show false 

'use strict'; 
 
// Register the namespace 
Type.registerNamespace('demo'); 
 
// RotateInteractiveModeEventArgs begin 
// Data for the custom event 
// ctor 
demo.RotateInteractiveModeEventArgs = function 
demo_RotateInteractiveModeEventArgs(rotateAngle) { 
   // Call initializeBase since deriving from a LEADTOOLS type requires it 
   demo.RotateInteractiveModeEventArgs.initializeBase(this); 
   this._rotateAngle = rotateAngle; 
} 
 
demo.RotateInteractiveModeEventArgs.prototype = { 
   // function to return the rotation angle 
   get_rotateAngle: function () { 
      return this._rotateAngle; 
   } 
}; 
 
// Define the properties 
Object.defineProperty(demo.RotateInteractiveModeEventArgs.prototype, 'rotateAngle', { 
   get: demo.RotateInteractiveModeEventArgs.prototype.get_rotateAngle, enumerable: true, configurable: true 
}); 
 
// Register this class 
demo.RotateInteractiveModeEventArgs.registerClass('demo.RotateInteractiveModeEventArgs', lt.LeadEventArgs); 
 
// RotateInteractiveModeEventArgs end 
 
// RotateInteractiveMode begin 
// Class that derives from a LEADTOOLS lt.Controls.ImageViewerInteractiveMode class 
demo.RotateInteractiveMode = function demo_RotateInteractiveMode() { 
   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 
   get_name: function () { 
      return 'Rotate'; 
   }, 
 
   // The event 
   get_rotate: function () { 
      return this._rotate; 
   }, 
 
   // 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.imageViewerControl; 
      var change = e.change;// this is a lt.LeadPointD object     
      var delta = 2; 
      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, 'rotate', { get: demo.RotateInteractiveMode.prototype.get_rotate, enumerable: true, configurable: true }); 
 
// Register this class 
demo.RotateInteractiveMode.registerClass('demo.RotateInteractiveMode', lt.Controls.ImageViewerInteractiveMode); 
 
// RotateInteractiveMode end 
 
function run() { 
   // Create the viewer 
   var imageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer'); 
   var viewer = new lt.Controls.ImageViewer(imageViewerCreateOptions); 
 
   // 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 interactiveModeSelect = document.getElementById('interactiveModeSelect'); 
   interactiveModeSelect.addEventListener('change', function () { 
      viewer.defaultInteractiveMode = interactiveModes[interactiveModeSelect.selectedIndex]; 
      if (demo.RotateInteractiveMode.isInstanceOfType(viewer.defaultInteractiveMode)) { 
         alert('rotate'); 
      } else if (lt.Controls.ImageViewerPanZoomInteractiveMode.isInstanceOfType(viewer.defaultInteractiveMode)) { 
         alert('pan zoom'); 
      } 
   }, false); 
   viewer.defaultInteractiveMode = interactiveModes[0]; 
   // Finally, set an image into the viewer (change this to a valid URL) 
   viewer.imageUrl = 'http://example/image.jpg'; 
}