From bb14ba1a25f41d201754573b5eb904bd9e5beccb Mon Sep 17 00:00:00 2001
From: octocorvus <loryeam@gmail.com>
Date: Thu, 6 Apr 2023 07:42:50 +0000
Subject: [PATCH] bugfix: make text layer position absolute and use CSS
 transform to al...

...ign it to canvas

Fixes a bug where there was empty space above pdf page, when page
rotation is 90 or 270 degrees.

Testing: open pdf and try all rotations (0, 90, 180 and 270 degrees)
with various zoom levels (especially, max and min zoom levels), and make
sure that text layer is aligned properly to the canvas and there aren't
any unwanted blank spaces. Finally, repeat the same testing procedure
for landscape mode.

To check if text layer is aligned properly on debug builds, toggle text
layer visibility from menu or use chrome dev tools.
---
 app/src/main/assets/viewer.css |  3 ++-
 app/src/main/assets/viewer.js  | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/src/main/assets/viewer.css b/app/src/main/assets/viewer.css
index 23fcef8..883b8c2 100644
--- a/app/src/main/assets/viewer.css
+++ b/app/src/main/assets/viewer.css
@@ -31,13 +31,14 @@ body {
     grid-column-start: 1;
 }
 
-canvas, .textLayer {
+canvas {
     display: inline-block;
     position: relative;
 }
 
 .textLayer {
     text-align: initial;
+    position: absolute;
     overflow: hidden;
     opacity: var(--text-layer-opacity);
     line-height: 1;
diff --git a/app/src/main/assets/viewer.js b/app/src/main/assets/viewer.js
index c27023a..7d6407c 100644
--- a/app/src/main/assets/viewer.js
+++ b/app/src/main/assets/viewer.js
@@ -64,6 +64,14 @@ function display(newCanvas, zoom) {
     }
 }
 
+function setLayerTransform(pageWidth, pageHeight, layerDiv) {
+    const translate = {
+        X: Math.max(0, pageWidth - document.body.clientWidth) / 2,
+        Y: Math.max(0, pageHeight - document.body.clientHeight) / 2
+    };
+    layerDiv.style.translate = `${translate.X}px ${translate.Y}px`;
+}
+
 function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
     pageRendering = true;
     useRender = !prerender;
@@ -85,6 +93,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
 
                 textLayerDiv.replaceWith(cached.textLayerDiv);
                 textLayerDiv = cached.textLayerDiv;
+                setLayerTransform(cached.pageWidth, cached.pageHeight, textLayerDiv);
                 container.style.setProperty("--scale-factor", newZoomRatio.toString());
             }
 
@@ -164,6 +173,7 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
                     newTextLayerDiv.style.height = newCanvas.style.width;
                     newTextLayerDiv.style.width = newCanvas.style.height;
                 }
+                setLayerTransform(viewport.width, viewport.height, newTextLayerDiv);
                 if (useRender) {
                     textLayerDiv.replaceWith(newTextLayerDiv);
                     textLayerDiv = newTextLayerDiv;
@@ -178,7 +188,9 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
                     zoomRatio: newZoomRatio,
                     orientationDegrees: orientationDegrees,
                     canvas: newCanvas,
-                    textLayerDiv: newTextLayerDiv
+                    textLayerDiv: newTextLayerDiv,
+                    pageWidth: viewport.width,
+                    pageHeight: viewport.height
                 });
 
                 pageRendering = false;
@@ -248,3 +260,7 @@ function loadDocument() {
         console.error(reason.name + ": " + reason.message);
     });
 }
+
+window.onresize = () => {
+    setLayerTransform(canvas.clientWidth, canvas.clientHeight, textLayerDiv);
+}