Merge branch 'master'

Exporters/Blender/readme.md

@@ -3,7 +3,8 @@ Blender to Babylon.js exporter
 
 The [Blender export plugin](http://blogs.msdn.com/b/eternalcoding/archive/2013/06/28/babylon-js-how-to-load-a-babylon-file-produced-with-blender.aspx) supports the following features:
 
-For a discussion of Tower of Babel exporter, along with the difference this exporter, [See]{https://github.com/BabylonJS/Extensions/tree/master/QueuedInterpolation/Blender}
+For a discussion of Tower of Babel exporter, along with the difference this exporter, see [ToB readme](https://github.com/BabylonJS/Extensions/tree/master/QueuedInterpolation/Blender).
+
 * **Cameras**
  * Name
  * Position

Tools/Gulp/config.json

@@ -125,7 +125,8 @@
       "../../src/Tools/babylon.loadingScreen.js",
       "../../src/Audio/babylon.audioEngine.js",
       "../../src/Audio/babylon.sound.js",
-      "../../src/Audio/babylon.soundtrack.js"
+      "../../src/Audio/babylon.soundtrack.js",
+      "../../src/Layer/babylon.highlightlayer.js"
     ]
   },
   "shadersDirectories": [

Tools/Gulp/gulp-addDtsExport.js

@@ -0,0 +1,31 @@
+var gutil = require('gulp-util');
+var through = require('through2');
+
+module.exports = function (varName) {
+    return through.obj(function (file, enc, cb) {
+
+        var moduleExportsAddition =
+            '\nexport as namespace ' + varName + ';\n' +
+            '\nexport = ' + varName + ';\n';
+
+        if (file.isNull()) {
+            cb(null, file);
+            return;
+        }
+
+        if (file.isStream()) {
+            //streams not supported, no need for now.
+            return;
+        }
+
+        try {
+            file.contents = new Buffer(String(file.contents) + moduleExportsAddition);
+            this.push(file);
+
+        } catch (err) {
+            this.emit('error', new gutil.PluginError('gulp-add-module-exports', err, { fileName: file.path }));
+        }
+        cb();
+    });
+};
+

Tools/Gulp/gulpfile.js

@@ -3,6 +3,7 @@ var uglify = require("gulp-uglify");
 var typescript = require("gulp-typescript");
 var sourcemaps = require("gulp-sourcemaps");
 var srcToVariable = require("gulp-content-to-variable");
+var addDtsExport = require("./gulp-addDtsExport");
 var addModuleExports = require("./gulp-addModuleExports");
 var merge2 = require("merge2");
 var concat = require("gulp-concat");
@@ -13,6 +14,7 @@ var runSequence = require('run-sequence');
 var replace = require("gulp-replace");
 var uncommentShader = require("./gulp-removeShaderComments");
 var expect = require('gulp-expect-file');
+var optimisejs = require('gulp-optimize-js');
 
 var config = require("./config.json");
 
@@ -97,6 +99,7 @@ gulp.task('typescript-compile', function () {
     return merge2([
         tsResult.dts
             .pipe(concat(config.build.declarationFilename))
+            .pipe(addDtsExport("BABYLON"))
             .pipe(gulp.dest(config.build.outputDirectory)),
         tsResult.js
             .pipe(gulp.dest(config.build.srcOutputDirectory))
@@ -131,6 +134,7 @@ gulp.task("buildCore", ["shaders"], function () {
         .pipe(replace(decorateSearchRegex, ""))
         .pipe(addModuleExports("BABYLON"))
         .pipe(uglify())
+        .pipe(optimisejs())
         .pipe(gulp.dest(config.build.outputDirectory));
 });
 
@@ -149,6 +153,7 @@ gulp.task("buildNoWorker", ["shaders"], function () {
         .pipe(replace(decorateSearchRegex, ""))
         .pipe(addModuleExports("BABYLON"))
         .pipe(uglify())
+        .pipe(optimisejs())
         .pipe(gulp.dest(config.build.outputDirectory));
 });
 
@@ -170,6 +175,7 @@ gulp.task("build", ["workers", "shaders"], function () {
         .pipe(gulp.dest(config.build.outputDirectory))
         .pipe(rename(config.build.minFilename))
         .pipe(uglify())
+        .pipe(optimisejs())
         .pipe(gulp.dest(config.build.outputDirectory));
 });
 

Tools/Gulp/package.json

@@ -22,6 +22,7 @@
     "run-sequence": "~1.1.0",
     "gulp-replace": "~0.5.3",
     "gulp-content-to-variable": "^0.1.0",
-    "gulp-expect-file": "^0.0.7"
+    "gulp-expect-file": "^0.0.7",
+    "gulp-optimize-js": "^1.0.2"
   }
 }

dist/preview release/what's new.md

@@ -1,7 +1,11 @@
 # 2.5.0:
 
 ### Major updates
-- Babylon.js now supports right handed system with ```scene.useRightHandedSystem = true``` ([deltakosh](https://github.com/deltakosh))    
+- New `StandardRenderingPipeline` effect to support screen space lens flare and depth of field. []Demo](http://www.babylonjs.com/Demos/StandardRenderingPipeline/) - ([Julien Moreau-Mathis](https://github.com/julien-moreau))
+- New `HighlightLayer` object to enable highlights rendering. [Demo](http://www.babylonjs.com/Demos/Highlights/) - ([sebavan](https://github.com/sebavan))
+- Babylon.js now supports right handed system with ```scene.useRightHandedSystem = true``` ([deltakosh](https://github.com/deltakosh))
+- Babylon.js is now compiled with [optimize-js](https://github.com/nolanlawson/optimize-js) to get faster initial load ([deltakosh](https://github.com/deltakosh))
+
 ### Updates
 - New ```Tools.CreateScreenshot``` function will capture all canvas data. Previous implementation is now called `CreateScreenshotUsingRenderTarget` ([deltakosh](https://github.com/deltakosh)) 
 - Cube textures are now cached by texture cache ([deltakosh](https://github.com/deltakosh)) 
@@ -29,6 +33,7 @@
 ### API doc
 
 ### Bug fixes
+- Fixed issue with FreeCamera not working in fullscreen or when pointer locked ([abow](https://github.com/abow))
 - MapTexture: Font Characters are now correctly aligned on Chrome ([nockawa](https://github.com/nockawa))
 - Fixed some missing parameter default values in `MeshBuilder.CreateGroundFromHeightMap()` and `MeshBuilder.CreateTiledGround()` ([jerome](https://github.com/jbousquie))
 - Fixed cross vector calculation in `_computeHeightQuads()` that affected  all the `GroundMesh.getHeightAtCoordinates()` and `GroundMesh.getNormalAtCoordinates()` methods ([jerome](https://github.com/jbousquie))
@@ -37,7 +42,7 @@
 - Fixed model shape initial red vertex color set to zero not formerly being taken in account in the `SolidParticleSystem` ([jerome](https://github.com/jbousquie))
 - Fixed RenderTargetTexture meshes selection ([deltakosh](https://github.com/deltakosh))
 - Fixed camera speed computation ([deltakosh](https://github.com/deltakosh))
-- Fixed bug with isntances, LOD and edgesRendering ([deltakosh](https://github.com/deltakosh))
+- Fixed bug with instances, LOD and edgesRendering ([deltakosh](https://github.com/deltakosh))
 - Canvas2D: ([nockawa](https://github.com/nockawa))
  - `WorldSpaceCanvas2D`:
 	- Intersection/interaction now works on non squared canvas

src/Actions/babylon.action.js

@@ -126,6 +126,6 @@ var BABYLON;
             };
         };
         return Action;
-    })();
+    }());
     BABYLON.Action = Action;
 })(BABYLON || (BABYLON = {}));

src/Actions/babylon.actionManager.js

@@ -50,7 +50,7 @@ var BABYLON;
             return new ActionEvent(prim, pointerPos.x, pointerPos.y, null, evt, additionalData);
         };
         return ActionEvent;
-    })();
+    }());
     BABYLON.ActionEvent = ActionEvent;
     /**
      * Action Manager manages all events to be triggered on a given mesh or the global scene.
@@ -522,6 +522,6 @@ var BABYLON;
         ActionManager.DragMovementThreshold = 10; // in pixels
         ActionManager.LongPressDelay = 500; // in milliseconds
         return ActionManager;
-    })();
+    }());
     BABYLON.ActionManager = ActionManager;
 })(BABYLON || (BABYLON = {}));

src/Actions/babylon.condition.js

@@ -29,7 +29,7 @@ var BABYLON;
             };
         };
         return Condition;
-    })();
+    }());
     BABYLON.Condition = Condition;
     var ValueCondition = (function (_super) {
         __extends(ValueCondition, _super);
@@ -117,7 +117,7 @@ var BABYLON;
         ValueCondition._IsGreater = 2;
         ValueCondition._IsLesser = 3;
         return ValueCondition;
-    })(Condition);
+    }(Condition));
     BABYLON.ValueCondition = ValueCondition;
     var PredicateCondition = (function (_super) {
         __extends(PredicateCondition, _super);
@@ -129,7 +129,7 @@ var BABYLON;
             return this.predicate();
         };
         return PredicateCondition;
-    })(Condition);
+    }(Condition));
     BABYLON.PredicateCondition = PredicateCondition;
     var StateCondition = (function (_super) {
         __extends(StateCondition, _super);
@@ -152,6 +152,6 @@ var BABYLON;
             });
         };
         return StateCondition;
-    })(Condition);
+    }(Condition));
     BABYLON.StateCondition = StateCondition;
 })(BABYLON || (BABYLON = {}));

src/Actions/babylon.directActions.js

@@ -29,7 +29,7 @@ var BABYLON;
             }, parent);
         };
         return SwitchBooleanAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.SwitchBooleanAction = SwitchBooleanAction;
     var SetStateAction = (function (_super) {
         __extends(SetStateAction, _super);
@@ -51,7 +51,7 @@ var BABYLON;
             }, parent);
         };
         return SetStateAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.SetStateAction = SetStateAction;
     var SetValueAction = (function (_super) {
         __extends(SetValueAction, _super);
@@ -82,7 +82,7 @@ var BABYLON;
             }, parent);
         };
         return SetValueAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.SetValueAction = SetValueAction;
     var IncrementValueAction = (function (_super) {
         __extends(IncrementValueAction, _super);
@@ -116,7 +116,7 @@ var BABYLON;
             }, parent);
         };
         return IncrementValueAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.IncrementValueAction = IncrementValueAction;
     var PlayAnimationAction = (function (_super) {
         __extends(PlayAnimationAction, _super);
@@ -145,7 +145,7 @@ var BABYLON;
             }, parent);
         };
         return PlayAnimationAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.PlayAnimationAction = PlayAnimationAction;
     var StopAnimationAction = (function (_super) {
         __extends(StopAnimationAction, _super);
@@ -166,7 +166,7 @@ var BABYLON;
             }, parent);
         };
         return StopAnimationAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.StopAnimationAction = StopAnimationAction;
     var DoNothingAction = (function (_super) {
         __extends(DoNothingAction, _super);
@@ -183,7 +183,7 @@ var BABYLON;
             }, parent);
         };
         return DoNothingAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.DoNothingAction = DoNothingAction;
     var CombineAction = (function (_super) {
         __extends(CombineAction, _super);
@@ -214,7 +214,7 @@ var BABYLON;
             return serializationObject;
         };
         return CombineAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.CombineAction = CombineAction;
     var ExecuteCodeAction = (function (_super) {
         __extends(ExecuteCodeAction, _super);
@@ -226,7 +226,7 @@ var BABYLON;
             this.func(evt);
         };
         return ExecuteCodeAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.ExecuteCodeAction = ExecuteCodeAction;
     var SetParentAction = (function (_super) {
         __extends(SetParentAction, _super);
@@ -256,7 +256,7 @@ var BABYLON;
             }, parent);
         };
         return SetParentAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.SetParentAction = SetParentAction;
     var PlaySoundAction = (function (_super) {
         __extends(PlaySoundAction, _super);
@@ -277,7 +277,7 @@ var BABYLON;
             }, parent);
         };
         return PlaySoundAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.PlaySoundAction = PlaySoundAction;
     var StopSoundAction = (function (_super) {
         __extends(StopSoundAction, _super);
@@ -298,6 +298,6 @@ var BABYLON;
             }, parent);
         };
         return StopSoundAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.StopSoundAction = StopSoundAction;
 })(BABYLON || (BABYLON = {}));

src/Actions/babylon.interpolateValueAction.js

@@ -72,6 +72,6 @@ var BABYLON;
             }, parent);
         };
         return InterpolateValueAction;
-    })(BABYLON.Action);
+    }(BABYLON.Action));
     BABYLON.InterpolateValueAction = InterpolateValueAction;
 })(BABYLON || (BABYLON = {}));

src/Animations/babylon.animatable.js

@@ -127,6 +127,6 @@ var BABYLON;
             return running;
         };
         return Animatable;
-    })();
+    }());
     BABYLON.Animatable = Animatable;
 })(BABYLON || (BABYLON = {}));

src/Animations/babylon.animation.js

@@ -10,7 +10,7 @@ var BABYLON;
             return new AnimationRange(this.name, this.from, this.to);
         };
         return AnimationRange;
-    })();
+    }());
     BABYLON.AnimationRange = AnimationRange;
     /**
      * Composed of a frame, and an action function
@@ -23,7 +23,7 @@ var BABYLON;
             this.isDone = false;
         }
         return AnimationEvent;
-    })();
+    }());
     BABYLON.AnimationEvent = AnimationEvent;
     var PathCursor = (function () {
         function PathCursor(path) {
@@ -80,7 +80,7 @@ var BABYLON;
             return this;
         };
         return PathCursor;
-    })();
+    }());
     BABYLON.PathCursor = PathCursor;
     var Animation = (function () {
         function Animation(name, targetProperty, framePerSecond, dataType, loopMode, enableBlending) {
@@ -734,6 +734,6 @@ var BABYLON;
         Animation._ANIMATIONLOOPMODE_CYCLE = 1;
         Animation._ANIMATIONLOOPMODE_CONSTANT = 2;
         return Animation;
-    })();
+    }());
     BABYLON.Animation = Animation;
 })(BABYLON || (BABYLON = {}));

src/Animations/babylon.easing.js

@@ -58,7 +58,7 @@ var BABYLON;
         EasingFunction._EASINGMODE_EASEOUT = 1;
         EasingFunction._EASINGMODE_EASEINOUT = 2;
         return EasingFunction;
-    })();
+    }());
     BABYLON.EasingFunction = EasingFunction;
     var CircleEase = (function (_super) {
         __extends(CircleEase, _super);
@@ -70,7 +70,7 @@ var BABYLON;
             return (1.0 - Math.sqrt(1.0 - (gradient * gradient)));
         };
         return CircleEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.CircleEase = CircleEase;
     var BackEase = (function (_super) {
         __extends(BackEase, _super);
@@ -84,7 +84,7 @@ var BABYLON;
             return (Math.pow(gradient, 3.0) - ((gradient * num) * Math.sin(3.1415926535897931 * gradient)));
         };
         return BackEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.BackEase = BackEase;
     var BounceEase = (function (_super) {
         __extends(BounceEase, _super);
@@ -116,7 +116,7 @@ var BABYLON;
             return (((-Math.pow(1.0 / bounciness, y - num3) / (num2 * num2)) * (num6 - num2)) * (num6 + num2));
         };
         return BounceEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.BounceEase = BounceEase;
     var CubicEase = (function (_super) {
         __extends(CubicEase, _super);
@@ -127,7 +127,7 @@ var BABYLON;
             return (gradient * gradient * gradient);
         };
         return CubicEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.CubicEase = CubicEase;
     var ElasticEase = (function (_super) {
         __extends(ElasticEase, _super);
@@ -151,7 +151,7 @@ var BABYLON;
             return (num2 * Math.sin(((6.2831853071795862 * num3) + 1.5707963267948966) * gradient));
         };
         return ElasticEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.ElasticEase = ElasticEase;
     var ExponentialEase = (function (_super) {
         __extends(ExponentialEase, _super);
@@ -167,7 +167,7 @@ var BABYLON;
             return ((Math.exp(this.exponent * gradient) - 1.0) / (Math.exp(this.exponent) - 1.0));
         };
         return ExponentialEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.ExponentialEase = ExponentialEase;
     var PowerEase = (function (_super) {
         __extends(PowerEase, _super);
@@ -181,7 +181,7 @@ var BABYLON;
             return Math.pow(gradient, y);
         };
         return PowerEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.PowerEase = PowerEase;
     var QuadraticEase = (function (_super) {
         __extends(QuadraticEase, _super);
@@ -192,7 +192,7 @@ var BABYLON;
             return (gradient * gradient);
         };
         return QuadraticEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.QuadraticEase = QuadraticEase;
     var QuarticEase = (function (_super) {
         __extends(QuarticEase, _super);
@@ -203,7 +203,7 @@ var BABYLON;
             return (gradient * gradient * gradient * gradient);
         };
         return QuarticEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.QuarticEase = QuarticEase;
     var QuinticEase = (function (_super) {
         __extends(QuinticEase, _super);
@@ -214,7 +214,7 @@ var BABYLON;
             return (gradient * gradient * gradient * gradient * gradient);
         };
         return QuinticEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.QuinticEase = QuinticEase;
     var SineEase = (function (_super) {
         __extends(SineEase, _super);
@@ -225,7 +225,7 @@ var BABYLON;
             return (1.0 - Math.sin(1.5707963267948966 * (1.0 - gradient)));
         };
         return SineEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.SineEase = SineEase;
     var BezierCurveEase = (function (_super) {
         __extends(BezierCurveEase, _super);
@@ -244,6 +244,6 @@ var BABYLON;
             return BABYLON.BezierCurve.interpolate(gradient, this.x1, this.y1, this.x2, this.y2);
         };
         return BezierCurveEase;
-    })(EasingFunction);
+    }(EasingFunction));
     BABYLON.BezierCurveEase = BezierCurveEase;
 })(BABYLON || (BABYLON = {}));

src/Audio/babylon.analyser.js

@@ -106,6 +106,6 @@ var BABYLON;
             }
         };
         return Analyser;
-    })();
+    }());
     BABYLON.Analyser = Analyser;
 })(BABYLON || (BABYLON = {}));

src/Audio/babylon.audioEngine.js

@@ -110,6 +110,6 @@ var BABYLON;
             }
         };
         return AudioEngine;
-    })();
+    }());
     BABYLON.AudioEngine = AudioEngine;
 })(BABYLON || (BABYLON = {}));

src/Audio/babylon.sound.js

@@ -145,6 +145,7 @@ var BABYLON;
                     }
                     else {
                         if (!codecSupportedFound) {
+                            this._isReadyToPlay = true;
                             // Simulating a ready to play event to avoid breaking code path
                             if (this._readyToPlayCallback) {
                                 window.setTimeout(function () {
@@ -629,6 +630,6 @@ var BABYLON;
             return newSound;
         };
         return Sound;
-    })();
+    }());
     BABYLON.Sound = Sound;
 })(BABYLON || (BABYLON = {}));

src/Audio/babylon.sound.ts

@@ -1,4 +1,4 @@
-module BABYLON {
+module BABYLON {
     export class Sound {
         public name: string;
         public autoplay: boolean = false;
@@ -161,6 +161,7 @@
                     }
                     else {
                         if (!codecSupportedFound) {
+                            this._isReadyToPlay = true;
                             // Simulating a ready to play event to avoid breaking code path
                             if (this._readyToPlayCallback) {
                                 window.setTimeout(() => {
@@ -683,4 +684,4 @@
             return newSound;
         }
     }
-}
+}

src/Audio/babylon.soundtrack.js

@@ -96,6 +96,6 @@ var BABYLON;
             }
         };
         return SoundTrack;
-    })();
+    }());
     BABYLON.SoundTrack = SoundTrack;
 })(BABYLON || (BABYLON = {}));

src/Bones/babylon.bone.js

@@ -55,11 +55,14 @@ var BABYLON;
             return this._absoluteTransform;
         };
         // Methods
-        Bone.prototype.updateMatrix = function (matrix) {
+        Bone.prototype.updateMatrix = function (matrix, updateDifferenceMatrix) {
+            if (updateDifferenceMatrix === void 0) { updateDifferenceMatrix = true; }
             this._baseMatrix = matrix.clone();
             this._matrix = matrix.clone();
             this._skeleton._markAsDirty();
-            this._updateDifferenceMatrix();
+            if (updateDifferenceMatrix) {
+                this._updateDifferenceMatrix();
+            }
         };
         Bone.prototype._updateDifferenceMatrix = function (rootMatrix) {
             if (!rootMatrix) {
@@ -136,6 +139,6 @@ var BABYLON;
             return true;
         };
         return Bone;
-    })(BABYLON.Node);
+    }(BABYLON.Node));
     BABYLON.Bone = Bone;
 })(BABYLON || (BABYLON = {}));

src/Bones/babylon.bone.ts

@@ -66,13 +66,15 @@
         }
 
         // Methods
-        public updateMatrix(matrix: Matrix): void {
+        public updateMatrix(matrix: Matrix, updateDifferenceMatrix = true): void {
             this._baseMatrix = matrix.clone();
             this._matrix = matrix.clone();
 
             this._skeleton._markAsDirty();
 
-            this._updateDifferenceMatrix();
+            if (updateDifferenceMatrix) {
+                this._updateDifferenceMatrix();
+            }
         }
 
         public _updateDifferenceMatrix(rootMatrix?: Matrix): void {

src/Bones/babylon.skeleton.js

@@ -334,6 +334,6 @@ var BABYLON;
             return skeleton;
         };
         return Skeleton;
-    })();
+    }());
     BABYLON.Skeleton = Skeleton;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.arcrotatecamera.input.gamepad.js

@@ -65,7 +65,7 @@ var BABYLON;
             BABYLON.serialize()
         ], ArcRotateCameraGamepadInput.prototype, "gamepadMoveSensibility", void 0);
         return ArcRotateCameraGamepadInput;
-    })();
+    }());
     BABYLON.ArcRotateCameraGamepadInput = ArcRotateCameraGamepadInput;
     BABYLON.CameraInputTypes["ArcRotateCameraGamepadInput"] = ArcRotateCameraGamepadInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.arcrotatecamera.input.keyboard.js

@@ -110,7 +110,7 @@ var BABYLON;
             BABYLON.serialize()
         ], ArcRotateCameraKeyboardMoveInput.prototype, "keysRight", void 0);
         return ArcRotateCameraKeyboardMoveInput;
-    })();
+    }());
     BABYLON.ArcRotateCameraKeyboardMoveInput = ArcRotateCameraKeyboardMoveInput;
     BABYLON.CameraInputTypes["ArcRotateCameraKeyboardMoveInput"] = ArcRotateCameraKeyboardMoveInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.arcrotatecamera.input.mousewheel.js

@@ -51,7 +51,7 @@ var BABYLON;
             BABYLON.serialize()
         ], ArcRotateCameraMouseWheelInput.prototype, "wheelPrecision", void 0);
         return ArcRotateCameraMouseWheelInput;
-    })();
+    }());
     BABYLON.ArcRotateCameraMouseWheelInput = ArcRotateCameraMouseWheelInput;
     BABYLON.CameraInputTypes["ArcRotateCameraMouseWheelInput"] = ArcRotateCameraMouseWheelInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.arcrotatecamera.input.pointers.js

@@ -206,7 +206,7 @@ var BABYLON;
             BABYLON.serialize()
         ], ArcRotateCameraPointersInput.prototype, "panningSensibility", void 0);
         return ArcRotateCameraPointersInput;
-    })();
+    }());
     BABYLON.ArcRotateCameraPointersInput = ArcRotateCameraPointersInput;
     BABYLON.CameraInputTypes["ArcRotateCameraPointersInput"] = ArcRotateCameraPointersInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.arcrotatecamera.input.vrdeviceorientation.js

@@ -42,7 +42,7 @@ var BABYLON;
             return "VRDeviceOrientation";
         };
         return ArcRotateCameraVRDeviceOrientationInput;
-    })();
+    }());
     BABYLON.ArcRotateCameraVRDeviceOrientationInput = ArcRotateCameraVRDeviceOrientationInput;
     BABYLON.CameraInputTypes["ArcRotateCameraVRDeviceOrientationInput"] = ArcRotateCameraVRDeviceOrientationInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.freecamera.input.deviceorientation.js

@@ -45,6 +45,10 @@ var BABYLON;
             window.removeEventListener("deviceorientation", this._deviceOrientation);
         };
         FreeCameraDeviceOrientationInput.prototype.checkInputs = function () {
+            //if no device orientation provided, don't update the rotation.
+            //Only testing against alpha under the assumption thatnorientation will never be so exact when set.
+            if (!this._alpha)
+                return;
             BABYLON.Quaternion.RotationYawPitchRollToRef(BABYLON.Tools.ToRadians(this._alpha), BABYLON.Tools.ToRadians(this._beta), -BABYLON.Tools.ToRadians(this._gamma), this.camera.rotationQuaternion);
             this._camera.rotationQuaternion.multiplyInPlace(this._screenQuaternion);
             this._camera.rotationQuaternion.multiplyInPlace(this._constantTranform);
@@ -59,7 +63,7 @@ var BABYLON;
             return "deviceOrientation";
         };
         return FreeCameraDeviceOrientationInput;
-    })();
+    }());
     BABYLON.FreeCameraDeviceOrientationInput = FreeCameraDeviceOrientationInput;
     BABYLON.CameraInputTypes["FreeCameraDeviceOrientationInput"] = FreeCameraDeviceOrientationInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.freecamera.input.deviceorientation.ts

@@ -51,6 +51,9 @@ module BABYLON {
         }
 
         public checkInputs() {
+            //if no device orientation provided, don't update the rotation.
+            //Only testing against alpha under the assumption thatnorientation will never be so exact when set.
+            if(!this._alpha) return;
             Quaternion.RotationYawPitchRollToRef(BABYLON.Tools.ToRadians(this._alpha), BABYLON.Tools.ToRadians(this._beta), -BABYLON.Tools.ToRadians(this._gamma), this.camera.rotationQuaternion)
             this._camera.rotationQuaternion.multiplyInPlace(this._screenQuaternion);
             this._camera.rotationQuaternion.multiplyInPlace(this._constantTranform);

src/Cameras/Inputs/babylon.freecamera.input.gamepad.js

@@ -60,7 +60,7 @@ var BABYLON;
             BABYLON.serialize()
         ], FreeCameraGamepadInput.prototype, "gamepadMoveSensibility", void 0);
         return FreeCameraGamepadInput;
-    })();
+    }());
     BABYLON.FreeCameraGamepadInput = FreeCameraGamepadInput;
     BABYLON.CameraInputTypes["FreeCameraGamepadInput"] = FreeCameraGamepadInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.freecamera.input.keyboard.js

@@ -115,7 +115,7 @@ var BABYLON;
             BABYLON.serialize()
         ], FreeCameraKeyboardMoveInput.prototype, "keysRight", void 0);
         return FreeCameraKeyboardMoveInput;
-    })();
+    }());
     BABYLON.FreeCameraKeyboardMoveInput = FreeCameraKeyboardMoveInput;
     BABYLON.CameraInputTypes["FreeCameraKeyboardMoveInput"] = FreeCameraKeyboardMoveInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.freecamera.input.mouse.js

@@ -49,19 +49,11 @@ var BABYLON;
                         }
                     }
                     else if (p.type === BABYLON.PointerEventTypes.POINTERMOVE) {
-                        if (!_this.previousPosition && !engine.isPointerLock) {
+                        if (!_this.previousPosition || engine.isPointerLock) {
                             return;
                         }
-                        var offsetX;
-                        var offsetY;
-                        if (!engine.isPointerLock) {
-                            offsetX = evt.clientX - _this.previousPosition.x;
-                            offsetY = evt.clientY - _this.previousPosition.y;
-                        }
-                        else {
-                            offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
-                            offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
-                        }
+                        var offsetX = evt.clientX - _this.previousPosition.x;
+                        var offsetY = evt.clientY - _this.previousPosition.y;
                         if (_this.camera.getScene().useRightHandedSystem) {
                             camera.cameraRotation.y -= offsetX / _this.angularSensibility;
                         }
@@ -79,12 +71,33 @@ var BABYLON;
                     }
                 };
             }
+            this._onMouseMove = function (evt) {
+                if (!engine.isPointerLock) {
+                    return;
+                }
+                var offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
+                var offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
+                if (_this.camera.getScene().useRightHandedSystem) {
+                    camera.cameraRotation.y -= offsetX / _this.angularSensibility;
+                }
+                else {
+                    camera.cameraRotation.y += offsetX / _this.angularSensibility;
+                }
+                camera.cameraRotation.x += offsetY / _this.angularSensibility;
+                _this.previousPosition = null;
+                if (!noPreventDefault) {
+                    evt.preventDefault();
+                }
+            };
             this._observer = this.camera.getScene().onPointerObservable.add(this._pointerInput, BABYLON.PointerEventTypes.POINTERDOWN | BABYLON.PointerEventTypes.POINTERUP | BABYLON.PointerEventTypes.POINTERMOVE);
+            element.addEventListener("mousemove", this._onMouseMove, false);
         };
         FreeCameraMouseInput.prototype.detachControl = function (element) {
             if (this._observer && element) {
                 this.camera.getScene().onPointerObservable.remove(this._observer);
+                element.removeEventListener("mousemove", this._onMouseMove);
                 this._observer = null;
+                this._onMouseMove = null;
                 this.previousPosition = null;
             }
         };
@@ -98,7 +111,7 @@ var BABYLON;
             BABYLON.serialize()
         ], FreeCameraMouseInput.prototype, "angularSensibility", void 0);
         return FreeCameraMouseInput;
-    })();
+    }());
     BABYLON.FreeCameraMouseInput = FreeCameraMouseInput;
     BABYLON.CameraInputTypes["FreeCameraMouseInput"] = FreeCameraMouseInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.freecamera.input.mouse.ts

@@ -6,10 +6,11 @@ module BABYLON {
         public angularSensibility = 2000.0;
 
         private _pointerInput: (p: PointerInfo, s: EventState) => void;
+        private _onMouseMove: (e: MouseEvent) => any;
         private _observer: Observer<PointerInfo>;
 
         private previousPosition: { x: number, y: number };
-
+        
         constructor(public touchEnabled = true) {
         }
 
@@ -55,26 +56,19 @@ module BABYLON {
                     }
 
                     else if (p.type === PointerEventTypes.POINTERMOVE) {
-                        if (!this.previousPosition && !engine.isPointerLock) {
+                        if (!this.previousPosition || engine.isPointerLock) {
                             return;
                         }
 
-                        var offsetX;
-                        var offsetY;
-
-                        if (!engine.isPointerLock) {
-                            offsetX = evt.clientX - this.previousPosition.x;
-                            offsetY = evt.clientY - this.previousPosition.y;
-                        } else {
-                            offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
-                            offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
-                        }
-
+                        var offsetX = evt.clientX - this.previousPosition.x;
+                        var offsetY = evt.clientY - this.previousPosition.y;
+                        
                         if (this.camera.getScene().useRightHandedSystem) {
                             camera.cameraRotation.y -= offsetX / this.angularSensibility;
                         } else {
                             camera.cameraRotation.y += offsetX / this.angularSensibility;                            
                         }
+
                         camera.cameraRotation.x += offsetY / this.angularSensibility;
 
                         this.previousPosition = {
@@ -89,14 +83,41 @@ module BABYLON {
                 }
             }
 
+            this._onMouseMove = evt => {
+                if (!engine.isPointerLock) {
+                    return;
+                }
+
+                var offsetX = evt.movementX || evt.mozMovementX || evt.webkitMovementX || evt.msMovementX || 0;
+                var offsetY = evt.movementY || evt.mozMovementY || evt.webkitMovementY || evt.msMovementY || 0;
+
+                if (this.camera.getScene().useRightHandedSystem) {
+                    camera.cameraRotation.y -= offsetX / this.angularSensibility;
+                } else {
+                    camera.cameraRotation.y += offsetX / this.angularSensibility;                            
+                }
+                
+                camera.cameraRotation.x += offsetY / this.angularSensibility;
+
+                this.previousPosition = null;
+                
+                if (!noPreventDefault) {
+                    evt.preventDefault();
+                }
+            };
+
             this._observer = this.camera.getScene().onPointerObservable.add(this._pointerInput, PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP | PointerEventTypes.POINTERMOVE);
+            element.addEventListener("mousemove", this._onMouseMove, false);
+
         }
 
         detachControl(element: HTMLElement) {
             if (this._observer && element) {
                 this.camera.getScene().onPointerObservable.remove(this._observer);
-                this._observer = null;
+                element.removeEventListener("mousemove", this._onMouseMove);
 
+                this._observer = null;
+                this._onMouseMove = null;
                 this.previousPosition = null;
             }
         }

src/Cameras/Inputs/babylon.freecamera.input.touch.js

@@ -116,7 +116,7 @@ var BABYLON;
             BABYLON.serialize()
         ], FreeCameraTouchInput.prototype, "touchMoveSensibility", void 0);
         return FreeCameraTouchInput;
-    })();
+    }());
     BABYLON.FreeCameraTouchInput = FreeCameraTouchInput;
     BABYLON.CameraInputTypes["FreeCameraTouchInput"] = FreeCameraTouchInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/Inputs/babylon.freecamera.input.virtualjoystick.js

@@ -48,7 +48,7 @@ var BABYLON;
             return "virtualJoystick";
         };
         return FreeCameraVirtualJoystickInput;
-    })();
+    }());
     BABYLON.FreeCameraVirtualJoystickInput = FreeCameraVirtualJoystickInput;
     BABYLON.CameraInputTypes["FreeCameraVirtualJoystickInput"] = FreeCameraVirtualJoystickInput;
 })(BABYLON || (BABYLON = {}));

src/Cameras/VR/babylon.vrCameraMetrics.js

@@ -67,6 +67,6 @@ var BABYLON;
             return result;
         };
         return VRCameraMetrics;
-    })();
+    }());
     BABYLON.VRCameraMetrics = VRCameraMetrics;
 })(BABYLON || (BABYLON = {}));

src/Cameras/VR/babylon.vrDeviceOrientationCamera.js

@@ -18,7 +18,7 @@ var BABYLON;
             return "VRDeviceOrientationFreeCamera";
         };
         return VRDeviceOrientationFreeCamera;
-    })(BABYLON.DeviceOrientationCamera);
+    }(BABYLON.DeviceOrientationCamera));
     BABYLON.VRDeviceOrientationFreeCamera = VRDeviceOrientationFreeCamera;
     var VRDeviceOrientationArcRotateCamera = (function (_super) {
         __extends(VRDeviceOrientationArcRotateCamera, _super);
@@ -34,6 +34,6 @@ var BABYLON;
             return "VRDeviceOrientationArcRotateCamera";
         };
         return VRDeviceOrientationArcRotateCamera;
-    })(BABYLON.ArcRotateCamera);
+    }(BABYLON.ArcRotateCamera));
     BABYLON.VRDeviceOrientationArcRotateCamera = VRDeviceOrientationArcRotateCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/VR/babylon.webVRCamera.js

@@ -101,6 +101,6 @@ var BABYLON;
             this._vrDevice.resetPose();
         };
         return WebVRFreeCamera;
-    })(BABYLON.FreeCamera);
+    }(BABYLON.FreeCamera));
     BABYLON.WebVRFreeCamera = WebVRFreeCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.arcRotateCamera.js

@@ -240,7 +240,8 @@ var BABYLON;
         };
         ArcRotateCamera.prototype._getTargetPosition = function () {
             if (this.target.getAbsolutePosition) {
-                return this.target.getAbsolutePosition();
+                var pos = this.target.getAbsolutePosition();
+                return this._targetBoundingCenter ? pos.add(this._targetBoundingCenter) : pos;
             }
             return this.target;
         };
@@ -381,10 +382,17 @@ var BABYLON;
             this.position.copyFrom(position);
             this.rebuildAnglesAndRadius();
         };
-        ArcRotateCamera.prototype.setTarget = function (target) {
+        ArcRotateCamera.prototype.setTarget = function (target, toBoundingCenter) {
+            if (toBoundingCenter === void 0) { toBoundingCenter = false; }
             if (this._getTargetPosition().equals(target)) {
                 return;
             }
+            if (toBoundingCenter && target.getBoundingInfo) {
+                this._targetBoundingCenter = target.getBoundingInfo().boundingBox.center.clone();
+            }
+            else {
+                this._targetBoundingCenter = null;
+            }
             this.target = target;
             this.rebuildAnglesAndRadius();
         };
@@ -553,6 +561,6 @@ var BABYLON;
             BABYLON.serialize()
         ], ArcRotateCamera.prototype, "allowUpsideDown", void 0);
         return ArcRotateCamera;
-    })(BABYLON.TargetCamera);
+    }(BABYLON.TargetCamera));
     BABYLON.ArcRotateCamera = ArcRotateCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.arcRotateCamera.ts

@@ -193,6 +193,8 @@
         private _previousRadius: number;
         //due to async collision inspection
         private _collisionTriggered: boolean;
+        
+        private _targetBoundingCenter: Vector3;
 
         constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene) {
             super(name, Vector3.Zero(), scene);
@@ -236,7 +238,8 @@
 
         private _getTargetPosition(): Vector3 {
             if ((<any>this.target).getAbsolutePosition) {
-                return (<any>this.target).getAbsolutePosition();
+                var pos : Vector3 = (<any>this.target).getAbsolutePosition();
+                return this._targetBoundingCenter ? pos.add(this._targetBoundingCenter) : pos;
             }
 
             return this.target;
@@ -402,10 +405,16 @@
             this.rebuildAnglesAndRadius();
         }
 
-        public setTarget(target: Vector3): void {
+        public setTarget(target: Vector3, toBoundingCenter = false): void {            
             if (this._getTargetPosition().equals(target)) {
                 return;
             }
+            
+            if (toBoundingCenter && (<any>target).getBoundingInfo){
+                this._targetBoundingCenter = (<any>target).getBoundingInfo().boundingBox.center.clone();
+            }else{
+                this._targetBoundingCenter = null;
+            }
             this.target = target;
             this.rebuildAnglesAndRadius();
         }

src/Cameras/babylon.arcRotateCameraInputsManager.js

@@ -31,6 +31,6 @@ var BABYLON;
             return this;
         };
         return ArcRotateCameraInputsManager;
-    })(BABYLON.CameraInputsManager);
+    }(BABYLON.CameraInputsManager));
     BABYLON.ArcRotateCameraInputsManager = ArcRotateCameraInputsManager;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.camera.js

@@ -160,6 +160,7 @@ var BABYLON;
             this._cache.minZ = undefined;
             this._cache.maxZ = undefined;
             this._cache.fov = undefined;
+            this._cache.fovMode = undefined;
             this._cache.aspectRatio = undefined;
             this._cache.orthoLeft = undefined;
             this._cache.orthoRight = undefined;
@@ -179,6 +180,7 @@ var BABYLON;
             this._cache.minZ = this.minZ;
             this._cache.maxZ = this.maxZ;
             this._cache.fov = this.fov;
+            this._cache.fovMode = this.fovMode;
             this._cache.aspectRatio = engine.getAspectRatio(this);
             this._cache.orthoLeft = this.orthoLeft;
             this._cache.orthoRight = this.orthoRight;
@@ -212,6 +214,7 @@ var BABYLON;
             var engine = this.getEngine();
             if (this.mode === Camera.PERSPECTIVE_CAMERA) {
                 check = this._cache.fov === this.fov
+                    && this._cache.fovMode === this.fovMode
                     && this._cache.aspectRatio === engine.getAspectRatio(this);
             }
             else {
@@ -685,6 +688,6 @@ var BABYLON;
             BABYLON.serialize()
         ], Camera.prototype, "isStereoscopicSideBySide", void 0);
         return Camera;
-    })(BABYLON.Node);
+    }(BABYLON.Node));
     BABYLON.Camera = Camera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.camera.ts

@@ -185,6 +185,7 @@
             this._cache.maxZ = undefined;
 
             this._cache.fov = undefined;
+            this._cache.fovMode = undefined;
             this._cache.aspectRatio = undefined;
 
             this._cache.orthoLeft = undefined;
@@ -210,6 +211,7 @@
             this._cache.maxZ = this.maxZ;
 
             this._cache.fov = this.fov;
+            this._cache.fovMode = this.fovMode;
             this._cache.aspectRatio = engine.getAspectRatio(this);
 
             this._cache.orthoLeft = this.orthoLeft;
@@ -252,6 +254,7 @@
 
             if (this.mode === Camera.PERSPECTIVE_CAMERA) {
                 check = this._cache.fov === this.fov
+                    && this._cache.fovMode === this.fovMode
                     && this._cache.aspectRatio === engine.getAspectRatio(this);
             }
             else {

src/Cameras/babylon.cameraInputsManager.js

@@ -128,6 +128,6 @@ var BABYLON;
             }
         };
         return CameraInputsManager;
-    })();
+    }());
     BABYLON.CameraInputsManager = CameraInputsManager;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.deviceOrientationCamera.js

@@ -10,6 +10,7 @@ var BABYLON;
         __extends(DeviceOrientationCamera, _super);
         function DeviceOrientationCamera(name, position, scene) {
             _super.call(this, name, position, scene);
+            this._quaternionCache = new BABYLON.Quaternion();
             this.inputs.addDeviceOrientation();
         }
         DeviceOrientationCamera.prototype.getTypeName = function () {
@@ -17,8 +18,8 @@ var BABYLON;
         };
         DeviceOrientationCamera.prototype._checkInputs = function () {
             _super.prototype._checkInputs.call(this);
+            this._quaternionCache.copyFrom(this.rotationQuaternion);
             if (this._initialQuaternion) {
-                this._quaternionCache.copyFrom(this.rotationQuaternion);
                 this._initialQuaternion.multiplyToRef(this.rotationQuaternion, this.rotationQuaternion);
             }
         };
@@ -41,8 +42,10 @@ var BABYLON;
                 }
             });
             this._initialQuaternion.normalize();
+            //force rotation update
+            this._initialQuaternion.multiplyToRef(this.rotationQuaternion, this.rotationQuaternion);
         };
         return DeviceOrientationCamera;
-    })(BABYLON.FreeCamera);
+    }(BABYLON.FreeCamera));
     BABYLON.DeviceOrientationCamera = DeviceOrientationCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.deviceOrientationCamera.ts

@@ -7,6 +7,7 @@ module BABYLON {
 
         constructor(name: string, position: Vector3, scene: Scene) {
             super(name, position, scene);
+            this._quaternionCache = new Quaternion();
             this.inputs.addDeviceOrientation();
         }
 
@@ -16,18 +17,18 @@ module BABYLON {
 
         public _checkInputs(): void {
             super._checkInputs();
+            this._quaternionCache.copyFrom(this.rotationQuaternion);
             if (this._initialQuaternion) {
-                this._quaternionCache.copyFrom(this.rotationQuaternion);
                 this._initialQuaternion.multiplyToRef(this.rotationQuaternion, this.rotationQuaternion);
             }
         }
 
-        public resetToCurrentRotation(axis: BABYLON.Axis = BABYLON.Axis.Y) {
+        public resetToCurrentRotation(axis: Axis = Axis.Y) {
             //can only work if this camera has a rotation quaternion already.
             if (!this.rotationQuaternion) return;
 
             if (!this._initialQuaternion) {
-                this._initialQuaternion = new BABYLON.Quaternion();
+                this._initialQuaternion = new Quaternion();
             }
 
             this._initialQuaternion.copyFrom(this._quaternionCache || this.rotationQuaternion);
@@ -40,6 +41,8 @@ module BABYLON {
                 }
             });
             this._initialQuaternion.normalize();
+            //force rotation update
+            this._initialQuaternion.multiplyToRef(this.rotationQuaternion, this.rotationQuaternion);
         }
     }
 }

src/Cameras/babylon.followCamera.js

@@ -84,7 +84,7 @@ var BABYLON;
             BABYLON.serializeAsMeshReference("lockedTargetId")
         ], FollowCamera.prototype, "target", void 0);
         return FollowCamera;
-    })(BABYLON.TargetCamera);
+    }(BABYLON.TargetCamera));
     BABYLON.FollowCamera = FollowCamera;
     var ArcFollowCamera = (function (_super) {
         __extends(ArcFollowCamera, _super);
@@ -112,6 +112,6 @@ var BABYLON;
             return "ArcFollowCamera";
         };
         return ArcFollowCamera;
-    })(BABYLON.TargetCamera);
+    }(BABYLON.TargetCamera));
     BABYLON.ArcFollowCamera = ArcFollowCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.freeCamera.js

@@ -180,6 +180,6 @@ var BABYLON;
             BABYLON.serialize()
         ], FreeCamera.prototype, "applyGravity", void 0);
         return FreeCamera;
-    })(BABYLON.TargetCamera);
+    }(BABYLON.TargetCamera));
     BABYLON.FreeCamera = FreeCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.freeCameraInputsManager.js

@@ -36,6 +36,6 @@ var BABYLON;
             return this;
         };
         return FreeCameraInputsManager;
-    })(BABYLON.CameraInputsManager);
+    }(BABYLON.CameraInputsManager));
     BABYLON.FreeCameraInputsManager = FreeCameraInputsManager;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.gamepadCamera.js

@@ -46,6 +46,6 @@ var BABYLON;
             return "GamepadCamera";
         };
         return GamepadCamera;
-    })(BABYLON.UniversalCamera);
+    }(BABYLON.UniversalCamera));
     BABYLON.GamepadCamera = GamepadCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.stereoscopicCameras.js

@@ -16,7 +16,7 @@ var BABYLON;
             return "AnaglyphFreeCamera";
         };
         return AnaglyphFreeCamera;
-    })(BABYLON.FreeCamera);
+    }(BABYLON.FreeCamera));
     BABYLON.AnaglyphFreeCamera = AnaglyphFreeCamera;
     var AnaglyphArcRotateCamera = (function (_super) {
         __extends(AnaglyphArcRotateCamera, _super);
@@ -29,7 +29,7 @@ var BABYLON;
             return "AnaglyphArcRotateCamera";
         };
         return AnaglyphArcRotateCamera;
-    })(BABYLON.ArcRotateCamera);
+    }(BABYLON.ArcRotateCamera));
     BABYLON.AnaglyphArcRotateCamera = AnaglyphArcRotateCamera;
     var AnaglyphGamepadCamera = (function (_super) {
         __extends(AnaglyphGamepadCamera, _super);
@@ -42,7 +42,7 @@ var BABYLON;
             return "AnaglyphGamepadCamera";
         };
         return AnaglyphGamepadCamera;
-    })(BABYLON.GamepadCamera);
+    }(BABYLON.GamepadCamera));
     BABYLON.AnaglyphGamepadCamera = AnaglyphGamepadCamera;
     var AnaglyphUniversalCamera = (function (_super) {
         __extends(AnaglyphUniversalCamera, _super);
@@ -55,7 +55,7 @@ var BABYLON;
             return "AnaglyphUniversalCamera";
         };
         return AnaglyphUniversalCamera;
-    })(BABYLON.UniversalCamera);
+    }(BABYLON.UniversalCamera));
     BABYLON.AnaglyphUniversalCamera = AnaglyphUniversalCamera;
     var StereoscopicFreeCamera = (function (_super) {
         __extends(StereoscopicFreeCamera, _super);
@@ -69,7 +69,7 @@ var BABYLON;
             return "StereoscopicFreeCamera";
         };
         return StereoscopicFreeCamera;
-    })(BABYLON.FreeCamera);
+    }(BABYLON.FreeCamera));
     BABYLON.StereoscopicFreeCamera = StereoscopicFreeCamera;
     var StereoscopicArcRotateCamera = (function (_super) {
         __extends(StereoscopicArcRotateCamera, _super);
@@ -83,7 +83,7 @@ var BABYLON;
             return "StereoscopicArcRotateCamera";
         };
         return StereoscopicArcRotateCamera;
-    })(BABYLON.ArcRotateCamera);
+    }(BABYLON.ArcRotateCamera));
     BABYLON.StereoscopicArcRotateCamera = StereoscopicArcRotateCamera;
     var StereoscopicGamepadCamera = (function (_super) {
         __extends(StereoscopicGamepadCamera, _super);
@@ -97,7 +97,7 @@ var BABYLON;
             return "StereoscopicGamepadCamera";
         };
         return StereoscopicGamepadCamera;
-    })(BABYLON.GamepadCamera);
+    }(BABYLON.GamepadCamera));
     BABYLON.StereoscopicGamepadCamera = StereoscopicGamepadCamera;
     var StereoscopicUniversalCamera = (function (_super) {
         __extends(StereoscopicUniversalCamera, _super);
@@ -111,6 +111,6 @@ var BABYLON;
             return "StereoscopicUniversalCamera";
         };
         return StereoscopicUniversalCamera;
-    })(BABYLON.UniversalCamera);
+    }(BABYLON.UniversalCamera));
     BABYLON.StereoscopicUniversalCamera = StereoscopicUniversalCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.targetCamera.js

@@ -269,6 +269,6 @@ var BABYLON;
             BABYLON.serializeAsMeshReference("lockedTargetId")
         ], TargetCamera.prototype, "lockedTarget", void 0);
         return TargetCamera;
-    })(BABYLON.Camera);
+    }(BABYLON.Camera));
     BABYLON.TargetCamera = TargetCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.touchCamera.js

@@ -53,6 +53,6 @@ var BABYLON;
             }
         };
         return TouchCamera;
-    })(BABYLON.FreeCamera);
+    }(BABYLON.FreeCamera));
     BABYLON.TouchCamera = TouchCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.universalCamera.js

@@ -46,6 +46,6 @@ var BABYLON;
             return "UniversalCamera";
         };
         return UniversalCamera;
-    })(BABYLON.TouchCamera);
+    }(BABYLON.TouchCamera));
     BABYLON.UniversalCamera = UniversalCamera;
 })(BABYLON || (BABYLON = {}));

src/Cameras/babylon.virtualJoysticksCamera.js

@@ -13,6 +13,6 @@ var BABYLON;
             this.inputs.addVirtualJoystick();
         }
         return VirtualJoysticksCamera;
-    })(BABYLON.FreeCamera);
+    }(BABYLON.FreeCamera));
     BABYLON.VirtualJoysticksCamera = VirtualJoysticksCamera;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.bounding2d.js

@@ -72,8 +72,8 @@ var BABYLON;
          */
         BoundingInfo2D.CreateFromPointsToRef = function (points, b) {
             var xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
-            for (var _i = 0; _i < points.length; _i++) {
-                var p = points[_i];
+            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
+                var p = points_1[_i];
                 xmin = Math.min(p.x, xmin);
                 xmax = Math.max(p.x, xmax);
                 ymin = Math.min(p.y, ymin);
@@ -206,6 +206,6 @@ var BABYLON;
         };
         BoundingInfo2D._transform = new Array(BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero(), BABYLON.Vector2.Zero());
         return BoundingInfo2D;
-    })();
+    }());
     BABYLON.BoundingInfo2D = BoundingInfo2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.brushes2d.js

@@ -35,7 +35,7 @@ var BABYLON;
         LockableBase.prototype.onLock = function () {
         };
         return LockableBase;
-    })();
+    }());
     BABYLON.LockableBase = LockableBase;
     var SolidColorBrush2D = (function (_super) {
         __extends(SolidColorBrush2D, _super);
@@ -82,7 +82,7 @@ var BABYLON;
             BABYLON.className("SolidColorBrush2D")
         ], SolidColorBrush2D);
         return SolidColorBrush2D;
-    })(LockableBase);
+    }(LockableBase));
     BABYLON.SolidColorBrush2D = SolidColorBrush2D;
     var GradientColorBrush2D = (function (_super) {
         __extends(GradientColorBrush2D, _super);
@@ -207,6 +207,6 @@ var BABYLON;
             BABYLON.className("GradientColorBrush2D")
         ], GradientColorBrush2D);
         return GradientColorBrush2D;
-    })(LockableBase);
+    }(LockableBase));
     BABYLON.GradientColorBrush2D = GradientColorBrush2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.canvas2d.js

@@ -27,7 +27,7 @@ var BABYLON;
             return true;
         };
         return Canvas2DEngineBoundData;
-    })();
+    }());
     BABYLON.Canvas2DEngineBoundData = Canvas2DEngineBoundData;
     var Canvas2D = (function (_super) {
         __extends(Canvas2D, _super);
@@ -122,7 +122,9 @@ var BABYLON;
                 }
                 // Put a handler to resize the background whenever the canvas is resizing
                 this.propertyChanged.add(function (e, s) {
-                    _this._background.size = _this.size;
+                    if (e.propertyName === "size") {
+                        _this._background.size = _this.size;
+                    }
                 }, BABYLON.Group2D.sizeProperty.flagId);
                 this._background._patchHierarchy(this);
             }
@@ -365,11 +367,13 @@ var BABYLON;
                 return;
             }
             // Update the this._primPointerInfo structure we'll send to observers using the PointerEvent data
-            this._updatePointerInfo(eventData, localPosition);
+            if (!this._updatePointerInfo(eventData, localPosition)) {
+                return;
+            }
             var capturedPrim = this.getCapturedPrimitive(this._primPointerInfo.pointerId);
             // Make sure the intersection list is up to date, we maintain this list either in response of a mouse event (here) or before rendering the canvas.
             // Why before rendering the canvas? because some primitives may move and get away/under the mouse cursor (which is not moving). So we need to update at both location in order to always have an accurate list, which is needed for the hover state change.
-            this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, capturedPrim !== null);
+            this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, capturedPrim !== null, true);
             // Update the over status, same as above, it's could be done here or during rendering, but will be performed only once per render frame
             this._updateOverStatus();
             // Check if we have nothing to raise
@@ -403,6 +407,9 @@ var BABYLON;
                 pii.canvasPointerPos = BABYLON.Vector2.Zero();
             }
             var camera = this._scene.cameraToUseForPointers || this._scene.activeCamera;
+            if (!camera || !camera.viewport) {
+                return false;
+            }
             var engine = this._scene.getEngine();
             if (this._isScreenSpace) {
                 var cameraViewport = camera.viewport;
@@ -444,9 +451,10 @@ var BABYLON;
                 pii.tilt.y = pe.tiltY;
                 pii.isCaptured = this.getCapturedPrimitive(pe.pointerId) !== null;
             }
+            return true;
         };
-        Canvas2D.prototype._updateIntersectionList = function (mouseLocalPos, isCapture) {
-            if (this.scene.getRenderId() === this._intersectionRenderId) {
+        Canvas2D.prototype._updateIntersectionList = function (mouseLocalPos, isCapture, force) {
+            if (!force && (this.scene.getRenderId() === this._intersectionRenderId)) {
                 return;
             }
             // A little safe guard, it might happens than the event is triggered before the first render and nothing is computed, this simple check will make sure everything will be fine
@@ -603,7 +611,7 @@ var BABYLON;
                         window.setTimeout(function () {
                             var ppi = _this._primPointerInfo;
                             var capturedPrim = _this.getCapturedPrimitive(ppi.pointerId);
-                            _this._updateIntersectionList(ppi.canvasPointerPos, capturedPrim !== null);
+                            _this._updateIntersectionList(ppi.canvasPointerPos, capturedPrim !== null, true);
                             var ii = new BABYLON.IntersectInfo2D();
                             ii.pickPosition = ppi.canvasPointerPos.clone();
                             ii.findFirstOnly = false;
@@ -1077,7 +1085,8 @@ var BABYLON;
             this._renderingSize.height = newHeight;
             // If the canvas fit the rendering size and it changed, update
             if (renderingSizeChanged && this._fitRenderingDevice) {
-                this.size = this._renderingSize;
+                this._actualSize = this._renderingSize.clone();
+                this._size = this._renderingSize.clone();
                 if (this._background) {
                     this._background.size = this.size;
                 }
@@ -1086,7 +1095,7 @@ var BABYLON;
             }
             // If there's a design size, update the scale according to the renderingSize
             if (this._designSize) {
-                var scale;
+                var scale = void 0;
                 if (this._designUseHorizAxis) {
                     scale = this._renderingSize.width / this._designSize.width;
                 }
@@ -1118,7 +1127,7 @@ var BABYLON;
             }
             this._updateCanvasState(false);
             if (this._primPointerInfo.canvasPointerPos) {
-                this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, false);
+                this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, false, false);
                 this._updateOverStatus(); // TODO this._primPointerInfo may not be up to date!
             }
             this.engine.setState(false);
@@ -1167,8 +1176,8 @@ var BABYLON;
             // Try to find a spot in one of the cached texture
             var res = null;
             var map;
-            for (var _i = 0; _i < mapArray.length; _i++) {
-                var _map = mapArray[_i];
+            for (var _i = 0, mapArray_1 = mapArray; _i < mapArray_1.length; _i++) {
+                var _map = mapArray_1[_i];
                 map = _map;
                 var node = map.allocateRect(size);
                 if (node) {
@@ -1197,7 +1206,7 @@ var BABYLON;
             if (group !== this || this._isScreenSpace) {
                 var node = res.node;
                 // Special case if the canvas is entirely cached: create a group that will have a single sprite it will be rendered specifically at the very end of the rendering process
-                var sprite;
+                var sprite = void 0;
                 if (this._cachingStrategy === Canvas2D.CACHESTRATEGY_CANVAS) {
                     this._cachedCanvasGroup = BABYLON.Group2D._createCachedCanvasGroup(this);
                     sprite = new BABYLON.Sprite2D(map, { parent: this._cachedCanvasGroup, id: "__cachedCanvasSprite__", spriteSize: node.contentSize, spriteLocation: node.pos });
@@ -1377,7 +1386,7 @@ var BABYLON;
             BABYLON.className("Canvas2D")
         ], Canvas2D);
         return Canvas2D;
-    })(BABYLON.Group2D);
+    }(BABYLON.Group2D));
     BABYLON.Canvas2D = Canvas2D;
     var WorldSpaceCanvas2D = (function (_super) {
         __extends(WorldSpaceCanvas2D, _super);
@@ -1408,6 +1417,7 @@ var BABYLON;
          * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function WorldSpaceCanvas2D(scene, size, settings) {
+            var _this = this;
             BABYLON.Prim2DBase._isCanvasInit = true;
             var s = settings;
             s.isScreenSpace = false;
@@ -1457,12 +1467,18 @@ var BABYLON;
                 this._worldSpaceNode = settings.customWorldSpaceNode;
                 this.applyCachedTexture(null, null);
             }
+            this.propertyChanged.add(function (e, st) {
+                var mesh = _this._worldSpaceNode;
+                if (mesh) {
+                    mesh.isVisible = _this.isVisible;
+                }
+            }, BABYLON.Prim2DBase.isVisibleProperty.flagId);
         }
         WorldSpaceCanvas2D = __decorate([
             BABYLON.className("WorldSpaceCanvas2D")
         ], WorldSpaceCanvas2D);
         return WorldSpaceCanvas2D;
-    })(Canvas2D);
+    }(Canvas2D));
     BABYLON.WorldSpaceCanvas2D = WorldSpaceCanvas2D;
     var ScreenSpaceCanvas2D = (function (_super) {
         __extends(ScreenSpaceCanvas2D, _super);
@@ -1505,6 +1521,6 @@ var BABYLON;
             BABYLON.className("ScreenSpaceCanvas2D")
         ], ScreenSpaceCanvas2D);
         return ScreenSpaceCanvas2D;
-    })(Canvas2D);
+    }(Canvas2D));
     BABYLON.ScreenSpaceCanvas2D = ScreenSpaceCanvas2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.canvas2d.ts

@@ -127,7 +127,9 @@
 
                 // Put a handler to resize the background whenever the canvas is resizing
                 this.propertyChanged.add((e, s) => {
-                    this._background.size = this.size;
+                    if (e.propertyName === "size") {
+                        this._background.size = this.size;
+                    }
                 }, Group2D.sizeProperty.flagId);
 
                 this._background._patchHierarchy(this);
@@ -412,13 +414,15 @@
             }
 
             // Update the this._primPointerInfo structure we'll send to observers using the PointerEvent data
-            this._updatePointerInfo(eventData, localPosition);
+            if (!this._updatePointerInfo(eventData, localPosition)) {
+                return;
+            }
 
             let capturedPrim = this.getCapturedPrimitive(this._primPointerInfo.pointerId);
 
             // Make sure the intersection list is up to date, we maintain this list either in response of a mouse event (here) or before rendering the canvas.
             // Why before rendering the canvas? because some primitives may move and get away/under the mouse cursor (which is not moving). So we need to update at both location in order to always have an accurate list, which is needed for the hover state change.
-            this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, capturedPrim !== null);
+            this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, capturedPrim !== null, true);
 
             // Update the over status, same as above, it's could be done here or during rendering, but will be performed only once per render frame
             this._updateOverStatus();
@@ -451,13 +455,17 @@
             eventState.skipNextObservers = skip;
         }
 
-        private _updatePointerInfo(eventData: PointerInfoBase, localPosition: Vector2) {
+        private _updatePointerInfo(eventData: PointerInfoBase, localPosition: Vector2): boolean {
             let s = this.scale;
             let pii = this._primPointerInfo;
             if (!pii.canvasPointerPos) {
                 pii.canvasPointerPos = Vector2.Zero();
             }
             var camera = this._scene.cameraToUseForPointers || this._scene.activeCamera;
+            if (!camera || !camera.viewport) {
+                return false;
+            }
+
             var engine = this._scene.getEngine();
 
             if (this._isScreenSpace) {
@@ -500,10 +508,12 @@
                 pii.tilt.y = pe.tiltY;
                 pii.isCaptured = this.getCapturedPrimitive(pe.pointerId) !== null;
             }
+
+            return true;
         }
 
-        private _updateIntersectionList(mouseLocalPos: Vector2, isCapture: boolean) {
-            if (this.scene.getRenderId() === this._intersectionRenderId) {
+        private _updateIntersectionList(mouseLocalPos: Vector2, isCapture: boolean, force: boolean) {
+            if (!force && (this.scene.getRenderId() === this._intersectionRenderId)) {
                 return;
             }
 
@@ -692,7 +702,7 @@
                         window.setTimeout(() => {
                             let ppi = this._primPointerInfo;
                             let capturedPrim = this.getCapturedPrimitive(ppi.pointerId);
-                            this._updateIntersectionList(ppi.canvasPointerPos, capturedPrim !== null);
+                            this._updateIntersectionList(ppi.canvasPointerPos, capturedPrim !== null, true);
 
                             let ii = new IntersectInfo2D();
                             ii.pickPosition = ppi.canvasPointerPos.clone();
@@ -1256,7 +1266,8 @@
 
             // If the canvas fit the rendering size and it changed, update
             if (renderingSizeChanged && this._fitRenderingDevice) {
-                this.size = this._renderingSize;
+                this._actualSize = this._renderingSize.clone();
+                this._size = this._renderingSize.clone();
                 if (this._background) {
                     this._background.size = this.size;
                 }
@@ -1310,7 +1321,7 @@
             this._updateCanvasState(false);
 
             if (this._primPointerInfo.canvasPointerPos) {
-                this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, false);
+                this._updateIntersectionList(this._primPointerInfo.canvasPointerPos, false, false);
                 this._updateOverStatus();   // TODO this._primPointerInfo may not be up to date!
             }
 
@@ -1680,6 +1691,13 @@
                 this._worldSpaceNode = settings.customWorldSpaceNode;
                 this.applyCachedTexture(null, null);
             }
+
+            this.propertyChanged.add((e, st) => {
+                let mesh = this._worldSpaceNode as AbstractMesh;
+                if (mesh) {
+                    mesh.isVisible = this.isVisible;
+                }
+            }, Prim2DBase.isVisibleProperty.flagId);
         }
     }
 

src/Canvas2d/babylon.canvas2dLayoutEngine.js

@@ -38,7 +38,7 @@ var BABYLON;
             BABYLON.className("LayoutEngineBase")
         ], LayoutEngineBase);
         return LayoutEngineBase;
-    })();
+    }());
     BABYLON.LayoutEngineBase = LayoutEngineBase;
     var CanvasLayoutEngine = (function (_super) {
         __extends(CanvasLayoutEngine, _super);
@@ -82,7 +82,7 @@ var BABYLON;
             BABYLON.className("CanvasLayoutEngine")
         ], CanvasLayoutEngine);
         return CanvasLayoutEngine;
-    })(LayoutEngineBase);
+    }(LayoutEngineBase));
     BABYLON.CanvasLayoutEngine = CanvasLayoutEngine;
     var StackPanelLayoutEngine = (function (_super) {
         __extends(StackPanelLayoutEngine, _super);
@@ -136,8 +136,16 @@ var BABYLON;
                 var max = 0;
                 for (var _i = 0, _a = prim.children; _i < _a.length; _i++) {
                     var child = _a[_i];
-                    var layoutArea = child.layoutArea;
-                    child.margin.computeArea(child.actualSize, layoutArea);
+                    var layoutArea = void 0;
+                    if (child._hasMargin) {
+                        child.margin.computeWithAlignment(prim.layoutArea, child.actualSize, child.marginAlignment, StackPanelLayoutEngine.dstOffset, StackPanelLayoutEngine.dstArea, true);
+                        layoutArea = StackPanelLayoutEngine.dstArea.clone();
+                        child.layoutArea = layoutArea;
+                    }
+                    else {
+                        layoutArea = child.layoutArea;
+                        child.margin.computeArea(child.actualSize, layoutArea);
+                    }
                     max = Math.max(max, h ? layoutArea.height : layoutArea.width);
                 }
                 for (var _b = 0, _c = prim.children; _b < _c.length; _b++) {
@@ -165,10 +173,12 @@ var BABYLON;
         });
         StackPanelLayoutEngine._horizontal = null;
         StackPanelLayoutEngine._vertical = null;
+        StackPanelLayoutEngine.dstOffset = BABYLON.Vector2.Zero();
+        StackPanelLayoutEngine.dstArea = BABYLON.Size.Zero();
         StackPanelLayoutEngine = __decorate([
             BABYLON.className("StackPanelLayoutEngine")
         ], StackPanelLayoutEngine);
         return StackPanelLayoutEngine;
-    })(LayoutEngineBase);
+    }(LayoutEngineBase));
     BABYLON.StackPanelLayoutEngine = StackPanelLayoutEngine;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.canvas2dLayoutEngine.ts

@@ -129,6 +129,9 @@
 
         private _isHorizontal: boolean = true;
 
+        private static dstOffset = Vector2.Zero();
+        private static dstArea = Size.Zero();
+
         public updateLayout(prim: Prim2DBase) {
             if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
 
@@ -138,8 +141,16 @@
                 let max = 0;
 
                 for (let child of prim.children) {
-                    let layoutArea = child.layoutArea;
-                    child.margin.computeArea(child.actualSize, layoutArea);
+
+                    let layoutArea: Size;
+                    if (child._hasMargin) {
+                        child.margin.computeWithAlignment(prim.layoutArea, child.actualSize, child.marginAlignment, StackPanelLayoutEngine.dstOffset, StackPanelLayoutEngine.dstArea, true);
+                        layoutArea = StackPanelLayoutEngine.dstArea.clone();
+                        child.layoutArea = layoutArea;
+                    } else {
+                        layoutArea = child.layoutArea;
+                        child.margin.computeArea(child.actualSize, layoutArea);
+                    }
 
                     max = Math.max(max, h ? layoutArea.height : layoutArea.width);
 

src/Canvas2d/babylon.ellipse2d.js

@@ -135,7 +135,7 @@ var BABYLON;
             return true;
         };
         return Ellipse2DRenderCache;
-    })(BABYLON.ModelRenderCache);
+    }(BABYLON.ModelRenderCache));
     BABYLON.Ellipse2DRenderCache = Ellipse2DRenderCache;
     var Ellipse2DInstanceData = (function (_super) {
         __extends(Ellipse2DInstanceData, _super);
@@ -146,6 +146,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -153,7 +155,7 @@ var BABYLON;
             BABYLON.instanceData()
         ], Ellipse2DInstanceData.prototype, "properties", null);
         return Ellipse2DInstanceData;
-    })(BABYLON.Shape2DInstanceData);
+    }(BABYLON.Shape2DInstanceData));
     BABYLON.Ellipse2DInstanceData = Ellipse2DInstanceData;
     var Ellipse2D = (function (_super) {
         __extends(Ellipse2D, _super);
@@ -348,6 +350,6 @@ var BABYLON;
             BABYLON.className("Ellipse2D")
         ], Ellipse2D);
         return Ellipse2D;
-    })(BABYLON.Shape2D);
+    }(BABYLON.Shape2D));
     BABYLON.Ellipse2D = Ellipse2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.ellipse2d.ts

@@ -155,6 +155,8 @@
         get properties(): Vector3 {
             return null;
         }
+        set properties(value: Vector3) {
+        }
     }
 
     @className("Ellipse2D")

src/Canvas2d/babylon.group2d.js

@@ -206,12 +206,16 @@ var BABYLON;
             get: function () {
                 // The computed size will be floor on both width and height
                 var actualSize;
+                // Return the actualSize if set
+                if (this._actualSize) {
+                    return this._actualSize;
+                }
                 // Return the size if set by the user
                 if (this._size) {
                     actualSize = new BABYLON.Size(Math.ceil(this._size.width), Math.ceil(this._size.height));
                 }
                 else {
-                    var m = this.boundingInfo.max();
+                    var m = this.layoutBoundingInfo.max();
                     actualSize = new BABYLON.Size(Math.ceil(m.x), Math.ceil(m.y));
                 }
                 // Compare the size with the one we previously had, if it differs we set the property dirty and trigger a GroupChanged to synchronize a displaySprite (if any)
@@ -222,6 +226,9 @@ var BABYLON;
                 }
                 return actualSize;
             },
+            set: function (value) {
+                this._actualSize = value;
+            },
             enumerable: true,
             configurable: true
         });
@@ -396,10 +403,10 @@ var BABYLON;
                 engine.setAlphaTesting(false);
                 engine.setDepthWrite(true);
                 // For each different model of primitive to render
-                var context = new BABYLON.Render2DContext(BABYLON.Render2DContext.RenderModeOpaque);
+                var context_1 = new BABYLON.Render2DContext(BABYLON.Render2DContext.RenderModeOpaque);
                 this._renderableData._renderGroupInstancesInfo.forEach(function (k, v) {
                     // Prepare the context object, update the WebGL Instanced Array buffer if needed
-                    var renderCount = _this._prepareContext(engine, context, v);
+                    var renderCount = _this._prepareContext(engine, context_1, v);
                     // If null is returned, there's no opaque data to render
                     if (renderCount === null) {
                         return;
@@ -407,7 +414,7 @@ var BABYLON;
                     // Submit render only if we have something to render (everything may be hidden and the floatarray empty)
                     if (!_this.owner.supportInstancedArray || renderCount > 0) {
                         // render all the instances of this model, if the render method returns true then our instances are no longer dirty
-                        var renderFailed = !v.modelRenderCache.render(v, context);
+                        var renderFailed = !v.modelRenderCache.render(v, context_1);
                         // Update dirty flag/related
                         v.opaqueDirty = renderFailed;
                         failedCount += renderFailed ? 1 : 0;
@@ -419,10 +426,10 @@ var BABYLON;
                 engine.setAlphaTesting(true);
                 engine.setDepthWrite(true);
                 // For each different model of primitive to render
-                context = new BABYLON.Render2DContext(BABYLON.Render2DContext.RenderModeAlphaTest);
+                context_1 = new BABYLON.Render2DContext(BABYLON.Render2DContext.RenderModeAlphaTest);
                 this._renderableData._renderGroupInstancesInfo.forEach(function (k, v) {
                     // Prepare the context object, update the WebGL Instanced Array buffer if needed
-                    var renderCount = _this._prepareContext(engine, context, v);
+                    var renderCount = _this._prepareContext(engine, context_1, v);
                     // If null is returned, there's no opaque data to render
                     if (renderCount === null) {
                         return;
@@ -430,7 +437,7 @@ var BABYLON;
                     // Submit render only if we have something to render (everything may be hidden and the floatarray empty)
                     if (!_this.owner.supportInstancedArray || renderCount > 0) {
                         // render all the instances of this model, if the render method returns true then our instances are no longer dirty
-                        var renderFailed = !v.modelRenderCache.render(v, context);
+                        var renderFailed = !v.modelRenderCache.render(v, context_1);
                         // Update dirty flag/related
                         v.opaqueDirty = renderFailed;
                         failedCount += renderFailed ? 1 : 0;
@@ -848,7 +855,7 @@ var BABYLON;
             BABYLON.className("Group2D")
         ], Group2D);
         return Group2D;
-    })(BABYLON.Prim2DBase);
+    }(BABYLON.Prim2DBase));
     BABYLON.Group2D = Group2D;
     var RenderableGroupData = (function () {
         function RenderableGroupData() {
@@ -925,12 +932,12 @@ var BABYLON;
             //this.updateSmallestZChangedPrim(tpi);
         };
         return RenderableGroupData;
-    })();
+    }());
     BABYLON.RenderableGroupData = RenderableGroupData;
     var TransparentPrimitiveInfo = (function () {
         function TransparentPrimitiveInfo() {
         }
         return TransparentPrimitiveInfo;
-    })();
+    }());
     BABYLON.TransparentPrimitiveInfo = TransparentPrimitiveInfo;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.group2d.ts

@@ -262,14 +262,19 @@
             // The computed size will be floor on both width and height
             let actualSize: Size;
 
+            // Return the actualSize if set
+            if (this._actualSize) {
+                return this._actualSize;
+            }
+
             // Return the size if set by the user
             if (this._size) {
                 actualSize = new Size(Math.ceil(this._size.width), Math.ceil(this._size.height));
             }
 
-            // Otherwise the size is computed based on the boundingInfo
+            // Otherwise the size is computed based on the boundingInfo of the layout (or bounding info) content
             else {
-                let m = this.boundingInfo.max();
+                let m = this.layoutBoundingInfo.max();
                 actualSize = new Size(Math.ceil(m.x), Math.ceil(m.y));
             }
 
@@ -283,6 +288,11 @@
             return actualSize;
         }
 
+        public set actualSize(value: Size) {
+            this._actualSize = value;
+        }
+
+
         /**
          * Get/set the Cache Behavior, used in case the Canvas Cache Strategy is set to CACHESTRATEGY_ALLGROUPS. Can be either GROUPCACHEBEHAVIOR_CACHEINPARENTGROUP, GROUPCACHEBEHAVIOR_DONTCACHEOVERRIDE or GROUPCACHEBEHAVIOR_FOLLOWCACHESTRATEGY. See their documentation for more information.
          * GROUPCACHEBEHAVIOR_NORESIZEONSCALE can also be set if you set it at creation time.

src/Canvas2d/babylon.lines2d.js

@@ -135,7 +135,7 @@ var BABYLON;
             return true;
         };
         return Lines2DRenderCache;
-    })(BABYLON.ModelRenderCache);
+    }(BABYLON.ModelRenderCache));
     BABYLON.Lines2DRenderCache = Lines2DRenderCache;
     var Lines2DInstanceData = (function (_super) {
         __extends(Lines2DInstanceData, _super);
@@ -146,6 +146,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -153,6 +155,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -163,7 +167,7 @@ var BABYLON;
             BABYLON.instanceData(BABYLON.Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
         ], Lines2DInstanceData.prototype, "boundingMax", null);
         return Lines2DInstanceData;
-    })(BABYLON.Shape2DInstanceData);
+    }(BABYLON.Shape2DInstanceData));
     BABYLON.Lines2DInstanceData = Lines2DInstanceData;
     var Lines2D = (function (_super) {
         __extends(Lines2D, _super);
@@ -1171,6 +1175,6 @@ var BABYLON;
             BABYLON.className("Lines2D")
         ], Lines2D);
         return Lines2D;
-    })(BABYLON.Shape2D);
+    }(BABYLON.Shape2D));
     BABYLON.Lines2D = Lines2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.lines2d.ts

@@ -154,11 +154,15 @@
         get boundingMin(): Vector2 {
             return null;
         }
+        set boundingMin(value: Vector2) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
         get boundingMax(): Vector2 {
             return null;
         }
+        set boundingMax(value: Vector2) {
+        }
     }
 
     @className("Lines2D")

src/Canvas2d/babylon.modelRenderCache.js

@@ -130,7 +130,7 @@ var BABYLON;
             configurable: true
         });
         return GroupInstanceInfo;
-    })();
+    }());
     BABYLON.GroupInstanceInfo = GroupInstanceInfo;
     var TransparentSegment = (function () {
         function TransparentSegment() {
@@ -149,7 +149,7 @@ var BABYLON;
             }
         };
         return TransparentSegment;
-    })();
+    }());
     BABYLON.TransparentSegment = TransparentSegment;
     var GroupInfoPartData = (function () {
         function GroupInfoPartData(stride) {
@@ -171,7 +171,7 @@ var BABYLON;
             this._isDisposed = true;
         };
         return GroupInfoPartData;
-    })();
+    }());
     BABYLON.GroupInfoPartData = GroupInfoPartData;
     var TransparentGroupInfoPartData = (function (_super) {
         __extends(TransparentGroupInfoPartData, _super);
@@ -181,7 +181,7 @@ var BABYLON;
             this._partData.sortingAscending = false;
         }
         return TransparentGroupInfoPartData;
-    })(GroupInfoPartData);
+    }(GroupInfoPartData));
     BABYLON.TransparentGroupInfoPartData = TransparentGroupInfoPartData;
     var ModelRenderCache = (function () {
         function ModelRenderCache(engine, modelKey) {
@@ -310,12 +310,12 @@ var BABYLON;
         ModelRenderCache.v3 = BABYLON.Vector3.Zero();
         ModelRenderCache.v4 = BABYLON.Vector4.Zero();
         return ModelRenderCache;
-    })();
+    }());
     BABYLON.ModelRenderCache = ModelRenderCache;
     var ModelRenderCachePartData = (function () {
         function ModelRenderCachePartData() {
         }
         return ModelRenderCachePartData;
-    })();
+    }());
     BABYLON.ModelRenderCachePartData = ModelRenderCachePartData;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.prim2dBase.js

@@ -16,7 +16,7 @@ var BABYLON;
             this.forceRefreshPrimitive = false;
         }
         return PrepareRender2DContext;
-    })();
+    }());
     BABYLON.PrepareRender2DContext = PrepareRender2DContext;
     var Render2DContext = (function () {
         function Render2DContext(renderMode) {
@@ -73,7 +73,7 @@ var BABYLON;
         Render2DContext._renderModeAlphaTest = 2;
         Render2DContext._renderModeTransparent = 3;
         return Render2DContext;
-    })();
+    }());
     BABYLON.Render2DContext = Render2DContext;
     /**
      * This class store information for the pointerEventObservable Observable.
@@ -233,7 +233,7 @@ var BABYLON;
         PrimitivePointerInfo._pointerLostCapture = 0x0200;
         PrimitivePointerInfo._mouseWheelPrecision = 3.0;
         return PrimitivePointerInfo;
-    })();
+    }());
     BABYLON.PrimitivePointerInfo = PrimitivePointerInfo;
     /**
      * Defines the horizontal and vertical alignment information for a Primitive.
@@ -374,8 +374,8 @@ var BABYLON;
          */
         PrimitiveAlignment.prototype.fromString = function (value) {
             var m = value.trim().split(",");
-            for (var _i = 0; _i < m.length; _i++) {
-                var v = m[_i];
+            for (var _i = 0, m_1 = m; _i < m_1.length; _i++) {
+                var v = m_1[_i];
                 v = v.toLocaleLowerCase().trim();
                 // Horizontal
                 var i = v.indexOf("h:");
@@ -406,7 +406,7 @@ var BABYLON;
         PrimitiveAlignment._AlignCenter = 3;
         PrimitiveAlignment._AlignStretch = 4;
         return PrimitiveAlignment;
-    })();
+    }());
     BABYLON.PrimitiveAlignment = PrimitiveAlignment;
     /**
      * Stores information about a Primitive that was intersected
@@ -417,7 +417,7 @@ var BABYLON;
             this.intersectionLocation = intersectionLocation;
         }
         return PrimitiveIntersectedInfo;
-    })();
+    }());
     BABYLON.PrimitiveIntersectedInfo = PrimitiveIntersectedInfo;
     /**
      * Define a thickness toward every edges of a Primitive to allow margin and padding.
@@ -456,8 +456,8 @@ var BABYLON;
                 return;
             }
             var res = false;
-            for (var _i = 0; _i < m.length; _i++) {
-                var cm = m[_i];
+            for (var _i = 0, m_2 = m; _i < m_2.length; _i++) {
+                var cm = m_2[_i];
                 res = this._extractString(cm, false) || res;
             }
             if (!res) {
@@ -607,7 +607,7 @@ var BABYLON;
                     return true;
                 }
                 // Check for pixel
-                var n;
+                var n = void 0;
                 pI = v.indexOf("px");
                 if (pI !== -1) {
                     n = v.substr(0, pI).trim();
@@ -954,13 +954,14 @@ var BABYLON;
         };
         /**
          * Compute the positioning/size of an area considering the thickness of this object and a given alignment
-         * @param sourceArea the source area
+         * @param sourceArea the source area where the content must be sized/positioned
          * @param contentSize the content size to position/resize
          * @param alignment the alignment setting
          * @param dstOffset the position of the content
          * @param dstArea the new size of the content
          */
-        PrimitiveThickness.prototype.computeWithAlignment = function (sourceArea, contentSize, alignment, dstOffset, dstArea) {
+        PrimitiveThickness.prototype.computeWithAlignment = function (sourceArea, contentSize, alignment, dstOffset, dstArea, computeLayoutArea) {
+            if (computeLayoutArea === void 0) { computeLayoutArea = false; }
             // Fetch some data
             var topType = this._getType(0, true);
             var leftType = this._getType(1, true);
@@ -985,6 +986,9 @@ var BABYLON;
                             dstOffset.x = this.leftPixels;
                         }
                         dstArea.width = width;
+                        if (computeLayoutArea) {
+                            dstArea.width += this.leftPixels;
+                        }
                         break;
                     }
                 case PrimitiveAlignment.AlignRight:
@@ -997,6 +1001,9 @@ var BABYLON;
                             dstOffset.x = Math.round(sourceArea.width - (width + this.rightPixels));
                         }
                         dstArea.width = width;
+                        if (computeLayoutArea) {
+                            dstArea.width += this.rightPixels;
+                        }
                         break;
                     }
                 case PrimitiveAlignment.AlignStretch:
@@ -1041,6 +1048,9 @@ var BABYLON;
                             dstOffset.y = Math.round(sourceArea.height - (height + this.topPixels));
                         }
                         dstArea.height = height;
+                        if (computeLayoutArea) {
+                            dstArea.height += this.topPixels;
+                        }
                         break;
                     }
                 case PrimitiveAlignment.AlignBottom:
@@ -1053,6 +1063,9 @@ var BABYLON;
                             dstOffset.y = this.bottomPixels;
                         }
                         dstArea.height = height;
+                        if (computeLayoutArea) {
+                            dstArea.height += this.bottomPixels;
+                        }
                         break;
                     }
                 case PrimitiveAlignment.AlignStretch:
@@ -1131,7 +1144,7 @@ var BABYLON;
         PrimitiveThickness.Percentage = 0x4;
         PrimitiveThickness.Pixel = 0x8;
         return PrimitiveThickness;
-    })();
+    }());
     BABYLON.PrimitiveThickness = PrimitiveThickness;
     /**
      * Main class used for the Primitive Intersection API
@@ -1168,7 +1181,7 @@ var BABYLON;
             }
         };
         return IntersectInfo2D;
-    })();
+    }());
     BABYLON.IntersectInfo2D = IntersectInfo2D;
     var Prim2DBase = (function (_super) {
         __extends(Prim2DBase, _super);
@@ -1206,7 +1219,8 @@ var BABYLON;
             this._actualSize = null;
             this._boundingSize = BABYLON.Size.Zero();
             this._layoutArea = BABYLON.Size.Zero();
-            this._layoutAreaPos = BABYLON.Vector2.Zero();
+            this._layoutAreaPos = null;
+            this._layoutBoundingInfo = null;
             this._marginOffset = BABYLON.Vector2.Zero();
             this._paddingOffset = BABYLON.Vector2.Zero();
             this._parentPaddingOffset = BABYLON.Vector2.Zero();
@@ -1247,7 +1261,7 @@ var BABYLON;
             if (settings.dontInheritParentScale) {
                 this._setFlags(BABYLON.SmartPropertyPrim.flagDontInheritParentScale);
             }
-            this._setFlags((isPickable ? BABYLON.SmartPropertyPrim.flagIsPickable : 0) | BABYLON.SmartPropertyPrim.flagBoundingInfoDirty | BABYLON.SmartPropertyPrim.flagActualOpacityDirty | (isContainer ? BABYLON.SmartPropertyPrim.flagIsContainer : 0) | BABYLON.SmartPropertyPrim.flagActualScaleDirty);
+            this._setFlags((isPickable ? BABYLON.SmartPropertyPrim.flagIsPickable : 0) | BABYLON.SmartPropertyPrim.flagBoundingInfoDirty | BABYLON.SmartPropertyPrim.flagActualOpacityDirty | (isContainer ? BABYLON.SmartPropertyPrim.flagIsContainer : 0) | BABYLON.SmartPropertyPrim.flagActualScaleDirty | BABYLON.SmartPropertyPrim.flagLayoutBoundingInfoDirty);
             if (settings.opacity != null) {
                 this._opacity = settings.opacity;
             }
@@ -1998,6 +2012,9 @@ var BABYLON;
                     return;
                 }
                 this._positioningDirty();
+                if (this.parent) {
+                    this.parent._setFlags(BABYLON.SmartPropertyPrim.flagLayoutBoundingInfoDirty);
+                }
                 this._layoutArea = val;
             },
             enumerable: true,
@@ -2009,12 +2026,15 @@ var BABYLON;
              * The setter should only be called by a Layout Engine class.
              */
             get: function () {
-                return this._layoutAreaPos;
+                return this._layoutAreaPos || Prim2DBase._nullPosition;
             },
             set: function (val) {
-                if (this._layoutAreaPos.equals(val)) {
+                if (this._layoutAreaPos && this._layoutAreaPos.equals(val)) {
                     return;
                 }
+                if (this.parent) {
+                    this.parent._setFlags(BABYLON.SmartPropertyPrim.flagLayoutBoundingInfoDirty);
+                }
                 this._positioningDirty();
                 this._layoutAreaPos = val;
             },
@@ -2139,7 +2159,8 @@ var BABYLON;
                     var tps = new BABYLON.BoundingInfo2D();
                     for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
                         var curChild = _a[_i];
-                        curChild.boundingInfo.transformToRef(curChild.localTransform, tps);
+                        var bb = curChild.boundingInfo;
+                        bb.transformToRef(curChild.localTransform, tps);
                         bi.unionToRef(tps, bi);
                     }
                     this._boundingInfo.maxToRef(Prim2DBase._bMax);
@@ -2151,6 +2172,45 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(Prim2DBase.prototype, "layoutBoundingInfo", {
+            /**
+             * Get the boundingInfo of the primitive's content arranged by a layout Engine
+             * If a particular child is not arranged by layout, it's boundingInfo is used instead to produce something as accurate as possible
+             */
+            get: function () {
+                if (this._isFlagSet(BABYLON.SmartPropertyPrim.flagLayoutBoundingInfoDirty)) {
+                    if (!this._layoutBoundingInfo) {
+                        this._layoutBoundingInfo = new BABYLON.BoundingInfo2D();
+                    }
+                    if (this.isSizedByContent) {
+                        this._layoutBoundingInfo.clear();
+                    }
+                    else {
+                        this._layoutBoundingInfo.copyFrom(this.levelBoundingInfo);
+                    }
+                    var bi = this._layoutBoundingInfo;
+                    var tps = new BABYLON.BoundingInfo2D();
+                    for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
+                        var curChild = _a[_i];
+                        var bb = void 0;
+                        if (curChild._layoutAreaPos) {
+                            var s = curChild._layoutArea;
+                            BABYLON.BoundingInfo2D.CreateFromMinMaxToRef(0, s.width, 0, s.height, Prim2DBase._tpsBB);
+                            bb = Prim2DBase._tpsBB;
+                        }
+                        else {
+                            bb = curChild.boundingInfo;
+                        }
+                        bb.transformToRef(curChild.localTransform, tps);
+                        bi.unionToRef(tps, bi);
+                    }
+                    this._clearFlags(BABYLON.SmartPropertyPrim.flagLayoutBoundingInfoDirty);
+                }
+                return this._layoutBoundingInfo;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(Prim2DBase.prototype, "isSizeAuto", {
             /**
              * Determine if the size is automatically computed or fixed because manually specified.
@@ -2471,8 +2531,8 @@ var BABYLON;
             //}
         };
         Prim2DBase.prototype.updateCachedStatesOf = function (list, recurse) {
-            for (var _i = 0; _i < list.length; _i++) {
-                var cur = list[_i];
+            for (var _i = 0, list_1 = list; _i < list_1.length; _i++) {
+                var cur = list_1[_i];
                 cur.updateCachedStates(recurse);
             }
         };
@@ -2517,9 +2577,9 @@ var BABYLON;
                 }
                 var rot = BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(0, 0, 1), this._rotation);
                 var local;
-                var pos = this.position;
+                var pos = this._position ? this.position : this.layoutAreaPos;
                 if (this._origin.x === 0 && this._origin.y === 0) {
-                    local = BABYLON.Matrix.Compose(new BABYLON.Vector3(this._scale.x, this._scale.y, 1), rot, new BABYLON.Vector3(pos.x, pos.y, 0));
+                    local = BABYLON.Matrix.Compose(new BABYLON.Vector3(this._scale.x, this._scale.y, 1), rot, new BABYLON.Vector3(pos.x + this._marginOffset.x, pos.y + this._marginOffset.y, 0));
                     this._localTransform = local;
                 }
                 else {
@@ -2533,7 +2593,7 @@ var BABYLON;
                     BABYLON.Matrix.ScalingToRef(this._scale.x, this._scale.y, 1, Prim2DBase._t0);
                     Prim2DBase._t2.multiplyToRef(Prim2DBase._t0, Prim2DBase._t1);
                     // -Origin * rotation * scale * (Origin + Position)
-                    BABYLON.Matrix.TranslationToRef((as.width * this._origin.x) + pos.x, (as.height * this._origin.y) + pos.y, 0, Prim2DBase._t2);
+                    BABYLON.Matrix.TranslationToRef((as.width * this._origin.x) + pos.x + this._marginOffset.x, (as.height * this._origin.y) + pos.y + this._marginOffset.y, 0, Prim2DBase._t2);
                     Prim2DBase._t1.multiplyToRef(Prim2DBase._t2, this._localTransform);
                 }
                 this.clearPropertiesDirty(tflags);
@@ -2570,21 +2630,21 @@ var BABYLON;
                     this.clearPropertiesDirty(Prim2DBase.sizeProperty.flagId);
                 }
             }
-            // Check for layout update
             var positioningDirty = this._isFlagSet(BABYLON.SmartPropertyPrim.flagPositioningDirty);
+            var positioningComputed = positioningDirty && !this._isFlagSet(BABYLON.SmartPropertyPrim.flagPositioningDirty);
+            // Check for layout update
             if (this._isFlagSet(BABYLON.SmartPropertyPrim.flagLayoutDirty)) {
                 this.owner.addUpdateLayoutCounter(1);
                 this._layoutEngine.updateLayout(this);
                 this._clearFlags(BABYLON.SmartPropertyPrim.flagLayoutDirty);
             }
-            var positioningComputed = positioningDirty && !this._isFlagSet(BABYLON.SmartPropertyPrim.flagPositioningDirty);
             var autoContentChanged = false;
             if (this.isSizeAuto) {
                 if (!this._lastAutoSizeArea) {
-                    autoContentChanged = this.size !== null;
+                    autoContentChanged = this.actualSize !== null;
                 }
                 else {
-                    autoContentChanged = (!this._lastAutoSizeArea.equals(this.size));
+                    autoContentChanged = (!this._lastAutoSizeArea.equals(this.actualSize));
                 }
             }
             // Check for positioning update
@@ -2619,10 +2679,10 @@ var BABYLON;
                 // Check if we have to update the globalTransform
                 if (!this._globalTransform || localDirty || parentDirty || parentPaddingChanged || this._areSomeFlagsSet(BABYLON.SmartPropertyPrim.flagGlobalTransformDirty)) {
                     var globalTransform = this._parent ? this._parent._globalTransform : null;
-                    var localTransform;
+                    var localTransform = void 0;
                     Prim2DBase._transMtx.copyFrom(this._localTransform);
-                    Prim2DBase._transMtx.m[12] += this._layoutAreaPos.x + this._marginOffset.x + parentPaddingOffset.x;
-                    Prim2DBase._transMtx.m[13] += this._layoutAreaPos.y + this._marginOffset.y + parentPaddingOffset.y;
+                    Prim2DBase._transMtx.m[12] += parentPaddingOffset.x;
+                    Prim2DBase._transMtx.m[13] += parentPaddingOffset.y;
                     localTransform = Prim2DBase._transMtx;
                     this._globalTransform = this._parent ? localTransform.multiply(globalTransform) : localTransform.clone();
                     this._invGlobalTransform = BABYLON.Matrix.Invert(this._globalTransform);
@@ -2659,7 +2719,7 @@ var BABYLON;
             }
             // Apply margin
             if (this._hasMargin) {
-                this.margin.computeWithAlignment(this.layoutArea, this.size, this.marginAlignment, this._marginOffset, Prim2DBase._size);
+                this.margin.computeWithAlignment(this.layoutArea, this.size || this.actualSize, this.marginAlignment, this._marginOffset, Prim2DBase._size);
                 this.actualSize = Prim2DBase._size.clone();
             }
             var isSizeAuto = this.isSizeAuto;
@@ -2694,11 +2754,11 @@ var BABYLON;
                 this._contentArea.copyFrom(Prim2DBase._icArea);
             }
             if (!this._position) {
-                var aPos = new BABYLON.Vector2(this._layoutAreaPos.x + this._marginOffset.x, this._layoutAreaPos.y + this._marginOffset.y);
+                var aPos = new BABYLON.Vector2(this.layoutAreaPos.x + this._marginOffset.x, this.layoutAreaPos.y + this._marginOffset.y);
                 this.actualPosition = aPos;
             }
             if (isSizeAuto) {
-                this._lastAutoSizeArea = this.size;
+                this._lastAutoSizeArea = this.actualSize;
             }
         };
         Object.defineProperty(Prim2DBase.prototype, "contentArea", {
@@ -2912,6 +2972,7 @@ var BABYLON;
         Prim2DBase.boundinbBoxReentrency = false;
         Prim2DBase.nullSize = BABYLON.Size.Zero();
         Prim2DBase._bMax = BABYLON.Vector2.Zero();
+        Prim2DBase._tpsBB = new BABYLON.BoundingInfo2D();
         Prim2DBase._isCanvasInit = false;
         Prim2DBase._t0 = new BABYLON.Matrix();
         Prim2DBase._t1 = new BABYLON.Matrix();
@@ -2973,6 +3034,6 @@ var BABYLON;
             BABYLON.className("Prim2DBase")
         ], Prim2DBase);
         return Prim2DBase;
-    })(BABYLON.SmartPropertyPrim);
+    }(BABYLON.SmartPropertyPrim));
     BABYLON.Prim2DBase = Prim2DBase;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.prim2dBase.ts

@@ -1033,13 +1033,13 @@
 
         /**
          * Compute the positioning/size of an area considering the thickness of this object and a given alignment
-         * @param sourceArea the source area
+         * @param sourceArea the source area where the content must be sized/positioned
          * @param contentSize the content size to position/resize
          * @param alignment the alignment setting
          * @param dstOffset the position of the content
          * @param dstArea the new size of the content
          */
-        public computeWithAlignment(sourceArea: Size, contentSize: Size, alignment: PrimitiveAlignment, dstOffset: Vector2, dstArea: Size) {
+        public computeWithAlignment(sourceArea: Size, contentSize: Size, alignment: PrimitiveAlignment, dstOffset: Vector2, dstArea: Size, computeLayoutArea = false) {
             // Fetch some data
             let topType = this._getType(0, true);
             let leftType = this._getType(1, true);
@@ -1064,6 +1064,9 @@
                             dstOffset.x = this.leftPixels;
                         }
                         dstArea.width = width;
+                        if (computeLayoutArea) {
+                            dstArea.width += this.leftPixels;
+                        }
                         break;
 
                     }
@@ -1076,6 +1079,9 @@
                             dstOffset.x = Math.round(sourceArea.width - (width + this.rightPixels));
                         }
                         dstArea.width = width;
+                        if (computeLayoutArea) {
+                            dstArea.width += this.rightPixels;
+                        }
                         break;
                     }
                 case PrimitiveAlignment.AlignStretch:
@@ -1121,6 +1127,9 @@
                             dstOffset.y = Math.round(sourceArea.height - (height + this.topPixels));
                         }
                         dstArea.height = height;
+                        if (computeLayoutArea) {
+                            dstArea.height += this.topPixels;
+                        }
                         break;
 
                     }
@@ -1133,6 +1142,9 @@
                             dstOffset.y = this.bottomPixels;
                         }
                         dstArea.height = height;
+                        if (computeLayoutArea) {
+                            dstArea.height += this.bottomPixels;
+                        }
                         break;
 
                     }
@@ -1364,7 +1376,8 @@
             this._actualSize = null;
             this._boundingSize = Size.Zero();
             this._layoutArea = Size.Zero();
-            this._layoutAreaPos = Vector2.Zero();
+            this._layoutAreaPos = null;
+            this._layoutBoundingInfo = null;
             this._marginOffset = Vector2.Zero();
             this._paddingOffset = Vector2.Zero();
             this._parentPaddingOffset = Vector2.Zero();
@@ -1405,7 +1418,7 @@
             if (settings.dontInheritParentScale) {
                 this._setFlags(SmartPropertyPrim.flagDontInheritParentScale);
             }
-            this._setFlags((isPickable ? SmartPropertyPrim.flagIsPickable : 0) | SmartPropertyPrim.flagBoundingInfoDirty | SmartPropertyPrim.flagActualOpacityDirty | (isContainer ? SmartPropertyPrim.flagIsContainer : 0) | SmartPropertyPrim.flagActualScaleDirty);
+            this._setFlags((isPickable ? SmartPropertyPrim.flagIsPickable : 0) | SmartPropertyPrim.flagBoundingInfoDirty | SmartPropertyPrim.flagActualOpacityDirty | (isContainer ? SmartPropertyPrim.flagIsContainer : 0) | SmartPropertyPrim.flagActualScaleDirty | SmartPropertyPrim.flagLayoutBoundingInfoDirty);
 
             if (settings.opacity != null) {
                 this._opacity = settings.opacity;
@@ -2050,7 +2063,7 @@
             return this._margin;
         }
 
-        private get _hasMargin(): boolean {
+        public get _hasMargin(): boolean {
             return (this._margin !== null) || (this._marginAlignment !== null);
         }
 
@@ -2231,6 +2244,9 @@
                 return;
             }
             this._positioningDirty();
+            if (this.parent) {
+                this.parent._setFlags(SmartPropertyPrim.flagLayoutBoundingInfoDirty);
+            }
             this._layoutArea = val;
         }
 
@@ -2239,13 +2255,16 @@
          * The setter should only be called by a Layout Engine class.
          */
         public get layoutAreaPos(): Vector2 {
-            return this._layoutAreaPos;
+            return this._layoutAreaPos || Prim2DBase._nullPosition;
         }
 
         public set layoutAreaPos(val: Vector2) {
-            if (this._layoutAreaPos.equals(val)) {
+            if (this._layoutAreaPos && this._layoutAreaPos.equals(val)) {
                 return;
             }
+            if (this.parent) {
+                this.parent._setFlags(SmartPropertyPrim.flagLayoutBoundingInfoDirty);
+            }
             this._positioningDirty();
             this._layoutAreaPos = val;
         }
@@ -2332,7 +2351,7 @@
         }
 
         private static _bMax = Vector2.Zero();
-
+        private static _tpsBB = new BoundingInfo2D();
         /**
          * Get the boundingInfo associated to the primitive and its children.
          * The value is supposed to be always up to date
@@ -2351,7 +2370,8 @@
 
                 var tps = new BoundingInfo2D();
                 for (let curChild of this._children) {
-                    curChild.boundingInfo.transformToRef(curChild.localTransform, tps);
+                    let bb = curChild.boundingInfo;
+                    bb.transformToRef(curChild.localTransform, tps);
                     bi.unionToRef(tps, bi);
                 }
 
@@ -2366,6 +2386,41 @@
         }
 
         /**
+         * Get the boundingInfo of the primitive's content arranged by a layout Engine
+         * If a particular child is not arranged by layout, it's boundingInfo is used instead to produce something as accurate as possible
+         */
+        public get layoutBoundingInfo(): BoundingInfo2D {
+            if (this._isFlagSet(SmartPropertyPrim.flagLayoutBoundingInfoDirty)) {
+                if (!this._layoutBoundingInfo) {
+                    this._layoutBoundingInfo = new BoundingInfo2D();
+                }
+                if (this.isSizedByContent) {
+                    this._layoutBoundingInfo.clear();
+                } else {
+                    this._layoutBoundingInfo.copyFrom(this.levelBoundingInfo);
+                }
+                let bi = this._layoutBoundingInfo;
+
+                var tps = new BoundingInfo2D();
+                for (let curChild of this._children) {
+                    let bb: BoundingInfo2D;
+                    if (curChild._layoutAreaPos) {
+                        let s = curChild._layoutArea;
+                        BoundingInfo2D.CreateFromMinMaxToRef(0, s.width, 0, s.height, Prim2DBase._tpsBB);
+                        bb = Prim2DBase._tpsBB;
+                    } else {
+                        bb = curChild.boundingInfo;
+                    }
+                    bb.transformToRef(curChild.localTransform, tps);
+                    bi.unionToRef(tps, bi);
+                }
+
+                this._clearFlags(SmartPropertyPrim.flagLayoutBoundingInfoDirty);
+            }
+            return this._layoutBoundingInfo;
+        }
+
+        /**
          * Determine if the size is automatically computed or fixed because manually specified.
          * Use the actualSize property to get the final/real size of the primitive
          * @returns true if the size is automatically computed, false if it were manually specified.
@@ -2772,10 +2827,10 @@
 
                 var rot = Quaternion.RotationAxis(new Vector3(0, 0, 1), this._rotation);
                 var local: Matrix;
-                let pos = this.position;
+                let pos = this._position ? this.position : this.layoutAreaPos;
 
                 if (this._origin.x === 0 && this._origin.y === 0) {
-                    local = Matrix.Compose(new Vector3(this._scale.x, this._scale.y, 1), rot, new Vector3(pos.x, pos.y, 0));
+                    local = Matrix.Compose(new Vector3(this._scale.x, this._scale.y, 1), rot, new Vector3(pos.x + this._marginOffset.x, pos.y + this._marginOffset.y, 0));
                     this._localTransform = local;
                 } else {
                     // -Origin offset
@@ -2791,7 +2846,7 @@
                     Prim2DBase._t2.multiplyToRef(Prim2DBase._t0, Prim2DBase._t1);
 
                     // -Origin * rotation * scale * (Origin + Position)
-                    Matrix.TranslationToRef((as.width * this._origin.x) + pos.x, (as.height * this._origin.y) + pos.y, 0, Prim2DBase._t2);
+                    Matrix.TranslationToRef((as.width * this._origin.x) + pos.x + this._marginOffset.x, (as.height * this._origin.y) + pos.y + this._marginOffset.y, 0, Prim2DBase._t2);
                     Prim2DBase._t1.multiplyToRef(Prim2DBase._t2, this._localTransform);
                 }
 
@@ -2837,8 +2892,10 @@
                 }
             }
 
-            // Check for layout update
             let positioningDirty = this._isFlagSet(SmartPropertyPrim.flagPositioningDirty);
+            let positioningComputed = positioningDirty && !this._isFlagSet(SmartPropertyPrim.flagPositioningDirty);
+
+            // Check for layout update
             if (this._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
                 this.owner.addUpdateLayoutCounter(1);
                 this._layoutEngine.updateLayout(this);
@@ -2846,13 +2903,12 @@
                 this._clearFlags(SmartPropertyPrim.flagLayoutDirty);
             }
 
-            let positioningComputed = positioningDirty && !this._isFlagSet(SmartPropertyPrim.flagPositioningDirty);
             let autoContentChanged = false;
             if (this.isSizeAuto) {
                 if (!this._lastAutoSizeArea) {
-                    autoContentChanged = this.size!==null;
+                    autoContentChanged = this.actualSize!==null;
                 } else {
-                    autoContentChanged = (!this._lastAutoSizeArea.equals(this.size));
+                    autoContentChanged = (!this._lastAutoSizeArea.equals(this.actualSize));
                 }
             }
 
@@ -2900,8 +2956,8 @@
 
                     let localTransform: Matrix;
                     Prim2DBase._transMtx.copyFrom(this._localTransform);
-                    Prim2DBase._transMtx.m[12] += this._layoutAreaPos.x + this._marginOffset.x + parentPaddingOffset.x;
-                    Prim2DBase._transMtx.m[13] += this._layoutAreaPos.y + this._marginOffset.y + parentPaddingOffset.y;
+                    Prim2DBase._transMtx.m[12] += parentPaddingOffset.x;
+                    Prim2DBase._transMtx.m[13] += parentPaddingOffset.y;
                     localTransform = Prim2DBase._transMtx;
 
                     this._globalTransform = this._parent ? localTransform.multiply(globalTransform) : localTransform.clone();
@@ -2949,7 +3005,7 @@
 
             // Apply margin
             if (this._hasMargin) {
-                this.margin.computeWithAlignment(this.layoutArea, this.size, this.marginAlignment, this._marginOffset, Prim2DBase._size);
+                this.margin.computeWithAlignment(this.layoutArea, this.size || this.actualSize, this.marginAlignment, this._marginOffset, Prim2DBase._size);
                 this.actualSize = Prim2DBase._size.clone();
             }
 
@@ -2986,11 +3042,11 @@
             }
 
             if (!this._position) {
-                let aPos = new Vector2(this._layoutAreaPos.x + this._marginOffset.x, this._layoutAreaPos.y + this._marginOffset.y);
+                let aPos = new Vector2(this.layoutAreaPos.x + this._marginOffset.x, this.layoutAreaPos.y + this._marginOffset.y);
                 this.actualPosition = aPos;
             }
             if (isSizeAuto) {
-                this._lastAutoSizeArea = this.size;                
+                this._lastAutoSizeArea = this.actualSize;
             }
         }
 

src/Canvas2d/babylon.rectangle2d.js

@@ -135,7 +135,7 @@ var BABYLON;
             return true;
         };
         return Rectangle2DRenderCache;
-    })(BABYLON.ModelRenderCache);
+    }(BABYLON.ModelRenderCache));
     BABYLON.Rectangle2DRenderCache = Rectangle2DRenderCache;
     var Rectangle2DInstanceData = (function (_super) {
         __extends(Rectangle2DInstanceData, _super);
@@ -146,6 +146,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -153,7 +155,7 @@ var BABYLON;
             BABYLON.instanceData()
         ], Rectangle2DInstanceData.prototype, "properties", null);
         return Rectangle2DInstanceData;
-    })(BABYLON.Shape2DInstanceData);
+    }(BABYLON.Shape2DInstanceData));
     BABYLON.Rectangle2DInstanceData = Rectangle2DInstanceData;
     var Rectangle2D = (function (_super) {
         __extends(Rectangle2D, _super);
@@ -446,6 +448,6 @@ var BABYLON;
             BABYLON.className("Rectangle2D")
         ], Rectangle2D);
         return Rectangle2D;
-    })(BABYLON.Shape2D);
+    }(BABYLON.Shape2D));
     BABYLON.Rectangle2D = Rectangle2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.rectangle2d.ts

@@ -156,6 +156,8 @@
         get properties(): Vector3 {
             return null;
         }
+        set properties(value: Vector3) {
+        }
     }
 
     @className("Rectangle2D")

src/Canvas2d/babylon.renderablePrim2d.js

@@ -73,7 +73,7 @@ var BABYLON;
             return curOffset;
         };
         return InstanceClassInfo;
-    })();
+    }());
     BABYLON.InstanceClassInfo = InstanceClassInfo;
     var InstancePropInfo = (function () {
         function InstancePropInfo() {
@@ -187,7 +187,7 @@ var BABYLON;
             }
         };
         return InstancePropInfo;
-    })();
+    }());
     BABYLON.InstancePropInfo = InstancePropInfo;
     function instanceData(category, shaderAttributeName) {
         return function (target, propName, descriptor) {
@@ -243,6 +243,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -250,6 +252,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -257,6 +261,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -264,6 +270,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -322,7 +330,7 @@ var BABYLON;
             instanceData()
         ], InstanceDataBase.prototype, "opacity", null);
         return InstanceDataBase;
-    })();
+    }());
     BABYLON.InstanceDataBase = InstanceDataBase;
     var RenderablePrim2D = (function (_super) {
         __extends(RenderablePrim2D, _super);
@@ -512,8 +520,8 @@ var BABYLON;
         RenderablePrim2D.prototype._setupModelRenderCache = function (parts) {
             var ctiArray = new Array();
             this._modelRenderCache._partData = new Array();
-            for (var _i = 0; _i < parts.length; _i++) {
-                var dataPart = parts[_i];
+            for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+                var dataPart = parts_1[_i];
                 var pd = new BABYLON.ModelRenderCachePartData();
                 this._modelRenderCache._partData.push(pd);
                 var cat = this.getUsedShaderCategories(dataPart);
@@ -594,7 +602,7 @@ var BABYLON;
                 if (partRM !== curRM) {
                     wereTransparent = partRM === BABYLON.Render2DContext.RenderModeTransparent;
                     rmChanged = true;
-                    var gipd;
+                    var gipd = void 0;
                     switch (curRM) {
                         case BABYLON.Render2DContext.RenderModeTransparent:
                             gipd = gii.transparentData;
@@ -880,6 +888,6 @@ var BABYLON;
             BABYLON.className("RenderablePrim2D")
         ], RenderablePrim2D);
         return RenderablePrim2D;
-    })(BABYLON.Prim2DBase);
+    }(BABYLON.Prim2DBase));
     BABYLON.RenderablePrim2D = RenderablePrim2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.renderablePrim2d.ts

@@ -263,21 +263,30 @@
         get zBias(): Vector2 {
             return null;
         }
+        set zBias(value: Vector2) {
+        }
+
 
         @instanceData()
         get transformX(): Vector4 {
             return null;
         }
+        set transformX(value: Vector4) {
+        }
 
         @instanceData()
         get transformY(): Vector4 {
             return null;
         }
+        set transformY(value: Vector4) {
+        }
 
         @instanceData()
         get opacity(): number {
             return null;
         }
+        set opacity(value: number) {
+        }
 
         getClassTreeInfo(): ClassTreeInfo<InstanceClassInfo, InstancePropInfo> {
             if (!this.typeInfo) {

src/Canvas2d/babylon.shape2d.js

@@ -185,7 +185,7 @@ var BABYLON;
             BABYLON.className("Shape2D")
         ], Shape2D);
         return Shape2D;
-    })(BABYLON.RenderablePrim2D);
+    }(BABYLON.RenderablePrim2D));
     BABYLON.Shape2D = Shape2D;
     var Shape2DInstanceData = (function (_super) {
         __extends(Shape2DInstanceData, _super);
@@ -197,6 +197,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -204,6 +206,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -211,6 +215,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -218,6 +224,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -226,6 +234,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -233,6 +243,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -240,6 +252,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -247,6 +261,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -254,6 +270,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -285,6 +303,6 @@ var BABYLON;
             BABYLON.instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
         ], Shape2DInstanceData.prototype, "borderGradientTY", null);
         return Shape2DInstanceData;
-    })(BABYLON.InstanceDataBase);
+    }(BABYLON.InstanceDataBase));
     BABYLON.Shape2DInstanceData = Shape2DInstanceData;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.shape2d.ts

@@ -213,21 +213,29 @@
         get fillSolidColor(): Color4 {
             return null;
         }
+        set fillSolidColor(value: Color4) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
         get fillGradientColor1(): Color4 {
             return null;
         }
+        set fillGradientColor1(value: Color4) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
         get fillGradientColor2(): Color4 {
             return null;
         }
+        set fillGradientColor2(value: Color4) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT)
         get fillGradientTY(): Vector4 {
             return null;
         }
+        set fillGradientTY(value: Vector4) {
+        }
 
         // BORDER ATTRIBUTES
 
@@ -235,25 +243,35 @@
         get borderThickness(): number {
             return null;
         }
+        set borderThickness(value: number) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID)
         get borderSolidColor(): Color4 {
             return null;
         }
+        set borderSolidColor(value: Color4) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
         get borderGradientColor1(): Color4 {
             return null;
         }
+        set borderGradientColor1(value: Color4) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
         get borderGradientColor2(): Color4 {
             return null;
         }
+        set borderGradientColor2(value: Color4) {
+        }
 
         @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT)
         get borderGradientTY(): Vector4 {
             return null;
         }
+        set borderGradientTY(value: Vector4) {
+        }
     }
 }

src/Canvas2d/babylon.smartPropertyPrim.js

@@ -10,7 +10,7 @@ var BABYLON;
         function Prim2DClassInfo() {
         }
         return Prim2DClassInfo;
-    })();
+    }());
     BABYLON.Prim2DClassInfo = Prim2DClassInfo;
     var Prim2DPropInfo = (function () {
         function Prim2DPropInfo() {
@@ -19,7 +19,7 @@ var BABYLON;
         Prim2DPropInfo.PROPKIND_INSTANCE = 2;
         Prim2DPropInfo.PROPKIND_DYNAMIC = 3;
         return Prim2DPropInfo;
-    })();
+    }());
     BABYLON.Prim2DPropInfo = Prim2DPropInfo;
     /**
      * Custom type of the propertyChanged observable
@@ -28,7 +28,7 @@ var BABYLON;
         function PropertyChangedInfo() {
         }
         return PropertyChangedInfo;
-    })();
+    }());
     BABYLON.PropertyChangedInfo = PropertyChangedInfo;
     var ClassTreeInfo = (function () {
         function ClassTreeInfo(baseClass, type, classContentFactory) {
@@ -65,13 +65,13 @@ var BABYLON;
         Object.defineProperty(ClassTreeInfo.prototype, "fullContent", {
             get: function () {
                 if (!this._fullContent) {
-                    var dic = new BABYLON.StringDictionary();
+                    var dic_1 = new BABYLON.StringDictionary();
                     var curLevel = this;
                     while (curLevel) {
-                        curLevel.levelContent.forEach(function (k, v) { return dic.add(k, v); });
+                        curLevel.levelContent.forEach(function (k, v) { return dic_1.add(k, v); });
                         curLevel = curLevel._baseClass;
                     }
-                    this._fullContent = dic;
+                    this._fullContent = dic_1;
                 }
                 return this._fullContent;
             },
@@ -131,7 +131,7 @@ var BABYLON;
             return dic;
         };
         return ClassTreeInfo;
-    })();
+    }());
     BABYLON.ClassTreeInfo = ClassTreeInfo;
     var SmartPropertyPrim = (function () {
         function SmartPropertyPrim() {
@@ -553,11 +553,12 @@ var BABYLON;
         SmartPropertyPrim.flagActualScaleDirty = 0x0040000; // set if the actualScale property needs to be recomputed
         SmartPropertyPrim.flagDontInheritParentScale = 0x0080000; // set if the actualScale must not use its parent's scale to be computed
         SmartPropertyPrim.flagGlobalTransformDirty = 0x0100000; // set if the global transform must be recomputed due to a local transform change
+        SmartPropertyPrim.flagLayoutBoundingInfoDirty = 0x0100000; // set if the layout bounding info is dirty
         SmartPropertyPrim = __decorate([
             BABYLON.className("SmartPropertyPrim")
         ], SmartPropertyPrim);
         return SmartPropertyPrim;
-    })();
+    }());
     BABYLON.SmartPropertyPrim = SmartPropertyPrim;
     function modelLevelProperty(propId, piStore, typeLevelCompare, dirtyBoundingInfo, dirtyParentBoundingBox) {
         if (typeLevelCompare === void 0) { typeLevelCompare = false; }

src/Canvas2d/babylon.smartPropertyPrim.ts

@@ -374,7 +374,7 @@
 
             // If the property belong to a group, check if it's a cached one, and dirty its render sprite accordingly
             if (this instanceof Group2D) {
-                this.handleGroupChanged(propInfo);
+                (<SmartPropertyPrim>this).handleGroupChanged(propInfo);
             }
 
             // Check for parent layout dirty
@@ -607,35 +607,37 @@
             }
         }
 
-        public static flagIsDisposed             = 0x0000001;    // set if the object is already disposed
-        public static flagLevelBoundingInfoDirty = 0x0000002;    // set if the primitive's level bounding box (not including children) is dirty
-        public static flagModelDirty             = 0x0000004;    // set if the model must be changed
-        public static flagLayoutDirty            = 0x0000008;    // set if the layout must be computed
-        public static flagLevelVisible           = 0x0000010;    // set if the primitive is set as visible for its level only
-        public static flagBoundingInfoDirty      = 0x0000020;    // set if the primitive's overall bounding box (including children) is dirty
-        public static flagIsPickable             = 0x0000040;    // set if the primitive can be picked during interaction
-        public static flagIsVisible              = 0x0000080;    // set if the primitive is concretely visible (use the levelVisible of parents)
-        public static flagVisibilityChanged      = 0x0000100;    // set if there was a transition between visible/hidden status
-        public static flagPositioningDirty       = 0x0000200;    // set if the primitive positioning must be computed
-        public static flagTrackedGroup           = 0x0000400;    // set if the group2D is tracking a scene node
-        public static flagWorldCacheChanged      = 0x0000800;    // set if the cached bitmap of a world space canvas changed
-        public static flagChildrenFlatZOrder     = 0x0001000;    // set if all the children (direct and indirect) will share the same Z-Order
-        public static flagZOrderDirty            = 0x0002000;    // set if the Z-Order for this prim and its children must be recomputed
-        public static flagActualOpacityDirty     = 0x0004000;    // set if the actualOpactity should be recomputed
-        public static flagPrimInDirtyList        = 0x0008000;    // set if the primitive is in the primDirtyList
-        public static flagIsContainer            = 0x0010000;    // set if the primitive is a container
-        public static flagNeedRefresh            = 0x0020000;    // set if the primitive wasn't successful at refresh
-        public static flagActualScaleDirty       = 0x0040000;    // set if the actualScale property needs to be recomputed
-        public static flagDontInheritParentScale = 0x0080000;    // set if the actualScale must not use its parent's scale to be computed
-        public static flagGlobalTransformDirty   = 0x0100000;    // set if the global transform must be recomputed due to a local transform change
-
-        private   _flags             : number;
-        private   _externalData      : StringDictionary<Object>;
-        private   _modelKey          : string;
-        private   _propInfo          : StringDictionary<Prim2DPropInfo>;
-        protected _levelBoundingInfo : BoundingInfo2D;
-        protected _boundingInfo      : BoundingInfo2D;
-        protected _instanceDirtyFlags: number;
+        public static flagIsDisposed              = 0x0000001;    // set if the object is already disposed
+        public static flagLevelBoundingInfoDirty  = 0x0000002;    // set if the primitive's level bounding box (not including children) is dirty
+        public static flagModelDirty              = 0x0000004;    // set if the model must be changed
+        public static flagLayoutDirty             = 0x0000008;    // set if the layout must be computed
+        public static flagLevelVisible            = 0x0000010;    // set if the primitive is set as visible for its level only
+        public static flagBoundingInfoDirty       = 0x0000020;    // set if the primitive's overall bounding box (including children) is dirty
+        public static flagIsPickable              = 0x0000040;    // set if the primitive can be picked during interaction
+        public static flagIsVisible               = 0x0000080;    // set if the primitive is concretely visible (use the levelVisible of parents)
+        public static flagVisibilityChanged       = 0x0000100;    // set if there was a transition between visible/hidden status
+        public static flagPositioningDirty        = 0x0000200;    // set if the primitive positioning must be computed
+        public static flagTrackedGroup            = 0x0000400;    // set if the group2D is tracking a scene node
+        public static flagWorldCacheChanged       = 0x0000800;    // set if the cached bitmap of a world space canvas changed
+        public static flagChildrenFlatZOrder      = 0x0001000;    // set if all the children (direct and indirect) will share the same Z-Order
+        public static flagZOrderDirty             = 0x0002000;    // set if the Z-Order for this prim and its children must be recomputed
+        public static flagActualOpacityDirty      = 0x0004000;    // set if the actualOpactity should be recomputed
+        public static flagPrimInDirtyList         = 0x0008000;    // set if the primitive is in the primDirtyList
+        public static flagIsContainer             = 0x0010000;    // set if the primitive is a container
+        public static flagNeedRefresh             = 0x0020000;    // set if the primitive wasn't successful at refresh
+        public static flagActualScaleDirty        = 0x0040000;    // set if the actualScale property needs to be recomputed
+        public static flagDontInheritParentScale  = 0x0080000;    // set if the actualScale must not use its parent's scale to be computed
+        public static flagGlobalTransformDirty    = 0x0100000;    // set if the global transform must be recomputed due to a local transform change
+        public static flagLayoutBoundingInfoDirty = 0x0100000;    // set if the layout bounding info is dirty
+
+        private   _flags              : number;
+        private   _externalData       : StringDictionary<Object>;
+        private   _modelKey           : string;
+        private   _propInfo           : StringDictionary<Prim2DPropInfo>;
+        protected _levelBoundingInfo  : BoundingInfo2D;
+        protected _boundingInfo       : BoundingInfo2D;
+        protected _layoutBoundingInfo : BoundingInfo2D;
+        protected _instanceDirtyFlags : number;
     }
 
     export function modelLevelProperty<T>(propId: number, piStore: (pi: Prim2DPropInfo) => void, typeLevelCompare = false, dirtyBoundingInfo = false, dirtyParentBoundingBox = false): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {

src/Canvas2d/babylon.sprite2d.js

@@ -86,7 +86,7 @@ var BABYLON;
             return true;
         };
         return Sprite2DRenderCache;
-    })(BABYLON.ModelRenderCache);
+    }(BABYLON.ModelRenderCache));
     BABYLON.Sprite2DRenderCache = Sprite2DRenderCache;
     var Sprite2DInstanceData = (function (_super) {
         __extends(Sprite2DInstanceData, _super);
@@ -97,6 +97,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -104,6 +106,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -111,6 +115,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -118,6 +124,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -129,6 +137,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -148,7 +158,7 @@ var BABYLON;
             BABYLON.instanceData()
         ], Sprite2DInstanceData.prototype, "properties", null);
         return Sprite2DInstanceData;
-    })(BABYLON.InstanceDataBase);
+    }(BABYLON.InstanceDataBase));
     BABYLON.Sprite2DInstanceData = Sprite2DInstanceData;
     var Sprite2D = (function (_super) {
         __extends(Sprite2D, _super);
@@ -298,6 +308,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Sets the scale of the sprite using a BABYLON.Size(w,h).
+         * Keeps proportion by taking the maximum of the two scale for x and y.
+         * @param {Size} size Size(width,height)
+         */
+        Sprite2D.prototype.scaleToSize = function (size) {
+            var baseSize = this.size;
+            if (baseSize == null || !this.texture.isReady()) {
+                // we're probably at initiation of the scene, size is not set
+                if (this.texture.isReady()) {
+                    baseSize = this.texture.getBaseSize();
+                }
+                else {
+                    // the texture is not ready, wait for it to load before calling scaleToSize again
+                    var thisObject = this;
+                    this.texture.onLoadObservable.add(function () {
+                        thisObject.scaleToSize(size);
+                    });
+                    return;
+                }
+            }
+            this.scale = Math.max(size.height / baseSize.height, size.width / baseSize.width);
+        };
         Object.defineProperty(Sprite2D.prototype, "alignToPixel", {
             /**
              * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
@@ -448,6 +481,6 @@ var BABYLON;
             BABYLON.className("Sprite2D")
         ], Sprite2D);
         return Sprite2D;
-    })(BABYLON.RenderablePrim2D);
+    }(BABYLON.RenderablePrim2D));
     BABYLON.Sprite2D = Sprite2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.sprite2d.ts

@@ -94,21 +94,29 @@
         get topLeftUV(): Vector2 {
             return null;
         }
+        set topLeftUV(value: Vector2) {
+        }
 
         @instanceData()
         get sizeUV(): Vector2 {
             return null;
         }
+        set sizeUV(value: Vector2) {
+        }
 
         @instanceData()
         get scaleFactor(): Vector2 {
             return null;
         }
+        set scaleFactor(value: Vector2) {
+        }
 
         @instanceData()
         get textureSize(): Vector2 {
             return null;
         }
+        set textureSize(value: Vector2) {
+        }
 
         // 3 floats being:
         // - x: frame number to display
@@ -118,6 +126,8 @@
         get properties(): Vector3 {
             return null;
         }
+        set properties(value: Vector3) {
+        }
     }
 
     @className("Sprite2D")
@@ -229,6 +239,31 @@
         }
 
         /**
+         * Sets the scale of the sprite using a BABYLON.Size(w,h).
+         * Keeps proportion by taking the maximum of the two scale for x and y.
+         * @param {Size} size Size(width,height)
+         */
+        public scaleToSize(size: Size) {
+            var baseSize = this.size;
+            if (baseSize == null || !this.texture.isReady()) {
+                // we're probably at initiation of the scene, size is not set
+                if (this.texture.isReady()) {
+                    baseSize = <Size>this.texture.getBaseSize();
+                }
+                else {
+                    // the texture is not ready, wait for it to load before calling scaleToSize again
+                    var thisObject = <Sprite2D>this;
+                    this.texture.onLoadObservable.add(function () {
+                            thisObject.scaleToSize(size); 
+                        });
+                    return;
+                }
+            }
+            
+            this.scale = Math.max(size.height / baseSize.height, size.width / baseSize.width);
+        }
+
+        /**
          * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
          */
         public get alignToPixel(): boolean {

src/Canvas2d/babylon.text2d.js

@@ -83,7 +83,7 @@ var BABYLON;
             return true;
         };
         return Text2DRenderCache;
-    })(BABYLON.ModelRenderCache);
+    }(BABYLON.ModelRenderCache));
     BABYLON.Text2DRenderCache = Text2DRenderCache;
     var Text2DInstanceData = (function (_super) {
         __extends(Text2DInstanceData, _super);
@@ -94,6 +94,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -101,6 +103,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -108,6 +112,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -115,6 +121,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -122,6 +130,8 @@ var BABYLON;
             get: function () {
                 return null;
             },
+            set: function (value) {
+            },
             enumerable: true,
             configurable: true
         });
@@ -141,7 +151,7 @@ var BABYLON;
             BABYLON.instanceData()
         ], Text2DInstanceData.prototype, "superSampleFactor", null);
         return Text2DInstanceData;
-    })(BABYLON.InstanceDataBase);
+    }(BABYLON.InstanceDataBase));
     BABYLON.Text2DInstanceData = Text2DInstanceData;
     var Text2D = (function (_super) {
         __extends(Text2D, _super);
@@ -448,6 +458,6 @@ var BABYLON;
             BABYLON.className("Text2D")
         ], Text2D);
         return Text2D;
-    })(BABYLON.RenderablePrim2D);
+    }(BABYLON.RenderablePrim2D));
     BABYLON.Text2D = Text2D;
 })(BABYLON || (BABYLON = {}));

src/Canvas2d/babylon.text2d.ts

@@ -93,26 +93,36 @@
         get topLeftUV(): Vector2 {
             return null;
         }
+        set topLeftUV(value: Vector2) {
+        }
 
         @instanceData()
         get sizeUV(): Vector2 {
             return null;
         }
+        set sizeUV(value: Vector2) {
+        }
 
         @instanceData()
         get textureSize(): Vector2 {
             return null;
         }
+        set textureSize(value: Vector2) {
+        }
 
         @instanceData()
         get color(): Color4 {
             return null;
         }
+        set color(value: Color4) {
+        }
 
         @instanceData()
         get superSampleFactor(): number {
             return null;
         }
+        set superSampleFactor(value: number) {
+        }
     }
 
     @className("Text2D")

src/Canvas2d/babylon.worldSpaceCanvas2dNode.js

@@ -22,6 +22,6 @@ var BABYLON;
             }
         };
         return WorldSpaceCanvas2DNode;
-    })(BABYLON.Mesh);
+    }(BABYLON.Mesh));
     BABYLON.WorldSpaceCanvas2DNode = WorldSpaceCanvas2DNode;
 })(BABYLON || (BABYLON = {}));

src/Collisions/babylon.collider.js

@@ -271,6 +271,6 @@ var BABYLON;
             this._destinationPoint.subtractToRef(this.intersectionPoint, vel);
         };
         return Collider;
-    })();
+    }());
     BABYLON.Collider = Collider;
 })(BABYLON || (BABYLON = {}));

src/Collisions/babylon.collisionCoordinator.js

@@ -205,7 +205,7 @@ var BABYLON;
             };
         };
         return CollisionCoordinatorWorker;
-    })();
+    }());
     BABYLON.CollisionCoordinatorWorker = CollisionCoordinatorWorker;
     var CollisionCoordinatorLegacy = (function () {
         function CollisionCoordinatorLegacy() {
@@ -268,6 +268,6 @@ var BABYLON;
             this._collideWithWorld(position, velocity, collider, maximumRetry, finalPosition, excludedMesh);
         };
         return CollisionCoordinatorLegacy;
-    })();
+    }());
     BABYLON.CollisionCoordinatorLegacy = CollisionCoordinatorLegacy;
 })(BABYLON || (BABYLON = {}));

src/Collisions/babylon.collisionWorker.js

@@ -32,7 +32,7 @@ var BABYLON;
             delete this._geometries[id];
         };
         return CollisionCache;
-    })();
+    }());
     BABYLON.CollisionCache = CollisionCache;
     var CollideWorker = (function () {
         function CollideWorker(collider, _collisionCache, finalPosition) {
@@ -144,7 +144,7 @@ var BABYLON;
             return this.collider._canDoCollision(BABYLON.Vector3.FromArray(subMesh.sphereCenter), subMesh.sphereRadius, BABYLON.Vector3.FromArray(subMesh.boxMinimum), BABYLON.Vector3.FromArray(subMesh.boxMaximum));
         };
         return CollideWorker;
-    })();
+    }());
     BABYLON.CollideWorker = CollideWorker;
     var CollisionDetectorTransferable = (function () {
         function CollisionDetectorTransferable() {
@@ -206,7 +206,7 @@ var BABYLON;
             postMessage(reply, undefined);
         };
         return CollisionDetectorTransferable;
-    })();
+    }());
     BABYLON.CollisionDetectorTransferable = CollisionDetectorTransferable;
     //check if we are in a web worker, as this code should NOT run on the main UI thread
     try {

src/Collisions/babylon.pickingInfo.js

@@ -9,7 +9,7 @@ var BABYLON;
             this.subMeshId = 0;
         }
         return IntersectionInfo;
-    })();
+    }());
     BABYLON.IntersectionInfo = IntersectionInfo;
     var PickingInfo = (function () {
         function PickingInfo() {
@@ -71,6 +71,6 @@ var BABYLON;
             return new BABYLON.Vector2(uv0.x + uv1.x + uv2.x, uv0.y + uv1.y + uv2.y);
         };
         return PickingInfo;
-    })();
+    }());
     BABYLON.PickingInfo = PickingInfo;
 })(BABYLON || (BABYLON = {}));

src/Culling/Octrees/babylon.octree.js

@@ -83,6 +83,6 @@ var BABYLON;
             }
         };
         return Octree;
-    })();
+    }());
     BABYLON.Octree = Octree;
 })(BABYLON || (BABYLON = {}));

src/Culling/Octrees/babylon.octreeBlock.js

@@ -117,6 +117,6 @@ var BABYLON;
             BABYLON.Octree._CreateBlocks(this._minPoint, this._maxPoint, this.entries, this._capacity, this._depth, this._maxDepth, this, this._creationFunc);
         };
         return OctreeBlock;
-    })();
+    }());
     BABYLON.OctreeBlock = OctreeBlock;
 })(BABYLON || (BABYLON = {}));

src/Culling/babylon.boundingBox.js

@@ -138,6 +138,6 @@ var BABYLON;
             return true;
         };
         return BoundingBox;
-    })();
+    }());
     BABYLON.BoundingBox = BoundingBox;
 })(BABYLON || (BABYLON = {}));

src/Culling/babylon.boundingInfo.js

@@ -114,6 +114,6 @@ var BABYLON;
             return true;
         };
         return BoundingInfo;
-    })();
+    }());
     BABYLON.BoundingInfo = BoundingInfo;
 })(BABYLON || (BABYLON = {}));

src/Culling/babylon.boundingSphere.js

@@ -44,6 +44,6 @@ var BABYLON;
             return true;
         };
         return BoundingSphere;
-    })();
+    }());
     BABYLON.BoundingSphere = BoundingSphere;
 })(BABYLON || (BABYLON = {}));

src/Culling/babylon.ray.js

@@ -269,6 +269,6 @@ var BABYLON;
         Ray.smallnum = 0.00000001;
         Ray.rayl = 10e8;
         return Ray;
-    })();
+    }());
     BABYLON.Ray = Ray;
 })(BABYLON || (BABYLON = {}));

src/Debug/babylon.debugLayer.js

@@ -663,6 +663,7 @@ var BABYLON;
                 + "</div><br>"
                 + "<div style='column-count: 2;-moz-column-count:2;-webkit-column-count:2'>"
                 + "<b>Caps.</b><br>"
+                + "Stencil: " + (engine.isStencilEnable ? "Enabled" : "Disabled") + "<br>"
                 + "Max textures units: " + engine.getCaps().maxTexturesImageUnits + "<br>"
                 + "Max textures size: " + engine.getCaps().maxTextureSize + "<br>"
                 + "Max anisotropy: " + engine.getCaps().maxAnisotropy + "<br>"
@@ -676,6 +677,6 @@ var BABYLON;
             }
         };
         return DebugLayer;
-    })();
+    }());
     BABYLON.DebugLayer = DebugLayer;
 })(BABYLON || (BABYLON = {}));