stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
474 stars 182 forks source link

Changing Zoom While in Book Mode needs a page transition to re-render text #2247

Open majora2007 opened 6 months ago

majora2007 commented 6 months ago

The bug isn't reproducible on Mozilla's PDF viewer as they don't have book mode. It can't be reproduced on simple due to lack of zoom controls.

I'm using just <pdf-zoom-toolbar ></pdf-zoom-toolbar> for the zoom control. Doesn't seem possible to manually interact or override programmatically.

Describe the bug A clear and concise description of what the bug is. For example:

  1. Use Automatic Zoom setting
  2. Click on Book mode toggle to ensure book is in book mode
  3. Change Zoom level
  4. Notice the text will disappear and only way to get to re-render is to change the page.

Version info

Demo PDF file Many errors happen with specific PDF files only. So please add a PDF file (after checking the copyright of the PDF file first!) I checked this on many PDFs and they all had it. Here is a file I found free-use: important-linux-commands-you-should-know-obooko.pdf

Please let me know if I can help in any other way. I know changing the pageViewMode is relatively new (been waiting a while for this so thank you), so I would expect a few bugs around it.

stephanrauh commented 5 months ago

I'm afraid I've given up implementing zoom in book mode. I've even documented this in the showcase: http://localhost:4200/extended-pdf-viewer/book-mode

In theory, it shouldn't be so difficult. Maybe I should try again. I we're lucky, I've just missed some of the latest commits of the library: https://nodlik.github.io/StPageFlip/

BTW, Kavita looks nice!

majora2007 commented 5 months ago

Thanks. Ahh I must have missed that on the site. Hmm book mode seems to really need zoom level from what I've tested, else parts of the pages will be rendered offscreen.

Can you point me in the right direction in the code? I can at least take a look into it. I think my users would really enjoy the reading mode on tablet/desktops.

Or is it possible to set the zoom level from javascript? I didn't see any way to do that. By setting zoom level to automatic, it 98% of the time works on book mode. (But since i have best fit by default, it usually doesn't work).

stephanrauh commented 5 months ago

It's all in this file: https://github.com/stephanrauh/pdf.js/blob/42e2a15eb689d25ca9a065efe2a5eb10fbfadd04/web/pdf_viewer.js#L468 (and scan for "book").

I've copied the page flip library into the source code. It was buggy and seemed to be abandoned. You find it here: https://github.com/stephanrauh/pdf.js/blob/bleeding-edge/web/page-flip.module.js

The problem with the page flip library is it modifies the DOM tree. So I can't simply destroy and re-initialize it because the library uses the original DOM tree as input. We'd have to restore the DOM tree first. I wonder why I never thought about this option before - it just seemed to complicated.

tranvannhan commented 3 weeks ago

I'm afraid I've given up implementing zoom in book mode. I've even documented this in the showcase: http://localhost:4200/extended-pdf-viewer/book-mode

In theory, it shouldn't be so difficult. Maybe I should try again. I we're lucky, I've just missed some of the latest commits of the library: https://nodlik.github.io/StPageFlip/

BTW, Kavita looks nice!

@stephanrauh I really like your library! I have a few questions. Could you help me?

  1. I need to view a PDF in book mode on mobile, similar to the StPageFlip library. How can I do that?
  2. Is there a way to create annotations in book mode? Thank you so much!
stephanrauh commented 3 weeks ago

@tranvannhan You can use ngx-extended-pdf-viewer to display the PDF file in book mode on a cell phone. It's not perfect, but it works. If you want to implement your own solution, that's probably not too easy. Maybe https://github.com/RaffaeleMorganti/pdf-viewer is your friend.

tranvannhan commented 3 weeks ago

@tranvannhan You can use ngx-extended-pdf-viewer to display the PDF file in book mode on a cell phone. It's not perfect, but it works. If you want to implement your own solution, that's probably not too easy. Maybe https://github.com/RaffaeleMorganti/pdf-viewer is your friend.

@stephanrauh That's wonderful, thank you!