From ce9767b3a090471de712ac43455b0d6c4823860f Mon Sep 17 00:00:00 2001
From: Mercy <mercy@huridocs.org>
Date: Wed, 22 Jan 2025 13:33:43 -0500
Subject: [PATCH] 7561 - PDF view pagination for small zoom level (#7606)

* forces loading of partially visible pages

* limit forcing of pagination over partial visible pages only for explicit navigation

* reverts added test due change of approach
---
 app/react/Viewer/PDFView.js                         |  4 ++--
 app/react/Viewer/actions/specs/uiActions.spec.js    | 13 +++++++++++++
 app/react/Viewer/actions/uiActions.js               |  3 ++-
 app/react/Viewer/components/Paginator.js            |  4 ++--
 app/react/Viewer/components/specs/Paginator.spec.js |  6 +++---
 app/react/Viewer/specs/PDFView.spec.js              |  2 +-
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/react/Viewer/PDFView.js b/app/react/Viewer/PDFView.js
index cd8774d351..58acaca0c3 100644
--- a/app/react/Viewer/PDFView.js
+++ b/app/react/Viewer/PDFView.js
@@ -79,12 +79,12 @@ class PDFViewComponent extends Component {
     }
   }
 
-  changePage(nextPage) {
+  changePage(nextPage, force = false) {
     const { raw = 'false' } = searchParamsFromSearchParams(this.props.searchParams);
 
     const notRaw = String(raw).toLowerCase() === 'false';
     if (notRaw) {
-      return scrollToPage(nextPage);
+      return scrollToPage(nextPage, 50, force);
     }
 
     return this.changeBrowserHistoryPage(nextPage, notRaw);
diff --git a/app/react/Viewer/actions/specs/uiActions.spec.js b/app/react/Viewer/actions/specs/uiActions.spec.js
index 8db46f8e76..8cb834f321 100644
--- a/app/react/Viewer/actions/specs/uiActions.spec.js
+++ b/app/react/Viewer/actions/specs/uiActions.spec.js
@@ -262,6 +262,19 @@ describe('Viewer uiActions', () => {
     });
   });
 
+  describe('scrollToPage', () => {
+    it('should scroll to the page passed forcing the load', async () => {
+      spyOn(scroller, 'to').and.callFake(async () => Promise.resolve());
+      actions.scrollToPage(3, 1, true);
+      expect(scroller.to).toHaveBeenCalledWith('.document-viewer div#page-3', '.document-viewer', {
+        dividerOffset: 1,
+        duration: 1,
+        force: true,
+        offset: 50,
+      });
+    });
+  });
+
   describe('highlightSnippet', () => {
     it('should unmark all and mark snippets passed only once (only the ones for the pages being rendered)', () => {
       const container = document.createElement('div');
diff --git a/app/react/Viewer/actions/uiActions.js b/app/react/Viewer/actions/uiActions.js
index 13ea9fb916..e5cf9284e0 100644
--- a/app/react/Viewer/actions/uiActions.js
+++ b/app/react/Viewer/actions/uiActions.js
@@ -114,11 +114,12 @@ export function highlightSnippet(snippet) {
   });
 }
 
-export function scrollToPage(page, duration = 50) {
+export function scrollToPage(page, duration = 50, force = false) {
   scroller.to(`.document-viewer div#page-${page}`, '.document-viewer', {
     duration,
     dividerOffset: 1,
     offset: 50,
+    force,
   });
 }
 
diff --git a/app/react/Viewer/components/Paginator.js b/app/react/Viewer/components/Paginator.js
index f98a73f3a7..f59f3033ce 100644
--- a/app/react/Viewer/components/Paginator.js
+++ b/app/react/Viewer/components/Paginator.js
@@ -20,7 +20,7 @@ const Paginator = ({ page = 1, totalPages = 1, onPageChange = () => {} }) => {
         queryParams={{ page: prevPage }}
         onClick={e => {
           e.preventDefault();
-          onPageChange(prevPage);
+          onPageChange(prevPage, true);
         }}
         {...disableButton(page, 1)}
       >
@@ -31,7 +31,7 @@ const Paginator = ({ page = 1, totalPages = 1, onPageChange = () => {} }) => {
         queryParams={{ page: nextPage }}
         onClick={e => {
           e.preventDefault();
-          onPageChange(nextPage);
+          onPageChange(nextPage, true);
         }}
         {...disableButton(page, totalPages)}
       >
diff --git a/app/react/Viewer/components/specs/Paginator.spec.js b/app/react/Viewer/components/specs/Paginator.spec.js
index 15ee01a937..d53c6ed949 100644
--- a/app/react/Viewer/components/specs/Paginator.spec.js
+++ b/app/react/Viewer/components/specs/Paginator.spec.js
@@ -77,7 +77,7 @@ describe('Paginator', () => {
   });
 
   describe('when passing onPageChange callback', () => {
-    it('should execute callback on prev/next passing the page selecte', () => {
+    it('should execute callback on prev/next passing the adjacent page forcing navigation for partially visible pages', () => {
       page = 5;
       const props = {
         totalPages: 25,
@@ -91,13 +91,13 @@ describe('Paginator', () => {
         .find(CurrentLocationLink)
         .at(0)
         .simulate('click', { preventDefault: () => {} });
-      expect(props.onPageChange).toHaveBeenCalledWith(4);
+      expect(props.onPageChange).toHaveBeenCalledWith(4, true);
 
       component
         .find(CurrentLocationLink)
         .at(1)
         .simulate('click', { preventDefault: () => {} });
-      expect(props.onPageChange).toHaveBeenCalledWith(6);
+      expect(props.onPageChange).toHaveBeenCalledWith(6, true);
     });
   });
 });
diff --git a/app/react/Viewer/specs/PDFView.spec.js b/app/react/Viewer/specs/PDFView.spec.js
index 32ae116b5d..45ac02ace4 100644
--- a/app/react/Viewer/specs/PDFView.spec.js
+++ b/app/react/Viewer/specs/PDFView.spec.js
@@ -271,7 +271,7 @@ describe('PDFView', () => {
         render();
         component.find({ page: 15 }).at(0).props().changePage(16);
         expect(mockNavigate).not.toHaveBeenCalled();
-        expect(uiActions.scrollToPage).toHaveBeenCalledWith(16);
+        expect(uiActions.scrollToPage).toHaveBeenCalledWith(16, 50, false);
       });
     });
   });