fix GUI.Image source set

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

@@ -4,8 +4,8 @@ import { Tools } from "babylonjs/Misc/tools";
 
 import { Control } from "./control";
 import { Measure } from "../measure";
-import { _TypeStore } from 'babylonjs/Misc/typeStore';
-import { expandToProperty, serialize } from 'babylonjs/Misc/decorators';
+import { _TypeStore } from "babylonjs/Misc/typeStore";
+import { serialize } from "babylonjs/Misc/decorators";
 
 /**
  * Class used to create 2D images
@@ -18,8 +18,6 @@ export class Image extends Control {
     private _imageHeight: number;
     private _loaded = false;
     private _stretch = Image.STRETCH_FILL;
-    @serialize()
-    @expandToProperty("source")
     private _source: Nullable<string>;
     private _autoScale = false;
 
@@ -43,9 +41,9 @@ export class Image extends Control {
     private _detectPointerOnOpaqueOnly: boolean;
 
     private _imageDataCache: {
-                data: Uint8ClampedArray | null;
-                key: string;
-            } = { data: null, key: "" };
+        data: Uint8ClampedArray | null;
+        key: string;
+    } = { data: null, key: "" };
 
     /**
      * Observable notified when the content is loaded
@@ -294,9 +292,9 @@ export class Image extends Control {
 
     /** @hidden */
     public _rotate90(n: number, preserveProperties: boolean = false): Image {
-        let canvas = document.createElement('canvas');
+        let canvas = document.createElement("canvas");
 
-        const context = canvas.getContext('2d')!;
+        const context = canvas.getContext("2d")!;
         const width = this._domImage.width;
         const height = this._domImage.height;
 
@@ -304,7 +302,7 @@ export class Image extends Control {
         canvas.height = width;
 
         context.translate(canvas.width / 2, canvas.height / 2);
-        context.rotate(n * Math.PI / 2);
+        context.rotate((n * Math.PI) / 2);
 
         context.drawImage(this._domImage, 0, 0, width, height, -width / 2, -height / 2, width, height);
 
@@ -419,10 +417,10 @@ export class Image extends Control {
 
     private _extractNinePatchSliceDataFromImage() {
         if (!this._workingCanvas) {
-            this._workingCanvas = document.createElement('canvas');
+            this._workingCanvas = document.createElement("canvas");
         }
         const canvas = this._workingCanvas;
-        const context = canvas.getContext('2d')!;
+        const context = canvas.getContext("2d")!;
         const width = this._domImage.width;
         const height = this._domImage.height;
 
@@ -468,6 +466,14 @@ export class Image extends Control {
     }
 
     /**
+     * Gets the image source url
+     */
+    @serialize()
+    public get source() {
+        return this._source;
+    }
+
+    /**
      * Gets or sets image source url
      */
     public set source(value: Nullable<string>) {
@@ -498,12 +504,12 @@ export class Image extends Control {
      * Checks for svg document with icon id present
      */
     private _svgCheck(value: string): string {
-        if (window.SVGSVGElement && (value.search(/.svg#/gi) !== -1) && (value.indexOf("#") === value.lastIndexOf("#"))) {
+        if (window.SVGSVGElement && value.search(/.svg#/gi) !== -1 && value.indexOf("#") === value.lastIndexOf("#")) {
             this._isSVG = true;
-            var svgsrc = value.split('#')[0];
-            var elemid = value.split('#')[1];
+            var svgsrc = value.split("#")[0];
+            var elemid = value.split("#")[1];
             // check if object alr exist in document
-            var svgExist = <HTMLObjectElement> document.body.querySelector('object[data="' + svgsrc + '"]');
+            var svgExist = <HTMLObjectElement>document.body.querySelector('object[data="' + svgsrc + '"]');
             if (svgExist) {
                 var svgDoc = svgExist.contentDocument;
                 // get viewbox width and height, get svg document width and height in px
@@ -511,7 +517,7 @@ export class Image extends Control {
                     var vb = svgDoc.documentElement.getAttribute("viewBox");
                     var docwidth = Number(svgDoc.documentElement.getAttribute("width"));
                     var docheight = Number(svgDoc.documentElement.getAttribute("height"));
-                    var elem = <SVGGraphicsElement> <unknown> svgDoc.getElementById(elemid);
+                    var elem = <SVGGraphicsElement>(<unknown>svgDoc.getElementById(elemid));
                     if (elem && vb && docwidth && docheight) {
                         this._getSVGAttribs(svgExist, elemid);
                         return value;
@@ -532,7 +538,7 @@ export class Image extends Control {
                 document.body.appendChild(svgImage);
                 // when the object has loaded, get the element attribs
                 svgImage.onload = () => {
-                    var svgobj = <HTMLObjectElement> document.body.querySelector('object[data="' + svgsrc + '"]');
+                    var svgobj = <HTMLObjectElement>document.body.querySelector('object[data="' + svgsrc + '"]');
                     if (svgobj) {
                         this._getSVGAttribs(svgobj, elemid);
                     }
@@ -546,7 +552,7 @@ export class Image extends Control {
 
     /**
      * Sets sourceLeft, sourceTop, sourceWidth, sourceHeight automatically
-	 * given external svg file and icon id
+     * given external svg file and icon id
      */
     private _getSVGAttribs(svgsrc: HTMLObjectElement, elemid: string) {
         var svgDoc = svgsrc.contentDocument;
@@ -575,8 +581,8 @@ export class Image extends Control {
                 // compute source coordinates and dimensions
                 this.sourceLeft = ((elem_matrix_a * elem_bbox.x + elem_matrix_e) * docwidth) / vb_width;
                 this.sourceTop = ((elem_matrix_d * elem_bbox.y + elem_matrix_f) * docheight) / vb_height;
-                this.sourceWidth = (elem_bbox.width * elem_matrix_a) * (docwidth / vb_width);
-                this.sourceHeight = (elem_bbox.height * elem_matrix_d) * (docheight / vb_height);
+                this.sourceWidth = elem_bbox.width * elem_matrix_a * (docwidth / vb_width);
+                this.sourceHeight = elem_bbox.height * elem_matrix_d * (docheight / vb_height);
                 this._svgAttributesComputationCompleted = true;
                 this.onSVGAttributesComputedObservable.notifyObservers(this);
             }
@@ -708,7 +714,8 @@ export class Image extends Control {
                     if (this._autoScale) {
                         this.synchronizeSizeWithContent();
                     }
-                    if (this.parent && this.parent.parent) { // Will update root size if root is not the top root
+                    if (this.parent && this.parent.parent) {
+                        // Will update root size if root is not the top root
                         this.parent.adaptWidthToChildren = true;
                         this.parent.adaptHeightToChildren = true;
                     }
@@ -725,7 +732,7 @@ export class Image extends Control {
         }
 
         if (!this._workingCanvas) {
-            this._workingCanvas = document.createElement('canvas');
+            this._workingCanvas = document.createElement("canvas");
         }
         const canvas = this._workingCanvas;
         const width = this._currentMeasure.width;
@@ -739,9 +746,7 @@ export class Image extends Control {
     }
 
     private _drawImage(context: CanvasRenderingContext2D, sx: number, sy: number, sw: number, sh: number, tx: number, ty: number, tw: number, th: number) {
-        context.drawImage(this._domImage,
-            sx, sy, sw, sh,
-            tx, ty, tw, th);
+        context.drawImage(this._domImage, sx, sy, sw, sh, tx, ty, tw, th);
 
         if (!this._detectPointerOnOpaqueOnly) {
             return;
@@ -750,9 +755,7 @@ export class Image extends Control {
         const canvas = this._workingCanvas!;
         context = canvas.getContext("2d")!;
 
-        context.drawImage(this._domImage,
-            sx, sy, sw, sh,
-            tx - this._currentMeasure.left, ty - this._currentMeasure.top, tw, th);
+        context.drawImage(this._domImage, sx, sy, sw, sh, tx - this._currentMeasure.left, ty - this._currentMeasure.top, tw, th);
     }
 
     public _draw(context: CanvasRenderingContext2D): void {
@@ -772,8 +775,7 @@ export class Image extends Control {
 
             width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
             height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
-        }
-        else {
+        } else {
             let rowCount = this._domImage.naturalWidth / this.cellWidth;
             let column = (this.cellId / rowCount) >> 0;
             let row = this.cellId % rowCount;
@@ -790,12 +792,10 @@ export class Image extends Control {
         if (this._loaded) {
             switch (this._stretch) {
                 case Image.STRETCH_NONE:
-                    this._drawImage(context, x, y, width, height,
-                        this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                    this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                     break;
                 case Image.STRETCH_FILL:
-                    this._drawImage(context, x, y, width, height,
-                        this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                    this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                     break;
                 case Image.STRETCH_UNIFORM:
                     var hRatio = this._currentMeasure.width / width;
@@ -804,12 +804,10 @@ export class Image extends Control {
                     var centerX = (this._currentMeasure.width - width * ratio) / 2;
                     var centerY = (this._currentMeasure.height - height * ratio) / 2;
 
-                    this._drawImage(context, x, y, width, height,
-                        this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
+                    this._drawImage(context, x, y, width, height, this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
                     break;
                 case Image.STRETCH_EXTEND:
-                    this._drawImage(context, x, y, width, height,
-                        this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                    this._drawImage(context, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                     break;
                 case Image.STRETCH_NINE_PATCH:
                     this._renderNinePatch(context);
@@ -855,21 +853,16 @@ export class Image extends Control {
         this._renderCornerPatch(context, this._sliceRight, this._sliceBottom, rightWidth, height - this._sliceBottom, this._currentMeasure.width - rightWidth, targetTopHeight);
 
         // Center
-        this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, this._sliceBottom - this._sliceTop,
-            this._currentMeasure.left + leftWidth, this._currentMeasure.top + topHeight, targetCenterWidth, targetTopHeight - topHeight);
+        this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + leftWidth, this._currentMeasure.top + topHeight, targetCenterWidth, targetTopHeight - topHeight);
 
         // Borders
-        this._drawImage(context, left, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop,
-            this._currentMeasure.left, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
+        this._drawImage(context, left, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
 
-        this._drawImage(context, this._sliceRight, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop,
-            this._currentMeasure.left + this._currentMeasure.width - rightWidth, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
+        this._drawImage(context, this._sliceRight, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + this._currentMeasure.width - rightWidth, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
 
-        this._drawImage(context, this._sliceLeft, top, centerWidth, topHeight,
-            this._currentMeasure.left + leftWidth, this._currentMeasure.top, targetCenterWidth, topHeight);
+        this._drawImage(context, this._sliceLeft, top, centerWidth, topHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top, targetCenterWidth, topHeight);
 
-        this._drawImage(context, this._sliceLeft, this._sliceBottom, centerWidth, bottomHeight,
-            this._currentMeasure.left + leftWidth, this._currentMeasure.top + targetTopHeight, targetCenterWidth, bottomHeight);
+        this._drawImage(context, this._sliceLeft, this._sliceBottom, centerWidth, bottomHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top + targetTopHeight, targetCenterWidth, bottomHeight);
     }
 
     public dispose() {