From e6da2f5b42c56682596ddb38fba717e2e0690ad0 Mon Sep 17 00:00:00 2001 From: sdavis175 Date: Wed, 18 Sep 2024 23:09:13 +0900 Subject: [PATCH 1/5] Attempting to fix resize bug where PDF unloads on resize/scroll on mobile. --- .gitignore | 1 + src/lib/PdfViewer.svelte | 28 +++++++++++++++++++++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index abd1b39..b33715a 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ node_modules .env .env.* !.env.example +/.idea \ No newline at end of file diff --git a/src/lib/PdfViewer.svelte b/src/lib/PdfViewer.svelte index d856e99..3d51c04 100644 --- a/src/lib/PdfViewer.svelte +++ b/src/lib/PdfViewer.svelte @@ -3,7 +3,7 @@ import * as pdfjs from 'pdfjs-dist' import * as pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs' - import { onDestroy, tick } from 'svelte' + import { onMount, onDestroy, tick } from 'svelte' import { calcRT, getPageText, onPrint, savePDF } from './utils/Helper.svelte' import Tooltip from './utils/Tooltip.svelte' @@ -219,14 +219,36 @@ (fileURL && fileURL.substring(fileURL.lastIndexOf('/') + 1)) savePDF({ fileURL, data, name: fileName }) } + + // Force re-render on window resize + let resizeTimeout; + const handleResize = () => { + clearTimeout(resizeTimeout); + // Delay the re-render slightly to prevent multiple rapid renders + resizeTimeout = setTimeout(() => { + // This will trigger re-rendering by changing the key + renderPage(pageNum); + }, 300); + }; + + onMount(async () => { + // Listen for window resize and trigger re-render + window.addEventListener('resize', handleResize); + window.addEventListener('scroll', handleResize); // Optional: re-render on scroll + }); + //prevent memory leak onDestroy(() => { clearInterval(interval) clearInterval(secondInterval) + + window.removeEventListener('resize', handleResize); + window.removeEventListener('scroll', handleResize); + clearTimeout(resizeTimeout); }) - let pageWidth - let pageHeight + let pageWidth; + let pageHeight; From 7f74c78ce6e53cba46293ca25c16e233d9091650 Mon Sep 17 00:00:00 2001 From: sdavis175 Date: Wed, 18 Sep 2024 23:10:39 +0900 Subject: [PATCH 2/5] Updating README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 91e10a0..8142f54 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # svelte-pdf +# Edited to fix resize/scroll disappearing bug [![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/2346-shield.svg)](https://madewithsvelte.com/p/svelte-pdf/shield-link) ![npm](https://img.shields.io/npm/dw/svelte-pdf?style=flat-square) From c937f3d7196a9d30e45fbe25dda5b9c823d3ba0c Mon Sep 17 00:00:00 2001 From: sdavis175 Date: Wed, 18 Sep 2024 23:33:41 +0900 Subject: [PATCH 3/5] Removing removeEventListener onDestroy() (getting window undefined errors). Fixed render function to use the queue function instead. --- src/lib/PdfViewer.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/PdfViewer.svelte b/src/lib/PdfViewer.svelte index 3d51c04..dc4495e 100644 --- a/src/lib/PdfViewer.svelte +++ b/src/lib/PdfViewer.svelte @@ -227,7 +227,7 @@ // Delay the re-render slightly to prevent multiple rapid renders resizeTimeout = setTimeout(() => { // This will trigger re-rendering by changing the key - renderPage(pageNum); + queueRenderPage(pageNum); }, 300); }; @@ -242,8 +242,8 @@ clearInterval(interval) clearInterval(secondInterval) - window.removeEventListener('resize', handleResize); - window.removeEventListener('scroll', handleResize); + // window.removeEventListener('resize', handleResize); + // window.removeEventListener('scroll', handleResize); clearTimeout(resizeTimeout); }) From 0a7b61cd2594f792074eefcb91870573dde1fb5b Mon Sep 17 00:00:00 2001 From: sdavis175 Date: Thu, 19 Sep 2024 00:13:59 +0900 Subject: [PATCH 4/5] Updated to match the original module's codebase from npmjs.com (why wasn't on GitHub?) --- package.json | 52 +++---- src/lib/PdfViewer.svelte | 300 ++++++++++++++++++++++++++++++++++++++- src/lib/styles.css | 296 -------------------------------------- 3 files changed, 324 insertions(+), 324 deletions(-) delete mode 100644 src/lib/styles.css diff --git a/package.json b/package.json index 5d1574e..0c4fe04 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "svelte-pdf", - "version": "1.0.21", - "description": "svelte-pdf provides a component for rendering PDF documents using PDF.js", + "name": "svelte-pdf-resize-fix", + "version": "1.0.26", + "description": "svelte-pdf provides a component for rendering PDF documents using PDF.js ! Fixed resizing makes PDF disappear bug", "keywords": [ "pdf", "svelte-pdf", @@ -11,21 +11,23 @@ "pdf-rotation", "pdf-navigation" ], - "homepage": "https://github.com/vinodnimbalkar/svelte-pdf#readme", + "homepage": "https://github.com/sdavis175/svelte-pdf#readme", "bugs": { - "url": "https://github.com/vinodnimbalkar/svelte-pdf/issues" + "url": "https://github.com/sdavis175/svelte-pdf/issues" }, "repository": { "type": "git", - "url": "git+https://github.com/vinodnimbalkar/svelte-pdf.git" + "url": "git+https://github.com/sdavis175/svelte-pdf.git" }, "license": "MIT", "type": "module", "exports": { - ".": { - "types": "./dist/index.d.ts", - "svelte": "./dist/index.js" - } + "./package.json": "./package.json", + ".": "./index.js", + "./PdfViewer.svelte": "./PdfViewer.svelte", + "./utils/Helper.svelte": "./utils/Helper.svelte", + "./utils/Tooltip.svelte": "./utils/Tooltip.svelte", + "./utils/classes": "./utils/classes.js" }, "main": "index.js", "scripts": { @@ -39,21 +41,21 @@ "preview": "vite preview" }, "dependencies": { - "pdfjs-dist": "^4.0.379" + "pdfjs-dist": "^3.8.162" }, "devDependencies": { - "@sveltejs/adapter-auto": "^3.1.1", - "@sveltejs/kit": "^2.5.2", - "@sveltejs/package": "^2.3.1", - "eslint": "^8.57.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-svelte": "^2.35.1", - "prettier": "^3.2.5", - "prettier-plugin-svelte": "^3.2.2", - "svelte": "^4.2.12", - "svelte-check": "^3.6.5", - "svelte2tsx": "^0.7.2", - "typescript": "^5.3.3", - "vite": "^5.1.4" - } + "@sveltejs/adapter-auto": "next", + "@sveltejs/kit": "next", + "eslint": "^8.28.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-svelte3": "^4.0.0", + "prettier": "^2.8.0", + "prettier-plugin-svelte": "^2.8.1", + "svelte": "^3.53.1", + "svelte-check": "^2.9.2", + "svelte2tsx": "^0.5.20", + "typescript": "^4.9.3", + "vite": "^3.2.4" + }, + "svelte": "./index.js" } diff --git a/src/lib/PdfViewer.svelte b/src/lib/PdfViewer.svelte index dc4495e..2a16ada 100644 --- a/src/lib/PdfViewer.svelte +++ b/src/lib/PdfViewer.svelte @@ -2,7 +2,6 @@ // @ts-nocheck import * as pdfjs from 'pdfjs-dist' - import * as pdfWorker from 'pdfjs-dist/build/pdf.worker.mjs' import { onMount, onDestroy, tick } from 'svelte' import { calcRT, getPageText, onPrint, savePDF } from './utils/Helper.svelte' import Tooltip from './utils/Tooltip.svelte' @@ -27,7 +26,7 @@ export let downloadFileName = '' export let showTopButton = true // boolean - pdfjs.GlobalWorkerOptions.workerSrc = pdfWorker + pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url); let canvas let page_num = 0 @@ -549,5 +548,300 @@ diff --git a/src/lib/styles.css b/src/lib/styles.css deleted file mode 100644 index 0d49ea0..0000000 --- a/src/lib/styles.css +++ /dev/null @@ -1,296 +0,0 @@ -:global(html) { - scroll-behavior: smooth; -} - -.parent { - display: flex; - flex-direction: column; - margin: 0 1.25rem; -} - -.password-viewer { - border-width: 1px; - border-color: #000; - border-style: solid; - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - widows: 100%; -} - -.password-message { - color: red; - margin: 8px 0px; -} - -.password-container { - align-items: center; - display: flex; - justify-content: center; - margin: 8px 0px; -} - -.password-input { - border: 1px solid rgba(0, 0, 0, 0.2); - padding: 8px; - width: 200px; -} - -.password-button { - background-color: rgb(53, 126, 221); - border: 1px solid rgba(0, 0, 0, 0.2); - color: rgb(255, 255, 255); - border-left-color: transparent; - cursor: pointer; - padding: 8px 16px; -} - -.control { - margin-top: 1.25rem; - margin-bottom: 0; - margin-right: 2.5rem; - margin-left: 2.5rem; - border-radius: 0.25rem; - overflow: auto; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); - background-color: #fff; - border-width: 1px; -} - -.control-start { - padding: 1.25rem; -} - -.line { - display: flex; - flex-direction: row; - font-family: Georgia, Cambria, "Times New Roman", Times, serif; - border-top-width: 0px; - border-right-width: 0px; - border-bottom-width: 1px; - border-left-width: 0px; - border-color: #4fd1c5; - border-style: dotted; - margin-bottom: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - justify-content: center; -} - -.button-control { - display: flex; - flex-direction: row; - padding: 0.5rem; - margin: 0.75rem; - border-radius: 0.25rem; - overflow: hidden; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); - border-left-width: 1px; - border-bottom-width: 1px; - border-right-width: 1px; - cursor: pointer; -} - -.viewer { - border-width: 1px; - border-color: #000; - border-style: solid; -} - -.icon { - height: 1.25rem; - width: 1.25rem; - fill: currentColor; - color: #38b2ac; -} - -.disabled { - cursor: not-allowed; - box-shadow: none; -} - -.page-info { - display: flex; - flex-direction: row; - padding-top: 0.5rem; - margin: 0.75rem; - overflow: hidden; -} - -.text { - margin-left: 0.5rem; - cursor: default; -} - -.rot-icon { - transform: scaleX(-1); -} - -#topBtn { - position: fixed; - bottom: 10px; - float: right; - right: 10%; - left: 90%; - max-width: 30px; - width: 100%; - border-color: #000; - background-color: #fff; - padding: 0.5px; - border-radius: 9999px; -} - -#topBtn:hover { - background-color: #000; - color: #fff; -} - -/* - ##Device = Tablets, Ipads (portrait) - ##Screen = B/w 768px to 1024px - */ - -@media (min-width: 768px) and (max-width: 1024px) { - .parent { - margin: 0; - } - - .control { - margin: 0; - } - - .control-start { - padding: 0; - } - - .line { - justify-content: center; - } - - .button-control { - display: flex; - flex-direction: row; - padding: 0.5rem; - margin: 0.5rem; - border-radius: 0.25rem; - overflow: hidden; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); - border-left-width: 1px; - border-bottom-width: 1px; - border-right-width: 1px; - cursor: pointer; - } - - .page-info { - display: none; - } - - canvas { - width: 100%; - height: 100%; - } -} - -/* - ##Device = Low Resolution Tablets, Mobiles (Landscape) - ##Screen = B/w 481px to 767px - */ - -@media (min-width: 481px) and (max-width: 767px) { - .parent { - margin: 0; - } - - .control { - margin: 0; - } - - .control-start { - padding: 0; - } - - .line { - justify-content: center; - } - - .button-control { - display: flex; - flex-direction: row; - padding: 0.5rem; - margin: 0.5rem; - border-radius: 0.25rem; - overflow: hidden; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); - border-left-width: 1px; - border-bottom-width: 1px; - border-right-width: 1px; - cursor: pointer; - } - - .page-info { - display: none; - } - - canvas { - width: 100%; - height: 100%; - } -} - -/* - ##Device = Most of the Smartphones Mobiles (Portrait) - ##Screen = B/w 320px to 479px - */ - -@media (min-width: 320px) and (max-width: 480px) { - .parent { - margin: 0; - } - - .control { - margin: 0; - } - - .control-start { - padding: 0; - } - - .line { - justify-content: center; - } - - .button-control { - display: flex; - flex-direction: row; - padding: 0.4rem; - margin: 0.4rem; - border-radius: 0.25rem; - overflow: hidden; - box-shadow: - 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); - border-left-width: 1px; - border-bottom-width: 1px; - border-right-width: 1px; - cursor: pointer; - } - - .page-info { - display: none; - } - - canvas { - width: 100%; - height: 100%; - } -} From c7a3943bb51c760a7d09f68472aa6da78b0aacdc Mon Sep 17 00:00:00 2001 From: sdavis175 Date: Thu, 19 Sep 2024 13:56:24 +0900 Subject: [PATCH 5/5] Removed scroll listener (wasn't required) and added removing the event listener on destroy. --- package.json | 2 +- src/lib/PdfViewer.svelte | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 0c4fe04..4b35917 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte-pdf-resize-fix", - "version": "1.0.26", + "version": "1.0.29", "description": "svelte-pdf provides a component for rendering PDF documents using PDF.js ! Fixed resizing makes PDF disappear bug", "keywords": [ "pdf", diff --git a/src/lib/PdfViewer.svelte b/src/lib/PdfViewer.svelte index 2a16ada..c75a1f1 100644 --- a/src/lib/PdfViewer.svelte +++ b/src/lib/PdfViewer.svelte @@ -233,7 +233,7 @@ onMount(async () => { // Listen for window resize and trigger re-render window.addEventListener('resize', handleResize); - window.addEventListener('scroll', handleResize); // Optional: re-render on scroll + // window.addEventListener('scroll', handleResize); // Optional: re-render on scroll }); //prevent memory leak @@ -241,8 +241,10 @@ clearInterval(interval) clearInterval(secondInterval) - // window.removeEventListener('resize', handleResize); - // window.removeEventListener('scroll', handleResize); + if (typeof window !== 'undefined') { + window.removeEventListener('resize', handleResize); + // window.removeEventListener('scroll', handleResize); + } clearTimeout(resizeTimeout); })