From 91140d5ed5bb7030dc76cd7276334153ba9cfbdb Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 26 Aug 2025 15:51:45 +0200
Subject: [PATCH] wip #7704 @1

---
 js/libs/fluidbook/fluidbook.loader.js | 43 +++++++++++++++++++++++++--
 style/fluidbook.less                  |  2 ++
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 642d2280..876e8c96 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -20,6 +20,7 @@ function FluidbookLoader(fluidbook) {
     this._loadbalancingServerURL = {};
     this._textureAssetsCache = {};
     this.loadbalancing = false;
+    this._masks = [];
     if (this.fluidbook.settings.hosting_loadbalancer) {
         this.loadbalancing = ['s1.lb.fluidbook.com'];
     }
@@ -40,8 +41,7 @@ FluidbookLoader.prototype = {
                 $this.loadbalancing = [];
                 $.each(data, function (i, server) {
                     $.ajax('https://' + server.h + '/status.txt', {
-                        dataType: 'text',
-                        timeout: 5000
+                        dataType: 'text', timeout: 5000
                     }).done(function (data) {
                         if (data == '1') {
                             for (let i = 0; i < server.w; i++) {
@@ -239,6 +239,7 @@ FluidbookLoader.prototype = {
         var $this = this;
         var $_callback;
 
+        this.loadMask(page);
 
         $_callback = function () {
             $this.loadTexture(page, function () {
@@ -275,9 +276,41 @@ FluidbookLoader.prototype = {
         }
     },
 
+    loadMask: function (page) {
+        if (this._masks[page] !== undefined) {
+            return;
+        }
+        let masks = [];
+        $.each(this.fluidbook.settings.masks, function (k, mask) {
+            if (mask.page !== page) {
+                return;
+            }
+            masks.push(mask.area);
+        });
+        if (masks.length === 0) {
+            this._masks[page] = false;
+            return;
+        }
+
+        let dim = this.fluidbook.settings.pagesDimensions[page];
+        let w = (dim[0] / this.fluidbook.settings.cssScale);
+        let h = (dim[1] / this.fluidbook.settings.cssScale);
+
+        let canvas = $('<canvas class="mask_canvas" id="mask_canvas_' + page + '" width="' + Math.floor(w) + '" height="' + Math.floor(h) + '" aria-hidden="true"></canvas>');
+        $("body").append(canvas);
+        let c = canvas.get(0);
+        let ctx = c.getContext("2d");
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, c.width, c.height);
+        $.each(masks, function (k, mask) {
+            ctx.clearRect(mask.x, mask.y, mask.width, mask.height);
+        });
+        this._masks[page] = c.toDataURL();
+        $("#mask_canvas_" + page).remove();
+    },
+
     preloadAround: function (page) {
         if (this.numPreload == 0) {
-            //this.cleanPreloaded();
             return;
         }
 
@@ -974,6 +1007,10 @@ FluidbookLoader.prototype = {
         } else {
             $(t).append(this.texts[pageNr]);
         }
+
+        if (this._masks[pageNr]) {
+            t.css('mask-image', 'url("' + this._masks[pageNr] + '")');
+        }
         callback();
     },
 
diff --git a/style/fluidbook.less b/style/fluidbook.less
index b5e48567..55c3d463 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -446,6 +446,8 @@ body, html {
 .texts {
   width: 100%;
   height: 100%;
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
 
   img, object {
     position: absolute;
-- 
2.39.5