From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 24 Sep 2021 10:26:43 +0000 (+0200)
Subject: wip #4702 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=27e22ffb9afcf631b4279fc72458aa6365cc5b66;p=fluidbook-html5.git

wip #4702 @2
---

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 081bef92..5771e95a 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -665,16 +665,66 @@ FluidbookLoader.prototype = {
 
         var $this = this;
 
+
         if (this.texts[pageNr] !== undefined) {
-            $("#page_" + pageNr + ' .texts').append(this.texts[pageNr]);
+            var textContent = this.fluidbook.support.chromeBased ? '<canvas data-page="' + pageNr + '" class="p"></canvas><canvas data-page="' + pageNr + '" class="z"></canvas>' : this.texts[pageNr];
+            $("#page_" + pageNr + ' .texts').html(textContent);
+            $this.renderTextsCanvas();
             callback();
         } else {
             this._loadTexts(pageNr, function () {
-                $("#page_" + pageNr + ' .texts').append($this.texts[pageNr]);
+                var textContent = this.fluidbook.support.chromeBased ? '<canvas data-page="' + pageNr + '" class="p"></canvas><canvas data-page="' + pageNr + '" class="z"></canvas>' : this.texts[pageNr];
+                $("#page_" + pageNr + ' .texts').html(textContent);
+                $this.renderTextsCanvas();
                 callback();
             });
         }
     },
+
+    renderTextsCanvas: function () {
+        var $this = this;
+
+        var z = this.fluidbook.resize.bookScale * 1.5;
+        var mz = this.fluidbook.resize.bookScale * this.fluidbook.zoom.max;
+
+        var w = this.fluidbook.settings.width * z;
+        var h = this.fluidbook.settings.height * z;
+        var wz = this.fluidbook.settings.width * mz;
+        var hz = this.fluidbook.settings.height * mz;
+
+        $('canvas[data-page]').each(function () {
+            if ($this.fluidbook.zoom.zoom === 1 && $(this).hasClass('z')) {
+                return;
+            }
+            var canvas = $(this).get(0);
+            var page = $(this).data('page');
+
+            if ($(this).data('bookScale') === z) {
+                console.log('no need to render canvas on page ' + page + '')
+                return;
+            }
+            console.log('render canvas on page ' + page);
+
+            var cw = $(this).hasClass('z') ? wz : w;
+            var ch = $(this).hasClass('z') ? hz : h;
+
+            canvas.width = cw;
+            canvas.height = ch;
+
+            var ctx = canvas.getContext("2d");
+            ctx.clearRect(0, 0, cw, ch);
+
+            var img = $this.texts[page].get(0);
+            // if (img.width === 0) {
+            //     $this.deletePage(page);
+            //     $this._preloadPage(page, callback);
+            //     return;
+            // }
+            ctx.drawImage(img, 0, 0, cw, ch);
+            $(this).data('bookScale', z);
+        });
+    },
+
     _loadTexts: function (pageNr, callback) {
         if (pageNr <= 0 || pageNr > this.fluidbook.settings.pages) {
             callback();
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 90cb6a94..256622a9 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -180,6 +180,12 @@ FluidbookResize.prototype = {
             origin[1] = '0%';
         }
 
+        try {
+            this.fluidbook.loader.renderTextsCanvas();
+        }catch (e){
+
+        }
+
         var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww);
         this.bookScale *= tabsScale;
 
diff --git a/js/libs/fluidbook/fluidbook.support.js b/js/libs/fluidbook/fluidbook.support.js
index 13550159..1ae95490 100644
--- a/js/libs/fluidbook/fluidbook.support.js
+++ b/js/libs/fluidbook/fluidbook.support.js
@@ -13,6 +13,7 @@ function FluidbookSupport(fluidbook) {
     this.android3 = this.android && this.userAgent.search(/android 3/i) > -1;
     this.iOS = Modernizr.ios;
     this.edge = Modernizr.edge;
+    this.chromeBased = Modernizr.chrome || this.edge;
     // If in node-webkit or if the index.html fluidbook is locally open in a browser
     this.offline = (typeof process !== "undefined" && process.versions['node-webkit']) || window.location.toString().indexOf("file://") == 0;
 
diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index e0bd6737..341841f0 100644
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -316,6 +316,11 @@ FluidbookZoom.prototype = {
         } else {
             $("body").removeClass('zoomed');
         }
+        try {
+            this.fluidbook.loader.renderTextsCanvas();
+        }catch (e){
+
+        }
 
         return true;
     }
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 3db3466e..782343fc 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -388,13 +388,32 @@ body, html {
     height: 100%;
   }
 
-  img, object {
+  img, object, canvas {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
   }
+
+  canvas {
+    &.p {
+      display: block;
+
+      .zoomed & {
+        display: none;
+      }
+    }
+
+    &.z {
+      display: none;
+
+      .zoomed & {
+        display: block;
+      }
+    }
+  }
+
 }
 
 /* Espaces forcés */