Merge branch 'pr/1954' into dev

Author: Lionel Laské

CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Use of '=' instead of '==' in if else statement in Physics game activity.js #1870
 - Camera remains active when toggling off in QRCode activity (Web/Desktop) #1911
 - Delete key deleted wrong character in Calculator #1935
+- Fototoon don't handle window resize #559
 
 ## [1.9.0] - 2025-03-25
 ### Added

activities/Fototoon.activity/js/activity.js

@@ -41,6 +41,24 @@ define(["sugar-web/activity/activity","sugar-web/datastore","sugar-web/env","tex
         mainCanvas.width = mainCanvas.height * 4 / 3;
         mainCanvas.style.left = ((window.innerWidth - mainCanvas.width) / 2) + "px";
 
+        // Handle window resize
+        window.addEventListener('resize', function () {
+            // Calculate new dimensions
+            var newHeight = window.innerHeight - sugarCellSize - 5;
+            var newWidth = newHeight * 4 / 3;
+
+            // Round to prevent sub-pixel scaling issues with canvas
+            newWidth = Math.floor(newWidth);
+            newHeight = Math.floor(newHeight);
+
+            // Center the canvas
+            mainCanvas.style.left = ((window.innerWidth - newWidth) / 2) + "px";
+
+            // Call the resize method which preserves state
+            toonModel.resize(newWidth, newHeight);
+        });
+
+
         var previousButton = document.getElementById("previous-button");
 		previousButton.title = _("Previous");
         previousButton.addEventListener('click', function (e) {
@@ -151,8 +169,11 @@ define(["sugar-web/activity/activity","sugar-web/datastore","sugar-web/env","tex
 
             // clone the data to remove the images
             var dataWithoutImages = {}
-            dataWithoutImages['version'] = toonModel.getData()['version'];
-            dataWithoutImages['boxs'] = toonModel.getData()['boxs'];
+            var modelData = toonModel.getData();
+            dataWithoutImages['version'] = modelData['version'];
+            dataWithoutImages['boxs'] = modelData['boxs'];
+            dataWithoutImages['canvas_width'] = modelData['canvas_width'];
+            dataWithoutImages['canvas_height'] = modelData['canvas_height'];
 
             dataImages = {};
             for(var key in toonModel.getData()['images']) {
@@ -287,4 +308,4 @@ define(["sugar-web/activity/activity","sugar-web/datastore","sugar-web/env","tex
 
     });
 
-});
+});

activities/Fototoon.activity/js/toon.js

@@ -242,11 +242,93 @@ define(["easel","sugar-web/datastore","sugar-web/env","l10n","humane"], function
             this._updatePageCounter();
         };
 
-        this.setData = function(data) {
+        this._scaleData = function (data, scale) {
+            console.log("Scaling data by factor: " + scale);
+            if (!data['boxs']) return;
+
+            for (var i = 0; i < data['boxs'].length; i++) {
+                var box = data['boxs'][i];
+
+                // Scale image properties
+                if (box['img_x'] !== undefined) box['img_x'] *= scale;
+                if (box['img_y'] !== undefined) box['img_y'] *= scale;
+                if (box['img_w'] !== undefined) box['img_w'] *= scale;
+                if (box['img_h'] !== undefined) box['img_h'] *= scale;
+
+                // Scale globes
+                if (box['globes']) {
+                    for (var j = 0; j < box['globes'].length; j++) {
+                        var globe = box['globes'][j];
+                        globe['x'] *= scale;
+                        globe['y'] *= scale;
+                        globe['width'] *= scale;
+                        globe['height'] *= scale;
+                        globe['radio'] *= scale;
+
+                        if (globe['point_0'] !== undefined) globe['point_0'] *= scale;
+                        if (globe['point_1'] !== undefined) globe['point_1'] *= scale;
+
+                        // Globe text scaling
+                        if (globe['text_width'] !== undefined) globe['text_width'] *= scale;
+                        if (globe['text_height'] !== undefined) globe['text_height'] *= scale;
+
+                        // Font scaling
+                        if (globe['text_font_description']) {
+                            // Format: "Sans 30" or "Sans bold 30"
+                            var parts = globe['text_font_description'].split(' ');
+                            var sizeIndex = parts.length - 1;
+                            var size = parseFloat(parts[sizeIndex]);
+                            if (!isNaN(size)) {
+                                parts[sizeIndex] = Math.max(1, Math.round(size * scale));
+                                globe['text_font_description'] = parts.join(' ');
+                            }
+                        }
+                    }
+                }
+            }
+        };
+
+        this.setData = function (data) {
             this._data = data;
+            // Check for canvas scaling
+            if (this._data['canvas_width'] && this._data['canvas_width'] > 0) {
+                var scale = this._canvas.width / this._data['canvas_width'];
+                // Allow small epsilon difference
+                if (Math.abs(scale - 1.0) > 0.01) {
+                    this._scaleData(this._data, scale);
+                    this._data['canvas_width'] = this._canvas.width;
+                    this._data['canvas_height'] = this._canvas.height;
+                }
+            } else {
+                // New or legacy data - assume simple fit or do nothing.
+                // We just set current dimensions so next save is correct.
+                this._data['canvas_width'] = this._canvas.width;
+                this._data['canvas_height'] = this._canvas.height;
+            }
             this._data['previews'] = [];
             this.init();
         };
+        this.resize = function (width, height) {
+            if (this._canvas.width === width && this._canvas.height === height) {
+                return;
+            }
+            // Capture current state from screen before scaling to assume continuity
+            this.updateData();
+
+            var scale = width / this._canvas.width;
+
+            // Update canvas dimensions
+            this._canvas.width = width;
+            this._canvas.height = height;
+
+            // Update underlying data model
+            this._scaleData(this._data, scale);
+            this._data['canvas_width'] = width;
+            this._data['canvas_height'] = height;
+
+            // re-init current box
+            this.comicBox.init(this._data['boxs'][this.activeBox], this._data['images'], (this.activeBox > 0));
+        };
 
         this.showWait = function () {
             this._waitMsg.style.display = 'block';