Allow tiling the IconsBackground for A3 and bigger formats

Author: Michael-Schaer

resources/js/service/canvas/elements/background/BackgroundIcons.js

@@ -1,14 +1,53 @@
 import BackgroundImage from "./BackgroundImage";
 
 export default class BackgroundIcons extends BackgroundImage {
-
     constructor() {
         super();
-        this._image = this.iconsImage
+        this._image = this.iconsImage;
     }
 
     _drawBackground() {
-        super._drawBackground();
+        if (!this._image) {
+            return;
+        }
+
+        // Calculate the scaled dimensions for a single tile
+        const minImageWidth = this._minImageWidth();
+        const maxImageWidth = this._maxImageWidth();
+        const scaledWidth = minImageWidth + (maxImageWidth - minImageWidth) * this._zoom;
+        const aspectRatio = this._image.width / this._image.height;
+        const scaledHeight = scaledWidth / aspectRatio;
+
+        // Calculate how many tiles we need in each direction
+        const numTilesX = Math.ceil(this._containerWidth / scaledWidth);
+        const numTilesY = Math.ceil(this._containerHeight / scaledHeight);
+
+        // Set canvas size to fit all tiles exactly
+        this._canvas.width = numTilesX * scaledWidth;
+        this._canvas.height = numTilesY * scaledHeight;
+
+        // Draw the image in a tiled pattern
+        for (let y = 0; y < numTilesY; y++) {
+            for (let x = 0; x < numTilesX; x++) {
+                const destX = x * scaledWidth;
+                const destY = y * scaledHeight;
+
+                this._context.drawImage(
+                    this._image,
+                    0,
+                    0,
+                    this._image.width,
+                    this._image.height,
+                    destX,
+                    destY,
+                    scaledWidth,
+                    scaledHeight
+                );
+            }
+        }
+
+        // Repaint to validate the image
+        this._context.drawImage(this._canvas, 0, 0);
     }
 }
 

resources/js/service/canvas/elements/background/BackgroundImage.js

@@ -60,11 +60,15 @@ export default class BackgroundImage extends Background {
     }
 
     _setCanvasSize() {
-        const aspectRatioImage = this._image.width / this._image.height;
+        if (!this._image) {
+            this._canvas.width = this._containerWidth;
+            this._canvas.height = this._containerHeight;
+            return;
+        }
 
+        const aspectRatioImage = this._image.width / this._image.height;
         const minImageWidth = this._minImageWidth();
         const maxImageWidth = this._maxImageWidth();
-
         const width = minImageWidth + (maxImageWidth - minImageWidth) * this._zoom;
         const height = width / aspectRatioImage;
 
@@ -99,11 +103,11 @@ export default class BackgroundImage extends Background {
             // landscape
             const maxZoomedWidth = this._image.width * MaxImageZoomFactor;
             return Math.min(maxZoomedWidth, CanvasMaxSideLen);
+        } else {
+            // portrait
+            const maxZoomedHeight = this._image.height * MaxImageZoomFactor;
+            const maxHeight = Math.min(maxZoomedHeight, CanvasMaxSideLen);
+            return maxHeight * aspectRatio;
         }
-
-        // portrait
-        const maxZoomedHeight = this._image.height * MaxImageZoomFactor;
-        const maxHeight = Math.min(maxZoomedHeight, CanvasMaxSideLen);
-        return maxHeight * aspectRatio;
     }
 }