ImageViewerInteractiveMode Object

Base class for the rich user experience features of ImageViewer

Object Model

Syntax

JavaScript

function Leadtools.Controls.ImageViewerInteractiveMode()

Remarks

ImageViewerInteractiveMode works with the InteractiveService object of the ImageViewer to provide rich user interface experience when the user interacts with the viewer using mouse or touch.

ImageViewerInteractiveMode is a base abstract class, you can derive your own class to handle custom interaction with the viewer. For more information and for a list of the out of the box modes provided by LEADTOOLS, refer to Image Viewer Interactive Modes.

ImageViewerInteractiveMode has the following functionality:

Member	Description
WorkingCursor, IdleCursor and HitTestStateCursor.	Cursor to use when the interactive mode is in an idle, working or hit-test state (for desktop browsers).
MouseButtons	The mouse button attached to this mode (for desktop browsers)

To use an interactive mode, you create an instance of any of the derived classes and assign it to the viewer using one of the following methods:

ImageViewer.DefaultInteractiveMode: Assigns the interactive mode to the left mouse button on desktop browsers or default touch events on devices that support touch.
ImageViewer.InteractiveModes: Add more than one interactive mode to the viewer.

You can use multiple interactive modes at the same time. For example, use the following code to support panning/zooming with the left mouse button and magnify glass with the right button:

Example

This example will create a custom ImageViewerInteractiveMode that will rotate the image when the user clicks or touches and drags on the viewer.

JavaScript

function ImageViewerInteractiveMode() {
   this._imageViewer.interactiveModes.beginUpdate();
   var transformInteractiveMode = new TransformInteractiveMode();
   transformInteractiveMode.isEnabled = false;
   this._imageViewer.interactiveModes.add(transformInteractiveMode);
   //...
   //...
   //...
   this._imageViewer.interactiveModes.endUpdate();
}

var _this = null;
TransformInteractiveMode = function TransformInteractiveMode() {
   TransformInteractiveMode.initializeBase(this);
   this.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet;
   _this = this;
}
TransformInteractiveMode.prototype = {
   _scaleKeyModifier: function () {
      return 131072;
   },

   get_scaleKeyModifier: function TransformInteractiveMode$get_scaleKeyModifier() {
      return this._scaleKeyModifier;
   },

   set_scaleKeyModifier: function MyImageViewerInteractivMode$set_scaleKeyModifier(value) {
      // Supported is none and any modifiers
      switch (value) {
         case 0:
         case 262144:
         case 65536:
         case 131072:
            this._scaleKeyModifier = value;
            break;

         default:
            throw new lt.ArgumentOutOfRangeException("MaximumSize", value, "must a value greater than or equal to 0");
      }
   },

   _rotateKeyModifier: function () {
      return 262144;
   },

   get_rotateKeyModifier: function TransformInteractiveMode$get_rotateKeyModifier() {
      return this._rotateKeyModifier;
   },

   set_rotateKeyModifier: function TransformInteractiveMode$set_rotateKeyModifier(value) {
      // Supported is none and any modifiers
      switch (value) {
         case 0:
         case 262144:
         case 65536:
         case 131072:
            this._rotateKeyModifier = value;
            break;

         default:
            throw new lt.ArgumentOutOfRangeException("MaximumSize", value, "must a value greater than or equal to 0");
      }
   },

   name: function TransformInteractiveMode$name() {
      return "TransformInteractiveMode";
   },

   id: function TransformInteractiveMode$id() {
      return lt.Controls.ImageViewerInteractiveMode.userModeId + 3;
   },

   start: function TransformInteractiveMode$start(imageViewer) {
      TransformInteractiveMode.callBaseMethod(this, "start", [imageViewer]);

      var service = TransformInteractiveMode.callBaseMethod(this, "get_interactiveService");

      base.Start(imageViewer);
      var service = base.InteractiveService;

      // Pan required events
      service.DragStarted.add(this.service_DragStarted);
      service.DragDelta.add(this.service_DragDelta);
      service.DragCompleted.add(this.service_DragCompleted);
      service.DoubleTap.add(this.service_DoubleTap);
   },

   stop: function TransformInteractiveMode$stop(imageViewer) {
      if (this.isStarted) {
         var service = TransformInteractiveMode.callBaseMethod(this, "get_interactiveService");

         service.DragStarted.remove(this.service_DragStarted);
         service.DragDelta.remove(this.service_DragDelta);
         service.DragCompleted.remove(this.service_DragCompleted);
         service.DoubleTap.remove(this.service_DoubleTap);

         TransformInteractiveMode.callBaseMethod(this, "stop", [imageViewer]);
      }
   },

   service_DragStarted: function TransformInteractiveMode$_service_DragStarted(sender, e) {
      // Make sure pinch is not working, otherwise, ignore pan
      if (_this.canStartWork(e))
         return;
      // Make sure we are on an item
      if (_this.item == null)
         return;

      e.IsHandled = true;
      _this.onWorkStarted(lt.LeadEventArgs.empty);
   },

   service_DragDelta: function TransformInteractiveMode$_service_DragStarted(sender, e) {
      if (!_this.isWorking)
         return;

      var item = _this.item;
      if (item == null)
         return;

      // Find out what to do
      var dx = e.Change.X;
      var dy = e.Change.Y;

      if (dx == 0 && dy == 0)
         return;

      var scaleKeyModifier = _this.get_scaleKeyModifier();
      var rotateKeyModifier = _this.get_rotateKeyModifier();
      var scale = (Control.ModifierKeys & scaleKeyModifier) == scaleKeyModifier;
      var rotate = (Control.ModifierKeys & rotateKeyModifier) == rotateKeyModifier;

      var imageViewer = _this.imageViewer;

      if (scale) {
         _this.scale(imageViewer, item, dy, e.Origin);
      }
      else if (rotate) {
         _this.rotate(imageViewer, item, dx, e.Origin);
      }
      else {
         _this.translate(imageViewer, item, dx, dy);
      }

      e.IsHandled = true;
   },

   service_DragCompleted: function TransformInteractiveMode$_service_DragStarted(sender, e) {
      if (!_this.isWorking)
         return;

      e.IsHandled = true;
      _this.onWorkCompleted(lt.LeadEventArgs.empty);
   },

   service_DoubleTap: function TransformInteractiveMode$_service_DragStarted(sender, e) {
      // Make sure we not working already
      if (_this.isWorking || !_this.canStartWork(e))
         return;

      // Make sure we have an item
      var item = _this.item;
      if (item == null)
         return;

      e.IsHandled = true;

      _this.onWorkCompleted(lt.LeadEventArgs.empty);
      _this.identity(_this.imageViewer, item);
      _this.onWorkCompleted(lt.LeadEventArgs.empty);
   },

   identity: function TransformInteractiveMode$identity(imageViewer, item) {
      item.Transform = LeadMatrix.Identity;
   },

   scale: function TransformInteractiveMode$scale(imageViewer, item, dy, position) {
      // ...
      // set scale code
      // ...
   },

   rotate: function TransformInteractiveMode$rotate(imageViewer, item, dx, position) {
      // ...
      // set rotate code
      // ...
   },

   translate: function TransformInteractiveMode$translate(imageViewer, item, dx, dy) {
      // ...
      // set translate code
      // ...
   },
}

// TransformInteractiveMode class, derives from lt.Controls.ImageViewerInteractiveMode
TransformInteractiveMode.registerClass("TransformInteractiveMode", lt.Controls.ImageViewerInteractiveMode);

ImageViewerInteractiveMode Object

Reference