Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Marquee Zoom Feature #1260

Open
Pheil opened this issue Feb 21, 2012 · 24 comments
Open

Marquee Zoom Feature #1260

Pheil opened this issue Feb 21, 2012 · 24 comments

Comments

@Pheil
Copy link

Pheil commented Feb 21, 2012

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
Copy link
Contributor

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

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

ghost commented Dec 6, 2014

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

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

ghost commented Dec 28, 2014

@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
Copy link

VikramN commented Feb 19, 2015

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
Copy link
Author

Pheil commented May 3, 2016

@skjindal93 Any update on your pull request?

@Pheil
Copy link
Author

Pheil commented Sep 2, 2016

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

@RahulMetangale
Copy link

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

@ngramprabhu
Copy link

@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
Copy link

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

@timvandermeij
Copy link
Contributor

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

@vikasmahato
Copy link

vikasmahato commented Oct 21, 2017

@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
Copy link
Contributor

timvandermeij commented Oct 21, 2017

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

vikasmahato commented Oct 24, 2017

@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
Copy link
Contributor

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
Copy link
Author

Pheil commented Oct 24, 2017

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

@vikasmahato
Copy link

@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
Copy link

@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
Copy link
Contributor

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

@timvandermeij
Copy link
Contributor

timvandermeij commented Dec 24, 2017

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

Anu004 commented Jan 3, 2020

@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
Copy link

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

any update on this feature

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests