From 524c056122479d1e6b8b0e2bc61ab78769e56a0e Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 28 Sep 2021 13:56:44 +0200
Subject: [PATCH] wait #4713 @2.5

---
 js/libs/fluidbook/fluidbook.loader.js | 36 ++++++++++++++++-----------
 style/fluidbook.less                  | 14 ++++++++---
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 6aab0a32..12c66623 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -694,9 +694,8 @@ FluidbookLoader.prototype = {
 
         var upscale = this.fluidbook.settings.svgToCanvasUpscale !== undefined ? this.fluidbook.settings.svgToCanvasUpscale : 1;
 
-        var z = this.fluidbook.resize.bookScale * upscale;
-        var mz = this.fluidbook.resize.bookScale * this.fluidbook.zoom.max * upscale;
-
+        var z = upscale;
+        var mz = this.fluidbook.zoom.max * upscale * 1.1;
 
         $('canvas[data-page]').each(function () {
             if ($this.fluidbook.zoom.zoom === 1 && $(this).hasClass('z')) {
@@ -704,28 +703,37 @@ FluidbookLoader.prototype = {
             }
 
             var page = $(this).data('page');
-            var dim = $this.getPageDimensions(page);
+            var c = $(this).closest('.texts');
+            var tw = $(c).width();
+            var th = $(c).height();
+
 
-            var w = dim.width * z;
-            var h = dim.height * z;
-            var wz = dim.width * mz;
-            var hz = dim.height * mz;
+            var w = tw * z;
+            var h = th * z;
+            var wz = tw * mz;
+            var hz = th * mz;
 
             var canvas = $(this).get(0);
 
 
-            if ($(this).data('bookScale') === z) {
+            if ($(this).data('bookScale') === w) {
                 return;
             }
 
+            var cz = $(this).hasClass('z') ? mz : z;
             var cw = $(this).hasClass('z') ? wz : w;
             var ch = $(this).hasClass('z') ? hz : h;
 
-            canvas.width = cw;
-            canvas.height = ch;
+            canvas.width = cw + 30;
+            canvas.height = ch + 30;
+
+            if (cz === 1) {
+                $(canvas).css('transform', null);
+            } else {
+                $(canvas).css('transform', 'scale(' + (1 / cz) + ')');
+            }
 
             var ctx = canvas.getContext("2d");
-            ctx.clearRect(0, 0, cw, ch);
 
             var img = $this.texts[page].get(0);
             if (img.width === 0) {
@@ -733,8 +741,8 @@ FluidbookLoader.prototype = {
                 $this._preloadPage(page, callback);
                 return;
             }
-            ctx.drawImage(img, 0, 0, cw, ch);
-            $(this).data('bookScale', z);
+            ctx.drawImage(img, 0, 0, img.width * 0.998, img.height * 0.998, 0, 0, cw, ch);
+            $(this).data('bookScale', w);
         });
     },
 
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 016c4aec..d7470622 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -370,7 +370,8 @@ body, html {
   background-color: @pages-background;
 
   img {
-    width: ~"calc(100% + 1px)";
+    //width: ~"calc(100% + 1px)";
+    width: 100%;
     height: 100%;
   }
 }
@@ -383,7 +384,7 @@ body, html {
   width: 100%;
   height: 100%;
 
-  img, object, canvas {
+  img, object {
     position: absolute;
     top: 0px;
     left: 0px;
@@ -392,6 +393,12 @@ body, html {
   }
 
   canvas {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transform-origin: 0 0;
+
+
     &.p {
       display: block;
 
@@ -402,7 +409,6 @@ body, html {
 
     &.z {
       display: none;
-
       .zoomed & {
         display: block;
       }
@@ -420,7 +426,7 @@ body, html {
   max-height: 100%;
 }
 
-.portrait .page{
+.portrait .page {
   width: 100%;
   max-width: 100%;
 }
-- 
2.39.5