LEADTOOLS JavaScript Object Model

"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); 
 
});