Merge pull request #7545 from Popov72/scrollviewer-idealwidth-bug

Fixed bug in the ScrollViewer GUI class when setting a idealWidth or …

dist/preview release/what's new.md

@@ -310,6 +310,7 @@
 - Fix bug NME bug where preview area crashes on pop up when NME is opened from playground ([Kyle Belfort](https://github.com/belfortk))
 - Fixed an issue with isSessionSupported return value being ignored ([#7501](https://github.com/BabylonJS/Babylon.js/issues/7501)) ([RaananW](https://github.com/RaananW/))
 - Added isRigCamera to rig cameras so they can be detected. Used to fix a bug with utility layer and WebXR ([#7517](https://github.com/BabylonJS/Babylon.js/issues/7517)) ([RaananW](https://github.com/RaananW/))
+- Fixed bug in the `ScrollViewer` GUI class when setting a `idealWidth` or `idealHeight` on the ADT ([Popov72](https://github.com/Popov72))
 
 ## Breaking changes
 

gui/src/2D/advancedDynamicTexture.ts

@@ -216,6 +216,38 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._renderAtIdealSize = value;
         this._onResize();
     }
+
+    /**
+     * Gets the ratio used when in "ideal mode"
+    * @see http://doc.babylonjs.com/how_to/gui#adaptive-scaling
+     * */
+    public get idealRatio(): number {
+        var rwidth: number = 0;
+        var rheight: number = 0;
+
+        if (this._idealWidth) {
+            rwidth = (this.getSize().width) / this._idealWidth;
+        }
+
+        if (this._idealHeight) {
+            rheight = (this.getSize().height) / this._idealHeight;
+        }
+
+        if (this._useSmallestIdeal && this._idealWidth && this._idealHeight) {
+            return window.innerWidth < window.innerHeight ? rwidth : rheight;
+        }
+
+        if (this._idealWidth) { // horizontal
+            return rwidth;
+        }
+
+        if (this._idealHeight) { // vertical
+            return rheight;
+        }
+
+        return 1;
+    }
+
     /**
     * Gets the underlying layer used to render the texture when in fullscreen mode
     */

gui/src/2D/controls/scrollViewers/scrollViewer.ts

@@ -451,14 +451,15 @@ export class ScrollViewer extends Rectangle {
     }
 
     private _setWindowPosition(): void {
+        let ratio = this.host.idealRatio;
         let windowContentsWidth = this._window._currentMeasure.width;
         let windowContentsHeight = this._window._currentMeasure.height;
 
         const _endLeft = this._clientWidth - windowContentsWidth;
         const _endTop = this._clientHeight - windowContentsHeight;
 
-        const newLeft = this._horizontalBar.value * _endLeft + "px";
-        const newTop = this._verticalBar.value * _endTop + "px";
+        const newLeft = (this._horizontalBar.value / ratio) * _endLeft + "px";
+        const newTop = (this._verticalBar.value / ratio) * _endTop + "px";
 
         if (newLeft !== this._window.left) {
             this._window.left = newLeft;
@@ -506,8 +507,10 @@ export class ScrollViewer extends Rectangle {
 
         this._buildClientSizes();
 
-        this._horizontalBar.thumbWidth = this._thumbLength * 0.9 * this._clientWidth + "px";
-        this._verticalBar.thumbWidth = this._thumbLength *  0.9 * this._clientHeight + "px";
+        let ratio = this.host.idealRatio;
+
+        this._horizontalBar.thumbWidth = this._thumbLength * 0.9 * (this._clientWidth / ratio) + "px";
+        this._verticalBar.thumbWidth = this._thumbLength *  0.9 * (this._clientHeight / ratio) + "px";
     }
 
     public _link(host: AdvancedDynamicTexture): void {