Is it possible to pan-tool while selecting the multiple annotations

Here I have enabled pan mode in webviewer, then I select multiple annotations by ( ctrl+select ), and pan across the webviewer. While I pan, the selected annotation loses its selection.

Is there anything that I can prevent this ? I want to pan as well as select multiple annotations.


You can overwrite the switchOut method on Tool like so:

instance.docViewer.on('documentLoaded', () => {
    Tools.Tool.prototype.switchOut = function () { }


Can you elaborate a bit clearly.
I have used this pan tool for selecting multiple annotations as well as paning across.
const tool = this.viewerInstance.docViewer.getTool('Pan')

How to use this function.
Tools.Tool.prototype.switchOut = function () { }

Hi there, you just need to call it as-is:

Webviewer({...}, element).then(instance => {
   const {Tools, docViewer} = instance;

   docViewer.on('documentLoaded', () => {
     Tools.Tool.prototype.switchOut = function () { }


I have tried this. But its not working. After selecting the annotation, it loses its selection on pan. It should persist the selection while panning.

Hi there!

Sorry about that, that code worked for us in our local development server but does not work in the production build.

Unfortunately there’s not a quick easy way to accomplish this, so you’ll have to do some prototype stuff to make it work.

Here’s some code we came up with to make it work

const { annotManager, Tools } = instance;

let startLocation;

const originalLeftDown = Tools.PanTool.prototype.mouseLeftDown;
Tools.PanTool.prototype.mouseLeftDown = function(e) {
  const selectedAnnots = annotManager.getSelectedAnnotations();
  originalLeftDown.apply(this, arguments);

  if (selectedAnnots.length > 0) {
    // make sure to reselect annotations on mouse down

  startLocation = this.getMouseLocation(e);

originalLeftUp = Tools.PanTool.prototype.mouseLeftUp;
Tools.PanTool.prototype.mouseLeftUp = function(e) {
  originalLeftUp.apply(this, arguments);

  // deselect if this was a click and there is no annotation underneath the mouse
  const endLocation = this.getMouseLocation(e);
  if (endLocation.x === startLocation.x && endLocation.y === startLocation.y) {
    if (!annotManager.getAnnotationByMouseEvent(e)) {

I hope this helps!


1 Like