Zoom to selected mouse area (marquee zoom)

[Matt Parizeau]

This code works in the latest viewer and you can just change the scrollView variable to work in the legacy UI.

$(document).on('viewerLoaded', function() {
  setTimeout(function() {
    var docViewer = readerControl.docViewer;
    var scrollView = $('.DocumentContainer'); // use $('#DocumentViewer') in the legacy UI

    var mouseStart;

    docViewer.on('mouseLeftDown', function(e, e2) {
      mouseStart = {
        x: e2.originalEvent.clientX + scrollView.scrollLeft(),
        y: e2.originalEvent.clientY + scrollView.scrollTop()
      };
    });

    docViewer.on('mouseLeftUp',
      function(e1, e2) {
        var mouseStop = {
          x: e2.originalEvent.clientX + scrollView.scrollLeft(),
          y: e2.originalEvent.clientY + scrollView.scrollTop()
        }

        var nPageNumber = docViewer.getCurrentPage();
        // Get location of selected rectangle in page coordinates
        // using the windowToPage function from the display mode.
        var displayMode = docViewer.getDisplayModeManager().getDisplayMode();
        var pageCoordStart = displayMode.windowToPage(mouseStart, nPageNumber - 1);
        var pageCoordStop = displayMode.windowToPage(mouseStop, nPageNumber - 1);

        // Calculate the increase in size using the mouse coordinates and viewport size.
        // Check the width and height separately and the one with the smaller value will be used.
        var viewportWidth = scrollView.width();
        var viewportHeight = scrollView.height();

        var nSelWidth = Math.abs(mouseStop.x - mouseStart.x);
        var nSelHeight = Math.abs(mouseStop.y - mouseStart.y);
        var dZoomHorz = viewportWidth / nSelWidth;
        var dZoomVert = viewportHeight / nSelHeight;
        var dZoom = Math.min(dZoomHorz, dZoomVert);
        // Multiply the current zoom level by the size increase.
        var dCurrZoom = docViewer.getZoom();
        dZoom *= dCurrZoom;
        readerControl.setZoomLevel(dZoom);

        // Use the pageToWindow function to convert the top left of the selected area
        // in page coordinates to window coordinates
        // then scroll to that location taking into account the scrollview's offset.
        var rotation = docViewer.getCompleteRotation(nPageNumber);
        var pagePointTopLeft;
        if (rotation === 0) {
          pagePointTopLeft = {
            x: Math.min(pageCoordStart.x, pageCoordStop.x),
            y: Math.min(pageCoordStart.y, pageCoordStop.y)
          };
        } else if (rotation === 1) {
          pagePointTopLeft = {
            x: Math.min(pageCoordStart.x, pageCoordStop.x),
            y: Math.max(pageCoordStart.y, pageCoordStop.y)
          };
        } else if (rotation === 2) {
          pagePointTopLeft = {
            x: Math.max(pageCoordStart.x, pageCoordStop.x),
            y: Math.max(pageCoordStart.y, pageCoordStop.y)
          };
        } else if (rotation === 3) {
          pagePointTopLeft = {
            x: Math.max(pageCoordStart.x, pageCoordStop.x),
            y: Math.min(pageCoordStart.y, pageCoordStop.y)
          };
        }

        var wPt = docViewer.getDisplayModeManager().getDisplayMode().pageToWindow(pagePointTopLeft, nPageNumber - 1);
        var scrollViewOffset = scrollView.offset();
        docViewer.scrollTo(wPt.x - scrollViewOffset.left, wPt.y - scrollViewOffset.top);
      }
    );
  }, 0);
});

[Matt Parizeau]

If you would like to add a tool here is a code sample that creates a custom tool object and adds a button to the UI that enables the tool:

var MarqueeZoomTool = function() {
  Tools.AnnotationEditTool.apply(this, arguments);
};
MarqueeZoomTool.prototype = new Tools.AnnotationEditTool();

MarqueeZoomTool.prototype.switchIn = function() {
  Tools.Tool.ENABLE_AUTO_SWITCH = false;
  Tools.AnnotationEditTool.prototype.switchIn.apply(this, arguments);
};

MarqueeZoomTool.prototype.switchOut = function() {
  Tools.Tool.ENABLE_AUTO_SWITCH = true;
  Tools.AnnotationEditTool.prototype.switchOut.apply(this, arguments);
};

MarqueeZoomTool.prototype.mouseLeftDown = function(e) {
  Tools.AnnotationEditTool.prototype.mouseLeftDown.apply(this, arguments);
  this.mouseStart = this.getMouseLocation(e);
};

MarqueeZoomTool.prototype.mouseLeftUp = function(e) {
  Tools.AnnotationEditTool.prototype.mouseLeftUp.apply(this, arguments);
  this.mouseStop = this.getMouseLocation(e);

  var scrollView = this.docViewer.getScrollView();

  var nPageNumber = this.docViewer.getCurrentPage();

  // Get location of selected rectangle in page coordinates
  // using the windowToPage function from the display mode.

  var displayMode = this.docViewer.getDisplayModeManager().getDisplayMode();
  var pageCoordStart = displayMode.windowToPage(this.mouseStart, nPageNumber - 1);
  var pageCoordStop = displayMode.windowToPage(this.mouseStop, nPageNumber - 1);

  // Calculate the increase in size using the mouse coordinates and viewport size.
  // Check the width and height separately and the one with the smaller value will be used.
  var viewportWidth = scrollView.width();
  var viewportHeight = scrollView.height();

  var nSelWidth = Math.abs(this.mouseStop.x - this.mouseStart.x);
  var nSelHeight = Math.abs(this.mouseStop.y - this.mouseStart.y);

  if (nSelWidth === 0 || nSelHeight === 0) {

    return;

  }

  var dZoomHorz = viewportWidth / nSelWidth;
  var dZoomVert = viewportHeight / nSelHeight;
  var dZoom = Math.min(dZoomHorz, dZoomVert);
  // Multiply the current zoom level by the size increase.

  var dCurrZoom = this.docViewer.getZoom();

  dZoom *= dCurrZoom;
  readerControl.setZoomLevel(dZoom);

  // Use the pageToWindow function to convert the top left of the selected area
  // in page coordinates to window coordinates
  // then scroll to that location taking into account the scrollview's offset.

  var rotation = this.docViewer.getCompleteRotation(nPageNumber);

  var pagePointTopLeft;
  if (rotation === 0) {
    pagePointTopLeft = {
      x: Math.min(pageCoordStart.x, pageCoordStop.x),
      y: Math.min(pageCoordStart.y, pageCoordStop.y)
    };
  } else if (rotation === 1) {
    pagePointTopLeft = {
      x: Math.min(pageCoordStart.x, pageCoordStop.x),
      y: Math.max(pageCoordStart.y, pageCoordStop.y)
    };
  } else if (rotation === 2) {
    pagePointTopLeft = {
      x: Math.max(pageCoordStart.x, pageCoordStop.x),
      y: Math.max(pageCoordStart.y, pageCoordStop.y)
    };
  } else if (rotation === 3) {
    pagePointTopLeft = {
      x: Math.max(pageCoordStart.x, pageCoordStop.x),
      y: Math.min(pageCoordStart.y, pageCoordStop.y)
    };
  }

  var wPt = this.docViewer.getDisplayModeManager().getDisplayMode().pageToWindow(pagePointTopLeft, nPageNumber - 1);
  var scrollViewOffset = scrollView.offset();
  this.docViewer.scrollTo(wPt.x - scrollViewOffset.left, wPt.y - scrollViewOffset.top);
};

$(document).on('viewerLoaded', function() {
  readerControl.registerTool({
    toolName: 'MarqueeZoomTool',
    toolObject: new MarqueeZoomTool(readerControl.docViewer),
    buttonImage: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">' +

      '<path d="M0 0h24v24H0z" fill="none"/>' +

      '<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>' +

    '</svg>',

    buttonName: 'marqueeZoomToolButton',
    tooltip: 'Marquee Zoom'
  });

  readerControl.setHeaderItems(function(header) {
    var marqueeZoomToolButton = {
      type: 'toolButton',
      toolName: 'MarqueeZoomTool'
    };
    header.get('freeHandToolGroupButton').insertBefore(marqueeZoomToolButton);
  });
});