@babylonjs/gui 5.0.0-alpha.6 → 5.0.0-alpha.60

package/2D/controls/image.d.ts

@@ -2,6 +2,7 @@ import { Nullable } from "@babylonjs/core/types";
 import { Observable } from "@babylonjs/core/Misc/observable";
 import { Control } from "./control";
 import { Measure } from "../measure";
+import { ICanvasRenderingContext, IImage } from "@babylonjs/core/Engines/ICanvas";
 /**
  * Class used to create 2D images
  */
@@ -24,11 +25,11 @@ export declare class Image extends Control {
     private _cellWidth;
     private _cellHeight;
     private _cellId;
-    private _populateNinePatchSlicesFromImage;
     private _sliceLeft;
     private _sliceRight;
     private _sliceTop;
     private _sliceBottom;
+    private _populateNinePatchSlicesFromImage;
     private _detectPointerOnOpaqueOnly;
     private _imageDataCache;
     /**
@@ -43,11 +44,6 @@ export declare class Image extends Control {
      * Gets a boolean indicating that the content is loaded
      */
     get isLoaded(): boolean;
-    /**
-     * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
-     */
-    get populateNinePatchSlicesFromImage(): boolean;
-    set populateNinePatchSlicesFromImage(value: boolean);
     /**
      * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
      * Beware using this as this will comsume more memory as the image has to be stored twice
@@ -94,6 +90,19 @@ export declare class Image extends Control {
      */
     get sourceHeight(): number;
     set sourceHeight(value: number);
+    /**
+     * Gets the image width
+     */
+    get imageWidth(): number;
+    /**
+     * Gets the image height
+     */
+    get imageHeight(): number;
+    /**
+    * Gets or sets a boolean indicating if nine patch slices (left, top, right, bottom) should be read from image data
+    */
+    get populateNinePatchSlicesFromImage(): boolean;
+    set populateNinePatchSlicesFromImage(value: boolean);
     /** Indicates if the format of the image is SVG */
     get isSVG(): boolean;
     /** Gets the status of the SVG attributes computation (sourceLeft, sourceTop, sourceWidth, sourceHeight) */
@@ -111,13 +120,13 @@ export declare class Image extends Control {
     _rotate90(n: number, preserveProperties?: boolean): Image;
     private _handleRotationForSVGImage;
     private _rotate90SourceProperties;
+    private _extractNinePatchSliceDataFromImage;
     /**
      * Gets or sets the internal DOM image used to render the control
      */
-    set domImage(value: HTMLImageElement);
-    get domImage(): HTMLImageElement;
+    set domImage(value: IImage);
+    get domImage(): IImage;
     private _onImageLoaded;
-    private _extractNinePatchSliceDataFromImage;
     /**
      * Gets the image source url
      */
@@ -169,11 +178,10 @@ export declare class Image extends Control {
     protected _getTypeName(): string;
     /** Force the control to synchronize with its content */
     synchronizeSizeWithContent(): void;
-    protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _processMeasures(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     private _prepareWorkingCanvasForOpaqueDetection;
     private _drawImage;
-    _draw(context: CanvasRenderingContext2D): void;
-    private _renderCornerPatch;
+    _draw(context: ICanvasRenderingContext): void;
     private _renderNinePatch;
     dispose(): void;
     /** STRETCH_NONE */

package/2D/controls/image.js

@@ -1,9 +1,10 @@
 import { __decorate, __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Tools } from "@babylonjs/core/Misc/tools";
-import { Control } from "./control";
-import { _TypeStore } from "@babylonjs/core/Misc/typeStore";
-import { serialize } from "@babylonjs/core/Misc/decorators";
+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 { Engine } from "@babylonjs/core/Engines/engine.js";
 /**
  * Class used to create 2D images
  */
@@ -54,25 +55,6 @@ var Image = /** @class */ (function (_super) {
         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, "detectPointerOnOpaqueOnly", {
         /**
          * Gets or sets a boolean indicating if pointers should only be validated on pixels with alpha > 0.
@@ -226,6 +208,45 @@ var Image = /** @class */ (function (_super) {
         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 () {
@@ -279,13 +300,17 @@ var Image = /** @class */ (function (_super) {
     });
     /** @hidden */
     Image.prototype._rotate90 = function (n, preserveProperties) {
+        var _a, _b;
         if (preserveProperties === void 0) { preserveProperties = false; }
-        var canvas = document.createElement("canvas");
-        var context = canvas.getContext("2d");
         var width = this._domImage.width;
         var height = this._domImage.height;
-        canvas.width = height;
-        canvas.height = width;
+        // 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()) || Engine.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);
@@ -345,6 +370,50 @@ var Image = /** @class */ (function (_super) {
         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()) || Engine.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;
@@ -383,47 +452,6 @@ var Image = /** @class */ (function (_super) {
         this.onImageLoadedObservable.notifyObservers(this);
         this._markAsDirty();
     };
-    Image.prototype._extractNinePatchSliceDataFromImage = function () {
-        if (!this._workingCanvas) {
-            this._workingCanvas = document.createElement("canvas");
-        }
-        var canvas = this._workingCanvas;
-        var context = canvas.getContext("2d");
-        var width = this._domImage.width;
-        var height = this._domImage.height;
-        canvas.width = width;
-        canvas.height = height;
-        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, "source", {
         /**
          * Gets the image source url
@@ -436,6 +464,7 @@ var Image = /** @class */ (function (_super) {
          */
         set: function (value) {
             var _this = this;
+            var _a, _b;
             if (this._source === value) {
                 return;
             }
@@ -445,7 +474,12 @@ var Image = /** @class */ (function (_super) {
             if (value) {
                 value = this._svgCheck(value);
             }
-            this._domImage = document.createElement("img");
+            // 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()) || Engine.LastCreatedEngine;
+            if (!engine) {
+                throw new Error("Invalid engine. Unable to create a canvas.");
+            }
+            this._domImage = engine.createCanvasImage();
             this._domImage.onload = function () {
                 _this._onImageLoaded();
             };
@@ -529,11 +563,12 @@ var Image = /** @class */ (function (_super) {
                 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 = elem.transform.baseVal.consolidate().matrix.a;
-                    elem_matrix_d = elem.transform.baseVal.consolidate().matrix.d;
-                    elem_matrix_e = elem.transform.baseVal.consolidate().matrix.e;
-                    elem_matrix_f = elem.transform.baseVal.consolidate().matrix.f;
+                    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;
@@ -664,18 +699,21 @@ var Image = /** @class */ (function (_super) {
         _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) {
-            this._workingCanvas = document.createElement("canvas");
+            var engine = ((_b = (_a = this._host) === null || _a === void 0 ? void 0 : _a.getScene()) === null || _b === void 0 ? void 0 : _b.getEngine()) || Engine.LastCreatedEngine;
+            if (!engine) {
+                throw new Error("Invalid engine. Unable to create a canvas.");
+            }
+            this._workingCanvas = engine.createCanvas(width, height);
         }
         var canvas = this._workingCanvas;
-        var width = this._currentMeasure.width;
-        var height = this._currentMeasure.height;
         var context = canvas.getContext("2d");
-        canvas.width = width;
-        canvas.height = height;
         context.clearRect(0, 0, width, height);
     };
     Image.prototype._drawImage = function (context, sx, sy, sw, sh, tx, ty, tw, th) {
@@ -739,41 +777,37 @@ var Image = /** @class */ (function (_super) {
         }
         context.restore();
     };
-    Image.prototype._renderCornerPatch = function (context, x, y, width, height, targetX, targetY) {
-        this._drawImage(context, x, y, width, height, this._currentMeasure.left + targetX, this._currentMeasure.top + targetY, width, height);
-    };
     Image.prototype._renderNinePatch = function (context) {
-        var height = this._imageHeight;
         var leftWidth = this._sliceLeft;
         var topHeight = this._sliceTop;
         var bottomHeight = this._imageHeight - this._sliceBottom;
         var rightWidth = this._imageWidth - this._sliceRight;
-        var left = 0;
-        var top = 0;
-        if (this._populateNinePatchSlicesFromImage) {
-            left = 1;
-            top = 1;
-            height -= 2;
-            leftWidth -= 1;
-            topHeight -= 1;
-            bottomHeight -= 1;
-            rightWidth -= 1;
-        }
         var centerWidth = this._sliceRight - this._sliceLeft;
-        var targetCenterWidth = this._currentMeasure.width - rightWidth - this.sliceLeft;
-        var targetTopHeight = this._currentMeasure.height - height + this._sliceBottom;
-        // Corners
-        this._renderCornerPatch(context, left, top, leftWidth, topHeight, 0, 0);
-        this._renderCornerPatch(context, left, this._sliceBottom, leftWidth, height - this._sliceBottom, 0, targetTopHeight);
-        this._renderCornerPatch(context, this._sliceRight, top, rightWidth, topHeight, this._currentMeasure.width - rightWidth, 0);
-        this._renderCornerPatch(context, this._sliceRight, this._sliceBottom, rightWidth, height - this._sliceBottom, this._currentMeasure.width - rightWidth, targetTopHeight);
+        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, this._sliceBottom - this._sliceTop, this._currentMeasure.left + leftWidth, this._currentMeasure.top + topHeight, targetCenterWidth, targetTopHeight - topHeight);
-        // Borders
-        this._drawImage(context, left, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
-        this._drawImage(context, this._sliceRight, this._sliceTop, leftWidth, this._sliceBottom - this._sliceTop, this._currentMeasure.left + this._currentMeasure.width - rightWidth, this._currentMeasure.top + topHeight, leftWidth, targetTopHeight - topHeight);
-        this._drawImage(context, this._sliceLeft, top, centerWidth, topHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top, targetCenterWidth, topHeight);
-        this._drawImage(context, this._sliceLeft, this._sliceBottom, centerWidth, bottomHeight, this._currentMeasure.left + leftWidth, this._currentMeasure.top + targetTopHeight, targetCenterWidth, bottomHeight);
+        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);
@@ -791,9 +825,6 @@ var Image = /** @class */ (function (_super) {
     Image.STRETCH_EXTEND = 3;
     /** NINE_PATCH */
     Image.STRETCH_NINE_PATCH = 4;
-    __decorate([
-        serialize()
-    ], Image.prototype, "populateNinePatchSlicesFromImage", null);
     __decorate([
         serialize()
     ], Image.prototype, "detectPointerOnOpaqueOnly", null);
@@ -821,6 +852,9 @@ var Image = /** @class */ (function (_super) {
     __decorate([
         serialize()
     ], Image.prototype, "sourceHeight", null);
+    __decorate([
+        serialize()
+    ], Image.prototype, "populateNinePatchSlicesFromImage", null);
     __decorate([
         serialize()
     ], Image.prototype, "autoScale", null);
@@ -830,8 +864,17 @@ var Image = /** @class */ (function (_super) {
     __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 };
-_TypeStore.RegisteredTypes["BABYLON.GUI.Image"] = Image;
+RegisterClass("BABYLON.GUI.Image", Image);
 //# sourceMappingURL=image.js.map