applying animation sheet to all stretches

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

@@ -568,12 +568,10 @@ declare module BABYLON.GUI {
         private static _STRETCH_FILL;
         private static _STRETCH_UNIFORM;
         private static _STRETCH_EXTEND;
-        private static _ANIMATION_SHEET;
         static readonly STRETCH_NONE: number;
         static readonly STRETCH_FILL: number;
         static readonly STRETCH_UNIFORM: number;
         static readonly STRETCH_EXTEND: number;
-        static readonly ANIMATION_SHEET: number;
     }
 }
 

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

@@ -3217,7 +3217,7 @@ var BABYLON;
                 _this._sourceHeight = 0;
                 _this._cellWidth = 0;
                 _this._cellHeight = 0;
-                _this._cellId = 0;
+                _this._cellId = -1;
                 _this.source = url;
                 return _this;
             }
@@ -3398,10 +3398,22 @@ var BABYLON;
             };
             Image.prototype._draw = function (parentMeasure, context) {
                 context.save();
-                var x = this._sourceLeft;
-                var y = this._sourceTop;
-                var width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
-                var height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
+                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._applyStates(context);
                 if (this._processMeasures(parentMeasure, context)) {
                     if (this._loaded) {
@@ -3430,12 +3442,6 @@ var BABYLON;
                                     this._root.height = this.height;
                                 }
                                 break;
-                            case Image.ANIMATION_SHEET:
-                                var rowCount = this._domImage.naturalWidth / this.cellWidth;
-                                var column = (this.cellId / rowCount) >> 0;
-                                var row = this.cellId % rowCount;
-                                context.drawImage(this._domImage, this.cellWidth * row, this.cellHeight * column, this.cellWidth, this.cellHeight, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-                                break;
                         }
                     }
                 }
@@ -3469,19 +3475,11 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
-            Object.defineProperty(Image, "ANIMATION_SHEET", {
-                get: function () {
-                    return Image._ANIMATION_SHEET;
-                },
-                enumerable: true,
-                configurable: true
-            });
             // Static
             Image._STRETCH_NONE = 0;
             Image._STRETCH_FILL = 1;
             Image._STRETCH_UNIFORM = 2;
             Image._STRETCH_EXTEND = 3;
-            Image._ANIMATION_SHEET = 4;
             return Image;
         }(GUI.Control));
         GUI.Image = Image;

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

@@ -573,12 +573,10 @@ declare module BABYLON.GUI {
         private static _STRETCH_FILL;
         private static _STRETCH_UNIFORM;
         private static _STRETCH_EXTEND;
-        private static _ANIMATION_SHEET;
         static readonly STRETCH_NONE: number;
         static readonly STRETCH_FILL: number;
         static readonly STRETCH_UNIFORM: number;
         static readonly STRETCH_EXTEND: number;
-        static readonly ANIMATION_SHEET: number;
     }
 }
 

gui/src/controls/image.ts

@@ -19,7 +19,7 @@ module BABYLON.GUI {
 
         private _cellWidth: number = 0;
         private _cellHeight: number = 0;
-        private _cellId: number = 0;
+        private _cellId: number = -1;
 
         public get sourceLeft(): number {
             return this._sourceLeft;
@@ -197,11 +197,9 @@ module BABYLON.GUI {
 
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
             context.save();
-            let x = this._sourceLeft;
-            let y = this._sourceTop;
 
-            let width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
-            let height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
+            let x, y, width, height;
+            }
 
             this._applyStates(context);
             if (this._processMeasures(parentMeasure, context)) {
@@ -236,13 +234,6 @@ module BABYLON.GUI {
                                 this._root.height = this.height;
                             }
                             break;
-                        case Image.ANIMATION_SHEET:
-                            let rowCount = this._domImage.naturalWidth / this.cellWidth;
-                            let column = (this.cellId / rowCount) >> 0;
-                            let row = this.cellId % rowCount;
-                            context.drawImage(this._domImage, this.cellWidth * row, this.cellHeight * column, this.cellWidth, this.cellHeight,
-                                this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-                            break;
                     }
                 }
             }
@@ -254,7 +245,6 @@ module BABYLON.GUI {
         private static _STRETCH_FILL = 1;
         private static _STRETCH_UNIFORM = 2;
         private static _STRETCH_EXTEND = 3;
-        private static _ANIMATION_SHEET = 4;
 
         public static get STRETCH_NONE(): number {
             return Image._STRETCH_NONE;
@@ -271,9 +261,5 @@ module BABYLON.GUI {
         public static get STRETCH_EXTEND(): number {
             return Image._STRETCH_EXTEND;
         }
-
-        public static get ANIMATION_SHEET(): number {
-            return Image._ANIMATION_SHEET;
-        }
     }
 }