allenai / pdf-component-library

44 stars 4 forks source link

TOC Section Redirection #83

Closed yensung closed 2 years ago

yensung commented 2 years ago

Original PR: https://github.com/allenai/pdf-component-library/pull/63

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