2.4 - RC0

src/Canvas2d/babylon.bounding2d.js

@@ -10,21 +10,39 @@ var BABYLON;
             this.center = BABYLON.Vector2.Zero();
             this.extent = BABYLON.Vector2.Zero();
         }
+        /**
+         * Create a BoundingInfo2D object from a given size
+         * @param size the size that will be used to set the extend, radius will be computed from it.
+         */
         BoundingInfo2D.CreateFromSize = function (size) {
             var r = new BoundingInfo2D();
             BoundingInfo2D.CreateFromSizeToRef(size, r);
             return r;
         };
+        /**
+         * Create a BoundingInfo2D object from a given radius
+         * @param radius the radius to use, the extent will be computed from it.
+         */
         BoundingInfo2D.CreateFromRadius = function (radius) {
             var r = new BoundingInfo2D();
             BoundingInfo2D.CreateFromRadiusToRef(radius, r);
             return r;
         };
+        /**
+         * Create a BoundingInfo2D object from a list of points.
+         * The resulted object will be the smallest bounding area that includes all the given points.
+         * @param points an array of points to compute the bounding object from.
+         */
         BoundingInfo2D.CreateFromPoints = function (points) {
             var r = new BoundingInfo2D();
             BoundingInfo2D.CreateFromPointsToRef(points, r);
             return r;
         };
+        /**
+         * Update a BoundingInfo2D object using the given Size as input
+         * @param size the bounding data will be computed from this size.
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
         BoundingInfo2D.CreateFromSizeToRef = function (size, b) {
             if (!size) {
                 size = BABYLON.Size.Zero();
@@ -35,6 +53,11 @@ var BABYLON;
             b.extent.y = b.center.y;
             b.radius = b.extent.length();
         };
+        /**
+         * Update a BoundingInfo2D object using the given radius as input
+         * @param radius the bounding data will be computed from this radius
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
         BoundingInfo2D.CreateFromRadiusToRef = function (radius, b) {
             b.center.x = b.center.y = 0;
             var r = +radius;
@@ -42,6 +65,11 @@ var BABYLON;
             b.extent.y = r;
             b.radius = r;
         };
+        /**
+         * Update a BoundingInfo2D object using the given points array as input
+         * @param points the point array to use to update the bounding data
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
         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++) {
@@ -53,6 +81,14 @@ var BABYLON;
             }
             BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, b);
         };
+        /**
+         * Update a BoundingInfo2D object using the given min/max values as input
+         * @param xmin the smallest x coordinate
+         * @param xmax the biggest x coordinate
+         * @param ymin the smallest y coordinate
+         * @param ymax the buggest y coordinate
+         * @param b must be a valid/allocated object, it will contain the result of the operation
+         */
         BoundingInfo2D.CreateFromMinMaxToRef = function (xmin, xmax, ymin, ymax, b) {
             var w = xmax - xmin;
             var h = ymax - ymin;
@@ -71,11 +107,18 @@ var BABYLON;
             r.extent = this.extent.clone();
             return r;
         };
+        /**
+         * return the max extend of the bounding info
+         */
         BoundingInfo2D.prototype.max = function () {
             var r = BABYLON.Vector2.Zero();
             this.maxToRef(r);
             return r;
         };
+        /**
+         * Update a vector2 with the max extend of the bounding info
+         * @param result must be a valid/allocated vector2 that will contain the result of the operation
+         */
         BoundingInfo2D.prototype.maxToRef = function (result) {
             result.x = this.center.x + this.extent.x;
             result.y = this.center.y + this.extent.y;
@@ -91,7 +134,7 @@ var BABYLON;
             return r;
         };
         /**
-         * Compute the union of this BoundingInfo2D with a given one, return a new BoundingInfo2D as a result
+         * Compute the union of this BoundingInfo2D with a given one, returns a new BoundingInfo2D as a result
          * @param other the second BoundingInfo2D to compute the union with this one
          * @return a new instance containing the result of the union
          */
@@ -136,6 +179,12 @@ var BABYLON;
             var ymin = Math.min(this.center.y - this.extent.y, other.center.y - other.extent.y);
             BoundingInfo2D.CreateFromMinMaxToRef(xmin, xmax, ymin, ymax, result);
         };
+        /**
+         * Check if the given point is inside the BoundingInfo.
+         * The test is first made on the radius, then inside the rectangle described by the extent
+         * @param pickPosition the position to test
+         * @return true if the point is inside, false otherwise
+         */
         BoundingInfo2D.prototype.doesIntersect = function (pickPosition) {
             // is it inside the radius?
             var pickLocal = pickPosition.subtract(this.center);

src/Canvas2d/babylon.brushes2d.js

@@ -37,9 +37,6 @@ var BABYLON;
         return LockableBase;
     })();
     BABYLON.LockableBase = LockableBase;
-    /**
-     * This class implements a Brush that will be drawn with a uniform solid color (i.e. the same color everywhere in the content where the brush is assigned to).
-     */
     var SolidColorBrush2D = (function (_super) {
         __extends(SolidColorBrush2D, _super);
         function SolidColorBrush2D(color, lock) {
@@ -52,6 +49,9 @@ var BABYLON;
                 }
             }
         }
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
         SolidColorBrush2D.prototype.isTransparent = function () {
             return this._color && this._color.a < 1.0;
         };
@@ -101,10 +101,16 @@ var BABYLON;
                 this.lock();
             }
         }
+        /**
+         * Return true if the brush is transparent, false if it's totally opaque
+         */
         GradientColorBrush2D.prototype.isTransparent = function () {
             return (this._color1 && this._color1.a < 1.0) || (this._color2 && this._color2.a < 1.0);
         };
         Object.defineProperty(GradientColorBrush2D.prototype, "color1", {
+            /**
+             * First color, the blend will start from this color
+             */
             get: function () {
                 return this._color1;
             },
@@ -118,6 +124,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(GradientColorBrush2D.prototype, "color2", {
+            /**
+             * Second color, the blend will end to this color
+             */
             get: function () {
                 return this._color2;
             },
@@ -131,6 +140,10 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(GradientColorBrush2D.prototype, "translation", {
+            /**
+             * Translation vector to apply on the blend
+             * Default is [0;0]
+             */
             get: function () {
                 return this._translation;
             },
@@ -144,6 +157,11 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(GradientColorBrush2D.prototype, "rotation", {
+            /**
+             * Rotation in radian to apply to the brush
+             * Default direction of the brush is vertical, you can change this using this property.
+             * Default is 0.
+             */
             get: function () {
                 return this._rotation;
             },
@@ -157,6 +175,10 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(GradientColorBrush2D.prototype, "scale", {
+            /**
+             * Scale factor to apply to the gradient.
+             * Default is 1: no scale.
+             */
             get: function () {
                 return this._scale;
             },
@@ -169,9 +191,15 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Return a string describing the brush
+         */
         GradientColorBrush2D.prototype.toString = function () {
             return "C1:" + this._color1 + ";C2:" + this._color2 + ";T:" + this._translation.toString() + ";R:" + this._rotation + ";S:" + this._scale + ";";
         };
+        /**
+         * Build a unique key string for the given parameters
+         */
         GradientColorBrush2D.BuildKey = function (color1, color2, translation, rotation, scale) {
             return "C1:" + color1 + ";C2:" + color2 + ";T:" + translation.toString() + ";R:" + rotation + ";S:" + scale + ";";
         };

src/Canvas2d/babylon.canvas2d.js

@@ -11,6 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var BABYLON;
 (function (BABYLON) {
+    // This class contains data that lifetime is bounding to the Babylon Engine object
     var Canvas2DEngineBoundData = (function () {
         function Canvas2DEngineBoundData() {
             this._modelCache = new BABYLON.StringDictionary();
@@ -605,7 +606,6 @@ var BABYLON;
         Object.defineProperty(Canvas2D.prototype, "supportInstancedArray", {
             /**
              * Check if the WebGL Instanced Array extension is supported or not
-             * @returns {}
              */
             get: function () {
                 return this._supprtInstancedArray;
@@ -716,6 +716,10 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Canvas2D.prototype, "_engineData", {
+            /**
+             * Access the babylon.js' engine bound data, do not invoke this method, it's for internal purpose only
+             * @returns {}
+             */
             get: function () {
                 return this.__engineData;
             },
@@ -856,6 +860,11 @@ var BABYLON;
             }
             return res;
         };
+        /**
+         * Internal method used to register a Scene Node to track position for the given group
+         * Do not invoke this method, for internal purpose only.
+         * @param group the group to track its associated Scene Node
+         */
         Canvas2D.prototype._registerTrackedNode = function (group) {
             if (group._isFlagSet(BABYLON.SmartPropertyPrim.flagTrackedGroup)) {
                 return;
@@ -863,6 +872,11 @@ var BABYLON;
             this._trackedGroups.push(group);
             group._setFlags(BABYLON.SmartPropertyPrim.flagTrackedGroup);
         };
+        /**
+         * Internal method used to unregister a tracked Scene Node
+         * Do not invoke this method, it's for internal purpose only.
+         * @param group the group to unregister its tracked Scene Node from.
+         */
         Canvas2D.prototype._unregisterTrackedNode = function (group) {
             if (!group._isFlagSet(BABYLON.SmartPropertyPrim.flagTrackedGroup)) {
                 return;
@@ -889,12 +903,26 @@ var BABYLON;
         Canvas2D.GetSolidColorBrushFromHex = function (hexValue) {
             return Canvas2D._solidColorBrushes.getOrAddWithFactory(hexValue, function () { return new BABYLON.SolidColorBrush2D(BABYLON.Color4.FromHexString(hexValue), true); });
         };
+        /**
+         * Get a Gradient Color Brush
+         * @param color1 starting color
+         * @param color2 engine color
+         * @param translation translation vector to apply. default is [0;0]
+         * @param rotation rotation in radian to apply to the brush, initial direction is top to bottom. rotation is counter clockwise. default is 0.
+         * @param scale scaling factor to apply. default is 1.
+         */
         Canvas2D.GetGradientColorBrush = function (color1, color2, translation, rotation, scale) {
             if (translation === void 0) { translation = BABYLON.Vector2.Zero(); }
             if (rotation === void 0) { rotation = 0; }
             if (scale === void 0) { scale = 1; }
             return Canvas2D._gradientColorBrushes.getOrAddWithFactory(BABYLON.GradientColorBrush2D.BuildKey(color1, color2, translation, rotation, scale), function () { return new BABYLON.GradientColorBrush2D(color1, color2, translation, rotation, scale, true); });
         };
+        /**
+         * Create a solid or gradient brush from a string value.
+         * @param brushString should be either
+         *  - "solid: #RRGGBBAA" or "#RRGGBBAA"
+         *  - "gradient: #FF808080, #FFFFFFF[, [10:20], 180, 1]" for color1, color2, translation, rotation (degree), scale. The last three are optionals, but if specified must be is this order. "gradient:" can be omitted.
+         */
         Canvas2D.GetBrushFromString = function (brushString) {
             // Note: yes, I hate/don't know RegEx.. Feel free to add your contribution to the cause!
             brushString = brushString.trim();
@@ -969,7 +997,7 @@ var BABYLON;
          * Note that you can't use this strategy for WorldSpace Canvas, they need at least a top level group caching.
          */
         Canvas2D.CACHESTRATEGY_DONTCACHE = 4;
-        Canvas2D.hierarchyLevelMaxSiblingCount = 10;
+        Canvas2D.hierarchyLevelMaxSiblingCount = 50;
         Canvas2D._interInfo = new BABYLON.IntersectInfo2D();
         Canvas2D._v = BABYLON.Vector3.Zero();
         Canvas2D._m = BABYLON.Matrix.Identity();
@@ -993,18 +1021,28 @@ var BABYLON;
          * This kind of canvas can't have its Primitives directly drawn in the Viewport, they need to be cached in a bitmap at some point, as a consequence the DONT_CACHE strategy is unavailable. For now only CACHESTRATEGY_CANVAS is supported, but the remaining strategies will be soon.
          * @param scene the Scene that owns the Canvas
          * @param size the dimension of the Canvas in World Space
-         * Options:
+         * @param settings a combination of settings, possible ones are
+         *  - children: an array of direct children primitives
          *  - id: a text identifier, for information purpose only, default is null.
-         *  - position the position of the Canvas in World Space, default is [0,0,0]
-         *  - rotation the rotation of the Canvas in World Space, default is Quaternion.Identity()
+         *  - worldPosition the position of the Canvas in World Space, default is [0,0,0]
+         *  - worldRotation the rotation of the Canvas in World Space, default is Quaternion.Identity()
          *  - renderScaleFactor A scale factor applied to create the rendering texture that will be mapped in the Scene Rectangle. If you set 2 for instance the texture will be twice large in width and height. A greater value will allow to achieve a better rendering quality. Default value is 1.
          * BE AWARE that the Canvas true dimension will be size*renderScaleFactor, then all coordinates and size will have to be express regarding this size.
          * TIPS: if you want a renderScaleFactor independent reference of frame, create a child Group2D in the Canvas with position 0,0 and size set to null, then set its scale property to the same amount than the renderScaleFactor, put all your primitive inside using coordinates regarding the size property you pick for the Canvas and you'll be fine.
          * - sideOrientation: Unexpected behavior occur if the value is different from Mesh.DEFAULTSIDE right now, so please use this one, which is the default.
          * - cachingStrategy Must be CACHESTRATEGY_CANVAS for now, which is the default.
-         *  - enableInteraction: if true the pointer events will be listened and rerouted to the appropriate primitives of the Canvas2D through the Prim2DBase.onPointerEventObservable observable property. Default is false (the opposite of ScreenSpace).
+         * - enableInteraction: if true the pointer events will be listened and rerouted to the appropriate primitives of the Canvas2D through the Prim2DBase.onPointerEventObservable observable property. Default is false (the opposite of ScreenSpace).
          * - isVisible: true if the canvas must be visible, false for hidden. Default is true.
+         * - backgroundRoundRadius: the round radius of the background, either backgroundFill or backgroundBorder must be specified.
+         * - backgroundFill: the brush to use to create a background fill for the canvas. can be a string value (see Canvas2D.GetBrushFromString) or a IBrush2D instance.
+         * - backgroundBorder: the brush to use to create a background border for the canvas. can be a string value (see Canvas2D.GetBrushFromString) or a IBrush2D instance.
+         * - backgroundBorderThickness: if a backgroundBorder is specified, its thickness can be set using this property
          * - customWorldSpaceNode: if specified the Canvas will be rendered in this given Node. But it's the responsibility of the caller to set the "worldSpaceToNodeLocal" property to compute the hit of the mouse ray into the node (in world coordinate system) as well as rendering the cached bitmap in the node itself. The properties cachedRect and cachedTexture of Group2D will give you what you need to do that.
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function WorldSpaceCanvas2D(scene, size, settings) {
             BABYLON.Prim2DBase._isCanvasInit = true;
@@ -1059,31 +1097,32 @@ var BABYLON;
          * All caching strategies will be available.
          * PLEASE NOTE: the origin of a Screen Space Canvas is set to [0;0] (bottom/left) which is different than the default origin of a Primitive which is centered [0.5;0.5]
          * @param scene the Scene that owns the Canvas
-         * Options:
+         * @param settings a combination of settings, possible ones are
+         *  - children: an array of direct children primitives
          *  - id: a text identifier, for information purpose only
-         *  - pos: the position of the canvas, relative from the bottom/left of the scene's viewport. Alternatively you can set the x and y properties directly. Default value is [0, 0]
+         *  - x: the position along the x axis (horizontal), relative to the left edge of the viewport. you can alternatively use the position setting.
+         *  - y: the position along the y axis (vertically), relative to the bottom edge of the viewport. you can alternatively use the position setting.
+         *  - position: the position of the canvas, relative from the bottom/left of the scene's viewport. Alternatively you can set the x and y properties directly. Default value is [0, 0]
+         *  - width: the width of the Canvas. you can alternatively use the size setting.
+         *  - height: the height of the Canvas. you can alternatively use the size setting.
          *  - size: the Size of the canvas. Alternatively the width and height properties can be set. If null two behaviors depend on the cachingStrategy: if it's CACHESTRATEGY_CACHECANVAS then it will always auto-fit the rendering device, in all the other modes it will fit the content of the Canvas
          *  - cachingStrategy: either CACHESTRATEGY_TOPLEVELGROUPS, CACHESTRATEGY_ALLGROUPS, CACHESTRATEGY_CANVAS, CACHESTRATEGY_DONTCACHE. Please refer to their respective documentation for more information. Default is Canvas2D.CACHESTRATEGY_DONTCACHE
          *  - enableInteraction: if true the pointer events will be listened and rerouted to the appropriate primitives of the Canvas2D through the Prim2DBase.onPointerEventObservable observable property. Default is true.
          *  - isVisible: true if the canvas must be visible, false for hidden. Default is true.
-         *  - marginTop/Left/Right/Bottom: define the margin for the corresponding edge, if all of them are null, margin is not used in layout computing. Default Value is null for each.
-         *  - hAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
-         *  - vAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
+         * - backgroundRoundRadius: the round radius of the background, either backgroundFill or backgroundBorder must be specified.
+         * - backgroundFill: the brush to use to create a background fill for the canvas. can be a string value (see BABYLON.Canvas2D.GetBrushFromString) or a IBrush2D instance.
+         * - backgroundBorder: the brush to use to create a background border for the canvas. can be a string value (see BABYLON.Canvas2D.GetBrushFromString) or a IBrush2D instance.
+         * - backgroundBorderThickness: if a backgroundBorder is specified, its thickness can be set using this property
+         * - customWorldSpaceNode: if specified the Canvas will be rendered in this given Node. But it's the responsibility of the caller to set the "worldSpaceToNodeLocal" property to compute the hit of the mouse ray into the node (in world coordinate system) as well as rendering the cached bitmap in the node itself. The properties cachedRect and cachedTexture of Group2D will give you what you need to do that.
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see BABYLON.PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see BABYLON.PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see BABYLON.PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see BABYLON.PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see BABYLON.PrimitiveThickness.fromString)
          */
         function ScreenSpaceCanvas2D(scene, settings) {
             BABYLON.Prim2DBase._isCanvasInit = true;
             _super.call(this, scene, settings);
-            //let c = new Canvas2D();
-            //if (!settings) {
-            //    c.setupCanvas(scene, null, null, 1, true, Canvas2D.CACHESTRATEGY_DONTCACHE, true, Vector2.Zero(), true, null, null, null, null, null, null);
-            //    c.position = Vector2.Zero();
-            //} else {
-            //    let pos = settings.position || new Vector2(settings.x || 0, settings.y || 0);
-            //    let size = (!settings.size && !settings.width && !settings.height) ? null : (settings.size || (new Size(settings.width || 0, settings.height || 0)));
-            //    c.setupCanvas(scene, settings.id || null, size, 1, true, settings.cachingStrategy || Canvas2D.CACHESTRATEGY_DONTCACHE, settings.enableInteraction || true, settings.origin || Vector2.Zero(), settings.isVisible || true, settings.marginTop, settings.marginLeft, settings.marginRight, settings.marginBottom, settings.hAlignment || PrimitiveAlignment.AlignLeft, settings.vAlignment || PrimitiveAlignment.AlignTop);
-            //    c.position = pos;
-            //}
-            //return c;
         }
         ScreenSpaceCanvas2D = __decorate([
             BABYLON.className("ScreenSpaceCanvas2D")

src/Canvas2d/babylon.ellipse2d.js

@@ -162,20 +162,31 @@ var BABYLON;
         __extends(Ellipse2D, _super);
         /**
          * Create an Ellipse 2D Shape primitive
-         * @param parent the parent primitive, must be a valid primitive (or the Canvas)
-         * options:
+         * @param settings a combination of settings, possible ones are
+         *  - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         *  - children: an array of direct children
          *  - id: a text identifier, for information purpose
          *  - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         *  - rotation: the initial rotation (in radian) of the primitive. default is 0
+         *  - scale: the initial scale of the primitive. default is 1
          *  - origin: define the normalized origin point location, default [0.5;0.5]
          *  - size: the size of the group. Alternatively the width and height properties can be set. Default will be [10;10].
          *  - subdivision: the number of subdivision to create the ellipse perimeter, default is 64.
-         *  - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white.
-         *  - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null.
-         *  - borderThickness: the thickness of the drawn border, default is 1.
-         *  - isVisible: true if the primitive must be visible, false for hidden. Default is true.
-         *  - marginTop/Left/Right/Bottom: define the margin for the corresponding edge, if all of them are null, margin is not used in layout computing. Default Value is null for each.
-         *  - hAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
-         *  - vAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
+         *  - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         *  - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null. can be a string value (see Canvas2D.GetBrushFromString)
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function Ellipse2D(settings) {
             // Avoid checking every time if the object exists

src/Canvas2d/babylon.group2d.js

@@ -15,17 +15,31 @@ var BABYLON;
         __extends(Group2D, _super);
         /**
          * Create an Logical or Renderable Group.
-         * @param parent the parent primitive, must be a valid primitive (or the Canvas)
-         * options:
+         * @param settings a combination of settings, possible ones are
+         *  - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         *  - children: an array of direct children
          *  - id a text identifier, for information purpose
          *  - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         *  - rotation: the initial rotation (in radian) of the primitive. default is 0
+         *  - scale: the initial scale of the primitive. default is 1
          *  - origin: define the normalized origin point location, default [0.5;0.5]
          *  - size: the size of the group. Alternatively the width and height properties can be set. If null the size will be computed from its content, default is null.
          *  - cacheBehavior: Define how the group should behave regarding the Canvas's cache strategy, default is Group2D.GROUPCACHEBEHAVIOR_FOLLOWCACHESTRATEGY
+         *  - layoutEngine: either an instance of a layout engine based class (StackPanel.Vertical, StackPanel.Horizontal) or a string ('canvas' for Canvas layout, 'StackPanel' or 'HorizontalStackPanel' for horizontal Stack Panel layout, 'VerticalStackPanel' for vertical Stack Panel layout).
          *  - isVisible: true if the group must be visible, false for hidden. Default is true.
-         *  - marginTop/Left/Right/Bottom: define the margin for the corresponding edge, if all of them are null, margin is not used in layout computing. Default Value is null for each.
-         *  - hAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
-         *  - vAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
+         * - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         * - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         * - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         * - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         * - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function Group2D(settings) {
             if (settings == null) {
@@ -195,6 +209,9 @@ var BABYLON;
             this._groupRender();
         };
         Object.defineProperty(Group2D.prototype, "trackedNode", {
+            /**
+             * Get/set the Scene's Node that should be tracked, the group's position will follow the projected position of the Node.
+             */
             get: function () {
                 return this._trackedNode;
             },

src/Canvas2d/babylon.lines2d.js

@@ -172,23 +172,36 @@ var BABYLON;
         __extends(Lines2D, _super);
         /**
          * Create an 2D Lines Shape primitive. The defined lines may be opened or closed (see below)
-         * @param parent the parent primitive, must be a valid primitive (or the Canvas)
          * @param points an array that describe the points to use to draw the line, must contain at least two entries.
-         * options:
+         * @param settings a combination of settings, possible ones are
+         *  - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         *  - children: an array of direct children
          *  - id a text identifier, for information purpose
          *  - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         *  - rotation: the initial rotation (in radian) of the primitive. default is 0
+         *  - scale: the initial scale of the primitive. default is 1
          *  - origin: define the normalized origin point location, default [0.5;0.5]
          *  - fillThickness: the thickness of the fill part of the line, can be null to draw nothing (but a border brush must be given), default is 1.
          *  - closed: if false the lines are said to be opened, the first point and the latest DON'T connect. if true the lines are said to be closed, the first and last point will be connected by a line. For instance you can define the 4 points of a rectangle, if you set closed to true a 4 edges rectangle will be drawn. If you set false, only three edges will be drawn, the edge formed by the first and last point won't exist. Default is false.
-         *  - Draw a cap of the given type at the start of the first line, you can't define a Cap if the Lines2D is closed. Default is Lines2D.NoCap.
-         *  - Draw a cap of the given type at the end of the last line, you can't define a Cap if the Lines2D is closed. Default is Lines2D.NoCap.
-         *  - fill: the brush used to draw the fill content of the lines, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white.
-         *  - border: the brush used to draw the border of the lines, you can set null to draw nothing (but you will have to set a fill brush), default is null.
+         *  - startCap: Draw a cap of the given type at the start of the first line, you can't define a Cap if the Lines2D is closed. Default is Lines2D.NoCap.
+         *  - endCap: Draw a cap of the given type at the end of the last line, you can't define a Cap if the Lines2D is closed. Default is Lines2D.NoCap.
+         *  - fill: the brush used to draw the fill content of the lines, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can be a string value (see Canvas2D.GetBrushFromString)
+         *  - border: the brush used to draw the border of the lines, you can set null to draw nothing (but you will have to set a fill brush), default is null. can be a string value (see Canvas2D.GetBrushFromString)
          *  - borderThickness: the thickness of the drawn border, default is 1.
          *  - isVisible: true if the primitive must be visible, false for hidden. Default is true.
-         *  - marginTop/Left/Right/Bottom: define the margin for the corresponding edge, if all of them are null, margin is not used in layout computing. Default Value is null for each.
-         *  - hAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
-         *  - vAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
+         *  - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         *  - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         *  - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function Lines2D(points, settings) {
             if (!settings) {
@@ -213,36 +226,57 @@ var BABYLON;
             this.closed = closed;
         }
         Object.defineProperty(Lines2D, "NoCap", {
+            /**
+             * No Cap to apply on the extremity
+             */
             get: function () { return Lines2D._noCap; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Lines2D, "RoundCap", {
+            /**
+             * A round cap, will use the line thickness as diameter
+             */
             get: function () { return Lines2D._roundCap; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Lines2D, "TriangleCap", {
+            /**
+             * Creates a triangle at the extremity.
+             */
             get: function () { return Lines2D._triangleCap; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Lines2D, "SquareAnchorCap", {
+            /**
+             * Creates a Square anchor at the extremity, the square size is twice the thickness of the line
+             */
             get: function () { return Lines2D._squareAnchorCap; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Lines2D, "RoundAnchorCap", {
+            /**
+             * Creates a round anchor at the extremity, the diameter is twice the thickness of the line
+             */
             get: function () { return Lines2D._roundAnchorCap; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Lines2D, "DiamondAnchorCap", {
+            /**
+             * Creates a diamond anchor at the extremity.
+             */
             get: function () { return Lines2D._diamondAnchorCap; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Lines2D, "ArrowCap", {
+            /**
+             * Creates an arrow anchor at the extremity. the arrow base size is twice the thickness of the line
+             */
             get: function () { return Lines2D._arrowCap; },
             enumerable: true,
             configurable: true

src/Canvas2d/babylon.prim2dBase.js

@@ -234,6 +234,9 @@ var BABYLON;
         return PrimitivePointerInfo;
     })();
     BABYLON.PrimitivePointerInfo = PrimitivePointerInfo;
+    /**
+     * Defines the horizontal and vertical alignment information for a Primitive.
+     */
     var PrimitiveAlignment = (function () {
         function PrimitiveAlignment(changeCallback) {
             this._changedCallback = changeCallback;
@@ -241,36 +244,57 @@ var BABYLON;
             this._vertical = PrimitiveAlignment.AlignBottom;
         }
         Object.defineProperty(PrimitiveAlignment, "AlignLeft", {
+            /**
+             * Alignment is made relative to the left edge of the Primitive. Valid for horizontal alignment only.
+             */
             get: function () { return PrimitiveAlignment._AlignLeft; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(PrimitiveAlignment, "AlignTop", {
+            /**
+             * Alignment is made relative to the top edge of the Primitive. Valid for vertical alignment only.
+             */
             get: function () { return PrimitiveAlignment._AlignTop; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(PrimitiveAlignment, "AlignRight", {
+            /**
+             * Alignment is made relative to the right edge of the Primitive. Valid for horizontal alignment only.
+             */
             get: function () { return PrimitiveAlignment._AlignRight; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(PrimitiveAlignment, "AlignBottom", {
+            /**
+             * Alignment is made relative to the bottom edge of the Primitive. Valid for vertical alignment only.
+             */
             get: function () { return PrimitiveAlignment._AlignBottom; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(PrimitiveAlignment, "AlignCenter", {
+            /**
+             * Alignment is made to center the content from equal distance to the opposite edges of the Primitive
+             */
             get: function () { return PrimitiveAlignment._AlignCenter; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(PrimitiveAlignment, "AlignStretch", {
+            /**
+             * The content is stretched toward the opposite edges of the Primitive
+             */
             get: function () { return PrimitiveAlignment._AlignStretch; },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(PrimitiveAlignment.prototype, "horizontal", {
+            /**
+             * Get/set the horizontal alignment. Use one of the AlignXXX static properties of this class
+             */
             get: function () {
                 return this._horizontal;
             },
@@ -285,6 +309,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveAlignment.prototype, "vertical", {
+            /**
+             * Get/set the vertical alignment. Use one of the AlignXXX static properties of this class
+             */
             get: function () {
                 return this._vertical;
             },
@@ -298,6 +325,10 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Set the horizontal alignment from a string value.
+         * @param text can be either: 'left','right','center','stretch'
+         */
         PrimitiveAlignment.prototype.setHorizontal = function (text) {
             var v = text.trim().toLocaleLowerCase();
             switch (v) {
@@ -315,6 +346,10 @@ var BABYLON;
                     return;
             }
         };
+        /**
+         * Set the vertical alignment from a string value.
+         * @param text can be either: 'top','bottom','center','stretch'
+         */
         PrimitiveAlignment.prototype.setVertical = function (text) {
             var v = text.trim().toLocaleLowerCase();
             switch (v) {
@@ -332,6 +367,10 @@ var BABYLON;
                     return;
             }
         };
+        /**
+         * Set the horizontal and or vertical alignments from a string value.
+         * @param text can be: [<h:|horizontal:><left|right|center|stretch>], [<v:|vertical:><top|bottom|center|stretch>]
+         */
         PrimitiveAlignment.prototype.fromString = function (value) {
             var m = value.trim().split(",");
             for (var _i = 0; _i < m.length; _i++) {
@@ -379,6 +418,10 @@ var BABYLON;
         return PrimitiveIntersectedInfo;
     })();
     BABYLON.PrimitiveIntersectedInfo = PrimitiveIntersectedInfo;
+    /**
+     * Define a thickness toward every edges of a Primitive to allow margin and padding.
+     * The thickness can be expressed as pixels, percentages, inherit the value of the parent primitive or be auto.
+     */
     var PrimitiveThickness = (function () {
         function PrimitiveThickness(parentAccess, changedCallback) {
             this._parentAccess = parentAccess;
@@ -394,9 +437,14 @@ var BABYLON;
             this._pixels[2] = 0;
             this._pixels[3] = 0;
         }
-        PrimitiveThickness.prototype.fromString = function (margin) {
+        /**
+         * Set the thickness from a string value
+         * @param thickness format is "top: <value>, left:<value>, right:<value>, bottom:<value>" each are optional, auto will be set if it's omitted.
+         * Values are: 'auto', 'inherit', 'XX%' for percentage, 'XXpx' or 'XX' for pixels.
+         */
+        PrimitiveThickness.prototype.fromString = function (thickness) {
             this._clear();
-            var m = margin.trim().split(",");
+            var m = thickness.trim().split(",");
             var res = false;
             for (var _i = 0; _i < m.length; _i++) {
                 var cm = m[_i];
@@ -416,6 +464,14 @@ var BABYLON;
                 this._flags |= PrimitiveThickness.Pixel << 12;
             this._changedCallback();
         };
+        /**
+         * Set the thickness from multiple string
+         * Possible values are: 'auto', 'inherit', 'XX%' for percentage, 'XXpx' or 'XX' for pixels.
+         * @param top the top thickness to set
+         * @param left the left thickness to set
+         * @param right the right thickness to set
+         * @param bottom the bottom thickness to set
+         */
         PrimitiveThickness.prototype.fromStrings = function (top, left, right, bottom) {
             this._clear();
             this._setStringValue(top, 0, false);
@@ -425,6 +481,13 @@ var BABYLON;
             this._changedCallback();
             return this;
         };
+        /**
+         * Set the thickness from pixel values
+         * @param top the top thickness in pixels to set
+         * @param left the left thickness in pixels to set
+         * @param right the right thickness in pixels to set
+         * @param bottom the bottom thickness in pixels to set
+         */
         PrimitiveThickness.prototype.fromPixels = function (top, left, right, bottom) {
             this._clear();
             this._pixels[0] = top;
@@ -434,6 +497,10 @@ var BABYLON;
             this._changedCallback();
             return this;
         };
+        /**
+         * Apply the same pixel value to all edges
+         * @param margin the value to set, in pixels.
+         */
         PrimitiveThickness.prototype.fromUniformPixels = function (margin) {
             this._clear();
             this._pixels[0] = margin;
@@ -443,6 +510,9 @@ var BABYLON;
             this._changedCallback();
             return this;
         };
+        /**
+         * Set all edges in auto
+         */
         PrimitiveThickness.prototype.auto = function () {
             this._clear();
             this._flags = (PrimitiveThickness.Auto << 0) | (PrimitiveThickness.Auto << 4) | (PrimitiveThickness.Auto << 8) | (PrimitiveThickness.Auto << 12);
@@ -642,6 +712,9 @@ var BABYLON;
             }
         };
         Object.defineProperty(PrimitiveThickness.prototype, "top", {
+            /**
+             * Get/set the top thickness. Possible values are: 'auto', 'inherit', 'XX%' for percentage, 'XXpx' or 'XX' for pixels.
+             */
             get: function () {
                 return this._getStringValue(0);
             },
@@ -652,6 +725,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "left", {
+            /**
+             * Get/set the left thickness. Possible values are: 'auto', 'inherit', 'XX%' for percentage, 'XXpx' or 'XX' for pixels.
+             */
             get: function () {
                 return this._getStringValue(1);
             },
@@ -662,6 +738,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "right", {
+            /**
+             * Get/set the right thickness. Possible values are: 'auto', 'inherit', 'XX%' for percentage, 'XXpx' or 'XX' for pixels.
+             */
             get: function () {
                 return this._getStringValue(2);
             },
@@ -672,6 +751,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "bottom", {
+            /**
+             * Get/set the bottom thickness. Possible values are: 'auto', 'inherit', 'XX%' for percentage, 'XXpx' or 'XX' for pixels.
+             */
             get: function () {
                 return this._getStringValue(3);
             },
@@ -682,6 +764,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "topPixels", {
+            /**
+             * Get/set the top thickness in pixel.
+             */
             get: function () {
                 return this._pixels[0];
             },
@@ -692,6 +777,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "leftPixels", {
+            /**
+             * Get/set the left thickness in pixel.
+             */
             get: function () {
                 return this._pixels[1];
             },
@@ -702,6 +790,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "rightPixels", {
+            /**
+             * Get/set the right thickness in pixel.
+             */
             get: function () {
                 return this._pixels[2];
             },
@@ -712,6 +803,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "bottomPixels", {
+            /**
+             * Get/set the bottom thickness in pixel.
+             */
             get: function () {
                 return this._pixels[3];
             },
@@ -722,6 +816,11 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "topPercentage", {
+            /**
+             * Get/set the top thickness in percentage.
+             * The get will return a valid value only if the edge type is percentage.
+             * The Set will change the edge mode if needed
+             */
             get: function () {
                 return this._percentages[0];
             },
@@ -732,6 +831,11 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "leftPercentage", {
+            /**
+             * Get/set the left thickness in percentage.
+             * The get will return a valid value only if the edge mode is percentage.
+             * The Set will change the edge mode if needed
+             */
             get: function () {
                 return this._percentages[1];
             },
@@ -742,6 +846,11 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "rightPercentage", {
+            /**
+             * Get/set the right thickness in percentage.
+             * The get will return a valid value only if the edge mode is percentage.
+             * The Set will change the edge mode if needed
+             */
             get: function () {
                 return this._percentages[2];
             },
@@ -752,6 +861,11 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "bottomPercentage", {
+            /**
+             * Get/set the bottom thickness in percentage.
+             * The get will return a valid value only if the edge mode is percentage.
+             * The Set will change the edge mode if needed
+             */
             get: function () {
                 return this._percentages[3];
             },
@@ -762,6 +876,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "topMode", {
+            /**
+             * Get/set the top mode. The setter shouldn't be used, other setters with value should be preferred
+             */
             get: function () {
                 return this._getType(0, false);
             },
@@ -772,6 +889,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "leftMode", {
+            /**
+             * Get/set the left mode. The setter shouldn't be used, other setters with value should be preferred
+             */
             get: function () {
                 return this._getType(1, false);
             },
@@ -782,6 +902,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "rightMode", {
+            /**
+             * Get/set the right mode. The setter shouldn't be used, other setters with value should be preferred
+             */
             get: function () {
                 return this._getType(2, false);
             },
@@ -792,6 +915,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(PrimitiveThickness.prototype, "bottomMode", {
+            /**
+             * Get/set the bottom mode. The setter shouldn't be used, other setters with value should be preferred
+             */
             get: function () {
                 return this._getType(3, false);
             },
@@ -816,6 +942,14 @@ var BABYLON;
                 this._changedCallback();
             }
         };
+        /**
+         * Compute the positioning/size of an area considering the thickness of this object and a given alignment
+         * @param sourceArea the source area
+         * @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) {
             // Fetch some data
             var topType = this._getType(0, true);
@@ -943,6 +1077,12 @@ var BABYLON;
                     }
             }
         };
+        /**
+         * Compute an area and its position considering this thickness properties based on a given source area
+         * @param sourceArea the source area
+         * @param dstOffset the position of the resulting area
+         * @param dstArea the size of the resulting area
+         */
         PrimitiveThickness.prototype.compute = function (sourceArea, dstOffset, dstArea) {
             this._computePixels(0, sourceArea, true);
             this._computePixels(1, sourceArea, true);
@@ -953,6 +1093,11 @@ var BABYLON;
             dstOffset.y = this.bottomPixels;
             dstArea.height = sourceArea.height - (dstOffset.y + this.topPixels);
         };
+        /**
+         * Compute an area considering this thickness properties based on a given source area
+         * @param sourceArea the source area
+         * @param result the resulting area
+         */
         PrimitiveThickness.prototype.computeArea = function (sourceArea, result) {
             this._computePixels(0, sourceArea, true);
             this._computePixels(1, sourceArea, true);
@@ -1274,6 +1419,7 @@ var BABYLON;
              * Position of the primitive, relative to its parent.
              * BEWARE: if you change only position.x or y it won't trigger a property change and you won't have the expected behavior.
              * Use this property to set a new Vector2 object, otherwise to change only the x/y use Prim2DBase.x or y properties.
+             * Setting this property may have no effect is specific alignment are in effect.
              */
             get: function () {
                 return this._position;
@@ -1469,25 +1615,6 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(Prim2DBase.prototype, "origin", {
-            /**
-             * The origin defines the normalized coordinate of the center of the primitive, from the top/left corner.
-             * The origin is used only to compute transformation of the primitive, it has no meaning in the primitive local frame of reference
-             * For instance:
-             * 0,0 means the center is bottom/left. Which is the default for Canvas2D instances
-             * 0.5,0.5 means the center is at the center of the primitive, which is default of all types of Primitives
-             * 0,1 means the center is top/left
-             * @returns The normalized center.
-             */
-            get: function () {
-                return this._origin;
-            },
-            set: function (value) {
-                this._origin = value;
-            },
-            enumerable: true,
-            configurable: true
-        });
         Object.defineProperty(Prim2DBase.prototype, "minSize", {
             /**
              * Get or set the minimal size the Layout Engine should respect when computing the primitive's actualSize.
@@ -1526,6 +1653,25 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(Prim2DBase.prototype, "origin", {
+            /**
+             * The origin defines the normalized coordinate of the center of the primitive, from the bottom/left corner.
+             * The origin is used only to compute transformation of the primitive, it has no meaning in the primitive local frame of reference
+             * For instance:
+             * 0,0 means the center is bottom/left. Which is the default for Canvas2D instances
+             * 0.5,0.5 means the center is at the center of the primitive, which is default of all types of Primitives
+             * 0,1 means the center is top/left
+             * @returns The normalized center.
+             */
+            get: function () {
+                return this._origin;
+            },
+            set: function (value) {
+                this._origin = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(Prim2DBase.prototype, "levelVisible", {
             get: function () {
                 return this._isFlagSet(BABYLON.SmartPropertyPrim.flagLevelVisible);
@@ -1615,6 +1761,10 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Prim2DBase.prototype, "layoutEngine", {
+            /**
+             * Get/set the layout engine to use for this primitive.
+             * The default layout engine is the CanvasLayoutEngine.
+             */
             get: function () {
                 if (!this._layoutEngine) {
                     this._layoutEngine = BABYLON.CanvasLayoutEngine.Singleton;
@@ -1631,6 +1781,11 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Prim2DBase.prototype, "layoutArea", {
+            /**
+             * Get/set the layout are of this primitive.
+             * The Layout area is the zone allocated by the Layout Engine for this particular primitive. Margins/Alignment will be computed based on this area.
+             * The setter should only be called by a Layout Engine class.
+             */
             get: function () {
                 return this._layoutArea;
             },
@@ -1645,6 +1800,10 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Prim2DBase.prototype, "layoutAreaPos", {
+            /**
+             * Get/set the layout area position (relative to the parent primitive).
+             * The setter should only be called by a Layout Engine class.
+             */
             get: function () {
                 return this._layoutAreaPos;
             },
@@ -1701,6 +1860,22 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * return the global position of the primitive, relative to its canvas
+         */
+        Prim2DBase.prototype.getGlobalPosition = function () {
+            var v = new BABYLON.Vector2(0, 0);
+            this.getGlobalPositionByRef(v);
+            return v;
+        };
+        /**
+         * return the global position of the primitive, relative to its canvas
+         * @param v the valid Vector2 object where the global position will be stored
+         */
+        Prim2DBase.prototype.getGlobalPositionByRef = function (v) {
+            v.x = this.globalTransform.m[12];
+            v.y = this.globalTransform.m[13];
+        };
         Object.defineProperty(Prim2DBase.prototype, "invGlobalTransform", {
             /**
              * Get invert of the global transformation matrix of the primitive
@@ -1902,6 +2077,9 @@ var BABYLON;
             this._patchHierarchyDepth(child);
             this._children.push(child);
         };
+        /**
+         * Dispose the primitive, remove it from its parent.
+         */
         Prim2DBase.prototype.dispose = function () {
             if (!_super.prototype.dispose.call(this)) {
                 return false;
@@ -2155,6 +2333,10 @@ var BABYLON;
             }
         };
         Object.defineProperty(Prim2DBase.prototype, "contentArea", {
+            /**
+             * Get the content are of this primitive, this area is computed using the padding property and also possibly the primitive type itself.
+             * Children of this primitive will be positioned relative to the bottom/left corner of this area.
+             */
             get: function () {
                 // Check for positioning update
                 if (this._isFlagSet(BABYLON.SmartPropertyPrim.flagPositioningDirty)) {
@@ -2243,9 +2425,6 @@ var BABYLON;
             BABYLON.instanceLevelProperty(4, function (pi) { return Prim2DBase.scaleProperty = pi; }, false, true)
         ], Prim2DBase.prototype, "scale", null);
         __decorate([
-            BABYLON.dynamicLevelProperty(5, function (pi) { return Prim2DBase.originProperty = pi; }, false, true)
-        ], Prim2DBase.prototype, "origin", null);
-        __decorate([
             BABYLON.dynamicLevelProperty(6, function (pi) { return Prim2DBase.levelVisibleProperty = pi; })
         ], Prim2DBase.prototype, "levelVisible", null);
         __decorate([

src/Canvas2d/babylon.rectangle2d.js

@@ -162,20 +162,33 @@ var BABYLON;
         __extends(Rectangle2D, _super);
         /**
          * Create an Rectangle 2D Shape primitive. May be a sharp rectangle (with sharp corners), or a rounded one.
-         * @param parent the parent primitive, must be a valid primitive (or the Canvas)
-         * options:
+         * @param settings a combination of settings, possible ones are
+         *  - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         *  - children: an array of direct children
          *  - id a text identifier, for information purpose
-         *  - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         *  - position: the X & Y positions relative to its parent. Alternatively the x and y settings can be set. Default is [0;0]
+         *  - rotation: the initial rotation (in radian) of the primitive. default is 0
+         *  - scale: the initial scale of the primitive. default is 1
          *  - origin: define the normalized origin point location, default [0.5;0.5]
-         *  - size: the size of the group. Alternatively the width and height properties can be set. Default will be [10;10].
-         *  - roundRadius: if the rectangle has rounded corner, set their radius, default is 0 (to get a sharp rectangle).
-         *  - fill: the brush used to draw the fill content of the ellipse, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white.
-         *  - border: the brush used to draw the border of the ellipse, you can set null to draw nothing (but you will have to set a fill brush), default is null.
+         *  - size: the size of the group. Alternatively the width and height settings can be set. Default will be [10;10].
+         *  - roundRadius: if the rectangle has rounded corner, set their radius, default is 0 (to get a sharp edges rectangle).
+         *  - fill: the brush used to draw the fill content of the rectangle, you can set null to draw nothing (but you will have to set a border brush), default is a SolidColorBrush of plain white. can also be a string value (see Canvas2D.GetBrushFromString)
+         *  - border: the brush used to draw the border of the rectangle, you can set null to draw nothing (but you will have to set a fill brush), default is null. can also be a string value (see Canvas2D.GetBrushFromString)
          *  - borderThickness: the thickness of the drawn border, default is 1.
          *  - isVisible: true if the primitive must be visible, false for hidden. Default is true.
-         *  - marginTop/Left/Right/Bottom: define the margin for the corresponding edge, if all of them are null, margin is not used in layout computing. Default Value is null for each.
-         *  - hAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
-         *  - vAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
+         *  - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         *  - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         *  - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function Rectangle2D(settings) {
             // Avoid checking every time if the object exists

src/Canvas2d/babylon.renderablePrim2d.js

@@ -339,6 +339,9 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Dispose the primitive and its resources, remove it from its parent
+         */
         RenderablePrim2D.prototype.dispose = function () {
             if (!_super.prototype.dispose.call(this)) {
                 return false;

src/Canvas2d/babylon.shape2d.js

@@ -52,6 +52,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Shape2D.prototype, "fill", {
+            /**
+             * Get/set the brush to render the Fill part of the Primitive
+             */
             get: function () {
                 return this._fill;
             },

src/Canvas2d/babylon.smartPropertyPrim.js

@@ -21,6 +21,9 @@ var BABYLON;
         return Prim2DPropInfo;
     })();
     BABYLON.Prim2DPropInfo = Prim2DPropInfo;
+    /**
+     * Custom type of the propertyChanged observable
+     */
     var PropertyChangedInfo = (function () {
         function PropertyChangedInfo() {
         }
@@ -472,23 +475,52 @@ var BABYLON;
             }
             return this._externalData.remove(key);
         };
+        /**
+         * Check if a given flag is set
+         * @param flag the flag value
+         * @return true if set, false otherwise
+         */
         SmartPropertyPrim.prototype._isFlagSet = function (flag) {
             return (this._flags & flag) !== 0;
         };
+        /**
+         * Check if all given flags are set
+         * @param flags the flags ORed
+         * @return true if all the flags are set, false otherwise
+         */
         SmartPropertyPrim.prototype._areAllFlagsSet = function (flags) {
             return (this._flags & flags) === flags;
         };
+        /**
+         * Check if at least one flag of the given flags is set
+         * @param flags the flags ORed
+         * @return true if at least one flag is set, false otherwise
+         */
         SmartPropertyPrim.prototype._areSomeFlagsSet = function (flags) {
             return (this._flags & flags) !== 0;
         };
+        /**
+         * Clear the given flags
+         * @param flags the flags to clear
+         */
         SmartPropertyPrim.prototype._clearFlags = function (flags) {
             this._flags &= ~flags;
         };
+        /**
+         * Set the given flags to true state
+         * @param flags the flags ORed to set
+         * @return the flags state before this call
+         */
         SmartPropertyPrim.prototype._setFlags = function (flags) {
             var cur = this._flags;
             this._flags |= flags;
             return cur;
         };
+        /**
+         * Change the state of the given flags
+         * @param flags the flags ORed to change
+         * @param state true to set them, false to clear them
+         */
         SmartPropertyPrim.prototype._changeFlags = function (flags, state) {
             if (state) {
                 this._flags |= flags;

src/Canvas2d/babylon.sprite2d.js

@@ -144,20 +144,33 @@ var BABYLON;
         __extends(Sprite2D, _super);
         /**
          * Create an 2D Sprite primitive
-         * @param parent the parent primitive, must be a valid primitive (or the Canvas)
          * @param texture the texture that stores the sprite to render
-         * options:
+         * @param settings a combination of settings, possible ones are
+         *  - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         *  - children: an array of direct children
          *  - id a text identifier, for information purpose
          *  - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         *  - rotation: the initial rotation (in radian) of the primitive. default is 0
+         *  - scale: the initial scale of the primitive. default is 1
          *  - origin: define the normalized origin point location, default [0.5;0.5]
-         *  - spriteSize: the size of the sprite, if null the size of the given texture will be used, default is null.
-         *  - spriteLocation: the location in the texture of the top/left corner of the Sprite to display, default is null (0,0)
+         *  - spriteSize: the size of the sprite (in pixels), if null the size of the given texture will be used, default is null.
+         *  - spriteLocation: the location (in pixels) in the texture of the top/left corner of the Sprite to display, default is null (0,0)
          *  - invertY: if true the texture Y will be inverted, default is false.
          *  - alignToPixel: if true the sprite's texels will be aligned to the rendering viewport pixels, ensuring the best rendering quality but slow animations won't be done as smooth as if you set false. If false a texel could lies between two pixels, being blended by the texture sampling mode you choose, the rendering result won't be as good, but very slow animation will be overall better looking. Default is true: content will be aligned.
          *  - isVisible: true if the sprite must be visible, false for hidden. Default is true.
-         *  - marginTop/Left/Right/Bottom: define the margin for the corresponding edge, if all of them are null, margin is not used in layout computing. Default Value is null for each.
-         *  - hAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
-         *  - vAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
+         *  - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         *  - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         *  - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function Sprite2D(texture, settings) {
             if (!settings) {
@@ -232,6 +245,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Sprite2D.prototype, "alignToPixel", {
+            /**
+             * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
+             */
             get: function () {
                 return this._alignToPixel;
             },
@@ -244,6 +260,9 @@ var BABYLON;
         Sprite2D.prototype.updateLevelBoundingInfo = function () {
             BABYLON.BoundingInfo2D.CreateFromSizeToRef(this.size, this._levelBoundingInfo);
         };
+        /**
+         * Get the animatable array (see http://doc.babylonjs.com/tutorials/Animations)
+         */
         Sprite2D.prototype.getAnimatables = function () {
             var res = new Array();
             if (this.texture && this.texture.animations && this.texture.animations.length > 0) {

src/Canvas2d/babylon.text2d.js

@@ -138,20 +138,33 @@ var BABYLON;
         __extends(Text2D, _super);
         /**
          * Create a Text primitive
-         * @param parent the parent primitive, must be a valid primitive (or the Canvas)
          * @param text the text to display
-         * Options:
+         * @param settings a combination of settings, possible ones are
+         *  - parent: the parent primitive/canvas, must be specified if the primitive is not constructed as a child of another one (i.e. as part of the children array setting)
+         *  - children: an array of direct children
          *  - id a text identifier, for information purpose
          *  - position: the X & Y positions relative to its parent. Alternatively the x and y properties can be set. Default is [0;0]
+         *  - rotation: the initial rotation (in radian) of the primitive. default is 0
+         *  - scale: the initial scale of the primitive. default is 1
          *  - origin: define the normalized origin point location, default [0.5;0.5]
          *  - fontName: the name/size/style of the font to use, following the CSS notation. Default is "12pt Arial".
          *  - defaultColor: the color by default to apply on each letter of the text to display, default is plain white.
          *  - areaSize: the size of the area in which to display the text, default is auto-fit from text content.
          *  - tabulationSize: number of space character to insert when a tabulation is encountered, default is 4
          *  - isVisible: true if the text must be visible, false for hidden. Default is true.
-         *  - marginTop/Left/Right/Bottom: define the margin for the corresponding edge, if all of them are null, margin is not used in layout computing. Default Value is null for each.
-         *  - hAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
-         *  - vAlighment: define horizontal alignment of the Canvas, alignment is optional, default value null: no alignment.
+         *  - marginTop: top margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginLeft: left margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginRight: right margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - marginBottom: bottom margin, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - margin: top, left, right and bottom margin formatted as a single string (see PrimitiveThickness.fromString)
+         *  - marginHAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginVAlignment: one value of the PrimitiveAlignment type's static properties
+         *  - marginAlignment: a string defining the alignment, see PrimitiveAlignment.fromString
+         *  - paddingTop: top padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingLeft: left padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingRight: right padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - paddingBottom: bottom padding, can be a number (will be pixels) or a string (see PrimitiveThickness.fromString)
+         *  - padding: top, left, right and bottom padding formatted as a single string (see PrimitiveThickness.fromString)
          */
         function Text2D(text, settings) {
             if (!settings) {
@@ -218,6 +231,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Text2D.prototype, "actualSize", {
+            /**
+             * Get the actual size of the Text2D primitive
+             */
             get: function () {
                 if (this._actualSize) {
                     return this._actualSize;
@@ -228,6 +244,9 @@ var BABYLON;
             configurable: true
         });
         Object.defineProperty(Text2D.prototype, "textSize", {
+            /**
+             * Get the area that bounds the text associated to the primitive
+             */
             get: function () {
                 if (!this._textSize) {
                     if (this.owner) {
@@ -258,6 +277,9 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Dispose the primitive, remove it from its parent
+         */
         Text2D.prototype.dispose = function () {
             if (!_super.prototype.dispose.call(this)) {
                 return false;

src/Canvas2d/babylon.worldSpaceCanvas2dNode.js

@@ -6,7 +6,7 @@ var __extends = (this && this.__extends) || function (d, b) {
 var BABYLON;
 (function (BABYLON) {
     /**
-     * This is the class that is used to display a World Space Canvas into a scene
+     * This is the class that is used to display a World Space Canvas into a 3D scene
      */
     var WorldSpaceCanvas2DNode = (function (_super) {
         __extends(WorldSpaceCanvas2DNode, _super);

src/babylon.engine.js

@@ -409,7 +409,7 @@ var BABYLON;
         });
         Object.defineProperty(Engine, "Version", {
             get: function () {
-                return "2.4.0-beta";
+                return "2.4.0";
             },
             enumerable: true,
             configurable: true

src/babylon.engine.ts

@@ -275,7 +275,7 @@
         }
 
         public static get Version(): string {
-            return "2.4.0-beta";
+            return "2.4.0";
         }
 
         // Updatable statics so stick with vars here