better prop for pdf container width + test update

huridocs · Dec 20, 2024 · 2e8b1cc · 2e8b1cc
1 parent 23b6b1f
commit 2e8b1cc
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/app/react/PDF/components/PDF.js b/app/react/PDF/components/PDF.js
@@ -32,6 +32,7 @@ class PDF extends Component {
     this.pageLoading = this.pageLoading.bind(this);
     this.onPageVisible = this.onPageVisible.bind(this);
     this.onPageHidden = this.onPageHidden.bind(this);
+    this.containerWidth = 0;
   }
 
   componentDidMount() {
@@ -42,6 +43,8 @@ class PDF extends Component {
       });
       document.addEventListener('textlayerrendered', this.props.onPageLoaded, { once: true });
     }
+
+    this.containerWidth = this.props.parentRef.current?.clientWidth;
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -173,7 +176,7 @@ class PDF extends Component {
                       page={page}
                       pdf={this.state.pdf}
                       highlightReference={this.props.highlightReference}
-                      containerWidth={document.getElementById(this.props.pdfParentId).clientWidth}
+                      containerWidth={this.containerWidth}
                     />
                   </SelectionRegion>
                 </div>
@@ -209,7 +212,7 @@ PDF.propTypes = {
   onLoad: PropTypes.func.isRequired,
   style: PropTypes.object,
   highlightReference: PropTypes.func,
-  pdfParentId: PropTypes.string.isRequired,
+  parentRef: PropTypes.object.isRequired,
 };
 
 export default PDF;
diff --git a/app/react/PDF/components/specs/PDF.spec.js b/app/react/PDF/components/specs/PDF.spec.js
@@ -30,6 +30,7 @@ describe('PDF', () => {
       file: 'file_url',
       filename: 'original.pdf',
       onLoad: jasmine.createSpy('onLoad'),
+      parentRef: { current: { clientWidth: 500 } },
     };
   });
 

diff --git a/app/react/PDF/components/specs/__snapshots__/PDFPage.spec.js.snap b/app/react/PDF/components/specs/__snapshots__/PDFPage.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`PDFPage render should pass pass proper height when state.height 1`] = `
 <div
-  className="doc-page"
+  className="pdf-page"
   id="page-2"
   style={
     Object {
@@ -14,7 +14,7 @@ exports[`PDFPage render should pass pass proper height when state.height 1`] = `
 
 exports[`PDFPage render should render a div as pageContainer 1`] = `
 <div
-  className="doc-page"
+  className="pdf-page"
   id="page-2"
   style={
     Object {

diff --git a/app/react/Viewer/components/Document.js b/app/react/Viewer/components/Document.js
@@ -2,7 +2,7 @@ import 'app/Viewer/scss/conversion_base.scss';
 import 'app/Viewer/scss/document.scss';
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 
 import { Loader } from 'app/components/Elements/Loader';
 import { PDF } from 'app/PDF';
@@ -29,6 +29,7 @@ class Document extends Component {
     this.onTextSelected = this.onTextSelected.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.highlightReference = this.highlightReference.bind(this);
+    this.containerRef = createRef();
   }
 
   componentDidUpdate(prevProps) {
@@ -93,8 +94,8 @@ class Document extends Component {
 
   handleOver() {}
 
-  renderPDF(file, pdfContainerParentId) {
-    if (!file._id) {
+  renderPDF(file) {
+    if (!file._id && this.containerRef) {
       return <Loader />;
     }
 
@@ -111,15 +112,14 @@ class Document extends Component {
         highlightReference={this.highlightReference}
         activeReference={this.props.activeReference}
         key={file.filename}
-        pdfParentId={pdfContainerParentId}
+        parentRef={this.containerRef}
       />
     );
   }
 
   render() {
     const { file } = this.props;
     const Header = this.props.header;
-    const pdfContainerParentId = `${this.props.doc.get('sharedId')}-pages`;
 
     return (
       <div>
@@ -131,11 +131,11 @@ class Document extends Component {
           <Header />
           <div
             className="pages"
-            id={pdfContainerParentId}
+            ref={this.containerRef}
             onMouseOver={this.handleOver.bind(this)}
             onClick={this.handleClick}
           >
-            {this.renderPDF(file, pdfContainerParentId)}
+            {this.renderPDF(file)}
           </div>
         </div>
       </div>

diff --git a/app/react/Viewer/components/specs/Document.spec.js b/app/react/Viewer/components/specs/Document.spec.js
@@ -8,6 +8,11 @@ import Immutable from 'immutable';
 import { PDF } from 'app/PDF';
 import { Document } from 'app/Viewer/components/Document.js';
 
+jest.mock('V2/atoms', () => ({
+  atomStore: { get: () => 2 },
+}));
+
+// eslint-disable-next-line max-statements
 describe('Document', () => {
   let component;
   let instance;
@@ -116,7 +121,7 @@ describe('Document', () => {
   });
 
   describe('onTextSelected', () => {
-    it('should set the selection changing regionId to page', () => {
+    it('should set the selection changing regionId to page and adjusting based on rendering scale', () => {
       render();
 
       const textSelection = {
@@ -131,8 +136,8 @@ describe('Document', () => {
       expect(props.setSelection).toHaveBeenCalledWith(
         {
           selectionRectangles: [
-            { height: 12, left: 27, page: '51', top: 186, width: 23 },
-            { height: 89, left: 47, page: '52', top: 231, width: 11 },
+            { height: 6, left: 13.5, page: '51', top: 93, width: 11.5 },
+            { height: 44.5, left: 23.5, page: '52', top: 115.5, width: 5.5 },
           ],
           text: 'Wham Bam Shang-A-Lang',
         },