search

allenai / pdf-component-library

44 stars 4 forks source link

TOC section redirection #63

Closed yensung closed 2 years ago

yensung commented 2 years ago

Description

https://github.com/allenai/scholar/issues/29954

The Outline component provided by react-pdf doesn't pass dest information to its event handler when it is being clicked. Without the argument, it is hard to scroll a pdf to specific section precisely. This PR addresses the issue by creating customized Outline component and using it for displaying table of contents as well as section redirection. Works include:

  1. Created <Outline> and <OutlineItem> components. When any titles are clicked in TOC, the dest would be passed to handler function so we can use it for redirection.
  2. Modified <DocumentContext> so it can store pdfDocProxy object from <Document> and pass it to <Outline> .
  3. Implemented scroll function which involves coordinate transformation between PDF docs and web pages

Test plan

Manually test. When paper is scaled larger or smaller, it can still scroll to section precisely. When paper is rotated, it also works, but may need to add offsets for showing titles.

Screenshot

Dec-20-2021 20-52-26

Dec-21-2021 14-02-23

carolinepaulic commented 2 years ago

Ok, that's all the comments I have for this PR. Just get a few minor items wrapped up and this will be good to go.

This was a tricky bug to fix but I think you did a great job of providing a well thought out solution. Especially since it covers edge cases such as page rotation!

yensung commented 2 years ago

Update: Added several unit test cases into ContextProvider.test.tsx and scroll.test.ts. For whether using className prop in Outline and OutlineItem, I'll leave them to be addressed in this ticket. Currently the expand button and annotations are not implemented in Outline. I think we'll have a more clear sight to it with those components implemented.

yensung commented 2 years ago

Changes are merged in this PR: https://github.com/allenai/pdf-component-library/pull/83