B-26364 Zooming, scrolling, and other issues

[antgmann]

B-26364

Important

This backlog is a downstream dependency on Alex's PR for version 1.4.7 HERE

These changes provide some rather significant adjustments to how we display images, as well as how pdfs appear visually. Because of this, a new minor version (1.5.0) may be appropriate. Amongst the improvements:

• PDFs and Images both now find a 'best fit zoom' by being equal to or slightly less than the width of the container
• PDFs and Images both now have increased zoom steps
• Images will now re-render upon transformation like PDFs do (helps to prevent them from 'spilling over' beyond scrollable overflow)
• Zoom steps are now mapped
• PDFs minor offsets, overflow, and scrolling improvements
• Significant transformation-responsive offset, padding, styling improvements for images

Testing Instructions
These changes are made based upon Alex's changes for 26359, hence the dependency. In order to best test these changes, please check out the B-26364 branch in our repository before testing.
Also, if you want to see a before and after rather than just the after, do step 3 first.

1. Update your local to use "@transcom/react-file-viewer": "git+https://github.com/transcom/react-file-viewer#B-26364-viewer-fit", in package.json
2. Clear and reinstall your npm modules with rm -rf node_modules then yarn install, we don't want a frozen lockfile (rm -rf node_modules && yarn install && ./scripts/copy-react-file-viewer && make client_run)
3. Anywhere in the app upload a handful of images and PDFs that you'll be able to review in the document viewer like orders and navigate to viewing them. Best if also done for PPM docs, payment requests, etc.
4. Verify the center component where the image is displayed fills the space available to it, the vertical scrollbar is flush against the right sidebar, and the horizontal scrollbar is not hidden by the the controls bar at the bottom.
5. Verify that documents load at a reasonable zoom level, are visible, and transform well when rotated and zoomed.

[ajlusk]

Most file types & sizes I've tested seem to be the same or improved but one core scenario is a bit worse. Vertical (but not horizontal) PDFs seem to default to one or two levels too zoomed in, at least is smaller windows.

Improved Comparisons:
Before:

After:

Before:

After:

Worse Comparison:
Before:

After:

After (after having saved a 90 degree rotated view):

I also see the same effect in reverse when I rotate a default horizontal PDF 90 degrees. It goes from appropriate zoom to one zoom level too zoomed in.

[antgmann]

@ajlusk newest commit changes the nearest horizontal zoom level to 95% of the viewer space to instead be 80%. This has no effect on most of the files that already display well (worst case they'll be one step away from optimized where the zoom steps mean less), but ensures a bit of margin shows for docs that are taller/wider. The zoom won't change on rotation, so you still may see the entire horizontal space taken when rotating a portrait pdf, but that's something that hasn't been asked for yet

[ajlusk]

Any reason this is different than the PDF options? Seems you added some values, why not all of them?

[antgmann]

Preface by saying that previously 200% was the zoom max for photos, so really it was just my discretion based on testing, and I could be convinced to change it

I added these just because I found them to be useful when testing smaller images with text. While we could bring it in line with PDFs and allow up to 500% zoom, I don't know that it would really be an added benefit because any text on images small enough to need that kind of zoom would be pretty illegible anyways. Happy to discuss further though

[ajlusk]

@ajlusk newest commit changes the nearest horizontal zoom level to 95% of the viewer space to instead be 80%. This has no effect on most of the files that already display well (worst case they'll be one step away from optimized where the zoom steps mean less), but ensures a bit of margin shows for docs that are taller/wider. The zoom won't change on rotation, so you still may see the entire horizontal space taken when rotating a portrait pdf, but that's something that hasn't been asked for yet

This all looks good. Not expecting it to adjust zoom on rotation but it is adjusting zoom on saving a rotation so that's nice.