From 69696ae2a9c04af713ec610aba4a96ba00b85e8d Mon Sep 17 00:00:00 2001
From: octocorvus <loryeam@gmail.com>
Date: Sat, 18 Mar 2023 10:00:25 +0000
Subject: [PATCH] use CSS transform to rotate text layer

Newer pdf.js versions don't automatically rotate text layer based on
viewport's rotation, instead they now set the value of the attribute
"data-main-rotation" to value of rotation in degrees. So, we now apply
CSS transformation to the text layer depending on the value of that
attribute.
---
 app/src/main/assets/viewer.css | 10 ++++++++++
 app/src/main/assets/viewer.js  | 14 ++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/src/main/assets/viewer.css b/app/src/main/assets/viewer.css
index 05c4f4f..3aeab03 100644
--- a/app/src/main/assets/viewer.css
+++ b/app/src/main/assets/viewer.css
@@ -93,3 +93,13 @@ canvas, .textLayer {
 .textLayer .endOfContent.active {
     top: 0;
 }
+
+[data-main-rotation="90"] {
+    transform: rotate(90deg);
+}
+[data-main-rotation="180"] {
+    transform: rotate(180deg);
+}
+[data-main-rotation="270"] {
+    transform: rotate(270deg);
+}
diff --git a/app/src/main/assets/viewer.js b/app/src/main/assets/viewer.js
index 4d3a3d6..6148ad5 100644
--- a/app/src/main/assets/viewer.js
+++ b/app/src/main/assets/viewer.js
@@ -150,8 +150,18 @@ function renderPage(pageNumber, zoom, prerender, prerenderTrigger=0) {
 
                 render();
 
-                newTextLayerDiv.style.height = newCanvas.style.height;
-                newTextLayerDiv.style.width = newCanvas.style.width;
+                // We use CSS transform to rotate a text layer div of zero
+                // degrees rotation. So, when the rotation is 90 or 270
+                // degrees, set width and height of the text layer div to the
+                // height and width of the canvas, respectively, to prevent
+                // text layer misalignment.
+                if (orientationDegrees % 180 === 0) {
+                    newTextLayerDiv.style.height = newCanvas.style.height;
+                    newTextLayerDiv.style.width = newCanvas.style.width;
+                } else {
+                    newTextLayerDiv.style.height = newCanvas.style.width;
+                    newTextLayerDiv.style.width = newCanvas.style.height;
+                }
                 if (useRender) {
                     textLayerDiv.replaceWith(newTextLayerDiv);
                     textLayerDiv = newTextLayerDiv;