From 3fddd1cf5c9c98114ab5c070edba0ddc39a4ea78 Mon Sep 17 00:00:00 2001
From: Christian Aribaud <christian@aribaud.net>
Date: Mon, 22 May 2023 00:19:12 +0200
Subject: [PATCH] Use transform for translation

---
 melpomene.css |  2 ++
 melpomene.js  | 47 ++++++++++++++++++++++++++++++++---------------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/melpomene.css b/melpomene.css
index cfdbd50..869c1db 100644
--- a/melpomene.css
+++ b/melpomene.css
@@ -26,6 +26,8 @@
     flex-direction: row;
     left: 0px;
     right: 0px;
+    transform-origin: top left;
+    transform: scale(1) translate(0);
 }
 
 #reader-pages > img {
diff --git a/melpomene.js b/melpomene.js
index 327dc25..324d9d5 100644
--- a/melpomene.js
+++ b/melpomene.js
@@ -226,6 +226,16 @@ function initReader(){
 
 function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
     
+    // First, scale so the page is at scale 1 compared to the frame
+    READER_PAGES.style.transform = "scale(" + totalPagesWidth() / READER_CONTENT_FRAME.clientWidth + ")"
+    
+    // Then, move to the correct page
+    READER_PAGES.style.transform = "translateX(" + (- pageOriginalWidth() * (pageNumber - 1)) + "px )" + READER_PAGES.style.transform
+    
+    // Then move so the top-left point of the zoom match the frame top-left
+    READER_PAGES.style.transform = "translate(" + (- posx) + "px, " + (-posy) + "px )" + READER_PAGES.style.transform
+    
+    // Then, scale so the zoom would fit the frame, and center the zoom
     if (width == 0){
         width = pageOriginalWidth()
     }
@@ -237,24 +247,31 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
     zoomRatio = width / height
     
     if (readerFrameRatio() > zoomRatio) {
-        // Frame wider than zoom
-        var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height
-        var zoomToFrameCenteringOffset = [(READER_CONTENT_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
-        updateFocusByWidth(width * zoomToFrameScaleFactor)
+        // Frame wider than zoom => scale so heights are the same, offset on x
+        var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientHeight / height
+        
+        READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform
+        
+        var scaledWidth = width * zoomToFrameScaleFactor
+        var offset = (READER_CONTENT_FRAME.clientWidth - scaledWidth) / 2
+        
+        READER_PAGES.style.transform = "translateX(" + offset + "px)" + READER_PAGES.style.transform
+        
+        updateFocusByWidth(scaledWidth)
     } else {
-        var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width
-        var zoomToFrameCenteringOffset = [0, (READER_CONTENT_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2]
-        updateFocusByHeight(height * zoomToFrameScaleFactor)
+        // Frame narower than zoom => scale so left/right match, offset on y
+        var zoomToFrameScaleFactor = READER_CONTENT_FRAME.clientWidth / width 
+        
+        READER_PAGES.style.transform = "scale(" + zoomToFrameScaleFactor + ")" + READER_PAGES.style.transform
+        
+        var scaledHeight = height * zoomToFrameScaleFactor
+        var offset = (READER_CONTENT_FRAME.clientHeight - scaledHeight) / 2
+        
+        READER_PAGES.style.transform = "translateY(" + offset + "px)" + READER_PAGES.style.transform
+        
+        updateFocusByHeight(scaledHeight)
     }
     
-    previousPagesOffset = pageOriginalWidth() * (pageNumber - 1) * zoomToFrameScaleFactor
-    
-    READER_PAGES.style.width = totalPagesWidth() * zoomToFrameScaleFactor + "px"
-    READER_PAGES.style.height = pageOriginalHeight() * zoomToFrameScaleFactor + "px"
-    
-    READER_PAGES.style.left = (- posx * zoomToFrameScaleFactor + zoomToFrameCenteringOffset[0] - previousPagesOffset) + "px"
-    READER_PAGES.style.top = (- posy * zoomToFrameScaleFactor + zoomToFrameCenteringOffset[1]) + "px"
-    
     CURRENT_PAGE = pageNumber
     CURRENT_WIDTH = width
     CURRENT_HEIGHT = height