Update react-pdf and improve PDFViewer

2025-06-26 13:00:39 +03:00 · 2024-06-07 15:05:08 +03:00 · 2024-06-07 15:05:08 +03:00 · 53e75b9ddd
commit 53e75b9ddd
parent feb9618d44
8 changed files with 57 additions and 35 deletions
--- a/rsconcept/frontend/package-lock.json
+++ b/rsconcept/frontend/package-lock.json
@ -22,7 +22,7 @@
        "react-icons": "^4.12.0",
        "react-intl": "^6.6.8",
        "react-loader-spinner": "^5.4.5",
-        "react-pdf": "^7.7.3",
+        "react-pdf": "^9.0.0",
        "react-router-dom": "^6.23.1",
        "react-select": "^5.8.0",
        "react-tabs": "^6.0.2",
@ -8972,27 +8972,27 @@
        "node": ">=8"
      }
    },
-    "node_modules/path2d-polyfill": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
-      "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
+    "node_modules/path2d": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.0.tgz",
+      "integrity": "sha512-KdPAykQX6kmLSOO6Jpu2KNcCED7CKjmaBNGGNuctOsG0hgYO1OdYQaan6cYXJiG0WmXOwZZPILPBimu5QAIw3A==",
      "license": "MIT",
      "optional": true,
      "engines": {
-        "node": ">=8"
+        "node": ">=6"
      }
    },
    "node_modules/pdfjs-dist": {
-      "version": "3.11.174",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
-      "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
+      "version": "4.3.136",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.3.136.tgz",
+      "integrity": "sha512-gzfnt1qc4yA+U46golPGYtU4WM2ssqP2MvFjKga8GEKOrEnzRPrA/9jogLLPYHiA3sGBPJ+p7BdAq+ytmw3jEg==",
      "license": "Apache-2.0",
      "engines": {
        "node": ">=18"
      },
      "optionalDependencies": {
        "canvas": "^2.11.2",
-        "path2d-polyfill": "^2.0.1"
+        "path2d": "^0.2.0"
      }
    },
    "node_modules/picocolors": {
@ -9517,18 +9517,17 @@
      }
    },
    "node_modules/react-pdf": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.7.3.tgz",
-      "integrity": "sha512-a2VfDl8hiGjugpqezBTUzJHYLNB7IS7a2t7GD52xMI9xHg8LdVaTMsnM9ZlNmKadnStT/tvX5IfV0yLn+JvYmw==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.0.0.tgz",
+      "integrity": "sha512-J+pza8R2p9oNEOJOHIQJI4o5rFK7ji7bBl2IvsHvz1OOyphvuzVDo5tOJwWAFAbxYauCH3Kt8jOvcMJUOpxYZQ==",
      "license": "MIT",
      "dependencies": {
        "clsx": "^2.0.0",
        "dequal": "^2.0.3",
        "make-cancellable-promise": "^1.3.1",
        "make-event-props": "^1.6.0",
-        "merge-refs": "^1.2.1",
-        "pdfjs-dist": "3.11.174",
-        "prop-types": "^15.6.2",
+        "merge-refs": "^1.3.0",
+        "pdfjs-dist": "4.3.136",
        "tiny-invariant": "^1.0.0",
        "warning": "^4.0.0"
      },
@ -9536,9 +9535,9 @@
        "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
      },
      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      },
      "peerDependenciesMeta": {
        "@types/react": {
--- a/rsconcept/frontend/package.json
+++ b/rsconcept/frontend/package.json
@ -26,7 +26,7 @@
    "react-icons": "^4.12.0",
    "react-intl": "^6.6.8",
    "react-loader-spinner": "^5.4.5",
-    "react-pdf": "^7.7.3",
+    "react-pdf": "^9.0.0",
    "react-router-dom": "^6.23.1",
    "react-select": "^5.8.0",
    "react-tabs": "^6.0.2",
--- a/rsconcept/frontend/src/app/GlobalProviders.tsx
+++ b/rsconcept/frontend/src/app/GlobalProviders.tsx
@ -11,7 +11,7 @@ import { UsersState } from '@/context/UsersContext';

 import ErrorFallback from './ErrorFallback';

-pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();
+pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();

 const resetState = () => {
  console.log('Resetting state after error fallback');
--- a/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx
+++ b/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx
@ -11,21 +11,23 @@ import Overlay from '../Overlay';
 import PageControls from './PageControls';

 const MAXIMUM_WIDTH = 1000;
-const MINIMUM_WIDTH = 320;
+const MINIMUM_WIDTH = 300;

 interface PDFViewerProps {
  file?: string | ArrayBuffer | Blob;
+  offsetXpx?: number;
+  minWidth?: number;
 }

-function PDFViewer({ file }: PDFViewerProps) {
+function PDFViewer({ file, offsetXpx, minWidth = MINIMUM_WIDTH }: PDFViewerProps) {
  const windowSize = useWindowSize();

  const [pageCount, setPageCount] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);

  const pageWidth = useMemo(() => {
-    return Math.max(MINIMUM_WIDTH, Math.min((windowSize?.width ?? 0) - 10, MAXIMUM_WIDTH));
-  }, [windowSize]);
+    return Math.max(minWidth, Math.min((windowSize?.width ?? 0) - (offsetXpx ?? 0) - 10, MAXIMUM_WIDTH));
+  }, [windowSize, offsetXpx, minWidth]);

  function onDocumentLoadSuccess({ numPages }: PDFDocumentProxy) {
    setPageCount(numPages);
@ -42,14 +44,14 @@ function PDFViewer({ file }: PDFViewerProps) {
        <PageControls pageCount={pageCount} pageNumber={pageNumber} setPageNumber={setPageNumber} />
      </Overlay>
      <Page
-        className='pointer-events-none select-none sm:translate-x-0'
+        className='overflow-hidden pointer-events-none select-none'
        renderTextLayer={false}
        renderAnnotationLayer={false}
        pageNumber={pageNumber}
        width={pageWidth}
        canvasBackground={graphLightT.canvas.background}
      />
-      <Overlay position='bottom-6 left-1/2 -translate-x-1/2' className='flex select-none'>
+      <Overlay position='bottom-3 left-1/2 -translate-x-1/2' className='flex select-none'>
        <PageControls pageCount={pageCount} pageNumber={pageNumber} setPageNumber={setPageNumber} />
      </Overlay>
    </Document>
--- a/rsconcept/frontend/src/components/ui/PDFViewer/PageControls.tsx
+++ b/rsconcept/frontend/src/components/ui/PDFViewer/PageControls.tsx
@ -8,7 +8,7 @@ interface PageControlsProps {

 function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProps) {
  return (
-    <>
+    <div className='flex items-center'>
      <button
        type='button'
        className='clr-hover clr-text-controls'
@ -25,9 +25,9 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
      >
        <IconPageLeft size='1.5rem' />
      </button>
-      <p className='px-3 text-black text-nowrap'>
+      <div className='px-3 text-nowrap'>
        Страница {pageNumber} из {pageCount}
-      </p>
+      </div>
      <button
        type='button'
        className='clr-hover clr-text-controls'
@ -44,7 +44,7 @@ function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProp
      >
        <IconPageLast size='1.5rem' />
      </button>
-    </>
+    </div>
  );
 }

--- a/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
@ -1,3 +1,4 @@
+import useWindowSize from '@/hooks/useWindowSize';
 import { HelpTopic } from '@/models/miscellaneous';

 import HelpAccess from './items/HelpAccess';
@ -33,11 +34,20 @@ import HelpTermGraph from './items/HelpTermGraph';
 import HelpTerminologyControl from './items/HelpTerminologyControl';
 import HelpVersions from './items/HelpVersions';

+// PDF Viewer setup
+const OFFSET_X_SMALL = 32;
+const OFFSET_X_LARGE = 280;
+
+const MIN_SIZE_SMALL = 300;
+const MIN_SIZE_LARGE = 600;
+
 interface TopicPageProps {
  topic: HelpTopic;
 }

 function TopicPage({ topic }: TopicPageProps) {
+  const size = useWindowSize();
+
  if (topic === HelpTopic.MAIN) return <HelpPortal />;

  if (topic === HelpTopic.INTERFACE) return <HelpInterface />;
@ -72,7 +82,13 @@ function TopicPage({ topic }: TopicPageProps) {
  if (topic === HelpTopic.INFO) return <HelpInfo />;
  if (topic === HelpTopic.INFO_RULES) return <HelpRules />;
  if (topic === HelpTopic.INFO_CONTRIB) return <HelpContributors />;
-  if (topic === HelpTopic.INFO_PRIVACY) return <HelpPrivacy />;
+  if (topic === HelpTopic.INFO_PRIVACY)
+    return (
+      <HelpPrivacy
+        offsetXpx={size.isSmall ? OFFSET_X_SMALL : OFFSET_X_LARGE}
+        minWidth={size.isSmall ? MIN_SIZE_SMALL : MIN_SIZE_LARGE}
+      />
+    );
  if (topic === HelpTopic.INFO_API) return <HelpAPI />;

  if (topic === HelpTopic.EXTEOR) return <HelpExteor />;
--- a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
@ -8,7 +8,7 @@ interface ViewTopicProps {

 function ViewTopic({ topic }: ViewTopicProps) {
  return (
-    <AnimateFade key={topic} className='py-2 pl-6 pr-3 mx-auto'>
+    <AnimateFade key={topic} className='px-3 py-2 mx-auto'>
      <TopicPage topic={topic} />
    </AnimateFade>
  );
--- a/rsconcept/frontend/src/pages/ManualsPage/items/HelpPrivacy.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/HelpPrivacy.tsx
@ -1,10 +1,15 @@
 import PDFViewer from '@/components/ui/PDFViewer';
 import { resources } from '@/utils/constants';

-function HelpPrivacy() {
+interface HelpPrivacyProps {
+  offsetXpx: number;
+  minWidth: number;
+}
+
+function HelpPrivacy({ offsetXpx, minWidth }: HelpPrivacyProps) {
  return (
    <div>
-      <PDFViewer file={resources.privacy_policy} />
+      <PDFViewer file={resources.privacy_policy} offsetXpx={offsetXpx} minWidth={minWidth} />
    </div>
  );
 }