Handling scroll-click event

Hello,
Is there a way to handle scroll-click event(s) (up and down) on webViewer?
Thanks

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

I ask bcs I wanted to use Pan Tool, when I am pressing mouse scroll

Hello,

Thank you for contacting us regarding WebViewer.

You could add the native event listener to WebViewer instance, like so:

instance.addEventListener('mousedown', e => {
    e.preventDefault();
    if (e.which === 2) {    
      console.log('mousedown  instance', e)
    }
  });

I tested this, and it should be working, however, the ‘click’ event is not triggering on wheel click.

Please let me know how this works for you, and if you have any further questions.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Thanks, but it didn’t work for me. I’ve receive an error message after implementing that: Unhandled Rejection (TypeError): this.WebViewer.addEventListener is not a function.

Hello,

addEventListener exists in instance of WebViewer not WebViewer itself, you could get instance of Webviewer like so:

Webviewer({
  initialDoc: 'filePath',
  path: '/lib',
  enableFilePicker: true,
}, document.getElementById('viewer')).then((wvInstance) => {
  const { documentViewer } = wvInstance.Core;
  let wvInstancePointer2 = null;
  documentViewer.addEventListener('documentLoaded', ()=>{
    wvInstancePointer2 = this.WebViewer.getInstance()
    console.log(wvInstance)
    console.log(wvInstancePointer2) // this should be the same instance as wvInstance
    wvInstancePointer2 .addEventListener('mousedown',(e) =>{
      console.log('mousedown wvInstancePointer2 ',e)
    })
  })
  wvInstance.addEventListener('mousedown',(e) =>{
    console.log('mousedown wvInstance',e)
  })
});

Please let me know how this works for you.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

It’s not working… Could the reason be that I am using older version of lib? 7.2.0

Hello,

If you are using 7.x then on would work, addEventListener was introduced in 8.0:

Webviewer({
  initialDoc: 'filePath',
  path: '/lib',
  enableFilePicker: true,
}, document.getElementById('viewer')).then((wvInstance) => {
  const { docViewer } = wvInstance;
  let wvInstancePointer2 = null;
  docViewer.on('documentLoaded', ()=>{
    wvInstancePointer2 = this.WebViewer.getInstance()
    console.log(wvInstance)
    console.log(wvInstancePointer2) // this should be the same instance as wvInstance
    wvInstancePointer2 .addEventListener('mousedown',(e) =>{
      console.log('mousedown wvInstancePointer2 ',e)
    })
  })
  wvInstance.addEventListener('mousedown',(e) =>{
    console.log('mousedown wvInstance',e)
  })
});

Please let me know how this works for you.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

Hey @awejasonhu

actually im able to call mouse scroll event but thing how can i use pan tool by only pressing & holding mouse scroll button and drag mouse to pan… not by dragging with left click…

Ex. Panning in figma by pressing and then dragging mouse scroll button

Hello John,

I think you can call the event handler functions on PanTool, here is the guide:PDFTron.

  const { Tools } = instance;
  const panMouseDown = Tools.PanTool.prototype.mouseLeftDown;
  Tools.PanTool.prototype.mouseLeftDown = function() {
    console.log('panMouseDown mouseLeftDown')
    panMouseDown.apply(this, arguments);
  };

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

hey @awejasonhu ,

i guess there’s miss understanding… take a scenario of Figma work space where we can PAN by only pressing and dragging scroll button to pan… is there any method in which i can only press and hold and move mouse to pan the pdf view…

thanks…,

Hello,

Hmm, I see what you are looking for now, you can call the instance of panTool, like so

  const {docViewer, Tools} = instance;
  docViewer.on('documentLoaded', ()=>{

    docViewer.setToolMode(Tools.ToolNames.PAN);
    const panTool = docViewer.getTool(Tools.ToolNames.PAN);
    docViewer.setToolMode(Tools.ToolNames.EDIT);

    instance.addEventListener('mousedown',(e) =>{
      e.preventDefault();
      if (e.which === 2) {
        docViewer.setToolMode(Tools.ToolNames.PAN);
        panTool.mouseLeftDown(e)
      }
    })
    instance.addEventListener('mousemove',(e) =>{
      e.preventDefault();
      if (e.which === 2) {    
        panTool.mouseMove(e)
      }
    })
    instance.addEventListener('mouseup',(e) =>{
      e.preventDefault();
      if (e.which === 2) {    
        panTool.mouseLeftUp(e)
        docViewer.setToolMode(Tools.ToolNames.EDIT);
      }
    })
  })

I tested this and it is working, let me know if this fits your needs.
Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com

1 Like

thank you…! @awejasonhu
you made my dayy…! :blush:

1 Like