From ac6b64ba9b2efb109229cc043f47af04df6e4387 Mon Sep 17 00:00:00 2001
From: Florian Rival <Florian.rival@gmail.com>
Date: Wed, 20 Nov 2024 16:53:47 +0100
Subject: [PATCH] Add an option to extend width or height and never crop the
 game area (#7177)

---
 .../runtimegame-pixi-renderer.ts              | 22 +++++++---------
 GDJS/Runtime/runtimegame.ts                   | 26 ++++++++++++++-----
 .../ProjectManager/ProjectPropertiesDialog.js |  8 ++++--
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts b/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
index 48a5c4ae762a..75c970afe09f 100644
--- a/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
+++ b/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts
@@ -286,19 +286,17 @@ namespace gdjs {
       if (isFullPage && !this._keepRatio) {
         canvasWidth = maxWidth;
         canvasHeight = maxHeight;
-      } else {
-        if (
-          (isFullPage && this._keepRatio) ||
-          canvasWidth > maxWidth ||
-          canvasHeight > maxHeight
-        ) {
-          let factor = maxWidth / canvasWidth;
-          if (canvasHeight * factor > maxHeight) {
-            factor = maxHeight / canvasHeight;
-          }
-          canvasWidth *= factor;
-          canvasHeight *= factor;
+      } else if (
+        (isFullPage && this._keepRatio) ||
+        canvasWidth > maxWidth ||
+        canvasHeight > maxHeight
+      ) {
+        let factor = maxWidth / canvasWidth;
+        if (canvasHeight * factor > maxHeight) {
+          factor = maxHeight / canvasHeight;
         }
+        canvasWidth *= factor;
+        canvasHeight *= factor;
       }
 
       // Apply the calculations to the canvas element...
diff --git a/GDJS/Runtime/runtimegame.ts b/GDJS/Runtime/runtimegame.ts
index 0c0a94cb444a..e940a22fe09d 100644
--- a/GDJS/Runtime/runtimegame.ts
+++ b/GDJS/Runtime/runtimegame.ts
@@ -584,15 +584,27 @@ namespace gdjs {
             this._gameResolutionWidth =
               (this._gameResolutionHeight * windowInnerWidth) /
               windowInnerHeight;
-          } else {
-            if (this._resizeMode === 'adaptHeight') {
-              this._gameResolutionHeight =
-                (this._gameResolutionWidth * windowInnerHeight) /
-                windowInnerWidth;
+          } else if (this._resizeMode === 'adaptHeight') {
+            this._gameResolutionHeight =
+              (this._gameResolutionWidth * windowInnerHeight) /
+              windowInnerWidth;
+          } else if (this._resizeMode === 'scaleOuter') {
+            const widthFactor = windowInnerWidth / this._originalWidth;
+            const heightFactor = windowInnerHeight / this._originalHeight;
+
+            if (widthFactor < heightFactor) {
+              this._gameResolutionWidth = this._originalWidth;
+              this._gameResolutionHeight = Math.floor(
+                windowInnerHeight / widthFactor
+              );
+            } else {
+              this._gameResolutionWidth = Math.floor(
+                windowInnerWidth / heightFactor
+              );
+              this._gameResolutionHeight = this._originalHeight;
             }
           }
         }
-      } else {
       }
 
       // Don't alter the game resolution. The renderer
@@ -1203,7 +1215,7 @@ namespace gdjs {
     /**
      * Enlarge/reduce the width (or the height) of the game to fill the inner window.
      */
-    _forceGameResolutionUpdate() {
+    private _forceGameResolutionUpdate() {
       this.setGameResolutionSize(
         this._gameResolutionWidth,
         this._gameResolutionHeight
diff --git a/newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js b/newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js
index b8338e064658..46a01a06b6aa 100644
--- a/newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js
+++ b/newIDE/app/src/ProjectManager/ProjectPropertiesDialog.js
@@ -624,13 +624,17 @@ const ProjectPropertiesDialog = (props: Props) => {
                     value=""
                     label={t`No changes to the game size`}
                   />
+                  <SelectOption
+                    value="scaleOuter"
+                    label={t`Extend width or height to fill screen (without cropping the game area)`}
+                  />
                   <SelectOption
                     value="adaptWidth"
-                    label={t`Change width to fit the screen or window size`}
+                    label={t`Adjust width to fill screen (extend or crop)`}
                   />
                   <SelectOption
                     value="adaptHeight"
-                    label={t`Change height to fit the screen or window size`}
+                    label={t`Adjust height to fill screen (extend or crop)`}
                   />
                 </SelectField>
                 <Checkbox