Merge pull request #1722 from nockawa/primIntersection

Canvas2D: contentArea bug fix + some doc updated

canvas2D/features.md

@@ -0,0 +1,3 @@
+Canvas2D: features list
+====================
+

canvas2D/readme.md

@@ -1,48 +1,91 @@
-Build Babylon.canvas2d.js with Gulp
+Canvas2D, a 100% WebGL based 2D Engine
 ====================
 
-More info about [Canvas2D](http://doc.babylonjs.com/overviews/Canvas2D_Home)
+## Table of Content
 
+- [Introduction](#introduction)
+- [Documentation](#documentation)
+- [Releases](#releases)
+- [Features list](features.md) (separated page)
+- [How to build it](#how-to-build-babyloncanvas2djs-with-gulp)
+
+## Introduction
+
+Canvas2D is a separated distributed set of .js/.d.ts files laying on the top of the [babylon.js library](../readme.md).
+
+Its purpose is to provide a general featured 2D Engine that will serve as the foundations for:
+
+ - Any 2D Graphics related work
+ - A WebGL based GUI Library also present in the library (but under development right now.)
+
+ **Canvas2D provides two types of Canvas**
+
+  - [ScreenSpace](http://babylonjs-playground.com/#272WI1#6) Canvas, lying on the top (or [below](http://babylonjs-playground.com/#RXVJD#2)/between) the 3D content. Typically used for 3D Game/App on screen UI
+  - [WorldSpace](http://babylonjs-playground.com/#1BKDEO#22) Canvas, to display the content of a Canvas right in the 3D Scene. You can even make it [track a scene node and using billboard](http://babylonjs-playground.com/#1KYG17#1) mode to make it always face the screen.
+
+## Documentation
+
+#### Overview
+There's a full overview [documentation](http://doc.babylonjs.com/overviews/Canvas2D_Home) that we **greatly encourage you to read at least a bit before you start !**
+
+This overview page has many links to other documentation pages (organized like a wiki) you can learn a lot about the basic usage, the different features, how rendering works and the overall architecture of the 2D Engine.
+
+#### Reference
+The reference documentation is available [here](http://doc.babylonjs.com/classes/), most of the Canvas2D classes are suffixed by `2D` so you can use it in the filter box like this:![2D classes](http://i.imgur.com/hx4Llmi.png)
+
+## Releases
+
+You want to use an existing build, that's simple, you can grab either the latest official release or the latest build of the current developing version.
+
+- The latest official release can be found [here](https://github.com/BabylonJS/Babylon.js/tree/master/dist)
+- The latest preview release (which is the current developing version, stable most of the time) can be found [there](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release/canvas2D)
+
+
+## How to build babylon.canvas2d.js with Gulp
+
+If you want to locally build the canvas2D library, you can follow the steps below. But sure you've read [this page](http://doc.babylonjs.com/generals/how_to_start) before to learn how to setup your local repository and the general build concepts.
+
+### Gulp
 Build Babylon.canvas2d.js with [gulp](http://gulpjs.com/ "gulp") and npm ([nodejs](http://nodejs.org/ "nodejs")), easy and cross-platform
 
 (Paths in this file are relative to this file location.)
 
-# How to use it
+### How to use it
 
 From the /Tools/Gulp folder:
 
-### First install gulp :
+#### First install gulp :
 ```
 npm install -g gulp
 ```
 
-### Install some dependencies :
+#### Install some dependencies :
 ```
 npm install
 ```
 
-### Update dependencies if necessary :
+#### Update dependencies if necessary :
 ```
 npm update
 ```
 
-## From the javascript source
-### Build Babylon.canvas2d.js:
+### From the javascript source
+#### Build Babylon.canvas2d.js:
 
 ```
-gulp Canvas2D
+gulp canvas2D
 ```
 Will be generated in dist/preview release/canvas2D:
 - babylon.canvas2d.min.js
 - babylon.canvas2d.js (unminified)
 - babylon.canvas2d.d.ts
 
-### Build the changed files for debug when you save a typescript or shader file:
+#### Build the changed files for debug when you save a typescript or shader file:
 ```
 gulp watch
 ```
 
-### Watch and run a web server for debug purpose:
+#### Watch and run a web server for debug purpose:
 ```
 gulp run
 ```

canvas2D/src/Engine/babylon.prim2dBase.ts

@@ -3645,7 +3645,7 @@
                 }
 
                 if (!this._isFlagSet(SmartPropertyPrim.flagBoundingInfoDirty)) {
-                    return this._boundingSize;
+                    return this._contentArea;
                 }
 
                 Prim2DBase.boundinbBoxReentrency = true;

canvas2D/src/Engine/babylon.primitiveCollisionManager.ts

@@ -600,7 +600,7 @@
             if (!this._debugTextBackground) {
 
                 this._debugTextBackground = new Rectangle2D({
-                    id: "###DEBUG PMC STATS###", parent: this._owner, marginAlignment: "h: left, v: top", fill: "#C0404080", padding: "top: 10, left: 10, right: 10, bottom: 10", roundRadius: 10, children: [
+                    id: "###DEBUG PMC STATS###", parent: this._owner, marginAlignment: "h: left, v: top", fill: "#C0404080", padding: "10", margin: "10", roundRadius: 10, children: [
                         new Text2D(txt, { id: "###DEBUG PMC TEXT###", fontName: "12pt Lucida Console" })
                     ]
                 });

dist/preview release/canvas2D/babylon.canvas2d.js

@@ -2854,7 +2854,7 @@ var BABYLON;
                 (" - Intersections count: " + this.intersectedActors.count);
             if (!this._debugTextBackground) {
                 this._debugTextBackground = new BABYLON.Rectangle2D({
-                    id: "###DEBUG PMC STATS###", parent: this._owner, marginAlignment: "h: left, v: top", fill: "#C0404080", padding: "top: 10, left: 10, right: 10, bottom: 10", roundRadius: 10, children: [
+                    id: "###DEBUG PMC STATS###", parent: this._owner, marginAlignment: "h: left, v: top", fill: "#C0404080", padding: "10", margin: "10", roundRadius: 10, children: [
                         new BABYLON.Text2D(txt, { id: "###DEBUG PMC TEXT###", fontName: "12pt Lucida Console" })
                     ]
                 });
@@ -7811,7 +7811,7 @@ var BABYLON;
                         return Prim2DBase_1.nullSize;
                     }
                     if (!this._isFlagSet(BABYLON.SmartPropertyPrim.flagBoundingInfoDirty)) {
-                        return this._boundingSize;
+                        return this._contentArea;
                     }
                     Prim2DBase_1.boundinbBoxReentrency = true;
                     var b = this.boundingInfo;