Merge pull request #9543 from BabylonJS/master

preview update

dist/preview release/documentation.d.ts

@@ -83893,6 +83893,10 @@ declare module BABYLON.GUI {
         private _onImageLoaded;
         private _extractNinePatchSliceDataFromImage;
         /**
+         * Gets the image source url
+         */
+        get source(): BABYLON.Nullable<string>;
+        /**
          * Gets or sets image source url
          */
         set source(value: BABYLON.Nullable<string>);

dist/preview release/gui/babylon.gui.d.ts

@@ -1765,6 +1765,10 @@ declare module BABYLON.GUI {
         private _onImageLoaded;
         private _extractNinePatchSliceDataFromImage;
         /**
+         * Gets the image source url
+         */
+        get source(): BABYLON.Nullable<string>;
+        /**
          * Gets or sets image source url
          */
         set source(value: BABYLON.Nullable<string>);

dist/preview release/gui/babylon.gui.js

@@ -97,9 +97,9 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ ({
 
 /***/ "../../node_modules/tslib/tslib.es6.js":
-/*!*****************************************************************!*\
-  !*** C:/Dev/Babylon/Babylon.js/node_modules/tslib/tslib.es6.js ***!
-  \*****************************************************************/
+/*!************************************************************************************!*\
+  !*** C:/Users/raweber/Documents/GitHub/Babylon.js/node_modules/tslib/tslib.es6.js ***!
+  \************************************************************************************/
 /*! exports provided: __extends, __assign, __rest, __decorate, __param, __metadata, __awaiter, __generator, __createBinding, __exportStar, __values, __read, __spread, __spreadArrays, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -7248,14 +7248,14 @@ var Image = /** @class */ (function (_super) {
     /** @hidden */
     Image.prototype._rotate90 = function (n, preserveProperties) {
         if (preserveProperties === void 0) { preserveProperties = false; }
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
+        var canvas = document.createElement("canvas");
+        var context = canvas.getContext("2d");
         var width = this._domImage.width;
         var 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.rotate((n * Math.PI) / 2);
         context.drawImage(this._domImage, 0, 0, width, height, -width / 2, -height / 2, width, height);
         var dataUrl = canvas.toDataURL("image/jpg");
         var rotatedImage = new Image(this.name + "rotated", dataUrl);
@@ -7353,10 +7353,10 @@ var Image = /** @class */ (function (_super) {
     };
     Image.prototype._extractNinePatchSliceDataFromImage = function () {
         if (!this._workingCanvas) {
-            this._workingCanvas = document.createElement('canvas');
+            this._workingCanvas = document.createElement("canvas");
         }
         var canvas = this._workingCanvas;
-        var context = canvas.getContext('2d');
+        var context = canvas.getContext("2d");
         var width = this._domImage.width;
         var height = this._domImage.height;
         canvas.width = width;
@@ -7394,6 +7394,12 @@ var Image = /** @class */ (function (_super) {
     };
     Object.defineProperty(Image.prototype, "source", {
         /**
+         * Gets the image source url
+         */
+        get: function () {
+            return this._source;
+        },
+        /**
          * Gets or sets image source url
          */
         set: function (value) {
@@ -7424,10 +7430,10 @@ var Image = /** @class */ (function (_super) {
      */
     Image.prototype._svgCheck = function (value) {
         var _this = this;
-        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 = document.body.querySelector('object[data="' + svgsrc + '"]');
             if (svgExist) {
@@ -7500,8 +7506,8 @@ var Image = /** @class */ (function (_super) {
                 // 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);
             }
@@ -7615,7 +7621,8 @@ var Image = /** @class */ (function (_super) {
                     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;
                     }
@@ -7629,7 +7636,7 @@ var Image = /** @class */ (function (_super) {
             return;
         }
         if (!this._workingCanvas) {
-            this._workingCanvas = document.createElement('canvas');
+            this._workingCanvas = document.createElement("canvas");
         }
         var canvas = this._workingCanvas;
         var width = this._currentMeasure.width;
@@ -7753,10 +7760,6 @@ var Image = /** @class */ (function (_super) {
     /** NINE_PATCH */
     Image.STRETCH_NINE_PATCH = 4;
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
-        Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["serialize"])(),
-        Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["expandToProperty"])("source")
-    ], Image.prototype, "_source", void 0);
-    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
     ], Image.prototype, "populateNinePatchSlicesFromImage", null);
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
@@ -7792,6 +7795,9 @@ var Image = /** @class */ (function (_super) {
     Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
         Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
     ], Image.prototype, "stretch", null);
+    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"])([
+        Object(babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["serialize"])()
+    ], Image.prototype, "source", null);
     return Image;
 }(_control__WEBPACK_IMPORTED_MODULE_2__["Control"]));
 

dist/preview release/gui/babylon.gui.module.d.ts

@@ -1815,6 +1815,10 @@ declare module "babylonjs-gui/2D/controls/image" {
         private _onImageLoaded;
         private _extractNinePatchSliceDataFromImage;
         /**
+         * Gets the image source url
+         */
+        get source(): Nullable<string>;
+        /**
          * Gets or sets image source url
          */
         set source(value: Nullable<string>);
@@ -6470,6 +6474,10 @@ declare module BABYLON.GUI {
         private _onImageLoaded;
         private _extractNinePatchSliceDataFromImage;
         /**
+         * Gets the image source url
+         */
+        get source(): BABYLON.Nullable<string>;
+        /**
          * Gets or sets image source url
          */
         set source(value: BABYLON.Nullable<string>);

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() {