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

**URL:** <https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [September 14, 2020, 12:16pm UTC](https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257 "2020-09-14T12:16:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiran.patil](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kiran.patil](https://pdfjs.community/u/kiran.patil)\
**Post date:** [September 14, 2020, 12:16pm UTC](https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257/1 "2020-09-14T12:16:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 17, 2020, 2:50pm UTC](https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257/2 "2020-09-17T14:50:16Z")

</div>

Hi,

You can overwrite the `switchOut` method on `Tool` like so:

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

```

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![kiran.patil](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kiran.patil](https://pdfjs.community/u/kiran.patil)\
**Post date:** [September 18, 2020, 10:04am UTC](https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257/3 "2020-09-18T10:04:36Z")

</div>

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')`  
`this.viewerInstance.docViewer.setToolMode(tool);`

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

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 18, 2020, 2:26pm UTC](https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257/4 "2020-09-18T14:26:47Z")

</div>

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

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

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

```

Thanks!

---

<div class="post-metadata">

**Author:** ![kiran.patil](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kiran.patil](https://pdfjs.community/u/kiran.patil)\
**Post date:** [September 23, 2020, 6:04am UTC](https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257/5 "2020-09-23T06:04:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [September 24, 2020, 3:47pm UTC](https://pdfjs.community/t/is-it-possible-to-pan-tool-while-selecting-the-multiple-annotations/257/6 "2020-09-24T15:47:35Z")

</div>

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

```javascript
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
    annotManager.selectAnnotations(selectedAnnots);
  }

  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)) {
      annotManager.deselectAllAnnotations();
    }
  }
};

```

I hope this helps!

Thanks,  
Logan