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

Technical Support
1

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.

2

Hi,

You can overwrite the switchOut method on Tool like so:

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

Thanks!
Logan

3

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 () { }

4

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 () { }
   })
})

Thanks!

5

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.

6

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
    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

1 Like