How to Pan while tracing by pressing and holding the left click of the mouse

Technical Support
1

PDF.js Express Version
“name”: “webviewer”,
“description”: “PDFJS Express”,
“version”: “7.2.0”,

Detailed description of issue

I want to enable panning while tracing/drawing any tool like (AnnotationCreatePerimeterMeasurement) and (AnnotationCreateAreaMeasurement). I have used setToolMode to enable tracing. Now while tracing, User should be able to zoom and pan while tracing.

I have got some information regarding this. So Can you give me some working snippet of this idea because it didn’t work as expected. -

You can implement the auto scrolling functionality by listening to the mouseMove event on the docViewer. The idea is to listen to this event, and in the event handler you can check if currently the mouse position is near the edge of the viewport. If this is the case, you can call docViewer.getScrollViewElement to get the scroll container and set its scrollTop or scrollLeft to scroll.

Expected behaviour
User should be able to pan while tracing annotations like Perimeter and area tool.

Does your issue happen with every document, or just one?
Every Document

Link to document
Any Pdf document.

Code snippet
This works but only when mouse goes close to viewer’s border, but I want to enable panning even if it is not close to the webviewer’s border. User should be free to pan while tracing.

instance.docViewer.on('mouseMove', e => {
const docContainer1 = instance.iframeWindow.document.querySelector('[data-element="documentContainer"]');
docContainer1.scrollTop = e.y;
docContainer1.scrollLeft = e.x;
});

2

Hey there,

I do not understand your question/use case. How would they pan without going near the border of the document? Can you explain in more detail how you expect this to work.

Thanks

3

Hi,

I think this will make my work done: When I get close to the border of the document, then it will automatically pan.

instance.docViewer.on('mouseMove', e => {
const docContainer1 = instance.iframeWindow.document.querySelector('[data-element="documentContainer"]');
docContainer1.scrollTop = e.y;
docContainer1.scrollLeft = e.x;
});

Can you help me with this? It’s not working properly with this above code snippet.
I think I am not setting scrollTop and scrollLeft with proper data. It is panning even if mouse is not close to the border.

Actually we wanted like this too. - Pan while tracing -(Check this zip which has a video of pan while tracing)
pan-while-tracing.zip (3.0 MB)

4

Hey there,

I do not understand your use-case and do not understand what is happening in the video.

Do you want some kind of hot key that switches to panning while in a different tool?

5

Hi,

We have last 2 days for our product launch and still we are unable to resolve this issue. Please guide me further for implementing this till what you had mentioned before that -

We can listen to the mouse-move event and when near to viewPort, it will automatically pan

Can we do this right now immediately?

Actually in that tool we can pan by holding left click on mouse and drag while tracing any annotations. For dropping points of tracing, we use a single click and for pan - (click&drag).

If this is quite tricky then please suggest any other solution immediately.

If not something else which will help us for panning while tracing without losing already dropped points
of tracing. An AutoCad also has this feature of pan while tracing and it’s a main feature too, so this is our show-stopper point for our product to go live after 2 days.

A working code snippet will be very much helpful.

Thanks and regards,
Kiran

6

You seem to be back and forth about what you want. Your initial message said

I want to enable panning even if it is not close to the webviewer’s border. User should be free to pan while tracing.

but then you said

It is panning even if mouse is not close to the border.

which contradicts your initial message.

I cannot help you if I do not understand what you are trying to accomplish. The video you sent does not help because it does not show/explain how the user is panning. Are they holding down a key? Is it just on mouse move?

7

Actually there are two options

  1. One is if we move cursor close to webviewer’s border, then it should automatically pan.
    OR
  2. Second is - we can pan by holding left click on mouse and drag while tracing any annotations. For dropping points of tracing, we use a single click and for pan - ( click&drag ).

Here among both, is it possible to do any of the one?
If yes, please suggest us with code snippet

8

Hi Logan,

Any updates? Just wanted to know if we can do any of the above mentioned 2 options.

Thanks

9

The first one should be doable, I’ll send a code snippet shortly.

10

Hey,

Something like this should do the trick. You might want to play around with the constants and maybe debounce the function so it doesn’t happen immediatly.

  let interval;
  instance.docViewer.on('mouseMove', e => {
    const docContainer1 = instance.iframeWindow.document.querySelector('[data-element="documentContainer"]');
    const THRESHOLD = 50;
    const SCROLL_SPEED = 15;
    const boundingRect = docContainer1.getBoundingClientRect();
    const containerWidth = boundingRect.width;
    const containerHeight = boundingRect.height;

    const deltaX = e.x - boundingRect.x;
    const deltaY = e.y - boundingRect.y;

    const isInBoundsX = e.x > boundingRect.x && e.x < boundingRect.x + boundingRect.width;
    const isInBoundsY = e.y > boundingRect.y && e.y < boundingRect.y + boundingRect.height;
    const isInBounds = isInBoundsX && isInBoundsY;

    if (!isInBounds) return;

    clearInterval(interval);

    if (deltaX < THRESHOLD) {
      interval = setInterval(() => {
        docContainer1.scrollLeft = docContainer1.scrollLeft - SCROLL_SPEED;
      }, 20)
    }

    if (Math.abs(containerWidth - deltaX) < THRESHOLD) {
      interval = setInterval(() => {
        docContainer1.scrollLeft = docContainer1.scrollLeft + SCROLL_SPEED;
      }, 20)
    }

    if (deltaY < THRESHOLD) {
      interval = setInterval(() => {
        docContainer1.scrollTop = docContainer1.scrollTop - SCROLL_SPEED;
      }, 20)
    }

    if (Math.abs(containerHeight - deltaY) < THRESHOLD) {
      interval = setInterval(() => {
        docContainer1.scrollTop = docContainer1.scrollTop + SCROLL_SPEED;
      }, 20)
    }
  });

Note that this code and question doesn’t really have anything to do with PDF.js Express and is just basic DOM + JS manipulation, so I can not support this use case any further.

Thanks!

11

Hi,

I tried this solution but its not that smooth pan. But I have figured something else from which we can do the second option which I had mentioned earlier. - Pan by clicking and dragging while tracing, (click and drag).

The idea is to use mouseLeftDown and mouseLeftUp event. Here take one variable say startPt, and then get mouse location with respect window’s coordinates on mouseLeftDown event. And clear that coordinate on mouseLeftUp. Use it with mouseMove event for panning now.

A short code snippet of working solution -

This is for mouseLeftDown

this._startPt = this.getMouseLocation(e);

This is for mouseMove event

const scrollView = this.docViewer.getScrollViewElement();
const location = this.getMouseLocation(e);
const xDelta = this._startPt.x - location.x;
const yDelta = this._startPt.y - location.y;
this.docViewer.scrollTo(scrollView.scrollLeft + xDelta, scrollView.scrollTop + yDelta);

Anyway. This is working now properly. Thanks for help.

1 Like