Merge pull request #174 from nakazawakan/fe_fix

PDF機能を完成しました。

backend/package.json

@@ -24,8 +24,8 @@
         "@material-ui/utils": "^5.0.0-beta.0",
         "@mui/icons-material": "^5.2.4",
         "@mui/material": "^5.0.4",
-        "@react-pdf-viewer/core": "^2.10.1",
-        "@react-pdf-viewer/default-layout": "^2.10.1",
+        "@react-pdf-viewer/core": "^3.0.0",
+        "@react-pdf-viewer/default-layout": "^3.0.0",
         "@testing-library/jest-dom": "^5.14.1",
         "apexcharts": "^3.27.3",
         "change-case": "^4.1.2",
@@ -35,10 +35,13 @@
         "formik": "^2.2.9",
         "framer-motion": "^4.1.17",
         "history": "^5.0.0",
+        "install": "^0.13.0",
         "lodash": "^4.17.21",
         "mdb-ui-kit": "^3.9.0",
         "moment": "^2.29.1",
+        "npm": "^8.3.0",
         "numeral": "^2.0.6",
+        "pdfjs-dist": "^2.11.338",
         "prop-types": "^15.7.2",
         "react": "^17.0.2",
         "react-apexcharts": "^1.3.9",

backend/public/css/app.css

@@ -17599,6 +17599,29 @@ a {
   border-width: 3px !important;
 }
 
+.rpv-page-navigation__current-page-input {
+  width: 50px !important;
+}
+.rpv-page-navigation__current-page-input .rpv-core__textbox {
+  padding: 5px 10px !important;
+}
+
+.rpv-default-layout__toolbar {
+  height: 35px !important;
+}
+
+.rpv-default-layout__sidebar {
+  padding-top: 35px !important;
+}
+
+.rpv-default-layout__body {
+  padding-top: 35px !important;
+}
+
+.rpv-core__minimal-button {
+  height: 30px !important;
+}
+
 .react-datepicker__month-container {
   width: 250px;
   font-size: 13px;

backend/resources/js/component/pdf/modal_pdf.jsx

@@ -16,11 +16,6 @@ import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import Container from '@mui/material/Container';
 
-import { Viewer, Worker } from '@react-pdf-viewer/core';
-import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
-import '@react-pdf-viewer/core/lib/styles/index.css';
-import '@react-pdf-viewer/default-layout/lib/styles/index.css';
-
 const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });

backend/resources/js/pages/PDFView.jsx

@@ -2,12 +2,38 @@ import React, {useEffect, useState} from 'react';
 import ReactDOM from 'react-dom';
 import { MobilePDFReader, PDFReader } from 'react-read-pdf';
 
+import { SpecialZoomLevel, Viewer, Worker } from '@react-pdf-viewer/core';
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+
+import '@react-pdf-viewer/core/lib/styles/index.css';
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+import { ScrollMode } from '@react-pdf-viewer/scroll-mode';
 
 const PDFViewer = () => {
 
     const file_name = document.getElementById('pdf-url').value;
     const [url, setURL] = useState('');
 
+    const defaultLayoutPluginInstance = defaultLayoutPlugin({
+        toolbarPlugin: {
+            fullScreenPlugin: {
+                onEnterFullScreen: (zoom) => {
+                    zoom(SpecialZoomLevel.PageFit);
+                    defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode(
+                        ScrollMode.Wrapped
+                    );
+                },
+                onExitFullScreen: (zoom) => {
+                    zoom(SpecialZoomLevel.PageWidth);
+                    defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode(
+                        ScrollMode.Horizontal
+                    );
+                },
+            },
+        },
+    });
+
+
     useEffect(()=>{
         if(file_name == 'default.pdf')
             setURL('/assets/default/'+file_name);
@@ -15,9 +41,20 @@ const PDFViewer = () => {
     }, []);
 
     return (
-        <div>
-            { url && <MobilePDFReader url={url}/> }
-        </div>
+        <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.11.338/build/pdf.worker.js">
+            <div
+                style={{
+                    height: '100vh',
+                }}
+            >
+                { 
+                    url && 
+                        <Viewer fileUrl={url} 
+                            plugins={[defaultLayoutPluginInstance]} 
+                        /> 
+                }
+            </div>
+        </Worker>
     );
 }
 

backend/resources/sass/layouts/_main.scss

@@ -296,4 +296,27 @@ a{
       border-width: 3px !important;
     }
   }
+}
+
+.rpv-page-navigation__current-page-input{
+  width: 50px !important;
+  .rpv-core__textbox{
+    padding: 5px 10px !important;
+  }
+}
+
+.rpv-default-layout__toolbar{
+  height: 35px !important;
+}
+
+.rpv-default-layout__sidebar{
+  padding-top: 35px !important;
+}
+
+.rpv-default-layout__body{
+  padding-top: 35px !important;
+}
+
+.rpv-core__minimal-button{
+  height: 30px !important;
 }