Example

Summary

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

example.html

<!DOCTYPE html> 
<html> 
<head> 
   <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 onload="run()"> 
   <div id="controlsDiv"> 
      <div> 
         <label for="interactiveModeSelect">Interactive mode:</label> 
         <select id="interactiveModeSelect"> 
            <option>PanZoom</option> 
            <option>Rotate</option> 
         </select> 
         <input id="testButton" type="button" value="Test" /> 
      </div> 
   </div> 
   <div> 
      <textarea name="debugTextArea" cols="80" rows="10"></textarea> 
      <input type="button" id="debugClearButton" value="Clear" /> 
   </div> 
   <div id="imageViewerDiv" /> 
</body> 
</html>

example.css

html, body 
{ 
   margin: 0px; 
   padding: 0px; 
   min-height: 100%; 
   height: 100%; 
   overflow: hidden; 
   overflow: hidden; 
   background: white; 
   font-family: helvetica; 
   font-size: 10pt; 
   -ms-touch-action: none; 
   -webkit-user-select: none; 
   -webkit-text-size-adjust: none; 
} 
 
#imageViewerDiv 
{ 
   border: 1px solid #000000; 
   background-color: #7F7F7F; 
   width: 400px; 
   height: 400px; 
}

example.js

'use strict'; 
// Registers our namespace 
Type.registerNamespace('demo'); 
 
// RotateInteractiveModeEventArgs begin 
// Data for our custom event 
// ctor 
demo.RotateInteractiveModeEventArgs = function demo_RotateInteractiveModeEventArgs(rotateAngle) { 
   // Since we are deriving from a LEADTOOLS type, we need to call initializeBase 
   demo.RotateInteractiveModeEventArgs.initializeBase(this); 
   this._rotateAngle = rotateAngle; 
} 
 
demo.RotateInteractiveModeEventArgs.prototype = { 
   // function to return the rotate angle 
   get_rotateAngle: function () { 
      return this._rotateAngle; 
   } 
}; 
 
// Define our 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 our 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'; 
   }, 
 
   // Our 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 whoever 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 our 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 our 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 our custom interactive mode 
   var rotateInteractiveMode = new demo.RotateInteractiveMode(); 
 
   // Subscribe to our custom event 
   var rotateEventHandler = rotateInteractiveMode.rotate.add(function (sender, e) { 
      console.log('Rotate angle: ' + e.rotateAngle); 
   }); 
 
   // Setup interactive modes, pan zoom and our custom rotate 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'; 
}