Can I zoom based on mousewheel only events, and not ctrl + mousewheel event?

Technical Support WebViewer
1

WebViewer Version: latest

Hi, I’m building a frontend web application to annotate blueprints.

Users of this application are used to CAD software where zoom is managed with mousewheel (only !, not pressing the CTRL key).

Current situation : when the user scrolls (with mousewheel), the pdf document is scrolling.
Desired situation : when the user scrolls (with mousewheel), the pdf document is zooming.

How can I achieve such behaviour ?

Best,
Antoine

2

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:

3

Great, so I’ll wait for a customer support.

I tried to add a wheel event listener to the document viewer container but I can’t catch any event…I guess it is just because all the app is sandboxed in an iframe.

4

Hi,

You can add an event listener to override the default behaviour like the following

Webviewer({}, document.getElementById('viewer')).then(instance => {
  const { docViewer } = instance;
  
   let throttleTime;
    // wait till after the "pageComplete" event so the element will be on the DOM
   docViewer.on('pageComplete', function() {
     document.querySelector('#viewer > iframe').contentDocument.querySelector('.document').addEventListener('wheel', (e) => {
        // the "wheel" event actually trigger on the "documentContainer" element
       // however add event to the document element to use "stopPropagation" to disable default behaviour

       e.stopPropagation();
       e.preventDefault();

      if (throttleTime) {
        return;
      } else {
        throttleTime = setTimeout(() => {
          // change zoom level base on the direction of the mouse wheel
          if (e.deltaY < 0) {
            instance.setZoomLevel(instance.getZoomLevel() * 1.2)
          } else {
            instance.setZoomLevel(instance.getZoomLevel() * 0.9)
          }
          clearTimeout(throttleTime);
          throttleTime = null;
        }, 100);
      }
     });
  });
});

The main idea is to prevent the “wheel” even on the “documentContainer” event from scrolling and use “setZoomLevel” to change the zoom. Please let me know if the above works for you or if you want me to clarify something

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

1 Like
5

Hi Andrew,

thanks for your answer !! I was not listening on the right element. Good to know that I needed to reach the documentContainer inside the iframe !

It works perfectly :ok_hand:… well, almost perfectly :wink:

Now, the challenge is to center the zoom on the mouse position. So instead of using the instance.setZoomLevel method, I’m using the documentViewer.zoom(zoom, x, y)To method.

My problem : I’m struggling to compute the appropriate (x,y)…

Below the getMouseLocation I’m using to get the x,y at the moment.

Question => How should I offset the resulting position to keep the zoom centered on the mouse position ?

const getMouseLocation = (e) => {
        const scrollElement =
          instance.Core.documentViewer.getScrollViewElement();
        const scrollLeft = scrollElement.scrollLeft || 0;
        const scrollTop = scrollElement.scrollTop || 0;

        return {
          x: e.pageX + scrollLeft,
          y: e.pageY + scrollTop,
        };
      };
6

Hi,

We have a guide about coordinates that might be helpful

I think for this cause you want to use the “windowToPage” API to get the coordinate on the page you want to zoom to.

Also you can try using the “zoomToMouse” API instead of the “zoomTo”
https://www.pdftron.com/api/web/Core.DocumentViewer.html#zoomToMouse

One thing to note is that the mouse event X and Y are based on the mouse cursor location relative to the browser. So you’ll need to provide offset for where the viewer is on the page.

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

1 Like
7

Hi Andrew ! This is fantastic, the zoomToMouse method is working great !! The guide about coordinates is super clear. Great documentation :+1: :+1:

Eventually, to zoom without using the CTRL key, I had to :

  • pay attention to the element where the wheel event listener should be added to, inside the iframe.
  • simply use the zoomToMouse method, paying attention to offsets.

Thanks a lot for your explanations

8

Hi Antoine,

I’m glad to hear it’s working for you. Feel free to let us know if you have any other questions.

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com