@babylonjs/gui 5.21.0 → 5.22.0

package/2D/controls/image.js

@@ -1,4 +1,4 @@
-import { __decorate, __extends } from "tslib";
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
 import { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Tools } from "@babylonjs/core/Misc/tools.js";
 import { Control } from "./control.js";
@@ -8,318 +8,245 @@ import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
 /**
  * Class used to create 2D images
  */
-var Image = /** @class */ (function (_super) {
-    __extends(Image, _super);
+export class Image extends Control {
     /**
      * Creates a new Image
      * @param name defines the control name
      * @param url defines the image url
      */
-    function Image(name, url) {
-        if (url === void 0) { url = null; }
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
-        _this._workingCanvas = null;
-        _this._loaded = false;
-        _this._stretch = Image.STRETCH_FILL;
-        _this._autoScale = false;
-        _this._sourceLeft = 0;
-        _this._sourceTop = 0;
-        _this._sourceWidth = 0;
-        _this._sourceHeight = 0;
-        _this._svgAttributesComputationCompleted = false;
-        _this._isSVG = false;
-        _this._cellWidth = 0;
-        _this._cellHeight = 0;
-        _this._cellId = -1;
-        _this._populateNinePatchSlicesFromImage = false;
-        _this._imageDataCache = { data: null, key: "" };
+    constructor(name, url = null) {
+        super(name);
+        this.name = name;
+        this._workingCanvas = null;
+        this._loaded = false;
+        this._stretch = Image.STRETCH_FILL;
+        this._autoScale = false;
+        this._sourceLeft = 0;
+        this._sourceTop = 0;
+        this._sourceWidth = 0;
+        this._sourceHeight = 0;
+        this._svgAttributesComputationCompleted = false;
+        this._isSVG = false;
+        this._cellWidth = 0;
+        this._cellHeight = 0;
+        this._cellId = -1;
+        this._populateNinePatchSlicesFromImage = false;
+        this._imageDataCache = { data: null, key: "" };
         /**
          * Observable notified when the content is loaded
          */
-        _this.onImageLoadedObservable = new Observable();
+        this.onImageLoadedObservable = new Observable();
         /**
          * Observable notified when _sourceLeft, _sourceTop, _sourceWidth and _sourceHeight are computed
          */
-        _this.onSVGAttributesComputedObservable = new Observable();
-        _this.source = url;
-        return _this;
+        this.onSVGAttributesComputedObservable = new Observable();
+        this.source = url;
+    }
+    /**
+     * Gets a boolean indicating that the content is loaded
+     */
+    get isLoaded() {
+        return this._loaded;
+    }
+    /**
+     * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
+     * Beware using this as this will consume more memory as the image has to be stored twice
+     */
+    get detectPointerOnOpaqueOnly() {
+        return this._detectPointerOnOpaqueOnly;
+    }
+    set detectPointerOnOpaqueOnly(value) {
+        if (this._detectPointerOnOpaqueOnly === value) {
+            return;
+        }
+        this._detectPointerOnOpaqueOnly = value;
+    }
+    /**
+     * Gets or sets the left value for slicing (9-patch)
+     */
+    get sliceLeft() {
+        return this._sliceLeft;
+    }
+    set sliceLeft(value) {
+        if (this._sliceLeft === value) {
+            return;
+        }
+        this._sliceLeft = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the right value for slicing (9-patch)
+     */
+    get sliceRight() {
+        return this._sliceRight;
+    }
+    set sliceRight(value) {
+        if (this._sliceRight === value) {
+            return;
+        }
+        this._sliceRight = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the top value for slicing (9-patch)
+     */
+    get sliceTop() {
+        return this._sliceTop;
+    }
+    set sliceTop(value) {
+        if (this._sliceTop === value) {
+            return;
+        }
+        this._sliceTop = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the bottom value for slicing (9-patch)
+     */
+    get sliceBottom() {
+        return this._sliceBottom;
+    }
+    set sliceBottom(value) {
+        if (this._sliceBottom === value) {
+            return;
+        }
+        this._sliceBottom = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the left coordinate in the source image
+     */
+    get sourceLeft() {
+        return this._sourceLeft;
+    }
+    set sourceLeft(value) {
+        if (this._sourceLeft === value) {
+            return;
+        }
+        this._sourceLeft = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the top coordinate in the source image
+     */
+    get sourceTop() {
+        return this._sourceTop;
+    }
+    set sourceTop(value) {
+        if (this._sourceTop === value) {
+            return;
+        }
+        this._sourceTop = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the width to capture in the source image
+     */
+    get sourceWidth() {
+        return this._sourceWidth;
+    }
+    set sourceWidth(value) {
+        if (this._sourceWidth === value) {
+            return;
+        }
+        this._sourceWidth = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the height to capture in the source image
+     */
+    get sourceHeight() {
+        return this._sourceHeight;
+    }
+    set sourceHeight(value) {
+        if (this._sourceHeight === value) {
+            return;
+        }
+        this._sourceHeight = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets the image width
+     */
+    get imageWidth() {
+        return this._imageWidth;
+    }
+    /**
+     * Gets the image height
+     */
+    get imageHeight() {
+        return this._imageHeight;
+    }
+    /**
+     * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
+     */
+    get populateNinePatchSlicesFromImage() {
+        return this._populateNinePatchSlicesFromImage;
+    }
+    set populateNinePatchSlicesFromImage(value) {
+        if (this._populateNinePatchSlicesFromImage === value) {
+            return;
+        }
+        this._populateNinePatchSlicesFromImage = value;
+        if (this._populateNinePatchSlicesFromImage && this._loaded) {
+            this._extractNinePatchSliceDataFromImage();
+        }
+    }
+    /** Indicates if the format of the image is SVG */
+    get isSVG() {
+        return this._isSVG;
+    }
+    /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
+    get svgAttributesComputationCompleted() {
+        return this._svgAttributesComputationCompleted;
+    }
+    /**
+     * Gets or sets a boolean indicating if the image can force its container to adapt its size
+     * @see https://doc.babylonjs.com/how_to/gui#image
+     */
+    get autoScale() {
+        return this._autoScale;
+    }
+    set autoScale(value) {
+        if (this._autoScale === value) {
+            return;
+        }
+        this._autoScale = value;
+        if (value && this._loaded) {
+            this.synchronizeSizeWithContent();
+        }
+    }
+    /** Gets or sets the stretching mode used by the image */
+    get stretch() {
+        return this._stretch;
+    }
+    set stretch(value) {
+        if (this._stretch === value) {
+            return;
+        }
+        this._stretch = value;
+        this._markAsDirty();
     }
-    Object.defineProperty(Image.prototype, "isLoaded", {
-        /**
-         * Gets a boolean indicating that the content is loaded
-         */
-        get: function () {
-            return this._loaded;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "detectPointerOnOpaqueOnly", {
-        /**
-         * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
-         * Beware using this as this will consume more memory as the image has to be stored twice
-         */
-        get: function () {
-            return this._detectPointerOnOpaqueOnly;
-        },
-        set: function (value) {
-            if (this._detectPointerOnOpaqueOnly === value) {
-                return;
-            }
-            this._detectPointerOnOpaqueOnly = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sliceLeft", {
-        /**
-         * Gets or sets the left value for slicing (9-patch)
-         */
-        get: function () {
-            return this._sliceLeft;
-        },
-        set: function (value) {
-            if (this._sliceLeft === value) {
-                return;
-            }
-            this._sliceLeft = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sliceRight", {
-        /**
-         * Gets or sets the right value for slicing (9-patch)
-         */
-        get: function () {
-            return this._sliceRight;
-        },
-        set: function (value) {
-            if (this._sliceRight === value) {
-                return;
-            }
-            this._sliceRight = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sliceTop", {
-        /**
-         * Gets or sets the top value for slicing (9-patch)
-         */
-        get: function () {
-            return this._sliceTop;
-        },
-        set: function (value) {
-            if (this._sliceTop === value) {
-                return;
-            }
-            this._sliceTop = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sliceBottom", {
-        /**
-         * Gets or sets the bottom value for slicing (9-patch)
-         */
-        get: function () {
-            return this._sliceBottom;
-        },
-        set: function (value) {
-            if (this._sliceBottom === value) {
-                return;
-            }
-            this._sliceBottom = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sourceLeft", {
-        /**
-         * Gets or sets the left coordinate in the source image
-         */
-        get: function () {
-            return this._sourceLeft;
-        },
-        set: function (value) {
-            if (this._sourceLeft === value) {
-                return;
-            }
-            this._sourceLeft = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sourceTop", {
-        /**
-         * Gets or sets the top coordinate in the source image
-         */
-        get: function () {
-            return this._sourceTop;
-        },
-        set: function (value) {
-            if (this._sourceTop === value) {
-                return;
-            }
-            this._sourceTop = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sourceWidth", {
-        /**
-         * Gets or sets the width to capture in the source image
-         */
-        get: function () {
-            return this._sourceWidth;
-        },
-        set: function (value) {
-            if (this._sourceWidth === value) {
-                return;
-            }
-            this._sourceWidth = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "sourceHeight", {
-        /**
-         * Gets or sets the height to capture in the source image
-         */
-        get: function () {
-            return this._sourceHeight;
-        },
-        set: function (value) {
-            if (this._sourceHeight === value) {
-                return;
-            }
-            this._sourceHeight = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "imageWidth", {
-        /**
-         * Gets the image width
-         */
-        get: function () {
-            return this._imageWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "imageHeight", {
-        /**
-         * Gets the image height
-         */
-        get: function () {
-            return this._imageHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "populateNinePatchSlicesFromImage", {
-        /**
-         * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
-         */
-        get: function () {
-            return this._populateNinePatchSlicesFromImage;
-        },
-        set: function (value) {
-            if (this._populateNinePatchSlicesFromImage === value) {
-                return;
-            }
-            this._populateNinePatchSlicesFromImage = value;
-            if (this._populateNinePatchSlicesFromImage && this._loaded) {
-                this._extractNinePatchSliceDataFromImage();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "isSVG", {
-        /** Indicates if the format of the image is SVG */
-        get: function () {
-            return this._isSVG;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "svgAttributesComputationCompleted", {
-        /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
-        get: function () {
-            return this._svgAttributesComputationCompleted;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "autoScale", {
-        /**
-         * Gets or sets a boolean indicating if the image can force its container to adapt its size
-         * @see https://doc.babylonjs.com/how_to/gui#image
-         */
-        get: function () {
-            return this._autoScale;
-        },
-        set: function (value) {
-            if (this._autoScale === value) {
-                return;
-            }
-            this._autoScale = value;
-            if (value && this._loaded) {
-                this.synchronizeSizeWithContent();
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "stretch", {
-        /** Gets or sets the stretching mode used by the image */
-        get: function () {
-            return this._stretch;
-        },
-        set: function (value) {
-            if (this._stretch === value) {
-                return;
-            }
-            this._stretch = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
     /**
      * @param n
      * @param preserveProperties
      * @hidden
      */
-    Image.prototype._rotate90 = function (n, preserveProperties) {
-        var _a, _b;
-        if (preserveProperties === void 0) { preserveProperties = false; }
-        var width = this._domImage.width;
-        var height = this._domImage.height;
+    _rotate90(n, preserveProperties = false) {
+        const width = this._domImage.width;
+        const height = this._domImage.height;
         // Should abstract platform instead of using LastCreatedEngine
-        var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || EngineStore.LastCreatedEngine;
+        const engine = this._host?.getScene()?.getEngine() || EngineStore.LastCreatedEngine;
         if (!engine) {
             throw new Error("Invalid engine. Unable to create a canvas.");
         }
-        var canvas = engine.createCanvas(height, width);
-        var context = canvas.getContext("2d");
+        const canvas = engine.createCanvas(height, width);
+        const context = canvas.getContext("2d");
         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);
-        var dataUrl = canvas.toDataURL("image/jpg");
-        var rotatedImage = new Image(this.name + "rotated", dataUrl);
+        const dataUrl = canvas.toDataURL("image/jpg");
+        const rotatedImage = new Image(this.name + "rotated", dataUrl);
         if (preserveProperties) {
             rotatedImage._stretch = this._stretch;
             rotatedImage._autoScale = this._autoScale;
@@ -330,9 +257,8 @@ var Image = /** @class */ (function (_super) {
         this._handleRotationForSVGImage(this, rotatedImage, n);
         this._imageDataCache.data = null;
         return rotatedImage;
-    };
-    Image.prototype._handleRotationForSVGImage = function (srcImage, dstImage, n) {
-        var _this = this;
+    }
+    _handleRotationForSVGImage(srcImage, dstImage, n) {
         if (!srcImage._isSVG) {
             return;
         }
@@ -341,23 +267,22 @@ var Image = /** @class */ (function (_super) {
             this._markAsDirty();
         }
         else {
-            srcImage.onSVGAttributesComputedObservable.addOnce(function () {
-                _this._rotate90SourceProperties(srcImage, dstImage, n);
-                _this._markAsDirty();
+            srcImage.onSVGAttributesComputedObservable.addOnce(() => {
+                this._rotate90SourceProperties(srcImage, dstImage, n);
+                this._markAsDirty();
             });
         }
-    };
-    Image.prototype._rotate90SourceProperties = function (srcImage, dstImage, n) {
-        var _a, _b;
-        var srcLeft = srcImage.sourceLeft, srcTop = srcImage.sourceTop, srcWidth = srcImage.domImage.width, srcHeight = srcImage.domImage.height;
-        var dstLeft = srcLeft, dstTop = srcTop, dstWidth = srcImage.sourceWidth, dstHeight = srcImage.sourceHeight;
+    }
+    _rotate90SourceProperties(srcImage, dstImage, n) {
+        let srcLeft = srcImage.sourceLeft, srcTop = srcImage.sourceTop, srcWidth = srcImage.domImage.width, srcHeight = srcImage.domImage.height;
+        let dstLeft = srcLeft, dstTop = srcTop, dstWidth = srcImage.sourceWidth, dstHeight = srcImage.sourceHeight;
         if (n != 0) {
-            var mult = n < 0 ? -1 : 1;
+            const mult = n < 0 ? -1 : 1;
             n = n % 4;
-            for (var i = 0; i < Math.abs(n); ++i) {
+            for (let i = 0; i < Math.abs(n); ++i) {
                 dstLeft = -(srcTop - srcHeight / 2) * mult + srcHeight / 2;
                 dstTop = (srcLeft - srcWidth / 2) * mult + srcWidth / 2;
-                _a = [dstHeight, dstWidth], dstWidth = _a[0], dstHeight = _a[1];
+                [dstWidth, dstHeight] = [dstHeight, dstWidth];
                 if (n < 0) {
                     dstTop -= dstHeight;
                 }
@@ -366,34 +291,33 @@ var Image = /** @class */ (function (_super) {
                 }
                 srcLeft = dstLeft;
                 srcTop = dstTop;
-                _b = [srcHeight, srcWidth], srcWidth = _b[0], srcHeight = _b[1];
+                [srcWidth, srcHeight] = [srcHeight, srcWidth];
             }
         }
         dstImage.sourceLeft = dstLeft;
         dstImage.sourceTop = dstTop;
         dstImage.sourceWidth = dstWidth;
         dstImage.sourceHeight = dstHeight;
-    };
-    Image.prototype._extractNinePatchSliceDataFromImage = function () {
-        var _a, _b;
-        var width = this._domImage.width;
-        var height = this._domImage.height;
+    }
+    _extractNinePatchSliceDataFromImage() {
+        const width = this._domImage.width;
+        const height = this._domImage.height;
         if (!this._workingCanvas) {
-            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || EngineStore.LastCreatedEngine;
+            const engine = this._host?.getScene()?.getEngine() || EngineStore.LastCreatedEngine;
             if (!engine) {
                 throw new Error("Invalid engine. Unable to create a canvas.");
             }
             this._workingCanvas = engine.createCanvas(width, height);
         }
-        var canvas = this._workingCanvas;
-        var context = canvas.getContext("2d");
+        const canvas = this._workingCanvas;
+        const context = canvas.getContext("2d");
         context.drawImage(this._domImage, 0, 0, width, height);
-        var imageData = context.getImageData(0, 0, width, height);
+        const imageData = context.getImageData(0, 0, width, height);
         // Left and right
         this._sliceLeft = -1;
         this._sliceRight = -1;
-        for (var x = 0; x < width; x++) {
-            var alpha = imageData.data[x * 4 + 3];
+        for (let x = 0; x < width; x++) {
+            const alpha = imageData.data[x * 4 + 3];
             if (alpha > 127 && this._sliceLeft === -1) {
                 this._sliceLeft = x;
                 continue;
@@ -406,8 +330,8 @@ var Image = /** @class */ (function (_super) {
         // top and bottom
         this._sliceTop = -1;
         this._sliceBottom = -1;
-        for (var y = 0; y < height; y++) {
-            var alpha = imageData.data[y * width * 4 + 3];
+        for (let y = 0; y < height; y++) {
+            const alpha = imageData.data[y * width * 4 + 3];
             if (alpha > 127 && this._sliceTop === -1) {
                 this._sliceTop = y;
                 continue;
@@ -417,32 +341,27 @@ var Image = /** @class */ (function (_super) {
                 break;
             }
         }
-    };
-    Object.defineProperty(Image.prototype, "domImage", {
-        get: function () {
-            return this._domImage;
-        },
-        /**
-         * Gets or sets the internal DOM image used to render the control
-         */
-        set: function (value) {
-            var _this = this;
-            this._domImage = value;
-            this._loaded = false;
-            this._imageDataCache.data = null;
-            if (this._domImage.width) {
+    }
+    /**
+     * Gets or sets the internal DOM image used to render the control
+     */
+    set domImage(value) {
+        this._domImage = value;
+        this._loaded = false;
+        this._imageDataCache.data = null;
+        if (this._domImage.width) {
+            this._onImageLoaded();
+        }
+        else {
+            this._domImage.onload = () => {
                 this._onImageLoaded();
-            }
-            else {
-                this._domImage.onload = function () {
-                    _this._onImageLoaded();
-                };
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Image.prototype._onImageLoaded = function () {
+            };
+        }
+    }
+    get domImage() {
+        return this._domImage;
+    }
+    _onImageLoaded() {
         this._imageDataCache.data = null;
         this._imageWidth = this._domImage.width;
         this._imageHeight = this._domImage.height;
@@ -455,123 +374,116 @@ var Image = /** @class */ (function (_super) {
         }
         this.onImageLoadedObservable.notifyObservers(this);
         this._markAsDirty();
-    };
-    Object.defineProperty(Image.prototype, "source", {
-        /**
-         * Gets the image source url
-         */
-        get: function () {
-            return this._source;
-        },
-        /**
-         * Gets or sets image source url
-         */
-        set: function (value) {
-            var _this = this;
-            var _a, _b;
-            if (this._source === value) {
-                return;
-            }
-            this._loaded = false;
-            this._source = value;
-            this._imageDataCache.data = null;
-            if (value) {
-                value = this._svgCheck(value);
-            }
-            // Should abstract platform instead of using LastCreatedEngine
-            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || EngineStore.LastCreatedEngine;
-            if (!engine) {
-                throw new Error("Invalid engine. Unable to create a canvas.");
-            }
-            this._domImage = engine.createCanvasImage();
-            this._domImage.onload = function () {
-                _this._onImageLoaded();
-            };
-            if (value) {
-                Tools.SetCorsBehavior(value, this._domImage);
-                Tools.SetReferrerPolicyBehavior(this.referrerPolicy, this._domImage);
-                this._domImage.src = value;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    /**
+     * Gets the image source url
+     */
+    get source() {
+        return this._source;
+    }
+    /**
+     * Gets or sets image source url
+     */
+    set source(value) {
+        if (this._source === value) {
+            return;
+        }
+        this._loaded = false;
+        this._source = value;
+        this._imageDataCache.data = null;
+        if (value) {
+            value = this._svgCheck(value);
+        }
+        // Should abstract platform instead of using LastCreatedEngine
+        const engine = this._host?.getScene()?.getEngine() || EngineStore.LastCreatedEngine;
+        if (!engine) {
+            throw new Error("Invalid engine. Unable to create a canvas.");
+        }
+        this._domImage = engine.createCanvasImage();
+        this._domImage.onload = () => {
+            this._onImageLoaded();
+        };
+        if (value) {
+            Tools.SetCorsBehavior(value, this._domImage);
+            Tools.SetReferrerPolicyBehavior(this.referrerPolicy, this._domImage);
+            this._domImage.src = value;
+        }
+    }
     /**
      * Checks for svg document with icon id present
      * @param value
      */
-    Image.prototype._svgCheck = function (value) {
-        var _this = this;
+    _svgCheck(value) {
         if (window.SVGSVGElement && value.search(/.svg#/gi) !== -1 && value.indexOf("#") === value.lastIndexOf("#")) {
             this._isSVG = true;
-            var svgsrc_1 = value.split("#")[0];
-            var elemid_1 = value.split("#")[1];
+            const svgsrc = value.split("#")[0];
+            const elemid = value.split("#")[1];
             // check if object alr exist in document
-            var svgExist_1 = document.body.querySelector('object[data="' + svgsrc_1 + '"]');
-            if (svgExist_1) {
-                var svgDoc = svgExist_1.contentDocument;
+            const svgExist = document.body.querySelector('object[data="' + svgsrc + '"]');
+            if (svgExist) {
+                const svgDoc = svgExist.contentDocument;
                 // get viewbox width and height, get svg document width and height in px
                 if (svgDoc && svgDoc.documentElement) {
-                    var vb = svgDoc.documentElement.getAttribute("viewBox");
-                    var docwidth = Number(svgDoc.documentElement.getAttribute("width"));
-                    var docheight = Number(svgDoc.documentElement.getAttribute("height"));
-                    var elem = svgDoc.getElementById(elemid_1);
+                    const vb = svgDoc.documentElement.getAttribute("viewBox");
+                    const docwidth = Number(svgDoc.documentElement.getAttribute("width"));
+                    const docheight = Number(svgDoc.documentElement.getAttribute("height"));
+                    const elem = svgDoc.getElementById(elemid);
                     if (elem && vb && docwidth && docheight) {
-                        this._getSVGAttribs(svgExist_1, elemid_1);
+                        this._getSVGAttribs(svgExist, elemid);
                         return value;
                     }
                 }
                 // wait for object to load
-                svgExist_1.addEventListener("load", function () {
-                    _this._getSVGAttribs(svgExist_1, elemid_1);
+                svgExist.addEventListener("load", () => {
+                    this._getSVGAttribs(svgExist, elemid);
                 });
             }
             else {
                 // create document object
-                var svgImage = document.createElement("object");
-                svgImage.data = svgsrc_1;
+                const svgImage = document.createElement("object");
+                svgImage.data = svgsrc;
                 svgImage.type = "image/svg+xml";
                 svgImage.width = "0%";
                 svgImage.height = "0%";
                 document.body.appendChild(svgImage);
                 // when the object has loaded, get the element attribs
-                svgImage.onload = function () {
-                    var svgobj = document.body.querySelector('object[data="' + svgsrc_1 + '"]');
+                svgImage.onload = () => {
+                    const svgobj = document.body.querySelector('object[data="' + svgsrc + '"]');
                     if (svgobj) {
-                        _this._getSVGAttribs(svgobj, elemid_1);
+                        this._getSVGAttribs(svgobj, elemid);
                     }
                 };
             }
-            return svgsrc_1;
+            return svgsrc;
         }
         else {
             return value;
         }
-    };
+    }
     /**
      * Sets sourceLeft, sourceTop, sourceWidth, sourceHeight automatically
      * given external svg file and icon id
      * @param svgsrc
      * @param elemid
      */
-    Image.prototype._getSVGAttribs = function (svgsrc, elemid) {
-        var svgDoc = svgsrc.contentDocument;
+    _getSVGAttribs(svgsrc, elemid) {
+        const svgDoc = svgsrc.contentDocument;
         // get viewbox width and height, get svg document width and height in px
         if (svgDoc && svgDoc.documentElement) {
-            var vb = svgDoc.documentElement.getAttribute("viewBox");
-            var docwidth = Number(svgDoc.documentElement.getAttribute("width"));
-            var docheight = Number(svgDoc.documentElement.getAttribute("height"));
+            const vb = svgDoc.documentElement.getAttribute("viewBox");
+            const docwidth = Number(svgDoc.documentElement.getAttribute("width"));
+            const docheight = Number(svgDoc.documentElement.getAttribute("height"));
             // get element bbox and matrix transform
-            var elem = svgDoc.getElementById(elemid);
+            const elem = svgDoc.getElementById(elemid);
             if (vb && docwidth && docheight && elem) {
-                var vb_width = Number(vb.split(" ")[2]);
-                var vb_height = Number(vb.split(" ")[3]);
-                var elem_bbox = elem.getBBox();
-                var elem_matrix_a = 1;
-                var elem_matrix_d = 1;
-                var elem_matrix_e = 0;
-                var elem_matrix_f = 0;
-                var mainMatrix = elem.transform.baseVal.consolidate().matrix;
+                const vb_width = Number(vb.split(" ")[2]);
+                const vb_height = Number(vb.split(" ")[3]);
+                const elem_bbox = elem.getBBox();
+                let elem_matrix_a = 1;
+                let elem_matrix_d = 1;
+                let elem_matrix_e = 0;
+                let elem_matrix_f = 0;
+                const mainMatrix = elem.transform.baseVal.consolidate().matrix;
                 if (elem.transform && elem.transform.baseVal.consolidate()) {
                     elem_matrix_a = mainMatrix.a;
                     elem_matrix_d = mainMatrix.d;
@@ -587,101 +499,89 @@ var Image = /** @class */ (function (_super) {
                 this.onSVGAttributesComputedObservable.notifyObservers(this);
             }
         }
-    };
-    Object.defineProperty(Image.prototype, "cellWidth", {
-        /**
-         * Gets or sets the cell width to use when animation sheet is enabled
-         * @see https://doc.babylonjs.com/how_to/gui#image
-         */
-        get: function () {
-            return this._cellWidth;
-        },
-        set: function (value) {
-            if (this._cellWidth === value) {
-                return;
-            }
-            this._cellWidth = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "cellHeight", {
-        /**
-         * Gets or sets the cell height to use when animation sheet is enabled
-         * @see https://doc.babylonjs.com/how_to/gui#image
-         */
-        get: function () {
-            return this._cellHeight;
-        },
-        set: function (value) {
-            if (this._cellHeight === value) {
-                return;
-            }
-            this._cellHeight = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Image.prototype, "cellId", {
-        /**
-         * Gets or sets the cell id to use (this will turn on the animation sheet mode)
-         * @see https://doc.babylonjs.com/how_to/gui#image
-         */
-        get: function () {
-            return this._cellId;
-        },
-        set: function (value) {
-            if (this._cellId === value) {
-                return;
-            }
-            this._cellId = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
+    }
+    /**
+     * Gets or sets the cell width to use when animation sheet is enabled
+     * @see https://doc.babylonjs.com/how_to/gui#image
+     */
+    get cellWidth() {
+        return this._cellWidth;
+    }
+    set cellWidth(value) {
+        if (this._cellWidth === value) {
+            return;
+        }
+        this._cellWidth = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the cell height to use when animation sheet is enabled
+     * @see https://doc.babylonjs.com/how_to/gui#image
+     */
+    get cellHeight() {
+        return this._cellHeight;
+    }
+    set cellHeight(value) {
+        if (this._cellHeight === value) {
+            return;
+        }
+        this._cellHeight = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the cell id to use (this will turn on the animation sheet mode)
+     * @see https://doc.babylonjs.com/how_to/gui#image
+     */
+    get cellId() {
+        return this._cellId;
+    }
+    set cellId(value) {
+        if (this._cellId === value) {
+            return;
+        }
+        this._cellId = value;
+        this._markAsDirty();
+    }
     /**
      * Tests if a given coordinates belong to the current control
      * @param x defines x coordinate to test
      * @param y defines y coordinate to test
      * @returns true if the coordinates are inside the control
      */
-    Image.prototype.contains = function (x, y) {
-        if (!_super.prototype.contains.call(this, x, y)) {
+    contains(x, y) {
+        if (!super.contains(x, y)) {
             return false;
         }
         if (!this._detectPointerOnOpaqueOnly || !this._workingCanvas) {
             return true;
         }
-        var width = this._currentMeasure.width | 0;
-        var height = this._currentMeasure.height | 0;
-        var key = width + "_" + height;
-        var imageData = this._imageDataCache.data;
+        const width = this._currentMeasure.width | 0;
+        const height = this._currentMeasure.height | 0;
+        const key = width + "_" + height;
+        let imageData = this._imageDataCache.data;
         if (!imageData || this._imageDataCache.key !== key) {
-            var canvas = this._workingCanvas;
-            var context_1 = canvas.getContext("2d");
-            this._imageDataCache.data = imageData = context_1.getImageData(0, 0, width, height).data;
+            const canvas = this._workingCanvas;
+            const context = canvas.getContext("2d");
+            this._imageDataCache.data = imageData = context.getImageData(0, 0, width, height).data;
             this._imageDataCache.key = key;
         }
         x = (x - this._currentMeasure.left) | 0;
         y = (y - this._currentMeasure.top) | 0;
-        var pickedPixel = imageData[(x + y * width) * 4 + 3];
+        const pickedPixel = imageData[(x + y * width) * 4 + 3];
         return pickedPixel > 0;
-    };
-    Image.prototype._getTypeName = function () {
+    }
+    _getTypeName() {
         return "Image";
-    };
+    }
     /** Force the control to synchronize with its content */
-    Image.prototype.synchronizeSizeWithContent = function () {
+    synchronizeSizeWithContent() {
         if (!this._loaded) {
             return;
         }
         this.width = this._domImage.width + "px";
         this.height = this._domImage.height + "px";
-    };
-    Image.prototype._processMeasures = function (parentMeasure, context) {
+    }
+    _processMeasures(parentMeasure, context) {
         if (this._loaded) {
             switch (this._stretch) {
                 case Image.STRETCH_NONE:
@@ -704,36 +604,35 @@ var Image = /** @class */ (function (_super) {
                     break;
             }
         }
-        _super.prototype._processMeasures.call(this, parentMeasure, context);
-    };
-    Image.prototype._prepareWorkingCanvasForOpaqueDetection = function () {
-        var _a, _b;
+        super._processMeasures(parentMeasure, context);
+    }
+    _prepareWorkingCanvasForOpaqueDetection() {
         if (!this._detectPointerOnOpaqueOnly) {
             return;
         }
-        var width = this._currentMeasure.width;
-        var height = this._currentMeasure.height;
+        const width = this._currentMeasure.width;
+        const height = this._currentMeasure.height;
         if (!this._workingCanvas) {
-            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || EngineStore.LastCreatedEngine;
+            const engine = this._host?.getScene()?.getEngine() || EngineStore.LastCreatedEngine;
             if (!engine) {
                 throw new Error("Invalid engine. Unable to create a canvas.");
             }
             this._workingCanvas = engine.createCanvas(width, height);
         }
-        var canvas = this._workingCanvas;
-        var context = canvas.getContext("2d");
+        const canvas = this._workingCanvas;
+        const context = canvas.getContext("2d");
         context.clearRect(0, 0, width, height);
-    };
-    Image.prototype._drawImage = function (context, sx, sy, sw, sh, tx, ty, tw, th) {
+    }
+    _drawImage(context, sx, sy, sw, sh, tx, ty, tw, th) {
         context.drawImage(this._domImage, sx, sy, sw, sh, tx, ty, tw, th);
         if (!this._detectPointerOnOpaqueOnly) {
             return;
         }
-        var canvas = this._workingCanvas;
+        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);
-    };
-    Image.prototype._draw = function (context) {
+    }
+    _draw(context) {
         context.save();
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
             context.shadowColor = this.shadowColor;
@@ -741,7 +640,7 @@ var Image = /** @class */ (function (_super) {
             context.shadowOffsetX = this.shadowOffsetX;
             context.shadowOffsetY = this.shadowOffsetY;
         }
-        var x, y, width, height;
+        let x, y, width, height;
         if (this.cellId == -1) {
             x = this._sourceLeft;
             y = this._sourceTop;
@@ -749,9 +648,9 @@ var Image = /** @class */ (function (_super) {
             height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
         }
         else {
-            var rowCount = this._domImage.naturalWidth / this.cellWidth;
-            var column = (this.cellId / rowCount) >> 0;
-            var row = this.cellId % rowCount;
+            const rowCount = this._domImage.naturalWidth / this.cellWidth;
+            const column = (this.cellId / rowCount) >> 0;
+            const row = this.cellId % rowCount;
             x = this.cellWidth * row;
             y = this.cellHeight * column;
             width = this.cellWidth;
@@ -768,11 +667,11 @@ var Image = /** @class */ (function (_super) {
                     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;
-                    var vRatio = this._currentMeasure.height / height;
-                    var ratio = Math.min(hRatio, vRatio);
-                    var centerX = (this._currentMeasure.width - width * ratio) / 2;
-                    var centerY = (this._currentMeasure.height - height * ratio) / 2;
+                    const hRatio = this._currentMeasure.width / width;
+                    const vRatio = this._currentMeasure.height / height;
+                    const ratio = Math.min(hRatio, vRatio);
+                    const centerX = (this._currentMeasure.width - width * ratio) / 2;
+                    const 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);
                     break;
                 }
@@ -785,20 +684,20 @@ var Image = /** @class */ (function (_super) {
             }
         }
         context.restore();
-    };
-    Image.prototype._renderNinePatch = function (context) {
-        var leftWidth = this._sliceLeft;
-        var topHeight = this._sliceTop;
-        var bottomHeight = this._imageHeight - this._sliceBottom;
-        var rightWidth = this._imageWidth - this._sliceRight;
-        var centerWidth = this._sliceRight - this._sliceLeft;
-        var centerHeight = this._sliceBottom - this._sliceTop;
-        var targetCenterWidth = this._currentMeasure.width - rightWidth - leftWidth + 2;
-        var targetCenterHeight = this._currentMeasure.height - bottomHeight - topHeight + 2;
-        var centerLeftOffset = this._currentMeasure.left + leftWidth - 1;
-        var centerTopOffset = this._currentMeasure.top + topHeight - 1;
-        var rightOffset = this._currentMeasure.left + this._currentMeasure.width - rightWidth;
-        var bottomOffset = this._currentMeasure.top + this._currentMeasure.height - bottomHeight;
+    }
+    _renderNinePatch(context) {
+        const leftWidth = this._sliceLeft;
+        const topHeight = this._sliceTop;
+        const bottomHeight = this._imageHeight - this._sliceBottom;
+        const rightWidth = this._imageWidth - this._sliceRight;
+        const centerWidth = this._sliceRight - this._sliceLeft;
+        const centerHeight = this._sliceBottom - this._sliceTop;
+        const targetCenterWidth = this._currentMeasure.width - rightWidth - leftWidth + 2;
+        const targetCenterHeight = this._currentMeasure.height - bottomHeight - topHeight + 2;
+        const centerLeftOffset = this._currentMeasure.left + leftWidth - 1;
+        const centerTopOffset = this._currentMeasure.top + topHeight - 1;
+        const rightOffset = this._currentMeasure.left + this._currentMeasure.width - rightWidth;
+        const bottomOffset = this._currentMeasure.top + this._currentMeasure.height - bottomHeight;
         //Top Left
         this._drawImage(context, 0, 0, leftWidth, topHeight, this._currentMeasure.left, this._currentMeasure.top, leftWidth, topHeight);
         //Top
@@ -825,73 +724,71 @@ var Image = /** @class */ (function (_super) {
         //Bottom Right
         context.clearRect(rightOffset, bottomOffset, rightWidth, bottomHeight);
         this._drawImage(context, this._sliceRight, this._sliceBottom, rightWidth, bottomHeight, rightOffset, bottomOffset, rightWidth, bottomHeight);
-    };
-    Image.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
+    }
+    dispose() {
+        super.dispose();
         this.onImageLoadedObservable.clear();
         this.onSVGAttributesComputedObservable.clear();
-    };
-    // Static
-    /** STRETCH_NONE */
-    Image.STRETCH_NONE = 0;
-    /** STRETCH_FILL */
-    Image.STRETCH_FILL = 1;
-    /** STRETCH_UNIFORM */
-    Image.STRETCH_UNIFORM = 2;
-    /** STRETCH_EXTEND */
-    Image.STRETCH_EXTEND = 3;
-    /** NINE_PATCH */
-    Image.STRETCH_NINE_PATCH = 4;
-    __decorate([
-        serialize()
-    ], Image.prototype, "detectPointerOnOpaqueOnly", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sliceLeft", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sliceRight", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sliceTop", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sliceBottom", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sourceLeft", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sourceTop", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sourceWidth", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "sourceHeight", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "populateNinePatchSlicesFromImage", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "autoScale", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "stretch", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "source", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "cellWidth", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "cellHeight", null);
-    __decorate([
-        serialize()
-    ], Image.prototype, "cellId", null);
-    return Image;
-}(Control));
-export { Image };
+    }
+}
+// Static
+/** STRETCH_NONE */
+Image.STRETCH_NONE = 0;
+/** STRETCH_FILL */
+Image.STRETCH_FILL = 1;
+/** STRETCH_UNIFORM */
+Image.STRETCH_UNIFORM = 2;
+/** STRETCH_EXTEND */
+Image.STRETCH_EXTEND = 3;
+/** NINE_PATCH */
+Image.STRETCH_NINE_PATCH = 4;
+__decorate([
+    serialize()
+], Image.prototype, "detectPointerOnOpaqueOnly", null);
+__decorate([
+    serialize()
+], Image.prototype, "sliceLeft", null);
+__decorate([
+    serialize()
+], Image.prototype, "sliceRight", null);
+__decorate([
+    serialize()
+], Image.prototype, "sliceTop", null);
+__decorate([
+    serialize()
+], Image.prototype, "sliceBottom", null);
+__decorate([
+    serialize()
+], Image.prototype, "sourceLeft", null);
+__decorate([
+    serialize()
+], Image.prototype, "sourceTop", null);
+__decorate([
+    serialize()
+], Image.prototype, "sourceWidth", null);
+__decorate([
+    serialize()
+], Image.prototype, "sourceHeight", null);
+__decorate([
+    serialize()
+], Image.prototype, "populateNinePatchSlicesFromImage", null);
+__decorate([
+    serialize()
+], Image.prototype, "autoScale", null);
+__decorate([
+    serialize()
+], Image.prototype, "stretch", null);
+__decorate([
+    serialize()
+], Image.prototype, "source", null);
+__decorate([
+    serialize()
+], Image.prototype, "cellWidth", null);
+__decorate([
+    serialize()
+], Image.prototype, "cellHeight", null);
+__decorate([
+    serialize()
+], Image.prototype, "cellId", null);
 RegisterClass("BABYLON.GUI.Image", Image);
 //# sourceMappingURL=image.js.map