From 63a30593f50962a0d724b2266fee094a53ac754f Mon Sep 17 00:00:00 2001
From: Raanan Weber <info@raananweber.com>
Date: Tue, 12 Jul 2022 19:34:29 +0200
Subject: [PATCH] Automatically change hardware scaling based on browser zoom
 level (#12737)

Fixes #12711
This does 2 things:
1) If adapt to device ratio is turned on we are using the delta between the last recorded device pixel ratio and the current one to change the hardware scaling rate.
2) adaptToDeviceRatio is not public and can be changed not only in the constructor.
---
 packages/dev/core/src/Engines/thinEngine.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/dev/core/src/Engines/thinEngine.ts b/packages/dev/core/src/Engines/thinEngine.ts
index 9199a7a680a..9d2f3780c66 100644
--- a/packages/dev/core/src/Engines/thinEngine.ts
+++ b/packages/dev/core/src/Engines/thinEngine.ts
@@ -544,8 +544,12 @@ export class ThinEngine {
 
     private _activeRequests = new Array<IFileRequest>();
 
+    /**
+     * If set to true zooming in and out in the browser will rescale the hardware-scaling correctly.
+     */
+    public adaptToDeviceRatio: boolean = false;
     /** @hidden */
-    private _adaptToDeviceRatio: boolean = false;
+    private _lastDevicePixelRatio: number = 1.0;
 
     /** @hidden */
     public _transformTextureUrl: Nullable<(url: string) => string> = null;
@@ -751,7 +755,7 @@ export class ThinEngine {
         this._creationOptions = options;
 
         // Save this off for use in resize().
-        this._adaptToDeviceRatio = adaptToDeviceRatio ?? false;
+        this.adaptToDeviceRatio = adaptToDeviceRatio ?? false;
 
         this._stencilStateComposer.stencilGlobal = this._stencilState;
 
@@ -962,6 +966,7 @@ export class ThinEngine {
 
         const limitDeviceRatio = options.limitDeviceRatio || devicePixelRatio;
         this._hardwareScalingLevel = adaptToDeviceRatio ? 1.0 / Math.min(limitDeviceRatio, devicePixelRatio) : 1.0;
+        this._lastDevicePixelRatio = devicePixelRatio;
         this.resize();
 
         this._isStencilEnable = options.stencil ? true : false;
@@ -1729,10 +1734,11 @@ export class ThinEngine {
         let height: number;
 
         // Requery hardware scaling level to handle zoomed-in resizing.
-        if (this._adaptToDeviceRatio) {
+        if (this.adaptToDeviceRatio) {
             const devicePixelRatio = IsWindowObjectExist() ? window.devicePixelRatio || 1.0 : 1.0;
-            const limitDeviceRatio = this._creationOptions.limitDeviceRatio || devicePixelRatio;
-            this._hardwareScalingLevel = this._adaptToDeviceRatio ? 1.0 / Math.min(limitDeviceRatio, devicePixelRatio) : 1.0;
+            const changeRatio = this._lastDevicePixelRatio / devicePixelRatio;
+            this._lastDevicePixelRatio = devicePixelRatio;
+            this._hardwareScalingLevel *= changeRatio;
         }
 
         if (IsWindowObjectExist()) {