@babylonjs/gui 5.0.0-rc.6 → 5.0.0

package/2D/controls/image.js

@@ -1,888 +1,888 @@
-import { __decorate, __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Tools } from "@babylonjs/core/Misc/tools.js";
-import { Control } from "./control.js";
-import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
-import { serialize } from "@babylonjs/core/Misc/decorators.js";
-import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
-/**
- * Class used to create 2D images
- */
-var Image = /** @class */ (function (_super) {
-    __extends(Image, _super);
-    /**
-     * 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: "" };
-        /**
-         * Observable notified when the content is loaded
-         */
-        _this.onImageLoadedObservable = new Observable();
-        /**
-         * Observable notified when _sourceLeft, _sourceTop, _sourceWidth and _sourceHeight are computed
-         */
-        _this.onSVGAttributesComputedObservable = new Observable();
-        _this.source = url;
-        return _this;
-    }
-    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;
-        // 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.");
-        }
-        var canvas = engine.createCanvas(height, width);
-        var 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);
-        if (preserveProperties) {
-            rotatedImage._stretch = this._stretch;
-            rotatedImage._autoScale = this._autoScale;
-            rotatedImage._cellId = this._cellId;
-            rotatedImage._cellWidth = n % 1 ? this._cellHeight : this._cellWidth;
-            rotatedImage._cellHeight = n % 1 ? this._cellWidth : this._cellHeight;
-        }
-        this._handleRotationForSVGImage(this, rotatedImage, n);
-        this._imageDataCache.data = null;
-        return rotatedImage;
-    };
-    Image.prototype._handleRotationForSVGImage = function (srcImage, dstImage, n) {
-        var _this = this;
-        if (!srcImage._isSVG) {
-            return;
-        }
-        if (srcImage._svgAttributesComputationCompleted) {
-            this._rotate90SourceProperties(srcImage, dstImage, n);
-            this._markAsDirty();
-        }
-        else {
-            srcImage.onSVGAttributesComputedObservable.addOnce(function () {
-                _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;
-        if (n != 0) {
-            var mult = n < 0 ? -1 : 1;
-            n = n % 4;
-            for (var 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];
-                if (n < 0) {
-                    dstTop -= dstHeight;
-                }
-                else {
-                    dstLeft -= dstWidth;
-                }
-                srcLeft = dstLeft;
-                srcTop = dstTop;
-                _b = [srcHeight, srcWidth], srcWidth = _b[0], srcHeight = _b[1];
-            }
-        }
-        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;
-        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;
-            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");
-        context.drawImage(this._domImage, 0, 0, width, height);
-        var 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];
-            if (alpha > 127 && this._sliceLeft === -1) {
-                this._sliceLeft = x;
-                continue;
-            }
-            if (alpha < 127 && this._sliceLeft > -1) {
-                this._sliceRight = x;
-                break;
-            }
-        }
-        // top and bottom
-        this._sliceTop = -1;
-        this._sliceBottom = -1;
-        for (var y = 0; y < height; y++) {
-            var alpha = imageData.data[y * width * 4 + 3];
-            if (alpha > 127 && this._sliceTop === -1) {
-                this._sliceTop = y;
-                continue;
-            }
-            if (alpha < 127 && this._sliceTop > -1) {
-                this._sliceBottom = y;
-                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) {
-                this._onImageLoaded();
-            }
-            else {
-                this._domImage.onload = function () {
-                    _this._onImageLoaded();
-                };
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Image.prototype._onImageLoaded = function () {
-        this._imageDataCache.data = null;
-        this._imageWidth = this._domImage.width;
-        this._imageHeight = this._domImage.height;
-        this._loaded = true;
-        if (this._populateNinePatchSlicesFromImage) {
-            this._extractNinePatchSliceDataFromImage();
-        }
-        if (this._autoScale) {
-            this.synchronizeSizeWithContent();
-        }
-        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);
-                this._domImage.src = value;
-            }
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Checks for svg document with icon id present
-     * @param value
-     */
-    Image.prototype._svgCheck = function (value) {
-        var _this = this;
-        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];
-            // 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;
-                // 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);
-                    if (elem && vb && docwidth && docheight) {
-                        this._getSVGAttribs(svgExist_1, elemid_1);
-                        return value;
-                    }
-                }
-                // wait for object to load
-                svgExist_1.addEventListener("load", function () {
-                    _this._getSVGAttribs(svgExist_1, elemid_1);
-                });
-            }
-            else {
-                // create document object
-                var svgImage = document.createElement("object");
-                svgImage.data = svgsrc_1;
-                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 + '"]');
-                    if (svgobj) {
-                        _this._getSVGAttribs(svgobj, elemid_1);
-                    }
-                };
-            }
-            return svgsrc_1;
-        }
-        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;
-        // 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"));
-            // get element bbox and matrix transform
-            var 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;
-                if (elem.transform && elem.transform.baseVal.consolidate()) {
-                    elem_matrix_a = mainMatrix.a;
-                    elem_matrix_d = mainMatrix.d;
-                    elem_matrix_e = mainMatrix.e;
-                    elem_matrix_f = mainMatrix.f;
-                }
-                // 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._svgAttributesComputationCompleted = true;
-                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
-    });
-    /**
-     * 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)) {
-            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;
-        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;
-            this._imageDataCache.key = key;
-        }
-        x = (x - this._currentMeasure.left) | 0;
-        y = (y - this._currentMeasure.top) | 0;
-        var pickedPixel = imageData[(x + y * width) * 4 + 3];
-        return pickedPixel > 0;
-    };
-    Image.prototype._getTypeName = function () {
-        return "Image";
-    };
-    /** Force the control to synchronize with its content */
-    Image.prototype.synchronizeSizeWithContent = function () {
-        if (!this._loaded) {
-            return;
-        }
-        this.width = this._domImage.width + "px";
-        this.height = this._domImage.height + "px";
-    };
-    Image.prototype._processMeasures = function (parentMeasure, context) {
-        if (this._loaded) {
-            switch (this._stretch) {
-                case Image.STRETCH_NONE:
-                    break;
-                case Image.STRETCH_FILL:
-                    break;
-                case Image.STRETCH_UNIFORM:
-                    break;
-                case Image.STRETCH_NINE_PATCH:
-                    break;
-                case Image.STRETCH_EXTEND:
-                    if (this._autoScale) {
-                        this.synchronizeSizeWithContent();
-                    }
-                    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;
-                    }
-                    break;
-            }
-        }
-        _super.prototype._processMeasures.call(this, parentMeasure, context);
-    };
-    Image.prototype._prepareWorkingCanvasForOpaqueDetection = function () {
-        var _a, _b;
-        if (!this._detectPointerOnOpaqueOnly) {
-            return;
-        }
-        var width = this._currentMeasure.width;
-        var 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;
-            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");
-        context.clearRect(0, 0, width, height);
-    };
-    Image.prototype._drawImage = function (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;
-        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) {
-        context.save();
-        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-            context.shadowColor = this.shadowColor;
-            context.shadowBlur = this.shadowBlur;
-            context.shadowOffsetX = this.shadowOffsetX;
-            context.shadowOffsetY = this.shadowOffsetY;
-        }
-        var x, y, width, height;
-        if (this.cellId == -1) {
-            x = this._sourceLeft;
-            y = this._sourceTop;
-            width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
-            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;
-            x = this.cellWidth * row;
-            y = this.cellHeight * column;
-            width = this.cellWidth;
-            height = this.cellHeight;
-        }
-        this._prepareWorkingCanvasForOpaqueDetection();
-        this._applyStates(context);
-        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);
-                    break;
-                case Image.STRETCH_FILL:
-                    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;
-                    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);
-                    break;
-                case Image.STRETCH_NINE_PATCH:
-                    this._renderNinePatch(context);
-                    break;
-            }
-        }
-        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;
-        //Top Left
-        this._drawImage(context, 0, 0, leftWidth, topHeight, this._currentMeasure.left, this._currentMeasure.top, leftWidth, topHeight);
-        //Top
-        this._drawImage(context, this._sliceLeft, 0, centerWidth, topHeight, centerLeftOffset, this._currentMeasure.top, targetCenterWidth, topHeight);
-        //Top Right
-        this._drawImage(context, this.sliceRight, 0, rightWidth, topHeight, rightOffset, this._currentMeasure.top, rightWidth, topHeight);
-        //Left
-        this._drawImage(context, 0, this._sliceTop, leftWidth, centerHeight, this._currentMeasure.left, centerTopOffset, leftWidth, targetCenterHeight);
-        // Center
-        this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, centerHeight, centerLeftOffset, centerTopOffset, targetCenterWidth, targetCenterHeight);
-        //Right
-        this._drawImage(context, this._sliceRight, this._sliceTop, rightWidth, centerHeight, rightOffset, centerTopOffset, rightWidth, targetCenterHeight);
-        //Bottom Left
-        this._drawImage(context, 0, this._sliceBottom, leftWidth, bottomHeight, this._currentMeasure.left, bottomOffset, leftWidth, bottomHeight);
-        //Bottom
-        this._drawImage(context, this.sliceLeft, this._sliceBottom, centerWidth, bottomHeight, centerLeftOffset, bottomOffset, targetCenterWidth, bottomHeight);
-        //Bottom Right
-        this._drawImage(context, this._sliceRight, this._sliceBottom, rightWidth, bottomHeight, rightOffset, bottomOffset, rightWidth, bottomHeight);
-    };
-    Image.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-        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 };
-RegisterClass("BABYLON.GUI.Image", Image);
+import { __decorate, __extends } from "tslib";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { Control } from "./control.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
+/**
+ * Class used to create 2D images
+ */
+var Image = /** @class */ (function (_super) {
+    __extends(Image, _super);
+    /**
+     * 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: "" };
+        /**
+         * Observable notified when the content is loaded
+         */
+        _this.onImageLoadedObservable = new Observable();
+        /**
+         * Observable notified when _sourceLeft, _sourceTop, _sourceWidth and _sourceHeight are computed
+         */
+        _this.onSVGAttributesComputedObservable = new Observable();
+        _this.source = url;
+        return _this;
+    }
+    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;
+        // 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.");
+        }
+        var canvas = engine.createCanvas(height, width);
+        var 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);
+        if (preserveProperties) {
+            rotatedImage._stretch = this._stretch;
+            rotatedImage._autoScale = this._autoScale;
+            rotatedImage._cellId = this._cellId;
+            rotatedImage._cellWidth = n % 1 ? this._cellHeight : this._cellWidth;
+            rotatedImage._cellHeight = n % 1 ? this._cellWidth : this._cellHeight;
+        }
+        this._handleRotationForSVGImage(this, rotatedImage, n);
+        this._imageDataCache.data = null;
+        return rotatedImage;
+    };
+    Image.prototype._handleRotationForSVGImage = function (srcImage, dstImage, n) {
+        var _this = this;
+        if (!srcImage._isSVG) {
+            return;
+        }
+        if (srcImage._svgAttributesComputationCompleted) {
+            this._rotate90SourceProperties(srcImage, dstImage, n);
+            this._markAsDirty();
+        }
+        else {
+            srcImage.onSVGAttributesComputedObservable.addOnce(function () {
+                _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;
+        if (n != 0) {
+            var mult = n < 0 ? -1 : 1;
+            n = n % 4;
+            for (var 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];
+                if (n < 0) {
+                    dstTop -= dstHeight;
+                }
+                else {
+                    dstLeft -= dstWidth;
+                }
+                srcLeft = dstLeft;
+                srcTop = dstTop;
+                _b = [srcHeight, srcWidth], srcWidth = _b[0], srcHeight = _b[1];
+            }
+        }
+        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;
+        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;
+            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");
+        context.drawImage(this._domImage, 0, 0, width, height);
+        var 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];
+            if (alpha > 127 && this._sliceLeft === -1) {
+                this._sliceLeft = x;
+                continue;
+            }
+            if (alpha < 127 && this._sliceLeft > -1) {
+                this._sliceRight = x;
+                break;
+            }
+        }
+        // top and bottom
+        this._sliceTop = -1;
+        this._sliceBottom = -1;
+        for (var y = 0; y < height; y++) {
+            var alpha = imageData.data[y * width * 4 + 3];
+            if (alpha > 127 && this._sliceTop === -1) {
+                this._sliceTop = y;
+                continue;
+            }
+            if (alpha < 127 && this._sliceTop > -1) {
+                this._sliceBottom = y;
+                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) {
+                this._onImageLoaded();
+            }
+            else {
+                this._domImage.onload = function () {
+                    _this._onImageLoaded();
+                };
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Image.prototype._onImageLoaded = function () {
+        this._imageDataCache.data = null;
+        this._imageWidth = this._domImage.width;
+        this._imageHeight = this._domImage.height;
+        this._loaded = true;
+        if (this._populateNinePatchSlicesFromImage) {
+            this._extractNinePatchSliceDataFromImage();
+        }
+        if (this._autoScale) {
+            this.synchronizeSizeWithContent();
+        }
+        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);
+                this._domImage.src = value;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Checks for svg document with icon id present
+     * @param value
+     */
+    Image.prototype._svgCheck = function (value) {
+        var _this = this;
+        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];
+            // 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;
+                // 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);
+                    if (elem && vb && docwidth && docheight) {
+                        this._getSVGAttribs(svgExist_1, elemid_1);
+                        return value;
+                    }
+                }
+                // wait for object to load
+                svgExist_1.addEventListener("load", function () {
+                    _this._getSVGAttribs(svgExist_1, elemid_1);
+                });
+            }
+            else {
+                // create document object
+                var svgImage = document.createElement("object");
+                svgImage.data = svgsrc_1;
+                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 + '"]');
+                    if (svgobj) {
+                        _this._getSVGAttribs(svgobj, elemid_1);
+                    }
+                };
+            }
+            return svgsrc_1;
+        }
+        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;
+        // 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"));
+            // get element bbox and matrix transform
+            var 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;
+                if (elem.transform && elem.transform.baseVal.consolidate()) {
+                    elem_matrix_a = mainMatrix.a;
+                    elem_matrix_d = mainMatrix.d;
+                    elem_matrix_e = mainMatrix.e;
+                    elem_matrix_f = mainMatrix.f;
+                }
+                // 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._svgAttributesComputationCompleted = true;
+                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
+    });
+    /**
+     * 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)) {
+            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;
+        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;
+            this._imageDataCache.key = key;
+        }
+        x = (x - this._currentMeasure.left) | 0;
+        y = (y - this._currentMeasure.top) | 0;
+        var pickedPixel = imageData[(x + y * width) * 4 + 3];
+        return pickedPixel > 0;
+    };
+    Image.prototype._getTypeName = function () {
+        return "Image";
+    };
+    /** Force the control to synchronize with its content */
+    Image.prototype.synchronizeSizeWithContent = function () {
+        if (!this._loaded) {
+            return;
+        }
+        this.width = this._domImage.width + "px";
+        this.height = this._domImage.height + "px";
+    };
+    Image.prototype._processMeasures = function (parentMeasure, context) {
+        if (this._loaded) {
+            switch (this._stretch) {
+                case Image.STRETCH_NONE:
+                    break;
+                case Image.STRETCH_FILL:
+                    break;
+                case Image.STRETCH_UNIFORM:
+                    break;
+                case Image.STRETCH_NINE_PATCH:
+                    break;
+                case Image.STRETCH_EXTEND:
+                    if (this._autoScale) {
+                        this.synchronizeSizeWithContent();
+                    }
+                    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;
+                    }
+                    break;
+            }
+        }
+        _super.prototype._processMeasures.call(this, parentMeasure, context);
+    };
+    Image.prototype._prepareWorkingCanvasForOpaqueDetection = function () {
+        var _a, _b;
+        if (!this._detectPointerOnOpaqueOnly) {
+            return;
+        }
+        var width = this._currentMeasure.width;
+        var 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;
+            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");
+        context.clearRect(0, 0, width, height);
+    };
+    Image.prototype._drawImage = function (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;
+        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) {
+        context.save();
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowColor = this.shadowColor;
+            context.shadowBlur = this.shadowBlur;
+            context.shadowOffsetX = this.shadowOffsetX;
+            context.shadowOffsetY = this.shadowOffsetY;
+        }
+        var x, y, width, height;
+        if (this.cellId == -1) {
+            x = this._sourceLeft;
+            y = this._sourceTop;
+            width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
+            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;
+            x = this.cellWidth * row;
+            y = this.cellHeight * column;
+            width = this.cellWidth;
+            height = this.cellHeight;
+        }
+        this._prepareWorkingCanvasForOpaqueDetection();
+        this._applyStates(context);
+        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);
+                    break;
+                case Image.STRETCH_FILL:
+                    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;
+                    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);
+                    break;
+                case Image.STRETCH_NINE_PATCH:
+                    this._renderNinePatch(context);
+                    break;
+            }
+        }
+        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;
+        //Top Left
+        this._drawImage(context, 0, 0, leftWidth, topHeight, this._currentMeasure.left, this._currentMeasure.top, leftWidth, topHeight);
+        //Top
+        this._drawImage(context, this._sliceLeft, 0, centerWidth, topHeight, centerLeftOffset, this._currentMeasure.top, targetCenterWidth, topHeight);
+        //Top Right
+        this._drawImage(context, this.sliceRight, 0, rightWidth, topHeight, rightOffset, this._currentMeasure.top, rightWidth, topHeight);
+        //Left
+        this._drawImage(context, 0, this._sliceTop, leftWidth, centerHeight, this._currentMeasure.left, centerTopOffset, leftWidth, targetCenterHeight);
+        // Center
+        this._drawImage(context, this._sliceLeft, this._sliceTop, centerWidth, centerHeight, centerLeftOffset, centerTopOffset, targetCenterWidth, targetCenterHeight);
+        //Right
+        this._drawImage(context, this._sliceRight, this._sliceTop, rightWidth, centerHeight, rightOffset, centerTopOffset, rightWidth, targetCenterHeight);
+        //Bottom Left
+        this._drawImage(context, 0, this._sliceBottom, leftWidth, bottomHeight, this._currentMeasure.left, bottomOffset, leftWidth, bottomHeight);
+        //Bottom
+        this._drawImage(context, this.sliceLeft, this._sliceBottom, centerWidth, bottomHeight, centerLeftOffset, bottomOffset, targetCenterWidth, bottomHeight);
+        //Bottom Right
+        this._drawImage(context, this._sliceRight, this._sliceBottom, rightWidth, bottomHeight, rightOffset, bottomOffset, rightWidth, bottomHeight);
+    };
+    Image.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        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 };
+RegisterClass("BABYLON.GUI.Image", Image);
 //# sourceMappingURL=image.js.map