adjustments to styles & selections

huridocs · Dec 18, 2024 · 4df7c6e · 4df7c6e
1 parent 58a7f4d
commit 4df7c6e
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 42 deletions.
diff --git a/app/react/App/scss/elements/_pdfViewer.scss b/app/react/App/scss/elements/_pdfViewer.scss
@@ -1,5 +1,18 @@
 #pdf-container {
+  margin: auto;
+  width: fit-content;
+
+  .pdf-page {
+    position: relative;
+    width: fit-content;
+  }
+
   & .canvasWrapper {
+    margin: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+
     & canvas {
       margin: 0;
       display: block;

diff --git a/app/react/PDF/components/PDF.js b/app/react/PDF/components/PDF.js
@@ -148,22 +148,22 @@ class PDF extends Component {
 
   render() {
     return (
-      <div
-        ref={ref => {
-          this.pdfContainer = ref;
-        }}
-        style={this.props.style}
-        id="pdf-container"
+      <HandleTextSelection
+        onSelect={this.props.onTextSelection}
+        onDeselect={this.props.onTextDeselection}
       >
-        <HandleTextSelection
-          onSelect={this.props.onTextSelection}
-          onDeselect={this.props.onTextDeselection}
+        <div
+          ref={ref => {
+            this.pdfContainer = ref;
+          }}
+          style={this.props.style}
+          id="pdf-container"
         >
           {(() => {
             const pages = [];
             for (let page = 1; page <= this.state.pdf.numPages; page += 1) {
               pages.push(
-                <div className="page-wrapper" key={page}>
+                <div className="page-page" key={page}>
                   <SelectionRegion regionId={page.toString()}>
                     <PDFPage
                       onUnload={this.pageUnloaded}
@@ -173,16 +173,16 @@ class PDF extends Component {
                       page={page}
                       pdf={this.state.pdf}
                       highlightReference={this.props.highlightReference}
-                      containerWidth={this.pdfContainer?.clientWidth}
+                      containerWidth={document.getElementById(this.props.pdfParentId).clientWidth}
                     />
                   </SelectionRegion>
                 </div>
               );
             }
             return pages;
           })()}
-        </HandleTextSelection>
-      </div>
+        </div>
+      </HandleTextSelection>
     );
   }
 }
@@ -209,6 +209,7 @@ PDF.propTypes = {
   onLoad: PropTypes.func.isRequired,
   style: PropTypes.object,
   highlightReference: PropTypes.func,
+  pdfParentId: PropTypes.string.isRequired,
 };
 
 export default PDF;
diff --git a/app/react/PDF/components/PDFPage.js b/app/react/PDF/components/PDFPage.js
@@ -115,11 +115,11 @@ class PDFPage extends Component {
       this.setState({ rendered: true });
       this.props.pdf.getPage(this.props.page).then(page => {
         const originalViewport = page.getViewport({ scale: 1 });
-        const viewPortScale = calculateScaling(originalViewport.width, this.props.containerWidth);
-        const defaultViewport = page.getViewport({ scale: viewPortScale });
-        const scale = viewPortScale / PDFJS.PixelsPerInch.PDF_TO_CSS_UNITS;
-
-        atomStore.set(pdfScaleAtom, scale);
+        const scale = calculateScaling(
+          originalViewport.width * PDFJS.PixelsPerInch.PDF_TO_CSS_UNITS,
+          this.props.containerWidth
+        );
+        const defaultViewport = page.getViewport({ scale });
 
         this.pdfPageView = new PDFJS.PDFPageView({
           container: this.pageContainer,
@@ -134,6 +134,7 @@ class PDFPage extends Component {
         this.pdfPageView
           .draw()
           .then(() => {
+            atomStore.set(pdfScaleAtom, scale);
             if (this._mounted) {
               this.setState({ height: this.pdfPageView.viewport.height });
             }
@@ -151,7 +152,7 @@ class PDFPage extends Component {
     return (
       <div
         id={`page-${this.props.page}`}
-        className="doc-page"
+        className="pdf-page"
         ref={ref => {
           this.pageContainer = ref;
         }}

diff --git a/app/react/V2/Components/PDFViewer/PDF.tsx b/app/react/V2/Components/PDFViewer/PDF.tsx
@@ -103,8 +103,8 @@ const PDF = ({
             return (
               <div
                 key={`page-${regionId}`}
-                className="w-fit m-auto relative"
                 id={`page-${regionId}-container`}
+                className="pdf-page"
                 ref={shouldScrollToPage ? scrollToRef : undefined}
               >
                 <SelectionRegion regionId={regionId}>

diff --git a/app/react/V2/Components/PDFViewer/PDFPage.tsx b/app/react/V2/Components/PDFViewer/PDFPage.tsx
@@ -59,17 +59,19 @@ const PDFPage = ({ pdf, page, containerWidth, highlights }: PDFPageProps) => {
     if (pageContainerRef.current && pdfPage) {
       const currentContainer = pageContainerRef.current;
       const originalViewport = pdfPage.getViewport({ scale: 1 });
-      const viewPortScale = calculateScaling(originalViewport.width, containerWidth);
-      const defaultViewport = pdfPage.getViewport({ scale: viewPortScale });
-      const scale = viewPortScale / PDFJS.PixelsPerInch.PDF_TO_CSS_UNITS;
-
-      setPdfScale(scale);
+      const scale = calculateScaling(
+        originalViewport.width * PDFJS.PixelsPerInch.PDF_TO_CSS_UNITS,
+        containerWidth
+      );
+      const defaultViewport = pdfPage.getViewport({ scale });
 
       const handlePlaceHolder = () => {
         currentContainer.style.height = `${defaultViewport.height}px`;
         currentContainer.style.width = `${defaultViewport.width}px`;
       };
 
+      setPdfScale(scale);
+
       if (isVisible) {
         const pageViewer = new PDFJSViewer.PDFPageView({
           container: currentContainer,
@@ -79,7 +81,9 @@ const PDFPage = ({ pdf, page, containerWidth, highlights }: PDFPageProps) => {
           annotationMode: 0,
           eventBus: new EventBus(),
         });
+
         pageViewer.setPdfPage(pdfPage);
+
         pageViewer.draw().catch((e: Error) => setError(e.message));
       }
 
@@ -94,7 +98,7 @@ const PDFPage = ({ pdf, page, containerWidth, highlights }: PDFPageProps) => {
   }
 
   return (
-    <div ref={pageContainerRef}>
+    <div ref={pageContainerRef} className="pdf-page">
       {isVisible &&
         highlights?.map(highlight => {
           const scaledHightlight = {

diff --git a/app/react/V2/Routes/Settings/IX/components/PDFSidepanel.tsx b/app/react/V2/Routes/Settings/IX/components/PDFSidepanel.tsx
@@ -22,7 +22,7 @@ import { secondsToISODate } from 'V2/shared/dateHelpers';
 import { Button, Sidepanel } from 'V2/Components/UI';
 import { InputField, MultiselectList, MultiselectListOption } from 'V2/Components/Forms';
 import { PDF, selectionHandlers } from 'V2/Components/PDFViewer';
-import { notificationAtom, thesauriAtom } from 'V2/atoms';
+import { notificationAtom, pdfScaleAtom, thesauriAtom } from 'V2/atoms';
 import { Highlights } from '../types';
 
 const SELECT_TYPES = ['select', 'multiselect', 'relationship'];
@@ -152,6 +152,7 @@ const PDFSidepanel = ({
   const [selectAndSearch, setSelectAndSearch] = useState(false);
   const [selectAndSearchValue, setSelectAndSearchValue] = useState<string | undefined>();
   const [options, setOptions] = useState<MultiselectListOption[]>([]);
+  const pdfScalingValue = useAtomValue(pdfScaleAtom);
 
   useEffect(() => {
     if (suggestion) {

diff --git a/app/react/Viewer/components/Document.js b/app/react/Viewer/components/Document.js
@@ -93,7 +93,7 @@ class Document extends Component {
 
   handleOver() {}
 
-  renderPDF(file) {
+  renderPDF(file, pdfContainerParentId) {
     if (!file._id) {
       return <Loader />;
     }
@@ -111,14 +111,16 @@ class Document extends Component {
         highlightReference={this.highlightReference}
         activeReference={this.props.activeReference}
         key={file.filename}
+        pdfParentId={pdfContainerParentId}
       />
     );
   }
 
   render() {
     const { file } = this.props;
-
     const Header = this.props.header;
+    const pdfContainerParentId = `${this.props.doc.get('sharedId')}-pages`;
+
     return (
       <div>
         <div
@@ -129,12 +131,11 @@ class Document extends Component {
           <Header />
           <div
             className="pages"
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            ref={ref => (this.pagesContainer = ref)}
+            id={pdfContainerParentId}
             onMouseOver={this.handleOver.bind(this)}
             onClick={this.handleClick}
           >
-            {this.renderPDF(file)}
+            {this.renderPDF(file, pdfContainerParentId)}
           </div>
         </div>
       </div>

diff --git a/app/react/Viewer/scss/document.scss b/app/react/Viewer/scss/document.scss
@@ -144,16 +144,6 @@
   background: transparent;
 }
 
-.doc-page {
-  width: fit-content;
-  position: relative;
-}
-
-.page-wrapper {
-  margin: 0 auto 30px !important;
-  width: fit-content;
-}
-
 .page {
   position: relative;
   background: $c-white;