Moved canvas to extensions

Tools/Gulp/config.json

@@ -993,7 +993,6 @@
         }
     ],
     "modules": [
-        "canvas2D",
         "materialsLibrary",
         "postProcessesLibrary",
         "proceduralTexturesLibrary",
@@ -1383,56 +1382,6 @@
             "srcOutputDirectory": "../../gui/",
             "distOutputDirectory": "/gui/"
         }
-    },    
-    "canvas2D": {
-        "libraries": [
-            {
-                "files": [
-                    "../../canvas2D/src/Tools/babylon.math2D.ts",
-                    "../../canvas2D/src/Tools/babylon.IPropertyChanged.ts",
-                    "../../canvas2D/src/Tools/babylon.c2dlogging.ts",
-                    "../../canvas2D/src/Tools/babylon.observableArray.ts",
-                    "../../canvas2D/src/Tools/babylon.observableStringDictionary.ts",
-                    "../../canvas2D/src/Engine/babylon.fontTexture.ts",
-                    "../../canvas2D/src/Engine/babylon.bounding2d.ts",
-                    "../../canvas2D/src/Engine/babylon.primitiveCollisionManager.ts",
-                    "../../canvas2D/src/Engine/babylon.canvas2dLayoutEngine.ts",
-                    "../../canvas2D/src/Engine/babylon.brushes2d.ts",
-                    "../../canvas2D/src/Engine/babylon.smartPropertyPrim.ts",
-                    "../../canvas2D/src/Engine/babylon.prim2dBase.ts",
-                    "../../canvas2D/src/Engine/babylon.modelRenderCache.ts",
-                    "../../canvas2D/src/Engine/babylon.renderablePrim2d.ts",
-                    "../../canvas2D/src/Engine/babylon.shape2d.ts",
-                    "../../canvas2D/src/Engine/babylon.group2d.ts",
-                    "../../canvas2D/src/Engine/babylon.wireFrame2d.ts",
-                    "../../canvas2D/src/Engine/babylon.rectangle2d.ts",
-                    "../../canvas2D/src/Engine/babylon.ellipse2d.ts",
-                    "../../canvas2D/src/Engine/babylon.sprite2d.ts",
-                    "../../canvas2D/src/Engine/babylon.atlasPicture.ts",
-                    "../../canvas2D/src/Engine/babylon.text2d.ts",
-                    "../../canvas2D/src/Engine/babylon.lines2d.ts",
-                    "../../canvas2D/src/Engine/babylon.canvas2d.ts",
-                    "../../canvas2D/src/Engine/babylon.worldSpaceCanvas2dNode.ts",
-                    "../../canvas2D/src/GUI/babylon.gui.UIElement.ts",
-                    "../../canvas2D/src/GUI/Layouts/babylon.gui.stackPanel.ts",
-                    "../../canvas2D/src/GUI/babylon.gui.control.ts",
-                    "../../canvas2D/src/GUI/babylon.gui.contentControl.ts",
-                    "../../canvas2D/src/GUI/babylon.gui.window.ts",
-                    "../../canvas2D/src/GUI/babylon.gui.label.ts",
-                    "../../canvas2D/src/GUI/babylon.gui.button.ts",
-                    "../../canvas2D/src/lib.d.ts"
-                ],
-                "shaderFiles": [
-                    "../../canvas2D/src/shaders/**.fx",
-                    "!../../canvas2D/src/shaders/**.js.fx"
-                ],
-                "output": "babylon.canvas2d.js"
-            }
-        ],
-        "build": {
-            "srcOutputDirectory": "../../canvas2D/",
-            "distOutputDirectory": "/canvas2D/"
-        }
     },
     "inspector": {
         "libraries": [

canvas2D/features.md

@@ -1,49 +0,0 @@
-Canvas2D: features list
-====================
-
-## Features soup
-
-Here is some features, in no particular order. To get a clearer picture of what is where, keep reading this document.
-
- - Rendering is **WebGL** based, powered by Babylon.js core architecture.
- - Draw Calls are **minimized** due to a rendering architecture using (when available) the [ANGLE_instanced_arrays](https://www.khronos.org/registry/webgl/extensions/ANGLE_instanced_arrays) extension.
-   - All non transparent instances of the Ellipse2D, Rectangl2D are drawn in one draw call per primitive type whatever the Ellipse/Rectangle width, height, roundRadius, subdivision, fill/border brush are.
-   - All non transparent instances of Sprite2D using the same Texture are rendered into a single draw call.
-   - All instances of [Text2D](http://doc.babylonjs.com/overviews/Canvas2D_Text2D) using the same fontName in Signed Distance Field mode are rendered into a single draw call. Non SDF Text follow the Transparent rendering rules.
-   - All transparent primitives applying to the rules above can be rendered into a single call if there are consecutive in the depth order. Transparent Primitives must be rendered **back to front** no matter what, it's packed into Instanced Arrays when it can, otherwise single draw calls are made.
- - All the rendering engine's architecture is based on dirty/update caches to compute the data only when needed to **avoid computation when nothing changes**.
- - Part of the content of a Canvas (or the whole) can be **cached** into a big texture in order to avoid a render every frame, in order to maximize performance by rendering just once static content. [More info](http://doc.babylonjs.com/overviews/Canvas2D_Rendering).
- - You can create on screen Canvas, called **ScreenSpaceCanvas** (SSC) that are displayed on the top of the 3D Scene (or below, in between, in the depth layer you want...)
- - You can create a Canvas that is displayed in the 3D Scene on a Rectangle, this a **WorldSpaceCanvas** (WSC), some features:
-   - The rendering quality of a WSC is **adaptive**, the closer your WSC is the bigger is the surface when its content is rendered to, avoiding you to see pixelized content everything is adaptive, **even text**.
-   
-     - Without ![before](http://www.html5gamedevs.com/uploads/monthly_2016_06/57641896ccee5_c6o7BdT1.png.57ad694cf4cb86f884cfebb0ffa29fc1.png)
-     - With ![after](http://www.html5gamedevs.com/uploads/monthly_2016_06/576419dc5794d_Pastedimageat2016_06_1715_35.thumb.png.47a928c707526926198401132a049b50.png)
-   - A WSC can **track** a 3D Scene Node, and optionally always face the screen, [example](http://babylonjs-playground.com/#1KYG17#1).
-   - By default a WSC is rendered on a Plane, but you can render it on pretty much every **surface you want**, [example](http://babylonjs-playground.com/#EPFQG#4).
- - A Canvas can rely on a **Design Size** for the user to work with a Fixed Size Surface and position its primitives accordingly, the rendered size of the Canvas adapting to the rendering device, scaling the content for proportions to be kept, [more info](http://doc.babylonjs.com/overviews/Canvas2D_DesignSize).
- - You can create custom frame of reference or containers, called **Group2D**, [more info](http://doc.babylonjs.com/overviews/Canvas2D_Group2D). A Group2D's content can be **cached** into a big texture in order to avoid rendering of its content every frame, as stated above.
- - An **Interaction Engine** support the HTML PointerEvent, which is replicated at the level of a primitive, you can now when the pointer is entering/leaving a primitive's surface, when there's a touch/click, etc. [more info](http://doc.babylonjs.com/overviews/Canvas2D_Interaction). Interaction works for both WSC and SSC.
- - A **Collision Engine** at the Canvas level detect all the primitives intersecting each others or against the Canvas' borders, [more info](http://doc.babylonjs.com/overviews/Canvas2D_PCM)
- - Every primitive can be **animated** using the Babylon.js [animation framework](http://doc.babylonjs.com/tutorials/animations), [example](http://babylonjs-playground.com/#FFTQL#3).
- - Primitives can be positioned manually using the **Absolute Positioning** ([more info](http://doc.babylonjs.com/overviews/Canvas2D_PosTransHierarchy)) or arranged by a **Layout Engine** and the **Positioning Engine** using Margin, Margin Alignment, Padding properties, [more info](http://doc.babylonjs.com/overviews/Canvas2D_Prim_Positioning).
- - Primitives can be manually sized or be auto-size based on their content and/or the area taken by their children.
- - Multiple Layout Engines can be developed through time, for now only the default one (Canvas Positioning) and a StackPanel are implemented. Grid Layout and Radial Layout will come soon.
- - The Primitive types implemented so far:
-   - [Shape based](http://doc.babylonjs.com/overviews/Canvas2D_Shape2D):
-     - [Rectangle2D](http://doc.babylonjs.com/overviews/Canvas2D_Rectangle2D): a simple rectangle with a width and a height and an optional roundedRadius to have rounded corners.
-     - [Ellipse2D](http://doc.babylonjs.com/overviews/Canvas2D_Ellipse2D): an ellipse (so also a circle) with a width, height and a subdivision count for its rendering.
-     - [Lines2D](http://doc.babylonjs.com/overviews/Canvas2D_Lines2D): to render opened or closed line path from a list of points, with a given thickness and for opened Lines2D optional starting and ending caps (RoundCap, TriangleCap, SquaredAnchorCap, etc.)
-   - [Text2D](http://doc.babylonjs.com/overviews/Canvas2D_Text2D): render a text using either:
-     - A generated font using a given CSS-style fontName, in this mode the text can be rendered using three techniques: standard quality, super sample quality, signed distance field algorithm.
-     - A BitmapFontTexture to render more game/fancy character.
-     - This primitive also support Text Word Wrapping and Text Alignment (both horizontally and vertically).
-   - [Sprite2D](http://doc.babylonjs.com/overviews/Canvas2D_Sprite2D): render a sprite from a texture, sprite frame is supported for sprite animation, the sprite can be stored in an [AtlasPicture](http://doc.babylonjs.com/overviews/Canvas2D_AtlasPicture) and/or be rendered using the [Scale9Sprite](http://doc.babylonjs.com/overviews/Canvas2D_Sprite2D#scale9Sprite-feature) algorithm.
-   - [WireFrame2D](http://doc.babylonjs.com/overviews/Canvas2D_WireFrame2D): to render many wire lines.
-
-## Class diagram
-
-You can get a high level view of the implemented classes with this class diagram:
-
-![ClassDiagram](http://imgur.com/qclw4cI.png)
-

canvas2D/readme.md

@@ -1,107 +0,0 @@
-Canvas2D, a 100% WebGL based 2D Engine
-====================
-
-## Table of Content
-
-- [Introduction](#introduction)
-- [Documentation, want to give feedback, report a bug or need help?](#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)
-
-#### Using the Forum
-
-If you need help, want to give feedback, report a bug or be aware of the latest development: you have to use the **[Babylon.js forum](http://www.html5gamedevs.com/forum/16-babylonjs/)**.
-
- - Questions are to be posted [here](http://www.html5gamedevs.com/forum/28-questions-answers/)
- - Bugs reports must be made [there](http://www.html5gamedevs.com/forum/30-bugs/)
- - Check [this post](http://www.html5gamedevs.com/topic/22552-canvas2d-main-post/) to be aware of all the improvements/fixes made during the alpha/beta development of the library. You can check the first post as I update it each time there's new stuff or I simply encourage you to follow the thread to get notified. **Please** don't ask question or report bugs in this thread, create a dedicated one, thanks!
- - [Another post](http://www.html5gamedevs.com/topic/25275-the-gui-lib-of-babylonjs/) was created to track the progress on the GUI Library, same rules and observations as above.
-
-**Important** when you post something you better mentioned me using `@nockawa`, I'm **not** checking the forum everyday but some other users does and ping me if needed, but still: mentioning me is the best way to get my attention.
-
-#### We now use GitHub Issues and Projects
-
-You can take a look at the current GitHub Project for the [V3 here](https://github.com/BabylonJS/Babylon.js/projects/2)
-
-## 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
-
-From the /Tools/Gulp folder:
-
-#### First install gulp :
-```
-npm install -g gulp
-```
-
-#### Install some dependencies :
-```
-npm install
-```
-
-#### Update dependencies if necessary :
-```
-npm update
-```
-
-### From the javascript source
-#### Build Babylon.canvas2d.js:
-
-```
-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:
-```
-gulp watch
-```
-
-#### Watch and run a web server for debug purpose:
-```
-gulp run
-```
-

canvas2D/src/Engine/babylon.atlasPicture.ts

@@ -1,303 +0,0 @@
-module BABYLON {
-    /**
-     * Interface to create your own Loader of Atlas Data file.
-     * Call the AtlasPictureInfoFactory.addLoader to addd your loader instance
-     */
-    export interface IAtlasLoader {
-        loadFile(content: any): { api: AtlasPictureInfo, errorMsg: string, errorCode: number };
-    }
-
-    // Proxy Class for the TexturePacker's JSON Array data format
-    interface IFrame {
-        filename: string;
-        frame: { x: number, y: number, w: number, h: number };
-        rotated: boolean;
-        trimmed: boolean;
-        srpiteSourceSize: { x: number, y: number, w: number, h: number };
-        sourceSize: { x: number, y: number, w: number, h: number };
-    }
-
-    // Proxy Class for the TexturePacker's JSON Array data format
-    interface IMeta {
-        app: string;
-        version: string;
-        image: string;
-        format: string;
-        size: { w: number, h: number }
-        scale: string;
-        smartupdate: string;
-    }
-
-    /**
-     * This class will contains information about a sub picture present in an Atlas Picture.
-     */
-    export class AtlasSubPictureInfo {
-        /**
-         * Name of the SubPicture, generally the filename of the initial picture file.
-         */
-        name: string;
-
-        /**
-         * Location of the bottom/left corner of the sub picture from the bottom/left corner the Atlas Picture
-         */
-        location: Vector2;
-
-        /**
-         * Size in pixel of the sub picture
-         */
-        size: Size;
-    }
-
-    /**
-     * This class represent an Atlas Picture, it contains the information of all the sub pictures and the Texture that stores the bitmap.
-     * You get an instance of this class using methods of the AtlasPictureInfoFactory
-     */
-    export class AtlasPictureInfo {
-        /**
-         * Creates many sprite from the Atlas Picture
-         * @param filterCallback a predicate if true is returned then the corresponding sub picture will be used to create a sprite.
-         * The Predicate has many parameters:
-         *  - index: just an index incremented at each sub picture submitted for Sprite creation
-         *  - name: the sub picture's name
-         *  - aspi: the AtlasSubPictureInfo corresponding to the submitted sub picture
-         *  - settings: the Sprite2D creation settings, you can alter this JSON object but BEWARE, the alterations will be kept for subsequent Sprite2D creations!
-         * @param spriteSettings The Sprite2D settings to use for Sprite creation, this JSON object will be passed to the filterCallback for you to alter it, if needed.
-         */
-        createSprites(filterCallback: (index: number, name: string, aspi: AtlasSubPictureInfo, settings: any) => boolean,
-            spriteSettings: {
-                parent?: Prim2DBase,
-                position?: Vector2,
-                x?: number,
-                y?: number,
-                rotation?: number,
-                size?: Size,
-                scale?: number,
-                scaleX?: number,
-                scaleY?: number,
-                dontInheritParentScale?: boolean,
-                opacity?: number,
-                zOrder?: number,
-                origin?: Vector2,
-                scale9?: Vector4,
-                invertY?: boolean,
-                alignToPixel?: boolean,
-                isVisible?: boolean,
-                isPickable?: boolean,
-                isContainer?: boolean,
-                childrenFlatZOrder?: boolean,
-                marginTop?: number | string,
-                marginLeft?: number | string,
-                marginRight?: number | string,
-                marginBottom?: number | string,
-                margin?: number | string,
-                marginHAlignment?: number,
-                marginVAlignment?: number,
-                marginAlignment?: string,
-                paddingTop?: number | string,
-                paddingLeft?: number | string,
-                paddingRight?: number | string,
-                paddingBottom?: number | string,
-                padding?: string,
-            }): Array<Sprite2D> {
-
-            let res = new Array<Sprite2D>();
-
-            let index = 0;
-            this.subPictures.forEach((k, v) => {
-                if (!filterCallback || filterCallback(index++, k, v, spriteSettings)) {
-                    let s = this.createSprite(k, spriteSettings);
-                    if (s) {
-                        res.push(s);
-                    }
-                }
-            });
-            return res;
-        }
-
-        /**
-         * Create one Sprite from a sub picture
-         * @param subPictureName the name of the sub picture to use
-         * @param spriteSettings the Sprite2D settings to use for the Sprite instance creation
-         */
-        createSprite(subPictureName: string, spriteSettings: {
-            parent?: Prim2DBase,
-            position?: Vector2,
-            x?: number,
-            y?: number,
-            rotation?: number,
-            size?: Size,
-            scale?: number,
-            scaleX?: number,
-            scaleY?: number,
-            dontInheritParentScale?: boolean,
-            opacity?: number,
-            zOrder?: number,
-            origin?: Vector2,
-            scale9?: Vector4,
-            invertY?: boolean,
-            alignToPixel?: boolean,
-            isVisible?: boolean,
-            isPickable?: boolean,
-            isContainer?: boolean,
-            childrenFlatZOrder?: boolean,
-            marginTop?: number | string,
-            marginLeft?: number | string,
-            marginRight?: number | string,
-            marginBottom?: number | string,
-            margin?: number | string,
-            marginHAlignment?: number,
-            marginVAlignment?: number,
-            marginAlignment?: string,
-            paddingTop?: number | string,
-            paddingLeft?: number | string,
-            paddingRight?: number | string,
-            paddingBottom?: number | string,
-            padding?: string,
-        }): Sprite2D {
-            let spi = this.subPictures.get(subPictureName);
-            if (!spi) {
-                return null;
-            }
-            if (!spriteSettings) {
-                spriteSettings = {};
-            }
-            let s = <any>spriteSettings;
-            s.id = subPictureName;
-            s.spriteLocation = spi.location;
-            s.spriteSize = spi.size;
-
-            let sprite = new Sprite2D(this.texture, spriteSettings);
-            return sprite;
-        }
-
-        /**
-         * Size of the Atlas Picture
-         */
-        atlasSize: Size;
-
-        /**
-         * String Dictionary of all the sub pictures, the key is the sub picture's name, the value is the info object
-         */
-        subPictures: StringDictionary<AtlasSubPictureInfo>;
-
-        /**
-         * The Texture associated to the Atlas Picture info
-         */
-        texture: Texture;
-    }
-
-    /**
-     * This if the Factory class containing static method to create Atlas Pictures Info objects or add new loaders
-     */
-    export class AtlasPictureInfoFactory {
-        /**
-         * Add a custom loader
-         * @param fileExtension must be the file extension (without the dot) of the file that is loaded by this loader (e.g.: json)
-         * @param plugin the instance of the loader
-         */
-        public static addLoader(fileExtension: string, plugin: IAtlasLoader) {
-            let a = AtlasPictureInfoFactory.plugins.getOrAddWithFactory(fileExtension.toLocaleLowerCase(), () => new Array<IAtlasLoader>());
-            a.push(plugin);
-        }
-
-        /**
-         * Load an Atlas Picture Info object from a data file at a given url and with a given texture
-         * @param texture the texture containing the atlas bitmap
-         * @param url the URL of the Atlas Info data file
-         * @param onLoad a callback that will be called when the AtlasPictureInfo object will be loaded and ready
-         * @param onError a callback that will be called in case of error
-         */
-        public static loadFromUrl(texture: Texture, url: string, onLoad: (api: AtlasPictureInfo) => void, onError: (msg: string, code: number) => void = null) {
-            Tools.LoadFile(url, (data) => {
-                let ext = url.split('.').pop().split(/\#|\?/)[0];
-                let plugins = AtlasPictureInfoFactory.plugins.get(ext.toLocaleLowerCase());
-                if (!plugins) {
-                    if (onError) {
-                        onError("couldn't find a plugin for this file extension", -1);
-                    }
-                    return;
-                }
-                for (let p of plugins) {
-                    let ret = p.loadFile(data);
-                    if (ret) {
-                        if (ret.api) {
-                            ret.api.texture = texture;
-                            if (onLoad) {
-                                onLoad(ret.api);
-                            }
-                        } else if (onError) {
-                            onError(ret.errorMsg, ret.errorCode);
-                        }
-                        return;
-                    }
-                }
-
-                if (onError) {
-                    onError("No plugin to load this Atlas Data file format", -1);
-                }
-            }, null, null, null, () => {
-                if (onError) {
-                    onError("Couldn't load file", -1);
-                }
-            });
-            return null;
-        }
-
-        private static plugins: StringDictionary<Array<IAtlasLoader>> = new StringDictionary<Array<IAtlasLoader>>();
-    }
-
-     // Loader class for the TexturePacker's JSON Array data format
-    @AtlasLoaderPlugin("json", new JSONArrayLoader())
-    class JSONArrayLoader implements IAtlasLoader {
-
-        loadFile(content): { api: AtlasPictureInfo, errorMsg: string, errorCode: number } {
-            let errorMsg: string = null;
-            let errorCode: number = 0;
-            let root = null;
-            let api: AtlasPictureInfo = null;
-            try {
-                let frames: Array<IFrame>;
-                let meta: IMeta;
-                try {
-                    root = JSON.parse(content);
-                    frames = <Array<IFrame>>root.frames;
-                    meta = <IMeta>root.meta;
-                    if (!frames || !meta) {
-                        throw Error("Not a JSON Array file format");
-                    }
-                } catch (ex1) {
-                    return null;
-                }                 
-
-                api = new AtlasPictureInfo();
-                api.atlasSize = new Size(meta.size.w, meta.size.h);
-                api.subPictures = new StringDictionary<AtlasSubPictureInfo>();
-
-                for (let f of frames) {
-                    let aspi = new AtlasSubPictureInfo();
-                    aspi.name = f.filename;
-                    aspi.location = new Vector2(f.frame.x, api.atlasSize.height - (f.frame.y + f.frame.h));
-                    aspi.size = new Size(f.frame.w, f.frame.h);
-
-                    api.subPictures.add(aspi.name, aspi);
-                }
-            } catch (ex2) {
-                errorMsg = "Unknown Exception: " + ex2;
-                errorCode = -2;
-            } 
-
-            return { api: api, errorMsg: errorMsg, errorCode: errorCode };
-        }
-    }
-
-    /**
-     * Use this decorator when you declare an Atlas Loader Class for the loader to register itself automatically.
-     * @param fileExtension the extension of the file that the plugin is loading (there can be many plugin for the same extension)
-     * @param plugin an instance of the plugin class to add to the AtlasPictureInfoFactory
-     */
-    export function AtlasLoaderPlugin(fileExtension: string, plugin: IAtlasLoader): (target: Object) => void {
-        return () => {
-            AtlasPictureInfoFactory.addLoader(fileExtension, plugin);
-        }
-    }
-}

canvas2D/src/Engine/babylon.bounding2d.ts

@@ -1,385 +0,0 @@
-module BABYLON {
-
-    /**
-     * Stores 2D Bounding Information.
-     * This class handles a circle area and a bounding rectangle one.
-     */
-    export class BoundingInfo2D {
-
-        /**
-         * The coordinate of the center of the bounding info
-         */
-        public center: Vector2;
-
-        /**
-         * The radius of the bounding circle, from the center of the bounded object
-         */
-        public radius: number;
-
-        /**
-         * The extent of the bounding rectangle, from the center of the bounded object.
-         * This is an absolute value in both X and Y of the vector which describe the right/top corner of the rectangle, you can easily reconstruct the whole rectangle by negating X &| Y.
-         */
-        public extent: Vector2;
-
-        constructor() {
-            this.radius = 0;
-            this.center = Vector2.Zero();
-            this.extent = Vector2.Zero();
-            this._worldAABBDirty = false;
-            this._worldAABBDirtyObservable = null;
-            this._worldAABB = Vector4.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.
-         */
-        public static CreateFromSize(size: Size): BoundingInfo2D {
-            let 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.
-         */
-        public static CreateFromRadius(radius: number): BoundingInfo2D {
-            let 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.
-         */
-        public static CreateFromPoints(points: Vector2[]): BoundingInfo2D {
-            let 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
-         */
-        public static CreateFromSizeToRef(size: Size, b: BoundingInfo2D) {
-            if (!size) {
-                size = Size.Zero();
-            }
-            b.center.x = +size.width / 2;
-            b.center.y = +size.height / 2;
-            b.extent.x = b.center.x;
-            b.extent.y = b.center.y;
-            b.radius = b.extent.length();
-            b._worldAABBDirty = true;
-        }
-
-        /**
-         * 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
-         */
-        public static CreateFromRadiusToRef(radius: number, b: BoundingInfo2D) {
-            b.center.x = b.center.y = 0;
-            let r = +radius;
-            b.extent.x = r;
-            b.extent.y = r;
-            b.radius = r;
-            b._worldAABBDirty = true;
-        }
-
-        /**
-         * 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
-         */
-        public static CreateFromPointsToRef(points: Vector2[], b: BoundingInfo2D) {
-            let xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
-            for (let p of points) {
-                xmin = Math.min(p.x, xmin);
-                xmax = Math.max(p.x, xmax);
-                ymin = Math.min(p.y, ymin);
-                ymax = Math.max(p.y, ymax);
-            }
-            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
-         */
-        public static CreateFromMinMaxToRef(xmin: number, xmax: number, ymin: number, ymax: number, b: BoundingInfo2D) {
-            let w = xmax - xmin;
-            let h = ymax - ymin;
-            b.center = new Vector2(xmin + w / 2, ymin + h / 2);
-            b.extent = new Vector2(xmax - b.center.x, ymax - b.center.y);
-            b.radius = b.extent.length();
-            b._worldAABBDirty = true;
-        }
-
-        public toString(): string {
-            return `Center: ${this.center}, Extent: ${this.extent}, Radius: ${this.radius}`;
-        }
-
-        /**
-         * Duplicate this instance and return a new one
-         * @return the duplicated instance
-         */
-        public clone(): BoundingInfo2D {
-            let r = new BoundingInfo2D();
-            r.center = this.center.clone();
-            r.radius = this.radius;
-            r.extent = this.extent.clone();
-            return r;
-        }
-
-        public clear() {
-            this.center.copyFromFloats(0, 0);
-            this.radius = 0;
-            this.extent.copyFromFloats(0, 0);
-            this._worldAABBDirty = true;
-        }
-
-        public copyFrom(src: BoundingInfo2D) {
-            this.center.copyFrom(src.center);
-            this.radius = src.radius;
-            this.extent.copyFrom(src.extent);
-            this._worldAABBDirty = true;
-        }
-
-        public equals(other: BoundingInfo2D): boolean {
-            if (!other) {
-                return false;
-            }
-            return other.center.equals(this.center) && other.extent.equals(this.extent);
-        }
-
-        /**
-         * return the max extend of the bounding info
-         */
-        public max(): Vector2 {
-            let r = Vector2.Zero();
-            this.maxToRef(r);
-            return r;
-        }
-
-        /**
-         * return the min/max extend of the bounding info.
-         * x, y, z, w are left, bottom, right and top
-         */
-        public minMax(): Vector4 {
-            let r = Vector4.Zero();
-            this.minMaxToRef(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
-         */
-        public maxToRef(result: Vector2) {
-            result.x = this.center.x + this.extent.x;
-            result.y = this.center.y + this.extent.y;
-        }
-
-        /**
-         * Update a vector4 with the min/max extend of the bounding info
-         * x, y, z, w are left, bottom, right and top
-         * @param result must be a valid/allocated vector4 that will contain the result of the operation
-         */
-        public minMaxToRef(result: Vector4) {
-            result.x = this.center.x - this.extent.x;
-            result.y = this.center.y - this.extent.y;
-            result.z = this.center.x + this.extent.x;
-            result.w = this.center.y + this.extent.y;
-        }
-
-        /**
-         * Return the size of the boundingInfo rect surface
-         */
-        public size(): Size {
-            let r = Size.Zero();
-            this.sizeToRef(r);
-            return r;
-        }
-
-        /**
-         * Stores in the result object the size of the boundingInfo rect surface
-         * @param result
-         */
-        public sizeToRef(result: Size) {
-            result.width  = this.extent.x * 2;
-            result.height = this.extent.y * 2;
-        }
-
-        /**
-         * Inflate the boundingInfo with the given vector
-         * @param offset the extent will be incremented with offset and the radius will be computed again
-         */
-        public inflate(offset: Vector2) {
-            this.extent.addInPlace(offset);
-            this.radius = this.extent.length();
-        }
-
-        /**
-         * Apply a transformation matrix to this BoundingInfo2D and return a new instance containing the result
-         * @param matrix the transformation matrix to apply
-         * @return the new instance containing the result of the transformation applied on this BoundingInfo2D
-         */
-        public transform(matrix: Matrix2D): BoundingInfo2D {
-            var r = new BoundingInfo2D();
-            this.transformToRef(matrix, r);
-            return r;
-        }
-
-        /**
-         * 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
-         */
-        public union(other: BoundingInfo2D): BoundingInfo2D {
-            var r = new BoundingInfo2D();
-            this.unionToRef(other, r);
-            return r;
-        }
-
-        public worldAABBIntersectionTest(other: BoundingInfo2D): boolean {
-            let a = this.worldAABB;
-            let b = other.worldAABB;
-
-            return b.z >= a.x && b.x <= a.z && b.w >= a.y && b.y <= a.w;
-        }
-
-        private static _transform: Array<Vector2> = new Array<Vector2>(Vector2.Zero(), Vector2.Zero(), Vector2.Zero(), Vector2.Zero());
-
-        /**
-         * Transform this BoundingInfo2D with a given matrix and store the result in an existing BoundingInfo2D instance.
-         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
-         * @param matrix The matrix to use to compute the transformation
-         * @param result A VALID (i.e. allocated) BoundingInfo2D object where the result will be stored
-         */
-        public transformToRef(matrix: Matrix2D, result: BoundingInfo2D) {
-            // Construct a bounding box based on the extent values
-            let p = BoundingInfo2D._transform;
-            p[0].x = this.center.x + this.extent.x;
-            p[0].y = this.center.y + this.extent.y;
-            p[1].x = this.center.x + this.extent.x;
-            p[1].y = this.center.y - this.extent.y;
-            p[2].x = this.center.x - this.extent.x;
-            p[2].y = this.center.y - this.extent.y;
-            p[3].x = this.center.x - this.extent.x;
-            p[3].y = this.center.y + this.extent.y;
-
-            // Transform the four points of the bounding box with the matrix
-            for (let i = 0; i < 4; i++) {
-                matrix.transformPointToRef(p[i], p[i]);
-            }
-            BoundingInfo2D.CreateFromPointsToRef(p, result);
-        }
-
-        private _updateWorldAABB(worldMatrix: Matrix2D) {
-            // Construct a bounding box based on the extent values
-            let p = BoundingInfo2D._transform;
-            p[0].x = this.center.x + this.extent.x;
-            p[0].y = this.center.y + this.extent.y;
-            p[1].x = this.center.x + this.extent.x;
-            p[1].y = this.center.y - this.extent.y;
-            p[2].x = this.center.x - this.extent.x;
-            p[2].y = this.center.y - this.extent.y;
-            p[3].x = this.center.x - this.extent.x;
-            p[3].y = this.center.y + this.extent.y;
-
-            // Transform the four points of the bounding box with the matrix
-            for (let i = 0; i < 4; i++) {
-                worldMatrix.transformPointToRef(p[i], p[i]);
-            }
-
-            this._worldAABB.x = Math.min(Math.min(p[0].x, p[1].x), Math.min(p[2].x, p[3].x));
-            this._worldAABB.y = Math.min(Math.min(p[0].y, p[1].y), Math.min(p[2].y, p[3].y));
-            this._worldAABB.z = Math.max(Math.max(p[0].x, p[1].x), Math.max(p[2].x, p[3].x));
-            this._worldAABB.w = Math.max(Math.max(p[0].y, p[1].y), Math.max(p[2].y, p[3].y));
-        }
-
-        public worldMatrixAccess: () => Matrix2D;
-
-        public get worldAABBDirtyObservable(): Observable<BoundingInfo2D> {
-            if (!this._worldAABBDirtyObservable) {
-                this._worldAABBDirtyObservable = new Observable<BoundingInfo2D>();
-            }
-            return this._worldAABBDirtyObservable;
-        }
-
-        public get isWorldAABBDirty() {
-            return this._worldAABBDirty;
-        }
-
-        public dirtyWorldAABB() {
-            if (this._worldAABBDirty) {
-                return;
-            }
-
-            this._worldAABBDirty = true;
-            if (this._worldAABBDirtyObservable && this._worldAABBDirtyObservable.hasObservers()) {
-                this._worldAABBDirtyObservable.notifyObservers(this);
-            }
-        }
-
-        /**
-         * Retrieve the world AABB, the Vector4's data is x=xmin, y=ymin, z=xmax, w=ymax
-         */
-        public get worldAABB(): Vector4 {
-            if (this._worldAABBDirty) {
-                if (!this.worldMatrixAccess) {
-                    throw new Error("you must set the worldMatrixAccess function first");
-                }
-                this._updateWorldAABB(this.worldMatrixAccess());
-                this._worldAABBDirty = false;
-            }
-            return this._worldAABB;
-        }
-
-        /**
-         * Compute the union of this BoundingInfo2D with another one and store the result in a third valid BoundingInfo2D object
-         * This is a GC friendly version, try to use it as much as possible, specially if your transformation is inside a loop, allocate the result object once for good outside of the loop and use it every time.
-         * @param other the second object used to compute the union
-         * @param result a VALID BoundingInfo2D instance (i.e. allocated) where the result will be stored
-         */
-        public unionToRef(other: BoundingInfo2D, result: BoundingInfo2D) {
-            let xmax = Math.max(this.center.x + this.extent.x, other.center.x + other.extent.x);
-            let ymax = Math.max(this.center.y + this.extent.y, other.center.y + other.extent.y);
-            let xmin = Math.min(this.center.x - this.extent.x, other.center.x - other.extent.x);
-            let 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
-         */
-        public doesIntersect(pickPosition: Vector2): boolean {
-            // is it inside the radius?
-            let pickLocal = pickPosition.subtract(this.center);
-            if (pickLocal.lengthSquared() <= (this.radius * this.radius)) {
-                // is it inside the rectangle?
-                return ((Math.abs(pickLocal.x) <= this.extent.x) && (Math.abs(pickLocal.y) <= this.extent.y));
-            }
-            return false;
-        }
-
-        private _worldAABBDirtyObservable: Observable<BoundingInfo2D>;
-        private _worldAABBDirty: boolean;
-        private _worldAABB: Vector4;
-    }
-}

canvas2D/src/Engine/babylon.brushes2d.ts

@@ -1,242 +0,0 @@
-module BABYLON {
-    /**
-     * This interface is used to implement a lockable instance pattern.
-     * Classes that implements it may be locked at any time, making their content immutable from now on.
-     * You also can query if a given instance is locked or not.
-     * This allow instances to be shared among several 'consumers'.
-     */
-    export interface ILockable {
-        /**
-         * Query the lock state
-         * @returns returns true if the object is locked and immutable, false if it's not
-         */
-        isLocked(): boolean;
-
-        /**
-         * A call to this method will definitely lock the instance, making its content immutable
-         * @returns the previous lock state of the object. so if true is returned the object  were already locked and this method does nothing, if false is returned it means the object wasn't locked and this call locked it for good.
-         */
-        lock(): boolean;
-    }
-
-    /**
-     * This interface defines the IBrush2D contract.
-     * Classes implementing a new type of Brush2D must implement this interface
-     */
-    export interface IBrush2D extends ILockable {
-        /**
-         * Define if the brush will use transparency / alpha blending
-         * @returns true if the brush use transparency
-         */
-        isTransparent(): boolean;
-
-        /**
-         * It is critical for each instance of a given Brush2D type to return a unique string that identifies it because the Border instance will certainly be part of the computed ModelKey for a given Primitive
-         * @returns A string identifier that uniquely identify the instance
-         */
-        toString(): string;
-    }
-
-    /**
-     * Base class implementing the ILocable interface.
-     * The particularity of this class is to call the protected onLock() method when the instance is about to be locked for good.
-     */
-    export class LockableBase implements ILockable {
-        isLocked(): boolean {
-            return this._isLocked;
-        }
-
-        private _isLocked: boolean;
-
-        lock(): boolean {
-            if (this._isLocked) {
-                return true;
-            }
-
-            this.onLock();
-            this._isLocked = true;
-            return false;
-        }
-
-        /**
-         * Protected handler that will be called when the instance is about to be locked.
-         */
-        protected onLock() {
-
-        }
-    }
-
-    @className("SolidColorBrush2D", "BABYLON")
-    /**
-     * 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).
-     */
-    export class SolidColorBrush2D extends LockableBase implements IBrush2D {
-        constructor(color: Color4, lock: boolean = false) {
-            super();
-            this._color = color;
-            if (lock) {
-                {
-                    this.lock();
-                }
-            }
-        }
-
-        /**
-         * Return true if the brush is transparent, false if it's totally opaque
-         */
-        isTransparent(): boolean {
-            return this._color && this._color.a < 1.0;
-        }
-
-        /**
-         * The color used by this instance to render
-         * @returns the color object. Note that it's not a clone of the actual object stored in the instance so you MUST NOT modify it, otherwise unexpected behavior might occurs.
-         */
-        public get color(): Color4 {
-            return this._color;
-        }
-
-        public set color(value: Color4) {
-            if (this.isLocked()) {
-                return;
-            }
-
-            this._color = value;
-        }
-
-        /**
-         * Return a unique identifier of the instance, which is simply the hexadecimal representation (CSS Style) of the solid color.
-         */
-        public toString(): string {
-            return this._color.toHexString();
-        }
-        private _color: Color4;
-    }
-
-    @className("GradientColorBrush2D", "BABYLON")
-    /**
-     * This class implements a Gradient Color Brush, the brush color will blend from a first given color to a second one.
-     */
-    export class GradientColorBrush2D extends LockableBase implements IBrush2D {
-        constructor(color1: Color4, color2: Color4, translation: Vector2 = Vector2.Zero(), rotation: number = 0, scale: number = 1, lock: boolean = false) {
-            super();
-
-            this._color1 = color1;
-            this._color2 = color2;
-            this._translation = translation;
-            this._rotation = rotation;
-            this._scale = scale;
-
-            if (lock) {
-                this.lock();
-            }
-        }
-
-        /**
-         * Return true if the brush is transparent, false if it's totally opaque
-         */
-        isTransparent(): boolean {
-            return (this._color1 && this._color1.a < 1.0) || (this._color2 && this._color2.a < 1.0);
-        }
-
-        /**
-         * First color, the blend will start from this color
-         */
-        public get color1(): Color4 {
-            return this._color1;
-        }
-
-        public set color1(value: Color4) {
-            if (this.isLocked()) {
-                return;
-            }
-
-            this._color1 = value;
-        }
-
-        /**
-         * Second color, the blend will end to this color
-         */
-        public get color2(): Color4 {
-            return this._color2;
-        }
-
-        public set color2(value: Color4) {
-            if (this.isLocked()) {
-                return;
-            }
-
-            this._color2 = value;
-        }
-
-        /**
-         * Translation vector to apply on the blend
-         * Default is [0;0]
-         */
-        public get translation(): Vector2 {
-            return this._translation;
-        }
-
-        public set translation(value: Vector2) {
-            if (this.isLocked()) {
-                return;
-            }
-
-            this._translation = value;
-        }
-
-        /**
-         * 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.
-         */
-        public get rotation(): number {
-            return this._rotation;
-        }
-
-        public set rotation(value: number) {
-            if (this.isLocked()) {
-                return;
-            }
-
-            this._rotation = value;
-        }
-
-        /**
-         * Scale factor to apply to the gradient.
-         * Default is 1: no scale.
-         */
-        public get scale(): number {
-            return this._scale;
-        }
-
-        public set scale(value: number) {
-            if (this.isLocked()) {
-                return;
-            }
-
-            this._scale = value;
-        }
-
-        /**
-         * Return a string describing the brush
-         */
-        public toString(): string {
-            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
-         */
-        public static BuildKey(color1: Color4, color2: Color4, translation: Vector2, rotation: number, scale: number) {
-            return `C1:${color1};C2:${color2};T:${translation.toString()};R:${rotation};S:${scale};`;
-        }
-
-        private _color1: Color4;
-        private _color2: Color4;
-        private _translation: Vector2;
-        private _rotation: number;
-        private _scale: number;
-    }
-
-}

canvas2D/src/Engine/babylon.canvas2dLayoutEngine.ts

@@ -1,724 +0,0 @@
-module BABYLON {
-
-    export interface ILayoutData {
-        
-    }
-
-    @className("LayoutEngineBase", "BABYLON")
-    /**
-     * This is the base class you have to extend in order to implement your own Layout Engine.
-     * Note that for performance reason, each different Layout Engine type can be exposed as one/many singleton or must be instanced each time.
-     * If data has to be associated to a given primitive you can use the SmartPropertyPrim.addExternalData API to do it.
-     */
-    export class LayoutEngineBase implements ILockable {
-        constructor() {
-            this.layoutDirtyOnPropertyChangedMask = 0;
-        }
-
-        public updateLayout(prim: Prim2DBase) {
-        }
-
-        public get isChildPositionAllowed(): boolean {
-            return false;
-        }
-
-        isLocked(): boolean {
-            return this._isLocked;
-        }
-
-        lock(): boolean {
-            if (this._isLocked) {
-                return false;
-            }
-            this._isLocked = true;
-            return true;
-        }
-
-        public layoutDirtyOnPropertyChangedMask;
-
-        private _isLocked: boolean;
-    }
-
-    @className("CanvasLayoutEngine", "BABYLON")
-    /**
-     * The default Layout Engine, primitive are positioning into a Canvas, using their x/y coordinates.
-     * This layout must be used as a Singleton through the CanvasLayoutEngine.Singleton property.
-     */
-    export class CanvasLayoutEngine extends LayoutEngineBase {
-        private  static _singleton: CanvasLayoutEngine = null;
-        public static get Singleton(): CanvasLayoutEngine {
-            if (!CanvasLayoutEngine._singleton) {
-                CanvasLayoutEngine._singleton = new CanvasLayoutEngine();
-            }
-            return CanvasLayoutEngine._singleton;
-        } 
-
-        constructor() {
-            super();
-            this.layoutDirtyOnPropertyChangedMask = Prim2DBase.sizeProperty.flagId | Prim2DBase.actualSizeProperty.flagId;
-        }
-
-        // A very simple (no) layout computing...
-        // The Canvas and its direct children gets the Canvas' size as Layout Area
-        // Indirect children have their Layout Area to the actualSize (margin area) of their parent
-        @logMethod()
-        public updateLayout(prim: Prim2DBase) {
-
-            // If this prim is layoutDiry we update  its layoutArea and also the one of its direct children
-            if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
-                prim._clearFlags(SmartPropertyPrim.flagLayoutDirty);
-                for (let child of prim.children) {
-                    this._doUpdate(child);
-                }
-            }
-
-        }
-
-        @logMethod()
-        private _doUpdate(prim: Prim2DBase) {
-            // Canvas ?
-            if (prim instanceof Canvas2D) {
-                prim.layoutArea = prim.actualSize; //.multiplyByFloats(prim.scaleX, prim.scaleY);
-            }
-
-            // Direct child of Canvas ?
-            else if (prim.parent instanceof Canvas2D) {
-                prim.layoutArea = prim.owner.actualSize; //.multiplyByFloats(prim.owner.scaleX, prim.owner.scaleY);
-            }
-
-            // Indirect child of Canvas
-            else {
-                let contentArea = prim.parent.contentArea;
-
-                // Can be null if the parent's content area depend of its children, the computation will be done in many passes
-                if (contentArea) {
-                    prim.layoutArea = contentArea;
-                }
-            }
-            C2DLogging.setPostMessage(() => `Prim: ${prim.id} has layoutArea: ${prim.layoutArea}`);
-        }
-
-        get isChildPositionAllowed(): boolean {
-            return true;
-        }
-    }
-
-
-    @className("StackPanelLayoutEngine", "BABYLON")
-    /**
-     * A stack panel layout. Primitive will be stack either horizontally or vertically.
-     * This Layout type must be used as a Singleton, use the StackPanelLayoutEngine.Horizontal for an horizontal stack panel or StackPanelLayoutEngine.Vertical for a vertical one.
-     */
-    export class StackPanelLayoutEngine extends LayoutEngineBase {
-        constructor() {
-            super();
-            this.layoutDirtyOnPropertyChangedMask = Prim2DBase.sizeProperty.flagId | Prim2DBase.actualSizeProperty.flagId;
-        }
-
-        public static get Horizontal(): StackPanelLayoutEngine {
-            if (!StackPanelLayoutEngine._horizontal) {
-                StackPanelLayoutEngine._horizontal = new StackPanelLayoutEngine();
-                StackPanelLayoutEngine._horizontal.isHorizontal = true;
-                StackPanelLayoutEngine._horizontal.lock();
-            }
-
-            return StackPanelLayoutEngine._horizontal;
-        }
-
-        public static get Vertical(): StackPanelLayoutEngine {
-            if (!StackPanelLayoutEngine._vertical) {
-                StackPanelLayoutEngine._vertical = new StackPanelLayoutEngine();
-                StackPanelLayoutEngine._vertical.isHorizontal = false;
-                StackPanelLayoutEngine._vertical.lock();
-            }
-
-            return StackPanelLayoutEngine._vertical;
-        }
-        private static _horizontal: StackPanelLayoutEngine = null;
-        private static _vertical: StackPanelLayoutEngine = null;
-
-
-        get isHorizontal(): boolean {
-            return this._isHorizontal;
-        }
-
-        set isHorizontal(val: boolean) {
-            if (this.isLocked()) {
-                return;
-            }
-            this._isHorizontal = val;
-        }
-
-        private _isHorizontal: boolean = true;
-
-        private static stackPanelLayoutArea = Size.Zero();
-        private static dstOffset = Vector4.Zero();
-        private static dstArea = Size.Zero();
-
-        private static computeCounter = 0;
-
-        public updateLayout(prim: Prim2DBase) {
-            if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
-
-                let primLayoutArea = prim.layoutArea;
-                let isSizeAuto = prim.isSizeAuto;
-
-                // If we're not in autoSize the layoutArea of the prim having the stack panel must be computed in order for us to compute the children' position.
-                // If there's at least one auto size (Horizontal or Vertical) we will have to figure the layoutArea ourselves
-                if (!primLayoutArea && !isSizeAuto) {
-                    return;
-                }
-
-//                console.log("Compute Stack Panel Layout " + ++StackPanelLayoutEngine.computeCounter);
-
-                let x = 0;
-                let y = 0;
-                let horizonStackPanel = this.isHorizontal;
-
-                // If the stack panel is horizontal we check if the primitive height is auto or not, if it's auto then we have to compute the required height, otherwise we just take the actualHeight. If the stack panel is vertical we do the same but with width
-                let max = 0;
-
-                let stackPanelLayoutArea = StackPanelLayoutEngine.stackPanelLayoutArea;
-                if (horizonStackPanel) {
-                    if (prim.isVerticalSizeAuto) {
-                        max = 0;
-                        stackPanelLayoutArea.height = 0;
-                    } else {
-                        max = prim.layoutArea.height;
-                        stackPanelLayoutArea.height = prim.layoutArea.height;
-                        stackPanelLayoutArea.width = 0;
-                    }
-                } else {
-                    if (prim.isHorizontalSizeAuto) {
-                        max = 0;
-                        stackPanelLayoutArea.width = 0;
-                    } else {
-                        max = prim.layoutArea.width;
-                        stackPanelLayoutArea.width = prim.layoutArea.width;
-                        stackPanelLayoutArea.height = 0;
-                    }
-                }
-
-                for (let child of prim.children) {
-                    if (child._isFlagSet(SmartPropertyPrim.flagNoPartOfLayout)) {
-                        continue;
-                    }
-
-                    if (child._hasMargin) {
-
-                        // Calling computeWithAlignment will return us the area taken by "child" which is its layoutArea
-                        // We also have the dstOffset which will give us the y position in horizontal mode or x position in vertical mode.
-                        //  The alignment offset on the other axis is simply ignored as it doesn't make any sense (e.g. horizontal alignment is ignored in horizontal mode)
-                        child.margin.computeWithAlignment(stackPanelLayoutArea, child.actualSize, child.marginAlignment, child.actualScale, StackPanelLayoutEngine.dstOffset, StackPanelLayoutEngine.dstArea, true);
-
-                        child.layoutArea = StackPanelLayoutEngine.dstArea;
-
-                    } else {
-                        child.margin.computeArea(child.actualSize, child.actualScale, StackPanelLayoutEngine.dstArea);
-                        child.layoutArea = StackPanelLayoutEngine.dstArea;
-                    }
-
-                    max = Math.max(max, horizonStackPanel ? StackPanelLayoutEngine.dstArea.height : StackPanelLayoutEngine.dstArea.width);
-                }
-
-                for (let child of prim.children) {
-                    if (child._isFlagSet(SmartPropertyPrim.flagNoPartOfLayout)) {
-                        continue;
-                    }
-
-                    let layoutArea = child.layoutArea;
-
-                    if (horizonStackPanel) {
-                        child.layoutAreaPos = new Vector2(x, 0);
-                        x += layoutArea.width;
-                        child.layoutArea = new Size(layoutArea.width, max);
-                    } else {
-                        child.layoutAreaPos = new Vector2(0, y);
-                        y += layoutArea.height;
-                        child.layoutArea = new Size(max, layoutArea.height);
-                    }
-                }
-                prim._clearFlags(SmartPropertyPrim.flagLayoutDirty);
-            }
-
-        }
-
-        get isChildPositionAllowed(): boolean {
-            return false;
-        }
-    }
-
-    /**
-     * GridData is used specify what row(s) and column(s) a primitive is placed in when its parent is using a Grid Panel Layout. 
-     */
-    export class GridData implements ILayoutData{
-
-        /**
-         * the row number of the grid
-         **/
-        public row:number;
-
-        /**
-         * the column number of the grid 
-         **/
-        public column:number;
-
-        /**
-         * the number of rows a primitive will occupy
-         **/
-        public rowSpan:number;
-
-        /**
-         * the number of columns a primitive will occupy 
-         **/
-        public columnSpan:number;
-
-        /**
-         * Create a Grid Data that describes where a primitive will be placed in a Grid Panel Layout.
-         * @param row the row number of the grid
-         * @param column the column number of the grid 
-         * @param rowSpan the number of rows a primitive will occupy
-         * @param columnSpan the number of columns a primitive will occupy 
-         **/
-        constructor(row:number, column:number, rowSpan?:number, columnSpan?:number){
-
-            this.row = row;
-            this.column = column;
-            this.rowSpan = (rowSpan == null) ? 1 : rowSpan;
-            this.columnSpan = (columnSpan == null) ? 1 : columnSpan;
-
-        }
-
-    }
-
-    class GridDimensionDefinition {
-        public static Pixels = 1;
-        public static Stars = 2;
-        public static Auto = 3;
-        _parse(value: string, res: (v: number, vp: number, t: number) => void) {
-            let v = value.toLocaleLowerCase().trim();
-            if (v.indexOf("auto") === 0) {
-                res(null, null, GridDimensionDefinition.Auto);
-            } else if (v.indexOf("*") !== -1) {
-                let i = v.indexOf("*");
-                let w = 1;
-                if(i > 0){
-                    w = parseFloat(v.substr(0, i));
-                }
-                res(w, null, GridDimensionDefinition.Stars);
-            } else {
-                let w = parseFloat(v);
-                res(w, w, GridDimensionDefinition.Pixels);
-            }
-        }
-    }
-    class RowDefinition extends GridDimensionDefinition {
-        heightPixels: number;
-        height: number;
-        heightType: number;
-    }
-    class ColumnDefinition extends GridDimensionDefinition {
-        widthPixels: number;
-        width: number;
-        widthType: number;
-    }
-
-    @className("GridPanelLayoutEngine", "BABYLON")
-    /**
-     * A grid panel layout.  Grid panel is a table that has rows and columns.
-     * When adding children to a primitive that is using grid panel layout, you must assign a GridData object to the child to indicate where the child will appear in the grid.
-     */
-    export class GridPanelLayoutEngine extends LayoutEngineBase {
-        constructor(settings: { rows: [{ height: string }], columns: [{ width: string }] }) {
-            super();
-            this.layoutDirtyOnPropertyChangedMask = Prim2DBase.sizeProperty.flagId | Prim2DBase.actualSizeProperty.flagId;
-            this._rows = new Array<RowDefinition>();
-            this._columns = new Array<ColumnDefinition>();
-            if (settings.rows) {
-                for (let row of settings.rows) {
-                    let r = new RowDefinition();
-                    r._parse(row.height, (v, vp, t) => {
-                        r.height = v;
-                        r.heightPixels = vp;
-                        r.heightType = t;
-                    });
-                    this._rows.push(r);
-                }
-            }
-            if (settings.columns) {
-                for (let col of settings.columns) {
-                    let r = new ColumnDefinition();
-                    r._parse(col.width, (v, vp, t) => {
-                        r.width = v;
-                        r.widthPixels = vp;
-                        r.widthType = t;
-                    });
-                    this._columns.push(r);
-                }
-            }
-
-        }
-
-        private _rows: Array<RowDefinition>;
-        private _columns: Array<ColumnDefinition>;
-        private _children: Prim2DBase[][] = [];
-        
-        private _rowBottoms: Array<number> = [];
-        private _columnLefts: Array<number> = [];
-
-        private _rowHeights: Array<number> = [];
-        private _columnWidths: Array<number> = [];
-
-        private static dstOffset = Vector4.Zero();
-        private static dstArea = Size.Zero();
-        private static dstAreaPos = Vector2.Zero();
-
-        public updateLayout(prim: Prim2DBase) {
-            if (prim._isFlagSet(SmartPropertyPrim.flagLayoutDirty)) {
-
-                if (!prim.layoutArea) {
-                    return;
-                }
-
-                for (let child of prim.children) {
-                    if (child._isFlagSet(SmartPropertyPrim.flagNoPartOfLayout)) {
-                        continue;
-                    }
-                    if (child._hasMargin) {
-                        child.margin.computeWithAlignment(prim.layoutArea, child.actualSize, child.marginAlignment, child.actualScale, GridPanelLayoutEngine.dstOffset, GridPanelLayoutEngine.dstArea, true);
-                    } else {
-                        child.margin.computeArea(child.actualSize, child.actualScale, GridPanelLayoutEngine.dstArea);
-                    }
-                    child.layoutArea = GridPanelLayoutEngine.dstArea;
-                }
-
-                this._updateGrid(prim);
-
-                let _children = this._children;
-                let rl = this._rows.length;
-                let cl = this._columns.length;
-                let columnWidth = 0;
-                let rowHeight = 0;
-                let dstArea = GridPanelLayoutEngine.dstArea;
-                let dstAreaPos = GridPanelLayoutEngine.dstAreaPos;
-
-                for(let i = 0; i < _children.length; i++){
-                    let children = _children[i];
-
-                    if(children){
-
-                        let bottom = this._rowBottoms[i];
-                        let rowHeight = this._rowHeights[i];
-
-                        let oBottom = bottom;
-                        let oRowHeight = rowHeight;
-
-                        for(let j = 0; j < children.length; j++){
-                            
-                            let left = this._columnLefts[j];
-                            let columnWidth = this._columnWidths[j];
-
-                            let child = children[j];
-
-                            if(child){
-
-                                let gd = <GridData>child.layoutData;
-
-                                if(gd.columnSpan > 1){
-                                    for(let k = j+1; k < gd.columnSpan + j && k < cl; k++){
-                                        columnWidth += this._columnWidths[k];
-                                    }
-                                }
-
-                                if(gd.rowSpan > 1){
-                                    
-                                    for(let k = i+1; k < gd.rowSpan + i && k < rl; k++){
-                                        rowHeight += this._rowHeights[k];
-                                        bottom = this._rowBottoms[k];
-                                    }
-                                    
-                                }
-                                
-                                dstArea.width = columnWidth;
-                                dstArea.height = rowHeight;
-
-                                child.layoutArea = dstArea;
-                                
-                                dstAreaPos.x = left;
-                                dstAreaPos.y = bottom;
-
-                                child.layoutAreaPos = dstAreaPos;
-
-                                bottom = oBottom;
-                                rowHeight = oRowHeight;
-                                
-                            }
-
-                        }
-
-                    }
-                    
-                }
-
-                prim._clearFlags(SmartPropertyPrim.flagLayoutDirty);
-            }
-        }
-
-        get isChildPositionAllowed(): boolean {
-            return false;
-        }
-
-        private _getMaxChildHeightInRow(rowNum:number):number{
-
-            let rows = this._rows;
-            let cl = this._columns.length;
-            let rl = this._rows.length;
-            let children = this._children;
-            let row = rows[rowNum];
-            let maxHeight = 0;
-
-            if(children && children[rowNum]){
-
-                for(let i = 0; i < cl; i++){
-                    let child = children[rowNum][i];
-                    
-                    if(child){
-                        let span = (<GridData>child.layoutData).rowSpan;
-                        if(maxHeight < child.layoutArea.height/span){
-                            maxHeight = child.layoutArea.height/span;
-                        }
-                    }
-                }
-
-            }
-
-            return maxHeight;
-
-        }
-
-        private _getMaxChildWidthInColumn(colNum:number):number{
-
-            let columns = this._columns;
-            let cl = this._columns.length;
-            let rl = this._rows.length;
-            let children = this._children;
-            let column = columns[colNum];
-            let maxWidth = 0;
-
-            if(children){
-
-                for(let i = 0; i < rl; i++){
-                    if(children[i]){
-                        let child = children[i][colNum];
-                        if(child){
-                            let span = (<GridData>child.layoutData).columnSpan;
-                            if(maxWidth < child.layoutArea.width/span){
-                                maxWidth = child.layoutArea.width/span;
-                            }
-                        }
-                    }
-                }
-
-            }
-
-            return maxWidth;
-
-        }
-
-        private _updateGrid(prim:Prim2DBase){
-
-            let _children = this._children;
-
-            //remove prim.children from _children
-            for(let i = 0; i < _children.length; i++){
-                let children = _children[i];
-                if(children){
-                    children.length = 0;
-                }
-            }
-
-            let childrenThatSpan:Array<Prim2DBase>;
-
-            //add prim.children to _children
-            for(let child of prim.children){
-                
-                if(!child.layoutData){
-                    continue;
-                }
-
-                let gd = <GridData>child.layoutData;
-
-                if(!_children[gd.row]){
-                    _children[gd.row] = [];
-                }
-
-                if(gd.columnSpan == 1 && gd.rowSpan == 1){
-                    _children[gd.row][gd.column] = child;
-                }else{
-                    if(!childrenThatSpan){
-                        childrenThatSpan = [];
-                    }
-                    //when children span, we need to add them to _children whereever they span to so that 
-                    //_getMaxChildHeightInRow and _getMaxChildWidthInColumn will work correctly.
-                    childrenThatSpan.push(child);
-                    for(let i = gd.row; i < gd.row + gd.rowSpan; i++){
-                        for(let j = gd.column; j < gd.column + gd.columnSpan; j++){
-                            _children[i][j] = child;
-                        }
-                    }
-                }
-
-            }
-
-
-            let rows = this._rows;
-            let columns = this._columns;
-
-            let rl = this._rows.length;
-            let cl = this._columns.length;
-
-            //get fixed and auto row heights first
-
-            var starIndexes = [];
-            var totalStars = 0;
-            var rowHeights = 0;
-            let columnWidths = 0;
-
-            for (let i = 0; i < rl; i++) {
-
-                let row = this._rows[i];
-
-                if(row.heightType == GridDimensionDefinition.Auto){
-
-                    this._rowHeights[i] = this._getMaxChildHeightInRow(i);
-                    rowHeights += this._rowHeights[i];
-
-                }else if(row.heightType == GridDimensionDefinition.Pixels){
-
-                    let maxChildHeight = this._getMaxChildHeightInRow(i);
-                    this._rowHeights[i] = Math.max(row.heightPixels, maxChildHeight);
-                    rowHeights += this._rowHeights[i];
-
-                }else if(row.heightType == GridDimensionDefinition.Stars){
-
-                    starIndexes.push(i);
-
-                    totalStars += row.height;
-
-                }
-
-            }
-
-            //star row heights
-
-            if(starIndexes.length > 0){
-
-                let remainingHeight = prim.contentArea.height - rowHeights;
-
-                for(let i = 0; i < starIndexes.length; i++){
-
-                    let rowIndex = starIndexes[i];
-
-                    let starHeight = (this._rows[rowIndex].height / totalStars) * remainingHeight;
-                    let maxChildHeight = this._getMaxChildHeightInRow(i);
-
-                    this._rowHeights[rowIndex] = Math.max(starHeight, maxChildHeight);
-
-                }
-            }
-
-
-            //get fixed and auto column widths
-
-            starIndexes.length = 0;
-            totalStars = 0;
-
-            for (let i = 0; i < cl; i++) {
-
-                let column = this._columns[i];
-
-                if(column.widthType == GridDimensionDefinition.Auto){
-
-                    this._columnWidths[i] = this._getMaxChildWidthInColumn(i);
-                    columnWidths += this._columnWidths[i];
-
-                }else if(column.widthType == GridDimensionDefinition.Pixels){
-
-                    let maxChildWidth = this._getMaxChildWidthInColumn(i);
-                    this._columnWidths[i] = Math.max(column.widthPixels, maxChildWidth);
-                    columnWidths += this._columnWidths[i];
-
-                }else if(column.widthType == GridDimensionDefinition.Stars){
-
-                    starIndexes.push(i);
-
-                    totalStars += column.width;
-
-                }
-
-            }
-
-            //star column widths
-
-            if(starIndexes.length > 0){
-
-                let remainingWidth = prim.contentArea.width - columnWidths;
-
-                for(let i = 0; i < starIndexes.length; i++){
-
-                    let columnIndex = starIndexes[i];
-
-                    let starWidth = (this._columns[columnIndex].width / totalStars) * remainingWidth;
-                    let maxChildWidth = this._getMaxChildWidthInColumn(i);
-
-                    this._columnWidths[columnIndex] = Math.max(starWidth, maxChildWidth);
-
-                }
-            }
-
-
-            let y = 0;
-            this._rowBottoms[rl - 1] = y;
-
-            for (let i = rl - 2; i >= 0; i--) {
-
-                y += this._rowHeights[i+1];
-                this._rowBottoms[i] = y;
-
-            }
-
-            let x = 0;
-            this._columnLefts[0] = x;
-            
-            for (let i = 1; i < cl; i++) {
-
-                x += this._columnWidths[i-1];
-                this._columnLefts[i] = x;
-
-            }
-
-            //remove duplicate references to children that span
-            if(childrenThatSpan){
-                for(var i = 0; i < childrenThatSpan.length; i++){
-                    
-                    let child = childrenThatSpan[i];
-                    let gd = <GridData>child.layoutData;
-
-                    for(let i = gd.row; i < gd.row + gd.rowSpan; i++){
-                        for(let j = gd.column; j < gd.column + gd.columnSpan; j++){
-                            if(i == gd.row && j == gd.column){
-                                continue;
-                            }
-                            if(_children[i][j] == child){
-                                _children[i][j] = null;
-                            }
-                        }
-                    }
-                }
-            }
-
-        }
-
-    }
-
-}

canvas2D/src/Engine/babylon.ellipse2d.ts

@@ -1,448 +0,0 @@
-module BABYLON {
-    export class Ellipse2DRenderCache extends ModelRenderCache {
-        effectsReady: boolean                               = false;
-        fillVB: WebGLBuffer                                 = null;
-        fillIB: WebGLBuffer                                 = null;
-        fillIndicesCount: number                            = 0;
-        instancingFillAttributes: InstancingAttributeInfo[] = null;
-        effectFillInstanced: Effect                         = null;
-        effectFill: Effect                                  = null;
-
-        borderVB: WebGLBuffer                                 = null;
-        borderIB: WebGLBuffer                                 = null;
-        borderIndicesCount: number                            = 0;
-        instancingBorderAttributes: InstancingAttributeInfo[] = null;
-        effectBorderInstanced: Effect                         = null;
-        effectBorder: Effect                                  = null;
-
-        constructor(engine: Engine, modelKey: string) {
-            super(engine, modelKey);
-        }
-
-        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
-            // Do nothing if the shader is still loading/preparing 
-            if (!this.effectsReady) {
-                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
-                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
-                    return false;
-                }
-                this.effectsReady = true;
-            }
-
-            let canvas = instanceInfo.owner.owner;
-            var engine = canvas.engine;
-
-            let depthFunction = 0;
-            if (this.effectFill && this.effectBorder) {
-                depthFunction = engine.getDepthFunction();
-                engine.setDepthFunctionToLessOrEqual();
-            }
-
-            var curAlphaMode = engine.getAlphaMode();
-
-            if (this.effectFill) {
-                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_FILLPARTID.toString());
-                let pid = context.groupInfoPartData[partIndex];
-
-                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
-                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
-                }
-
-                let effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
-
-                engine.enableEffect(effect);
-                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
-                if (context.useInstancing) {
-                    if (!this.instancingFillAttributes) {
-                        this.instancingFillAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_FILLPARTID, effect);
-                    }
-
-                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
-                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
-                    canvas._addDrawCallCount(1, context.renderMode);
-                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
-                    engine.draw(true, 0, this.fillIndicesCount, count);
-                    engine.unbindInstanceAttributes();
-                } else {
-                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
-                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
-                        this.setupUniforms(effect, partIndex, pid._partData, i);
-                        engine.draw(true, 0, this.fillIndicesCount);                        
-                    }
-                }
-            }
-
-            if (this.effectBorder) {
-                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_BORDERPARTID.toString());
-                let pid = context.groupInfoPartData[partIndex];
-
-                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
-                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
-                }
-
-                let effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
-
-                engine.enableEffect(effect);
-                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
-                if (context.useInstancing) {
-                    if (!this.instancingBorderAttributes) {
-                        this.instancingBorderAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_BORDERPARTID, effect);
-                    }
-
-                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
-                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
-                    canvas._addDrawCallCount(1, context.renderMode);
-                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
-                    engine.draw(true, 0, this.borderIndicesCount, count);
-                    engine.unbindInstanceAttributes();
-                } else {
-                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
-                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
-                        this.setupUniforms(effect, partIndex, pid._partData, i);
-                        engine.draw(true, 0, this.borderIndicesCount);
-                    }
-                }
-            }
-
-            engine.setAlphaMode(curAlphaMode, true);
-
-            if (this.effectFill && this.effectBorder) {
-                engine.setDepthFunction(depthFunction);
-            }
-            return true;
-        }
-
-        public dispose(): boolean {
-            if (!super.dispose()) {
-                return false;
-            }
-
-            if (this.fillVB) {
-                this._engine._releaseBuffer(this.fillVB);
-                this.fillVB = null;
-            }
-
-            if (this.fillIB) {
-                this._engine._releaseBuffer(this.fillIB);
-                this.fillIB = null;
-            }
-
-            this.effectFill = null;
-            this.effectFillInstanced = null;
-            this.effectBorder = null;
-            this.effectBorderInstanced = null;
-
-            if (this.borderVB) {
-                this._engine._releaseBuffer(this.borderVB);
-                this.borderVB = null;
-            }
-
-            if (this.borderIB) {
-                this._engine._releaseBuffer(this.borderIB);
-                this.borderIB = null;
-            }
-
-            return true;
-        }
-    }
-
-    export class Ellipse2DInstanceData extends Shape2DInstanceData {
-        constructor(partId: number) {
-            super(partId, 1);
-        }
-
-        @instanceData()
-        get properties(): Vector3 {
-            return null;
-        }
-        set properties(value: Vector3) {
-        }
-    }
-
-    @className("Ellipse2D", "BABYLON")
-    /**
-     * Ellipse Primitive class
-     */
-    export class Ellipse2D extends Shape2D {
-
-        public static acutalSizeProperty: Prim2DPropInfo;
-        public static subdivisionsProperty: Prim2DPropInfo;
-
-        @modelLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 2, pi => Ellipse2D.subdivisionsProperty = pi)
-        /**
-         * Get/set the number of subdivisions used to draw the ellipsis. Default is 64.
-         */
-        public get subdivisions(): number {
-            return this._subdivisions;
-        }
-
-        public set subdivisions(value: number) {
-            this._subdivisions = value;
-        }
-
-        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
-            let w = this.size.width / 2;
-            let h = this.size.height / 2;
-            let x = intersectInfo._localPickPosition.x-w;
-            let y = intersectInfo._localPickPosition.y-h;
-            return ((x * x) / (w * w) + (y * y) / (h * h)) <= 1;
-        }
-
-        protected updateLevelBoundingInfo(): boolean {
-            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
-            return true;
-        }
-
-        /**
-         * Create an Ellipse 2D Shape primitive
-         * @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. You can alternatively use scaleX &| scaleY to apply non uniform scale
-         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
-         * - alignToPixel: if true the primitive will be aligned to the target rendering device's pixel
-         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
-         * - zOrder: override the zOrder with the specified value
-         * - 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. 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)
-         * - borderThickness: the thickness of the drawn border, default is 1.
-         * - isVisible: true if the group must be visible, false for hidden. Default is true.
-         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
-         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
-         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
-         * - levelCollision: this primitive is an actor of the Collision Manager and only this level will be used for collision (i.e. not the children). Use deepCollision if you want collision detection on the primitives and its children.
-         * - deepCollision: this primitive is an actor of the Collision Manager, this level AND ALSO its children will be used for collision (note: you don't need to set the children as level/deepCollision).
-         * - layoutData: a instance of a class implementing the ILayoutData interface that contain data to pass to the primitive parent's layout engine
-         * - 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)
-         */
-        constructor(settings?: {
-
-            parent                ?: Prim2DBase, 
-            children              ?: Array<Prim2DBase>,
-            id                    ?: string,
-            position              ?: Vector2,
-            x                     ?: number,
-            y                     ?: number,
-            rotation              ?: number,
-            scale                 ?: number,
-            scaleX                ?: number,
-            scaleY                ?: number,
-            dontInheritParentScale?: boolean,
-            alignToPixel          ?: boolean,
-            opacity               ?: number,
-            zOrder                ?: number, 
-            origin                ?: Vector2,
-            size                  ?: Size,
-            width                 ?: number,
-            height                ?: number,
-            subdivisions          ?: number,
-            fill                  ?: IBrush2D | string,
-            border                ?: IBrush2D | string,
-            borderThickness       ?: number,
-            isVisible             ?: boolean,
-            isPickable            ?: boolean,
-            isContainer           ?: boolean,
-            childrenFlatZOrder    ?: boolean,
-            levelCollision        ?: boolean,
-            deepCollision         ?: boolean,
-            layoutData            ?: ILayoutData,
-            marginTop             ?: number | string,
-            marginLeft            ?: number | string,
-            marginRight           ?: number | string,
-            marginBottom          ?: number | string,
-            margin                ?: number | string,
-            marginHAlignment      ?: number,
-            marginVAlignment      ?: number,
-            marginAlignment       ?: string,
-            paddingTop            ?: number | string,
-            paddingLeft           ?: number | string,
-            paddingRight          ?: number | string,
-            paddingBottom         ?: number | string,
-            padding               ?: number | string,
-        }) {
-
-            // Avoid checking every time if the object exists
-            if (settings == null) {
-                settings = {};
-            }
-
-            super(settings);
-
-            if (settings.size != null) {
-                this.size = settings.size;
-            }
-            else if (settings.width || settings.height) {
-                let size = new Size(settings.width, settings.height);
-                this.size = size;
-            }
-
-            let sub  = (settings.subdivisions == null) ? 64 : settings.subdivisions;
-            this.subdivisions = sub;
-        }
-
-        protected updateTriArray() {
-            let subDiv = this._subdivisions;
-            if (this._primTriArray == null) {
-                this._primTriArray = new Tri2DArray(subDiv);
-            } else {
-                this._primTriArray.clear(subDiv);
-            }
-
-            let size = this.actualSize;
-            let center = new Vector2(0.5 * size.width, 0.5 * size.height);
-            let v1 = Vector2.Zero();
-            let v2 = Vector2.Zero();
-
-            for (let i = 0; i < subDiv; i++) {
-	            let angle1 = Math.PI * 2 * (i-1) / subDiv;
-	            let angle2 = Math.PI * 2 * i / subDiv;
-
-                v1.x = ((Math.cos(angle1) / 2.0) + 0.5) * size.width;
-                v1.y = ((Math.sin(angle1) / 2.0) + 0.5) * size.height;
-
-                v2.x = ((Math.cos(angle2) / 2.0) + 0.5) * size.width;
-                v2.y = ((Math.sin(angle2) / 2.0) + 0.5) * size.height;
-
-                this._primTriArray.storeTriangle(i, center, v1, v2);
-
-            }
-
-        }
-
-        protected createModelRenderCache(modelKey: string): ModelRenderCache {
-            let renderCache = new Ellipse2DRenderCache(this.owner.engine, modelKey);
-            return renderCache;
-        }
-
-        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
-            let renderCache = <Ellipse2DRenderCache>modelRenderCache;
-            let engine = this.owner.engine;
-
-            // Need to create WebGL resources for fill part?
-            if (this.fill) {
-                let vbSize = this.subdivisions + 1;
-                let vb = new Float32Array(vbSize);
-                for (let i = 0; i < vbSize; i++) {
-                    vb[i] = i;
-                }
-                renderCache.fillVB = engine.createVertexBuffer(vb);
-
-                let triCount = vbSize - 1;
-                let ib = new Float32Array(triCount * 3);
-                for (let i = 0; i < triCount; i++) {
-                    ib[i * 3 + 0] = 0;
-                    ib[i * 3 + 2] = i + 2;
-                    ib[i * 3 + 1] = i + 1;
-                }
-                ib[triCount * 3 - 1] = 1;
-
-                renderCache.fillIB = engine.createIndexBuffer(ib);
-                renderCache.fillIndicesCount = triCount * 3;
-
-                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
-                if (ei) {
-                    renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
-                }
-
-                // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
-                renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
-            }
-
-            // Need to create WebGL resource for border part?
-            if (this.border) {
-                let vbSize = this.subdivisions * 2;
-                let vb = new Float32Array(vbSize);
-                for (let i = 0; i < vbSize; i++) {
-                    vb[i] = i;
-                }
-                renderCache.borderVB = engine.createVertexBuffer(vb);
-
-                let triCount = vbSize;
-                let rs = triCount / 2;
-                let ib = new Float32Array(triCount * 3);
-                for (let i = 0; i < rs; i++) {
-                    let r0 = i;
-                    let r1 = (i + 1) % rs;
-
-                    ib[i * 6 + 0] = rs + r1;
-                    ib[i * 6 + 1] = rs + r0;
-                    ib[i * 6 + 2] = r0;
-
-                    ib[i * 6 + 3] = r1;
-                    ib[i * 6 + 4] = rs + r1;
-                    ib[i * 6 + 5] = r0;
-                }
-
-                renderCache.borderIB = engine.createIndexBuffer(ib);
-                renderCache.borderIndicesCount = (triCount* 3);
-
-                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
-                if (ei) {
-                    renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-                }
-
-                // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
-                renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-            }
-
-            return renderCache;
-        }
-
-        protected createInstanceDataParts(): InstanceDataBase[] {
-            var res = new Array<InstanceDataBase>();
-            if (this.border) {
-                res.push(new Ellipse2DInstanceData(Shape2D.SHAPE2D_BORDERPARTID));
-            }
-            if (this.fill) {
-                res.push(new Ellipse2DInstanceData(Shape2D.SHAPE2D_FILLPARTID));
-            }
-            return res;
-        }
-
-        private static _riv0 = new Vector2(0,0);
-        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
-            if (!super.refreshInstanceDataPart(part)) {
-                return false;
-            }
-
-            //let s = Ellipse2D._riv0;
-            //this.getActualGlobalScaleToRef(s);
-
-            if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
-                let d = <Ellipse2DInstanceData>part;
-                let size = this.actualSize;
-                d.properties = new Vector3(size.width/* * s.x*/, size.height/* * s.y*/, this.subdivisions);
-            }
-            else if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
-                let d = <Ellipse2DInstanceData>part;
-                let size = this.actualSize;
-                d.properties = new Vector3(size.width/* * s.x*/, size.height/* * s.y*/, this.subdivisions);
-            }
-            return true;
-        }
-
-        private _subdivisions: number;
-    }
-}

canvas2D/src/Engine/babylon.modelRenderCache.ts

@@ -1,375 +0,0 @@
-module BABYLON {
-    export const enum ShaderDataType {
-        Vector2, Vector3, Vector4, float, Color3, Color4, Size
-    }
-
-    export class GroupInstanceInfo {
-        constructor(owner: Group2D, mrc: ModelRenderCache, partCount: number) {
-            this._partCount = partCount;
-            this._primCount = 0;
-            this.owner = owner;
-            this.modelRenderCache = mrc;
-            this.modelRenderCache.addRef();
-            this.partIndexFromId = new StringDictionary<number>();
-            this._usedShaderCategories = new Array<string>(partCount);
-            this._strides = new Array<number>(partCount);
-            this._opaqueData = null;
-            this._alphaTestData = null;
-            this._transparentData = null;
-            this.opaqueDirty = this.alphaTestDirty = this.transparentDirty = this.transparentOrderDirty = false;
-        }
-
-        public incPrimCount() {
-            ++this._primCount;
-        }
-
-        public dispose(): boolean {
-            if (this._isDisposed) {
-                return false;
-            }
-
-            // Disposed is called when a primitive instance is disposed, so we decrement the counter
-            --this._primCount;
-
-            // If the counter is still greater than 0 there's still other primitives using this GII
-            if (this._primCount > 0) {
-                return false;
-            }
-
-            // We're going to dispose this GII, first remove it from the dictionary
-            this.owner._renderableData._renderGroupInstancesInfo.remove(this.modelRenderCache.modelKey);
-
-            if (this.modelRenderCache) {
-                this.modelRenderCache.dispose();
-                this.modelRenderCache = null;
-            }
-
-            let engine = this.owner.owner.engine;
-
-            if (this._opaqueData) {
-                this._opaqueData.forEach(d => d.dispose(engine));
-                this._opaqueData = null;
-            }
-
-            if (this._alphaTestData) {
-                this._alphaTestData.forEach(d => d.dispose(engine));
-                this._alphaTestData = null;
-            }
-
-            if (this._transparentData) {
-                this._transparentData.forEach(d => d.dispose(engine));
-                this._transparentData = null;
-            }
-
-            this.partIndexFromId = null;
-            this._isDisposed = true;
-            return true;
-        }
-
-        public get isDisposed(): boolean {
-            return this._isDisposed;
-        }
-
-        private _isDisposed: boolean;
-        owner: Group2D;
-
-        modelRenderCache: ModelRenderCache;
-        partIndexFromId: StringDictionary<number>;
-
-        get hasOpaqueData(): boolean {
-            return this._opaqueData != null;
-        }
-
-        get hasAlphaTestData(): boolean {
-            return this._alphaTestData != null;
-        }
-
-        get hasTransparentData(): boolean {
-            return this._transparentData != null;
-        }
-
-        opaqueDirty: boolean;
-        get opaqueData(): GroupInfoPartData[] {
-            if (!this._opaqueData) {
-                this._opaqueData = new Array<GroupInfoPartData>(this._partCount);
-                for (let i = 0; i < this._partCount; i++) {
-                    this._opaqueData[i] = new GroupInfoPartData(this._strides[i]);
-                }
-            }
-            return this._opaqueData;
-        }
-
-        alphaTestDirty: boolean;
-        get alphaTestData(): GroupInfoPartData[] {
-            if (!this._alphaTestData) {
-                this._alphaTestData = new Array<GroupInfoPartData>(this._partCount);
-                for (let i = 0; i < this._partCount; i++) {
-                    this._alphaTestData[i] = new GroupInfoPartData(this._strides[i]);
-                }
-            }
-            return this._alphaTestData;
-        }
-
-        transparentOrderDirty: boolean;
-        transparentDirty: boolean;
-        get transparentData(): TransparentGroupInfoPartData[] {
-            if (!this._transparentData) {
-                this._transparentData = new Array<TransparentGroupInfoPartData>(this._partCount);
-                for (let i = 0; i < this._partCount; i++) {
-                    let zoff = this.modelRenderCache._partData[i]._zBiasOffset;
-                    this._transparentData[i] = new TransparentGroupInfoPartData(this._strides[i], zoff);
-                }
-            }
-            return this._transparentData;
-        }
-
-        sortTransparentData() {
-            if (!this.transparentOrderDirty) {
-                return;
-            }
-
-            for (let i = 0; i < this._transparentData.length; i++) {
-                let td = this._transparentData[i];
-                td._partData.sort();
-
-            }
-
-            this.transparentOrderDirty = false;
-        }
-
-        get usedShaderCategories(): string[] {
-            return this._usedShaderCategories;
-        }
-
-        get strides(): number[] {
-            return this._strides;
-        }
-
-        private _partCount: number;
-        private _primCount: number;
-        private _strides: number[];
-        private _usedShaderCategories: string[];
-        private _opaqueData: GroupInfoPartData[];
-        private _alphaTestData: GroupInfoPartData[];
-        private _transparentData: TransparentGroupInfoPartData[];
-    }
-
-    export class TransparentSegment {
-        constructor() {
-            this.groupInsanceInfo = null;
-            this.startZ = 0;
-            this.endZ = 0;
-            this.startDataIndex = Prim2DBase._bigInt;
-            this.endDataIndex = 0;
-            this.partBuffers = null;
-        }
-
-        dispose(engine: Engine) {
-            if (this.partBuffers) {
-                this.partBuffers.forEach(b => engine._releaseBuffer(b));
-                this.partBuffers.splice(0);
-                this.partBuffers = null;
-            }
-        }
-
-        groupInsanceInfo: GroupInstanceInfo;
-        startZ: number;
-        endZ: number;
-        startDataIndex: number;
-        endDataIndex: number;
-        partBuffers: WebGLBuffer[];
-    }
-
-    export class GroupInfoPartData {
-        _partData: DynamicFloatArray = null;
-        _partBuffer: WebGLBuffer     = null;
-        _partBufferSize: number      = 0;
-
-        constructor(stride: number) {
-            this._partData = new DynamicFloatArray(stride/4, 50);
-            this._isDisposed = false;
-        }
-
-        public dispose(engine: Engine): boolean {
-            if (this._isDisposed) {
-                return false;
-            }
-
-            if (this._partBuffer) {
-                engine._releaseBuffer(this._partBuffer);
-                this._partBuffer = null;
-            }
-
-            this._partData = null;
-
-            this._isDisposed = true;
-        }
-
-        private _isDisposed: boolean;        
-    }
-
-    export class TransparentGroupInfoPartData extends GroupInfoPartData {
-        constructor(stride: number, zoff: number) {
-            super(stride);
-            this._partData.compareValueOffset = zoff;
-            this._partData.sortingAscending = false;
-        }
-        
-    }
-
-    export class ModelRenderCache {
-        constructor(engine: Engine, modelKey: string) {
-            this._engine = engine;
-            this._modelKey = modelKey;
-            this._nextKey = 1;
-            this._refCounter = 1;
-            this._partData = null;
-        }
-
-        public dispose(): boolean {
-            if (--this._refCounter !== 0) {
-                return false;
-            }
-
-            // Remove the Model Render Cache from the global dictionary
-            let edata = this._engine.getExternalData<Canvas2DEngineBoundData>("__BJSCANVAS2D__");
-            if (edata) {
-                edata.DisposeModelRenderCache(this);
-            }
-
-            return true;
-        }
-
-        public get isDisposed(): boolean {
-            return this._refCounter <= 0;
-        }
-
-        public addRef(): number {
-            return ++this._refCounter;
-        }
-
-        public get modelKey(): string {
-            return this._modelKey;
-        }
-
-        public updateModelRenderCache(prim: Prim2DBase): boolean {
-            return false;
-        }
-
-        /**
-         * Render the model instances
-         * @param instanceInfo
-         * @param context
-         * @return must return true is the rendering succeed, false if the rendering couldn't be done (asset's not yet ready, like Effect)
-         */
-        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
-            return true;
-        }
-
-        protected getPartIndexFromId(partId: number) {
-            for (var i = 0; i < this._partData.length; i++) {
-                if (this._partData[i]._partId === partId) {
-                    return i;
-                }
-            }
-            return null;
-        }
-
-        protected loadInstancingAttributes(partId: number, effect: Effect): InstancingAttributeInfo[] {
-            let i = this.getPartIndexFromId(partId);
-            if (i === null) {
-                return null;
-            }
-
-            var ci = this._partsClassInfo[i];
-            var categories = this._partData[i]._partUsedCategories;
-            let res = ci.classContent.getInstancingAttributeInfos(effect, categories);
-
-            return res;
-        }
-
-        //setupUniformsLocation(effect: Effect, uniforms: string[], partId: number) {
-        //    let i = this.getPartIndexFromId(partId);
-        //    if (i === null) {
-        //        return null;
-        //    }
-
-        //    let pci = this._partsClassInfo[i];
-        //    pci.fullContent.forEach((k, v) => {
-        //        if (uniforms.indexOf(v.attributeName) !== -1) {
-        //            v.uniformLocation = effect.getUniform(v.attributeName);
-        //        }
-        //    });
-        //}
-
-        private static v2 = Vector2.Zero();
-        private static v3 = Vector3.Zero();
-        private static v4 = Vector4.Zero();
-
-        protected setupUniforms(effect: Effect, partIndex: number, data: DynamicFloatArray, elementCount: number) {
-            let pd = this._partData[partIndex];
-            let offset = (pd._partDataStride/4) * elementCount;
-            let pci = this._partsClassInfo[partIndex];
-
-            let self = this;
-            pci.fullContent.forEach((k, v) => {
-                if (!v.category || pd._partUsedCategories.indexOf(v.category) !== -1) {
-                    switch (v.dataType) {
-                        case ShaderDataType.float:
-                        {
-                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
-                            effect.setFloat(v.attributeName, data.buffer[offset + attribOffset]);
-                            break;
-                        }
-                        case ShaderDataType.Vector2:
-                        {
-                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
-                            ModelRenderCache.v2.x = data.buffer[offset + attribOffset + 0];
-                            ModelRenderCache.v2.y = data.buffer[offset + attribOffset + 1];
-                            effect.setVector2(v.attributeName, ModelRenderCache.v2);
-                            break;
-                        }
-                        case ShaderDataType.Color3:
-                        case ShaderDataType.Vector3:
-                        {
-                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
-                            ModelRenderCache.v3.x = data.buffer[offset + attribOffset + 0];
-                            ModelRenderCache.v3.y = data.buffer[offset + attribOffset + 1];
-                            ModelRenderCache.v3.z = data.buffer[offset + attribOffset + 2];
-                            effect.setVector3(v.attributeName, ModelRenderCache.v3);
-                            break;
-                        }
-                        case ShaderDataType.Color4:
-                        case ShaderDataType.Vector4:
-                        {
-                            let attribOffset = v.instanceOffset.get(pd._partJoinedUsedCategories);
-                            ModelRenderCache.v4.x = data.buffer[offset + attribOffset + 0];
-                            ModelRenderCache.v4.y = data.buffer[offset + attribOffset + 1];
-                            ModelRenderCache.v4.z = data.buffer[offset + attribOffset + 2];
-                            ModelRenderCache.v4.w = data.buffer[offset + attribOffset + 3];
-                            effect.setVector4(v.attributeName, ModelRenderCache.v4);
-                            break;
-                        }
-                        default:
-                    }
-                }
-            });
-        }
-
-        protected _engine: Engine;
-        private _modelKey: string;
-        private _nextKey: number;
-        private _refCounter: number;
-
-        _partData: ModelRenderCachePartData[];
-        _partsClassInfo: ClassTreeInfo<InstanceClassInfo, InstancePropInfo>[];
-    }
-
-    export class ModelRenderCachePartData {
-        _partId: number;
-        _zBiasOffset: number;
-        _partDataStride: number;
-        _partUsedCategories: string[];
-        _partJoinedUsedCategories: string;
-    }
-}

canvas2D/src/Engine/babylon.primitiveCollisionManager.ts

@@ -1,730 +0,0 @@
-module BABYLON {
-
-    /**
-     * The base class for all implementation of a Primitive Collision Manager
-     */
-    export abstract class PrimitiveCollisionManagerBase {
-        constructor(owner: Canvas2D) {
-            this._owner = owner;
-        }
-
-        abstract _addActor(actor: Prim2DBase, deep: boolean): ActorInfoBase;
-        abstract _removeActor(actor: Prim2DBase);
-
-        abstract _update();
-
-        /**
-         * If collisionManagerUseBorders is true during the Canvas creation, this dictionary contains all the primitives intersecting with the left border
-         */
-        abstract get leftBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase>;
-
-        /**
-         * If collisionManagerUseBorders is true during the Canvas creation, this dictionary contains all the primitives intersecting with the bottom border
-         */
-        abstract get bottomBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase>;
-
-        /**
-         * If collisionManagerUseBorders is true during the Canvas creation, this dictionary contains all the primitives intersecting with the right border
-         */
-        abstract get rightBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase>;
-
-        /**
-         * If collisionManagerUseBorders is true during the Canvas creation, this dictionary contains all the primitives intersecting with the top border
-         */
-        abstract get topBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase>;
-
-        /**
-         * This dictionary contains all the couple of intersecting primitives
-         */
-        abstract get intersectedActors(): ObservableStringDictionary<{ a: Prim2DBase, b: Prim2DBase }>;
-
-        /**
-         * Renders the World AABB of all Actors
-         */
-        abstract get debugRenderAABB(): boolean;
-        abstract set debugRenderAABB(val: boolean);
-
-        /**
-         * Renders the area of the Clusters
-         */
-        abstract get debugRenderClusters(): boolean;
-        abstract set debugRenderClusters(val: boolean);
-
-        /**
-         * Display stats about the PCM on screen
-         */
-        abstract get debugStats(): boolean;
-        abstract set debugStats(val: boolean);
-
-        public static allocBasicPCM(owner: Canvas2D, enableBorders: boolean): PrimitiveCollisionManagerBase {
-            return new BasicPrimitiveCollisionManager(owner, enableBorders);
-        }
-
-        protected _owner: Canvas2D;
-    }
-
-    /**
-     * Base class of an Actor
-     */
-    export abstract class ActorInfoBase {
-        /**
-         * Access the World AABB of the Actor, the vector4 is x:left, y: bottom, z: right, w: top
-         */
-        abstract get worldAABB(): Vector4;
-
-        /**
-         * Return true if the actor is enable, false otherwise
-         */
-        abstract get isEnabled(): boolean;
-
-        /**
-         * Return true is the actor boundingInfo is use, false if its levelBoundingInfo is used.
-         */
-        abstract get isDeep(): boolean;
-
-        /**
-         * Return the primitive of the actor
-         */
-        abstract get prim(): Prim2DBase;
-
-        /**
-         * Return a dictionary containing all the actors intersecting with this one
-         */
-        abstract get intersectWith(): ObservableStringDictionary<ActorInfoBase>;
-    }
-
-    class ActorInfo extends ActorInfoBase {
-        constructor(owner: BasicPrimitiveCollisionManager, actor: Prim2DBase, deep: boolean) {
-            super();
-            this.owner = owner;
-            this.prim = actor;
-            this.flags = 0;
-            this.presentInClusters = new StringDictionary<ClusterInfo>();
-            this.intersectWith = new ObservableStringDictionary<ActorInfo>(false);
-            this.setFlags((deep ? ActorInfo.flagDeep : 0) | ActorInfo.flagDirty);
-
-            let bi = (deep ? actor.boundingInfo : actor.levelBoundingInfo);
-
-            // Dirty Actor if its WorldAABB changed
-            bi.worldAABBDirtyObservable.add((e, d) => {
-                this.owner.actorDirty(this);
-            });
-
-            // Dirty Actor if it's getting enabled/disabled
-            actor.propertyChanged.add((e, d) => {
-                if (d.mask === -1) {
-                    return;
-                }
-                this.setFlagsValue(ActorInfo.flagEnabled, e.newValue === true);
-                this.owner.actorDirty(this);
-            }, Prim2DBase.isVisibleProperty.flagId);
-        }
-
-        setFlags(flags: number) {
-            this.flags |= flags;
-        }
-
-        clearFlags(flags: number) {
-            this.flags &= ~flags;
-        }
-
-        isAllFlagsSet(flags: number) {
-            return (this.flags & flags) === flags;
-        }
-
-        isSomeFlagsSet(flags: number) {
-            return (this.flags & flags) !== 0;
-        }
-
-        setFlagsValue(flags: number, value: boolean) {
-            if (value) {
-                this.flags |= flags;
-            } else {
-                this.flags &= ~flags;
-            }
-        }
-
-        get worldAABB(): Vector4 {
-            return (this.isSomeFlagsSet(ActorInfo.flagDeep) ? this.prim.boundingInfo : this.prim.levelBoundingInfo).worldAABB;
-        }
-
-        get isEnabled(): boolean {
-            return this.isSomeFlagsSet(ActorInfo.flagEnabled);
-        }
-
-        get isDeep(): boolean {
-            return this.isSomeFlagsSet(ActorInfo.flagDeep);
-        }
-
-        get isDirty(): boolean {
-            return this.isSomeFlagsSet(ActorInfo.flagDirty);
-        }
-
-        get isRemoved(): boolean {
-            return this.isSomeFlagsSet(ActorInfo.flagRemoved);
-        }
-
-        prim: Prim2DBase;
-        flags: number;
-        owner: BasicPrimitiveCollisionManager;
-        presentInClusters: StringDictionary<ClusterInfo>;
-        intersectWith: ObservableStringDictionary<ActorInfoBase>;
-
-        public static flagDeep       = 0x0001;      // set if the actor boundingInfo must be used instead of the levelBoundingInfo
-        public static flagEnabled    = 0x0002;      // set if the actor is enabled and should be considered for intersection tests
-        public static flagDirty      = 0x0004;      // set if the actor's AABB is dirty
-        public static flagRemoved    = 0x0008;      // set if the actor was removed from the PCM
-    }
-
-    class ClusterInfo {
-        constructor() {
-            this.actors = new StringDictionary<ActorInfo>();
-        }
-
-        clear() {
-            this.actors.clear();
-        }
-
-        actors: StringDictionary<ActorInfo>;
-    }
-
-    class BasicPrimitiveCollisionManager extends PrimitiveCollisionManagerBase {
-
-        constructor(owner: Canvas2D, enableBorders: boolean) {
-            super(owner);
-            this._actors = new StringDictionary<ActorInfo>();
-            this._dirtyActors = new StringDictionary<ActorInfo>();
-            this._clusters = null;
-            this._maxActorByCluster = 0;
-            this._AABBRenderPrim = null;
-            this._canvasSize = Size.Zero();
-            this._ClusterRenderPrim = null;
-            this._debugTextBackground = null;
-            this._clusterDirty = true;
-            this._clusterSize = new Size(2, 2);
-            this._clusterStep = Vector2.Zero();
-            this._lastClusterResizeCounter = 0;
-            this._freeClusters = new Array<ClusterInfo>();
-            this._enableBorder = enableBorders;
-            this._debugUpdateOpCount = new PerfCounter();
-            this._debugUpdateTime = new PerfCounter();
-            this._intersectedActors = new ObservableStringDictionary<{ a: Prim2DBase; b: Prim2DBase }>(false);
-            this._borderIntersecteddActors = new Array<ObservableStringDictionary<Prim2DBase>>(4);
-            for (let j = 0; j < 4; j++) {
-                this._borderIntersecteddActors[j] = new ObservableStringDictionary<Prim2DBase>(false);
-            }
-            let flagId = Canvas2D.actualSizeProperty.flagId;
-
-            if (!BasicPrimitiveCollisionManager.WAABBCorners) {
-                BasicPrimitiveCollisionManager.WAABBCorners = new Array<Vector2>(4);
-                for (let i = 0; i < 4; i++) {
-                    BasicPrimitiveCollisionManager.WAABBCorners[i] = Vector2.Zero();
-                }
-                BasicPrimitiveCollisionManager.WAABBCornersCluster = new Array<Vector2>(4);
-                for (let i = 0; i < 4; i++) {
-                    BasicPrimitiveCollisionManager.WAABBCornersCluster[i] = Vector2.Zero();
-                }
-            }
-
-            owner.propertyChanged.add((e: PropertyChangedInfo, d) => {
-                if (d.mask === -1) {
-                    return;
-                }
-                this._clusterDirty = true;
-                console.log("canvas size changed");
-            }, flagId);
-
-            this.debugRenderAABB = false;
-            this.debugRenderClusters = false;
-            this.debugStats = false;
-        }
-
-        _addActor(actor: Prim2DBase, deep: boolean): ActorInfoBase {
-            return this._actors.getOrAddWithFactory(actor.uid, () => {
-                let ai = new ActorInfo(this, actor, deep);
-                this.actorDirty(ai);
-                return ai;
-            });
-        }
-
-        _removeActor(actor: Prim2DBase) {
-            let ai = this._actors.getAndRemove(actor.uid);
-            ai.setFlags(ActorInfo.flagRemoved);
-            this.actorDirty(ai);
-        }
-
-        actorDirty(actor: ActorInfo) {
-            actor.setFlags(ActorInfo.flagDirty);
-            this._dirtyActors.add(actor.prim.uid, actor);
-        }
-
-        _update() {
-            this._canvasSize.copyFrom(this._owner.actualSize);
-
-            // Should we update the WireFrame2D Primitive that displays the WorldAABB ?
-            if (this.debugRenderAABB) {
-                if (this._dirtyActors.count > 0 || this._debugRenderAABBDirty) {
-                    this._updateAABBDisplay();
-                }
-            }
-            if (this._AABBRenderPrim) {
-                this._AABBRenderPrim.levelVisible = this.debugRenderAABB;
-            }
-
-            let cw = this._clusterSize.width;
-            let ch = this._clusterSize.height;
-
-            // Check for Cluster resize
-            if (((this._clusterSize.width < 16 && this._clusterSize.height < 16 && this._maxActorByCluster >= 10) ||
-                 (this._clusterSize.width > 2 && this._clusterSize.height > 2 && this._maxActorByCluster <= 7)) &&
-                this._lastClusterResizeCounter > 100) {
-
-                if (this._maxActorByCluster >= 10) {
-                    ++cw;
-                    ++ch;
-                } else {
-                    --cw;
-                    --ch;
-                }
-                console.log(`Change cluster size to ${cw}:${ch}, max actor ${this._maxActorByCluster}`);
-                this._clusterDirty = true;
-            }
-
-            // Should we update the WireFrame2D Primitive that displays the clusters
-            if (this.debugRenderClusters && this._clusterDirty) {
-                this._updateClusterDisplay(cw, ch);
-            }
-            if (this._ClusterRenderPrim) {
-                this._ClusterRenderPrim.levelVisible = this.debugRenderClusters;
-            }
-
-
-            let updateStats = this.debugStats && (this._dirtyActors.count > 0 || this._clusterDirty);
-
-            this._debugUpdateTime.beginMonitoring();
-
-            // If the Cluster Size changed: rebuild it and add all actors. Otherwise add only new (dirty) actors
-            if (this._clusterDirty) {
-                this._initializeCluster(cw, ch);
-                this._rebuildAllActors();
-            } else {
-                this._rebuildDirtyActors();
-                ++this._lastClusterResizeCounter;
-            }
-
-            // Proceed to the collision detection between primitives
-            this._collisionDetection();
-
-            this._debugUpdateTime.endMonitoring();
-
-            if (updateStats) {
-                this._updateDebugStats();
-            }
-
-            if (this._debugTextBackground) {
-                this._debugTextBackground.levelVisible = updateStats;
-            }
-
-            // Reset the dirty actor list: everything is processed
-            this._dirtyActors.clear();
-        }
-
-        /**
-         * Renders the World AABB of all Actors
-         */
-        public get debugRenderAABB(): boolean {
-            return this._debugRenderAABB;
-        }
-
-        public set debugRenderAABB(val: boolean) {
-            if (this._debugRenderAABB === val) {
-                return;
-            }
-
-            this._debugRenderAABB = val;
-            this._debugRenderAABBDirty = true;
-        }
-
-        /**
-         * Renders the area of the Clusters
-         */
-        public debugRenderClusters: boolean;
-
-        /**
-         * Display stats about the PCM on screen
-         */
-        public debugStats: boolean;
-
-        get intersectedActors(): ObservableStringDictionary<{ a: Prim2DBase; b: Prim2DBase }> {
-            return this._intersectedActors;
-        }
-
-        get leftBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase> {
-            return this._borderIntersecteddActors[0];
-        }
-
-        get bottomBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase> {
-            return this._borderIntersecteddActors[1];
-        }
-
-        get rightBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase> {
-            return this._borderIntersecteddActors[2];
-        }
-
-        get topBorderIntersectedActors(): ObservableStringDictionary<Prim2DBase> {
-            return this._borderIntersecteddActors[3];
-        }
-
-        private _initializeCluster(countW: number, countH: number) {
-            // Check for free
-            if (this._clusters) {
-                for (let w = 0; w < this._clusterSize.height; w++) {
-                    for (let h = 0; h < this._clusterSize.width; h++) {
-                        this._freeClusterInfo(this._clusters[w][h]);
-                    }
-                }
-            }
-
-            // Allocate
-            this._clusterSize.copyFromFloats(countW, countH);
-            this._clusters = [];
-            for (let w = 0; w < this._clusterSize.height; w++) {
-                this._clusters[w] = [];
-                for (let h = 0; h < this._clusterSize.width; h++) {
-                    let ci = this._allocClusterInfo();
-                    this._clusters[w][h] = ci;
-                }
-            }
-
-            this._clusterStep.copyFromFloats(this._owner.actualWidth / countW, this._owner.actualHeight / countH);
-            this._maxActorByCluster = 0;
-            this._lastClusterResizeCounter = 0;
-
-            this._clusterDirty = false;
-        }
-
-        private _rebuildAllActors() {
-            this._actors.forEach((k, ai) => {
-                this._processActor(ai);
-            });
-        }
-
-        private _rebuildDirtyActors() {
-            this._dirtyActors.forEach((k, ai) => {
-                this._processActor(ai);
-            });
-        }
-
-        static WAABBCorners: Array<Vector2> = null;
-        static WAABBCornersCluster: Array<Vector2> = null;
-
-        private _processActor(actor: ActorInfo) {
-            // Check if the actor is being disabled or removed
-            if (!actor.isEnabled || actor.isRemoved) {
-                actor.presentInClusters.forEach((k, ci) => {
-                    ci.actors.remove(actor.prim.uid);
-                });
-                actor.presentInClusters.clear();
-                return;
-            }
-
-            let wab = actor.worldAABB;
-
-            // Build the worldAABB corners
-            let wac = BasicPrimitiveCollisionManager.WAABBCorners;
-            wac[0].copyFromFloats(wab.x, wab.y); // Bottom/Left
-            wac[1].copyFromFloats(wab.z, wab.y); // Bottom/Right
-            wac[2].copyFromFloats(wab.z, wab.w); // Top/Right
-            wac[3].copyFromFloats(wab.x, wab.w); // Top/Left
-
-            let cs = this._clusterStep;
-            let wacc = BasicPrimitiveCollisionManager.WAABBCornersCluster;
-            for (let i = 0; i < 4; i++) {
-                let p = wac[i];
-                let cx = (p.x - (p.x % cs.x)) / cs.x;
-                let cy = (p.y - (p.y % cs.y)) / cs.y;
-                wacc[i].copyFromFloats(Math.floor(cx), Math.floor(cy));
-            }
-
-            let opCount = 0;
-            let totalClusters = 0;
-            let newCI = new Array<ClusterInfo>();
-            let sx = Math.max(0, wacc[0].x);                              // Start Cluster X
-            let sy = Math.max(0, wacc[0].y);                              // Start Cluster Y
-            let ex = Math.min(this._clusterSize.width - 1,  wacc[2].x);   // End Cluster X
-            let ey = Math.min(this._clusterSize.height - 1, wacc[2].y);   // End Cluster Y
-
-            if (this._enableBorder) {
-                if (wac[0].x < 0) {
-                    this._borderIntersecteddActors[0].add(actor.prim.uid, actor.prim);
-                } else {
-                    this._borderIntersecteddActors[0].remove(actor.prim.uid);
-                }
-                if (wac[0].y < 0) {
-                    this._borderIntersecteddActors[1].add(actor.prim.uid, actor.prim);
-                } else {
-                    this._borderIntersecteddActors[1].remove(actor.prim.uid);
-                }
-                if (wac[2].x >= this._canvasSize.width) {
-                    this._borderIntersecteddActors[2].add(actor.prim.uid, actor.prim);
-                } else {
-                    this._borderIntersecteddActors[2].remove(actor.prim.uid);
-                }
-                if (wac[2].y >= this._canvasSize.height) {
-                    this._borderIntersecteddActors[3].add(actor.prim.uid, actor.prim);
-                } else {
-                    this._borderIntersecteddActors[3].remove(actor.prim.uid);
-                }
-            }
-
-            for (var y = sy; y <= ey; y++) {
-                for (let x = sx; x <= ex; x++) {
-                    let k = `${x}:${y}`;
-                    let cx = x, cy = y;
-                    let ci = actor.presentInClusters.getOrAddWithFactory(k,
-                        (k) => {
-                            let nci = this._getCluster(cx, cy);
-                            nci.actors.add(actor.prim.uid, actor);
-                            this._maxActorByCluster = Math.max(this._maxActorByCluster, nci.actors.count);
-                            ++opCount;
-                            ++totalClusters;
-                            return nci;
-                        });
-                    newCI.push(ci);
-                }
-            }
-
-            // Check if there were no change
-            if (opCount === 0 && actor.presentInClusters.count === totalClusters) {
-                return;
-            }
-
-            // Build the array of the cluster where the actor is no longer in
-            let clusterToRemove = new Array<string>();
-            actor.presentInClusters.forEach((k, ci) => {
-                if (newCI.indexOf(ci) === -1) {
-                    clusterToRemove.push(k);
-                    // remove the primitive from the Cluster Info object
-                    ci.actors.remove(actor.prim.uid);
-                }
-            });
-
-            // Remove these clusters from the actor's dictionary
-            for (let key of clusterToRemove) {
-                actor.presentInClusters.remove(key);
-            }
-        }
-
-        private static CandidatesActors = new StringDictionary<ActorInfoBase>();
-        private static PreviousIntersections = new StringDictionary<ActorInfoBase>();
-
-        // The algorithm is simple, we have previously partitioned the Actors in the Clusters: each actor has a list of the Cluster(s) it's inside.
-        // Then for a given Actor that is dirty we evaluate the intersection with all the other actors present in the same Cluster(s)
-        // So it's basically O(n²), BUT only inside a Cluster and only for dirty Actors.
-        private _collisionDetection() {
-            let hash = BasicPrimitiveCollisionManager.CandidatesActors;
-            let prev = BasicPrimitiveCollisionManager.PreviousIntersections;
-            let opCount = 0;
-
-            this._dirtyActors.forEach((k1, ai1) => {
-                ++opCount;
-
-                // Build the list of candidates
-                hash.clear();
-                ai1.presentInClusters.forEach((k, ci) => {
-                    ++opCount;
-                    ci.actors.forEach((k, v) => hash.add(k, v));
-                });
-
-                let wab1 = ai1.worldAABB;
-
-                // Save the previous intersections
-                prev.clear();
-                prev.copyFrom(ai1.intersectWith);
-
-                ai1.intersectWith.clear();
-
-                // For each candidate
-                hash.forEach((k2, ai2) => {
-                    ++opCount;
-
-                    // Check if we're testing against itself
-                    if (k1 === k2) {
-                        return;
-                    }
-
-                    let wab2 = ai2.worldAABB;
-                     
-                    if (wab2.z >= wab1.x && wab2.x <= wab1.z && wab2.w >= wab1.y && wab2.y <= wab1.w) {
-
-                        if (ai1.prim.intersectOtherPrim(ai2.prim)) {
-                            ++opCount;
-                            ai1.intersectWith.add(k2, ai2);
-
-                            if (k1 < k2) {
-                                this._intersectedActors.add(`${k1};${k2}`, { a: ai1.prim, b: ai2.prim });
-                            } else {
-                                this._intersectedActors.add(`${k2};${k1}`, { a: ai2.prim, b: ai1.prim });
-                            }
-                        }
-                    }
-                });
-
-                // Check and remove the associations that no longer exist in the main intersection list
-                prev.forEach((k, ai) => {
-                    if (!ai1.intersectWith.contains(k)) {
-                        ++opCount;
-                        this._intersectedActors.remove(`${k<k1 ? k : k1};${k<k1 ? k1 : k}`);
-                    }
-                });
-
-            });
-
-            this._debugUpdateOpCount.fetchNewFrame();
-            this._debugUpdateOpCount.addCount(opCount, true);
-        }
-
-        private _getCluster(x: number, y: number): ClusterInfo {
-            return this._clusters[x][y];
-        }
-
-        private _updateDebugStats() {
-
-            let format = (v: number) => (Math.round(v*100)/100).toString();
-            let txt =   `Primitive Collision Stats\n` + 
-                        ` - PCM Execution Time: ${format(this._debugUpdateTime.lastSecAverage)}ms\n` +
-                        ` - Operation Count: ${format(this._debugUpdateOpCount.current)}, (avg:${format(this._debugUpdateOpCount.lastSecAverage)}, t:${format(this._debugUpdateOpCount.total)})\n` +
-                        ` - Max Actor per Cluster: ${this._maxActorByCluster}\n` +
-                        ` - Intersections count: ${this.intersectedActors.count}`;
-
-            if (!this._debugTextBackground) {
-
-                this._debugTextBackground = new Rectangle2D({
-                    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" })
-                    ]
-                });
-                    
-            } else {
-                this._debugTextBackground.levelVisible = true;
-                let text2d = this._debugTextBackground.children[0] as Text2D;
-                text2d.text = txt;
-            }
-        }
-
-        private _updateAABBDisplay() {
-            let g = new WireFrameGroup2D("main", new Color4(0.5, 0.8, 1.0, 1.0));
-
-            let v = Vector2.Zero();
-
-            this._actors.forEach((k, ai) => {
-                if (ai.isEnabled) {
-                    let ab = ai.worldAABB;
-
-                    v.x = ab.x;
-                    v.y = ab.y;
-                    g.startLineStrip(v);
-
-                    v.x = ab.z;
-                    g.pushVertex(v);
-
-                    v.y = ab.w;
-                    g.pushVertex(v);
-
-                    v.x = ab.x;
-                    g.pushVertex(v);
-
-                    v.y = ab.y;
-                    g.endLineStrip(v);
-                }
-            });
-
-            if (!this._AABBRenderPrim) {
-                this._AABBRenderPrim = new WireFrame2D([g], { parent: this._owner, alignToPixel: true, id: "###DEBUG PCM AABB###" });
-            } else {
-                this._AABBRenderPrim.wireFrameGroups.set("main", g);
-                this._AABBRenderPrim.wireFrameGroupsDirty();
-            }
-
-            this._debugRenderAABBDirty = false;
-        }
-
-        private _updateClusterDisplay(cw: number, ch: number) {
-            let g = new WireFrameGroup2D("main", new Color4(0.8, 0.1, 0.5, 1.0));
-
-            let v1 = Vector2.Zero();
-            let v2 = Vector2.Zero();
-
-            // Vertical lines
-            let step = (this._owner.actualWidth-1) / cw;
-            v1.y = 0;
-            v2.y = this._owner.actualHeight;
-            for (let x = 0; x <= cw; x++) {
-                g.pushVertex(v1);
-                g.pushVertex(v2);
-
-                v1.x += step;
-                v2.x += step;
-            }
-
-            // Horizontal lines
-            step = (this._owner.actualHeight-1) / ch;
-            v1.x = v1.y = v2.y = 0;
-            v2.x = this._owner.actualWidth;
-            for (let y = 0; y <= ch; y++) {
-                g.pushVertex(v1);
-                g.pushVertex(v2);
-
-                v1.y += step;
-                v2.y += step;
-            }
-
-            if (!this._ClusterRenderPrim) {
-                this._ClusterRenderPrim = new WireFrame2D([g], { parent: this._owner, alignToPixel: true, id: "###DEBUG PCM Clusters###" });
-            } else {
-                this._ClusterRenderPrim.wireFrameGroups.set("main", g);
-                this._ClusterRenderPrim.wireFrameGroupsDirty();
-            }
-        }
-
-        // Basically: we don't want to spend our time playing with the GC each time the Cluster Array is rebuilt, so we keep a list of available
-        //  ClusterInfo object and we have two method to allocate/free them. This way we always deal with the same objects.
-        // The free array never shrink, always grows...For the better...and the worst!
-        private _allocClusterInfo(): ClusterInfo {
-            if (this._freeClusters.length === 0) {
-                for (let i = 0; i < 8; i++) {
-                    this._freeClusters.push(new ClusterInfo());
-                }
-            }
-
-            return this._freeClusters.pop();
-        }
-
-        private _freeClusterInfo(ci: ClusterInfo) {
-            ci.clear();
-            this._freeClusters.push(ci);
-        }
-
-        private _canvasSize: Size;
-        private _clusterDirty: boolean;
-        private _clusterSize: Size;
-        private _clusterStep: Vector2;
-        private _clusters: ClusterInfo[][];
-        private _maxActorByCluster: number;
-        private _lastClusterResizeCounter: number;
-        private _actors: StringDictionary<ActorInfo>;
-        private _dirtyActors: StringDictionary<ActorInfo>;
-
-        private _freeClusters: Array<ClusterInfo>;
-        private _enableBorder: boolean;
-        private _intersectedActors: ObservableStringDictionary<{ a: Prim2DBase; b: Prim2DBase }>;
-        private _borderIntersecteddActors: ObservableStringDictionary<Prim2DBase>[];
-        private _debugUpdateOpCount: PerfCounter;
-        private _debugUpdateTime: PerfCounter;
-        private _debugRenderAABB: boolean;
-        private _debugRenderAABBDirty: boolean;
-        private _AABBRenderPrim: WireFrame2D;
-        private _ClusterRenderPrim: WireFrame2D;
-        private _debugTextBackground: Rectangle2D;
-    }
-}

canvas2D/src/Engine/babylon.rectangle2d.ts

@@ -1,615 +0,0 @@
-module BABYLON {
-    export class Rectangle2DRenderCache extends ModelRenderCache {
-        effectsReady: boolean                               = false;
-        fillVB: WebGLBuffer                                 = null;
-        fillIB: WebGLBuffer                                 = null;
-        fillIndicesCount: number                            = 0;
-        instancingFillAttributes: InstancingAttributeInfo[] = null;
-        effectFill: Effect                                  = null;
-        effectFillInstanced: Effect                         = null;
-
-        borderVB: WebGLBuffer                                 = null;
-        borderIB: WebGLBuffer                                 = null;
-        borderIndicesCount: number                            = 0;
-        instancingBorderAttributes: InstancingAttributeInfo[] = null;
-        effectBorder: Effect                                  = null;
-        effectBorderInstanced: Effect                         = null;
-
-        constructor(engine: Engine, modelKey: string) {
-            super(engine, modelKey);
-        }
-
-        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
-            // Do nothing if the shader is still loading/preparing 
-            if (!this.effectsReady) {
-                if ((this.effectFill && (!this.effectFill.isReady() || (this.effectFillInstanced && !this.effectFillInstanced.isReady()))) ||
-                    (this.effectBorder && (!this.effectBorder.isReady() || (this.effectBorderInstanced && !this.effectBorderInstanced.isReady())))) {
-                    return false;
-                }
-                this.effectsReady = true;
-            }
-
-            let canvas = instanceInfo.owner.owner;
-            var engine = canvas.engine;
-
-            let depthFunction = 0;
-            if (this.effectFill && this.effectBorder) {
-                depthFunction = engine.getDepthFunction();
-                engine.setDepthFunctionToLessOrEqual();
-            }
-
-            var curAlphaMode = engine.getAlphaMode();
-
-            if (this.effectFill) {
-                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_FILLPARTID.toString());
-                let pid = context.groupInfoPartData[partIndex];
-
-                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
-                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
-                }
-
-                let effect = context.useInstancing ? this.effectFillInstanced : this.effectFill;
-
-                engine.enableEffect(effect);
-                engine.bindBuffersDirectly(this.fillVB, this.fillIB, [1], 4, effect);
-                if (context.useInstancing) {
-                    if (!this.instancingFillAttributes) {
-                        this.instancingFillAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_FILLPARTID, effect);
-                    }
-
-                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
-                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
-                    canvas._addDrawCallCount(1, context.renderMode);
-                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingFillAttributes);
-                    engine.draw(true, 0, this.fillIndicesCount, count);
-                    engine.unbindInstanceAttributes();
-                } else {
-                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
-                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
-                        this.setupUniforms(effect, partIndex, pid._partData, i);
-                        engine.draw(true, 0, this.fillIndicesCount);                        
-                    }
-                }
-            }
-
-            if (this.effectBorder) {
-                let partIndex = instanceInfo.partIndexFromId.get(Shape2D.SHAPE2D_BORDERPARTID.toString());
-                let pid = context.groupInfoPartData[partIndex];
-
-                if (context.renderMode !== Render2DContext.RenderModeOpaque) {
-                    engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
-                }
-
-                let effect = context.useInstancing ? this.effectBorderInstanced : this.effectBorder;
-
-                engine.enableEffect(effect);
-                engine.bindBuffersDirectly(this.borderVB, this.borderIB, [1], 4, effect);
-                if (context.useInstancing) {
-                    if (!this.instancingBorderAttributes) {
-                        this.instancingBorderAttributes = this.loadInstancingAttributes(Shape2D.SHAPE2D_BORDERPARTID, effect);
-                    }
-
-                    let glBuffer = context.instancedBuffers ? context.instancedBuffers[partIndex] : pid._partBuffer;
-                    let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
-                    canvas._addDrawCallCount(1, context.renderMode);
-                    engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingBorderAttributes);
-                    engine.draw(true, 0, this.borderIndicesCount, count);
-                    engine.unbindInstanceAttributes();
-                } else {
-                    canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
-                    for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
-                        this.setupUniforms(effect, partIndex, pid._partData, i);
-                        engine.draw(true, 0, this.borderIndicesCount);
-                    }
-                }
-            }
-
-            engine.setAlphaMode(curAlphaMode, true);
-
-            if (this.effectFill && this.effectBorder) {
-                engine.setDepthFunction(depthFunction);
-            }
-            return true;
-        }
-
-        public dispose(): boolean {
-            if (!super.dispose()) {
-                return false;
-            }
-
-            if (this.fillVB) {
-                this._engine._releaseBuffer(this.fillVB);
-                this.fillVB = null;
-            }
-
-            if (this.fillIB) {
-                this._engine._releaseBuffer(this.fillIB);
-                this.fillIB = null;
-            }
-
-            this.effectFill = null;
-            this.effectFillInstanced = null;
-            this.effectBorder = null;
-            this.effectBorderInstanced = null;
-
-            if (this.borderVB) {
-                this._engine._releaseBuffer(this.borderVB);
-                this.borderVB = null;
-            }
-
-            if (this.borderIB) {
-                this._engine._releaseBuffer(this.borderIB);
-                this.borderIB = null;
-            }
-
-
-            return true;
-        }
-    }
-
-    export class Rectangle2DInstanceData extends Shape2DInstanceData {
-        constructor(partId: number) {
-            super(partId, 1);
-        }
-
-        @instanceData()
-        get properties(): Vector3 {
-            return null;
-        }
-        set properties(value: Vector3) {
-        }
-    }
-
-    @className("Rectangle2D", "BABYLON")
-    /**
-     * The Rectangle Primitive type
-     */
-    export class Rectangle2D extends Shape2D {
-
-        public static actualSizeProperty: Prim2DPropInfo;
-        public static notRoundedProperty: Prim2DPropInfo;
-        public static roundRadiusProperty: Prim2DPropInfo;
-
-        @modelLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 2, pi => Rectangle2D.notRoundedProperty = pi)
-        /**
-         * Get if the rectangle is notRound (returns true) or rounded (returns false).
-         * Don't use the setter, it's for internal purpose only
-         */
-        public get notRounded(): boolean {
-            return this._notRounded;
-        }
-
-        public set notRounded(value: boolean) {
-            this._notRounded = value;
-        }
-
-        @instanceLevelProperty(Shape2D.SHAPE2D_PROPCOUNT + 3, pi => Rectangle2D.roundRadiusProperty = pi)
-        /**
-         * Get/set the round Radius, a value of 0 for a sharp edges rectangle, otherwise the value will be used as the diameter of the round to apply on corder. The Rectangle2D.notRounded property will be updated accordingly.
-         */
-        public get roundRadius(): number {
-            return this._roundRadius;
-        }
-
-        public set roundRadius(value: number) {
-            this._roundRadius = value;
-            this.notRounded = value === 0;
-            this._positioningDirty();
-        }
-
-        private static _i0 = Vector2.Zero();
-        private static _i1 = Vector2.Zero();
-        private static _i2 = Vector2.Zero();
-
-        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
-            // If we got there it mean the boundingInfo intersection succeed, if the rectangle has not roundRadius, it means it succeed!
-            if (this.notRounded) {
-                return true;
-            }
-
-            // If we got so far it means the bounding box at least passed, so we know it's inside the bounding rectangle, but it can be outside the roundedRectangle.
-            // The easiest way is to check if the point is inside on of the four corners area (a little square of roundRadius size at the four corners)
-            // If it's the case for one, check if the mouse is located in the quarter that we care about (the one who is visible) then finally make a distance check with the roundRadius radius to see if it's inside the circle quarter or outside.
-
-            // First let remove the origin out the equation, to have the rectangle with an origin at bottom/left
-            let size = this.size;
-            Rectangle2D._i0.x = intersectInfo._localPickPosition.x;
-            Rectangle2D._i0.y = intersectInfo._localPickPosition.y;
-
-            let rr = this.roundRadius;
-            let rrs = rr * rr;
-
-            // Check if the point is in the bottom/left quarter area
-            Rectangle2D._i1.x = rr;
-            Rectangle2D._i1.y = rr;
-            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
-                // Compute the intersection point in the quarter local space
-                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
-                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
-
-                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
-                return Rectangle2D._i2.lengthSquared() <= rrs;
-            }
-
-            // Check if the point is in the top/left quarter area
-            Rectangle2D._i1.x = rr;
-            Rectangle2D._i1.y = size.height - rr;
-            if (Rectangle2D._i0.x <= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
-                // Compute the intersection point in the quarter local space
-                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
-                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
-
-                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
-                return Rectangle2D._i2.lengthSquared() <= rrs;
-            }
-
-            // Check if the point is in the top/right quarter area
-            Rectangle2D._i1.x = size.width - rr;
-            Rectangle2D._i1.y = size.height - rr;
-            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y >= Rectangle2D._i1.y) {
-                // Compute the intersection point in the quarter local space
-                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
-                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
-
-                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
-                return Rectangle2D._i2.lengthSquared() <= rrs;
-            }
-
-
-            // Check if the point is in the bottom/right quarter area
-            Rectangle2D._i1.x = size.width - rr;
-            Rectangle2D._i1.y = rr;
-            if (Rectangle2D._i0.x >= Rectangle2D._i1.x && Rectangle2D._i0.y <= Rectangle2D._i1.y) {
-                // Compute the intersection point in the quarter local space
-                Rectangle2D._i2.x = Rectangle2D._i0.x - Rectangle2D._i1.x;
-                Rectangle2D._i2.y = Rectangle2D._i0.y - Rectangle2D._i1.y;
-
-                // It's a hit if the squared distance is less/equal to the squared radius of the round circle
-                return Rectangle2D._i2.lengthSquared() <= rrs;
-            }
-
-            // At any other locations the point is guarantied to be inside
-
-            return true;
-        }
-
-        protected updateLevelBoundingInfo(): boolean {
-            BoundingInfo2D.CreateFromSizeToRef(this.actualSize, this._levelBoundingInfo);
-            return true;
-        }
-
-        /**
-         * Create an Rectangle 2D Shape primitive. May be a sharp rectangle (with sharp corners), or a rounded one.
-         * @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 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. You can alternatively use scaleX &| scaleY to apply non uniform scale
-         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
-         * - alignToPixel: if true the primitive will be aligned to the target rendering device's pixel
-         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
-         * - zOrder: override the zOrder with the specified value
-         * - origin: define the normalized origin point location, default [0.5;0.5]
-         * - 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.
-         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
-         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
-         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
-         * - levelCollision: this primitive is an actor of the Collision Manager and only this level will be used for collision (i.e. not the children). Use deepCollision if you want collision detection on the primitives and its children.
-         * - deepCollision: this primitive is an actor of the Collision Manager, this level AND ALSO its children will be used for collision (note: you don't need to set the children as level/deepCollision).
-         * - layoutData: a instance of a class implementing the ILayoutData interface that contain data to pass to the primitive parent's layout engine
-         * - 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)
-         */
-        constructor(settings      ?: {
-            parent                ?: Prim2DBase, 
-            children              ?: Array<Prim2DBase>,
-            id                    ?: string,
-            position              ?: Vector2,
-            x                     ?: number,
-            y                     ?: number,
-            rotation              ?: number,
-            scale                 ?: number,
-            scaleX                ?: number,
-            scaleY                ?: number,
-            dontInheritParentScale?: boolean,
-            alignToPixel          ?: boolean,
-            opacity               ?: number,
-            zOrder                ?: number, 
-            origin                ?: Vector2,
-            size                  ?: Size,
-            width                 ?: number,
-            height                ?: number,
-            roundRadius           ?: number,
-            fill                  ?: IBrush2D | string,
-            border                ?: IBrush2D | string,
-            borderThickness       ?: number,
-            isVisible             ?: boolean,
-            isPickable            ?: boolean,
-            isContainer           ?: boolean,
-            childrenFlatZOrder    ?: boolean,
-            levelCollision        ?: boolean,
-            deepCollision         ?: boolean,
-            layoutData            ?: ILayoutData,
-            marginTop             ?: number | string,
-            marginLeft            ?: number | string,
-            marginRight           ?: number | string,
-            marginBottom          ?: number | string,
-            margin                ?: number | string,
-            marginHAlignment      ?: number,
-            marginVAlignment      ?: number,
-            marginAlignment       ?: string,
-            paddingTop            ?: number | string,
-            paddingLeft           ?: number | string,
-            paddingRight          ?: number | string,
-            paddingBottom         ?: number | string,
-            padding               ?: number | string,
-        }) {
-
-            // Avoid checking every time if the object exists
-            if (settings == null) {
-                settings = {};
-            }
-
-            super(settings);
-
-            if (settings.size != null) {
-                this.size = settings.size;
-            }
-            else if (settings.width || settings.height) {
-                let size = new Size(settings.width, settings.height);
-                this.size = size;
-            }
-
-            //let size            = settings.size || (new Size((settings.width === null) ? null : (settings.width || 10), (settings.height === null) ? null : (settings.height || 10)));
-            let roundRadius     = (settings.roundRadius == null) ? 0 : settings.roundRadius;
-            let borderThickness = (settings.borderThickness == null) ? 1 : settings.borderThickness;
-
-            //this.size            = size;
-            this.roundRadius     = roundRadius;
-            this.borderThickness = borderThickness;
-        }
-
-        public static roundSubdivisions = 16;
-
-        protected createModelRenderCache(modelKey: string): ModelRenderCache {
-            let renderCache = new Rectangle2DRenderCache(this.owner.engine, modelKey);
-            return renderCache;
-        }
-
-        protected updateTriArray() {
-            // Not Rounded = sharp edge rect, the default implementation is the right one!
-            if (this.notRounded) {
-                super.updateTriArray();
-                return;
-            }
-
-            // Rounded Corner? It's more complicated! :)
-
-            let subDiv = Rectangle2D.roundSubdivisions * 4;
-            if (this._primTriArray == null) {
-                this._primTriArray = new Tri2DArray(subDiv);
-            } else {
-                this._primTriArray.clear(subDiv);
-            }
-
-            let size = this.actualSize;
-			let w = size.width;
-			let h = size.height;
-            let r = this.roundRadius;
-            let rsub0 = subDiv * 0.25;
-            let rsub1 = subDiv * 0.50;
-            let rsub2 = subDiv * 0.75;
-            let center = new Vector2(0.5 * size.width, 0.5 * size.height);
-            let twopi = Math.PI * 2;
-			let nru = r / w;
-			let nrv = r / h;
-
-            let computePos = (index: number, p: Vector2) => {
-			    // right/bottom
-			    if (index < rsub0) {
-				    p.x = 1.0 - nru;
-				    p.y = nrv;
-			    }
-			    // left/bottom
-			    else if (index < rsub1) {
-				    p.x = nru;
-				    p.y = nrv;
-			    }
-			    // left/top
-			    else if (index < rsub2) {
-				    p.x = nru;
-				    p.y = 1.0 - nrv;
-			    }
-			    // right/top
-			    else {
-				    p.x = 1.0 - nru;
-				    p.y = 1.0 - nrv;
-			    }
-
-                let angle = twopi - (index * twopi / (subDiv - 0.5));
-			    p.x += Math.cos(angle) * nru;
-                p.y += Math.sin(angle) * nrv;
-                p.x *= w;
-                p.y *= h;
-            }
-
-            console.log("Genetre TriList for " + this.id);
-            let first = Vector2.Zero();
-            let cur = Vector2.Zero();
-            computePos(0, first);
-            let prev = first.clone();
-            for (let index = 1; index < subDiv; index++) {
-                computePos(index, cur);
-                this._primTriArray.storeTriangle(index - 1, center, prev, cur);
-                console.log(`${index-1}, ${center}, ${prev}, ${cur}`);
-                prev.copyFrom(cur);
-            }
-            this._primTriArray.storeTriangle(subDiv-1, center, first, prev);
-                console.log(`${subDiv-1}, ${center}, ${prev}, ${first}`);
-
-        }
-
-        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
-            let renderCache = <Rectangle2DRenderCache>modelRenderCache;
-            let engine = this.owner.engine;
-
-            // Need to create WebGL resources for fill part?
-            if (this.fill) {
-                let vbSize = ((this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4) + 1;
-                let vb = new Float32Array(vbSize);
-                for (let i = 0; i < vbSize; i++) {
-                    vb[i] = i;
-                }
-                renderCache.fillVB = engine.createVertexBuffer(vb);
-
-                let triCount = vbSize - 1;
-                let ib = new Float32Array(triCount * 3);
-                for (let i = 0; i < triCount; i++) {
-                    ib[i * 3 + 0] = 0;
-                    ib[i * 3 + 2] = i + 1;
-                    ib[i * 3 + 1] = i + 2;
-                }
-                ib[triCount * 3 - 2] = 1;
-
-                renderCache.fillIB = engine.createIndexBuffer(ib);
-                renderCache.fillIndicesCount = triCount * 3;
-
-                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
-                if (ei) {
-                    renderCache.effectFillInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-                }
-
-                // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
-                renderCache.effectFill = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-            }
-
-            // Need to create WebGL resource for border part?
-            if (this.border) {
-                let vbSize = (this.notRounded ? 1 : Rectangle2D.roundSubdivisions) * 4 * 2;
-                let vb = new Float32Array(vbSize);
-                for (let i = 0; i < vbSize; i++) {
-                    vb[i] = i;
-                }
-                renderCache.borderVB = engine.createVertexBuffer(vb);
-
-                let triCount = vbSize;
-                let rs = triCount / 2;
-                let ib = new Float32Array(triCount * 3);
-                for (let i = 0; i < rs; i++) {
-                    let r0 = i;
-                    let r1 = (i + 1) % rs;
-
-                    ib[i * 6 + 0] = rs + r1;
-                    ib[i * 6 + 1] = rs + r0;
-                    ib[i * 6 + 2] = r0;
-
-                    ib[i * 6 + 3] = r1;
-                    ib[i * 6 + 4] = rs + r1;
-                    ib[i * 6 + 5] = r0;
-                }
-
-                renderCache.borderIB = engine.createIndexBuffer(ib);
-                renderCache.borderIndicesCount = triCount * 3;
-
-                // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
-                if (ei) {
-                    renderCache.effectBorderInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-                }
-
-                // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
-                renderCache.effectBorder = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-            }
-
-            return renderCache;
-        }
-
-        // We override this method because if there's a roundRadius set, we will reduce the initial Content Area to make sure the computed area won't intersect with the shape contour. The formula is simple: we shrink the incoming size by the amount of the roundRadius
-        protected _getInitialContentAreaToRef(primSize: Size, initialContentPosition: Vector4, initialContentArea: Size) {
-            // Fall back to default implementation if there's no round Radius
-            if (this._notRounded) {
-                super._getInitialContentAreaToRef(primSize, initialContentPosition, initialContentArea);
-            } else {
-                let rr = Math.round((this.roundRadius - (this.roundRadius/Math.sqrt(2))) * 1.3);
-                initialContentPosition.x = initialContentPosition.y = rr;
-                initialContentArea.width = Math.max(0, primSize.width - (rr * 2));
-                initialContentArea.height = Math.max(0, primSize.height - (rr * 2));
-                initialContentPosition.z = primSize.width - (initialContentPosition.x + initialContentArea.width);
-                initialContentPosition.w = primSize.height - (initialContentPosition.y + initialContentArea.height);
-            }
-        }
-
-        protected _getActualSizeFromContentToRef(primSize: Size, paddingOffset: Vector4, newPrimSize: Size) {
-            // Fall back to default implementation if there's no round Radius
-            if (this._notRounded) {
-                super._getActualSizeFromContentToRef(primSize, paddingOffset, newPrimSize);
-            } else {
-                let rr = Math.round((this.roundRadius - (this.roundRadius / Math.sqrt(2))) * 1.3);
-                newPrimSize.copyFrom(primSize);
-                newPrimSize.width  += rr * 2;
-                newPrimSize.height += rr * 2;
-                paddingOffset.x += rr;
-                paddingOffset.y += rr;
-                paddingOffset.z += rr;
-                paddingOffset.w += rr;
-            }
-        }
-
-        protected createInstanceDataParts(): InstanceDataBase[] {
-            var res = new Array<InstanceDataBase>();
-            if (this.border) {
-                res.push(new Rectangle2DInstanceData(Shape2D.SHAPE2D_BORDERPARTID));
-            }
-            if (this.fill) {
-                res.push(new Rectangle2DInstanceData(Shape2D.SHAPE2D_FILLPARTID));
-            }
-            return res;
-        }
-
-        private static _riv0 = new Vector2(0,0);
-        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
-            if (!super.refreshInstanceDataPart(part)) {
-                return false;
-            }
-
-            //let s = Rectangle2D._riv0;
-            //this.getActualGlobalScaleToRef(s);
-
-            if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
-                let d = <Rectangle2DInstanceData>part;
-                let size = this.actualSize;
-                d.properties = new Vector3(size.width/* * s.x*/, size.height/* * s.y*/, this.roundRadius || 0);
-            }
-            else if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
-                let d = <Rectangle2DInstanceData>part;
-                let size = this.actualSize;
-                d.properties = new Vector3(size.width/* * s.x*/, size.height/* * s.y*/, this.roundRadius || 0);
-            }
-            return true;
-        }
-
-        private _notRounded: boolean;
-        private _roundRadius: number;
-    }
-}

canvas2D/src/Engine/babylon.shape2d.ts

@@ -1,277 +0,0 @@
-module BABYLON {
-
-    @className("Shape2D", "BABYLON")
-    /**
-     * The abstract class for parametric shape based Primitives types.
-     * Shape2D based primitives are composed of two parts: fill and border, both are optional but at least one must be specified.
-     * The fill part is the primitive 'body', the border is a border around this body. The border has a thickness that can be changed.
-     */
-    export abstract class Shape2D extends RenderablePrim2D {
-        static SHAPE2D_BORDERPARTID            = 1;
-        static SHAPE2D_FILLPARTID              = 2;
-        static SHAPE2D_CATEGORY_BORDER         = "Border";
-        static SHAPE2D_CATEGORY_BORDERSOLID    = "BorderSolid";
-        static SHAPE2D_CATEGORY_BORDERGRADIENT = "BorderGradient";
-        static SHAPE2D_CATEGORY_FILLSOLID      = "FillSolid";
-        static SHAPE2D_CATEGORY_FILLGRADIENT   = "FillGradient";
-
-        static SHAPE2D_PROPCOUNT: number = RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5;
-        public static borderProperty: Prim2DPropInfo;
-        public static fillProperty: Prim2DPropInfo;
-        public static borderThicknessProperty: Prim2DPropInfo;
-
-        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Shape2D.borderProperty = pi, true)
-        /**
-         * Get/set the brush to render the Border part of the Primitive
-         */
-        public get border(): IBrush2D {
-            return this._border;
-        }
-
-        public set border(value: IBrush2D) {
-            this._border = value;
-            this._updateTransparencyStatus();
-        }
-
-        /**
-         * Get/set the brush to render the Fill part of the Primitive
-         */
-        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Shape2D.fillProperty = pi, true)
-        public get fill(): IBrush2D {
-            return this._fill;
-        }
-
-        public set fill(value: IBrush2D) {
-            this._fill = value;
-            this._updateTransparencyStatus();
-        }
-
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Shape2D.borderThicknessProperty = pi)
-        /**
-         * Get/set the thickness of the border part.
-         */
-        public get borderThickness(): number {
-            return this._borderThickness;
-        }
-
-        public set borderThickness(value: number) {
-            this._borderThickness = value;
-        }
-
-        constructor(settings?: {
-            fill           ?: IBrush2D | string,
-            border         ?: IBrush2D | string,
-            borderThickness?: number,
-        }) {
-
-            super(settings);
-
-            if (!settings) {
-                settings = {};
-            }
-
-            let borderBrush: IBrush2D = null;
-            if (settings.border) {
-                if (typeof (settings.border) === "string") {
-                    borderBrush = Canvas2D.GetBrushFromString(<string>settings.border);
-                } else {
-                    borderBrush = <IBrush2D>settings.border;
-                }
-            }
-
-            let fillBrush: IBrush2D = null;
-            if (settings.fill) {
-                if (typeof (settings.fill) === "string") {
-                    fillBrush = Canvas2D.GetBrushFromString(<string>settings.fill);
-                } else {
-                    fillBrush = <IBrush2D>settings.fill;
-                }
-            }
-
-            this._isTransparent = false;
-            this._oldTransparent = false;
-            this.border = borderBrush;
-            this.fill = fillBrush;
-            this._updateTransparencyStatus();
-            this.borderThickness = settings.borderThickness;
-        }
-
-        protected getUsedShaderCategories(dataPart: InstanceDataBase): string[] {
-            var cat = super.getUsedShaderCategories(dataPart);
-
-            // Fill Part
-            if (dataPart.id === Shape2D.SHAPE2D_FILLPARTID) {
-                let fill = this.fill;
-                if (fill instanceof SolidColorBrush2D) {
-                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLSOLID);
-                }
-                if (fill instanceof GradientColorBrush2D) {
-                    cat.push(Shape2D.SHAPE2D_CATEGORY_FILLGRADIENT);
-                }
-            }
-
-            // Border Part
-            if (dataPart.id === Shape2D.SHAPE2D_BORDERPARTID) {
-                cat.push(Shape2D.SHAPE2D_CATEGORY_BORDER);
-
-                let border = this.border;
-                if (border instanceof SolidColorBrush2D) {
-                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERSOLID);
-                }
-                if (border instanceof GradientColorBrush2D) {
-                    cat.push(Shape2D.SHAPE2D_CATEGORY_BORDERGRADIENT);
-                }
-            }
-
-            return cat;
-        }
-
-        //protected applyActualScaleOnTransform(): boolean {
-        //    return false;
-        //}
-
-        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
-            if (!super.refreshInstanceDataPart(part)) {
-                return false;
-            }
-
-            // Fill Part
-            if (part.id === Shape2D.SHAPE2D_FILLPARTID) {
-                let d = <Shape2DInstanceData>part;
-
-                if (this.fill) {
-                    let fill = this.fill;
-                    if (fill instanceof SolidColorBrush2D) {
-                        d.fillSolidColor = fill.color;
-                    } else if (fill instanceof GradientColorBrush2D) {
-                        d.fillGradientColor1 = fill.color1;
-                        d.fillGradientColor2 = fill.color2;
-                        var t = Matrix2D.Compose(new Vector2(fill.scale, fill.scale), fill.rotation, new Vector2(fill.translation.x, fill.translation.y));
-
-                        let ty = new Vector4(t.m[1], t.m[3], 0, t.m[5]);
-                        d.fillGradientTY = ty;
-                    }
-                }
-            }
-
-            else if (part.id === Shape2D.SHAPE2D_BORDERPARTID) {
-                let d = <Shape2DInstanceData>part;
-
-                if (this.border) {
-                    d.borderThickness = this.borderThickness;
-
-                    let border = this.border;
-                    if (border instanceof SolidColorBrush2D) {
-                        d.borderSolidColor = border.color;
-                    } else if (border instanceof GradientColorBrush2D) {
-                        d.borderGradientColor1 = border.color1;
-                        d.borderGradientColor2 = border.color2;
-                        var t = Matrix2D.Compose(new Vector2(border.scale, border.scale), border.rotation, new Vector2(border.translation.x, border.translation.y));
-
-                        let ty = new Vector4(t.m[1], t.m[3], 0, t.m[5]);
-                        d.borderGradientTY = ty;
-                    }
-                }
-            }
-
-            return true;
-        }
-
-        private _updateTransparencyStatus() {
-            this._isTransparent = (this._border && this._border.isTransparent()) || (this._fill && this._fill.isTransparent()) || (this.actualOpacity < 1);
-            if (this._isTransparent !== this._oldTransparent) {
-                this._oldTransparent = this._isTransparent;
-                this._updateRenderMode();
-            }
-        }
-
-        protected _mustUpdateInstance(): boolean {
-            let res = this._oldTransparent !== this._isTransparent;
-            if (res) {
-                this._updateRenderMode();
-                this._oldTransparent = this._isTransparent;
-            }
-            return res;
-        }
-
-        protected _isPrimTransparent(): boolean {
-            return this._isTransparent;
-        }
-
-        private _oldTransparent: boolean;
-        private _isTransparent: boolean;
-        private _border: IBrush2D;
-        private _borderThickness: number;
-        private _fill: IBrush2D;
-
-    }
-
-    export class Shape2DInstanceData extends InstanceDataBase {
-        // FILL ATTRIBUTES
-
-        @instanceData(Shape2D.SHAPE2D_CATEGORY_FILLSOLID)
-        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
-
-        @instanceData(Shape2D.SHAPE2D_CATEGORY_BORDER)
-        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) {
-        }
-    }
-}

canvas2D/src/Engine/babylon.sprite2d.ts

@@ -1,597 +0,0 @@
-module BABYLON {
-    export class Sprite2DRenderCache extends ModelRenderCache {
-        effectsReady: boolean = false;
-        vb: WebGLBuffer = null;
-        ib: WebGLBuffer = null;
-        instancingAttributes: InstancingAttributeInfo[] = null;
-        texture: Texture = null;
-        effect: Effect = null;
-        effectInstanced: Effect = null;
-
-        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
-            // Do nothing if the shader is still loading/preparing 
-            if (!this.effectsReady) {
-                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
-                    return false;
-                }
-                this.effectsReady = true;
-            }
-
-            // Compute the offset locations of the attributes in the vertex shader that will be mapped to the instance buffer data
-            let canvas = instanceInfo.owner.owner;
-            var engine = canvas.engine;
-
-            var cur = engine.getAlphaMode();
-            let effect = context.useInstancing ? this.effectInstanced : this.effect;
-
-            engine.enableEffect(effect);
-            effect.setTexture("diffuseSampler", this.texture);
-            engine.bindBuffersDirectly(this.vb, this.ib, [1], 4, effect);
-
-            if (context.renderMode !== Render2DContext.RenderModeOpaque) {
-                engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
-            }
-
-            effect.setBool("alphaTest", context.renderMode === Render2DContext.RenderModeAlphaTest);
-
-            let pid = context.groupInfoPartData[0];
-            if (context.useInstancing) {
-                if (!this.instancingAttributes) {
-                    this.instancingAttributes = this.loadInstancingAttributes(Sprite2D.SPRITE2D_MAINPARTID, effect);
-                }
-                let glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
-                let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
-                canvas._addDrawCallCount(1, context.renderMode);
-                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
-                engine.draw(true, 0, 6, count);
-                engine.unbindInstanceAttributes();
-            } else {
-                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
-                for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
-                    this.setupUniforms(effect, 0, pid._partData, i);
-                    engine.draw(true, 0, 6);
-                }
-            }
-
-            engine.setAlphaMode(cur, true);
-
-            return true;
-        }
-
-        public dispose(): boolean {
-            if (!super.dispose()) {
-                return false;
-            }
-
-            if (this.vb) {
-                this._engine._releaseBuffer(this.vb);
-                this.vb = null;
-            }
-
-            if (this.ib) {
-                this._engine._releaseBuffer(this.ib);
-                this.ib = null;
-            }
-
-            //if (this.texture) {
-            //    this.texture.dispose();
-            //    this.texture = null;
-            //}
-
-            this.effect = null;
-            this.effectInstanced = null;
-
-            return true;
-        }
-    }
-
-    @className("Sprite2D", "BABYLON")
-    /**
-     * Primitive that displays a Sprite/Picture
-     */
-    export class Sprite2D extends RenderablePrim2D {
-        static SPRITE2D_MAINPARTID = 1;
-
-        static SHAPE2D_CATEGORY_SCALE9 = "Scale9";
-
-        public static textureProperty: Prim2DPropInfo;
-        public static useAlphaFromTextureProperty: Prim2DPropInfo;
-        public static actualSizeProperty: Prim2DPropInfo;
-        public static spriteSizeProperty: Prim2DPropInfo;
-        public static spriteLocationProperty: Prim2DPropInfo;
-        public static spriteFrameProperty: Prim2DPropInfo;
-        public static invertYProperty: Prim2DPropInfo;
-        public static spriteScale9Property: Prim2DPropInfo;
-
-        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => Sprite2D.textureProperty = pi)
-        /**
-         * Get/set the texture that contains the sprite to display
-         */
-        public get texture(): Texture {
-            return this._texture;
-        }
-
-        public set texture(value: Texture) {
-            this._texture = value;
-            this._oldTextureHasAlpha = this._texture && this.texture.hasAlpha;
-        }
-
-        @dynamicLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Sprite2D.useAlphaFromTextureProperty = pi)
-        /**
-         * If true and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as a Transparent Primitive, if false and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as Alpha Test. If false or if the Texture has no alpha or it's not used (BaseTexture.hasAlpha = false) the Sprite2d will be rendered as an Opaque Primitive
-         */
-        public get useAlphaFromTexture(): boolean {
-            return this._useAlphaFromTexture;
-        }
-
-        public set useAlphaFromTexture(value: boolean) {
-            if (this._useAlphaFromTexture === value) {
-                return;
-            }
-            this._useAlphaFromTexture = value;
-            this._updateRenderMode();
-        }
-
-        public get size(): Size {
-            if (this._size == null) {
-                return this.spriteSize;
-            }
-            return this.internalGetSize();
-        }
-
-        public set size(value: Size) {
-            this._useSize = value != null;
-            this.internalSetSize(value);
-            this._updateSpriteScaleFactor();
-        }
-
-
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, pi => Sprite2D.spriteSizeProperty = pi, false, true)
-        /**
-         * Get/set the sprite location (in pixels) in the texture
-         */
-        public get spriteSize(): Size {
-            return this._spriteSize;
-        }
-
-        public set spriteSize(value: Size) {
-            if (!this._spriteSize) {
-                this._spriteSize = value.clone();
-            } else {
-                this._spriteSize.copyFrom(value);
-            }
-            this._updateSpriteScaleFactor();
-        }
-
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5, pi => Sprite2D.spriteLocationProperty = pi)
-        /**
-         * Get/set the sprite location (in pixels) in the texture
-         */
-        public get spriteLocation(): Vector2 {
-            return this._spriteLocation;
-        }
-
-        public set spriteLocation(value: Vector2) {
-            if (!this._spriteLocation) {
-                this._spriteLocation = value.clone();
-            } else {
-                this._spriteLocation.copyFrom(value);
-            }
-        }
-
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 6, pi => Sprite2D.spriteFrameProperty = pi)
-        /**
-         * Get/set the sprite frame to display.
-         * The frame number is just an offset applied horizontally, based on the sprite's width. it does not wrap, all the frames must be on the same line.
-         */
-        public get spriteFrame(): number {
-            return this._spriteFrame;
-        }
-
-        public set spriteFrame(value: number) {
-            this._spriteFrame = value;
-        }
-
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 7, pi => Sprite2D.invertYProperty = pi)
-        /**
-         * Get/set if the sprite texture coordinates should be inverted on the Y axis
-         */
-        public get invertY(): boolean {
-            return this._invertY;
-        }
-
-        public set invertY(value: boolean) {
-            this._invertY = value;
-        }
-
-        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 8, pi => Sprite2D.spriteScale9Property = pi)
-        /**
-         * Get/set the texture that contains the sprite to display
-         */
-        public get isScale9(): boolean {
-            return this._scale9!==null;
-        }
-
-        //@instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 7, pi => Sprite2D.spriteScaleFactorProperty = pi)
-        ///**
-        // * Get/set the sprite location (in pixels) in the texture
-        // */
-        //public get spriteScaleFactor(): Vector2 {
-        //    return this._spriteScaleFactor;
-        //}
-
-        //public set spriteScaleFactor(value: Vector2) {
-        //    this._spriteScaleFactor = value;
-        //}
-
-        protected updateLevelBoundingInfo(): boolean {
-            BoundingInfo2D.CreateFromSizeToRef(this.size, this._levelBoundingInfo);
-            return true;
-        }
-
-        /**
-         * Get the animatable array (see http://doc.babylonjs.com/tutorials/Animations)
-         */
-        public getAnimatables(): IAnimatable[] {
-            let res = new Array<IAnimatable>();
-
-            if (this.texture && this.texture.animations && this.texture.animations.length > 0) {
-                res.push(this.texture);
-            }
-            return res;
-        }
-
-        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
-            // If we've made it so far it means the boundingInfo intersection test succeed, the Sprite2D is shaped the same, so we always return true
-            return true;
-        }
-
-        public get isSizeAuto(): boolean {
-            return this.size == null;
-        }
-
-        /**
-         * Create an 2D Sprite primitive
-         * @param texture the texture that stores the sprite to render
-         * @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. You can alternatively use scaleX &| scaleY to apply non uniform scale
-         * - size: the size of the sprite displayed in the canvas, if not specified the spriteSize will be used
-         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
-         * - 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.
-         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
-         * - zOrder: override the zOrder with the specified value
-         * - origin: define the normalized origin point location, default [0.5;0.5]
-         * - spriteSize: the size of the sprite (in pixels) as it is stored in the texture, 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)
-         * - scale9: draw the sprite as a Scale9 sprite, see http://yannickloriot.com/2013/03/9-patch-technique-in-cocos2d/ for more info. x, y, w, z are left, bottom, right, top coordinate of the resizable box
-         * - invertY: if true the texture Y will be inverted, default is false.
-         * - isVisible: true if the sprite must be visible, false for hidden. Default is true.
-         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
-         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
-         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
-         * - levelCollision: this primitive is an actor of the Collision Manager and only this level will be used for collision (i.e. not the children). Use deepCollision if you want collision detection on the primitives and its children.
-         * - deepCollision: this primitive is an actor of the Collision Manager, this level AND ALSO its children will be used for collision (note: you don't need to set the children as level/deepCollision).
-         * - layoutData: a instance of a class implementing the ILayoutData interface that contain data to pass to the primitive parent's layout engine
-         * - 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)
-         */
-        constructor(texture: Texture, settings?: {
-
-            parent                ?: Prim2DBase,
-            children              ?: Array<Prim2DBase>,
-            id                    ?: string,
-            position              ?: Vector2,
-            x                     ?: number,
-            y                     ?: number,
-            rotation              ?: number,
-            size                  ?: Size,
-            scale                 ?: number,
-            scaleX                ?: number,
-            scaleY                ?: number,
-            dontInheritParentScale?: boolean,
-            alignToPixel          ?: boolean,
-            opacity               ?: number,
-            zOrder                ?: number, 
-            origin                ?: Vector2,
-            spriteSize            ?: Size,
-            spriteLocation        ?: Vector2,
-            spriteScaleFactor     ?: Vector2,
-            scale9                ?: Vector4,
-            invertY               ?: boolean,
-            isVisible             ?: boolean,
-            isPickable            ?: boolean,
-            isContainer           ?: boolean,
-            childrenFlatZOrder    ?: boolean,
-            levelCollision        ?: boolean,
-            deepCollision         ?: boolean,
-            layoutData            ?: ILayoutData,
-            marginTop             ?: number | string,
-            marginLeft            ?: number | string,
-            marginRight           ?: number | string,
-            marginBottom          ?: number | string,
-            margin                ?: number | string,
-            marginHAlignment      ?: number,
-            marginVAlignment      ?: number,
-            marginAlignment       ?: string,
-            paddingTop            ?: number | string,
-            paddingLeft           ?: number | string,
-            paddingRight          ?: number | string,
-            paddingBottom         ?: number | string,
-            padding               ?: number | string,
-        }) {
-
-            if (!settings) {
-                settings = {};
-            }
-
-            super(settings);
-
-            this.texture = texture;
-            // This is removed to let the user the possibility to setup the addressing mode he wants
-            //this.texture.wrapU = Texture.CLAMP_ADDRESSMODE;
-            //this.texture.wrapV = Texture.CLAMP_ADDRESSMODE;
-            this._useSize = false;
-            this._spriteSize = (settings.spriteSize!=null) ? settings.spriteSize.clone() : null;
-            this._spriteLocation = (settings.spriteLocation!=null) ? settings.spriteLocation.clone() : new Vector2(0, 0);
-            if (settings.size != null) {
-                this.size = settings.size;
-            }
-            this._updatePositioningState();
-            this.spriteFrame = 0;
-            this.invertY = (settings.invertY == null) ? false : settings.invertY;
-            this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel;
-            this.useAlphaFromTexture = true;
-            this._scale9 = (settings.scale9 != null) ? settings.scale9.clone() : null;
-
-            // If the user doesn't set a size, we'll use the texture's one, but if the texture is not loading, we HAVE to set a temporary dummy size otherwise the positioning engine will switch the marginAlignement to stretch/stretch, and WE DON'T WANT THAT.
-            // The fucking delayed texture sprite bug is fixed!
-            if (settings.spriteSize == null) {
-                this.spriteSize = new Size(10, 10);
-            }
-
-            if (settings.spriteSize == null || !texture.isReady()) {
-                if (texture.isReady()) {
-                    let s = texture.getBaseSize();
-                    this.spriteSize = new Size(s.width, s.height);
-                    this._updateSpriteScaleFactor();
-                } else {
-
-                    texture.onLoadObservable.add(() => {
-                        if (settings.spriteSize == null) {
-                            let s = texture.getBaseSize();
-                            this.spriteSize = new Size(s.width, s.height);
-                        }
-                        this._updateSpriteScaleFactor();
-                        this._positioningDirty();
-                        this._setLayoutDirty();
-                        this._instanceDirtyFlags |= Prim2DBase.originProperty.flagId | Sprite2D.textureProperty.flagId;  // To make sure the sprite is issued again for render
-                    });
-                }
-            }
-        }
-
-        protected createModelRenderCache(modelKey: string): ModelRenderCache {
-            let renderCache = new Sprite2DRenderCache(this.owner.engine, modelKey);
-            return renderCache;
-        }
-
-        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
-            let renderCache = <Sprite2DRenderCache>modelRenderCache;
-            let engine = this.owner.engine;
-
-            let vb = new Float32Array(4);
-            for (let i = 0; i < 4; i++) {
-                vb[i] = i;
-            }
-            renderCache.vb = engine.createVertexBuffer(vb);
-
-            let ib = new Float32Array(6);
-            ib[0] = 0;
-            ib[1] = 2;
-            ib[2] = 1;
-            ib[3] = 0;
-            ib[4] = 3;
-            ib[5] = 2;
-
-            renderCache.ib = engine.createIndexBuffer(ib);
-
-            renderCache.texture = this.texture;
-
-            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-            let ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], true);
-            if (ei) {
-                renderCache.effectInstanced = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
-            }
-
-            ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], false);
-            renderCache.effect = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
-
-            return renderCache;
-        }
-
-        protected getUsedShaderCategories(dataPart: InstanceDataBase): string[] {
-            var cat = super.getUsedShaderCategories(dataPart);
-
-            if (dataPart.id === Sprite2D.SPRITE2D_MAINPARTID) {
-                let useScale9 = this._scale9 != null;
-                if (useScale9) {
-                    cat.push(Sprite2D.SHAPE2D_CATEGORY_SCALE9);
-                }
-            }
-            return cat;
-        }
-
-        protected createInstanceDataParts(): InstanceDataBase[] {
-            return [new Sprite2DInstanceData(Sprite2D.SPRITE2D_MAINPARTID)];
-        }
-
-        private static _prop: Vector3 = Vector3.Zero();
-
-        private static layoutConstructMode = false;
-        protected beforeRefreshForLayoutConstruction(part: InstanceDataBase): any {
-            Sprite2D.layoutConstructMode = true;
-        }
-
-        // if obj contains something, we restore the _text property
-        protected afterRefreshForLayoutConstruction(part: InstanceDataBase, obj: any) {
-            Sprite2D.layoutConstructMode = false;
-        }
-
-        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
-            if (!super.refreshInstanceDataPart(part)) {
-                return false;
-            }
-
-            if (!this.texture.isReady() && !Sprite2D.layoutConstructMode) {
-                return false;
-            }
-
-            if (part.id === Sprite2D.SPRITE2D_MAINPARTID) {
-                let d = <Sprite2DInstanceData>this._instanceDataParts[0];
-
-                if (Sprite2D.layoutConstructMode) {
-                    d.topLeftUV = Vector2.Zero();
-                    d.sizeUV = Vector2.Zero();
-                    d.properties = Vector3.Zero();
-                    d.textureSize = Vector2.Zero();
-                    d.scaleFactor = Vector2.Zero();
-                    if (this.isScale9) {
-                        d.scale9 = Vector4.Zero();
-                    }
-                } else {
-                    let ts = this.texture.getBaseSize();
-                    let ss = this.spriteSize;
-                    let sl = this.spriteLocation;
-                    let ssf = this.actualScale;
-                    d.topLeftUV = new Vector2(sl.x / ts.width, sl.y / ts.height);
-                    let suv = new Vector2(ss.width / ts.width, ss.height / ts.height);
-                    d.sizeUV = suv;
-                    d.scaleFactor = ssf;
-
-                    Sprite2D._prop.x = this.spriteFrame;
-                    Sprite2D._prop.y = this.invertY ? 1 : 0;
-                    Sprite2D._prop.z = this.alignToPixel ? 1 : 0;
-                    d.properties = Sprite2D._prop;
-
-                    d.textureSize = new Vector2(ts.width, ts.height);
-
-                    let scale9 = this._scale9;
-                    if (scale9 != null) {
-                        let normalizedScale9 = new Vector4(scale9.x * suv.x / ss.width, scale9.y * suv.y / ss.height, scale9.z * suv.x / ss.width, scale9.w * suv.y / ss.height);
-                        d.scale9 = normalizedScale9;
-                    }
-                }
-            }
-            return true;
-        }
-
-        protected _mustUpdateInstance(): boolean {
-            let res = this._oldTextureHasAlpha !== (this.texture != null && this.texture.hasAlpha);
-            this._oldTextureHasAlpha = this.texture != null && this.texture.hasAlpha;
-            if (res) {
-                this._updateRenderMode();
-            }
-            return res;
-        }
-
-        protected _useTextureAlpha(): boolean {
-            return this.texture!=null && this.texture.hasAlpha;
-        }
-
-        protected _shouldUseAlphaFromTexture(): boolean {
-            return this.texture!=null && this.texture.hasAlpha && this.useAlphaFromTexture;
-        }
-
-        private _updateSpriteScaleFactor() {
-            if (!this._useSize) {
-                return;
-            }
-
-            let sS = this.spriteSize;
-            let s = this.size;
-            if (s == null || sS == null) {
-                return;
-            }
-            this._postScale.x = s.width / sS.width;
-            this._postScale.y = s.height / sS.height;
-        }
-
-        private _texture: Texture;
-        private _oldTextureHasAlpha: boolean;
-        private _useAlphaFromTexture: boolean;
-        private _useSize: boolean;
-        private _spriteLocation: Vector2;
-        private _spriteSize: Size;
-        private _spriteFrame: number;
-        private _scale9: Vector4;
-        private _invertY: boolean;
-    }
-
-    export class Sprite2DInstanceData extends InstanceDataBase {
-        constructor(partId: number) {
-            super(partId, 1);
-        }
-
-        @instanceData()
-        get topLeftUV(): Vector2 {
-            return null;
-        }
-        set topLeftUV(value: Vector2) {
-        }
-
-        @instanceData()
-        get sizeUV(): Vector2 {
-            return null;
-        }
-        set sizeUV(value: Vector2) {
-        }
-
-        @instanceData(Sprite2D.SHAPE2D_CATEGORY_SCALE9)
-        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
-        // - y: invertY setting
-        // - z: alignToPixel setting
-        @instanceData()
-        get properties(): Vector3 {
-            return null;
-        }
-        set properties(value: Vector3) {
-        }
-
-        @instanceData(Sprite2D.SHAPE2D_CATEGORY_SCALE9)
-        get scale9(): Vector4 {
-            return null;
-        }
-        set scale9(value: Vector4) {
-        }
-    }
-}

canvas2D/src/Engine/babylon.wireFrame2d.ts

@@ -1,451 +0,0 @@
-module BABYLON {
-    export class WireFrame2DRenderCache extends ModelRenderCache {
-        effectsReady: boolean = false;
-        vb: WebGLBuffer = null;
-        vtxCount = 0;
-        instancingAttributes: InstancingAttributeInfo[] = null;
-        effect: Effect = null;
-        effectInstanced: Effect = null;
-
-        render(instanceInfo: GroupInstanceInfo, context: Render2DContext): boolean {
-            // Do nothing if the shader is still loading/preparing 
-            if (!this.effectsReady) {
-                if ((this.effect && (!this.effect.isReady() || (this.effectInstanced && !this.effectInstanced.isReady())))) {
-                    return false;
-                }
-                this.effectsReady = true;
-            }
-
-            // Compute the offset locations of the attributes in the vertex shader that will be mapped to the instance buffer data
-            let canvas = instanceInfo.owner.owner;
-            var engine = canvas.engine;
-
-            var cur = engine.getAlphaMode();
-            let effect = context.useInstancing ? this.effectInstanced : this.effect;
-
-            engine.enableEffect(effect);
-            engine.bindBuffersDirectly(this.vb, null, [2, 4], 24, effect);
-
-            if (context.renderMode !== Render2DContext.RenderModeOpaque) {
-                engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
-            }
-
-            let pid = context.groupInfoPartData[0];
-            if (context.useInstancing) {
-                if (!this.instancingAttributes) {
-                    this.instancingAttributes = this.loadInstancingAttributes(WireFrame2D.WIREFRAME2D_MAINPARTID, effect);
-                }
-                let glBuffer = context.instancedBuffers ? context.instancedBuffers[0] : pid._partBuffer;
-                let count = context.instancedBuffers ? context.instancesCount : pid._partData.usedElementCount;
-                canvas._addDrawCallCount(1, context.renderMode);
-                engine.updateAndBindInstancesBuffer(glBuffer, null, this.instancingAttributes);
-                engine.drawUnIndexed(false, 0, this.vtxCount, count);
-//                engine.draw(true, 0, 6, count);
-                engine.unbindInstanceAttributes();
-            } else {
-                canvas._addDrawCallCount(context.partDataEndIndex - context.partDataStartIndex, context.renderMode);
-                for (let i = context.partDataStartIndex; i < context.partDataEndIndex; i++) {
-                    this.setupUniforms(effect, 0, pid._partData, i);
-                    engine.drawUnIndexed(false, 0, this.vtxCount);
-  //                  engine.draw(true, 0, 6);
-                }
-            }
-
-            engine.setAlphaMode(cur, true);
-
-            return true;
-        }
-
-        public updateModelRenderCache(prim: Prim2DBase): boolean {
-            let w = prim as WireFrame2D;
-            w._updateVertexBuffer(this);
-            return true;
-        }
-
-        public dispose(): boolean {
-            if (!super.dispose()) {
-                return false;
-            }
-
-            if (this.vb) {
-                this._engine._releaseBuffer(this.vb);
-                this.vb = null;
-            }
-
-            this.effect = null;
-            this.effectInstanced = null;
-
-            return true;
-        }
-    }
-
-    @className("WireFrameVertex2D", "BABYLON")
-    export class WireFrameVertex2D {
-        x: number;
-        y: number;
-        r: number;
-        g: number;
-        b: number;
-        a: number;
-
-        constructor(p: Vector2, c: Color4=null) {
-            this.fromVector2(p);
-            if (c != null) {
-                this.fromColor4(c);
-            } else {
-                this.r = this.g = this.b = this.a = 1;
-            }
-        }
-
-        fromVector2(p: Vector2) {
-            this.x = p.x;
-            this.y = p.y;
-        }
-
-        fromColor3(c: Color3) {
-            this.r = c.r;
-            this.g = c.g;
-            this.b = c.b;
-            this.a = 1;
-        }
-
-        fromColor4(c: Color4) {
-            this.r = c.r;
-            this.g = c.g;
-            this.b = c.b;
-            this.a = c.a;
-        }
-    }
-
-    @className("WireFrameGroup2D", "BABYLON")
-    /**
-     * A WireFrameGroup2D has a unique id (among the WireFrame2D primitive) and a collection of WireFrameVertex2D which form a Line list.
-     * A Line is defined by two vertices, the storage of vertices doesn't follow the Line Strip convention, so to create consecutive lines the intermediate vertex must be doubled. The best way to build a Line Strip is to use the startLineStrip, pushVertex and endLineStrip methods.
-     * You can manually add vertices using the pushVertex method, but mind that the vertices array must be a multiple of 2 as each line are defined with TWO SEPARATED vertices. I hope this is clear enough.
-     */
-    export class WireFrameGroup2D {
-        /**
-         * Construct a WireFrameGroup2D object
-         * @param id a unique ID among the Groups added to a given WireFrame2D primitive, if you don't specify an id, a random one will be generated. The id is immutable.
-         * @param defaultColor specify the default color that will be used when a vertex is pushed, white will be used if not specified.
-         */
-        constructor(id: string=null, defaultColor: Color4=null) {
-            this._id = (id == null) ? Tools.RandomId() : id;
-            this._uid = Tools.RandomId();
-            this._defaultColor = (defaultColor == null) ? new Color4(1,1,1,1) : defaultColor;
-            this._buildingStrip = false;
-            this._vertices = new Array<WireFrameVertex2D>();
-        }
-
-        public get uid() {
-            return this._uid;
-        }
-
-        /**
-         * Retrieve the ID of the group
-         */
-        public get id(): string {
-            return this._id;
-        }
-
-        /**
-         * Push a vertex in the array of vertices.
-         * If you're previously called startLineStrip, the vertex will be pushed twice in order to describe the end of a line and the start of a new one.
-         * @param p Position of the vertex
-         * @param c Color of the vertex, if null the default color of the group will be used
-         */
-        public pushVertex(p: Vector2, c: Color4=null) {
-            let v = new WireFrameVertex2D(p, (c == null) ? this._defaultColor : c);
-            this._vertices.push(v);
-            if (this._buildingStrip) {
-                let v2 = new WireFrameVertex2D(p, (c == null) ? this._defaultColor : c);
-                this._vertices.push(v2);
-            }
-        }
-
-        /**
-         * Start to store a Line Strip. The given vertex will be pushed in the array. The you have to call pushVertex to add subsequent vertices describing the strip and don't forget to call endLineStrip to close the strip!!!
-         * @param p Position of the vertex
-         * @param c Color of the vertex, if null the default color of the group will be used
-         */
-        public startLineStrip(p: Vector2, c: Color4=null) {
-            this.pushVertex(p, (c == null) ? this._defaultColor : c);
-            this._buildingStrip = true;
-        }
-
-        /**
-         * Close the Strip by storing a last vertex
-         * @param p Position of the vertex
-         * @param c Color of the vertex, if null the default color of the group will be used
-         */
-        public endLineStrip(p: Vector2, c: Color4=null) {
-            this._buildingStrip = false;
-            this.pushVertex(p, (c == null) ? this._defaultColor : c);
-        }
-
-        /**
-         * Access to the array of Vertices, you can manipulate its content but BEWARE of what you're doing!
-         */
-        public get vertices(): Array<WireFrameVertex2D> {
-            return this._vertices;
-        }
-
-        private _uid: string;
-        private _id: string;
-        private _defaultColor: Color4;
-        private _vertices: Array<WireFrameVertex2D>;
-        private _buildingStrip: boolean;
-    }
-
-    @className("WireFrame2D", "BABYLON")
-    /**
-     * Primitive that displays a WireFrame
-     */
-    export class WireFrame2D extends RenderablePrim2D {
-        static WIREFRAME2D_MAINPARTID = 1;
-
-        public static wireFrameGroupsProperty: Prim2DPropInfo;
-
-        @modelLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 1, pi => WireFrame2D.wireFrameGroupsProperty = pi)
-        /**
-         * Get/set the texture that contains the sprite to display
-         */
-        public get wireFrameGroups(): StringDictionary<WireFrameGroup2D> {
-            return this._wireFrameGroups;
-        }
-
-        /**
-         * If you change the content of the wireFrameGroups you MUST call this method for the changes to be reflected during rendering
-         */
-        public wireFrameGroupsDirty() {
-            this._setFlags(SmartPropertyPrim.flagModelUpdate);
-            this.onPrimBecomesDirty();
-        }
-
-        public get size(): Size {
-            if (this._size == null) {
-                this._computeMinMaxTrans();
-            }
-            return this._size;
-        }
-
-        public set size(value: Size) {
-            this.internalSetSize(value);
-        }
-
-        protected updateLevelBoundingInfo(): boolean {
-            let v = this._computeMinMaxTrans();
-            BoundingInfo2D.CreateFromMinMaxToRef(v.x, v.z, v.y, v.w, this._levelBoundingInfo);
-            return true;
-        }
-
-        protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
-            // TODO !
-            return true;
-        }
-
-        /**
-         * Create an WireFrame 2D primitive
-         * @param wireFrameGroups an array of WireFrameGroup. 
-         * @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. You can alternatively use scaleX &| scaleY to apply non uniform scale
-         * - size: the size of the sprite displayed in the canvas, if not specified the spriteSize will be used
-         * - dontInheritParentScale: if set the parent's scale won't be taken into consideration to compute the actualScale property
-         * - opacity: set the overall opacity of the primitive, 1 to be opaque (default), less than 1 to be transparent.
-         * - zOrder: override the zOrder with the specified value
-         * - origin: define the normalized origin point location, default [0.5;0.5]
-         * - alignToPixel: the rendered lines will be aligned to the rendering device' pixels
-         * - isVisible: true if the sprite must be visible, false for hidden. Default is true.
-         * - isPickable: if true the Primitive can be used with interaction mode and will issue Pointer Event. If false it will be ignored for interaction/intersection test. Default value is true.
-         * - isContainer: if true the Primitive acts as a container for interaction, if the primitive is not pickable or doesn't intersection, no further test will be perform on its children. If set to false, children will always be considered for intersection/interaction. Default value is true.
-         * - childrenFlatZOrder: if true all the children (direct and indirect) will share the same Z-Order. Use this when there's a lot of children which don't overlap. The drawing order IS NOT GUARANTED!
-         * - levelCollision: this primitive is an actor of the Collision Manager and only this level will be used for collision (i.e. not the children). Use deepCollision if you want collision detection on the primitives and its children.
-         * - deepCollision: this primitive is an actor of the Collision Manager, this level AND ALSO its children will be used for collision (note: you don't need to set the children as level/deepCollision).
-         * - layoutData: a instance of a class implementing the ILayoutData interface that contain data to pass to the primitive parent's layout engine
-         * - 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)
-         */
-        constructor(wireFrameGroups: Array<WireFrameGroup2D>, settings?: {
-
-            parent                ?: Prim2DBase,
-            children              ?: Array<Prim2DBase>,
-            id                    ?: string,
-            position              ?: Vector2,
-            x                     ?: number,
-            y                     ?: number,
-            rotation              ?: number,
-            size                  ?: Size,
-            scale                 ?: number,
-            scaleX                ?: number,
-            scaleY                ?: number,
-            dontInheritParentScale?: boolean,
-            opacity               ?: number,
-            zOrder                ?: number, 
-            origin                ?: Vector2,
-            alignToPixel          ?: boolean,
-            isVisible             ?: boolean,
-            isPickable            ?: boolean,
-            isContainer           ?: boolean,
-            childrenFlatZOrder    ?: boolean,
-            levelCollision        ?: boolean,
-            deepCollision         ?: boolean,
-            layoutData            ?: ILayoutData,
-            marginTop             ?: number | string,
-            marginLeft            ?: number | string,
-            marginRight           ?: number | string,
-            marginBottom          ?: number | string,
-            margin                ?: number | string,
-            marginHAlignment      ?: number,
-            marginVAlignment      ?: number,
-            marginAlignment       ?: string,
-            paddingTop            ?: number | string,
-            paddingLeft           ?: number | string,
-            paddingRight          ?: number | string,
-            paddingBottom         ?: number | string,
-            padding               ?: number | string,
-        }) {
-
-            if (!settings) {
-                settings = {};
-            }
-
-            super(settings);
-
-            this._wireFrameGroups = new StringDictionary<WireFrameGroup2D>();
-            for (let wfg of wireFrameGroups) {
-                this._wireFrameGroups.add(wfg.id, wfg);
-            }
-
-            this._vtxTransparent = false;
-            if (settings.size != null) {
-                this.size = settings.size;
-            }
-
-            this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel;
-        }
-
-        /**
-         * Get/set if the sprite rendering should be aligned to the target rendering device pixel or not
-         */
-        public get alignToPixel(): boolean {
-            return this._alignToPixel;
-        }
-
-        public set alignToPixel(value: boolean) {
-            this._alignToPixel = value;
-        }
-
-        protected createModelRenderCache(modelKey: string): ModelRenderCache {
-            let renderCache = new WireFrame2DRenderCache(this.owner.engine, modelKey);
-            return renderCache;
-        }
-
-        protected setupModelRenderCache(modelRenderCache: ModelRenderCache) {
-            let renderCache = <WireFrame2DRenderCache>modelRenderCache;
-            let engine = this.owner.engine;
-
-            // Create the VertexBuffer
-            this._updateVertexBuffer(renderCache);
-
-            // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-            let ei = this.getDataPartEffectInfo(WireFrame2D.WIREFRAME2D_MAINPARTID, ["pos", "col"], [], true);
-            if (ei) {
-                renderCache.effectInstanced = engine.createEffect("wireframe2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-            }
-
-            ei = this.getDataPartEffectInfo(WireFrame2D.WIREFRAME2D_MAINPARTID, ["pos", "col"], [], false);
-            renderCache.effect = engine.createEffect("wireframe2d", ei.attributes, ei.uniforms, [], ei.defines, null);
-
-            return renderCache;
-        }
-
-        public _updateVertexBuffer(mrc: WireFrame2DRenderCache) {
-            let engine = this.owner.engine;
-
-            if (mrc.vb != null) {
-                engine._releaseBuffer(mrc.vb);
-            }
-
-            let vtxCount = 0;
-            this._wireFrameGroups.forEach((k, v) => vtxCount += v.vertices.length);
-
-            let vb = new Float32Array(vtxCount * 6);
-            let i = 0;
-            this._wireFrameGroups.forEach((k, v) => {
-                for (let vtx of v.vertices) {
-                    vb[i++] = vtx.x;
-                    vb[i++] = vtx.y;
-                    vb[i++] = vtx.r;
-                    vb[i++] = vtx.g;
-                    vb[i++] = vtx.b;
-                    vb[i++] = vtx.a;
-                }
-            });
-
-            mrc.vb = engine.createVertexBuffer(vb);
-            mrc.vtxCount = vtxCount;
-        }
-
-        protected refreshInstanceDataPart(part: InstanceDataBase): boolean {
-            if (!super.refreshInstanceDataPart(part)) {
-                return false;
-            }
-            return true;
-        }
-
-        private _computeMinMaxTrans(): Vector4 {
-            let xmin = Number.MAX_VALUE;
-            let xmax = Number.MIN_VALUE;
-            let ymin = Number.MAX_VALUE;
-            let ymax = Number.MIN_VALUE;
-            let transparent = false;
-
-            this._wireFrameGroups.forEach((k, v) => {
-                for (let vtx of v.vertices) {
-                    xmin = Math.min(xmin, vtx.x);
-                    xmax = Math.max(xmax, vtx.x);
-                    ymin = Math.min(ymin, vtx.y);
-                    ymax = Math.max(ymax, vtx.y);
-
-                    if (vtx.a < 1) {
-                        transparent = true;
-                    }
-                }
-            });
-
-            this._vtxTransparent = transparent;
-            this._size = new Size(xmax - xmin, ymax - ymin);
-            return new Vector4(xmin, ymin, xmax, ymax);
-        }
-
-        protected createInstanceDataParts(): InstanceDataBase[] {
-            return [new WireFrame2DInstanceData(WireFrame2D.WIREFRAME2D_MAINPARTID)];
-        }
-
-        private _vtxTransparent: boolean;
-        private _wireFrameGroups: StringDictionary<WireFrameGroup2D>;
-        private _alignToPixel: boolean;
-    }
-
-    export class WireFrame2DInstanceData extends InstanceDataBase {
-        constructor(partId: number) {
-            super(partId, 1);
-        }
-    }
-}

canvas2D/src/Engine/babylon.worldSpaceCanvas2dNode.ts

@@ -1,22 +0,0 @@
-module BABYLON {
-    /**
-     * This is the class that is used to display a World Space Canvas into a 3D scene
-     */
-    export class WorldSpaceCanvas2DNode extends Mesh {
-        constructor(name: string, scene: Scene, canvas: Canvas2D) {
-            super(name, scene);
-
-            this._canvas = canvas;
-        }
-
-        public dispose(): void {
-            super.dispose();
-            if (this._canvas) {
-                this._canvas.dispose();
-                this._canvas = null;
-            }
-        }
-
-        private _canvas: Canvas2D;
-    }
-}

canvas2D/src/GUI/Layouts/babylon.gui.stackPanel.ts

@@ -1,106 +0,0 @@
-module BABYLON {
-
-    @className("StackPanel", "BABYLON")
-    export class StackPanel extends UIElement {
-
-        static STACKPANEL_PROPCOUNT = UIElement.UIELEMENT_PROPCOUNT + 3;
-
-        static orientationHorizontalProperty: Prim2DPropInfo;
-
-        constructor(settings?: {
-
-            id                      ?: string,
-            parent                  ?: UIElement,
-            children                ?: Array<UIElement>,
-            templateName            ?: string,
-            styleName               ?: string,
-            isOrientationHorizontal ?: any,
-            marginTop               ?: number | string,
-            marginLeft              ?: number | string,
-            marginRight             ?: number | string,
-            marginBottom            ?: number | string,
-            margin                  ?: number | string,
-            marginHAlignment        ?: number,
-            marginVAlignment        ?: number,
-            marginAlignment         ?: string,
-            paddingTop              ?: number | string,
-            paddingLeft             ?: number | string,
-            paddingRight            ?: number | string,
-            paddingBottom           ?: number | string,
-            padding                 ?: string,
-            paddingHAlignment       ?: number,
-            paddingVAlignment       ?: number,
-            paddingAlignment        ?: string,
-        }) {
-            if (!settings) {
-                settings = {};
-            }
-
-            super(settings);
-
-            this.isOrientationHorizontal = (settings.isOrientationHorizontal == null) ? true : settings.isOrientationHorizontal;
-            this._children = new Array<UIElement>();
-
-            if (settings.children != null) {
-                for (let child of settings.children) {
-                    this._children.push(child);
-                }
-            }
-
-        }
-
-        @dependencyProperty(StackPanel.STACKPANEL_PROPCOUNT + 0, pi => StackPanel.orientationHorizontalProperty = pi)
-        public get isOrientationHorizontal(): boolean {
-            return this._isOrientationHorizontal;
-        }
-
-        public set isOrientationHorizontal(value: boolean) {
-            this._isOrientationHorizontal = value;
-        }
-
-        protected createVisualTree() {
-            super.createVisualTree();
-
-            // A StackPanel Control has a Group2D, child of the visualPlaceHolder, which is the Children placeholder.
-            // The Children UIElement Tree will be create inside this placeholder.
-            this._childrenPlaceholder = new Group2D({ parent: this._visualPlaceholder, id: `StackPanel Children Placeholder of ${this.id}` });
-            let p = this._childrenPlaceholder;
-
-            p.layoutEngine = this.isOrientationHorizontal ? StackPanelLayoutEngine.Horizontal : StackPanelLayoutEngine.Vertical;
-
-            // The UIElement padding properties (padding and paddingAlignment) are bound to the Group2D Children placeholder, we bound to the Margin properties as the Group2D acts as an inner element already, so margin of inner is padding.
-            p.dataSource = this;
-            p.createSimpleDataBinding(Prim2DBase.marginProperty, "padding", DataBinding.MODE_ONEWAY);
-            p.createSimpleDataBinding(Prim2DBase.marginAlignmentProperty, "paddingAlignment", DataBinding.MODE_ONEWAY);
-
-            // The UIElement set the childrenPlaceholder with the visual returned by the renderingTemplate.
-            // But it's not the case for a StackPanel, the placeholder of UIElement Children (the content)
-            this._visualChildrenPlaceholder = this._childrenPlaceholder;
-        }
-
-        public get children(): Array<UIElement> {
-            return this._children;
-        }
-
-        protected _getChildren(): Array<UIElement> {
-            return this.children;
-        }
-
-        private _childrenPlaceholder: Group2D;
-        private _children;
-        private _isOrientationHorizontal: boolean;
-    }
-
-
-    @registerWindowRenderingTemplate("BABYLON.StackPanel", "Default", () => new DefaultStackPanelRenderingTemplate())
-    export class DefaultStackPanelRenderingTemplate extends UIElementRenderingTemplateBase {
-
-        createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase; contentPlaceholder: Prim2DBase } {
-            return { root: visualPlaceholder, contentPlaceholder: visualPlaceholder };
-        }
-
-        attach(owner: UIElement): void {
-            super.attach(owner);
-        }
-    }
-}

canvas2D/src/GUI/babylon.gui.UIElement.ts

@@ -1,960 +0,0 @@
-module BABYLON {
-
-    export interface ICommand {
-        canExecute(parameter: any): boolean;
-        execute(parameter: any): void;
-        canExecuteChanged: Observable<void>;
-    }
-
-    export class Command implements ICommand {
-        constructor(execute: (p) => void, canExecute: (p) => boolean) {
-            if (!execute) {
-                throw Error("At least an execute lambda must be given at Command creation time");
-            }
-
-            this._canExecuteChanged    = null;
-            this._lastCanExecuteResult = null;
-            this.execute               = execute;
-            this.canExecute            = canExecute;
-        }
-
-        canExecute(parameter): boolean {
-            let res = true;
-
-            if (this._canExecute) {
-                res = this._canExecute(parameter);
-            }
-
-            if (res !== this._lastCanExecuteResult) {
-                if (this._canExecuteChanged && this._canExecuteChanged.hasObservers()) {
-                    this._canExecuteChanged.notifyObservers(null);
-                }
-
-                this._lastCanExecuteResult = res;
-            }
-
-            return res;
-        }
-
-        execute(parameter): void {
-            this._execute(parameter);
-        }
-
-        get canExecuteChanged(): Observable<void> {
-            if (!this._canExecuteChanged) {
-                this._canExecuteChanged = new Observable<void>();
-            }
-            return this._canExecuteChanged;
-        }
-
-        private _lastCanExecuteResult: boolean;
-        private _execute: (p) => void;
-        private _canExecute: (p) => boolean;
-        private _canExecuteChanged: Observable<void>;
-    }
-
-    export abstract class UIElement extends SmartPropertyBase {
-
-        static get enabledState(): string {
-            return UIElement._enableState;
-        }
-
-        static get disabledState(): string {
-            return UIElement._disabledState;
-        }
-
-        static get mouseOverState(): string {
-            return UIElement._mouseOverState;
-        }
-
-        static UIELEMENT_PROPCOUNT: number = 16;
-
-        static parentProperty          : Prim2DPropInfo;
-        static widthProperty           : Prim2DPropInfo;
-        static heightProperty          : Prim2DPropInfo;
-        static minWidthProperty        : Prim2DPropInfo;
-        static minHeightProperty       : Prim2DPropInfo;
-        static maxWidthProperty        : Prim2DPropInfo;
-        static maxHeightProperty       : Prim2DPropInfo;
-        static actualWidthProperty     : Prim2DPropInfo;
-        static actualHeightProperty    : Prim2DPropInfo;
-        static marginProperty          : Prim2DPropInfo;
-        static paddingProperty         : Prim2DPropInfo;
-        static marginAlignmentProperty : Prim2DPropInfo;
-        static paddingAlignmentProperty: Prim2DPropInfo;
-        static isEnabledProperty       : Prim2DPropInfo;
-        static isFocusedProperty       : Prim2DPropInfo;
-        static isMouseOverProperty     : Prim2DPropInfo;
-
-        constructor(settings: {
-            id               ?: string,
-            parent           ?: UIElement,
-            templateName     ?: string,
-            styleName        ?: string,
-            minWidth         ?: number,
-            minHeight        ?: number,
-            maxWidth         ?: number,
-            maxHeight        ?: number,
-            width            ?: number,
-            height           ?: number,
-            marginTop        ?: number | string,
-            marginLeft       ?: number | string,
-            marginRight      ?: number | string,
-            marginBottom     ?: number | string,
-            margin           ?: number | string,
-            marginHAlignment ?: number,
-            marginVAlignment ?: number,
-            marginAlignment  ?: string,
-            paddingTop       ?: number | string,
-            paddingLeft      ?: number | string,
-            paddingRight     ?: number | string,
-            paddingBottom    ?: number | string,
-            padding          ?: string,
-            paddingHAlignment?: number,
-            paddingVAlignment?: number,
-            paddingAlignment ?: string,
-        }) {
-            super();
-
-            if (!settings) {
-                throw Error("A settings object must be passed with at least either a parent or owner parameter");
-            }
-
-            let type                        = Tools.getFullClassName(this);
-            this._ownerWindow               = null;
-            this._parent                    = null;
-            this._visualPlaceholder         = null;
-            this._visualTemplateRoot        = null;
-            this._visualChildrenPlaceholder = null;
-            this._hierarchyDepth            = 0;
-            this._renderingTemplateName     = (settings.templateName != null) ? settings.templateName : GUIManager.DefaultTemplateName;
-            this._style                     = (settings.styleName!=null) ? GUIManager.getStyle(type, settings.styleName) : null;
-            this._flags                     = 0;
-            this._id                        = (settings.id!=null) ? settings.id : null;
-            this._uid                       = null;
-            this._width                     = (settings.width     != null) ? settings.width     : null;
-            this._height                    = (settings.height    != null) ? settings.height    : null;
-            this._minWidth                  = (settings.minWidth  != null) ? settings.minWidth  : 0;
-            this._minHeight                 = (settings.minHeight != null) ? settings.minHeight : 0;
-            this._maxWidth                  = (settings.maxWidth  != null) ? settings.maxWidth  : Number.MAX_VALUE;
-            this._maxHeight                 = (settings.maxHeight != null) ? settings.maxHeight : Number.MAX_VALUE;
-            this._margin                    = null;
-            this._padding                   = null;
-            this._marginAlignment           = null;
-
-            this._setFlags(UIElement.flagIsVisible|UIElement.flagIsEnabled);
-
-            // Default Margin Alignment for UIElement is stretch for horizontal/vertical and not left/bottom (which is the default for Canvas2D Primitives)
-            //this.marginAlignment.horizontal = PrimitiveAlignment.AlignStretch;
-            //this.marginAlignment.vertical   = PrimitiveAlignment.AlignStretch;
-
-            // Set the layout/margin stuffs
-            if (settings.marginTop) {
-                this.margin.setTop(settings.marginTop);
-            }
-            if (settings.marginLeft) {
-                this.margin.setLeft(settings.marginLeft);
-            }
-            if (settings.marginRight) {
-                this.margin.setRight(settings.marginRight);
-            }
-            if (settings.marginBottom) {
-                this.margin.setBottom(settings.marginBottom);
-            }
-
-            if (settings.margin) {
-                if (typeof settings.margin === "string") {
-                    this.margin.fromString(<string>settings.margin);
-                } else {
-                    this.margin.fromUniformPixels(<number>settings.margin);
-                }
-            }
-
-            if (settings.marginHAlignment) {
-                this.marginAlignment.horizontal = settings.marginHAlignment;
-            }
-
-            if (settings.marginVAlignment) {
-                this.marginAlignment.vertical = settings.marginVAlignment;
-            }
-
-            if (settings.marginAlignment) {
-                this.marginAlignment.fromString(settings.marginAlignment);
-            }
-
-            if (settings.paddingTop) {
-                this.padding.setTop(settings.paddingTop);
-            }
-            if (settings.paddingLeft) {
-                this.padding.setLeft(settings.paddingLeft);
-            }
-            if (settings.paddingRight) {
-                this.padding.setRight(settings.paddingRight);
-            }
-            if (settings.paddingBottom) {
-                this.padding.setBottom(settings.paddingBottom);
-            }
-
-            if (settings.padding) {
-                this.padding.fromString(settings.padding);
-            }
-
-            if (settings.paddingHAlignment) {
-                this.paddingAlignment.horizontal = settings.paddingHAlignment;
-            }
-
-            if (settings.paddingVAlignment) {
-                this.paddingAlignment.vertical = settings.paddingVAlignment;
-            }
-
-            if (settings.paddingAlignment) {
-                this.paddingAlignment.fromString(settings.paddingAlignment);
-            }
-
-            if (settings.parent != null) {
-                this._parent = settings.parent;
-                this._hierarchyDepth = this._parent._hierarchyDepth + 1;
-            }
-        }
-
-        public dispose(): boolean {
-            if (this.isDisposed) {
-                return false;
-            }
-
-            if (this._renderingTemplate) {
-                this._renderingTemplate.detach();
-                this._renderingTemplate = null;
-            }
-
-            super.dispose();
-
-            // Don't set to null, it may upset somebody...
-            this.animations.splice(0);
-
-            return true;
-        }
-
-        /**
-         * Animation array, more info: http://doc.babylonjs.com/tutorials/Animations
-         */
-        public animations: Animation[];
-
-        /**
-         * Returns as a new array populated with the Animatable used by the primitive. Must be overloaded by derived primitives.
-         * Look at Sprite2D for more information
-         */
-        public getAnimatables(): IAnimatable[] {
-            return new Array<IAnimatable>();
-        }
-
-        // TODO
-
-        // PROPERTIES
-
-        // Style
-        // Id
-        // Parent/Children
-        // ActualWidth/Height, MinWidth/Height, MaxWidth/Height,
-        // Alignment/Margin
-        // Visibility, IsVisible
-        // IsEnabled (is false, control is disabled, no interaction and a specific render state)
-        // CacheMode of Visual Elements
-        // Focusable/IsFocused
-        // IsPointerCaptured, CapturePointer, IsPointerDirectlyOver, IsPointerOver. De-correlate mouse, stylus, touch?
-        // ContextMenu
-        // Cursor
-        // DesiredSize
-        // IsInputEnable ?
-        // Opacity, OpacityMask ?
-        // SnapToDevicePixels
-        // Tag
-        // ToolTip
-
-        // METHODS
-
-        // BringIntoView (for scrollable content, to move the scroll to bring the given element visible in the parent's area)
-        // Capture/ReleaseCapture (mouse, touch, stylus)
-        // Focus
-        // PointFrom/ToScreen to translate coordinates
-
-        // EVENTS
-
-        // ContextMenuOpening/Closing/Changed
-        // DragEnter/LeaveOver, Drop
-        // Got/LostFocus
-        // IsEnabledChanged
-        // IsPointerOver/DirectlyOverChanged
-        // IsVisibleChanged
-        // KeyDown/Up
-        // LayoutUpdated ?
-        // Pointer related events
-        // SizeChanged
-        // ToolTipOpening/Closing
-
-        public findById(id: string): UIElement {
-            if (this._id === id) {
-                return this;
-            }
-
-            let children = this._getChildren();
-            for (let child of children) {
-                let r = child.findById(id);
-                if (r != null) {
-                    return r;
-                }
-            }
-        }
-
-        public get ownerWindow(): Window {
-            return this._ownerWindow;
-        }
-
-        public get style(): string {
-            if (!this.style) {
-                return GUIManager.DefaultStyleName;
-            }
-            return this._style.name;
-        }
-
-        public set style(value: string) {
-            if (this._style && (this._style.name === value)) {
-                return;
-            }
-
-            let newStyle: UIElementStyle = null;
-            if (value) {
-                newStyle = GUIManager.getStyle(Tools.getFullClassName(this), value);
-                if (!newStyle) {
-                    throw Error(`Couldn't find Style ${value} for UIElement ${Tools.getFullClassName(this)}`);
-                }
-            }
-
-            if (this._style) {
-                this._style.removeStyle(this);
-            }
-
-            if (newStyle) {
-                newStyle.applyStyle(this);
-            }
-            
-            this._style = newStyle;
-        }
-
-        /**
-         * A string that identifies the UIElement.
-         * The id is optional and there's possible collision with other UIElement's id as the uniqueness is not supported.
-         */
-        public get id(): string {
-            return this._id;
-        }
-
-        public set id(value: string) {
-            if (this._id === value) {
-                return;
-            }
-
-            this._id = value;
-        }
-
-        /**
-         * Return a unique id automatically generated.
-         * This property is mainly used for serialization to ensure a perfect way of identifying a UIElement
-         */
-        public get uid(): string {
-            if (!this._uid) {
-                this._uid = Tools.RandomId();
-            }
-            return this._uid;
-        }
-
-        public get hierarchyDepth(): number {
-            return this._hierarchyDepth;
-        }
-
-        @dependencyProperty(0, pi => UIElement.parentProperty = pi)
-        public get parent(): UIElement {
-            return this._parent;
-        }
-
-        public set parent(value: UIElement) {
-            this._parent = value;
-        }
-
-        @dependencyProperty(1, pi => UIElement.widthProperty = pi)
-        public get width(): number {
-            return this._width;
-        }
-
-        public set width(value: number) {
-            this._width = value;
-        }
-
-        @dependencyProperty(2, pi => UIElement.heightProperty = pi)
-        public get height(): number {
-            return this._height;
-        }
-
-        public set height(value: number) {
-            this._height = value;
-        }
-
-        @dependencyProperty(3, pi => UIElement.minWidthProperty = pi)
-        public get minWidth(): number {
-            return this._minWidth;
-        }
-
-        public set minWidth(value: number) {
-            this._minWidth = value;
-        }
-
-        @dependencyProperty(4, pi => UIElement.minHeightProperty = pi)
-        public get minHheight(): number {
-            return this._minHeight;
-        }
-
-        public set minHeight(value: number) {
-            this._minHeight = value;
-        }
-
-        @dependencyProperty(5, pi => UIElement.maxWidthProperty = pi)
-        public get maxWidth(): number {
-            return this._maxWidth;
-        }
-
-        public set maxWidth(value: number) {
-            this._maxWidth = value;
-        }
-
-        @dependencyProperty(6, pi => UIElement.maxHeightProperty = pi)
-        public get maxHeight(): number {
-            return this._maxHeight;
-        }
-
-        public set maxHeight(value: number) {
-            this._maxHeight = value;
-        }
-
-        @dependencyProperty(7, pi => UIElement.actualWidthProperty = pi)
-        public get actualWidth(): number {
-            return this._actualWidth;
-        }
-
-        public set actualWidth(value: number) {
-            this._actualWidth = value;
-        }
-
-        @dependencyProperty(8, pi => UIElement.actualHeightProperty = pi)
-        public get actualHeight(): number {
-            return this._actualHeight;
-        }
-
-        public set actualHeight(value: number) {
-            this._actualHeight = value;
-        }
-
-        @dynamicLevelProperty(9, pi => UIElement.marginProperty = pi)
-        /**
-         * You can get/set a margin on the primitive through this property
-         * @returns the margin object, if there was none, a default one is created and returned
-         */
-        public get margin(): PrimitiveThickness {
-            if (!this._margin) {
-                this._margin = new PrimitiveThickness(() => {
-                    if (!this.parent) {
-                        return null;
-                    }
-                    return this.parent.margin;
-                });
-            }
-            return this._margin;
-        }
-
-        public set margin(value: PrimitiveThickness) {
-            this.margin.copyFrom(value);
-        }
-
-        public get _hasMargin(): boolean {
-            return (this._margin !== null && !this._margin.isDefault) || (this._marginAlignment !== null && !this._marginAlignment.isDefault);
-        }
-
-        @dynamicLevelProperty(10, pi => UIElement.paddingProperty = pi)
-        /**
-         * You can get/set a margin on the primitive through this property
-         * @returns the margin object, if there was none, a default one is created and returned
-         */
-        public get padding(): PrimitiveThickness {
-            if (!this._padding) {
-                this._padding = new PrimitiveThickness(() => {
-                    if (!this.parent) {
-                        return null;
-                    }
-                    return this.parent.padding;
-                });
-            }
-            return this._padding;
-        }
-
-        public set padding(value: PrimitiveThickness) {
-            this.padding.copyFrom(value);
-        }
-
-        private get _hasPadding(): boolean {
-            return this._padding !== null && !this._padding.isDefault;
-        }
-
-        @dynamicLevelProperty(11, pi => UIElement.marginAlignmentProperty = pi)
-        /**
-         * You can get/set the margin alignment through this property
-         */
-        public get marginAlignment(): PrimitiveAlignment {
-            if (!this._marginAlignment) {
-                this._marginAlignment = new PrimitiveAlignment();
-            }
-            return this._marginAlignment;
-        }
-
-        public set marginAlignment(value: PrimitiveAlignment) {
-            this.marginAlignment.copyFrom(value);
-        }
-
-        /**
-         * Check if there a marginAlignment specified (non null and not default)
-         */
-        public get _hasMarginAlignment(): boolean {
-            return (this._marginAlignment !== null && !this._marginAlignment.isDefault);
-        }
-
-        @dynamicLevelProperty(12, pi => UIElement.paddingAlignmentProperty = pi)
-        /**
-         * You can get/set the margin alignment through this property
-         */
-        public get paddingAlignment(): PrimitiveAlignment {
-            if (!this._paddingAlignment) {
-                this._paddingAlignment = new PrimitiveAlignment();
-            }
-            return this._paddingAlignment;
-        }
-
-        public set paddingAlignment(value: PrimitiveAlignment) {
-            this.paddingAlignment.copyFrom(value);
-        }
-
-        /**
-         * Check if there a marginAlignment specified (non null and not default)
-         */
-        public get _hasPaddingAlignment(): boolean {
-            return (this._paddingAlignment !== null && !this._paddingAlignment.isDefault);
-        }
-
-        public get isVisible(): boolean {
-            return this._isFlagSet(UIElement.flagIsVisible);
-        }
-
-        public set isVisible(value: boolean) {
-            if (this.isVisible === value) {
-                return;
-            }
-
-            this._visualPlaceholder.levelVisible = value;
-
-            this._changeFlags(UIElement.flagIsVisible, value);
-        }
-
-        @dynamicLevelProperty(13, pi => UIElement.isEnabledProperty = pi)
-        /**
-         * True if the UIElement is enabled, false if it's disabled.
-         * User interaction is not possible if the UIElement is not enabled
-         */
-        public get isEnabled(): boolean {
-            return this._isFlagSet(UIElement.flagIsEnabled);
-        }
-
-        public set isEnabled(value: boolean) {
-            this._changeFlags(UIElement.flagIsEnabled, value);
-        }
-
-        @dynamicLevelProperty(14, pi => UIElement.isFocusedProperty = pi)
-        /**
-         * True if the UIElement has the focus, false if it doesn't
-         */
-        public get isFocused(): boolean {
-            return this._isFlagSet(UIElement.flagIsFocus);
-        }
-
-        public set isFocused(value: boolean) {
-            // If the UIElement doesn't accept focus, set it on its parent
-            if (!this.isFocusable) {
-                let p = this.parent;
-                if (!p) {
-                    return;
-                }
-                p.isFocused = value;
-            }
-
-            // If the focus is being set, notify the Focus Manager
-            if (value) {
-                this.ownerWindow.focusManager.setFocusOn(this, this.getFocusScope());
-            }
-
-            this._changeFlags(UIElement.flagIsFocus, value);
-        }
-
-        @dynamicLevelProperty(15, pi => UIElement.isMouseOverProperty = pi)
-        /**
-         * True if the UIElement has the mouse over it
-         */
-        public get isMouseOver(): boolean {
-            return this._isFlagSet(UIElement.flagIsMouseOver);
-        }
-
-        public set isMouseOver(value: boolean) {
-            this._changeFlags(UIElement.flagIsMouseOver, value);
-        }
-
-        public get isFocusScope(): boolean {
-            return this._isFlagSet(UIElement.flagIsFocusScope);
-        }
-
-        public set isFocusScope(value: boolean) {
-            this._changeFlags(UIElement.flagIsFocusScope, value);
-        }
-
-        public get isFocusable(): boolean {
-            return this._isFlagSet(UIElement.flagIsFocusable);
-        }
-
-        public set isFocusable(value: boolean) {
-            this._changeFlags(UIElement.flagIsFocusable, value);
-        }
-
-        // Look for the nearest parent which is the focus scope. Should always return something as the Window UIElement which is the root of all UI Tree is focus scope (unless the user disable it)
-        protected getFocusScope(): UIElement {
-            if (this.isFocusScope) {
-                return this;
-            }
-
-            let p = this.parent;
-            if (!p) {
-                return null;
-            }
-
-            return p.getFocusScope();
-        }
-
-        /**
-         * Check if a given flag is set
-         * @param flag the flag value
-         * @return true if set, false otherwise
-         */
-        public _isFlagSet(flag: number): boolean {
-            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
-         */
-        public _areAllFlagsSet(flags: number): boolean {
-            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
-         */
-        public _areSomeFlagsSet(flags: number): boolean {
-            return (this._flags & flags) !== 0;
-        }
-
-        /**
-         * Clear the given flags
-         * @param flags the flags to clear
-         */
-        public _clearFlags(flags: number) {
-            this._flags &= ~flags;
-        }
-
-        /**
-         * Set the given flags to true state
-         * @param flags the flags ORed to set
-         * @return the flags state before this call
-         */
-        public _setFlags(flags: number): number {
-            let 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
-         */
-        public _changeFlags(flags: number, state: boolean) {
-            if (state) {
-                this._flags |= flags;
-            } else {
-                this._flags &= ~flags;
-            }
-        }
-
-        private _assignTemplate(templateName: string) {
-            if (!templateName) {
-                templateName = GUIManager.DefaultTemplateName;
-            }
-            let className = Tools.getFullClassName(this);
-            if (!className) {
-                throw Error("Couldn't access class name of this UIElement, you have to decorate the type with the className decorator");
-            }
-
-            let factory = GUIManager.getRenderingTemplate(className, templateName);
-            if (!factory) {
-                throw Error(`Couldn't get the renderingTemplate ${templateName} of class ${className}`);
-            }
-
-            this._renderingTemplateName = templateName;
-            this._renderingTemplate = factory();
-            this._renderingTemplate.attach(this);
-        }
-
-        public _createVisualTree() {
-            let parentPrim: Prim2DBase = this.ownerWindow.canvas;
-            if (this.parent) {
-                parentPrim = this.parent.visualChildrenPlaceholder;
-            }
-
-            if (!this._renderingTemplate) {
-                this._assignTemplate(this._renderingTemplateName);               
-            }
-
-            this._visualPlaceholder = new Group2D({ parent: parentPrim, id: `GUI ${Tools.getClassName(this)} RootGroup of ${this.id}`});
-            let p = this._visualPlaceholder;
-            p.addExternalData<UIElement>("_GUIOwnerElement_", this);
-            p.dataSource = this;
-
-            p.createSimpleDataBinding(Prim2DBase.widthProperty          , "width"          , DataBinding.MODE_ONEWAY);
-            p.createSimpleDataBinding(Prim2DBase.heightProperty         , "height"         , DataBinding.MODE_ONEWAY);
-            p.createSimpleDataBinding(Prim2DBase.actualWidthProperty    , "actualWidth"    , DataBinding.MODE_ONEWAYTOSOURCE);
-            p.createSimpleDataBinding(Prim2DBase.actualHeightProperty   , "actualHeight"   , DataBinding.MODE_ONEWAYTOSOURCE);
-            p.createSimpleDataBinding(Prim2DBase.marginProperty         , "margin"         , DataBinding.MODE_ONEWAY);
-            p.createSimpleDataBinding(Prim2DBase.marginAlignmentProperty, "marginAlignment", DataBinding.MODE_ONEWAY);
-            this.createVisualTree();
-        }
-
-        public _patchUIElement(ownerWindow: Window, parent: UIElement) {
-            if (ownerWindow) {
-                if (!this._ownerWindow) {
-                    ownerWindow._registerVisualToBuild(this);
-                }
-                this._ownerWindow = ownerWindow;
-            }
-            this._parent = parent;
-
-            if (parent) {
-                this._hierarchyDepth = parent.hierarchyDepth + 1;
-            }
-
-            let children = this._getChildren();
-            if (children) {
-                for (let curChild of children) {
-                    curChild._patchUIElement(ownerWindow, this);
-                }
-            }
-        }
-
-        // Overload the SmartPropertyBase's method to provide the additional logic of returning the parent's dataSource if there's no dataSource specified at this level.
-        protected _getDataSource(): IPropertyChanged {
-            let levelDS = super._getDataSource();
-            if (levelDS != null) {
-                return levelDS;
-            }
-
-            let p = this.parent;
-            if (p != null) {
-                return p.dataSource;
-            }
-
-            return null;
-        }
-
-        protected createVisualTree() {
-            let res = this._renderingTemplate.createVisualTree(this, this._visualPlaceholder);
-            this._visualTemplateRoot = res.root;
-            this._visualChildrenPlaceholder = res.contentPlaceholder;
-        }
-
-        protected get visualPlaceholder(): Prim2DBase {
-            return this._visualPlaceholder;
-        }
-
-        protected get visualTemplateRoot(): Prim2DBase {
-            return this._visualTemplateRoot;
-        }
-
-        protected get visualChildrenPlaceholder(): Prim2DBase {
-            return this._visualChildrenPlaceholder;
-        }
-
-        protected get _position(): Vector2 { return null; } // TODO use abstract keyword when TS 2.0 will be approved
-        protected abstract _getChildren(): Array<UIElement>;
-
-        public static flagVisualToBuild = 0x0000001;
-        public static flagIsVisible     = 0x0000002;
-        public static flagIsFocus       = 0x0000004;
-        public static flagIsFocusScope  = 0x0000008;
-        public static flagIsFocusable   = 0x0000010;
-        public static flagIsEnabled     = 0x0000020;
-        public static flagIsMouseOver   = 0x0000040;
-
-        protected _visualPlaceholder: Group2D;
-        protected _visualTemplateRoot: Prim2DBase;
-        protected _visualChildrenPlaceholder: Prim2DBase;
-        private _renderingTemplateName: string;
-        protected _renderingTemplate: UIElementRenderingTemplateBase;
-        private _parent: UIElement;
-        private _hierarchyDepth: number;
-        private _flags: number;
-        private _style: UIElementStyle;
-        private _ownerWindow: Window;
-        private _id: string;
-        private _uid: string;
-        private _actualWidth: number;
-        private _actualHeight: number;
-        private _minWidth: number;
-        private _minHeight: number;
-        private _maxWidth: number;
-        private _maxHeight: number;
-        private _width: number;
-        private _height: number;
-        private _margin: PrimitiveThickness;
-        private _padding: PrimitiveThickness;
-        private _marginAlignment: PrimitiveAlignment;
-        private _paddingAlignment: PrimitiveAlignment;
-
-        private static _enableState = "Enabled";
-        private static _disabledState = "Disabled";
-        private static _mouseOverState = "MouseOver";
-    }
-
-    export abstract class UIElementStyle {
-        abstract removeStyle(uiel: UIElement);
-        abstract applyStyle(uiel: UIElement);
-        get name(): string { return null; } // TODO use abstract keyword when TS 2.0 will be approved
-    }
-
-    export class GUIManager {
-
-        /////////////////////////////////////////////////////////////////////////////////////////////////////
-        // DATA TEMPLATE MANAGER
-
-        static registerDataTemplate(className: string, factory: (parent: UIElement, dataObject: any) => UIElement) {
-            
-        }
-
-        // DATA TEMPLATE MANAGER
-        /////////////////////////////////////////////////////////////////////////////////////////////////////
-
-        /////////////////////////////////////////////////////////////////////////////////////////////////////
-        // STYLE MANAGER
-
-        static getStyle(uiElType: string, styleName: string): UIElementStyle {
-            let styles = GUIManager.stylesByUIElement.get(uiElType);
-            if (!styles) {
-                throw Error(`The type ${uiElType} is unknown, no style were registered for it.`);
-            }
-            let style = styles.get(styleName);
-            if (!style) {
-                throw Error(`Couldn't find Template ${styleName} of UIElement type ${uiElType}`);
-            }
-            return style;
-        }
-
-        static registerStyle(uiElType: string, templateName: string, style: UIElementStyle) {
-            let templates = GUIManager.stylesByUIElement.getOrAddWithFactory(uiElType, () => new StringDictionary<UIElementStyle>());
-            if (templates.contains(templateName)) {
-                templates[templateName] = style;
-            } else {
-                templates.add(templateName, style);
-            }
-        }
-
-        static stylesByUIElement: StringDictionary<StringDictionary<UIElementStyle>> = new StringDictionary<StringDictionary<UIElementStyle>>();
-
-        public static get DefaultStyleName(): string {
-            return GUIManager._defaultStyleName;
-        }
-
-        public static set DefaultStyleName(value: string) {
-            GUIManager._defaultStyleName = value;
-        }
-
-        // STYLE MANAGER
-        /////////////////////////////////////////////////////////////////////////////////////////////////////
-
-        /////////////////////////////////////////////////////////////////////////////////////////////////////
-        // RENDERING TEMPLATE MANAGER
-        static getRenderingTemplate(uiElType: string, templateName: string): () => UIElementRenderingTemplateBase {
-            let templates = GUIManager.renderingTemplatesByUIElement.get(uiElType);
-            if (!templates) {
-                throw Error(`The type ${uiElType} is unknown, no Rendering Template were registered for it.`);
-            }
-            let templateFactory = templates.get(templateName);
-            if (!templateFactory) {
-                throw Error(`Couldn't find Template ${templateName} of UI Element type ${uiElType}`);
-            }
-            return templateFactory;
-        }
-
-        static registerRenderingTemplate(uiElType: string, templateName: string, factory: () => UIElementRenderingTemplateBase) {
-            let templates = GUIManager.renderingTemplatesByUIElement.getOrAddWithFactory(uiElType, () => new StringDictionary<() => UIElementRenderingTemplateBase>());
-            if (templates.contains(templateName)) {
-                templates[templateName] = factory;
-            } else {
-                templates.add(templateName, factory);
-            }
-        }
-
-        static renderingTemplatesByUIElement: StringDictionary<StringDictionary<() => UIElementRenderingTemplateBase>> = new StringDictionary<StringDictionary<() => UIElementRenderingTemplateBase>>();
-
-        public static get DefaultTemplateName(): string {
-            return GUIManager._defaultTemplateName;
-        }
-
-        public static set DefaultTemplateName(value: string) {
-            GUIManager._defaultTemplateName = value;
-        }
-
-        // RENDERING TEMPLATE MANAGER
-        /////////////////////////////////////////////////////////////////////////////////////////////////////
-
-        private static _defaultTemplateName = "Default";
-        private static _defaultStyleName = "Default";
-    }
-
-    export abstract class UIElementRenderingTemplateBase {
-        attach(owner: UIElement) {
-            this._owner = owner;
-        }
-        detach() {
-            
-        }
-
-        public get owner(): UIElement {
-            return this._owner;
-        }
-
-        abstract createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase, contentPlaceholder: Prim2DBase };
-
-        private _owner: UIElement;
-    }
-
-    export function registerWindowRenderingTemplate(uiElType: string, templateName: string, factory: () => UIElementRenderingTemplateBase): (target: Object) => void {
-        return () => {
-            GUIManager.registerRenderingTemplate(uiElType, templateName, factory);
-        }
-    }
-
-}

canvas2D/src/GUI/babylon.gui.button.ts

@@ -1,239 +0,0 @@
-module BABYLON {
-
-    @className("Button", "BABYLON")
-    export class Button extends ContentControl {
-
-        static get pushedState() {
-            return Button._pushedState;
-        }
-
-        static BUTTON_PROPCOUNT = ContentControl.CONTENTCONTROL_PROPCOUNT + 3;
-
-        static isPushedProperty: Prim2DPropInfo;
-        static isDefaultProperty: Prim2DPropInfo;
-        static isOutlineProperty: Prim2DPropInfo;
-
-        constructor(settings?: {
-
-            id               ?: string,
-            parent           ?: UIElement,
-            templateName     ?: string,
-            styleName        ?: string,
-            content          ?: any,
-            marginTop        ?: number | string,
-            marginLeft       ?: number | string,
-            marginRight      ?: number | string,
-            marginBottom     ?: number | string,
-            margin           ?: number | string,
-            marginHAlignment ?: number,
-            marginVAlignment ?: number,
-            marginAlignment  ?: string,
-            paddingTop       ?: number | string,
-            paddingLeft      ?: number | string,
-            paddingRight     ?: number | string,
-            paddingBottom    ?: number | string,
-            padding          ?: string,
-            paddingHAlignment?: number,
-            paddingVAlignment?: number,
-            paddingAlignment ?: string,
-        }) {
-            if (!settings) {
-                settings = {};
-            }
-
-            super(settings);
-
-            if (settings.paddingAlignment == null) {
-                this.paddingAlignment.horizontal = PrimitiveAlignment.AlignCenter;
-                this.paddingAlignment.vertical = PrimitiveAlignment.AlignCenter;
-            }
-
-            this._normalStateBackground  = new ObservableStringDictionary<IBrush2D>(false);
-            this._normalStateBorder      = new ObservableStringDictionary<IBrush2D>(false);
-            this._defaultStateBackground = new ObservableStringDictionary<IBrush2D>(false);
-            this._defaultStateBorder     = new ObservableStringDictionary<IBrush2D>(false);
-
-            this._normalStateBackground.add(UIElement.enabledState   , Canvas2D.GetSolidColorBrushFromHex("#337AB7FF"));
-            this._normalStateBackground.add(UIElement.disabledState  , Canvas2D.GetSolidColorBrushFromHex("#7BA9D0FF"));
-            this._normalStateBackground.add(UIElement.mouseOverState , Canvas2D.GetSolidColorBrushFromHex("#286090FF"));
-            this._normalStateBackground.add(Button.pushedState       , Canvas2D.GetSolidColorBrushFromHex("#1E496EFF"));
-            this._normalStateBorder.add(UIElement.enabledState       , Canvas2D.GetSolidColorBrushFromHex("#2E6DA4FF"));
-            this._normalStateBorder.add(UIElement.disabledState      , Canvas2D.GetSolidColorBrushFromHex("#77A0C4FF"));
-            this._normalStateBorder.add(UIElement.mouseOverState     , Canvas2D.GetSolidColorBrushFromHex("#204D74FF"));
-            this._normalStateBorder.add(Button.pushedState           , Canvas2D.GetSolidColorBrushFromHex("#2E5D9EFF"));
-
-            this._defaultStateBackground.add(UIElement.enabledState   , Canvas2D.GetSolidColorBrushFromHex("#FFFFFFFF"));
-            this._defaultStateBackground.add(UIElement.disabledState  , Canvas2D.GetSolidColorBrushFromHex("#FFFFFFFF"));
-            this._defaultStateBackground.add(UIElement.mouseOverState , Canvas2D.GetSolidColorBrushFromHex("#E6E6E6FF"));
-            this._defaultStateBackground.add(Button.pushedState       , Canvas2D.GetSolidColorBrushFromHex("#D4D4D4FF"));
-            this._defaultStateBorder.add(UIElement.enabledState       , Canvas2D.GetSolidColorBrushFromHex("#CCCCCCFF"));
-            this._defaultStateBorder.add(UIElement.disabledState      , Canvas2D.GetSolidColorBrushFromHex("#DEDEDEFF"));
-            this._defaultStateBorder.add(UIElement.mouseOverState     , Canvas2D.GetSolidColorBrushFromHex("#ADADADFF"));
-            this._defaultStateBorder.add(Button.pushedState           , Canvas2D.GetSolidColorBrushFromHex("#6C8EC5FF"));
-        }
-
-        @dependencyProperty(ContentControl.CONTROL_PROPCOUNT + 0, pi => Button.isPushedProperty = pi)
-        public get isPushed(): boolean {
-            return this._isPushed;
-        }
-
-        public set isPushed(value: boolean) {
-            this._isPushed = value;
-        }
-
-        @dependencyProperty(ContentControl.CONTROL_PROPCOUNT + 1, pi => Button.isDefaultProperty = pi)
-        public get isDefault(): boolean {
-            return this._isDefault;
-        }
-
-        public set isDefault(value: boolean) {
-            this._isDefault = value;
-        }
-
-        @dependencyProperty(ContentControl.CONTROL_PROPCOUNT + 2, pi => Button.isOutlineProperty = pi)
-        public get isOutline(): boolean {
-            return this._isOutline;
-        }
-
-        public set isOutline(value: boolean) {
-            this._isOutline = value;
-        }
-
-        public get clickObservable(): Observable<Button> {
-            if (!this._clickObservable) {
-                this._clickObservable = new Observable<Button>();
-            }
-            return this._clickObservable;
-        }
-
-        public _raiseClick() {
-            if (this._clickObservable && this._clickObservable.hasObservers()) {
-                this._clickObservable.notifyObservers(this);
-            }
-        }
-
-        protected createVisualTree() {
-            super.createVisualTree();
-            let p = this._visualPlaceholder;
-            p.pointerEventObservable.add((e, s) => {
-                // check if input must be discarded
-                if (!this.isVisible || !this.isEnabled) {
-                    return;
-                }
-
-                // We reject an event coming from the placeholder because it means it's on an empty spot, so it's not valid.
-                if (e.relatedTarget === this._visualPlaceholder) {
-                    return;
-                }
-
-                if (s.mask === PrimitivePointerInfo.PointerUp) {
-                    this._raiseClick();
-                    this.isPushed = false;
-                } else if (s.mask === PrimitivePointerInfo.PointerDown) {
-                    this.isPushed = true;
-                    this.isFocused = true;
-                }
-
-            }, PrimitivePointerInfo.PointerUp|PrimitivePointerInfo.PointerDown);
-        }
-
-        public get normalStateBackground(): ObservableStringDictionary<IBrush2D> {
-            return this._normalStateBackground;
-        }
-
-        public get defaultStateBackground(): ObservableStringDictionary<IBrush2D> {
-            return this._defaultStateBackground;
-        }
-
-        public get normalStateBorder(): ObservableStringDictionary<IBrush2D> {
-            return this._normalStateBorder;
-        }
-
-        public get defaultStateBorder(): ObservableStringDictionary<IBrush2D> {
-            return this._defaultStateBorder;
-        }
-
-        private _normalStateBackground: ObservableStringDictionary<IBrush2D>;
-        private _normalStateBorder: ObservableStringDictionary<IBrush2D>;
-        private _defaultStateBackground: ObservableStringDictionary<IBrush2D>;
-        private _defaultStateBorder: ObservableStringDictionary<IBrush2D>;
-        private _isPushed: boolean;
-        private _isDefault: boolean;
-        private _isOutline: boolean;
-        private _clickObservable: Observable<Button>;
-
-        private static _pushedState = "Pushed";
-    }
-
-    @registerWindowRenderingTemplate("BABYLON.Button", "Default", () => new DefaultButtonRenderingTemplate())
-    export class DefaultButtonRenderingTemplate extends UIElementRenderingTemplateBase {
-
-        createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase; contentPlaceholder: Prim2DBase } {
-            this._rect = new Rectangle2D({ parent: visualPlaceholder, fill: "#FF8080FF", border: "#FF8080FF", roundRadius: 10, borderThickness: 2 });
-
-            this.stateChange();
-            return { root: this._rect, contentPlaceholder: this._rect };
-        }
-
-        attach(owner: UIElement): void {
-            super.attach(owner);
-
-            this.owner.propertyChanged.add((e, s) => this.stateChange(),
-                UIElement.isEnabledProperty.flagId   |
-                UIElement.isFocusedProperty.flagId   |
-                UIElement.isMouseOverProperty.flagId |
-                Button.isDefaultProperty.flagId      |
-                Button.isOutlineProperty.flagId      |
-                Button.isPushedProperty.flagId);
-
-            // Register for brush change and update the Visual
-            let button = <Button>owner;
-            button.normalStateBackground.dictionaryChanged.add ((e, c) => this.stateChange());
-            button.normalStateBorder.dictionaryChanged.add     ((e, c) => this.stateChange());
-            button.defaultStateBackground.dictionaryChanged.add((e, c) => this.stateChange());
-            button.defaultStateBorder.dictionaryChanged.add    ((e, c) => this.stateChange());
-        }
-
-        stateChange(): void {
-            //console.log("state changed");
-            let b = <Button>this.owner;
-            let state = UIElement.enabledState;
-            let bg = b.isDefault ? b.defaultStateBackground.get(state) : b.normalStateBackground.get(state);
-            let bd = b.isDefault ? b.defaultStateBorder.get(state) : b.normalStateBorder.get(state);
-
-            if (b.isPushed) {
-                state = Button.pushedState;
-                if (b.isDefault) {
-                    bg = b.defaultStateBackground.get(state);
-                    bd = b.defaultStateBorder.get(state);
-                } else {
-                    bg = b.normalStateBackground.get(state);
-                    bd = b.normalStateBorder.get(state);
-                }
-            } else if (b.isMouseOver) {
-                state = UIElement.mouseOverState;
-                if (b.isDefault) {
-                    bg = b.defaultStateBackground.get(state);
-                    bd = b.defaultStateBorder.get(state);
-                } else {
-                    bg = b.normalStateBackground.get(state);
-                    bd = b.normalStateBorder.get(state);
-                }
-            } else if (!b.isEnabled) {
-                state = UIElement.disabledState;
-                if (b.isDefault) {
-                    bg = b.defaultStateBackground.get(state);
-                    bd = b.defaultStateBorder.get(state);
-                } else {
-                    bg = b.normalStateBackground.get(state);
-                    bd = b.normalStateBorder.get(state);
-                }
-            }
-
-            this._rect.fill = bg;
-            this._rect.border = bd;
-        }
-
-        private _rect: Rectangle2D;
-    }
-}

canvas2D/src/GUI/babylon.gui.contentControl.ts

@@ -1,128 +0,0 @@
-module BABYLON {
-
-
-    @className("ContentControl", "BABYLON")
-    export abstract class ContentControl extends Control {
-        static CONTENTCONTROL_PROPCOUNT = Control.CONTROL_PROPCOUNT + 2;
-
-        static contentProperty: Prim2DPropInfo;
-
-        constructor(settings?: {
-            id              ?: string,
-            templateName    ?: string,
-            styleName       ?: string,
-            content         ?: any,
-        }) {
-            if (!settings) {
-                settings = {};
-            }
-
-            super(settings);
-
-            if (settings.content!=null) {
-                this._content = settings.content;
-            }
-        }
-
-        dispose(): boolean {
-            if (this.isDisposed) {
-                return false;
-            }
-
-            if (this.content && this.content.dispose) {
-                this.content.dispose();
-                this.content = null;
-            }
-
-            if (this.__contentUIElement) {
-                this.__contentUIElement.dispose();
-                this.__contentUIElement = null;
-            }
-
-            super.dispose();
-
-            return true;
-        }
-
-        @dependencyProperty(Control.CONTROL_PROPCOUNT + 0, pi => ContentControl.contentProperty = pi)
-        public get content(): any {
-            return this._content;
-        }
-
-        public set content(value: any) {
-            this._content = value;
-        }
-
-        protected get _contentUIElement(): UIElement {
-            if (!this.__contentUIElement) {
-                this._buildContentUIElement();
-            }
-
-            return this.__contentUIElement;
-        }
-
-        public _createVisualTree() {
-            // Base implementation will create the Group2D for the Visual Placeholder and its Visual Tree
-            super._createVisualTree();
-
-            // A Content Control has a Group2D, child of the visualPlaceHolder, which is the Content placeholder.
-            // The Content UIElement Tree will be create inside this placeholder.
-            this._contentPlaceholder = new Group2D({ parent: this._visualPlaceholder, id: `ContentControl Content Placeholder of ${this.id}` });
-            let p = this._contentPlaceholder;
-
-            // The UIElement padding properties (padding and paddingAlignment) are bound to the Group2D Content placeholder, we bound to the Margin properties as the Group2D acts as an inner element already, so margin of inner is padding.
-            p.dataSource = this;
-            p.createSimpleDataBinding(Prim2DBase.marginProperty, "padding", DataBinding.MODE_ONEWAY);
-            p.createSimpleDataBinding(Prim2DBase.marginAlignmentProperty, "paddingAlignment", DataBinding.MODE_ONEWAY);
-
-            // The UIElement set the childrenPlaceholder with the visual returned by the renderingTemplate.
-            // But it's not the case for a ContentControl, the placeholder of UIElement Children (the content)
-            this._visualChildrenPlaceholder = this._contentPlaceholder;
-        }
-
-        private _buildContentUIElement() {
-            let c = this._content;
-            this.__contentUIElement = null;
-
-            // Already a UIElement
-            if (c instanceof UIElement) {
-                this.__contentUIElement = c;
-            }
-
-            // Test primary types
-            else if ((typeof c === "string") || (typeof c === "boolean") || (typeof c === "number")) {
-                let l = new Label({ parent: this, id: "Content of " + this.id });
-                let binding = new DataBinding();
-                binding.propertyPathName = "content";
-                binding.stringFormat = v => `${v}`;
-                binding.dataSource = this;
-                l.createDataBinding(Label.textProperty, binding);
-
-                this.__contentUIElement = l;
-            }
-
-            // Data Template!
-            else {
-                // TODO: DataTemplate lookup and create instance
-            }
-
-            if (this.__contentUIElement) {
-                this.__contentUIElement._patchUIElement(this.ownerWindow, this);               
-            }
-        }
-
-        private _contentPlaceholder: Group2D;
-        private _content: any;
-        private __contentUIElement: UIElement;
-
-        protected _getChildren(): Array<UIElement> {
-            let children = new Array<UIElement>();
-
-            if (this.content) {
-                children.push(this._contentUIElement);
-            }
-
-            return children;
-        }
-    }
-}

canvas2D/src/GUI/babylon.gui.control.ts

@@ -1,75 +0,0 @@
-module BABYLON {
-
-    @className("Control", "BABYLON")
-    export abstract class Control extends UIElement {
-        static CONTROL_PROPCOUNT = UIElement.UIELEMENT_PROPCOUNT + 5;
-
-        static backgroundProperty     : Prim2DPropInfo;
-        static borderProperty         : Prim2DPropInfo;
-        static borderThicknessProperty: Prim2DPropInfo;
-        static fontNameProperty       : Prim2DPropInfo;
-        static foregroundProperty     : Prim2DPropInfo;
-
-        constructor(settings: {
-            id?: string,
-            templateName?: string,
-            styleName?: string,
-        }) {
-            super(settings);
-        }
-
-        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 0, pi => Control.backgroundProperty = pi)
-        public get background(): StringDictionary<IBrush2D> {
-            if (!this._background) {
-                this._background = new ObservableStringDictionary<IBrush2D>(false);
-            }
-            return this._background;
-        }
-
-        public set background(value: StringDictionary<IBrush2D>) {
-            this.background.copyFrom(value);
-        }
-
-        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 1, pi => Control.borderProperty = pi)
-        public get border(): IBrush2D {
-            return this._border;
-        }
-
-        public set border(value: IBrush2D) {
-            this._border = value;
-        }
-
-        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 2, pi => Control.borderThicknessProperty = pi)
-        public get borderThickness(): number {
-            return this._borderThickness;
-        }
-
-        public set borderThickness(value: number) {
-            this._borderThickness = value;
-        }
-
-        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 3, pi => Control.fontNameProperty = pi)
-        public get fontName(): string {
-            return this._fontName;
-        }
-
-        public set fontName(value: string) {
-            this._fontName = value;
-        }
-
-        @dependencyProperty(UIElement.UIELEMENT_PROPCOUNT + 4, pi => Control.foregroundProperty = pi)
-        public get foreground(): IBrush2D {
-            return this._foreground;
-        }
-
-        public set foreground(value: IBrush2D) {
-            this._foreground = value;
-        }
-
-        private _background: ObservableStringDictionary<IBrush2D>;
-        private _border: IBrush2D;
-        private _borderThickness: number;
-        private _fontName: string;
-        private _foreground: IBrush2D;
-    }
-}

canvas2D/src/GUI/babylon.gui.label.ts

@@ -1,78 +0,0 @@
-module BABYLON {
-
-    @className("Label", "BABYLON")
-    export class Label extends Control {
-
-        static textProperty: Prim2DPropInfo;
-
-        constructor(settings?: {
-
-            id              ?: string,
-            parent          ?: UIElement,
-            templateName    ?: string,
-            styleName       ?: string,
-            text            ?: string,
-            marginTop       ?: number | string,
-            marginLeft      ?: number | string,
-            marginRight     ?: number | string,
-            marginBottom    ?: number | string,
-            margin          ?: number | string,
-            marginHAlignment?: number,
-            marginVAlignment?: number,
-            marginAlignment ?: string,
-            paddingTop      ?: number | string,
-            paddingLeft     ?: number | string,
-            paddingRight    ?: number | string,
-            paddingBottom   ?: number | string,
-            padding         ?: string,
-        }) {
-            if (!settings) {
-                settings = {};
-            }
-            super(settings);
-
-            if (settings.text != null) {
-                this.text = settings.text;
-            }
-        }
-
-        protected get _position(): Vector2 {
-            return Vector2.Zero();
-        }
-
-        private static _emptyArray = new Array<UIElement>();
-        protected _getChildren(): UIElement[] {
-            return Label._emptyArray;
-        }
-
-        protected createVisualTree() {
-            super.createVisualTree();
-            let p = this._visualChildrenPlaceholder;
-
-        }
-
-        @dependencyProperty(Control.CONTROL_PROPCOUNT + 0, pi => Label.textProperty = pi)
-        public get text(): string {
-            return this._text;
-        }
-
-        public set text(value: string) {
-            this._text = value;
-        }
-
-        private _text: string;
-
-    }
-
-    @registerWindowRenderingTemplate("BABYLON.Label", "Default", () => new DefaultLabelRenderingTemplate())
-    export class DefaultLabelRenderingTemplate extends UIElementRenderingTemplateBase {
-
-        createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase; contentPlaceholder: Prim2DBase } {
-            let r = new Text2D("", { parent: visualPlaceholder });
-            r.createSimpleDataBinding(Text2D.textProperty, "text");
-            r.dataSource = <any>owner;
-
-            return { root: r, contentPlaceholder: r };
-        }
-    }
-}

canvas2D/src/GUI/babylon.gui.window.ts

@@ -1,296 +0,0 @@
-module BABYLON {
-
-    class FocusScopeData {
-        constructor(focusScope: UIElement) {
-            this.focusScope = focusScope;
-            this.focusedElement = null;
-        }
-
-        focusScope: UIElement;
-        focusedElement: UIElement;
-    }
-
-    export class FocusManager {
-        constructor() {
-            this._focusScopes = new StringDictionary<FocusScopeData>();
-            this._rootScope = new FocusScopeData(null);
-            this._activeScope = null;
-        }
-
-        public setFocusOn(el: UIElement, focusScope: UIElement) {
-            let fsd = (focusScope != null) ? this._focusScopes.getOrAddWithFactory(focusScope.uid, k => new FocusScopeData(focusScope)) : this._rootScope;
-
-            if (fsd.focusedElement !== el) {
-                // Remove focus from current
-                if (fsd.focusedElement) {
-                    fsd.focusedElement.isFocused = false;
-                }
-
-                fsd.focusedElement = el;
-            }
-
-            if (this._activeScope !== fsd) {
-                this._activeScope = fsd;
-            }
-
-        }
-
-        private _rootScope: FocusScopeData;
-        private _focusScopes: StringDictionary<FocusScopeData>;
-        private _activeScope: FocusScopeData;
-    }
-
-    class GUISceneData {
-        constructor(scene: Scene) {
-            this.scene = scene;
-            this.screenSpaceCanvas = new ScreenSpaceCanvas2D(scene, { id: "GUI Canvas", cachingStrategy: Canvas2D.CACHESTRATEGY_DONTCACHE });
-            this.focusManager = new FocusManager();
-        }
-
-        screenSpaceCanvas: ScreenSpaceCanvas2D;
-        scene: Scene;
-        focusManager: FocusManager;
-    }
-
-    @className("Window", "BABYLON")
-    export class Window extends ContentControl {
-        static WINDOW_PROPCOUNT = ContentControl.CONTENTCONTROL_PROPCOUNT + 4;
-
-        static leftProperty: Prim2DPropInfo;
-        static bottomProperty: Prim2DPropInfo;
-        static positionProperty: Prim2DPropInfo;
-        static isActiveProperty: Prim2DPropInfo;
-
-        constructor(scene: Scene, settings?: {
-
-            id               ?: string,
-            templateName     ?: string,
-            styleName        ?: string,
-            content          ?: any,
-            left             ?: number,
-            bottom           ?: number,
-            minWidth         ?: number,
-            minHeight        ?: number,
-            maxWidth         ?: number,
-            maxHeight        ?: number,
-            width            ?: number,
-            height           ?: number,
-            worldPosition    ?: Vector3,
-            worldRotation    ?: Quaternion,
-            marginTop        ?: number | string,
-            marginLeft       ?: number | string,
-            marginRight      ?: number | string,
-            marginBottom     ?: number | string,
-            margin           ?: number | string,
-            marginHAlignment ?: number,
-            marginVAlignment ?: number,
-            marginAlignment  ?: string,
-            paddingTop       ?: number | string,
-            paddingLeft      ?: number | string,
-            paddingRight     ?: number | string,
-            paddingBottom    ?: number | string,
-            padding          ?: string,
-            paddingHAlignment?: number,
-            paddingVAlignment?: number,
-            paddingAlignment ?: string,
-        }) {
-
-            if (!settings) {
-                settings = {};
-            }
-
-            super(settings);
-
-            // Per default a Window is focus scope
-            this.isFocusScope = true;
-
-            this.isActive = false;
-
-            if (!this._UIElementVisualToBuildList) {
-                this._UIElementVisualToBuildList = new Array<UIElement>();
-            }
-
-            // Patch the owner and also the parent property through the whole tree
-            this._patchUIElement(this, null);
-
-            // Screen Space UI
-            if (!settings.worldPosition && !settings.worldRotation) {
-                this._sceneData = Window.getSceneData(scene);
-                this._canvas = this._sceneData.screenSpaceCanvas;
-                this._isWorldSpaceCanvas = false;
-                this._left = (settings.left != null) ? settings.left : 0;
-                this._bottom = (settings.bottom != null) ? settings.bottom : 0;
-            }
-
-            // WorldSpace UI
-            else {
-                let w = (settings.width == null) ? 100 : settings.width;
-                let h = (settings.height == null) ? 100 : settings.height;
-                let wpos = (settings.worldPosition == null) ? Vector3.Zero() : settings.worldPosition;
-                let wrot = (settings.worldRotation == null) ? Quaternion.Identity() : settings.worldRotation;
-                this._canvas = new WorldSpaceCanvas2D(scene, new Size(w, h), { id: "GUI Canvas", cachingStrategy: Canvas2D.CACHESTRATEGY_DONTCACHE, worldPosition: wpos, worldRotation: wrot });
-                this._isWorldSpaceCanvas = true;
-            }
-
-            this._renderObserver = this._canvas.renderObservable.add((e, s) => this._canvasPreRender(), Canvas2D.RENDEROBSERVABLE_PRE);
-            this._disposeObserver = this._canvas.disposeObservable.add((e, s) => this._canvasDisposed());
-            this._canvas.propertyChanged.add((e, s) => {
-                if (e.propertyName === "overPrim") {
-                    this._overPrimChanged(e.oldValue, e.newValue);
-                }
-            });
-            this._mouseOverUIElement = null;
-        }
-
-        public get canvas(): Canvas2D {
-            return this._canvas;
-        }
-
-        @dependencyProperty(ContentControl.CONTENTCONTROL_PROPCOUNT + 0, pi => Window.leftProperty = pi)
-        public get left(): number {
-            return this._left;
-        }
-
-        public set left(value: number) {
-            let old = new Vector2(this._left, this._bottom);
-            this._left = value;
-            this.onPropertyChanged("_position", old, this._position);
-        }
-
-        @dependencyProperty(ContentControl.CONTENTCONTROL_PROPCOUNT + 1, pi => Window.bottomProperty = pi)
-        public get bottom(): number {
-            return this._bottom;
-        }
-
-        public set bottom(value: number) {
-            let old = new Vector2(this._left, this._bottom);
-            this._bottom = value;
-            this.onPropertyChanged("_position", old, this._position);
-        }
-
-        @dependencyProperty(ContentControl.CONTENTCONTROL_PROPCOUNT + 2, pi => Window.positionProperty = pi)
-        public get position(): Vector2 {
-            return this._position;
-        }
-
-        public set position(value: Vector2) {
-            this._left = value.x;
-            this._bottom = value.y;
-        }
-
-        @dependencyProperty(ContentControl.CONTENTCONTROL_PROPCOUNT + 3, pi => Window.isActiveProperty = pi)
-        public get isActive(): boolean {
-            return this._isActive;
-        }
-
-        public set isActive(value: boolean) {
-            this._isActive = value;
-        }
-
-        public get focusManager(): FocusManager {
-            return this._sceneData.focusManager;
-        }
-
-        protected get _position(): Vector2 {
-            return new Vector2(this.left, this.bottom);
-        }
-
-        protected createVisualTree() {
-            super.createVisualTree();
-            let p = this._visualPlaceholder;
-            p.createSimpleDataBinding(Group2D.positionProperty, "position");
-        }
-
-        public _registerVisualToBuild(uiel: UIElement) {
-            if (uiel._isFlagSet(UIElement.flagVisualToBuild)) {
-                return;
-            }
-
-            if (!this._UIElementVisualToBuildList) {
-                this._UIElementVisualToBuildList = new Array<UIElement>();
-            }
-
-            this._UIElementVisualToBuildList.push(uiel);
-            uiel._setFlags(UIElement.flagVisualToBuild);
-        }
-
-        private _overPrimChanged(oldPrim: Prim2DBase, newPrim: Prim2DBase) {
-            let curOverEl = this._mouseOverUIElement;
-            let newOverEl: UIElement = null;
-
-            let curGroup = newPrim ? newPrim.traverseUp(p => p instanceof Group2D) : null;
-            while (curGroup) {
-                let uiel = curGroup.getExternalData<UIElement>("_GUIOwnerElement_");
-                if (uiel) {
-                    newOverEl = uiel;
-                    break;
-                }
-                curGroup = curGroup.parent ? curGroup.parent.traverseUp(p => p instanceof Group2D) : null;
-            }
-
-            if (curOverEl === newOverEl) {
-                return;
-            }
-
-            if (curOverEl) {
-                curOverEl.isMouseOver = false;
-            }
-
-            if (newOverEl) {
-                newOverEl.isMouseOver = true;
-            }
-
-            this._mouseOverUIElement = newOverEl;
-        }
-
-        private _canvasPreRender() {
-
-            // Check if we have visual to create
-            if (this._UIElementVisualToBuildList.length > 0) {
-                // Sort the UI Element to get the highest (so lowest hierarchy depth) in the hierarchy tree first
-                let sortedElementList = this._UIElementVisualToBuildList.sort((a, b) => a.hierarchyDepth - b.hierarchyDepth);
-
-                for (let el of sortedElementList) {
-                    el._createVisualTree();
-                }
-
-                this._UIElementVisualToBuildList.splice(0);
-            }
-        }
-
-        private _canvasDisposed() {
-
-
-            this._canvas.disposeObservable.remove(this._disposeObserver);
-            this._canvas.renderObservable.remove(this._renderObserver);
-        }
-
-        private _sceneData: GUISceneData;
-        private _canvas: Canvas2D;
-        private _left: number;
-        private _bottom: number;
-        private _isActive: boolean;
-        private _isWorldSpaceCanvas: boolean;
-        private _renderObserver: Observer<Canvas2D>;
-        private _disposeObserver: Observer<SmartPropertyBase>;
-        private _UIElementVisualToBuildList: Array<UIElement>;
-        private _mouseOverUIElement: UIElement;
-
-        private static getSceneData(scene: Scene): GUISceneData {
-            return Window._sceneData.getOrAddWithFactory(scene.uid, k => new GUISceneData(scene));
-        }
-
-        private static _sceneData: StringDictionary<GUISceneData> = new StringDictionary<GUISceneData>();
-    }
-
-    @registerWindowRenderingTemplate("BABYLON.Window", "Default", () => new DefaultWindowRenderingTemplate ())
-    export class DefaultWindowRenderingTemplate extends UIElementRenderingTemplateBase {
-
-        createVisualTree(owner: UIElement, visualPlaceholder: Group2D): { root: Prim2DBase; contentPlaceholder: Prim2DBase } {
-
-            let r = new Rectangle2D({ parent: visualPlaceholder, fill: "#808080FF" });
-
-            return { root: r, contentPlaceholder: r };
-        }
-    }
-}

canvas2D/src/Tools/babylon.IPropertyChanged.ts

@@ -1,80 +0,0 @@
-module BABYLON {
-    export class PropertyChangedInfo {
-        /**
-         * Previous value of the property
-         */
-        oldValue: any;
-        /**
-         * New value of the property
-         */
-        newValue: any;
-
-        /**
-         * Name of the property that changed its value
-         */
-        propertyName: string;
-    }
-
-    /**
-     * Custom type of the propertyChanged observable
-     */
-
-    /**
-     * Property Changed interface
-     */
-    export interface IPropertyChanged {
-        /**
-         * PropertyChanged observable
-         */
-        propertyChanged: Observable<PropertyChangedInfo>;
-    }
-
-    /**
-     * The purpose of this class is to provide a base implementation of the IPropertyChanged interface for the user to avoid rewriting a code needlessly.
-     * Typical use of this class is to check for equality in a property set(), then call the onPropertyChanged method if values are different after the new value is set. The protected method will notify observers of the change.
-     * Remark: onPropertyChanged detects reentrant code and acts in a way to make sure everything is fine, fast and allocation friendly (when there no reentrant code which should be 99% of the time)
-     */
-    export abstract class PropertyChangedBase implements IPropertyChanged {
-
-        /**
-         * Protected method to call when there's a change of value in a property set
-         * @param propName the name of the concerned property
-         * @param oldValue its old value
-         * @param newValue its new value
-         * @param mask an optional observable mask
-         */
-        protected onPropertyChanged<T>(propName: string, oldValue: T, newValue: T, mask?: number) {
-            if (this.propertyChanged.hasObservers()) {
-
-                let pci = PropertyChangedBase.calling ? new PropertyChangedInfo() : PropertyChangedBase.pci;
-
-                pci.oldValue = oldValue;
-                pci.newValue = newValue;
-                pci.propertyName = propName;
-
-                try {
-                    PropertyChangedBase.calling = true;
-                    this.propertyChanged.notifyObservers(pci, mask);
-                } finally {
-                    PropertyChangedBase.calling = false;
-                }
-            }
-        }
-
-        /**
-         * An observable that is triggered when a property (using of the XXXXLevelProperty decorator) has its value changing.
-         * You can add an observer that will be triggered only for a given set of Properties using the Mask feature of the Observable and the corresponding Prim2DPropInfo.flagid value (e.g. Prim2DBase.positionProperty.flagid|Prim2DBase.rotationProperty.flagid to be notified only about position or rotation change)
-         */
-        public get propertyChanged(): Observable<PropertyChangedInfo> {
-            if (!this._propertyChanged) {
-                this._propertyChanged = new Observable<PropertyChangedInfo>();
-            }
-            return this._propertyChanged;
-        }
-
-        public _propertyChanged: Observable<PropertyChangedInfo> = null;
-        private static pci = new PropertyChangedInfo();
-        private static calling: boolean = false;
-    }
-
-}

canvas2D/src/Tools/babylon.c2dlogging.ts

@@ -1,249 +0,0 @@
-module BABYLON {
-    // logging stuffs
-    export class C2DLogging {
-        // Set to true to temporary disable logging.
-        public static snooze = true;
-        public static logFrameRender(frameCount: number) {
-            C2DLogging.snooze = true;
-            C2DLogging._logFramesCount = frameCount;
-        }
-        public static setPostMessage(message: () => string) {
-            if (C2DLoggingInternals.enableLog) {
-                C2DLoggingInternals.postMessages[C2DLoggingInternals.callDepth-1] = message();
-            }
-        }
-
-        public static _startFrameRender() {
-            if (C2DLogging._logFramesCount === 0) {
-                return;
-            }
-            C2DLogging.snooze = false;
-        }
-
-        public static _endFrameRender() {
-            if (C2DLogging._logFramesCount === 0) {
-                return;
-            }
-            C2DLogging.snooze = true;
-            --C2DLogging._logFramesCount;
-        }
-
-        private static _logFramesCount = 0;
-    }
-
-    class C2DLoggingInternals {
-        //-------------FLAG TO CHANGE TO ENABLE/DISABLE LOGGING ACTIVATION--------------
-        // This flag can't be changed at runtime you must manually change it in the code
-        public static enableLog = false;
-
-        public static callDepth = 0;
-
-        public static depths = [
-            "|-", "|--", "|---", "|----", "|-----", "|------", "|-------", "|--------", "|---------", "|----------",
-            "|-----------", "|------------", "|-------------", "|--------------", "|---------------", "|----------------", "|-----------------", "|------------------", "|-------------------", "|--------------------"
-        ];
-        public static postMessages = [];
-
-        public static computeIndent(): string {
-            // Compute the indent
-            let indent: string = null;
-            if (C2DLoggingInternals.callDepth < 20) {
-                indent = C2DLoggingInternals.depths[C2DLoggingInternals.callDepth];
-            } else {
-                indent = "|";
-                for (let i = 0; i <= C2DLoggingInternals.callDepth; i++) {
-                    indent = indent + "-";
-                }
-            }
-            return indent;
-        }
-
-        public static getFormattedValue(a): string {
-            if (a instanceof Prim2DBase) {
-                return a.id;
-            }
-            if (a == null) {
-                return "[null]";
-            }
-            return a.toString();
-        }
-    }
-
-    export function logProp<T>(message: string = "", alsoGet = false, setNoProlog=false, getNoProlog=false): (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => void {
-        return (target: Object, propName: string | symbol, descriptor: TypedPropertyDescriptor<T>) => {
-            if (!C2DLoggingInternals.enableLog) {
-                return descriptor;
-            }
-
-            let getter = descriptor.get, setter = descriptor.set;
-
-            if (getter && alsoGet) {
-                descriptor.get = function (): T {
-                    if (C2DLogging.snooze) {
-                        return getter.call(this);
-                    } else {
-                        let indent = C2DLoggingInternals.computeIndent();
-                        let id = this.id || "";
-
-                        if (message !== null && message !== "") {
-                            console.log(message);
-                        }
-
-                        let isSPP = this instanceof SmartPropertyPrim;
-                        let flags = isSPP ? this._flags : 0;
-                        let depth = C2DLoggingInternals.callDepth;
-                        if (!getNoProlog) {
-                            console.log(`${indent} [${id}] (${depth}) ==> get ${propName} property`);
-                        }
-                        ++C2DLoggingInternals.callDepth;
-                        C2DLogging.setPostMessage(() => "[no msg]");
-
-                        // Call the initial getter
-                        let r = getter.call(this);
-
-                        --C2DLoggingInternals.callDepth;
-                        let flagsStr = "";
-                        if (isSPP) {
-                            let nflags = this._flags;
-                            let newFlags = this._getFlagsDebug((nflags & flags) ^ nflags);
-                            let removedFlags = this._getFlagsDebug((nflags & flags) ^ flags);
-                            flagsStr = "";
-                            if (newFlags !== "") {
-                                flagsStr = ` +++[${newFlags}]`;
-                            }
-                            if (removedFlags !== "") {
-                                if (flagsStr !== "") {
-                                    flagsStr += ",";
-                                }
-                                flagsStr += ` ---[${removedFlags}]`;
-                            }
-                        }
-                        console.log(`${indent} [${id}] (${depth})${getNoProlog ? "" : " <=="} get ${propName} property => ${C2DLoggingInternals.getFormattedValue(r)}${flagsStr}, ${C2DLoggingInternals.postMessages[C2DLoggingInternals.callDepth]}`);
-
-                        return r;
-                    }
-                }
-            }
-
-            // Overload the property setter implementation to add our own logic
-            if (setter) {
-                descriptor.set = function (val) {
-                    if (C2DLogging.snooze) {
-                        setter.call(this, val);
-                    } else {
-                        let indent = C2DLoggingInternals.computeIndent();
-                        let id = this.id || "";
-
-                        if (message !== null && message !== "") {
-                            console.log(message);
-                        }
-                        let isSPP = this instanceof SmartPropertyPrim;
-                        let flags = isSPP ? this._flags : 0;
-                        let depth = C2DLoggingInternals.callDepth;
-                        if (!setNoProlog) {
-                            console.log(`${indent} [${id}] (${depth}) ==> set ${propName} property with ${C2DLoggingInternals.getFormattedValue(val)}`);
-                        }
-                        ++C2DLoggingInternals.callDepth;
-                        C2DLogging.setPostMessage(() => "[no msg]");
-
-                        // Change the value
-                        setter.call(this, val);
-
-                        --C2DLoggingInternals.callDepth;
-                        let flagsStr = "";
-                        if (isSPP) {
-                            let nflags = this._flags;
-                            let newFlags = this._getFlagsDebug((nflags & flags) ^ nflags);
-                            let removedFlags = this._getFlagsDebug((nflags & flags) ^ flags);
-                            flagsStr = "";
-                            if (newFlags !== "") {
-                                flagsStr = ` +++[${newFlags}]`;
-                            }
-                            if (removedFlags !== "") {
-                                if (flagsStr !== "") {
-                                    flagsStr += ",";
-                                }
-                                flagsStr += ` ---[${removedFlags}]`;
-                            }
-                        }
-                        console.log(`${indent} [${id}] (${depth})${setNoProlog ? "" : " <=="} set ${propName} property, ${C2DLoggingInternals.postMessages[C2DLoggingInternals.callDepth]}${flagsStr}`);
-                    }
-                }
-            }
-
-            return descriptor;
-        }
-    }
-
-    export function logMethod(message: string = "", noProlog = false) {
-        return (target, key, descriptor) => {
-            if (!C2DLoggingInternals.enableLog) {
-                return descriptor;
-            }
-
-            if (descriptor === undefined) {
-                descriptor = Object.getOwnPropertyDescriptor(target, key);
-            }
-            var originalMethod = descriptor.value;
-
-            //editing the descriptor/value parameter
-            descriptor.value = function () {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i - 0] = arguments[_i];
-                }
-                if (C2DLogging.snooze) {
-                    return originalMethod.apply(this, args);
-                } else {
-                    var a = args.map(a => C2DLoggingInternals.getFormattedValue(a) + ", ").join();
-                    a = a.slice(0, a.length - 2);
-
-                    let indent = C2DLoggingInternals.computeIndent();
-                    let id = this.id || "";
-
-                    if (message !== null && message !== "") {
-                        console.log(message);
-                    }
-
-                    let isSPP = this instanceof SmartPropertyPrim;
-                    let flags = isSPP ? this._flags : 0;
-                    let depth = C2DLoggingInternals.callDepth;
-                    if (!noProlog) {
-                        console.log(`${indent} [${id}] (${depth}) ==> call: ${key} (${a})`);
-                    }
-                    ++C2DLoggingInternals.callDepth;
-                    C2DLogging.setPostMessage(() => "[no msg]");
-
-                    // Call the method!
-                    var result = originalMethod.apply(this, args);
-
-                    --C2DLoggingInternals.callDepth;
-                    let flagsStr = "";
-                    if (isSPP) {
-                        let nflags = this._flags;
-                        let newFlags = this._getFlagsDebug((nflags & flags) ^ nflags);
-                        let removedFlags = this._getFlagsDebug((nflags & flags) ^ flags);
-                        flagsStr = "";
-                        if (newFlags !== "") {
-                            flagsStr = ` +++[${newFlags}]`;
-                        }
-                        if (removedFlags !== "") {
-                            if (flagsStr !== "") {
-                                flagsStr += ",";
-                            }
-                            flagsStr += ` ---[${removedFlags}]`;
-                        }
-                    }
-                    console.log(`${indent} [${id}] (${depth})${noProlog ? "" : " <=="} call: ${key} (${a}) Res: ${C2DLoggingInternals.getFormattedValue(result)}, ${C2DLoggingInternals.postMessages[C2DLoggingInternals.callDepth]}${flagsStr}`);
-
-                    return result;
-                }
-            };
-
-            // return edited descriptor as opposed to overwriting the descriptor
-            return descriptor;
-        }
-        
-    }
-
-}

canvas2D/src/Tools/babylon.math2D.ts

@@ -1,588 +0,0 @@
-module BABYLON {
-
-    /**
-       * A class storing a Matrix2D for 2D transformations
-       * The stored matrix is a 3*3 Matrix2D
-       * I   [0,1]   [mX, mY]   R   [ CosZ, SinZ]  T    [ 0,  0]  S   [Sx,  0]
-       * D = [2,3] = [nX, nY]   O = [-SinZ, CosZ]  R =  [ 0,  0]  C = [ 0, Sy]
-       * X   [4,5]   [tX, tY]   T   [  0  ,  0  ]  N    [Tx, Ty]  L   [ 0,  0]
-       *
-       * IDX = index, zero based. ROT = Z axis Rotation. TRN = Translation. SCL = Scale.
-       */
-    export class Matrix2D {
-
-        public static Zero(): Matrix2D {
-            return new Matrix2D();
-        }
-        
-        public static FromValuesToRef(m0: number, m1: number, m2: number, m3: number, m4: number, m5: number, result: Matrix2D) {
-            result.m[0] = m0;   result.m[1] = m1;
-            result.m[2] = m2;   result.m[3] = m3;
-            result.m[4] = m4;   result.m[5] = m5;
-        }
-
-        public static FromMatrix(source: Matrix): Matrix2D {
-            let result = new Matrix2D();
-            Matrix2D.FromMatrixToRef(source, result);
-            return result;
-        }
-
-        public static FromMatrixToRef(source: Matrix, result: Matrix2D) {
-            result.m[0] = source.m[0];    result.m[1] = source.m[1];
-            result.m[2] = source.m[4];    result.m[3] = source.m[5];
-            result.m[4] = source.m[8];    result.m[5] = source.m[9];
-        }
-
-        public static Rotation(angle: number): Matrix2D {
-            var result = new Matrix2D();
-
-            Matrix2D.RotationToRef(angle, result);
-
-            return result;
-        }
-
-        public static RotationToRef(angle: number, result: Matrix2D): void {
-            var s = Math.sin(angle);
-            var c = Math.cos(angle);
-
-            result.m[0] = c;    result.m[1] = s;
-            result.m[2] = -s;   result.m[3] = c;
-            result.m[4] = 0;    result.m[5] = 0;
-        }
-
-        public static Translation(x: number, y: number): Matrix2D {
-            var result = new Matrix2D();
-
-            Matrix2D.TranslationToRef(x, y, result);
-
-            return result;
-        }
-
-        public static TranslationToRef(x: number, y: number, result: Matrix2D): void {
-            result.m[0] = 1;    result.m[1] = 0;
-            result.m[2] = 0;    result.m[3] = 1;
-            result.m[4] = x;    result.m[5] = y;
-        }
-
-        public static Scaling(x: number, y: number): Matrix2D {
-            var result = new Matrix2D();
-
-            Matrix2D.ScalingToRef(x, y, result);
-
-            return result;
-        }
-
-        public static ScalingToRef(x: number, y: number, result: Matrix2D): void {
-            result.m[0] = x;    result.m[1] = 0;
-            result.m[2] = 0;    result.m[3] = y;
-            result.m[4] = 0;    result.m[5] = 0;
-        }
-
-        public m = new Float32Array(6);
-
-        public static Identity(): Matrix2D {
-            let res = new Matrix2D();
-            Matrix2D.IdentityToRef(res);
-            return res;
-        }
-
-        public static IdentityToRef(res: Matrix2D) {
-            res.m[1] = res.m[2] = res.m[4] = res[5] = 0;
-            res.m[0] = res.m[3] = 1;
-        }
-
-        public static FromQuaternion(quaternion: Quaternion): Matrix2D {
-            let result = new Matrix2D();
-            Matrix2D.FromQuaternionToRef(quaternion, result);
-            return result;
-        }
-
-        public static FromQuaternionToRef(quaternion: Quaternion, result: Matrix2D) {
-            var xx = quaternion.x * quaternion.x;
-            var yy = quaternion.y * quaternion.y;
-            var zz = quaternion.z * quaternion.z;
-            var xy = quaternion.x * quaternion.y;
-            var zw = quaternion.z * quaternion.w;
-            //var zx = quaternion.z * quaternion.x;
-            //var yw = quaternion.y * quaternion.w;
-            //var yz = quaternion.y * quaternion.z;
-            //var xw = quaternion.x * quaternion.w;
-
-            result.m[0] = 1.0 - (2.0 * (yy + zz));
-            result.m[1] = 2.0 * (xy + zw);
-            //result.m[2] = 2.0 * (zx - yw);
-            //result.m[3] = 0;
-            result.m[2] = 2.0 * (xy - zw);
-            result.m[3] = 1.0 - (2.0 * (zz + xx));
-            //result.m[6] = 2.0 * (yz + xw);
-            //result.m[7] = 0;
-            //result.m[8] = 2.0 * (zx + yw);
-            //result.m[9] = 2.0 * (yz - xw);
-            //result.m[10] = 1.0 - (2.0 * (yy + xx));
-            //result.m[11] = 0;
-            //result.m[12] = 0;
-            //result.m[13] = 0;
-            //result.m[14] = 0;
-            //result.m[15] = 1.0;
-        }
-
-        public static Compose(scale: Vector2, rotation: number, translation: Vector2): Matrix2D {
-            var result = Matrix2D.Scaling(scale.x, scale.y);
-
-            var rotationMatrix = Matrix2D.Rotation(rotation);
-            result = result.multiply(rotationMatrix);
-
-            result.setTranslation(translation);
-
-            return result;
-        }
-
-        public static Invert(source: Matrix2D): Matrix2D {
-            let result = new Matrix2D();
-            source.invertToRef(result);
-            return result;
-        }
-
-        public clone(): Matrix2D {
-            let result = new Matrix2D();
-            result.copyFrom(this);
-            return result;
-        }
-
-        public copyFrom(other: Matrix2D) {
-            for (let i = 0; i < 6; i++) {
-                this.m[i] = other.m[i];
-            }
-        }
-
-        public getTranslation(): Vector2 {
-            return new Vector2(this.m[4], this.m[5]);
-        }
-
-        public setTranslation(translation: Vector2) {
-            this.m[4] = translation.x;
-            this.m[5] = translation.y;
-        }
-
-        public determinant(): number {
-            return this.m[0] * this.m[3] - this.m[1] * this.m[2];
-        }
-
-        public invertToThis() {
-            this.invertToRef(this);
-        }
-
-        public invert(): Matrix2D {
-            let res = new Matrix2D();
-            this.invertToRef(res);
-            return res;
-        }
-
-        // http://mathworld.wolfram.com/MatrixInverse.html
-        public invertToRef(res: Matrix2D) {
-            let l0 = this.m[0]; let l1 = this.m[1];
-            let l2 = this.m[2]; let l3 = this.m[3];
-            let l4 = this.m[4]; let l5 = this.m[5];
-
-            let det = this.determinant();
-            if (det < (Epsilon * Epsilon)) {
-                throw new Error("Can't invert matrix, near null determinant");
-            }
-
-            let detDiv = 1 / det;
-
-            let det4 = l2 * l5 - l3 * l4;
-            let det5 = l1 * l4 - l0 * l5;
-
-            res.m[0] = l3 * detDiv;     res.m[1] = -l1 * detDiv;
-            res.m[2] = -l2 * detDiv;    res.m[3] = l0 * detDiv;
-            res.m[4] = det4 * detDiv;   res.m[5] = det5 * detDiv;
-        }
-
-        public multiplyToThis(other: Matrix2D) {
-            this.multiplyToRef(other, this);
-        }
-
-        public multiply(other: Matrix2D): Matrix2D {
-            let res = new Matrix2D();
-            this.multiplyToRef(other, res);
-            return res;
-        }
-
-        public multiplyToRef(other: Matrix2D, result: Matrix2D) {
-            let l0 = this.m[0];     let l1 = this.m[1];
-            let l2 = this.m[2];     let l3 = this.m[3];
-            let l4 = this.m[4];     let l5 = this.m[5];
-
-            let r0 = other.m[0];    let r1 = other.m[1];
-            let r2 = other.m[2];    let r3 = other.m[3];
-            let r4 = other.m[4];    let r5 = other.m[5];
-
-            result.m[0] = l0 * r0 + l1 * r2;        result.m[1] = l0 * r1 + l1 * r3;
-            result.m[2] = l2 * r0 + l3 * r2;        result.m[3] = l2 * r1 + l3 * r3;
-            result.m[4] = l4 * r0 + l5 * r2 + r4;   result.m[5] = l4 * r1 + l5 * r3 + r5;
-        }
-
-        public transformFloats(x: number, y: number): Vector2 {
-            let res = Vector2.Zero();
-            this.transformFloatsToRef(x, y, res);
-            return res;
-        }
-
-        public transformFloatsToRef(x: number, y: number, r: Vector2) {
-            r.x = x * this.m[0] + y * this.m[2] + this.m[4];
-            r.y = x * this.m[1] + y * this.m[3] + this.m[5];
-        }
-
-        public transformPoint(p: Vector2): Vector2 {
-            let res = Vector2.Zero();
-            this.transformFloatsToRef(p.x, p.y, res);
-            return res;
-        }
-
-        public transformPointToRef(p: Vector2, r: Vector2) {
-            this.transformFloatsToRef(p.x, p.y, r);
-        }
-
-        private static _decomp: Matrix2D = new Matrix2D();
-
-        public decompose(scale: Vector2, translation: Vector2): number {
-            translation.x = this.m[4];
-            translation.y = this.m[5];
-
-            scale.x = Math.sqrt(this.m[0] * this.m[0] + this.m[1] * this.m[1]);
-            scale.y = Math.sqrt(this.m[2] * this.m[2] + this.m[3] * this.m[3]);
-
-            if (scale.x === 0 || scale.y === 0) {
-                return null;
-            }
-
-            return Math.atan2(-this.m[2] / scale.y, this.m[0] / scale.x);
-        }
-    }
-
-    /**
-     * Stores information about a 2D Triangle.
-     * This class stores the 3 vertices but also the center and radius of the triangle
-     */
-    export class Tri2DInfo {
-        /**
-         * Construct an instance of Tri2DInfo, you can either pass null to a, b and c and the instance will be allocated "clear", or give actual triangle info and the center/radius will be computed
-         */
-        constructor(a: Vector2, b: Vector2, c: Vector2) {
-            if (a === null && b === null && c === null) {
-                this.a = Vector2.Zero();
-                this.b = Vector2.Zero();
-                this.c = Vector2.Zero();
-                this.center = Vector2.Zero();
-                this.radius = 0;
-                return;
-            }
-
-            this.a = a.clone();
-            this.b = b.clone();
-            this.c = c.clone();
-
-            this._updateCenterRadius();
-        }
-
-        a: Vector2;
-        b: Vector2;
-        c: Vector2;
-        center: Vector2;
-        radius: number;
-
-        public static Zero() {
-            return new Tri2DInfo(null, null, null);
-        }
-
-        public set(a: Vector2, b: Vector2, c: Vector2) {
-            this.a.copyFrom(a);
-            this.b.copyFrom(b);
-            this.c.copyFrom(c);
-
-            this._updateCenterRadius();
-        }
-
-        public transformInPlace(transform: Matrix2D) {
-            transform.transformPointToRef(this.a, this.a);
-            transform.transformPointToRef(this.b, this.b);
-            transform.transformPointToRef(this.c, this.c);
-            //Vector2.TransformToRef(this.a, transform, this.a);
-            //Vector2.TransformToRef(this.b, transform, this.b);
-            //Vector2.TransformToRef(this.c, transform, this.c);
-
-            this._updateCenterRadius();
-        }
-
-        public doesContain(p: Vector2): boolean {
-            return Vector2.PointInTriangle(p, this.a, this.b, this.c);
-        }
-
-        private _updateCenterRadius() {
-            this.center.x = (this.a.x + this.b.x + this.c.x) / 3;
-            this.center.y = (this.a.y + this.b.y + this.c.y) / 3;
-
-            let la = Vector2.DistanceSquared(this.a, this.center);
-            let lb = Vector2.DistanceSquared(this.b, this.center);
-            let lc = Vector2.DistanceSquared(this.c, this.center);
-
-            let rs = Math.max(Math.max(la, lb), lc);
-            this.radius = Math.sqrt(rs);
-        }
-    }
-
-    /**
-     * Stores an array of 2D Triangles.
-     * Internally the data is stored as a Float32Array to minimize the memory footprint.
-     * This can use the Tri2DInfo class as proxy for storing/retrieving data.
-     * The array can't grow, it's fixed size.
-     */
-    export class Tri2DArray {
-        constructor(count: number) {
-            this._count = count;
-            this._array = new Float32Array(9 * count);
-        }
-
-        /**
-         * Clear the content and allocate a new array to store the given count of triangles
-         * @param count The new count of triangles to store
-         */
-        public clear(count: number) {
-            if (this._count === count) {
-                return;
-            }
-
-            this._count = count;
-            this._array = new Float32Array(9 * count);
-        }
-
-        /**
-         * Store a given triangle at the given index
-         * @param index the 0 based index to store the triangle in the array
-         * @param a the A vertex of the triangle
-         * @param b the B vertex of the triangle
-         * @param c the C vertex of the triangle
-         */
-        public storeTriangle(index: number, a: Vector2, b: Vector2, c: Vector2) {
-            let center = new Vector2((a.x + b.x + c.x) / 3, (a.y + b.y + c.y) / 3);
-
-            let la = Vector2.DistanceSquared(a, center);
-            let lb = Vector2.DistanceSquared(b, center);
-            let lc = Vector2.DistanceSquared(c, center);
-
-            let rs = Math.max(Math.max(la, lb), lc);
-            let radius = Math.sqrt(rs);
-
-            let offset = index * 9;
-            this._array[offset + 0] = a.x;
-            this._array[offset + 1] = a.y;
-            this._array[offset + 2] = b.x;
-            this._array[offset + 3] = b.y;
-            this._array[offset + 4] = c.x;
-            this._array[offset + 5] = c.y;
-            this._array[offset + 6] = center.x;
-            this._array[offset + 7] = center.y;
-            this._array[offset + 8] = radius;
-        }
-
-        /**
-         * Store a triangle in a Tri2DInfo object
-         * @param index the index of the triangle to store
-         * @param tri2dInfo the instance that will contain the data, it must be already allocated with its inner object also allocated
-         */
-        public storeToTri2DInfo(index: number, tri2dInfo: Tri2DInfo) {
-            if (index >= this._count) {
-                throw new Error(`Can't fetch the triangle at index ${index}, max index is ${this._count - 1}`);
-            }
-
-            let offset = index * 9;
-            tri2dInfo.a.x      = this._array[offset + 0];
-            tri2dInfo.a.y      = this._array[offset + 1];
-            tri2dInfo.b.x      = this._array[offset + 2];
-            tri2dInfo.b.y      = this._array[offset + 3];
-            tri2dInfo.c.x      = this._array[offset + 4];
-            tri2dInfo.c.y      = this._array[offset + 5];
-            tri2dInfo.center.x = this._array[offset + 6];
-            tri2dInfo.center.y = this._array[offset + 7];
-            tri2dInfo.radius   = this._array[offset + 8];
-        }
-
-        /**
-         * Transform the given triangle and store its result in the array
-         * @param index The index to store the result to
-         * @param tri2dInfo The triangle to transform
-         * @param transform The transformation matrix
-         */
-        public transformAndStoreToTri2DInfo(index: number, tri2dInfo: Tri2DInfo, transform: Matrix2D) {
-            if (index >= this._count) {
-                throw new Error(`Can't fetch the triangle at index ${index}, max index is ${this._count - 1}`);
-            }
-
-            let offset = index * 9;
-            tri2dInfo.a.x = this._array[offset + 0];
-            tri2dInfo.a.y = this._array[offset + 1];
-            tri2dInfo.b.x = this._array[offset + 2];
-            tri2dInfo.b.y = this._array[offset + 3];
-            tri2dInfo.c.x = this._array[offset + 4];
-            tri2dInfo.c.y = this._array[offset + 5];
-
-            tri2dInfo.transformInPlace(transform);
-        }
-
-        /**
-         * Get the element count that can be stored in this array
-         * @returns {} 
-         */
-        public get count(): number {
-            return this._count;
-        }
-
-        /**
-         * Check if a given point intersects with at least one of the triangles stored in the array.
-         * If true is returned the point is intersecting with at least one triangle, false if it doesn't intersect with any of them
-         * @param p The point to check
-         */
-        public doesContain(p: Vector2): boolean {
-            Tri2DArray._checkInitStatics();
-            let a = Tri2DArray.tempT[0];
-
-            for (let i = 0; i < this.count; i++) {
-                this.storeToTri2DInfo(i, a);
-                if (a.doesContain(p)) {
-                    return true;
-                }
-            }
-            return false;
-        }
-
-        /**
-         * Make a intersection test between two sets of triangles. The triangles of setB will be transformed to the frame of reference of the setA using the given bToATransform matrix.
-         * If true is returned at least one triangle intersects with another of the other set, otherwise false is returned.
-         * @param setA The first set of triangles
-         * @param setB The second set of triangles
-         * @param bToATransform The transformation matrix to transform the setB triangles into the frame of reference of the setA
-         */
-        public static doesIntersect(setA: Tri2DArray, setB: Tri2DArray, bToATransform: Matrix2D): boolean {
-            Tri2DArray._checkInitStatics();
-
-            let a = Tri2DArray.tempT[0];
-            let b = Tri2DArray.tempT[1];
-            let v0 = Tri2DArray.tempV[0];
-
-            for (let curB = 0; curB < setB.count; curB++) {
-                setB.transformAndStoreToTri2DInfo(curB, b, bToATransform);
-
-                for (let curA = 0; curA < setA.count; curA++) {
-                    setA.storeToTri2DInfo(curA, a);
-
-
-                    // Fast rejection first
-                    v0.x = a.center.x - b.center.x;
-                    v0.y = a.center.y - b.center.y;
-                    if (v0.lengthSquared() > ((a.radius * a.radius) + (b.radius * b.radius))) {
-                        continue;
-                    }
-
-                    // Actual intersection test
-                    if (Math2D.TriangleTriangleDosIntersect(a.a, a.b, a.c, b.a, b.b, b.c)) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        }
-
-        private static _checkInitStatics() {
-            if (Tri2DArray.tempT !== null) {
-                return;
-            }
-
-            Tri2DArray.tempT = new Array<Tri2DInfo>(2);
-            Tri2DArray.tempT[0] = new Tri2DInfo(null, null, null);
-            Tri2DArray.tempT[1] = new Tri2DInfo(null, null, null);
-
-            Tri2DArray.tempV = new Array<Vector2>(6);
-            for (let i = 0; i < 6; i++) {
-                Tri2DArray.tempV[i] = Vector2.Zero();
-            }
-        }
-
-        private _count: number;
-        private _array: Float32Array;
-
-        private static tempV: Vector2[] = null;
-        private static tempT: Tri2DInfo[] = null;
-    }
-
-    /**
-     * Some 2D Math helpers functions
-     */
-    class Math2D {
-
-        static Dot(a: Vector2, b: Vector2): number {
-            return a.x * b.x + a.y * b.y;
-        }
-
-        // From http://stackoverflow.com/questions/563198/how-do-you-detect-where-two-line-segments-intersect
-        // Note: this one might also be considered with the above one proves to not be good enough: http://jsfiddle.net/justin_c_rounds/Gd2S2/light/
-        static LineLineDoesIntersect(segA1: Vector2, segA2: Vector2, segB1: Vector2, segB2: Vector2): boolean {
-            let s1_x = segA2.x - segA1.x; let s1_y = segA2.y - segA1.y;
-            let s2_x = segB2.x - segB1.x; let s2_y = segB2.y - segB1.y;
-            let s = (-s1_y * (segA1.x - segB1.x) + s1_x * (segA1.y - segB1.y)) / (-s2_x * s1_y + s1_x * s2_y);
-            let t = ( s2_x * (segA1.y - segB1.y) - s2_y * (segA1.x - segB1.x)) / (-s2_x * s1_y + s1_x * s2_y);
-
-            if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-                return true;
-            }
-
-            return false;
-        }
-
-        // From http://stackoverflow.com/questions/563198/how-do-you-detect-where-two-line-segments-intersect
-        static LineLineIntersection(p0: Vector2, p1: Vector2, p2: Vector2, p3: Vector2): { res: boolean, xr: number, yr: number } {
-            let s1_x = p1.x - p0.x; let s1_y = p1.y - p0.y;
-            let s2_x = p3.x - p2.x; let s2_y = p3.y - p2.y;
-            let s = (-s1_y * (p0.x - p2.x) + s1_x * (p0.y - p2.y)) / (-s2_x * s1_y + s1_x * s2_y);
-            let t = (s2_x * (p0.y - p2.y) - s2_y * (p0.x - p2.x)) / (-s2_x * s1_y + s1_x * s2_y);
-
-            if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
-                return { res: true, xr: p0.x + (t * s1_x), yr: p0.y + (t * s1_y) };
-            }
-
-            return { res: false, xr: 0, yr: 0 };
-        }
-
-        private static v0 = Vector2.Zero();
-        private static v1 = Vector2.Zero();
-        private static v2 = Vector2.Zero();
-
-        // Tell me that it's slow and I'll answer: yes it is!
-        // If you fancy to implement the SAT (Separating Axis Theorem) version: BE MY VERY WELCOMED GUEST!
-        static TriangleTriangleDosIntersect(tri1A: Vector2, tri1B: Vector2, tri1C: Vector2, tri2A: Vector2, tri2B: Vector2, tri2C: Vector2): boolean {
-            if (Math2D.LineLineDoesIntersect(tri1A, tri1B, tri2A, tri2B))     return true;
-            if (Math2D.LineLineDoesIntersect(tri1A, tri1B, tri2A, tri2C))     return true;
-            if (Math2D.LineLineDoesIntersect(tri1A, tri1B, tri2B, tri2C))     return true;
-
-            if (Math2D.LineLineDoesIntersect(tri1A, tri1C, tri2A, tri2B))     return true;
-            if (Math2D.LineLineDoesIntersect(tri1A, tri1C, tri2A, tri2C))     return true;
-            if (Math2D.LineLineDoesIntersect(tri1A, tri1C, tri2B, tri2C))     return true;
-
-            if (Math2D.LineLineDoesIntersect(tri1B, tri1C, tri2A, tri2B))     return true;
-            if (Math2D.LineLineDoesIntersect(tri1B, tri1C, tri2A, tri2C))     return true;
-            if (Math2D.LineLineDoesIntersect(tri1B, tri1C, tri2B, tri2C))     return true;
-
-            if (Vector2.PointInTriangle(tri2A, tri1A, tri1B, tri1C) &&
-                Vector2.PointInTriangle(tri2B, tri1A, tri1B, tri1C) &&
-                Vector2.PointInTriangle(tri2C, tri1A, tri1B, tri1C))           return true;
-
-            if (Vector2.PointInTriangle(tri1A, tri2A, tri2B, tri2C) &&
-                Vector2.PointInTriangle(tri1B, tri2A, tri2B, tri2C) &&
-                Vector2.PointInTriangle(tri1C, tri2A, tri2B, tri2C))           return true;
-
-            return false;
-        }
-    }
-
-}

canvas2D/src/Tools/babylon.observableArray.ts

@@ -1,594 +0,0 @@
-module BABYLON {
-
-    /**
-     * Class for the ObservableArray.onArrayChanged observable
-     */
-    export class ArrayChanged<T> {
-        constructor() {
-            this.action = 0;
-            this.newItems = new Array<{index: number, value: T }>();
-            this.removedItems = new Array<{ index: number, value: T }>();
-            this.changedItems = new Array<{ index: number, value: T }>();
-            this.newStartingIndex = -1;
-            this.removedStartingIndex = -1;
-        }
-
-        /**
-         * Contain the action that were made on the ObservableArray, it's one of the ArrayChanged.xxxAction members.
-         * Note the action's value can be used in the "mask" field of the Observable to only be notified about given action(s)
-         */
-        public action: number;
-
-        /**
-         * Only valid if the action is newItemsAction
-         */
-        public newItems: { index: number, value: T }[];
-
-        /**
-         * Only valid if the action is removedItemsAction
-         */
-        public removedItems: { index: number, value: T }[];
-
-        /**
-         * Only valid if the action is changedItemAction
-         */
-        public changedItems: { index: number, value: T }[];
-
-        /**
-         * Get the index of the first item inserted
-         */
-        public newStartingIndex: number;
-
-        /**
-         * Get the index of the first item removed
-         */
-        public removedStartingIndex: number;
-
-        /**
-         * Get the index of the first changed item
-         */
-        public changedStartingIndex: number;
-
-        /**
-         * The content of the array was totally cleared
-         */
-        public static get clearAction() {
-            return ArrayChanged._clearAction;
-        }
-
-        /**
-         * A new item was added, the newItems field contains the key/value pairs
-         */
-        public static get newItemsAction() {
-            return ArrayChanged._newItemsAction;
-        }
-
-        /**
-         * An existing item was removed, the removedKey field contains its key
-         */
-        public static get removedItemsAction() {
-            return ArrayChanged._removedItemsAction;
-        }
-
-        /**
-         * One or many items in the array were changed, the 
-         */
-        public static get changedItemAction() {
-            return ArrayChanged._changedItemAction;
-        }
-
-        /**
-         * The array's content was totally changed
-         * Depending on the method that used this mode the ChangedArray object may contains more information
-         */
-        public static get replacedArrayAction() {
-            return ArrayChanged._replacedArrayAction;
-        }
-
-        /**
-         * The length of the array changed
-         */
-        public static get lengthChangedAction() {
-            return ArrayChanged._lengthChangedAction;
-        }
-
-        private static _clearAction            = 0x1;
-        private static _newItemsAction         = 0x2;
-        private static _removedItemsAction     = 0x4;
-        private static _replacedArrayAction    = 0x8;
-        private static _lengthChangedAction    = 0x10;
-        private static _changedItemAction      = 0x20;
-
-        clear() {
-            this.action = 0;
-            this.newItems.splice(0);
-            this.removedItems.splice(0);
-            this.changedItems.splice(0);
-            this.removedStartingIndex = this.removedStartingIndex = this.changedStartingIndex = 0;
-        }
-    }
-
-    export class OAWatchedObjectChangedInfo<T> {
-        object: T;
-        propertyChanged: PropertyChangedInfo;
-    }
-
-    /**
-     * This class mimics the Javascript Array and TypeScript Array<T> classes, adding new features concerning the Observable pattern.
-     * 
-     */
-    export class ObservableArray<T> extends PropertyChangedBase {
-        /**
-         * Create an Observable Array.
-         * @param watchObjectsPropertyChange
-         * @param array and optional array that will be encapsulated by this ObservableArray instance. That's right, it's NOT a copy!
-         */
-        constructor(watchObjectsPropertyChange: boolean, array?: Array<T>) {
-            super();
-            this._array = (array!=null) ? array : new Array<T>();
-            this.dci = new ArrayChanged<T>();
-            this._callingArrayChanged = false;
-            this._arrayChanged = null;
-
-            this._callingWatchedObjectChanged = false;
-            this._watchObjectsPropertyChange = watchObjectsPropertyChange;
-            this._watchedObjectList = this._watchObjectsPropertyChange ? new StringDictionary<Observer<PropertyChangedInfo>>() : null;
-            this._woci = new OAWatchedObjectChangedInfo<T>();
-        }
-
-        /**
-          * Gets or sets the length of the array. This is a number one higher than the highest element defined in an array.
-          */
-        get length(): number {
-            return this._array.length;
-        }
-
-        set length(value: number) {
-            if (value === this._array.length) {
-                return;
-            }
-
-            let oldLength = this._array.length;
-            this._array.length = value;
-
-            this.onPropertyChanged("length", oldLength, this._array.length);
-        }
-
-        getAt(index: number): T {
-            return this._array[index];
-        }
-
-        setAt(index: number, value: T): boolean {
-            if (index < 0) {
-                return false;
-            }
-
-            let insertion = (index >= this._array.length) || this._array[index] === undefined;
-            let oldLength = 0;
-            if (insertion) {
-                oldLength = this._array.length;
-            } else if (this._watchObjectsPropertyChange) {
-                this._removeWatchedElement(this._array[index]);
-            }
-
-            this._array[index] = value;
-
-            if (this._watchObjectsPropertyChange) {
-                this._addWatchedElement(value);
-            }
-
-            if (insertion) {
-                this.onPropertyChanged("length", oldLength, this._array.length);
-            }
-
-            let ac = this.getArrayChangedObject();
-            if (ac) {
-                ac.action = insertion ? ArrayChanged.newItemsAction : ArrayChanged.changedItemAction;
-                if (insertion) {
-                    ac.newItems.splice(0, ac.newItems.length, { index: index, value: value });
-                    ac.newStartingIndex = index;
-                    ac.changedItems.splice(0);
-                } else {
-                    ac.newItems.splice(0);
-                    ac.changedStartingIndex = index;
-                    ac.changedItems.splice(0, ac.changedItems.length, { index: index, value: value });
-                }
-                ac.removedItems.splice(0);
-                ac.removedStartingIndex = -1;
-                this.callArrayChanged(ac);
-            }
-        }
-
-        /**
-          * Returns a string representation of an array.
-          */
-        toString(): string {
-            return this._array.toString();
-        }
-
-        toLocaleString(): string {
-            return this._array.toLocaleString();
-        }
-
-        /**
-          * Appends new elements to an array, and returns the new length of the array.
-          * @param items New elements of the Array.
-          */
-        push(...items: T[]): number {
-            let oldLength = this._array.length;
-            let n = this._array.push(...items);
-
-            if (this._watchObjectsPropertyChange) {
-                this._addWatchedElement(...items);
-            }
-
-            this.onPropertyChanged("length", oldLength, this._array.length);
-            let ac = this.getArrayChangedObject();
-            if (ac) {
-                ac.action = ArrayChanged.newItemsAction;
-                ac.newStartingIndex = oldLength;
-                this.feedNotifArray(ac.newItems, oldLength, ...items);
-                this.callArrayChanged(ac);
-            }
-
-            return n;
-        }
-
-        /**
-          * Removes the last element from an array and returns it.
-          */
-        pop(): T {
-            let firstRemove = this._array.length - 1;
-            let res = this._array.pop();
-
-            if (res && this._watchObjectsPropertyChange) {
-                this._removeWatchedElement(res);
-            }
-
-            if (firstRemove !== -1) {
-                this.onPropertyChanged("length", this._array.length + 1, this._array.length);
-
-                let ac = this.getArrayChangedObject();
-                if (ac) {
-                    ac.action = ArrayChanged.removedItemsAction;
-                    ac.removedStartingIndex = firstRemove;
-                    this.feedNotifArray(ac.removedItems, firstRemove, res);
-                }
-            }
-
-            return res;
-        }
-
-        /**
-          * Combines two or more arrays.
-          * @param items Additional items to add to the end of array1.
-          */
-        concat(...items: T[]): ObservableArray<T> {
-            return new ObservableArray<T>(this._watchObjectsPropertyChange, this._array.concat(...items));
-        }
-
-        /**
-          * Adds all the elements of an array separated by the specified separator string.
-          * @param separator A string used to separate one element of an array from the next in the resulting String. If omitted, the array elements are separated with a comma.
-          */
-        join(separator?: string): string {
-            return this._array.join(separator);
-        }
-
-        /**
-          * Reverses the elements in an Array.
-         * The arrayChanged action is 
-          */
-        reverse(): T[] {
-            let res = this._array.reverse();
-
-            let ac = this.getArrayChangedObject();
-            ac.action = ArrayChanged.replacedArrayAction;
-
-            return res;
-        }
-
-        /**
-          * Removes the first element from an array and returns it, shift all subsequents element one element before.
-         * The ArrayChange action is replacedArrayAction, the whole array changes and must be reevaluate as such, the removed element is in removedItems.
-         * 
-          */
-        shift(): T {
-            let oldLength = this._array.length;
-            let res = this._array.shift();
-
-            if (this._watchedObjectChanged && res!=null) {
-                this._removeWatchedElement(res);
-            }
-
-            if (oldLength !== 0) {
-                this.onPropertyChanged("length", oldLength, this._array.length);
-
-                let ac = this.getArrayChangedObject();
-                if (ac) {
-                    ac.action = ArrayChanged.replacedArrayAction;
-                    ac.removedItems.splice(0, ac.removedItems.length, { index: 0, value: res });
-                    ac.newItems.splice(0);
-                    ac.changedItems.splice(0);
-                    ac.removedStartingIndex = 0;
-                    this.callArrayChanged(ac);
-                }
-            }
-
-            return res;
-        }
-
-        /** 
-          * Returns a section of an array.
-          * @param start The beginning of the specified portion of the array.
-          * @param end The end of the specified portion of the array.
-          */
-        slice(start?: number, end?: number): ObservableArray<T> {
-            return new ObservableArray<T>(this._watchObjectsPropertyChange, this._array.slice(start, end));
-        }
-
-        /**
-          * Sorts an array.
-          * @param compareFn The name of the function used to determine the order of the elements. If omitted, the elements are sorted in ascending, ASCII character order.
-         * On the contrary of the Javascript Array's implementation, this method returns nothing
-          */
-        sort(compareFn?: (a: T, b: T) => number): void {
-            let oldLength = this._array.length;
-
-            this._array.sort(compareFn);
-
-            if (oldLength !== 0) {
-                let ac = this.getArrayChangedObject();
-                if (ac) {
-                    ac.clear();
-                    ac.action = ArrayChanged.replacedArrayAction;
-                    this.callArrayChanged(ac);
-                }
-            }
-        }
-
-        /**
-          * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
-          * @param start The zero-based location in the array from which to start removing elements.
-          * @param deleteCount The number of elements to remove.
-          * @param items Elements to insert into the array in place of the deleted elements.
-          */
-        splice(start: number, deleteCount: number, ...items: T[]): T[] {
-            let oldLength = this._array.length;
-
-            if (this._watchObjectsPropertyChange) {
-                for (let i = start; i < start+deleteCount; i++) {
-                    let val = this._array[i];
-                    if (this._watchObjectsPropertyChange && val != null) {
-                        this._removeWatchedElement(val);
-                    }
-                }
-            }
-
-            let res = this._array.splice(start, deleteCount, ...items);
-
-            if (this._watchObjectsPropertyChange) {
-                this._addWatchedElement(...items);
-            }
-
-            if (oldLength !== this._array.length) {
-                this.onPropertyChanged("length", oldLength, this._array.length);
-            }
-
-            let ac = this.getArrayChangedObject();
-            if (ac) {
-                ac.clear();
-                ac.action = ArrayChanged.replacedArrayAction;
-                this.callArrayChanged(ac);
-            }
-
-            return res;
-        }
-
-        /**
-          * Inserts new elements at the start of an array.
-          * @param items  Elements to insert at the start of the Array.
-          * The ChangedArray action is replacedArrayAction, newItems contains the list of the added items
-          */
-        unshift(...items: T[]): number {
-            let oldLength = this._array.length;
-            
-            let res = this._array.unshift(...items);
-
-            if (this._watchObjectsPropertyChange) {
-                this._addWatchedElement(...items);
-            }
-
-            this.onPropertyChanged("length", oldLength, this._array.length);
-            let ac = this.getArrayChangedObject();
-            if (ac) {
-                ac.clear();
-                ac.action = ArrayChanged.replacedArrayAction;
-                ac.newStartingIndex = 0,
-                this.feedNotifArray(ac.newItems, 0, ...items);
-                this.callArrayChanged(ac);
-            }
-
-            return res;
-        }
-
-        /**
-          * Returns the index of the first occurrence of a value in an array.
-          * @param searchElement The value to locate in the array.
-          * @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at index 0.
-          */
-        indexOf(searchElement: T, fromIndex?: number): number {
-            return this._array.indexOf(searchElement, fromIndex);
-        }
-
-        /**
-          * Returns the index of the last occurrence of a specified value in an array.
-          * @param searchElement The value to locate in the array.
-          * @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at the last index in the array.
-          */
-        lastIndexOf(searchElement: T, fromIndex?: number): number {
-            return this._array.lastIndexOf(searchElement, fromIndex);
-        }
-
-        /**
-          * Determines whether all the members of an array satisfy the specified test.
-          * @param callbackfn A function that accepts up to three arguments. The every method calls the callbackfn function for each element in array1 until the callbackfn returns false, or until the end of the array.
-          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
-          */
-        every(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean {
-            return this._array.every(callbackfn, thisArg);
-        }
-
-        /**
-          * Determines whether the specified callback function returns true for any element of an array.
-          * @param callbackfn A function that accepts up to three arguments. The some method calls the callbackfn function for each element in array1 until the callbackfn returns true, or until the end of the array.
-          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
-          */
-        some(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): boolean {
-            return this._array.some(callbackfn, thisArg);
-        }
-
-        /**
-          * Performs the specified action for each element in an array.
-          * @param callbackfn  A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array. 
-          * @param thisArg  An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
-          */
-        forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void {
-            return this._array.forEach(callbackfn, thisArg);
-        }
-
-        /**
-          * Calls a defined callback function on each element of an array, and returns an array that contains the results.
-          * @param callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array. 
-          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
-          */
-        map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[] {
-            return this._array.map(callbackfn, thisArg);
-        }
-
-        /**
-          * Returns the elements of an array that meet the condition specified in a callback function. 
-          * @param callbackfn A function that accepts up to three arguments. The filter method calls the callbackfn function one time for each element in the array. 
-          * @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
-          */
-        filter(callbackfn: (value: T, index: number, array: T[]) => boolean, thisArg?: any): T[] {
-            return this._array.filter(callbackfn, thisArg);
-        }
-
-        /**
-          * Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
-          * @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
-          * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
-          */
-        reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue?: T): T {
-            return this._array.reduce(callbackfn);
-        }
-
-        /** 
-          * Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
-          * @param callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array. 
-          * @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
-          */
-        reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue?: T): T {
-            return this._array.reduceRight(callbackfn);
-        }
-
-        get arrayChanged(): Observable<ArrayChanged<T>> {
-            if (!this._arrayChanged) {
-                this._arrayChanged = new Observable<ArrayChanged<T>>();
-            }
-            return this._arrayChanged;
-        }
-
-        protected getArrayChangedObject(): ArrayChanged<T> {
-            if (this._arrayChanged && this._arrayChanged.hasObservers()) {
-                let ac = this._callingArrayChanged ? new ArrayChanged<T>() : this.dci;
-                return ac;
-            }
-            return null;
-        }
-
-        protected feedNotifArray(array: { index: number, value: T }[], startindIndex: number, ...items: T[]) {
-            array.splice(0);
-            for (let i = 0; i < items.length; i++) {
-                let value = this._array[i + startindIndex];
-                if (value !== undefined) {
-                    array.push({ index: i + startindIndex, value: value });
-                }
-            }
-        }
-
-        protected callArrayChanged(ac: ArrayChanged<T>) {
-            try {
-                this._callingArrayChanged = true;
-                this.arrayChanged.notifyObservers(ac, ac.action);
-            } finally {
-                this._callingArrayChanged = false;
-            }
-        }
-
-        get watchedObjectChanged(): Observable<OAWatchedObjectChangedInfo<T>> {
-            if (!this._watchedObjectChanged) {
-                this._watchedObjectChanged = new Observable<OAWatchedObjectChangedInfo<T>>();
-            }
-            return this._watchedObjectChanged;
-        }
-
-        private _addWatchedElement(...items: T[]) {
-            for (let curItem of items) {
-                if (curItem["propertyChanged"]) {
-                    let key = curItem["__ObsArrayObjID__"] as string;
-
-                    // The object may already be part of another ObsArray, so there already be a valid ID
-                    if (!key) {
-                        key = Tools.RandomId();
-                        curItem["__ObsArrayObjID__"] = key;
-                    }
-
-                    this._watchedObjectList.add(key, (<IPropertyChanged><any>curItem).propertyChanged.add((e, d) => {
-                        this.onWatchedObjectChanged(key, curItem, e);
-                    }));
-                }
-            }
-        }
-
-        private _removeWatchedElement(...items: T[]) {
-            for (let curItem of items) {
-                let key = curItem["__ObsArrayObjID__"] as string;
-                if (key != null) {
-                    let observer = this._watchedObjectList.getAndRemove(key);
-                    (<IPropertyChanged><any>curItem).propertyChanged.remove(observer);
-                }
-            }
-        }
-
-        protected onWatchedObjectChanged(key: string, object: T, propChanged: PropertyChangedInfo) {
-            if (this._watchedObjectChanged && this._watchedObjectChanged.hasObservers()) {
-
-                let woci = this._callingWatchedObjectChanged ? new OAWatchedObjectChangedInfo<T>() : this._woci;
-                woci.object = object;
-                woci.propertyChanged = propChanged;
-
-                try {
-                    this._callingWatchedObjectChanged = true;
-                    this.watchedObjectChanged.notifyObservers(woci);
-                } finally {
-                    this._callingWatchedObjectChanged = false;
-                }
-            }
-        }
-
-        private _array: Array<T>;
-
-        private _arrayChanged: Observable<ArrayChanged<T>>;
-        private dci = new ArrayChanged<T>();
-        private _callingArrayChanged: boolean = false;
-
-        private _watchedObjectChanged: Observable<OAWatchedObjectChangedInfo<T>>;
-        private _woci: OAWatchedObjectChangedInfo<T>;
-        private _callingWatchedObjectChanged: boolean;
-        private _watchObjectsPropertyChange: boolean;
-        private _watchedObjectList: StringDictionary<Observer<PropertyChangedInfo>>;
-
-    }
-}

canvas2D/src/Tools/babylon.observableStringDictionary.ts

@@ -1,324 +0,0 @@
-module BABYLON {
-
-    /**
-     * Class for the ObservableStringDictionary.onDictionaryChanged observable
-     */
-    export class DictionaryChanged<T> {
-        /**
-         * Contain the action that were made on the dictionary, it's one of the DictionaryChanged.xxxAction members.
-         * Note the action's value can be used in the "mask" field of the Observable to only be notified about given action(s)
-         */
-        public action: number;
-
-        /**
-         * Only valid if the action is newItemAction
-         */
-        public newItem: { key: string, value: T }
-
-        /**
-         * Only valid if the action is removedItemAction
-         */
-        public removedKey: string;
-
-        /**
-         * Only valid if the action is itemValueChangedAction
-         */
-        public changedItem: { key: string, oldValue: T, newValue: T }
-
-        /**
-         * The content of the dictionary was totally cleared
-         */
-        public static get clearAction() {
-            return DictionaryChanged._clearAction;
-        }
-
-        /**
-         * A new item was added, the newItem field contains the key/value pair
-         */
-        public static get newItemAction() {
-            return DictionaryChanged._newItemAction;
-        }
-
-        /**
-         * An existing item was removed, the removedKey field contains its key
-         */
-        public static get removedItemAction() {
-            return DictionaryChanged._removedItemAction;
-        }
-
-        /**
-         * An existing item had a value change, the changedItem field contains the key/value
-         */
-        public static get itemValueChangedAction() {
-            return DictionaryChanged._itemValueChangedAction;
-        }
-
-        /**
-         * The dictionary's content was reset and replaced by the content of another dictionary.
-         * DictionaryChanged<T> contains no further information about this action
-         */
-        public static get replacedAction() {
-            return DictionaryChanged._replacedAction;
-        }
-
-        private static _clearAction            = 0x1;
-        private static _newItemAction          = 0x2;
-        private static _removedItemAction      = 0x4;
-        private static _itemValueChangedAction = 0x8;
-        private static _replacedAction         = 0x10;
-    }
-
-    export class OSDWatchedObjectChangedInfo<T> {
-        key: string;
-        object: T;
-        propertyChanged: PropertyChangedInfo;
-    }
-
-    export class ObservableStringDictionary<T> extends StringDictionary<T> implements IPropertyChanged {
-
-        constructor(watchObjectsPropertyChange: boolean) {
-            super();
-
-            this._propertyChanged = null;
-            this._dictionaryChanged = null;
-            this.dci = new DictionaryChanged<T>();
-            this._callingDicChanged = false;
-            this._watchedObjectChanged = null;
-            this._callingWatchedObjectChanged = false;
-            this._woci = new OSDWatchedObjectChangedInfo<T>();
-            this._watchObjectsPropertyChange = watchObjectsPropertyChange;
-            this._watchedObjectList = this._watchObjectsPropertyChange ? new StringDictionary<Observer<PropertyChangedInfo>>() : null;
-        }
-
-        /**
-         * This will clear this dictionary and copy the content from the 'source' one.
-         * If the T value is a custom object, it won't be copied/cloned, the same object will be used
-         * @param source the dictionary to take the content from and copy to this dictionary
-         */
-        public copyFrom(source: StringDictionary<T>) {
-            let oldCount = this.count;
-            // Don't rely on this class' implementation for clear/add otherwise tons of notification will be thrown
-            super.clear();
-            source.forEach((t, v) => this._add(t, v, false, this._watchObjectsPropertyChange));
-            this.onDictionaryChanged(DictionaryChanged.replacedAction, null, null, null);
-            this.onPropertyChanged("count", oldCount, this.count);
-        }
-
-        /**
-         * Get a value from its key or add it if it doesn't exist.
-         * This method will ensure you that a given key/data will be present in the dictionary.
-         * @param key the given key to get the matching value from
-         * @param factory the factory that will create the value if the key is not present in the dictionary.
-         * The factory will only be invoked if there's no data for the given key.
-         * @return the value corresponding to the key.
-         */
-        public getOrAddWithFactory(key: string, factory: (key: string) => T): T {
-            let val = super.getOrAddWithFactory(key, k => {
-                let v = factory(key);
-                this._add(key, v, true, this._watchObjectsPropertyChange);
-                return v;
-            });
-
-            return val;
-        }
-
-        /**
-         * Add a new key and its corresponding value
-         * @param key the key to add
-         * @param value the value corresponding to the key
-         * @return true if the operation completed successfully, false if we couldn't insert the key/value because there was already this key in the dictionary
-         */
-        public add(key: string, value: T): boolean {
-            return this._add(key, value, true, this._watchObjectsPropertyChange);
-        }
-
-        public getAndRemove(key: string): T {
-            let val = super.get(key);
-            this._remove(key, true, val);
-            return val;
-        }
-
-        private _add(key: string, value: T, fireNotif: boolean, registerWatcher: boolean): boolean {
-            if (super.add(key, value)) {
-                if (fireNotif) {
-                    this.onDictionaryChanged(DictionaryChanged.newItemAction, { key: key, value: value }, null, null);
-                    this.onPropertyChanged("count", this.count - 1, this.count);
-                }
-                if (registerWatcher) {
-                    this._addWatchedElement(key, value);
-                }
-                return true;
-            }
-            return false;
-        }
-
-        private _addWatchedElement(key: string, el: T) {
-            if (el["propertyChanged"]) {
-                this._watchedObjectList.add(key, (<IPropertyChanged><any>el).propertyChanged.add((e, d) => {
-                    this.onWatchedObjectChanged(key, el, e);
-                }));
-            }            
-        }
-
-        private _removeWatchedElement(key: string, el: T) {
-            let observer = this._watchedObjectList.getAndRemove(key);
-            if (el["propertyChanged"]) {
-                (<IPropertyChanged><any>el).propertyChanged.remove(observer);
-            }
-        }
-
-        public set(key: string, value: T): boolean {
-            let oldValue = this.get(key);
-            if (this._watchObjectsPropertyChange) {
-                this._removeWatchedElement(key, oldValue);
-            }
-
-            if (super.set(key, value)) {
-                this.onDictionaryChanged(DictionaryChanged.itemValueChangedAction, null, null, { key: key, oldValue: oldValue, newValue: value });
-                this._addWatchedElement(key, value);
-                return true;
-            }
-
-            return false;
-        }
-
-        /**
-         * Remove a key/value from the dictionary.
-         * @param key the key to remove
-         * @return true if the item was successfully deleted, false if no item with such key exist in the dictionary
-         */
-        public remove(key: string): boolean {
-            return this._remove(key, true);
-        }
-
-        private _remove(key: string, fireNotif: boolean, element?: T): boolean {
-            if (!element) {
-                element = this.get(key);
-            }
-
-            if (!element) {
-                return false;
-            }
-
-            if (super.remove(key) === undefined) {
-                return false;
-            }
-
-            this.onDictionaryChanged(DictionaryChanged.removedItemAction, null, key, null);
-            this.onPropertyChanged("count", this.count + 1, this.count);
-
-            if (this._watchObjectsPropertyChange) {
-                this._removeWatchedElement(key, element);
-            }
-
-            return true;
-        }
-
-        /**
-         * Clear the whole content of the dictionary
-         */
-        public clear() {
-            if (this._watchedObjectList) {
-                this._watchedObjectList.forEach((k, v) => {
-                    let el = this.get(k);
-                    this._removeWatchedElement(k, el);
-                });
-                this._watchedObjectList.clear();
-            }
-
-            let oldCount = this.count;
-            super.clear();
-            this.onDictionaryChanged(DictionaryChanged.clearAction, null, null, null);
-            this.onPropertyChanged("count", oldCount, 0);
-        }
-
-        get propertyChanged(): Observable<PropertyChangedInfo> {
-            if (!this._propertyChanged) {
-                this._propertyChanged = new Observable<PropertyChangedInfo>();
-            }
-            return this._propertyChanged;
-        }
-
-        protected onPropertyChanged<T>(propName: string, oldValue: T, newValue: T, mask?: number) {
-            if (this._propertyChanged && this._propertyChanged.hasObservers()) {
-
-                let pci = ObservableStringDictionary.callingPropChanged ? new PropertyChangedInfo() : ObservableStringDictionary.pci;
-
-                pci.oldValue = oldValue;
-                pci.newValue = newValue;
-                pci.propertyName = propName;
-
-                try {
-                    ObservableStringDictionary.callingPropChanged = true;
-                    this.propertyChanged.notifyObservers(pci, mask);
-                } finally {
-                    ObservableStringDictionary.callingPropChanged = false;
-                }
-            }
-        }
-
-        get dictionaryChanged(): Observable<DictionaryChanged<T>> {
-            if (!this._dictionaryChanged) {
-                this._dictionaryChanged = new Observable<DictionaryChanged<T>>();
-            }
-            return this._dictionaryChanged;
-        }
-
-        protected onDictionaryChanged(action: number, newItem: { key: string, value: T }, removedKey: string, changedItem: { key: string, oldValue: T, newValue: T }) {
-            if (this._dictionaryChanged && this._dictionaryChanged.hasObservers()) {
-
-                let dci = this._callingDicChanged ? new DictionaryChanged<T>() : this.dci;
-
-                dci.action = action;
-                dci.newItem = newItem;
-                dci.removedKey = removedKey;
-                dci.changedItem = changedItem;
-
-                try {
-                    this._callingDicChanged = true;
-                    this.dictionaryChanged.notifyObservers(dci, action);
-                } finally {
-                    this._callingDicChanged = false;
-                }
-            }
-        }
-
-        get watchedObjectChanged(): Observable<OSDWatchedObjectChangedInfo<T>> {
-            if (!this._watchedObjectChanged) {
-                this._watchedObjectChanged = new Observable<OSDWatchedObjectChangedInfo<T>>();
-            }
-            return this._watchedObjectChanged;
-        }
-
-        protected onWatchedObjectChanged(key: string, object: T, propChanged: PropertyChangedInfo) {
-            if (this._watchedObjectChanged && this._watchedObjectChanged.hasObservers()) {
-
-                let woci = this._callingWatchedObjectChanged ? new OSDWatchedObjectChangedInfo<T>() : this._woci;
-                woci.key = key;
-                woci.object = object;
-                woci.propertyChanged = propChanged;
-
-                try {
-                    this._callingWatchedObjectChanged = true;
-                    this.watchedObjectChanged.notifyObservers(woci);
-                } finally {
-                    this._callingWatchedObjectChanged = false;
-                }
-            }
-        }
-
-        private _propertyChanged: Observable<PropertyChangedInfo>;
-        private static pci = new PropertyChangedInfo();
-        private static callingPropChanged: boolean = false;
-
-        private _dictionaryChanged: Observable<DictionaryChanged<T>>;
-        private dci: DictionaryChanged<T>;
-        private _callingDicChanged: boolean;
-
-        private _watchedObjectChanged: Observable<OSDWatchedObjectChangedInfo<T>>;
-        private _woci: OSDWatchedObjectChangedInfo<T>;
-        private _callingWatchedObjectChanged: boolean;
-        private _watchObjectsPropertyChange: boolean;
-        private _watchedObjectList: StringDictionary<Observer<PropertyChangedInfo>>;
-    }
-}

canvas2D/src/lib.d.ts

@@ -1 +0,0 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>

canvas2D/src/shaders/ellipse2d.fragment.fx

@@ -1,5 +0,0 @@
-varying vec4 vColor;
-
-void main(void) {
-	gl_FragColor = vColor;
-}

canvas2D/src/shaders/ellipse2d.vertex.fx

@@ -1,122 +0,0 @@
-// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
-#ifdef Instanced
-#define att attribute
-#else
-#define att uniform
-#endif
-
-attribute float index;
-att vec2 zBias;
-att vec4 transformX;
-att vec4 transformY;
-att vec3 renderingInfo;
-att float opacity;
-
-#ifdef Border
-att float borderThickness;
-#endif
-
-#ifdef FillSolid
-att vec4 fillSolidColor;
-#endif
-
-#ifdef BorderSolid
-att vec4 borderSolidColor;
-#endif
-
-#ifdef FillGradient
-att vec4 fillGradientColor1;
-att vec4 fillGradientColor2;
-att vec4 fillGradientTY;
-#endif
-
-#ifdef BorderGradient
-att vec4 borderGradientColor1;
-att vec4 borderGradientColor2;
-att vec4 borderGradientTY;
-#endif
-
-// x, y and z are: width, height, subdivisions
-att vec3 properties;
-
-#define TWOPI 6.28318530
-
-// Output
-varying vec2 vUV;
-varying vec4 vColor;
-
-void main(void) {
-
-	vec2 pos2;
-
-#ifdef Border
-	float w = properties.x;
-	float h = properties.y;
-	float ms = properties.z;
-	vec2 borderOffset = vec2(1.0, 1.0);
-
-	float segi = index;
-	if (index < ms) {
-		borderOffset = vec2(1.0-(borderThickness*2.0 / w), 1.0-(borderThickness*2.0 / h));
-	}
-	else {
-		segi -= ms;
-	}
-
-	float angle = TWOPI * segi / ms;
-	pos2.x = (cos(angle) / 2.0) + 0.5;
-	pos2.y = (sin(angle) / 2.0) + 0.5;
-
-	pos2.x = ((pos2.x - 0.5) * borderOffset.x) + 0.5;
-	pos2.y = ((pos2.y - 0.5) * borderOffset.y) + 0.5;
-#else
-	if (index == 0.0) {
-		pos2 = vec2(0.5, 0.5);
-	}
-	else {
-		float ms = properties.z;
-
-		float angle = TWOPI * (index - 1.0) / ms;
-		pos2.x = (cos(angle) / 2.0) + 0.5;
-		pos2.y = (sin(angle) / 2.0) + 0.5;
-	}
-#endif
-
-#ifdef FillSolid
-	vColor = fillSolidColor;
-#endif
-
-#ifdef BorderSolid
-	vColor = borderSolidColor;
-#endif
-
-#ifdef FillGradient
-	float v = dot(vec4(pos2.xy, 1, 1), fillGradientTY);
-	vColor = mix(fillGradientColor2, fillGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
-#endif
-
-#ifdef BorderGradient
-	float v = dot(vec4(pos2.xy, 1, 1), borderGradientTY);
-	vColor = mix(borderGradientColor2, borderGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
-#endif
-
-	vColor.a *= opacity;
-	vec4 pos;
-	pos.xy = pos2.xy * properties.xy;
-	pos.z = 1.0;
-	pos.w = 1.0;
-
-	float x = dot(pos, transformX);
-	float y = dot(pos, transformY);
-	if (renderingInfo.z == 1.0) {
-		float rw = renderingInfo.x;
-		float rh = renderingInfo.y;
-		float irw = 2.0 / rw;
-		float irh = 2.0 / rh;
-
-		x = (floor((x / irw) + 0.5) * irw) + irw / 2.0;
-		y = (floor((y / irh) + 0.5) * irh) + irh / 2.0;
-	}
-
-	gl_Position = vec4(x, y, zBias.x, 1);
-}

canvas2D/src/shaders/lines2d.fragment.fx

@@ -1,5 +0,0 @@
-varying vec4 vColor;
-
-void main(void) {
-	gl_FragColor = vColor;
-}

canvas2D/src/shaders/lines2d.vertex.fx

@@ -1,82 +0,0 @@
-// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
-#ifdef Instanced
-#define att attribute
-#else
-#define att uniform
-#endif
-
-attribute vec2 position;
-att vec2 zBias;
-att vec4 transformX;
-att vec4 transformY;
-att vec3 renderingInfo;
-att float opacity;
-
-#ifdef FillSolid
-att vec4 fillSolidColor;
-#endif
-
-#ifdef BorderSolid
-att vec4 borderSolidColor;
-#endif
-
-#ifdef FillGradient
-att vec2 boundingMin;
-att vec2 boundingMax;
-att vec4 fillGradientColor1;
-att vec4 fillGradientColor2;
-att vec4 fillGradientTY;
-#endif
-
-#ifdef BorderGradient
-att vec4 borderGradientColor1;
-att vec4 borderGradientColor2;
-att vec4 borderGradientTY;
-#endif
-
-#define TWOPI 6.28318530
-
-// Output
-varying vec2 vUV;
-varying vec4 vColor;
-
-void main(void) {
-
-#ifdef FillSolid
-	vColor = fillSolidColor;
-#endif
-
-#ifdef BorderSolid
-	vColor = borderSolidColor;
-#endif
-
-#ifdef FillGradient
-	float v = dot(vec4((position.xy - boundingMin) / (boundingMax - boundingMin), 1, 1), fillGradientTY);
-	vColor = mix(fillGradientColor2, fillGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
-#endif
-
-#ifdef BorderGradient
-	float v = dot(vec4((position.xy - boundingMin) / (boundingMax - boundingMin), 1, 1), borderGradientTY);
-	vColor = mix(borderGradientColor2, borderGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
-#endif
-
-	vColor.a *= opacity;
-	vec4 pos;
-	pos.xy = position.xy;
-	pos.z = 1.0;
-	pos.w = 1.0;
-	
-	float x = dot(pos, transformX);
-	float y = dot(pos, transformY);
-	if (renderingInfo.z == 1.0) {
-		float rw = renderingInfo.x;
-		float rh = renderingInfo.y;
-		float irw = 2.0 / rw;
-		float irh = 2.0 / rh;
-
-		x = (floor((x / irw) + 0.5) * irw) + irw / 2.0;
-		y = (floor((y / irh) + 0.5) * irh) + irh / 2.0;
-	}
-
-	gl_Position = vec4(x, y, zBias.x, 1);
-}

canvas2D/src/shaders/rect2d.fragment.fx

@@ -1,5 +0,0 @@
-varying vec4 vColor;
-
-void main(void) {
-	gl_FragColor = vColor;
-}

canvas2D/src/shaders/rect2d.vertex.fx

@@ -1,220 +0,0 @@
-// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
-#ifdef Instanced
-#define att attribute
-#else
-#define att uniform
-#endif
-
-attribute float index;
-att vec2 zBias;
-att vec4 transformX;
-att vec4 transformY;
-att vec3 renderingInfo;
-att float opacity;
-
-#ifdef Border
-att float borderThickness;
-#endif
-
-#ifdef FillSolid
-att vec4 fillSolidColor;
-#endif
-
-#ifdef BorderSolid
-att vec4 borderSolidColor;
-#endif
-
-#ifdef FillGradient
-att vec4 fillGradientColor1;
-att vec4 fillGradientColor2;
-att vec4 fillGradientTY;
-#endif
-
-#ifdef BorderGradient
-att vec4 borderGradientColor1;
-att vec4 borderGradientColor2;
-att vec4 borderGradientTY;
-#endif
-
-// xyzw are: width, height, roundRadius (0.0 for simple rectangle with four vertices)
-att vec3 properties;
-
-// First index is the center, then there's four sections of 16 subdivisions
-
-#define rsub0 17.0
-#define rsub1 33.0
-#define rsub2 49.0
-#define rsub3 65.0
-#define rsub 64.0
-#define TWOPI 6.28318530
-
-// Output
-varying vec2 vUV;
-varying vec4 vColor;
-
-void main(void) {
-
-	vec2 pos2;
-
-	// notRound case, only five vertices, 0 is center, then the 4 other for perimeter
-	if (properties.z == 0.0) {
-#ifdef Border
-		float w = properties.x;
-		float h = properties.y;
-		vec2 borderOffset = vec2(1.0, 1.0);
-
-		float segi = index;
-		if (index < 4.0) {
-			borderOffset = vec2(1.0 - (borderThickness*2.0 / w), 1.0 - (borderThickness*2.0 / h));
-		}
-		else {
-			segi -= 4.0;
-		}
-
-		if (segi == 0.0) {
-			pos2 = vec2(1.0, 1.0);
-		} 
-		else if (segi == 1.0) {
-			pos2 = vec2(1.0, 0.0);
-		}
-		else if (segi == 2.0) {
-			pos2 = vec2(0.0, 0.0);
-		} 
-		else {
-			pos2 = vec2(0.0, 1.0);
-		}
-		pos2.x = ((pos2.x - 0.5) * borderOffset.x) + 0.5;
-		pos2.y = ((pos2.y - 0.5) * borderOffset.y) + 0.5;
-#else
-		if (index == 0.0) {
-			pos2 = vec2(0.5, 0.5);
-		}
-		else if (index == 1.0) {
-			pos2 = vec2(1.0, 1.0);
-		}
-		else if (index == 2.0) {
-			pos2 = vec2(1.0, 0.0);
-		}
-		else if (index == 3.0) {
-			pos2 = vec2(0.0, 0.0);
-		}
-		else {
-			pos2 = vec2(0.0, 1.0);
-		}
-#endif
-	}
-	else
-	{
-#ifdef Border
-		float w = properties.x;
-		float h = properties.y;
-		float r = properties.z;
-		float nru = r / w;
-		float nrv = r / h;
-		vec2 borderOffset = vec2(1.0, 1.0);
-
-		float segi = index;
-		if (index < rsub) {
-			borderOffset = vec2(1.0 - (borderThickness*2.0 / w), 1.0 - (borderThickness*2.0 / h));
-		}
-		else {
-			segi -= rsub;
-		}
-
-		// right/bottom
-		if (segi < rsub0) {
-			pos2 = vec2(1.0 - nru, nrv);
-		}
-		// left/bottom
-		else if (segi < rsub1) {
-			pos2 = vec2(nru, nrv);
-		}
-		// left/top
-		else if (segi < rsub2) {
-			pos2 = vec2(nru, 1.0 - nrv);
-		}
-		// right/top
-		else {
-			pos2 = vec2(1.0 - nru, 1.0 - nrv);
-		}
-
-		float angle = TWOPI - ((index - 1.0) * TWOPI / (rsub - 0.5));
-		pos2.x += cos(angle) * nru;
-		pos2.y += sin(angle) * nrv;
-
-		pos2.x = ((pos2.x - 0.5) * borderOffset.x) + 0.5;
-		pos2.y = ((pos2.y - 0.5) * borderOffset.y) + 0.5;
-
-#else
-		if (index == 0.0) {
-			pos2 = vec2(0.5, 0.5);
-		}
-		else {
-			float w = properties.x;
-			float h = properties.y;
-			float r = properties.z;
-			float nru = r / w;
-			float nrv = r / h;
-
-			// right/bottom
-			if (index < rsub0) {
-				pos2 = vec2(1.0 - nru, nrv);
-			}
-			// left/bottom
-			else if (index < rsub1) {
-				pos2 = vec2(nru, nrv);
-			}
-			// left/top
-			else if (index < rsub2) {
-				pos2 = vec2(nru, 1.0 - nrv);
-			}
-			// right/top
-			else {
-				pos2 = vec2(1.0 - nru, 1.0 - nrv);
-			}
-
-			float angle = TWOPI - ((index - 1.0) * TWOPI / (rsub - 0.5));
-			pos2.x += cos(angle) * nru;
-			pos2.y += sin(angle) * nrv;
-		}
-#endif
-	}
-
-#ifdef FillSolid
-	vColor = fillSolidColor;
-#endif
-
-#ifdef BorderSolid
-	vColor = borderSolidColor;
-#endif
-
-#ifdef FillGradient
-	float v = dot(vec4(pos2.xy, 1, 1), fillGradientTY);
-	vColor = mix(fillGradientColor2, fillGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
-#endif
-
-#ifdef BorderGradient
-	float v = dot(vec4(pos2.xy, 1, 1), borderGradientTY);
-	vColor = mix(borderGradientColor2, borderGradientColor1, v);	// As Y is inverted, Color2 first, then Color1
-#endif
-
-	vColor.a *= opacity;
-	vec4 pos;
-	pos.xy = pos2.xy * properties.xy;
-	pos.z = 1.0;
-	pos.w = 1.0;
-
-	float x = dot(pos, transformX);
-	float y = dot(pos, transformY);
-	if (renderingInfo.z == 1.0) {
-		float rw = renderingInfo.x;
-		float rh = renderingInfo.y;
-		float irw = 2.0 / rw;
-		float irh = 2.0 / rh;
-
-		x = (floor((x / irw) + 0.5) * irw) + irw / 2.0;
-		y = (floor((y / irh) + 0.5) * irh) + irh / 2.0;
-	}
-
-	gl_Position = vec4(x, y, zBias.x, 1);
-}

canvas2D/src/shaders/sprite2d.fragment.fx

@@ -1,67 +0,0 @@
-varying vec2 vUV;
-varying float vOpacity;
-
-#ifdef Scale9
-varying vec2 vTopLeftUV;
-varying vec2 vBottomRightUV;
-varying vec4 vScale9;
-varying vec2 vScaleFactor;
-#endif
-
-uniform bool alphaTest;
-uniform sampler2D diffuseSampler;
-
-void main(void) {
-	
-	vec2 uv = vUV;
-
-#ifdef Scale9
-
-	vec2 sizeUV = vBottomRightUV - vTopLeftUV;
-
-	// Compute Horizontal (U) Coordinate
-	float leftPartUV = vTopLeftUV.x + (vScale9.x / vScaleFactor.x);
-	float rightPartUV = vTopLeftUV.x + sizeUV.x - ((sizeUV.x - vScale9.z) / vScaleFactor.x);
-
-	if (vUV.x < leftPartUV) {
-		uv.x = vTopLeftUV.x + ((vUV.x- vTopLeftUV.x) * vScaleFactor.x);
-	}
-
-	else if (vUV.x > rightPartUV) {
-		uv.x = vTopLeftUV.x + vScale9.z + ((vUV.x - rightPartUV) * vScaleFactor.x);
-	}
-
-	else {
-		float r = (vUV.x - leftPartUV) / (rightPartUV - leftPartUV);
-		uv.x = vTopLeftUV.x + vScale9.x + ((vScale9.z-vScale9.x) * r);
-	}
-
-	// Compute Vertical (V) Coordinate
-	float topPartUV = (vTopLeftUV.y + (vScale9.y / vScaleFactor.y));
-	float bottomPartUV = (vTopLeftUV.y + sizeUV.y - ((sizeUV.y - vScale9.w) / vScaleFactor.y));
-
-	if (vUV.y < topPartUV) {
-		uv.y = vTopLeftUV.y + ((vUV.y - vTopLeftUV.y) * vScaleFactor.y);
-	}
-
-	else if (vUV.y > bottomPartUV) {
-		uv.y = vTopLeftUV.y + vScale9.w + ((vUV.y - bottomPartUV) * vScaleFactor.y);
-	}
-
-	else {
-		float r = (vUV.y - topPartUV) / (bottomPartUV - topPartUV);
-		uv.y = vTopLeftUV.y + vScale9.y + ((vScale9.w - vScale9.y) * r);
-	}
-
-#endif
-
-	vec4 color = texture2D(diffuseSampler, uv);
-	if (alphaTest)
-	{
-		if (color.a < 0.95) {
-			discard;
-		}
-	}
-	color.a *= vOpacity;
-	gl_FragColor = color;
-}

canvas2D/src/shaders/sprite2d.vertex.fx

@@ -1,121 +0,0 @@
-//based on if Instanced Array are supported or not, declare the field either as attribute or uniform
-#ifdef Instanced
-#define att attribute
-#else
-#define att uniform
-#endif
-
-// Attributes
-attribute float index;
-
-att vec2 topLeftUV;
-att vec2 sizeUV;
-#ifdef Scale9
-att vec2 scaleFactor;
-#endif
-att vec2 textureSize;
-
-// x: frame, y: invertY, z: alignToPixel
-att vec3 properties;
-
-#ifdef Scale9
-att vec4 scale9;
-#endif
-
-att vec2 zBias;
-att vec4 transformX;
-att vec4 transformY;
-att vec3 renderingInfo;
-att float opacity;
-
-// Uniforms
-
-// Output
-varying vec2 vUV;
-varying float vOpacity;
-
-#ifdef Scale9
-varying vec2 vTopLeftUV;
-varying vec2 vBottomRightUV;
-varying vec4 vScale9;
-varying vec2 vScaleFactor;
-#endif
-
-void main(void) {
-
-	vec2 pos2;
-
-	float frame = properties.x;
-	float invertY = properties.y;
-	float alignToPixel = properties.z;
-
-	// Left/Top
-	if (index == 0.0) {
-		pos2 = vec2(0.0, 0.0);
-		vUV = vec2(topLeftUV.x + (frame*sizeUV.x), topLeftUV.y);
-	}
-
-	// Left/Bottom
-	else if (index == 1.0) {
-		pos2 = vec2(0.0,  1.0);
-		vUV = vec2(topLeftUV.x + (frame*sizeUV.x), (topLeftUV.y + sizeUV.y));
-	}
-
-	// Right/Bottom
-	else if (index == 2.0) {
-		pos2 = vec2( 1.0,  1.0);
-		vUV = vec2(topLeftUV.x + sizeUV.x + (frame*sizeUV.x), (topLeftUV.y + sizeUV.y));
-	}
-
-	// Right/Top
-	else if (index == 3.0) {
-		pos2 = vec2( 1.0, 0.0);
-		vUV = vec2(topLeftUV.x + sizeUV.x + (frame*sizeUV.x), topLeftUV.y);
-	}
-
-	if (invertY == 1.0) {
-		vUV.y = 1.0 - vUV.y;
-	}
-
-	//vUV.x += 0.5 / textureSize.x;
-
-	vec4 pos;
-	//if (alignToPixel == 1.0)
-	//{
-	//	pos.xy = floor(pos2.xy * sizeUV * textureSize);
-	//} else {
-		pos.xy = pos2.xy * sizeUV * textureSize;
-	//}
-
-#ifdef Scale9
-	if (invertY == 1.0) {
-		vTopLeftUV = vec2(topLeftUV.x, 1.0 - (topLeftUV.y + sizeUV.y));
-		vBottomRightUV = vec2(topLeftUV.x + sizeUV.x, 1.0 - topLeftUV.y);
-		vScale9 = vec4(scale9.x, sizeUV.y - scale9.w, scale9.z, sizeUV.y - scale9.y);
-	}
-	else {
-		vTopLeftUV = topLeftUV;
-		vBottomRightUV = vec2(topLeftUV.x + sizeUV.x, topLeftUV.y + sizeUV.y);
-		vScale9 = scale9;
-	}
-	vScaleFactor = scaleFactor;
-#endif
-
-	vOpacity = opacity;
-	pos.z = 1.0;
-	pos.w = 1.0;
-
-	float x = dot(pos, transformX);
-	float y = dot(pos, transformY);
-	if (renderingInfo.z == 1.0) {
-		float rw = renderingInfo.x;
-		float rh = renderingInfo.y;
-		float irw = 2.0 / rw;
-		float irh = 2.0 / rh;
-
-		x = (floor((x / irw)) * irw) + irw / 2.0;
-		y = (floor((y / irh)) * irh) + irh / 2.0;
-	}
-
-	gl_Position = vec4(x, y, zBias.x, 1.0);
-}	

canvas2D/src/shaders/text2d.fragment.fx

@@ -1,35 +0,0 @@
-//#extension GL_OES_standard_derivatives : enable
-
-varying vec4 vColor;
-varying vec2 vUV;
-
-// Samplers
-uniform sampler2D diffuseSampler;
-
-void main(void) {
-#ifdef SignedDistanceField
-	float dist = texture2D(diffuseSampler, vUV).r;
-	if (dist < 0.5) {
-		discard;
-	}
-
-	// Another way using derivative, commented right now because I don't know if it worth doing it
-	//float edgeDistance = 0.5;
-	//float edgeWidth = 0.7 * length(vec2(dFdx(dist), dFdy(dist)));
-	//float opacity = dist * smoothstep(edgeDistance - edgeWidth, edgeDistance + edgeWidth, dist);
-
-	//float opacity = smoothstep(0.25, 0.75, dist);
-	gl_FragColor = vec4(vColor.xyz*dist, vColor.a);
-#else
-	vec4 color = texture2D(diffuseSampler, vUV);
-	if (color.a == 0.0) {
-		discard;
-	}
-#ifdef FontTexture
-	gl_FragColor = vec4(color.xxx*vColor.xyz*vColor.a, color.x*vColor.a);
-#else
-	gl_FragColor = color*vColor;
-#endif
-#endif
-
-}

canvas2D/src/shaders/text2d.vertex.fx

@@ -1,79 +0,0 @@
-// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
-#ifdef Instanced
-#define att attribute
-#else
-#define att uniform
-#endif
-
-// Attributes
-attribute float index;
-att vec2 zBias;
-
-att vec4 transformX;
-att vec4 transformY;
-att vec3 renderingInfo;
-att float opacity;
-
-att vec2 topLeftUV;
-att vec2 sizeUV;
-att vec2 textureSize;
-att vec4 color;
-att float superSampleFactor;
-
-// Output
-varying vec2 vUV;
-varying vec4 vColor;
-
-void main(void) {
-
-	vec2 pos2;
-
-	// Bottom/Left
-	if (index == 0.0) {
-		pos2 = vec2(0.0, 0.0);
-		vUV = vec2(topLeftUV.x, topLeftUV.y + sizeUV.y);
-	}
-
-	// Top/Left
-	else if (index == 1.0) {
-		pos2 = vec2(0.0, 1.0);
-		vUV = vec2(topLeftUV.x, topLeftUV.y);
-	}
-	
-	// Top/Right
-	else if (index == 2.0) {
-		pos2 = vec2(1.0, 1.0);
-		vUV = vec2(topLeftUV.x + sizeUV.x, topLeftUV.y);
-	}
-
-	// Bottom/Right
-	else if (index == 3.0) {
-		pos2 = vec2(1.0, 0.0);
-		vUV = vec2(topLeftUV.x + sizeUV.x, topLeftUV.y + sizeUV.y);
-	}
-
-	// Align texture coordinate to texel to enhance rendering quality
-//	vUV = (floor(vUV*textureSize) + vec2(0.5, 0.5)) / textureSize;
-	//vUV.x += 0.5 / textureSize.x;
-
-	vColor = color;
-	vColor.a *= opacity;
-	vec4 pos;
-	pos.xy = pos2.xy * superSampleFactor * sizeUV * textureSize;
-	pos.z = 1.0;
-	pos.w = 1.0;
-
-	float x = dot(pos, transformX);
-	float y = dot(pos, transformY);
-	if (renderingInfo.z == 1.0) {
-		float rw = renderingInfo.x;
-		float rh = renderingInfo.y;
-		float irw = 2.0 / rw;
-		float irh = 2.0 / rh;
-
-		x = ((floor((x / irw) + 0.5) * irw) + irw / 2.0) + 0.5*irw;
-		y = ((floor((y / irh) + 0.5) * irh) + irh / 2.0) + 0.5*irh;
-	}
-
-	gl_Position = vec4(x, y, zBias.x, 1.0);
-}

canvas2D/src/shaders/wireframe2d.fragment.fx

@@ -1,5 +0,0 @@
-varying vec4 vColor;
-
-void main(void) {
-	gl_FragColor = vColor;
-}

canvas2D/src/shaders/wireframe2d.vertex.fx

@@ -1,47 +0,0 @@
-// based on if Instanced Array are supported or not, declare the field either as attribute or uniform
-#ifdef Instanced
-#define att attribute
-#else
-#define att uniform
-#endif
-
-// Attributes
-attribute vec2 pos;
-attribute vec4 col;
-
-// x, y, z are
-//  x : alignedToPixel: 1.0 === yes, otherwise no
-//  y : 1/renderGroup.Width
-//  z : 1/renderGroup.height
-att vec3 properties;
-
-att vec2 zBias;
-att vec4 transformX;
-att vec4 transformY;
-att vec3 renderingInfo;
-att float opacity;
-
-// Uniforms
-
-// Output
-varying vec4 vColor;
-
-void main(void) {
-
-	vec4 p = vec4(pos.xy, 1.0, 1.0);
-	vColor = vec4(col.xyz, col.w*opacity);
-
-	float x = dot(p, transformX);
-	float y = dot(p, transformY);
-	if (renderingInfo.z == 1.0) {
-		float rw = renderingInfo.x;
-		float rh = renderingInfo.y;
-		float irw = 2.0 / rw;
-		float irh = 2.0 / rh;
-
-		x = (floor((x / irw) + 0.5) * irw) + irw/2.0;
-		y = (floor((y / irh) + 0.5) * irh) + irh/2.0;
-	}
-
-	gl_Position = vec4(x, y, zBias.x, 1);
-}

canvas2D/src/tsconfig.json

@@ -1,7 +0,0 @@
-{
-    "compilerOptions": {
-        "experimentalDecorators": true,
-        "module": "commonjs", 
-        "target": "es5"
-    }
-}

dist/preview release/what's new.md

@@ -113,20 +113,3 @@
   - `LongPressDelay` and `DragMovementThreshold` are now respectively Scene.LongPressDelay and Scene.DragMovementThreshold
 - HDRRenderingPipeline:
   - `HDRRenderingPipeline` has been removed because it is deprecated. It is now replaced by `StandardRenderingPipeline` which is more advanced. See [documentation](http://doc.babylonjs.com/tutorials/using_standard_rendering_pipeline)
- 
-## Canvas2D
-
-### Major Updates
- - Added text alignment and word wrap to Text2D ([abow](https://github.com/abow))
- - Support of [Scale9Sprite](http://doc.babylonjs.com/overviews/Canvas2D_Sprite2D#scale9sprite-feature) feature in Sprite2D ([nockawa](https://github.com/nockawa))
- - Support of [AtlasPicture](http://doc.babylonjs.com/overviews/Canvas2D_AtlasPicture) to store many pictures into a bit one, with the possibility to create one/many Sprite2D out of it. ([nockawa](https://github.com/nockawa))
- - Support of BMFont with the BitmaptFontTexture class, Text2D has now a bitmapFontTexture setting in the constructor to display text using a BitmapFontTexture ([nockawa](https://github.com/nockawa))
-
-### Minor Updates
- - WorldSpaceCanvas: TrackNode feature, a WSC can follow a Scene Node with an optional billboarding feature (always facing the camera)[Demo](http://babylonjs-playground.com/#1KYG17#1)
- - WorldSpaceCanvas: new setting unitScaleFactor to generated a bigger canvas than the world space mesh size. If you create a WSC with a size of 200;100 and a uSF of 3, the 3D Plane displaying the canvas will be 200;100 of scene units, the WSC will be 600;300 of pixels units.
-
-### Bug Fixing
- - Fix Rotation issue when the Parent's Primitive hadn't a identity scale. ([nockawa](https://github.com/nockawa))
- - Primitive's position computed from TrackedNode are now hidden when the node is out of the Viewing Frustum ([nockawa](https://github.com/nockawa))
- - WorldSpaceCanvas: sideOrientation is finally working, you can try Mesh.DOUBLESIDE to make you Canvas visible on both sides. ([nockawa](https://github.com/nockawa))

inspector/src/lib.d.ts

@@ -1,5 +1,5 @@
 /// <reference path="../../dist/preview release/babylon.d.ts"/>
-/// <reference path="../../dist/preview release/canvas2D/babylon.canvas2D.d.ts"/>
+/// <reference path="babylon.canvas2D.d.ts"/>
 
 interface ISplit {
     setSizes(sizes:Array<number>);

what's new.md

@@ -5,7 +5,6 @@
 - 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))
-- Canvas2D moved to a separate folder in main repo. Now you need to also include babylon.cavans2d.js to get Canvas@D feature ([deltakosh](https://github.com/deltakosh))
 - New BoneIKController [Demo](http://www.babylonjs-playground.com/#1EVNNB#15) ([abow](https://github.com/abow))
 - New BoneLookController [Demo](http://www.babylonjs-playground.com/#1B1PUZ#15) ([abow](https://github.com/abow))
 - You can now build your own version of babylon.js with `gulp build-custom` [Doc](http://doc.babylonjs.com/generals/how_to_start) ([deltakosh](https://github.com/deltakosh))
@@ -43,12 +42,6 @@
 - PerfCounter class added to monitor time/counter and expose min/max/average/lastSecondAverage/current metrics. Updated engine/scene current counter to use this class, exposing new properties as well to access the PerfCounter object ([nockawa](https://github.com/nockawa))
 - Better keyboard event handling which is now done at canvas level and not at window level ([deltakosh](https://github.com/deltakosh)) 
 - New `scene.hoverCursor` property to define a custom cursor when moving mouse over meshes ([deltakosh](https://github.com/deltakosh)) 
-- Canvas2D: ([nockawa](https://github.com/nockawa)) 
- - Performance metrics added
- - Text2D super sampling to enhance quality in World Space Canvas
- - World Space Canvas is now rendering in an adaptive way for its resolution to fit the on screen projected one to achieve a good rendering quality
- - Transparent Primitives are now drawn with Instanced Array when supported
- - New property in Canvas2D (instances) that contains all instances of canvas2d [Temechon](https://github.com/Temechon)
 - WebVR Camera was updated to be conform with the current specs. ([RaananW](https://github.com/RaananW)) 
 - New "CubeTextureTask" function will allow you to load a CubeTexture in the assetsManager. ([agallouin](https://github.com/AGallouin)) 
 - Scene.stopAnimation has now an optional second parameter, the name of the animation to kill. Usefull if a mesh has multiple animations. ([agallouin](https://github.com/AGallouin)) 
@@ -69,24 +62,9 @@
 - Fixed RenderTargetTexture meshes selection ([deltakosh](https://github.com/deltakosh))
 - Fixed camera speed computation ([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
- - Primitive:
-	- `ZOrder` fixed in Primitives created inline
-	- Z-Order is now correctly distributed along the whole canvas object graph
- - `Sprite2D`: 
-	- texture size is now set by default as expected
-	- can have no `id` set
- - `Text2D`: 
-	- Fix bad rendering quality on Chrome
-	- Rendering above transparent surface is now blending correctly
 
 ### Breaking changes
  - FollowCamera.target was renamed to FollowCamera.lockedTarget to avoid conflicts ([deltakosh](https://github.com/deltakosh)) 
  - Removed legacy shaders support ([deltakosh](https://github.com/deltakosh))
- - Canvas2D: ([nockawa](https://github.com/nockawa))
-  - `WorldSpaceCanvas2D`:
-	- WorldSpaceRenderScale is no longer supported (deprecated because of adaptive feature added).