Marquee Zoom Feature

[Pheil]

A marquee zoom tool would be a useful feature. Having a zoom selection style similar to how "Print Edit 7.1" does their selection box is visually appealing.

[yurydelendik]

Sounds like a relatively simple tasks to implement -- just to follow steps in #3684. Also does not require knowing pdf.js internals. Setting good for beginner for now.

[naumankhan]

Hello Yury,
The thread 3684 is about Grab to Pan. Which is working fine. Can you please tell how to achieve "Marquee Zoom" feature like you make a selection of some area in PDF and it zoom that specific area ( Vertically or Horizontally ) to fit in your screen

[ghost]

I want to work on this bug. How should I start? Do I have to modify viewer.js for this? I know how to make a selection area using a canvas (and displaying a crosshair). I'll have to figure out how to do that in PDF.js and also how to zoom in the selected text.

[RahulMetangale]

I am working on this feature and when I draw a rectangle using marquee zoom tool, i see that entire page turns blank. I am not sure if it is related to existing bugs
#5499
#5392

My environment info:
Windows 8.1
Browser: All browsers
Used sample pdf that renders when viewer is opened.
Latest build of pdf.js

I am not sure if it is because of existing issue i mentioned or i could be doing something wrong. Also is there a way to turn off text selection using code?

[ghost]

@RahulMetangale Sorry. But I have already done this part. I just have to do some small changes in it. And then I will send a pull request.

[VikramN]

Is this still open? I have quiet a few things done for this. Only main pending item is - how to scroll to a particular region in a page after zoom (scale has changed)? Is there any API for this? If not, any recommendations on best way to get zoomed-offset to display?

[Pheil]

@skjindal93 Any update on your pull request?

[Pheil]

@RahulMetangale or @VikramN any chance either of you got something working since @skjindal93 disappeared?

[RahulMetangale]

@Pheil No, i stopped working on this after @skjindal93's comment

[ngramprabhu]

@Pheil @RahulMetangale I am also in need of this feature.. Tried to pass on X & Y position in scrollPageIntoView method which returns left and top. But no luck in positioning the zoomed area in the view port. If you guys look at scrollPageIntoView you may get some idea...

[vikasmahato]

Hey is anyone still working on it??? If no one is working then can I take this issue?

[timvandermeij]

@vikasmahato I think nobody is working on this right now, so feel free to take it!

[vikasmahato]

@Pheil @timvandermeij Can you please guide me on how to start??

What I have understood so far is this:

1. Create a selection using the mouse on the canvas.
2. Get the content inside the selection
3. Redraw the content so that it fills the visible canvas

[timvandermeij]

Take a look at how for example Adobe Reader/Acrobat does it. You need to be able to draw a rectangle around an area of interest, get the bounding box and zoom into that region. In web/app.js you can find how zooming works for a given percentage.

This tool is supposed to go into https://github.com/mozilla/pdf.js/blob/master/web/pdf_cursor_tools.js, where there is already some preparation for this; see https://github.com/mozilla/pdf.js/blob/master/web/pdf_cursor_tools.js#L21. Refer to that file also for how the other cursor tools work/are toggled.

[vikasmahato]

@timvandermeij I have implemented most of the stuff. Can you please tell me how can I draw the rectangle over the canvas? Do I have to use the overlayManager to do so?

[yurydelendik]

Can you please tell me how can I draw the rectangle over the canvas?

You don't have to draw a rectangle on a canvas. You can use css-styled div with border to show the rectangle.

[Pheil]

@vikasmahato I have a hack I added to my extension which might give you some ideas how to draw the rectangle.

https://github.com/Pheil/file-search-wx/blob/master/js/context_ss.js
Looks like this

[vikasmahato]

@Pheil @yurydelendik @timvandermeij I have implemented both the drawing of a rectangle and zooming in. The only hurdle I am facing now is how to scroll to a particular region in a page after zoom.
What is the best way to get the X and Y offsets of the scrollbar?

[vikasmahato]

@Pheil @yurydelendik @timvandermeij Can you please have a look at this PR and help me out with my previous query regarding setting the scrollbar position

[himanish-star]

@timvandermeij , I would like to solve this issue. Could I ?

[timvandermeij]

There is already a pull request above, but there is an open question there. Perhaps you could help out with that, or alternatively find a different issue to work on. Thanks.

[Anu004]

@Pheil @yurydelendik @timvandermeij I have implemented both the drawing of a rectangle and zooming in. The only hurdle I am facing now is how to scroll to a particular region in a page after zoom.
What is the best way to get the X and Y offsets of the scrollbar?

I'm facing this same issue. Is there any updates/improvements in this issue? I have to implement this zoom rectangle/marquee zoom in pdf.js viewer some how.

[KalikiPranathi]

Any updates on marquee zoom feature in pdf.js? Or is there any plugin/library to implement this feature.I need this feature in my application to view pdfs.

[santoshprakash]

any update on this feature