Adding cell id to gui image

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

@@ -545,6 +545,9 @@ declare module BABYLON.GUI {
         private _sourceTop;
         private _sourceWidth;
         private _sourceHeight;
+        private _cellWidth;
+        private _cellHeight;
+        private _cellId;
         sourceLeft: number;
         sourceTop: number;
         sourceWidth: number;
@@ -554,6 +557,9 @@ declare module BABYLON.GUI {
         domImage: HTMLImageElement;
         private _onImageLoaded();
         source: Nullable<string>;
+        cellWidth: number;
+        cellHeight: number;
+        cellId: number;
         constructor(name?: string | undefined, url?: Nullable<string>);
         protected _getTypeName(): string;
         synchronizeSizeWithContent(): void;
@@ -562,10 +568,12 @@ 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

@@ -22,7 +22,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var AdvancedDynamicTexture = /** @class */ (function (_super) {
+        var AdvancedDynamicTexture = (function (_super) {
             __extends(AdvancedDynamicTexture, _super);
             function AdvancedDynamicTexture(name, width, height, scene, generateMipMaps, samplingMode) {
                 if (width === void 0) { width = 0; }
@@ -462,7 +462,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Measure = /** @class */ (function () {
+        var Measure = (function () {
             function Measure(left, top, width, height) {
                 this.left = left;
                 this.top = top;
@@ -507,7 +507,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Vector2WithInfo = /** @class */ (function (_super) {
+        var Vector2WithInfo = (function (_super) {
             __extends(Vector2WithInfo, _super);
             function Vector2WithInfo(source, buttonIndex) {
                 if (buttonIndex === void 0) { buttonIndex = 0; }
@@ -518,7 +518,7 @@ var BABYLON;
             return Vector2WithInfo;
         }(BABYLON.Vector2));
         GUI.Vector2WithInfo = Vector2WithInfo;
-        var Matrix2D = /** @class */ (function () {
+        var Matrix2D = (function () {
             function Matrix2D(m00, m01, m10, m11, m20, m21) {
                 this.m = new Float32Array(6);
                 this.fromValues(m00, m01, m10, m11, m20, m21);
@@ -639,7 +639,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var ValueAndUnit = /** @class */ (function () {
+        var ValueAndUnit = (function () {
             function ValueAndUnit(value, unit, negativeValueAllowed) {
                 if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
                 if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
@@ -757,7 +757,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Control = /** @class */ (function () {
+        var Control = (function () {
             // Functions
             function Control(name) {
                 this.name = name;
@@ -1803,7 +1803,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Container = /** @class */ (function (_super) {
+        var Container = (function (_super) {
             __extends(Container, _super);
             function Container(name) {
                 var _this = _super.call(this, name) || this;
@@ -1982,7 +1982,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var StackPanel = /** @class */ (function (_super) {
+        var StackPanel = (function (_super) {
             __extends(StackPanel, _super);
             function StackPanel(name) {
                 var _this = _super.call(this, name) || this;
@@ -2124,7 +2124,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Rectangle = /** @class */ (function (_super) {
+        var Rectangle = (function (_super) {
             __extends(Rectangle, _super);
             function Rectangle(name) {
                 var _this = _super.call(this, name) || this;
@@ -2240,7 +2240,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Ellipse = /** @class */ (function (_super) {
+        var Ellipse = (function (_super) {
             __extends(Ellipse, _super);
             function Ellipse(name) {
                 var _this = _super.call(this, name) || this;
@@ -2306,7 +2306,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Line = /** @class */ (function (_super) {
+        var Line = (function (_super) {
             __extends(Line, _super);
             function Line(name) {
                 var _this = _super.call(this, name) || this;
@@ -2506,7 +2506,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Slider = /** @class */ (function (_super) {
+        var Slider = (function (_super) {
             __extends(Slider, _super);
             function Slider(name) {
                 var _this = _super.call(this, name) || this;
@@ -2740,7 +2740,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Checkbox = /** @class */ (function (_super) {
+        var Checkbox = (function (_super) {
             __extends(Checkbox, _super);
             function Checkbox(name) {
                 var _this = _super.call(this, name) || this;
@@ -2856,7 +2856,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var RadioButton = /** @class */ (function (_super) {
+        var RadioButton = (function (_super) {
             __extends(RadioButton, _super);
             function RadioButton(name) {
                 var _this = _super.call(this, name) || this;
@@ -2993,7 +2993,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var TextBlock = /** @class */ (function (_super) {
+        var TextBlock = (function (_super) {
             __extends(TextBlock, _super);
             function TextBlock(name, text) {
                 if (text === void 0) { text = ""; }
@@ -3202,7 +3202,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Image = /** @class */ (function (_super) {
+        var Image = (function (_super) {
             __extends(Image, _super);
             function Image(name, url) {
                 if (url === void 0) { url = null; }
@@ -3215,6 +3215,9 @@ var BABYLON;
                 _this._sourceTop = 0;
                 _this._sourceWidth = 0;
                 _this._sourceHeight = 0;
+                _this._cellWidth = 0;
+                _this._cellHeight = 0;
+                _this._cellId = 0;
                 _this.source = url;
                 return _this;
             }
@@ -3353,6 +3356,36 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Image.prototype, "cellWidth", {
+                get: function () {
+                    return this._cellWidth;
+                },
+                set: function (value) {
+                    this._cellWidth = value;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Image.prototype, "cellHeight", {
+                get: function () {
+                    return this._cellHeight;
+                },
+                set: function (value) {
+                    this._cellHeight = value;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Image.prototype, "cellId", {
+                get: function () {
+                    return this._cellId;
+                },
+                set: function (value) {
+                    this._cellId = value;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Image.prototype._getTypeName = function () {
                 return "Image";
             };
@@ -3397,6 +3430,12 @@ 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;
                         }
                     }
                 }
@@ -3430,11 +3469,19 @@ 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;
@@ -3449,7 +3496,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var Button = /** @class */ (function (_super) {
+        var Button = (function (_super) {
             __extends(Button, _super);
             function Button(name) {
                 var _this = _super.call(this, name) || this;
@@ -3578,7 +3625,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var ColorPicker = /** @class */ (function (_super) {
+        var ColorPicker = (function (_super) {
             __extends(ColorPicker, _super);
             function ColorPicker(name) {
                 var _this = _super.call(this, name) || this;
@@ -3924,7 +3971,7 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var InputText = /** @class */ (function (_super) {
+        var InputText = (function (_super) {
             __extends(InputText, _super);
             function InputText(name, text) {
                 if (text === void 0) { text = ""; }
@@ -4173,12 +4220,12 @@ var BABYLON;
                         return;
                 }
                 // Printable characters
-                if ((keyCode === -1) || // Direct access
-                    (keyCode === 32) || // Space
-                    (keyCode > 47 && keyCode < 58) || // Numbers
-                    (keyCode > 64 && keyCode < 91) || // Letters
-                    (keyCode > 185 && keyCode < 193) || // Special characters
-                    (keyCode > 218 && keyCode < 223) || // Special characters
+                if ((keyCode === -1) ||
+                    (keyCode === 32) ||
+                    (keyCode > 47 && keyCode < 58) ||
+                    (keyCode > 64 && keyCode < 91) ||
+                    (keyCode > 185 && keyCode < 193) ||
+                    (keyCode > 218 && keyCode < 223) ||
                     (keyCode > 95 && keyCode < 112)) {
                     if (this._cursorOffset === 0) {
                         this.text += key;
@@ -4337,13 +4384,13 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var KeyPropertySet = /** @class */ (function () {
+        var KeyPropertySet = (function () {
             function KeyPropertySet() {
             }
             return KeyPropertySet;
         }());
         GUI.KeyPropertySet = KeyPropertySet;
-        var VirtualKeyboard = /** @class */ (function (_super) {
+        var VirtualKeyboard = (function (_super) {
             __extends(VirtualKeyboard, _super);
             function VirtualKeyboard() {
                 var _this = _super !== null && _super.apply(this, arguments) || this;

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

@@ -550,6 +550,9 @@ declare module BABYLON.GUI {
         private _sourceTop;
         private _sourceWidth;
         private _sourceHeight;
+        private _cellWidth;
+        private _cellHeight;
+        private _cellId;
         sourceLeft: number;
         sourceTop: number;
         sourceWidth: number;
@@ -559,6 +562,9 @@ declare module BABYLON.GUI {
         domImage: HTMLImageElement;
         private _onImageLoaded();
         source: Nullable<string>;
+        cellWidth: number;
+        cellHeight: number;
+        cellId: number;
         constructor(name?: string | undefined, url?: Nullable<string>);
         protected _getTypeName(): string;
         synchronizeSizeWithContent(): void;
@@ -567,10 +573,12 @@ 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

@@ -14,9 +14,13 @@ module BABYLON.GUI {
 
         private _sourceLeft = 0;
         private _sourceTop = 0;
-        private _sourceWidth= 0;
+        private _sourceWidth = 0;
         private _sourceHeight = 0;
 
+        private _cellWidth: number = 0;
+        private _cellHeight: number = 0;
+        private _cellId: number = 0;
+
         public get sourceLeft(): number {
             return this._sourceLeft;
         }
@@ -29,7 +33,7 @@ module BABYLON.GUI {
             this._sourceLeft = value;
 
             this._markAsDirty();
-        }   
+        }
 
         public get sourceTop(): number {
             return this._sourceTop;
@@ -43,7 +47,7 @@ module BABYLON.GUI {
             this._sourceTop = value;
 
             this._markAsDirty();
-        }    
+        }
 
         public get sourceWidth(): number {
             return this._sourceWidth;
@@ -57,7 +61,7 @@ module BABYLON.GUI {
             this._sourceWidth = value;
 
             this._markAsDirty();
-        }  
+        }
 
         public get sourceHeight(): number {
             return this._sourceHeight;
@@ -71,7 +75,7 @@ module BABYLON.GUI {
             this._sourceHeight = value;
 
             this._markAsDirty();
-        }          
+        }
 
         public get autoScale(): boolean {
             return this._autoScale;
@@ -106,7 +110,7 @@ module BABYLON.GUI {
         public set domImage(value: HTMLImageElement) {
             this._domImage = value;
             this._loaded = false;
-            
+
             if (this._domImage.width) {
                 this._onImageLoaded();
             } else {
@@ -139,9 +143,9 @@ module BABYLON.GUI {
 
             this._loaded = false;
             this._source = value;
-            
+
             this._domImage = new DOMImage();
-            
+
             this._domImage.onload = () => {
                 this._onImageLoaded();
             }
@@ -151,6 +155,27 @@ module BABYLON.GUI {
             }
         }
 
+        get cellWidth(): number {
+            return this._cellWidth;
+        }
+        set cellWidth(value: number) {
+            this._cellWidth = value;
+        }
+
+        get cellHeight(): number {
+            return this._cellHeight;
+        }
+        set cellHeight(value: number) {
+            this._cellHeight = value;
+        }
+
+        get cellId(): number {
+            return this._cellId;
+        }
+        set cellId(value: number) {
+            this._cellId = value;
+        }
+
         constructor(public name?: string, url: Nullable<string> = null) {
             super(name);
 
@@ -159,7 +184,7 @@ module BABYLON.GUI {
 
         protected _getTypeName(): string {
             return "Image";
-        }              
+        }
 
         public synchronizeSizeWithContent() {
             if (!this._loaded) {
@@ -171,7 +196,7 @@ module BABYLON.GUI {
         }
 
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            context.save();          
+            context.save();
             let x = this._sourceLeft;
             let y = this._sourceTop;
 
@@ -184,33 +209,40 @@ module BABYLON.GUI {
                     switch (this._stretch) {
                         case Image.STRETCH_NONE:
                             context.drawImage(this._domImage, x, y, width, height,
-                                              this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                                this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                             break;
                         case Image.STRETCH_FILL:
-                            context.drawImage(this._domImage, x, y, width, height, 
-                                                            this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                            context.drawImage(this._domImage, 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 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; 
+                            var centerY = (this._currentMeasure.height - height * ratio) / 2;
 
                             context.drawImage(this._domImage, x, y, width, height,
-                                                            this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
+                                this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
                             break;
                         case Image.STRETCH_EXTEND:
                             context.drawImage(this._domImage, x, y, width, height,
-                                              this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                                this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                             if (this._autoScale) {
                                 this.synchronizeSizeWithContent();
-                            } 
+                            }
                             if (this._root) {
                                 this._root.width = this.width;
                                 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;
                     }
                 }
             }
@@ -222,6 +254,7 @@ 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;
@@ -229,14 +262,18 @@ module BABYLON.GUI {
 
         public static get STRETCH_FILL(): number {
             return Image._STRETCH_FILL;
-        }       
+        }
 
         public static get STRETCH_UNIFORM(): number {
             return Image._STRETCH_UNIFORM;
-        }      
+        }
 
         public static get STRETCH_EXTEND(): number {
             return Image._STRETCH_EXTEND;
-        }                 
-    }    
+        }
+
+        public static get ANIMATION_SHEET(): number {
+            return Image._ANIMATION_SHEET;
+        }
+    }
 }