Merge remote-tracking branch 'origin/staging' into development

Author: Zasa-san

app/react/V2/Components/PDFViewer/PDF.tsx

@@ -4,11 +4,14 @@ import { SelectionRegion, HandleTextSelection } from '@huridocs/react-text-selec
 import { TextSelection } from '@huridocs/react-text-selection-handler/dist/TextSelection';
 import { PDFDocumentProxy } from 'pdfjs-dist';
 import { Translate } from 'app/I18N';
-import { PDFJS, CMAP_URL, EventBus, events, OnPageChagenEventHandler } from './pdfjs';
+import { PDFJS, CMAP_URL, EventBus } from './pdfjs';
 import { TextHighlight } from './types';
 import { triggerScroll } from './functions/helpers';
+import { pdfEventBus } from './events';
 
-const PDFPage = loadable(async () => import(/* webpackChunkName: "LazyLoadPDFPage" */ './PDFPage'));
+const PDFPage = loadable(
+  async () => (await import(/* webpackChunkName: "LazyLoadPDFPage" */ './PDFPage')).PDFPage
+);
 
 const eventBus = new EventBus();
 
@@ -17,8 +20,6 @@ interface PDFProps {
   highlights?: { [page: string]: TextHighlight[] };
   onSelect?: (selection: TextSelection) => any;
   onDeselect?: () => any;
-  onPageChange?: (page: number) => void;
-  scrollToPage?: string;
   size?: { height?: string; width?: string; overflow?: string };
 }
 
@@ -30,16 +31,8 @@ const getPDFFile = async (fileUrl: string) =>
     isEvalSupported: false,
   }).promise;
 
-const PDF = ({
-  fileUrl,
-  highlights,
-  onSelect = () => undefined,
-  onDeselect,
-  onPageChange,
-  scrollToPage,
-  size,
-}: PDFProps) => {
-  const scrollToRef = useRef<HTMLDivElement>(null);
+const PDF = ({ fileUrl, highlights, onSelect = () => undefined, onDeselect, size }: PDFProps) => {
+  const pageRefsMap = useRef<{ [key: string]: HTMLDivElement | null }>({});
   const pdfContainerRef = useRef<HTMLDivElement>(null);
   const [pdf, setPDF] = useState<PDFDocumentProxy>();
   const [error, setError] = useState<string>();
@@ -105,34 +98,25 @@ const PDF = ({
   }, []);
 
   useEffect(() => {
-    let animationFrameId = 0;
-    let timeoutId: NodeJS.Timeout;
+    if (pdf && containerWidth) {
+      let animationFrameId = 0;
 
-    if (pdf && scrollToPage) {
-      timeoutId = setTimeout(() => {
-        animationFrameId = triggerScroll(scrollToRef, animationFrameId);
-      }, 100);
-    }
+      const onScrollToPageHandler = (pageNumber: number = 1) => {
+        const pageRef = { current: pageRefsMap.current[pageNumber.toString()] };
+        animationFrameId = triggerScroll(pageRef, animationFrameId);
+      };
 
-    return () => {
-      clearTimeout(timeoutId);
-      cancelAnimationFrame(animationFrameId);
-    };
-  }, [scrollToPage, pdf]);
-
-  useEffect(() => {
-    const handlePageChange: OnPageChagenEventHandler = page => {
-      if (onPageChange) {
-        onPageChange(page);
-      }
-    };
+      const { unsubscribe } = pdfEventBus.on('goToPage', onScrollToPageHandler);
+      pdfEventBus.dispatch('pdfReady');
 
-    eventBus.on(events.ON_PAGE_CHANGE, handlePageChange);
+      return () => {
+        cancelAnimationFrame(animationFrameId);
+        unsubscribe();
+      };
+    }
 
-    return () => {
-      eventBus.off(events.ON_PAGE_CHANGE, handlePageChange);
-    };
-  }, [onPageChange]);
+    return () => undefined;
+  }, [pdf, containerWidth]);
 
   if (error) {
     return <div>{error}</div>;
@@ -145,13 +129,14 @@ const PDF = ({
           Array.from({ length: pdf.numPages }, (_, index) => index + 1).map(number => {
             const regionId = number.toString();
             const pageHighlights = highlights ? highlights[regionId] : undefined;
-            const shouldScrollToPage = scrollToPage === regionId;
 
             return (
               <div
                 key={`page-${regionId}`}
                 id={`page-${regionId}-container`}
-                ref={shouldScrollToPage ? scrollToRef : undefined}
+                ref={el => {
+                  pageRefsMap.current[regionId] = el;
+                }}
               >
                 <SelectionRegion regionId={regionId}>
                   <PDFPage
@@ -174,4 +159,4 @@ const PDF = ({
 };
 
 export type { PDFProps };
-export default PDF;
+export { PDF };

app/react/V2/Components/PDFViewer/PDFPage.tsx

@@ -4,10 +4,11 @@ import { PDFDocumentProxy, PDFPageProxy } from 'pdfjs-dist';
 import { Highlight } from '@huridocs/react-text-selection-handler';
 import { useAtom } from 'jotai';
 import { pdfScaleAtom } from 'V2/atoms';
-import { EventBus, PDFJSViewer, PDFJS, events } from './pdfjs';
+import { EventBus, PDFJSViewer, PDFJS } from './pdfjs';
 import { TextHighlight } from './types';
 import { calculateScaling } from './functions/calculateScaling';
 import { adjustSelectionsToScale } from './functions/handleTextSelection';
+import { pdfEventBus } from './events';
 
 interface PDFPageProps {
   pdf: PDFDocumentProxy;
@@ -64,7 +65,7 @@ const PDFPage = ({ pdf, page, eventBus, containerWidth, highlights }: PDFPagePro
                 pageViewer
                   .draw()
                   .then(() => {
-                    eventBus.dispatch(events.ON_PAGE_CHANGE, pdfPage.pageNumber);
+                    pdfEventBus.dispatch('onPageChange', pdfPage.pageNumber);
                   })
                   .catch(e => {
                     setError(e.message);
@@ -149,4 +150,4 @@ const PDFPage = ({ pdf, page, eventBus, containerWidth, highlights }: PDFPagePro
   );
 };
 
-export default PDFPage;
+export { PDFPage };

app/react/V2/Components/PDFViewer/events.ts

@@ -0,0 +1,54 @@
+type EventType = 'onPageChange' | 'goToPage' | 'pdfReady';
+
+interface EventPayloadMap {
+  onPageChange: number;
+  goToPage: number;
+  pdfReady: void;
+}
+
+interface Subscription {
+  unsubscribe: () => void;
+}
+
+type EventCallback<T extends EventType> = (payload?: EventPayloadMap[T]) => void;
+
+class EventBus {
+  private listeners: Map<EventType, Set<EventCallback<any>>>;
+
+  constructor() {
+    this.listeners = new Map();
+  }
+
+  on<T extends EventType>(eventType: T, callback: EventCallback<T>): Subscription {
+    if (!this.listeners.has(eventType)) {
+      this.listeners.set(eventType, new Set());
+    }
+
+    this.listeners.get(eventType)?.add(callback);
+
+    return {
+      unsubscribe: () => {
+        const callbacks = this.listeners.get(eventType);
+        if (callbacks) {
+          callbacks.delete(callback);
+        }
+      },
+    };
+  }
+
+  dispatch<T extends EventType>(eventType: T, payload?: EventPayloadMap[T]) {
+    const callbacks = this.listeners.get(eventType);
+
+    if (callbacks) {
+      callbacks.forEach(callback => callback(payload));
+    }
+  }
+
+  clear() {
+    this.listeners.clear();
+  }
+}
+
+const pdfEventBus = new EventBus();
+
+export { pdfEventBus };

app/react/V2/Components/PDFViewer/index.ts

@@ -1,9 +1,14 @@
 import loadable from '@loadable/component';
+
 import * as selectionHandlers from './functions/handleTextSelection';
 
-const PDF = loadable(async () => import(/* webpackChunkName: "LazyLoadPDF" */ './PDF'), {
-  ssr: false,
-});
+const PDF = loadable(
+  async () => (await import(/* webpackChunkName: "LazyLoadPDF" */ './PDF')).PDF,
+  {
+    ssr: false,
+  }
+);
 
+export { pdfEventBus } from './events';
 export { PDF, selectionHandlers };
 export { calculateScaling } from './functions/calculateScaling';

app/react/V2/Components/PDFViewer/pdfjs.ts

@@ -2,10 +2,6 @@ import * as pdfJsDist from 'pdfjs-dist';
 import * as viewer from 'pdfjs-dist/web/pdf_viewer.mjs';
 import 'pdfjs-dist/web/pdf_viewer.css';
 
-type OnPageChagenEventHandler = (page: number) => void;
-
-const events = { ON_PAGE_CHANGE: 'onPageChange' };
-
 let pdfjs = pdfJsDist;
 const PDFJSViewer = viewer;
 const { EventBus } = viewer;
@@ -28,5 +24,4 @@ await pdfjsLoader();
 
 const PDFJS = pdfjs;
 
-export type { OnPageChagenEventHandler };
-export { PDFJS, PDFJSViewer, EventBus, events, CMAP_URL };
+export { PDFJS, PDFJSViewer, EventBus, CMAP_URL };

app/react/V2/Components/PDFViewer/specs/PDF.spec.tsx

@@ -7,8 +7,9 @@ import { render, act, queryAllByAttribute, cleanup, RenderResult } from '@testin
 import { configMocks, mockIntersectionObserver } from 'jsdom-testing-mocks';
 import { pdfScaleAtom } from 'V2/atoms';
 import { TestAtomStoreProvider } from 'V2/testing';
-import PDF, { PDFProps } from '../PDF';
+import { PDF, PDFProps } from '../PDF';
 import * as helpers from '../functions/helpers';
+import { pdfEventBus } from '../events';
 
 configMocks({ act });
 const oberserverMock = mockIntersectionObserver();
@@ -65,8 +66,9 @@ jest.mock('../pdfjs.ts', () => ({
       return {
         promise: Promise.resolve({
           numPages: 5,
-          getPage: jest.fn(async () =>
+          getPage: jest.fn(async (pageNum: number) =>
             Promise.resolve({
+              pageNumber: pageNum,
               getViewport: () => ({ width: 100, height: 300 }),
             })
           ),
@@ -104,10 +106,10 @@ jest.mock('../pdfjs.ts', () => ({
 describe('PDF', () => {
   let renderResult: RenderResult;
 
-  const renderComponet = (scrollToPage?: PDFProps['scrollToPage']) => {
+  const renderComponet = () => {
     renderResult = render(
       <TestAtomStoreProvider initialValues={[[pdfScaleAtom, 1.5]]}>
-        <PDF fileUrl="url/of/file.pdf" scrollToPage={scrollToPage} highlights={highlights} />
+        <PDF fileUrl="url/of/file.pdf" highlights={highlights} />
       </TestAtomStoreProvider>
     );
   };
@@ -167,15 +169,99 @@ describe('PDF', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should scroll to page', async () => {
-    jest.useFakeTimers();
-    await act(() => {
-      renderComponet('2');
+  describe('pdfEventBus', () => {
+    beforeEach(() => {
+      jest.spyOn(pdfEventBus, 'dispatch');
+    });
+
+    it('should dispatch pdfReady event when PDF and containerWidth are ready', async () => {
+      await act(() => {
+        renderComponet();
+      });
+
+      expect(pdfEventBus.dispatch).toHaveBeenCalledWith('pdfReady');
     });
-    jest.advanceTimersByTime(200);
 
-    expect(helpers.triggerScroll).toHaveBeenCalledTimes(1);
-    jest.useRealTimers();
+    it('should dispatch onPageChange event when a page is rendered', async () => {
+      const dispatchSpy = jest.spyOn(pdfEventBus, 'dispatch');
+
+      await act(() => {
+        renderComponet();
+      });
+
+      const { container } = renderResult;
+      const page1 = queryAllByAttribute('class', container, 'pdf-page')[0];
+
+      await act(() => {
+        oberserverMock.enterNode(page1);
+      });
+
+      expect(mockPageRender).toHaveBeenCalled();
+      expect(dispatchSpy).toHaveBeenCalledWith('onPageChange', 1);
+    });
+
+    it('should scroll to page when goToPage event is dispatched', async () => {
+      await act(() => {
+        renderComponet();
+      });
+
+      const { container } = renderResult;
+      const page3Container = container.querySelector('#page-3-container') as HTMLDivElement;
+
+      act(() => {
+        pdfEventBus.dispatch('goToPage', 3);
+      });
+
+      expect(helpers.triggerScroll).toHaveBeenCalledWith({ current: page3Container }, 0);
+    });
+
+    it('should unsubscribe from goToPage event on unmount', async () => {
+      const mockCallback = jest.fn();
+
+      await act(() => {
+        renderComponet();
+      });
+
+      pdfEventBus.on('goToPage', mockCallback);
+
+      cleanup();
+
+      act(() => {
+        pdfEventBus.dispatch('goToPage', 1);
+      });
+
+      expect(mockCallback).toHaveBeenCalledTimes(1);
+      expect(helpers.triggerScroll).not.toHaveBeenCalled();
+    });
+
+    it('should handle multiple PDF instances without listener accumulation', async () => {
+      let unmountInstanceOne: RenderResult['unmount'];
+
+      await act(async () => {
+        const result = render(
+          <TestAtomStoreProvider initialValues={[[pdfScaleAtom, 1.5]]}>
+            <PDF fileUrl="url/of/file1.pdf" highlights={highlights} />
+          </TestAtomStoreProvider>
+        );
+        unmountInstanceOne = result.unmount;
+      });
+
+      await act(async () => {
+        render(
+          <TestAtomStoreProvider initialValues={[[pdfScaleAtom, 1.5]]}>
+            <PDF fileUrl="url/of/file2.pdf" highlights={highlights} />
+          </TestAtomStoreProvider>
+        );
+      });
+
+      unmountInstanceOne!();
+
+      act(() => {
+        pdfEventBus.dispatch('goToPage', 1);
+      });
+
+      expect(helpers.triggerScroll).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('intersection observer', () => {