Merge pull request #7214 from BabylonJSGuide/master

ScrollViewer Update Images in Vertical Rotated

gui/src/2D/controls/image.ts

@@ -260,6 +260,28 @@ export class Image extends Control {
         this._markAsDirty();
     }
 
+    /** @hidden */
+    public _rotate90(n: number): Image {
+        let canvas = document.createElement('canvas');
+
+        const context = canvas.getContext('2d')!;
+        const width = this._domImage.width;
+        const height = this._domImage.height;
+
+        canvas.width = height;
+        canvas.height = width;
+
+        context.translate(canvas.width / 2, canvas.height / 2);
+        context.rotate(n * Math.PI / 2);
+
+        context.drawImage(this._domImage, 0, 0, width, height, -width / 2, -height / 2, width, height);
+
+        const dataUrl: string = canvas.toDataURL("image/jpg");
+        const rotatedImage = new Image(this.name + "rotated", dataUrl);
+
+        return rotatedImage;
+    }
+
     /**
      * Gets or sets the internal DOM image used to render the control
      */

gui/src/2D/controls/sliders/imageScrollBar.ts

@@ -8,53 +8,97 @@ import { Measure } from "../../measure";
  * Class used to create slider controls
  */
 export class ImageScrollBar extends BaseSlider {
+    private _backgroundBaseImage: Image;
     private _backgroundImage: Image;
     private _thumbImage: Image;
+    private _thumbBaseImage: Image;
     private _thumbLength: number = 0.5;
     private _thumbHeight: number = 1;
     private _barImageHeight: number = 1;
     private _tempMeasure = new Measure(0, 0, 0, 0);
 
     /**
-     * Gets or sets the image used to render the background
+     * Gets or sets the image used to render the background for horizontal bar
      */
     public get backgroundImage(): Image {
-        return this._backgroundImage;
+        return this._backgroundBaseImage;
     }
 
     public set backgroundImage(value: Image) {
-        if (this._backgroundImage === value) {
+        if (this._backgroundBaseImage === value) {
             return;
         }
 
-        this._backgroundImage = value;
+        this._backgroundBaseImage = value;
 
-        if (value && !value.isLoaded) {
-            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());
+        if (this.isVertical) {
+            if (value && !value.isLoaded) {
+                value.onImageLoadedObservable.addOnce(() => {
+                    const rotatedValue = value._rotate90(1);
+                    this._backgroundImage = rotatedValue;
+                    if (!rotatedValue.isLoaded) {
+                        rotatedValue.onImageLoadedObservable.addOnce(() => {
+                            this._markAsDirty();
+                        });
+                    }
+                    this._markAsDirty();
+                });
+            }
+            this._backgroundImage = value._rotate90(1);
+            this._markAsDirty();
         }
+        else {
+            this._backgroundImage = value;
+            if (value && !value.isLoaded) {
+                value.onImageLoadedObservable.addOnce(() => {
+                    this._markAsDirty();
+                });
+            }
 
-        this._markAsDirty();
+            this._markAsDirty();
+        }
     }
 
     /**
      * Gets or sets the image used to render the thumb
      */
     public get thumbImage(): Image {
-        return this._thumbImage;
+        return this._thumbBaseImage;
     }
 
     public set thumbImage(value: Image) {
-        if (this._thumbImage === value) {
+        if (this._thumbBaseImage === value) {
             return;
         }
 
-        this._thumbImage = value;
+        this._thumbBaseImage = value;
 
-        if (value && !value.isLoaded) {
-            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());
+        if (this.isVertical) {
+            if (value && !value.isLoaded) {
+                value.onImageLoadedObservable.addOnce(() => {
+                    var rotatedValue = value._rotate90(-1);
+                    this._thumbImage = rotatedValue;
+                    if (!rotatedValue.isLoaded) {
+                        rotatedValue.onImageLoadedObservable.addOnce(() => {
+                            this._markAsDirty();
+                        });
+                    }
+                    this._markAsDirty();
+                });
+            }
+            this._thumbImage = value._rotate90(-1);
+            this._markAsDirty();
         }
+        else {
+            this._thumbImage = value;
+            if (value && !value.isLoaded) {
+                value.onImageLoadedObservable.addOnce(() => {
+                    this._markAsDirty();
+                });
+            }
 
-        this._markAsDirty();
+            this._markAsDirty();
+        }
     }
 
     /**