From e0708eceaa862b360bd956cf64452a4f1aa59b62 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Tue, 22 Aug 2023 14:54:59 -0600 Subject: [PATCH 01/19] Calculating the devicePixelRatio for the pdf to display with less pixels than the limit of the platform Signed-off-by: Pierre Michel --- package.json | 1 + src/components/PDFView/index.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+) diff --git a/package.json b/package.json index 573fda448477..8a3ba320ac9e 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "awesome-phonenumber": "^5.4.0", "babel-plugin-transform-remove-console": "^6.9.4", "babel-polyfill": "^6.26.0", + "canvas-size": "^1.2.6", "core-js": "^3.32.0", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 2aede78d3780..71124fe2f1ba 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -17,6 +17,7 @@ import Text from '../Text'; import compose from '../../libs/compose'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import Log from '../../libs/Log'; +import canvasSize from 'canvas-size'; /** * Each page has a default border. The app should take this size into account @@ -52,6 +53,10 @@ class PDFView extends Component { const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob); + this.setMaxCanvaSizeInState = this.setMaxCanvaSizeInState.bind(this); + canvasSize.maxArea({ + onSuccess: this.setMaxCanvaSizeInState + }); } componentDidUpdate(prevProps) { @@ -180,6 +185,10 @@ class PDFView extends Component { attemptPDFLoad(password) { this.onPasswordCallback(password); } + + setMaxCanvaSizeInState(width, height, benchmark) { + this.state.maxCanvasSize = width * height; + } /** * On small screens notify parent that the keyboard has opened or closed. @@ -204,6 +213,11 @@ class PDFView extends Component { */ renderPage({index, style}) { const pageWidth = this.calculatePageWidth(); + const pageHeight = this.calculatePageHeight(index); + + const nbPixels = pageWidth * pageHeight; + const ratio = Math.sqrt((this.state.maxCanvasSize / nbPixels)); + const devicePixelRatio = ratio > 3 ? 3 : ratio; return ( From ea8bc9802e258715231db07b3c7c04b977ec26c8 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Tue, 22 Aug 2023 15:11:25 -0600 Subject: [PATCH 02/19] I forgot to send the prop devicePixelRatio to the page Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 71124fe2f1ba..c9f8d7ca70c1 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -228,6 +228,7 @@ class PDFView extends Component { // This needs to be empty to avoid multiple loading texts which show per page and look ugly // See https://github.com/Expensify/App/issues/14358 for more details loading="" + devicePixelRatio={devicePixelRatio} /> ); From 342688f15cf8ff33a922f7bcffbcf9afeb8e143d Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Tue, 22 Aug 2023 17:55:07 -0600 Subject: [PATCH 03/19] We also need to make sure the height doesn't surpass the height limit Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index c9f8d7ca70c1..89a0c33e4707 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -54,9 +54,13 @@ class PDFView extends Component { const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob); this.setMaxCanvaSizeInState = this.setMaxCanvaSizeInState.bind(this); + this.setMaxCanvaHeightInState = this.setMaxCanvaHeightInState.bind(this); canvasSize.maxArea({ onSuccess: this.setMaxCanvaSizeInState }); + canvasSize.maxHeight({ + onSuccess: this.setMaxCanvaHeightInState + }); } componentDidUpdate(prevProps) { @@ -189,6 +193,9 @@ class PDFView extends Component { setMaxCanvaSizeInState(width, height, benchmark) { this.state.maxCanvasSize = width * height; } + setMaxCanvaHeightInState(width, height, benchmark) { + this.state.maxCanvasHeight = height; + } /** * On small screens notify parent that the keyboard has opened or closed. @@ -216,7 +223,9 @@ class PDFView extends Component { const pageHeight = this.calculatePageHeight(index); const nbPixels = pageWidth * pageHeight; - const ratio = Math.sqrt((this.state.maxCanvasSize / nbPixels)); + const ratioHeight = this.state.maxCanvasHeight / pageHeight; + const ratioArea = Math.sqrt((this.state.maxCanvasSize / nbPixels)); + const ratio = Math.min(ratioHeight, ratioArea); const devicePixelRatio = ratio > 3 ? 3 : ratio; return ( From 57e6499b9af94cbfb58fe58efeac002b8c0fb66e Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Tue, 22 Aug 2023 18:29:39 -0600 Subject: [PATCH 04/19] If the ratio we calculated is bigger than the defaut ratio, we don't pass the prop Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 89a0c33e4707..6bcb4e557299 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -226,7 +226,7 @@ class PDFView extends Component { const ratioHeight = this.state.maxCanvasHeight / pageHeight; const ratioArea = Math.sqrt((this.state.maxCanvasSize / nbPixels)); const ratio = Math.min(ratioHeight, ratioArea); - const devicePixelRatio = ratio > 3 ? 3 : ratio; + const devicePixelRatio = ratio > window.devicePixelRatio ? undefined : ratio; return ( From 7d34e6a78b423d5afef81e3d2cd0413b530f33fa Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 24 Aug 2023 09:14:42 -0600 Subject: [PATCH 05/19] Adding ratioWidth and removing variables that don't need to be in the state Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 6bcb4e557299..b8c3f6e8dab2 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -56,10 +56,13 @@ class PDFView extends Component { this.setMaxCanvaSizeInState = this.setMaxCanvaSizeInState.bind(this); this.setMaxCanvaHeightInState = this.setMaxCanvaHeightInState.bind(this); canvasSize.maxArea({ - onSuccess: this.setMaxCanvaSizeInState + onSuccess: (width, height) => this.maxCanvasArea = width * height }); canvasSize.maxHeight({ - onSuccess: this.setMaxCanvaHeightInState + onSuccess: (width, height) => this.maxCanvasHeight = height + }); + canvasSize.maxWidth({ + onSuccess: (width) => this.maxCanvasWidth = width }); } @@ -189,13 +192,6 @@ class PDFView extends Component { attemptPDFLoad(password) { this.onPasswordCallback(password); } - - setMaxCanvaSizeInState(width, height, benchmark) { - this.state.maxCanvasSize = width * height; - } - setMaxCanvaHeightInState(width, height, benchmark) { - this.state.maxCanvasHeight = height; - } /** * On small screens notify parent that the keyboard has opened or closed. @@ -223,9 +219,10 @@ class PDFView extends Component { const pageHeight = this.calculatePageHeight(index); const nbPixels = pageWidth * pageHeight; - const ratioHeight = this.state.maxCanvasHeight / pageHeight; - const ratioArea = Math.sqrt((this.state.maxCanvasSize / nbPixels)); - const ratio = Math.min(ratioHeight, ratioArea); + const ratioHeight = this.maxCanvasHeight / pageHeight; + const ratioWidth = this.maxCanvasWidth / pageWidth; + const ratioArea = Math.sqrt((this.maxCanvasArea / nbPixels)); + const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); const devicePixelRatio = ratio > window.devicePixelRatio ? undefined : ratio; return ( From 5c90a870a3a7631e9e1385b53e3abfbadec3db0e Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 24 Aug 2023 09:37:54 -0600 Subject: [PATCH 06/19] I forgot to remove this Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index b8c3f6e8dab2..d38b31f05c75 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -53,8 +53,6 @@ class PDFView extends Component { const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob); - this.setMaxCanvaSizeInState = this.setMaxCanvaSizeInState.bind(this); - this.setMaxCanvaHeightInState = this.setMaxCanvaHeightInState.bind(this); canvasSize.maxArea({ onSuccess: (width, height) => this.maxCanvasArea = width * height }); From 7e837ebd105f104ffa1d5f78f08fe5863ac0c7e6 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Thu, 24 Aug 2023 09:40:36 -0600 Subject: [PATCH 07/19] Adding canvas-size to package-lock.json Signed-off-by: Pierre Michel --- package-lock.json | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/package-lock.json b/package-lock.json index 6dc34635e936..8d4e919e9f42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "awesome-phonenumber": "^5.4.0", "babel-plugin-transform-remove-console": "^6.9.4", "babel-polyfill": "^6.26.0", + "canvas-size": "^1.2.6", "core-js": "^3.32.0", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", @@ -24472,6 +24473,11 @@ "node": ">=6" } }, + "node_modules/canvas-size": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/canvas-size/-/canvas-size-1.2.6.tgz", + "integrity": "sha512-x2iVHOrZ5x9V0Hwx6kBz+Yxf/VCAII+jrD6WLjJbytJLozHq/oDJjEva432Os0eHxWMFR0vYlLJwTr6QxyxQqw==" + }, "node_modules/case-sensitive-paths-webpack-plugin": { "version": "2.4.0", "dev": true, @@ -67388,6 +67394,11 @@ "simple-get": "^3.0.3" } }, + "canvas-size": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/canvas-size/-/canvas-size-1.2.6.tgz", + "integrity": "sha512-x2iVHOrZ5x9V0Hwx6kBz+Yxf/VCAII+jrD6WLjJbytJLozHq/oDJjEva432Os0eHxWMFR0vYlLJwTr6QxyxQqw==" + }, "case-sensitive-paths-webpack-plugin": { "version": "2.4.0", "dev": true From 012fa2adfaa2f29057fdc2ef2ade782df75e7ed7 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 25 Aug 2023 09:42:28 -0600 Subject: [PATCH 08/19] Adding the canvas limits to onyx to not have to calculate them everytime we open a pdf Signed-off-by: Pierre Michel --- src/ONYXKEYS.ts | 9 +++++ src/components/PDFView/index.js | 64 ++++++++++++++++++++++++++------- 2 files changed, 60 insertions(+), 13 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 3c0b3ee9a6d6..911f394ea16e 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -218,6 +218,12 @@ const ONYXKEYS = { // The access token to be used with the Mapbox library MAPBOX_ACCESS_TOKEN: 'mapboxAccessToken', + MAX_CANVAS_AREA: 'maxCanvasArea', + + MAX_CANVAS_HEIGHT: 'maxCanvasHeight', + + MAX_CANVAS_WIDTH: 'maxCanvasWidth', + /** Collection Keys */ COLLECTION: { DOWNLOAD: 'download_', @@ -345,6 +351,9 @@ type OnyxValues = { [ONYXKEYS.MAPBOX_ACCESS_TOKEN]: OnyxTypes.MapboxAccessToken; [ONYXKEYS.ONYX_UPDATES_FROM_SERVER]: number; [ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT]: number; + [ONYXKEYS.MAX_CANVAS_AREA]: number; + [ONYXKEYS.MAX_CANVAS_HEIGHT]: number; + [ONYXKEYS.MAX_CANVAS_WIDTH]: number; // Collections [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download; diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index d38b31f05c75..f9187f01a39f 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -18,6 +18,9 @@ import compose from '../../libs/compose'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import Log from '../../libs/Log'; import canvasSize from 'canvas-size'; +import ONYXKEYS from '../../ONYXKEYS'; +import Onyx, {withOnyx} from 'react-native-onyx'; + /** * Each page has a default border. The app should take this size into account @@ -53,15 +56,36 @@ class PDFView extends Component { const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob); - canvasSize.maxArea({ - onSuccess: (width, height) => this.maxCanvasArea = width * height - }); - canvasSize.maxHeight({ - onSuccess: (width, height) => this.maxCanvasHeight = height - }); - canvasSize.maxWidth({ - onSuccess: (width) => this.maxCanvasWidth = width - }); + this.retrieveCanvasLimits(); + + } + + retrieveCanvasLimits(){ + if(!this.props.maxCanvasArea){ + canvasSize.maxArea({ + onSuccess: (width, height) => { + const maxCanvasArea = width * height; + Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, maxCanvasArea); + } + }); + } + + if(!this.props.maxCanvasHeight){ + canvasSize.maxHeight({ + onSuccess: (width, height) => { + const maxCanvasHeight = height; + Onyx.merge(ONYXKEYS.MAX_CANVAS_HEIGHT, maxCanvasHeight); + } + }); + } + if(!this.props.maxCanvasWidth){ + canvasSize.maxWidth({ + onSuccess: (width) => { + const maxCanvasWidth = width; + Onyx.merge(ONYXKEYS.MAX_CANVAS_Width, maxCanvasWidth); + } + }); + } } componentDidUpdate(prevProps) { @@ -217,9 +241,9 @@ class PDFView extends Component { const pageHeight = this.calculatePageHeight(index); const nbPixels = pageWidth * pageHeight; - const ratioHeight = this.maxCanvasHeight / pageHeight; - const ratioWidth = this.maxCanvasWidth / pageWidth; - const ratioArea = Math.sqrt((this.maxCanvasArea / nbPixels)); + const ratioHeight = this.props.maxCanvasHeight / pageHeight; + const ratioWidth = this.props.maxCanvasWidth / pageWidth; + const ratioArea = Math.sqrt((this.props.maxCanvasArea / nbPixels)); const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); const devicePixelRatio = ratio > window.devicePixelRatio ? undefined : ratio; @@ -318,4 +342,18 @@ class PDFView extends Component { PDFView.propTypes = pdfViewPropTypes.propTypes; PDFView.defaultProps = pdfViewPropTypes.defaultProps; -export default compose(withLocalize, withWindowDimensions)(PDFView); +export default compose( + withLocalize, + withWindowDimensions, + withOnyx({ + maxCanvasArea: { + key: ONYXKEYS.MAX_CANVAS_AREA, + }, + maxCanvasHeight: { + key: ONYXKEYS.MAX_CANVAS_HEIGHT, + }, + maxCanvasWidth: { + key: ONYXKEYS.MAX_CANVAS_WIDTH, + }, + }), +)(PDFView); From 7c33146a5c34f45c543b398888b2fc3d7e04884a Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 25 Aug 2023 11:14:21 -0600 Subject: [PATCH 09/19] Fix lint errors and move the onyx merges in a new action file Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 46 ++++++++++++--------------------- src/libs/actions/CanvasSize.js | 46 +++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 29 deletions(-) create mode 100644 src/libs/actions/CanvasSize.js diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index f9187f01a39f..c0d38b8afe3c 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -5,6 +5,8 @@ import 'core-js/features/array/at'; import {Document, Page, pdfjs} from 'react-pdf/dist/esm/entry.webpack'; import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker'; import {VariableSizeList as List} from 'react-window'; +import * as CanvasSize from '../../libs/actions/CanvasSize'; +import Onyx, {withOnyx} from 'react-native-onyx'; import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; import styles from '../../styles/styles'; import variables from '../../styles/variables'; @@ -17,9 +19,8 @@ import Text from '../Text'; import compose from '../../libs/compose'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import Log from '../../libs/Log'; -import canvasSize from 'canvas-size'; import ONYXKEYS from '../../ONYXKEYS'; -import Onyx, {withOnyx} from 'react-native-onyx'; + /** @@ -59,34 +60,7 @@ class PDFView extends Component { this.retrieveCanvasLimits(); } - - retrieveCanvasLimits(){ - if(!this.props.maxCanvasArea){ - canvasSize.maxArea({ - onSuccess: (width, height) => { - const maxCanvasArea = width * height; - Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, maxCanvasArea); - } - }); - } - if(!this.props.maxCanvasHeight){ - canvasSize.maxHeight({ - onSuccess: (width, height) => { - const maxCanvasHeight = height; - Onyx.merge(ONYXKEYS.MAX_CANVAS_HEIGHT, maxCanvasHeight); - } - }); - } - if(!this.props.maxCanvasWidth){ - canvasSize.maxWidth({ - onSuccess: (width) => { - const maxCanvasWidth = width; - Onyx.merge(ONYXKEYS.MAX_CANVAS_Width, maxCanvasWidth); - } - }); - } - } componentDidUpdate(prevProps) { // Use window height changes to toggle the keyboard. To maintain keyboard state @@ -148,6 +122,20 @@ class PDFView extends Component { ref.tabIndex = -1; } + retrieveCanvasLimits(){ + if(!this.props.maxCanvasArea){ + CanvasSize.retrieveMaxCanvasArea(); + } + + if(!this.props.maxCanvasHeight){ + CanvasSize.retrieveMaxCanvasHeight(); + } + + if(!this.props.maxCanvasWidth){ + CanvasSize.retrieveMaxCanvasWidth(); + } + } + /** * Calculates a proper page height. The method should be called only when there are page viewports. * It is based on a ratio between the specific page viewport width and provided page width. diff --git a/src/libs/actions/CanvasSize.js b/src/libs/actions/CanvasSize.js new file mode 100644 index 000000000000..d5b4687ac5c4 --- /dev/null +++ b/src/libs/actions/CanvasSize.js @@ -0,0 +1,46 @@ +import Onyx from 'react-native-onyx'; +import ONYXKEYS from '../../ONYXKEYS'; +import canvasSize from 'canvas-size'; + +/** + * Calculate the max area of canvas on this specific platform and save it in onyx + */ +function retrieveMaxCanvasArea() { + canvasSize.maxArea({ + onSuccess: (width, height) => { + const maxCanvasArea = width * height; + Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, maxCanvasArea); + } + }); +} + +/** + * Calculate the max height of canvas on this specific platform and save it in onyx + */ +function retrieveMaxCanvasHeight() { + canvasSize.maxHeight({ + onSuccess: (width, height) => { + const maxCanvasHeight = height; + Onyx.merge(ONYXKEYS.MAX_CANVAS_HEIGHT, maxCanvasHeight); + } + }); +} + +/** + * Calculate the max width of canvas on this specific platform and save it in onyx + */ +function retrieveMaxCanvasWidth() { + canvasSize.maxWidth({ + onSuccess: (width) => { + const maxCanvasWidth = width; + Onyx.merge(ONYXKEYS.MAX_CANVAS_Width, maxCanvasWidth); + } + }); +} + +export { + // eslint-disable-next-line import/prefer-default-export + retrieveMaxCanvasArea, + retrieveMaxCanvasHeight, + retrieveMaxCanvasWidth, +}; From 145f15f414e3ba275c84c9cb399a6d35e7b0fd60 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 25 Aug 2023 11:28:58 -0600 Subject: [PATCH 10/19] Wrong name for ONYX keys width Signed-off-by: Pierre Michel --- src/libs/actions/CanvasSize.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/CanvasSize.js b/src/libs/actions/CanvasSize.js index d5b4687ac5c4..4bb4a8cd9283 100644 --- a/src/libs/actions/CanvasSize.js +++ b/src/libs/actions/CanvasSize.js @@ -31,9 +31,9 @@ function retrieveMaxCanvasHeight() { */ function retrieveMaxCanvasWidth() { canvasSize.maxWidth({ - onSuccess: (width) => { + onSuccess: (width) => { const maxCanvasWidth = width; - Onyx.merge(ONYXKEYS.MAX_CANVAS_Width, maxCanvasWidth); + Onyx.merge(ONYXKEYS.MAX_CANVAS_WIDTH, maxCanvasWidth); } }); } From a8c3bfe7e1d775262c39212dbbd291fedc1ca79b Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 25 Aug 2023 13:14:32 -0600 Subject: [PATCH 11/19] Change imports order and remove unused Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 2 +- src/libs/actions/CanvasSize.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index c0d38b8afe3c..723ce0e6a90e 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -5,8 +5,8 @@ import 'core-js/features/array/at'; import {Document, Page, pdfjs} from 'react-pdf/dist/esm/entry.webpack'; import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker'; import {VariableSizeList as List} from 'react-window'; +import {withOnyx} from 'react-native-onyx'; import * as CanvasSize from '../../libs/actions/CanvasSize'; -import Onyx, {withOnyx} from 'react-native-onyx'; import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator'; import styles from '../../styles/styles'; import variables from '../../styles/variables'; diff --git a/src/libs/actions/CanvasSize.js b/src/libs/actions/CanvasSize.js index 4bb4a8cd9283..10d1e45ad864 100644 --- a/src/libs/actions/CanvasSize.js +++ b/src/libs/actions/CanvasSize.js @@ -1,6 +1,7 @@ import Onyx from 'react-native-onyx'; -import ONYXKEYS from '../../ONYXKEYS'; import canvasSize from 'canvas-size'; +import ONYXKEYS from '../../ONYXKEYS'; + /** * Calculate the max area of canvas on this specific platform and save it in onyx From 609c856fe7ffd38b94ad14857849ed3bbd9fac06 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 25 Aug 2023 13:31:50 -0600 Subject: [PATCH 12/19] Add comment and after npm run prettier Signed-off-by: Pierre Michel --- src/ONYXKEYS.ts | 1 - src/components/PDFView/index.js | 23 ++++++++++++----------- src/libs/actions/CanvasSize.js | 21 ++++++++++----------- 3 files changed, 22 insertions(+), 23 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index f8eaf672c74a..07cbc2d4e352 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -224,7 +224,6 @@ const ONYXKEYS = { // Information on any active demos being run DEMO_INFO: 'demoInfo', - MAX_CANVAS_AREA: 'maxCanvasArea', MAX_CANVAS_HEIGHT: 'maxCanvasHeight', diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 723ce0e6a90e..cb3f1bc9c06b 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -21,8 +21,6 @@ import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import Log from '../../libs/Log'; import ONYXKEYS from '../../ONYXKEYS'; - - /** * Each page has a default border. The app should take this size into account * when calculates the page width and height. @@ -58,10 +56,8 @@ class PDFView extends Component { const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob); this.retrieveCanvasLimits(); - } - componentDidUpdate(prevProps) { // Use window height changes to toggle the keyboard. To maintain keyboard state // on all platforms we also use focus/blur events. So we need to make sure here @@ -122,16 +118,19 @@ class PDFView extends Component { ref.tabIndex = -1; } - retrieveCanvasLimits(){ - if(!this.props.maxCanvasArea){ + /** + * Verify that the canvas limits have been calculated already, if not calculate them and put them in Onyx + */ + retrieveCanvasLimits() { + if (!this.props.maxCanvasArea) { CanvasSize.retrieveMaxCanvasArea(); } - if(!this.props.maxCanvasHeight){ + if (!this.props.maxCanvasHeight) { CanvasSize.retrieveMaxCanvasHeight(); } - - if(!this.props.maxCanvasWidth){ + + if (!this.props.maxCanvasWidth) { CanvasSize.retrieveMaxCanvasWidth(); } } @@ -228,10 +227,12 @@ class PDFView extends Component { const pageWidth = this.calculatePageWidth(); const pageHeight = this.calculatePageHeight(index); + //Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that + // with the default devicePixelRatio it will be able to diplay the pdf correctly, if not we must change the devicePixelRatio. const nbPixels = pageWidth * pageHeight; const ratioHeight = this.props.maxCanvasHeight / pageHeight; const ratioWidth = this.props.maxCanvasWidth / pageWidth; - const ratioArea = Math.sqrt((this.props.maxCanvasArea / nbPixels)); + const ratioArea = Math.sqrt(this.props.maxCanvasArea / nbPixels); const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); const devicePixelRatio = ratio > window.devicePixelRatio ? undefined : ratio; @@ -331,7 +332,7 @@ PDFView.propTypes = pdfViewPropTypes.propTypes; PDFView.defaultProps = pdfViewPropTypes.defaultProps; export default compose( - withLocalize, + withLocalize, withWindowDimensions, withOnyx({ maxCanvasArea: { diff --git a/src/libs/actions/CanvasSize.js b/src/libs/actions/CanvasSize.js index 10d1e45ad864..b26108a052e8 100644 --- a/src/libs/actions/CanvasSize.js +++ b/src/libs/actions/CanvasSize.js @@ -2,16 +2,15 @@ import Onyx from 'react-native-onyx'; import canvasSize from 'canvas-size'; import ONYXKEYS from '../../ONYXKEYS'; - /** * Calculate the max area of canvas on this specific platform and save it in onyx */ function retrieveMaxCanvasArea() { canvasSize.maxArea({ - onSuccess: (width, height) => { + onSuccess: (width, height) => { const maxCanvasArea = width * height; Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, maxCanvasArea); - } + }, }); } @@ -19,12 +18,12 @@ function retrieveMaxCanvasArea() { * Calculate the max height of canvas on this specific platform and save it in onyx */ function retrieveMaxCanvasHeight() { - canvasSize.maxHeight({ - onSuccess: (width, height) => { - const maxCanvasHeight = height; - Onyx.merge(ONYXKEYS.MAX_CANVAS_HEIGHT, maxCanvasHeight); - } - }); + canvasSize.maxHeight({ + onSuccess: (width, height) => { + const maxCanvasHeight = height; + Onyx.merge(ONYXKEYS.MAX_CANVAS_HEIGHT, maxCanvasHeight); + }, + }); } /** @@ -32,10 +31,10 @@ function retrieveMaxCanvasHeight() { */ function retrieveMaxCanvasWidth() { canvasSize.maxWidth({ - onSuccess: (width) => { + onSuccess: (width) => { const maxCanvasWidth = width; Onyx.merge(ONYXKEYS.MAX_CANVAS_WIDTH, maxCanvasWidth); - } + }, }); } From bebb637c5a28e1e2a1d7d163410f444af6bfa908 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Fri, 25 Aug 2023 13:50:09 -0600 Subject: [PATCH 13/19] Adding the last space Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index cb3f1bc9c06b..ed85ca02e683 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -227,7 +227,7 @@ class PDFView extends Component { const pageWidth = this.calculatePageWidth(); const pageHeight = this.calculatePageHeight(index); - //Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that + // Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that // with the default devicePixelRatio it will be able to diplay the pdf correctly, if not we must change the devicePixelRatio. const nbPixels = pageWidth * pageHeight; const ratioHeight = this.props.maxCanvasHeight / pageHeight; From ea4e5e8996eb6a11db4618769b64c1f01e68aa83 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Mon, 28 Aug 2023 10:29:20 -0600 Subject: [PATCH 14/19] Adding comments, improving code and memoizing getDevicePixelRatio to avoind calculating it every time we render, for example when we scroll Signed-off-by: Pierre Michel --- src/ONYXKEYS.ts | 3 +++ src/components/PDFView/index.js | 29 ++++++++++++++++++++--------- src/libs/actions/CanvasSize.js | 9 +++------ 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 07cbc2d4e352..37f128dab224 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -224,10 +224,13 @@ const ONYXKEYS = { // Information on any active demos being run DEMO_INFO: 'demoInfo', + // Max area handled for canvas on this platform MAX_CANVAS_AREA: 'maxCanvasArea', + // Max height handled for canvas on this platform MAX_CANVAS_HEIGHT: 'maxCanvasHeight', + // Max width handled for canvas on this platform MAX_CANVAS_WIDTH: 'maxCanvasWidth', /** Collection Keys */ diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index ed85ca02e683..5253c6f8f192 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -51,6 +51,7 @@ class PDFView extends Component { this.calculatePageHeight = this.calculatePageHeight.bind(this); this.calculatePageWidth = this.calculatePageWidth.bind(this); this.renderPage = this.renderPage.bind(this); + this.getDevicePixelRatio = _.memoize(this.getDevicePixelRatio); this.setListAttributes = this.setListAttributes.bind(this); const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); @@ -214,6 +215,24 @@ class PDFView extends Component { this.setState({isKeyboardOpen}); this.props.onToggleKeyboard(isKeyboardOpen); } + // + + /** + * Calculate the devicePixelRatio the page should be rendered with + * Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that + * with the default devicePixelRatio it will be able to diplay the pdf correctly, if not we must change the devicePixelRatio. + * @param {Number} width of the page + * @param {Number} height of the page + * @returns {Number} devicePixelRatio for this page on this platform + */ + getDevicePixelRatio(width, height) { + const nbPixels = width * height; + const ratioHeight = this.props.maxCanvasHeight / height; + const ratioWidth = this.props.maxCanvasWidth / width; + const ratioArea = Math.sqrt(this.props.maxCanvasArea / nbPixels); + const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); + return ratio > window.devicePixelRatio ? undefined : ratio; + } /** * Render a specific page based on its index. @@ -226,15 +245,7 @@ class PDFView extends Component { renderPage({index, style}) { const pageWidth = this.calculatePageWidth(); const pageHeight = this.calculatePageHeight(index); - - // Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that - // with the default devicePixelRatio it will be able to diplay the pdf correctly, if not we must change the devicePixelRatio. - const nbPixels = pageWidth * pageHeight; - const ratioHeight = this.props.maxCanvasHeight / pageHeight; - const ratioWidth = this.props.maxCanvasWidth / pageWidth; - const ratioArea = Math.sqrt(this.props.maxCanvasArea / nbPixels); - const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); - const devicePixelRatio = ratio > window.devicePixelRatio ? undefined : ratio; + const devicePixelRatio = this.getDevicePixelRatio(pageWidth, pageHeight); return ( diff --git a/src/libs/actions/CanvasSize.js b/src/libs/actions/CanvasSize.js index b26108a052e8..ed83562a3e43 100644 --- a/src/libs/actions/CanvasSize.js +++ b/src/libs/actions/CanvasSize.js @@ -8,8 +8,7 @@ import ONYXKEYS from '../../ONYXKEYS'; function retrieveMaxCanvasArea() { canvasSize.maxArea({ onSuccess: (width, height) => { - const maxCanvasArea = width * height; - Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, maxCanvasArea); + Onyx.merge(ONYXKEYS.MAX_CANVAS_AREA, width * height); }, }); } @@ -20,8 +19,7 @@ function retrieveMaxCanvasArea() { function retrieveMaxCanvasHeight() { canvasSize.maxHeight({ onSuccess: (width, height) => { - const maxCanvasHeight = height; - Onyx.merge(ONYXKEYS.MAX_CANVAS_HEIGHT, maxCanvasHeight); + Onyx.merge(ONYXKEYS.MAX_CANVAS_HEIGHT, height); }, }); } @@ -32,8 +30,7 @@ function retrieveMaxCanvasHeight() { function retrieveMaxCanvasWidth() { canvasSize.maxWidth({ onSuccess: (width) => { - const maxCanvasWidth = width; - Onyx.merge(ONYXKEYS.MAX_CANVAS_WIDTH, maxCanvasWidth); + Onyx.merge(ONYXKEYS.MAX_CANVAS_WIDTH, width); }, }); } From 5e8851b14e51880b8fe9ab47d8baf2e2fa80cd8c Mon Sep 17 00:00:00 2001 From: ShogunFire Date: Mon, 28 Aug 2023 10:36:40 -0600 Subject: [PATCH 15/19] Update src/ONYXKEYS.ts comment for max area Co-authored-by: Eugene Voloshchak --- src/ONYXKEYS.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 37f128dab224..4b773a1a8a6f 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -224,7 +224,7 @@ const ONYXKEYS = { // Information on any active demos being run DEMO_INFO: 'demoInfo', - // Max area handled for canvas on this platform + // Max area supported for HTML element MAX_CANVAS_AREA: 'maxCanvasArea', // Max height handled for canvas on this platform From 7dbd94daade79833047c14456c64af1c92ee37de Mon Sep 17 00:00:00 2001 From: ShogunFire Date: Mon, 28 Aug 2023 10:37:15 -0600 Subject: [PATCH 16/19] Update src/ONYXKEYS.ts comment for max height Co-authored-by: Eugene Voloshchak --- src/ONYXKEYS.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 4b773a1a8a6f..bfeca5009338 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -227,7 +227,7 @@ const ONYXKEYS = { // Max area supported for HTML element MAX_CANVAS_AREA: 'maxCanvasArea', - // Max height handled for canvas on this platform + // Max height supported for HTML element MAX_CANVAS_HEIGHT: 'maxCanvasHeight', // Max width handled for canvas on this platform From 3400f2d7ddc702228d7764edafa4e891f8f58969 Mon Sep 17 00:00:00 2001 From: ShogunFire Date: Mon, 28 Aug 2023 10:37:28 -0600 Subject: [PATCH 17/19] Update src/ONYXKEYS.ts comment for max width Co-authored-by: Eugene Voloshchak --- src/ONYXKEYS.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index bfeca5009338..fb86a97bd4f6 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -230,7 +230,7 @@ const ONYXKEYS = { // Max height supported for HTML element MAX_CANVAS_HEIGHT: 'maxCanvasHeight', - // Max width handled for canvas on this platform + // Max width supported for HTML element MAX_CANVAS_WIDTH: 'maxCanvasWidth', /** Collection Keys */ From 20fa08e70b70bf5aaea88c016b85337fb79e37fb Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Mon, 28 Aug 2023 10:50:54 -0600 Subject: [PATCH 18/19] Changing methods order for lint Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 37 ++++++++++++++++----------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 5253c6f8f192..0aed91937cdd 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -119,23 +119,6 @@ class PDFView extends Component { ref.tabIndex = -1; } - /** - * Verify that the canvas limits have been calculated already, if not calculate them and put them in Onyx - */ - retrieveCanvasLimits() { - if (!this.props.maxCanvasArea) { - CanvasSize.retrieveMaxCanvasArea(); - } - - if (!this.props.maxCanvasHeight) { - CanvasSize.retrieveMaxCanvasHeight(); - } - - if (!this.props.maxCanvasWidth) { - CanvasSize.retrieveMaxCanvasWidth(); - } - } - /** * Calculates a proper page height. The method should be called only when there are page viewports. * It is based on a ratio between the specific page viewport width and provided page width. @@ -215,8 +198,7 @@ class PDFView extends Component { this.setState({isKeyboardOpen}); this.props.onToggleKeyboard(isKeyboardOpen); } - // - + /** * Calculate the devicePixelRatio the page should be rendered with * Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that @@ -234,6 +216,23 @@ class PDFView extends Component { return ratio > window.devicePixelRatio ? undefined : ratio; } + /** + * Verify that the canvas limits have been calculated already, if not calculate them and put them in Onyx + */ + retrieveCanvasLimits() { + if (!this.props.maxCanvasArea) { + CanvasSize.retrieveMaxCanvasArea(); + } + + if (!this.props.maxCanvasHeight) { + CanvasSize.retrieveMaxCanvasHeight(); + } + + if (!this.props.maxCanvasWidth) { + CanvasSize.retrieveMaxCanvasWidth(); + } + } + /** * Render a specific page based on its index. * The method includes a wrapper to apply virtualized styles. From 9565272574c9e2c057c9785befffdff40243a832 Mon Sep 17 00:00:00 2001 From: Pierre Michel Date: Mon, 28 Aug 2023 11:26:51 -0600 Subject: [PATCH 19/19] Putting getDevicePixelRatio above other methods for lint Signed-off-by: Pierre Michel --- src/components/PDFView/index.js | 34 ++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index 0aed91937cdd..bd5fe8162d2e 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -119,6 +119,23 @@ class PDFView extends Component { ref.tabIndex = -1; } + /** + * Calculate the devicePixelRatio the page should be rendered with + * Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that + * with the default devicePixelRatio it will be able to diplay the pdf correctly, if not we must change the devicePixelRatio. + * @param {Number} width of the page + * @param {Number} height of the page + * @returns {Number} devicePixelRatio for this page on this platform + */ + getDevicePixelRatio(width, height) { + const nbPixels = width * height; + const ratioHeight = this.props.maxCanvasHeight / height; + const ratioWidth = this.props.maxCanvasWidth / width; + const ratioArea = Math.sqrt(this.props.maxCanvasArea / nbPixels); + const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); + return ratio > window.devicePixelRatio ? undefined : ratio; + } + /** * Calculates a proper page height. The method should be called only when there are page viewports. * It is based on a ratio between the specific page viewport width and provided page width. @@ -199,23 +216,6 @@ class PDFView extends Component { this.props.onToggleKeyboard(isKeyboardOpen); } - /** - * Calculate the devicePixelRatio the page should be rendered with - * Each platform has a different default devicePixelRatio and different canvas limits, we need to verify that - * with the default devicePixelRatio it will be able to diplay the pdf correctly, if not we must change the devicePixelRatio. - * @param {Number} width of the page - * @param {Number} height of the page - * @returns {Number} devicePixelRatio for this page on this platform - */ - getDevicePixelRatio(width, height) { - const nbPixels = width * height; - const ratioHeight = this.props.maxCanvasHeight / height; - const ratioWidth = this.props.maxCanvasWidth / width; - const ratioArea = Math.sqrt(this.props.maxCanvasArea / nbPixels); - const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); - return ratio > window.devicePixelRatio ? undefined : ratio; - } - /** * Verify that the canvas limits have been calculated already, if not calculate them and put them in Onyx */