Fixed issue related to zooming, panning and rendering

GrapheneOS · Aug 11, 2021 · 0c0027a · 0c0027a
1 parent 6895dfd
commit 0c0027a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/app/src/main/assets/viewer.css b/app/src/main/assets/viewer.css
@@ -8,13 +8,6 @@ body, canvas, #padding {
     background: black;
 }
 
-html, body {
-  display: table;
-  height: 100%;
-  width: 100%;
-  text-align:center;
-}
-
 .textLayer {
     position: absolute;
     left: 0;
@@ -76,6 +69,13 @@ html, body {
     top: 0px;
 }
 
+html, body {
+  display: table;
+  height: 100%;
+  width: 100%;
+  text-align:center;
+}
+
 #content-wrapper {
 	display: flex;
 	justify-content: center; /* center horizontally */

diff --git a/app/src/main/assets/viewer.html b/app/src/main/assets/viewer.html
@@ -7,7 +7,6 @@
         <script src="pdf.js"></script>
     </head>
     <body>
-        <div id="padding"></div>
         <div id="content-wrapper">
             <canvas id="content"></canvas>
         </div>

diff --git a/app/src/main/assets/viewer.js b/app/src/main/assets/viewer.js
@@ -1,6 +1,5 @@
 "use strict";
 
-const padding = document.getElementById("padding");
 let pdfDoc = null;
 let pageRendering = false;
 let renderPending = false;
@@ -54,7 +53,6 @@ function display(newCanvas, zoom) {
     canvas.width = newCanvas.width;
     canvas.style.height = newCanvas.style.height;
     canvas.style.width = newCanvas.style.width;
-    padding.style.width = canvas.style.width;
     canvas.getContext("2d", { alpha: false }).drawImage(newCanvas, 0, 0);
     if (!zoom) {
         scrollTo(0, 0);
@@ -200,7 +198,9 @@ function isTextSelected() {
 
 function updateInset() {
     const windowInsetTop = channel.getWindowInsetTop() / window.devicePixelRatio + "px";
-    padding.style.paddingTop = windowInsetTop;
+    canvas.style.paddingTop = windowInsetTop;
+    // bottom insets was added to ensure that the PDF is in center
+    canvas.style.paddingBottom = windowInsetTop;
     textLayerDiv.style.top = windowInsetTop;
 }