Zoom to selected mouse area (marquee zoom)

75 views
Skip to first unread message

Matt Parizeau

unread,
Nov 29, 2018, 6:21:08 PM11/29/18
to PDFTron WebViewer
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

unread,
Dec 4, 2018, 9:23:12 PM12/4/18
to pdfnet-w...@googlegroups.com
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);
 
});
});
Reply all
Reply to author
Forward
0 new messages